/*
 * DJ PRESTIGE SOUND - Main Stylesheet
 * Version: 2.0 - Clean Rebuild
 * Date: 2024-12-14
 *
 * Structure:
 * 1. CSS Variables
 * 2. Reset & Base
 * 3. Typography
 * 4. Navbar
 * 5. Hero
 * 6. Sections
 * 7. Footer
 * 8. Components
 * 9. Utilities
 * 10. Responsive
 */

/* ═══════════════════════════════════════════════════════════════
   1. CSS VARIABLES
   ═══════════════════════════════════════════════════════════════ */
:root {
    /* Colors - Dark Theme (Default) */
    --dark-950: #050506;
    --dark-900: #0a0a0c;
    --dark-800: #12121a;
    --dark-700: #1a1a24;
    --dark-600: #252530;

    /* Gold Palette */
    --gold-500: #d4af37;
    --gold-400: #e4c04a;
    --gold-300: #f0d060;
    --gold-200: #f8e080;

    /* Text Colors */
    --white: #ffffff;
    --white-90: rgba(255, 255, 255, 0.9);
    --white-80: rgba(255, 255, 255, 0.8);
    --white-60: rgba(255, 255, 255, 0.6);
    --white-40: rgba(255, 255, 255, 0.4);

    /* Typography */
    --font-display: 'Cormorant Garamond', Georgia, serif;
    --font-body: 'Jost', -apple-system, BlinkMacSystemFont, sans-serif;

    /* Spacing */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-24: 6rem;

    /* Layout */
    --navbar-height: 80px;
    --max-width: 1400px;
    --border-radius: 12px;
    --border-radius-lg: 20px;

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;

    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.2);
    --shadow-gold: 0 0 30px rgba(212, 175, 55, 0.15);
}

/* Light Theme Variables */
[data-theme="light"] {
    --dark-950: #faf7f0;
    --dark-900: #f5f2eb;
    --dark-800: #ebe8e0;
    --dark-700: #e0ddd5;
    --dark-600: #d5d2ca;

    --gold-500: #9a7b2c;
    --gold-400: #b08d1a;
    --gold-300: #c9a227;

    --white: #1a1a1a;
    --white-90: rgba(26, 26, 26, 0.9);
    --white-80: rgba(26, 26, 26, 0.8);
    --white-60: rgba(26, 26, 26, 0.6);
    --white-40: rgba(26, 26, 26, 0.4);
}

/* ═══════════════════════════════════════════════════════════════
   2. RESET & BASE
   ═══════════════════════════════════════════════════════════════ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    color: var(--white-90);
    background: var(--dark-950);
    min-height: 100vh;
    overflow-x: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

ul, ol {
    list-style: none;
}

/* ═══════════════════════════════════════════════════════════════
   3. TYPOGRAPHY
   ═══════════════════════════════════════════════════════════════ */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.2;
    color: var(--white);
}

h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); }
h2 { font-size: clamp(2rem, 4vw, 3rem); }
h3 { font-size: clamp(1.5rem, 3vw, 2rem); }
h4 { font-size: clamp(1.25rem, 2vw, 1.5rem); }

p {
    margin-bottom: var(--space-4);
    color: var(--white-80);
}

.text-gold {
    color: var(--gold-400);
}

/* ═══════════════════════════════════════════════════════════════
   4. NAVBAR
   ═══════════════════════════════════════════════════════════════ */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--navbar-height);
    background: rgba(10, 10, 12, 0.9);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(212, 175, 55, 0.1);
    z-index: 10000;
    transition: var(--transition-base);
}

.navbar.scrolled {
    background: rgba(10, 10, 12, 0.98);
    box-shadow: var(--shadow-lg);
}

.navbar__container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--space-8);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Logo */
.navbar__logo {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--gold-400);
    letter-spacing: 0.05em;
    transition: var(--transition-base);
}

.navbar__logo:hover {
    color: var(--gold-300);
    text-shadow: var(--shadow-gold);
}

/* Desktop Menu */
.navbar__menu {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.navbar__item {
    position: relative;
}

.navbar__link {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    color: var(--white-80);
    font-size: 0.95rem;
    font-weight: 400;
    border-radius: 8px;
    transition: var(--transition-base);
}

.navbar__link:hover,
.navbar__link.active {
    color: var(--gold-400);
    background: rgba(212, 175, 55, 0.08);
}

.navbar__link i {
    font-size: 0.7rem;
    transition: transform var(--transition-fast);
}

.navbar__item--dropdown:hover .navbar__link i {
    transform: rotate(180deg);
}

/* Dropdown */
.navbar__dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background: rgba(15, 15, 18, 0.98);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(212, 175, 55, 0.15);
    border-radius: var(--border-radius);
    padding: var(--space-2) 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: var(--transition-base);
    box-shadow: var(--shadow-lg);
}

.navbar__item--dropdown:hover .navbar__dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.navbar__dropdown li a {
    display: block;
    padding: var(--space-3) var(--space-4);
    color: var(--white-80);
    transition: var(--transition-fast);
}

.navbar__dropdown li a:hover {
    color: var(--gold-400);
    background: rgba(212, 175, 55, 0.08);
}

/* CTA Group (Lang + Cart + Buttons) */
.navbar__cta-group {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

/* Language Selector */
.navbar__lang-selector {
    position: relative;
}

.navbar__lang-toggle {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: rgba(212, 175, 55, 0.08);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 8px;
    color: var(--white-80);
    font-size: 0.85rem;
    transition: var(--transition-base);
}

.navbar__lang-toggle:hover {
    background: rgba(212, 175, 55, 0.15);
    border-color: var(--gold-400);
}

.navbar__lang-flag {
    font-size: 1.1rem;
}

.navbar__lang-toggle i {
    font-size: 0.65rem;
    transition: transform var(--transition-fast);
}

.navbar__lang-selector.open .navbar__lang-toggle i {
    transform: rotate(180deg);
}

.navbar__lang-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 160px;
    background: rgba(15, 15, 18, 0.98);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: var(--border-radius);
    padding: var(--space-2) 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: var(--transition-base);
    box-shadow: var(--shadow-lg);
    z-index: 10001;
}

.navbar__lang-selector.open .navbar__lang-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.navbar__lang-option {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    color: var(--white-80);
    transition: var(--transition-fast);
}

.navbar__lang-option:hover {
    background: rgba(212, 175, 55, 0.08);
    color: var(--gold-400);
}

.navbar__lang-option--active {
    color: var(--gold-400);
    background: rgba(212, 175, 55, 0.1);
}

/* Cart */
.navbar__cart {
    position: relative;
}

.navbar__cart-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    background: rgba(212, 175, 55, 0.08);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 10px;
    color: var(--gold-400);
    font-size: 1rem;
    transition: var(--transition-base);
    position: relative;
}

.navbar__cart-toggle:hover {
    background: rgba(212, 175, 55, 0.15);
    border-color: var(--gold-400);
    transform: translateY(-2px);
}

.navbar__cart-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 20px;
    height: 20px;
    background: linear-gradient(135deg, var(--gold-400), var(--gold-500));
    color: var(--dark-900);
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    opacity: 0;
    transform: scale(0);
    transition: var(--transition-base);
}

.navbar__cart-badge.has-items {
    opacity: 1;
    transform: scale(1);
}

/* Cart Panel - Agrandi pour meilleure visibilité */
.navbar__cart-panel {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    width: 420px;
    max-height: 80vh;
    background: rgba(15, 15, 18, 0.98);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: var(--border-radius-lg);
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: var(--transition-base);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5),
                0 0 0 1px rgba(212, 175, 55, 0.1);
    z-index: 10001;
    overflow: hidden;
}

.navbar__cart.open .navbar__cart-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.navbar__cart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4);
    border-bottom: 1px solid rgba(212, 175, 55, 0.1);
}

.navbar__cart-header h4 {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 1rem;
    color: var(--gold-400);
}

.navbar__cart-close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: var(--white-60);
    transition: var(--transition-fast);
}

.navbar__cart-close:hover {
    background: rgba(212, 175, 55, 0.1);
    color: var(--gold-400);
}

.navbar__cart-items {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-4);
    max-height: 350px;
    scrollbar-width: thin;
    scrollbar-color: var(--gold-400) rgba(255, 255, 255, 0.05);
}

.navbar__cart-items::-webkit-scrollbar {
    width: 6px;
}

.navbar__cart-items::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
}

.navbar__cart-items::-webkit-scrollbar-thumb {
    background: var(--gold-400);
    border-radius: 3px;
}

.navbar__cart-items::-webkit-scrollbar-thumb:hover {
    background: var(--gold-300);
}

.navbar__cart-empty {
    text-align: center;
    padding: var(--space-8) var(--space-4);
    color: var(--white-60);
}

.navbar__cart-empty i {
    font-size: 2.5rem;
    color: var(--white-40);
    margin-bottom: var(--space-4);
}

.navbar__cart-footer {
    padding: var(--space-4);
    border-top: 1px solid rgba(212, 175, 55, 0.1);
}

.navbar__cart-total {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--space-4);
    font-size: 1.1rem;
}

.navbar__cart-total strong {
    color: var(--gold-400);
}

/* CTA Buttons */
.navbar__cta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: linear-gradient(135deg, var(--gold-400), var(--gold-500));
    color: var(--dark-900);
    font-size: 0.9rem;
    font-weight: 500;
    border-radius: 10px;
    transition: var(--transition-base);
}

.navbar__cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(212, 175, 55, 0.3);
}

.navbar__cta--secondary {
    background: transparent;
    border: 1px solid rgba(212, 175, 55, 0.3);
    color: var(--gold-400);
}

.navbar__cta--secondary:hover {
    background: rgba(212, 175, 55, 0.1);
    border-color: var(--gold-400);
}

.navbar__app-badge {
    font-size: 0.65rem;
    padding: 2px 6px;
    background: rgba(212, 175, 55, 0.2);
    border-radius: 4px;
}

/* Mobile Toggle */
.navbar__toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
    background: rgba(212, 175, 55, 0.08);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 10px;
    cursor: pointer;
    transition: var(--transition-base);
}

.navbar__toggle:hover {
    background: rgba(212, 175, 55, 0.15);
}

.navbar__toggle-icon,
.navbar__toggle-icon::before,
.navbar__toggle-icon::after {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--gold-400);
    border-radius: 2px;
    transition: var(--transition-base);
}

.navbar__toggle-icon::before,
.navbar__toggle-icon::after {
    content: '';
    position: absolute;
}

.navbar__toggle-icon {
    position: relative;
}

.navbar__toggle-icon::before {
    top: -7px;
}

.navbar__toggle-icon::after {
    bottom: -7px;
}

/* Toggle Active State */
.navbar__toggle--active .navbar__toggle-icon {
    background: transparent;
}

.navbar__toggle--active .navbar__toggle-icon::before {
    top: 0;
    transform: rotate(45deg);
}

.navbar__toggle--active .navbar__toggle-icon::after {
    bottom: 0;
    transform: rotate(-45deg);
}

/* Mobile Menu */
.navbar__mobile-menu {
    position: fixed;
    top: var(--navbar-height);
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(10, 10, 12, 0.98);
    backdrop-filter: blur(20px);
    padding: var(--space-6);
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateX(100%);
    transition: var(--transition-base);
    z-index: 9999;
}

.navbar__mobile-menu--open {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

.navbar__mobile-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.navbar__mobile-list > li > a {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    color: var(--white-80);
    font-size: 1.1rem;
    border-radius: 10px;
    transition: var(--transition-fast);
}

.navbar__mobile-list > li > a:hover {
    background: rgba(212, 175, 55, 0.08);
    color: var(--gold-400);
}

.navbar__mobile-list > li > a i {
    width: 24px;
    color: var(--gold-400);
    opacity: 0.7;
}

/* Mobile Accordion */
.navbar__mobile-accordion-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--space-4);
    color: var(--white-80);
    font-size: 1.1rem;
    border-radius: 10px;
    transition: var(--transition-fast);
}

.navbar__mobile-accordion-toggle:hover {
    background: rgba(212, 175, 55, 0.08);
    color: var(--gold-400);
}

.navbar__mobile-accordion-toggle span {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.navbar__mobile-accordion-toggle span i {
    width: 24px;
    color: var(--gold-400);
    opacity: 0.7;
}

.navbar__mobile-accordion-icon {
    transition: transform var(--transition-fast);
}

.navbar__mobile-accordion.open .navbar__mobile-accordion-icon {
    transform: rotate(180deg);
}

.navbar__mobile-accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-base);
}

.navbar__mobile-accordion.open .navbar__mobile-accordion-content {
    max-height: 500px;
}

.navbar__mobile-accordion-content li a {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4) var(--space-3) var(--space-12);
    color: var(--white-60);
    font-size: 1rem;
    transition: var(--transition-fast);
}

.navbar__mobile-accordion-content li a:hover {
    color: var(--gold-400);
}

.navbar__mobile-accordion-content li a i {
    width: 20px;
    font-size: 0.9rem;
    color: var(--gold-400);
    opacity: 0.5;
}

/* Mobile Divider */
.navbar__mobile-divider {
    height: 1px;
    background: rgba(212, 175, 55, 0.1);
    margin: var(--space-4) 0;
}

/* Mobile CTA */
.navbar__mobile-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-4);
    background: linear-gradient(135deg, var(--gold-400), var(--gold-500));
    color: var(--dark-900);
    font-size: 1rem;
    font-weight: 500;
    border-radius: 12px;
    transition: var(--transition-base);
}

.navbar__mobile-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(212, 175, 55, 0.3);
}

.navbar__mobile-cta--secondary {
    background: transparent;
    border: 1px solid rgba(212, 175, 55, 0.3);
    color: var(--gold-400);
}

/* Mobile Language Buttons */
.navbar__mobile-langs {
    display: flex;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-4) 0;
}

.navbar__mobile-lang-btn {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    transition: var(--transition-fast);
}

.navbar__mobile-lang-btn:hover,
.navbar__mobile-lang-btn.active {
    background: rgba(212, 175, 55, 0.15);
    border-color: var(--gold-400);
}

/* ═══════════════════════════════════════════════════════════════
   10. RESPONSIVE - Tablet
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 1200px) {
    .navbar__cta span {
        display: none;
    }

    .navbar__cta {
        padding: var(--space-3);
    }
}

@media (max-width: 1024px) {
    /* Hide desktop elements */
    .navbar__menu,
    .navbar__lang-selector,
    .navbar__cta:not(.navbar__cta--app) {
        display: none;
    }

    /* Show mobile toggle */
    .navbar__toggle {
        display: flex;
    }

    /* Ajuster le panier pour tablette */
    .navbar__cart-panel {
        width: 380px;
        max-height: 70vh;
        right: -10px;
    }

    .navbar__cart-items {
        max-height: 280px;
    }

    .cart-suggestion__name {
        font-size: 0.85rem;
    }

    .cart-suggestion__price {
        font-size: 0.85rem;
    }
}

@media (max-width: 768px) {
    .navbar__container {
        padding: 0 var(--space-4);
    }

    .navbar__cart,
    .navbar__cta--app {
        display: none;
    }
}

/* ═══════════════════════════════════════════════════════════════
   LIGHT THEME - Navbar
   ═══════════════════════════════════════════════════════════════ */
[data-theme="light"] .navbar {
    background: rgba(250, 247, 240, 0.92);
    border-bottom-color: rgba(201, 162, 39, 0.15);
}

[data-theme="light"] .navbar.scrolled {
    background: rgba(250, 247, 240, 0.98);
}

[data-theme="light"] .navbar__link {
    color: #4a4540;
}

[data-theme="light"] .navbar__link:hover,
[data-theme="light"] .navbar__link.active {
    color: #9a7b2c;
    background: rgba(201, 162, 39, 0.08);
}

[data-theme="light"] .navbar__dropdown {
    background: rgba(255, 253, 248, 0.98);
    border-color: rgba(201, 162, 39, 0.2);
}

[data-theme="light"] .navbar__dropdown li a {
    color: #4a4540;
}

[data-theme="light"] .navbar__dropdown li a:hover {
    color: #9a7b2c;
}

[data-theme="light"] .navbar__lang-toggle,
[data-theme="light"] .navbar__cart-toggle {
    background: rgba(201, 162, 39, 0.06);
    border-color: rgba(201, 162, 39, 0.2);
    color: #4a4540;
}

[data-theme="light"] .navbar__lang-dropdown,
[data-theme="light"] .navbar__cart-panel {
    background: rgba(255, 253, 248, 0.98);
    border-color: rgba(201, 162, 39, 0.2);
}

[data-theme="light"] .navbar__mobile-menu {
    background: rgba(250, 247, 240, 0.98);
}

/* ═══════════════════════════════════════════════════════════════
   5. HERO SECTION
   ═══════════════════════════════════════════════════════════════ */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--dark-950);
}

/* Slideshow Background */
.hero__slideshow {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero__slideshow-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
}

.hero__slideshow-slide.active {
    opacity: 1;
}

/* Overlay Gradient */
.hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        radial-gradient(ellipse 80% 70% at 50% 50%,
            rgba(5, 5, 6, 0.3) 0%,
            rgba(5, 5, 6, 0.6) 50%,
            rgba(5, 5, 6, 0.85) 100%
        ),
        linear-gradient(180deg,
            rgba(5, 5, 6, 0.7) 0%,
            rgba(5, 5, 6, 0.4) 30%,
            rgba(5, 5, 6, 0.4) 70%,
            rgba(5, 5, 6, 0.8) 100%
        );
}

/* Content */
.hero__content {
    position: relative;
    z-index: 10;
    text-align: center;
    padding: var(--space-8);
    max-width: 1000px;
}

/* Title */
.hero__title {
    margin-bottom: var(--space-8);
}

.hero__title-main {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(3rem, 10vw, 8rem);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 0.95;
    margin-bottom: var(--space-4);
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.9) 0%,
        rgba(212, 175, 55, 0.9) 50%,
        rgba(255, 255, 255, 0.9) 100%
    );
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shimmer 8s ease-in-out infinite;
    text-shadow: 0 0 80px rgba(212, 175, 55, 0.3);
}

@keyframes shimmer {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.hero__title-sub {
    display: block;
    font-family: var(--font-body);
    font-size: clamp(1rem, 2.5vw, 1.5rem);
    font-weight: 300;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--gold-400);
    opacity: 0.9;
}

/* Label Badge */
.hero__label {
    display: inline-block;
    padding: var(--space-2) var(--space-4);
    background: rgba(212, 175, 55, 0.1);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 50px;
    font-size: 0.85rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--gold-400);
    margin-bottom: var(--space-6);
}

/* Description */
.hero__description {
    max-width: 600px;
    margin: 0 auto var(--space-8);
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--white-70);
}

/* Buttons */
.hero__buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-4);
}

.hero__button {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-8);
    font-size: 1rem;
    font-weight: 500;
    border-radius: 50px;
    transition: var(--transition-base);
    text-decoration: none;
}

.hero__button--primary {
    background: linear-gradient(135deg, var(--gold-400), var(--gold-500));
    color: var(--dark-900);
    box-shadow: 0 4px 20px rgba(212, 175, 55, 0.3);
}

.hero__button--primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(212, 175, 55, 0.4);
}

.hero__button--secondary {
    background: transparent;
    color: var(--white);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.hero__button--secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-3px);
}

/* Scroll Indicator */
.hero__scroll {
    position: absolute;
    bottom: var(--space-8);
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    color: var(--white-60);
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    animation: float 3s ease-in-out infinite;
}

.hero__scroll-line {
    width: 1px;
    height: 60px;
    background: linear-gradient(to bottom, var(--gold-400), transparent);
}

@keyframes float {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(10px); }
}

/* Decorative Elements */
.hero__blobs {
    position: absolute;
    inset: 0;
    z-index: 2;
    overflow: hidden;
    pointer-events: none;
}

.hero__blob {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.15) 0%, transparent 70%);
    filter: blur(80px);
    animation: pulse 8s ease-in-out infinite;
}

.hero__blob--1 {
    width: 500px;
    height: 500px;
    top: -10%;
    left: -10%;
    animation-delay: 0s;
}

.hero__blob--2 {
    width: 400px;
    height: 400px;
    bottom: -10%;
    right: -10%;
    animation-delay: -4s;
}

.hero__blob--3 {
    width: 300px;
    height: 300px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-delay: -2s;
}

@keyframes pulse {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.1); }
}

/* Hero Responsive */
@media (max-width: 768px) {
    .hero__content {
        padding: var(--space-6);
    }

    .hero__title-main {
        letter-spacing: 0.05em;
    }

    .hero__title-sub {
        letter-spacing: 0.15em;
        font-size: 0.9rem;
    }

    .hero__buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .hero__button {
        justify-content: center;
    }

    .hero__scroll {
        display: none;
    }
}

/* Hero Light Theme */
[data-theme="light"] .hero {
    background: var(--dark-950);
}

[data-theme="light"] .hero__overlay {
    background:
        radial-gradient(ellipse 80% 70% at 50% 50%,
            rgba(250, 247, 240, 0.2) 0%,
            rgba(250, 247, 240, 0.5) 50%,
            rgba(250, 247, 240, 0.85) 100%
        ),
        linear-gradient(180deg,
            rgba(250, 247, 240, 0.6) 0%,
            rgba(250, 247, 240, 0.3) 30%,
            rgba(250, 247, 240, 0.3) 70%,
            rgba(250, 247, 240, 0.7) 100%
        );
}

[data-theme="light"] .hero__title-main {
    background: linear-gradient(
        135deg,
        rgba(26, 26, 26, 0.9) 0%,
        rgba(154, 123, 44, 0.9) 50%,
        rgba(26, 26, 26, 0.9) 100%
    );
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
}

[data-theme="light"] .hero__title-sub {
    color: var(--gold-500);
}

[data-theme="light"] .hero__description {
    color: #4a4a4a;
}

[data-theme="light"] .hero__button--primary {
    background: linear-gradient(135deg, var(--gold-500), #8a6d1b);
    color: white;
}

[data-theme="light"] .hero__button--secondary {
    color: #1a1a1a;
    border-color: rgba(0, 0, 0, 0.2);
}

[data-theme="light"] .hero__button--secondary:hover {
    background: rgba(0, 0, 0, 0.05);
}

/* ═══════════════════════════════════════════════════════════════
   6. SECTIONS - General Layout
   ═══════════════════════════════════════════════════════════════ */
.section {
    padding: var(--space-24) 0;
    position: relative;
}

.section--dark {
    background: var(--dark-900);
}

.section--darker {
    background: var(--dark-950);
}

.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--space-8);
}

@media (max-width: 768px) {
    .section {
        padding: var(--space-16) 0;
    }

    .container {
        padding: 0 var(--space-4);
    }
}

/* Section Header */
.section__header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto var(--space-16);
}

.section__label {
    display: inline-block;
    padding: var(--space-2) var(--space-4);
    background: rgba(212, 175, 55, 0.1);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 50px;
    font-size: 0.8rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--gold-400);
    margin-bottom: var(--space-4);
}

.section__title {
    font-size: clamp(2rem, 5vw, 3.5rem);
    margin-bottom: var(--space-4);
    background: linear-gradient(135deg, var(--white) 0%, var(--gold-400) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.section__subtitle {
    font-size: 1.1rem;
    color: var(--white-60);
    line-height: 1.7;
}

/* ═══════════════════════════════════════════════════════════════
   6.1 SERVICE CARDS
   ═══════════════════════════════════════════════════════════════ */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--space-6);
}

.service-card {
    position: relative;
    background: var(--dark-800);
    border: 1px solid rgba(212, 175, 55, 0.1);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    transition: var(--transition-base);
}

.service-card:hover {
    transform: translateY(-8px);
    border-color: rgba(212, 175, 55, 0.3);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3), 0 0 40px rgba(212, 175, 55, 0.1);
}

.service-card__image {
    position: relative;
    height: 220px;
    overflow: hidden;
}

.service-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.service-card:hover .service-card__image img {
    transform: scale(1.1);
}

.service-card__image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, var(--dark-800) 0%, transparent 50%);
}

.service-card__badge {
    position: absolute;
    top: var(--space-4);
    left: var(--space-4);
    padding: var(--space-1) var(--space-3);
    background: linear-gradient(135deg, var(--gold-400), var(--gold-500));
    color: var(--dark-900);
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 20px;
    z-index: 1;
}

.service-card__content {
    padding: var(--space-6);
}

.service-card__icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(212, 175, 55, 0.1);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 12px;
    color: var(--gold-400);
    font-size: 1.25rem;
    margin-bottom: var(--space-4);
}

.service-card__title {
    font-size: 1.4rem;
    margin-bottom: var(--space-3);
    color: var(--white);
}

.service-card__description {
    color: var(--white-60);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: var(--space-4);
}

.service-card__price {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.service-card__price-value {
    font-family: var(--font-display);
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--gold-400);
}

.service-card__price-unit {
    font-size: 0.9rem;
    color: var(--white-40);
}

.service-card__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--gold-400);
    font-size: 0.9rem;
    font-weight: 500;
    transition: var(--transition-fast);
}

.service-card__link:hover {
    gap: var(--space-3);
}

.service-card__link i {
    transition: transform var(--transition-fast);
}

.service-card:hover .service-card__link i {
    transform: translateX(4px);
}

/* ═══════════════════════════════════════════════════════════════
   6.2 TESTIMONIALS
   ═══════════════════════════════════════════════════════════════ */
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: var(--space-6);
}

.testimonial-card {
    background: var(--dark-800);
    border: 1px solid rgba(212, 175, 55, 0.1);
    border-radius: var(--border-radius-lg);
    padding: var(--space-8);
    transition: var(--transition-base);
}

.testimonial-card:hover {
    border-color: rgba(212, 175, 55, 0.25);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.testimonial-card__stars {
    display: flex;
    gap: var(--space-1);
    margin-bottom: var(--space-4);
    color: var(--gold-400);
}

.testimonial-card__quote {
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--white-80);
    margin-bottom: var(--space-6);
    font-style: italic;
}

.testimonial-card__quote::before {
    content: '"';
    font-family: var(--font-display);
    font-size: 3rem;
    color: var(--gold-400);
    opacity: 0.3;
    line-height: 0;
    vertical-align: -0.5em;
    margin-right: var(--space-2);
}

.testimonial-card__author {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.testimonial-card__avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(212, 175, 55, 0.3);
}

.testimonial-card__info h4 {
    font-size: 1rem;
    margin-bottom: var(--space-1);
    color: var(--white);
}

.testimonial-card__info span {
    font-size: 0.85rem;
    color: var(--white-50);
}

/* ═══════════════════════════════════════════════════════════════
   6.3 GALLERY
   ═══════════════════════════════════════════════════════════════ */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-4);
}

.gallery-item {
    position: relative;
    aspect-ratio: 4/3;
    border-radius: var(--border-radius);
    overflow: hidden;
    cursor: pointer;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.gallery-item:hover img {
    transform: scale(1.1);
}

.gallery-item__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 60%);
    opacity: 0;
    transition: var(--transition-base);
    display: flex;
    align-items: flex-end;
    padding: var(--space-4);
}

.gallery-item:hover .gallery-item__overlay {
    opacity: 1;
}

.gallery-item__title {
    color: var(--white);
    font-size: 1rem;
    font-weight: 500;
}

/* ═══════════════════════════════════════════════════════════════
   6.4 CONTACT SECTION
   ═══════════════════════════════════════════════════════════════ */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
    align-items: start;
}

@media (max-width: 968px) {
    .contact-grid {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }
}

.contact-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.contact-info__item {
    display: flex;
    gap: var(--space-4);
}

.contact-info__icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(212, 175, 55, 0.1);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 12px;
    color: var(--gold-400);
    font-size: 1.1rem;
    flex-shrink: 0;
}

.contact-info__text h4 {
    font-size: 1rem;
    margin-bottom: var(--space-1);
    color: var(--white);
}

.contact-info__text p,
.contact-info__text a {
    color: var(--white-60);
    font-size: 0.95rem;
}

.contact-info__text a:hover {
    color: var(--gold-400);
}

/* ═══════════════════════════════════════════════════════════════
   7. FOOTER
   ═══════════════════════════════════════════════════════════════ */
.footer {
    background: var(--dark-950);
    border-top: 1px solid rgba(212, 175, 55, 0.1);
    padding: var(--space-16) 0 var(--space-8);
}

.footer__grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--space-12);
    margin-bottom: var(--space-12);
}

@media (max-width: 968px) {
    .footer__grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-8);
    }
}

@media (max-width: 576px) {
    .footer__grid {
        grid-template-columns: 1fr;
    }
}

/* Footer Brand */
.footer__brand {
    max-width: 300px;
}

.footer__logo {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--gold-400);
    margin-bottom: var(--space-4);
    display: block;
}

.footer__description {
    color: var(--white-60);
    font-size: 0.95rem;
    line-height: 1.7;
    margin-bottom: var(--space-6);
}

.footer__social {
    display: flex;
    gap: var(--space-3);
}

.footer__social a {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: var(--white-60);
    transition: var(--transition-fast);
}

.footer__social a:hover {
    background: rgba(212, 175, 55, 0.15);
    border-color: var(--gold-400);
    color: var(--gold-400);
}

/* Footer Columns */
.footer__column h4 {
    font-size: 1rem;
    color: var(--white);
    margin-bottom: var(--space-6);
    font-weight: 600;
}

.footer__links {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.footer__links a {
    color: var(--white-60);
    font-size: 0.95rem;
    transition: var(--transition-fast);
}

.footer__links a:hover {
    color: var(--gold-400);
    padding-left: var(--space-2);
}

/* Footer Contact */
.footer__contact-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--white-60);
    font-size: 0.95rem;
    margin-bottom: var(--space-3);
}

.footer__contact-item i {
    color: var(--gold-400);
    width: 16px;
}

.footer__contact-item a:hover {
    color: var(--gold-400);
}

/* Footer Bottom */
.footer__bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--space-8);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    flex-wrap: wrap;
    gap: var(--space-4);
}

.footer__copyright {
    color: var(--white-40);
    font-size: 0.85rem;
}

.footer__legal {
    display: flex;
    gap: var(--space-6);
}

.footer__legal a {
    color: var(--white-40);
    font-size: 0.85rem;
    transition: var(--transition-fast);
}

.footer__legal a:hover {
    color: var(--gold-400);
}

/* ═══════════════════════════════════════════════════════════════
   8. COMPONENTS - Buttons
   ═══════════════════════════════════════════════════════════════ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 500;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    transition: var(--transition-base);
    text-decoration: none;
}

.btn--primary {
    background: linear-gradient(135deg, var(--gold-400), var(--gold-500));
    color: var(--dark-900);
}

.btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(212, 175, 55, 0.3);
}

.btn--secondary {
    background: transparent;
    border: 1px solid rgba(212, 175, 55, 0.3);
    color: var(--gold-400);
}

.btn--secondary:hover {
    background: rgba(212, 175, 55, 0.1);
    border-color: var(--gold-400);
}

.btn--outline {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--white);
}

.btn--outline:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.4);
}

.btn--full {
    width: 100%;
}

.btn--lg {
    padding: var(--space-4) var(--space-8);
    font-size: 1rem;
}

.btn--sm {
    padding: var(--space-2) var(--space-4);
    font-size: 0.85rem;
}

/* ═══════════════════════════════════════════════════════════════
   8.1 FORMS
   ═══════════════════════════════════════════════════════════════ */
.form-group {
    margin-bottom: var(--space-4);
}

.form-label {
    display: block;
    margin-bottom: var(--space-2);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--white-80);
}

.form-input,
.form-textarea,
.form-select {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    background: var(--dark-800);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: var(--white);
    font-family: var(--font-body);
    font-size: 1rem;
    transition: var(--transition-fast);
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
    outline: none;
    border-color: var(--gold-400);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
}

.form-input::placeholder,
.form-textarea::placeholder {
    color: var(--white-40);
}

.form-textarea {
    min-height: 150px;
    resize: vertical;
}

.form-select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23999' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-4) center;
    padding-right: var(--space-10);
}

/* ═══════════════════════════════════════════════════════════════
   8.2 PARTNERS/LOGOS
   ═══════════════════════════════════════════════════════════════ */
.partners {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--space-8);
    padding: var(--space-8) 0;
}

.partners img {
    height: 40px;
    width: auto;
    opacity: 0.5;
    filter: grayscale(100%);
    transition: var(--transition-base);
}

.partners img:hover {
    opacity: 1;
    filter: grayscale(0%);
}

/* ═══════════════════════════════════════════════════════════════
   8.3 PROMO BANNER
   ═══════════════════════════════════════════════════════════════ */
.promo-banner {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.1) 0%, rgba(212, 175, 55, 0.03) 100%);
    border: 1px solid rgba(212, 175, 55, 0.25);
    border-radius: var(--border-radius-lg);
    padding: var(--space-8);
    text-align: center;
}

.promo-banner__title {
    font-size: 1.5rem;
    margin-bottom: var(--space-3);
    color: var(--gold-400);
}

.promo-banner__text {
    color: var(--white-70);
    margin-bottom: var(--space-6);
}

/* ═══════════════════════════════════════════════════════════════
   9. UTILITIES
   ═══════════════════════════════════════════════════════════════ */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.mb-0 { margin-bottom: 0; }
.mb-4 { margin-bottom: var(--space-4); }
.mb-8 { margin-bottom: var(--space-8); }
.mb-16 { margin-bottom: var(--space-16); }

.mt-0 { margin-top: 0; }
.mt-4 { margin-top: var(--space-4); }
.mt-8 { margin-top: var(--space-8); }

.hidden { display: none; }
.visible { display: block; }

.flex { display: flex; }
.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}
.flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.grid { display: grid; }

/* Skip Link (Accessibility) */
.skip-link {
    position: fixed;
    top: -100px;
    left: var(--space-4);
    padding: var(--space-3) var(--space-6);
    background: var(--gold-400);
    color: var(--dark-900);
    font-weight: 600;
    border-radius: 0 0 var(--border-radius) var(--border-radius);
    z-index: 99999;
    transition: top var(--transition-fast);
}

.skip-link:focus {
    top: 0;
}

/* ═══════════════════════════════════════════════════════════════
   10. LIGHT THEME - Additional
   ═══════════════════════════════════════════════════════════════ */
[data-theme="light"] .section__title {
    background: linear-gradient(135deg, var(--dark-900) 0%, var(--gold-500) 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

[data-theme="light"] .service-card {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .service-card:hover {
    border-color: rgba(201, 162, 39, 0.4);
}

[data-theme="light"] .service-card__title {
    color: #1a1a1a;
}

[data-theme="light"] .service-card__desc {
    color: #4a4a4a;
}

[data-theme="light"] .testimonial-card {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .testimonial-card__text {
    color: #2d2d2d;
}

[data-theme="light"] .testimonial-card__author {
    color: #1a1a1a;
}

[data-theme="light"] .testimonial-card__role {
    color: #666666;
}

[data-theme="light"] .footer {
    background: var(--dark-900);
    border-top-color: rgba(201, 162, 39, 0.15);
}

[data-theme="light"] .form-input,
[data-theme="light"] .form-textarea,
[data-theme="light"] .form-select {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.15);
    color: #1a1a1a;
}

[data-theme="light"] .form-input::placeholder,
[data-theme="light"] .form-textarea::placeholder {
    color: #999999;
}

[data-theme="light"] .form-label {
    color: #333333;
}

[data-theme="light"] .btn--outline {
    border-color: rgba(0, 0, 0, 0.2);
    color: #1a1a1a;
}

/* Light theme for new sections */
[data-theme="light"] .services-premium {
    background: #fafafa;
}

[data-theme="light"] .premium-card,
[data-theme="light"] .featured-service,
[data-theme="light"] .wide-card {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .premium-card__title,
[data-theme="light"] .featured-service__title,
[data-theme="light"] .wide-card__title,
[data-theme="light"] .category-header__text h3 {
    color: #1a1a1a;
}

[data-theme="light"] .premium-card__desc,
[data-theme="light"] .featured-service__desc,
[data-theme="light"] .wide-card__desc {
    color: #4a4a4a;
}

[data-theme="light"] .featured-service__features li,
[data-theme="light"] .premium-card__features li {
    color: #333333;
}

[data-theme="light"] .featured-service__tag,
[data-theme="light"] .premium-card__tag {
    background: rgba(176, 141, 26, 0.15);
    color: #8a6b1a;
}

[data-theme="light"] .stats {
    background: #f5f5f5;
    border-color: rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .stats__label {
    color: #666666;
}

[data-theme="light"] .stats__value {
    color: #1a1a1a;
}

[data-theme="light"] .partners {
    background: #fafafa;
}

[data-theme="light"] .partners__title {
    color: #1a1a1a;
}

[data-theme="light"] .partners__item {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .partners__item img {
    filter: grayscale(100%) brightness(0.6);
}

[data-theme="light"] .testimonials-carousel-section {
    background: #f8f8f8;
}

[data-theme="light"] .testimonials-carousel-section .section-title {
    background: linear-gradient(135deg, var(--dark-900) 0%, var(--gold-500) 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

[data-theme="light"] .carousel-slide__inner {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .testimonial-quote {
    color: #2d2d2d;
}

[data-theme="light"] .author-details strong {
    color: #1a1a1a;
}

[data-theme="light"] .author-details span {
    color: #666666;
}

[data-theme="light"] .testimonials__stats {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .contact-section {
    background: #f5f5f5;
}

[data-theme="light"] .contact-section__title {
    background: linear-gradient(135deg, var(--dark-900) 0%, var(--gold-500) 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

[data-theme="light"] .contact-section__coverage {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .contact-section__link {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.1);
    color: #4a4a4a;
}

[data-theme="light"] .contact-section__link:hover {
    color: #1a1a1a;
}

[data-theme="light"] .promo-banner--noel {
    background: linear-gradient(135deg, rgba(196, 30, 58, 0.08) 0%, rgba(34, 139, 34, 0.05) 50%, rgba(212, 175, 55, 0.05) 100%);
}

[data-theme="light"] .promo-banner__title {
    color: #1a1a1a;
}

[data-theme="light"] .promo-banner__text {
    color: #4a4a4a;
}

[data-theme="light"] .cart-float-panel {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .cart-float-panel__header h3 {
    color: #1a1a1a;
}

[data-theme="light"] .cart-float-item {
    background: #f8f8f8;
}

[data-theme="light"] .cart-float-item__name {
    color: #1a1a1a;
}

[data-theme="light"] .cart-float-item__price {
    color: #333333;
}

/* ═══════════════════════════════════════════════════════════════
   11. CART COMPONENTS (used by cart.js)
   ═══════════════════════════════════════════════════════════════ */

/* Cart Items */
.navbar__cart-item {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-3);
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
    margin-bottom: var(--space-3);
    transition: var(--transition-fast);
}

.navbar__cart-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.navbar__cart-item__image {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}

.navbar__cart-item__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.navbar__cart-item__info {
    flex: 1;
    min-width: 0;
}

.navbar__cart-item__title {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--white);
    margin-bottom: var(--space-1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.navbar__cart-item__price {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--gold-400);
}

.navbar__cart-item__remove {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 100, 100, 0.1);
    border: none;
    border-radius: 6px;
    color: #ff6b6b;
    font-size: 0.8rem;
    cursor: pointer;
    transition: var(--transition-fast);
    flex-shrink: 0;
}

.navbar__cart-item__remove:hover {
    background: rgba(255, 100, 100, 0.2);
}

/* Cart Items - Classes générées par cart.js (avec tirets) */
.navbar__cart-item-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.navbar__cart-item-name {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--white);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.navbar__cart-item-category {
    font-size: 0.75rem;
    color: var(--white-60);
}

.navbar__cart-item-price {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--gold-400);
}

.navbar__cart-item-remove {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 100, 100, 0.15);
    border: none;
    border-radius: 8px;
    color: #ff6b6b;
    font-size: 0.85rem;
    cursor: pointer;
    transition: var(--transition-fast);
    flex-shrink: 0;
    align-self: center;
}

.navbar__cart-item-remove:hover {
    background: rgba(255, 100, 100, 0.3);
    color: #ff4444;
    transform: scale(1.1);
}

/* Animation de suppression */
.navbar__cart-item.removing {
    animation: slideOutRight 0.3s ease forwards;
}

@keyframes slideOutRight {
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

/* Cart Progress Bar */
.cart-progress {
    padding: var(--space-3) var(--space-4);
    background: rgba(212, 175, 55, 0.05);
    border-bottom: 1px solid rgba(212, 175, 55, 0.1);
}

.cart-progress__text {
    font-size: 0.8rem;
    color: var(--white-60);
    margin-bottom: var(--space-2);
}

.cart-progress__bar {
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    overflow: hidden;
}

.cart-progress__fill {
    height: 100%;
    background: linear-gradient(90deg, var(--gold-400), var(--gold-300));
    border-radius: 2px;
    transition: width var(--transition-base);
}

.cart-progress__reward {
    font-size: 0.75rem;
    color: var(--gold-400);
    margin-top: var(--space-2);
}

/* ═══════════════════════════════════════════════════════════════
   CART SUGGESTIONS - Navbar Cart
   Classes correspondent au JS: cart-suggestion (singulier)
   ═══════════════════════════════════════════════════════════════ */

#cart-suggestions {
    padding: var(--space-4);
    border-top: 1px solid rgba(212, 175, 55, 0.15);
    background: rgba(212, 175, 55, 0.03);
}

.cart-suggestions__header {
    margin-bottom: var(--space-3);
}

.cart-suggestions__title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--gold-400);
    margin-bottom: var(--space-1);
}

.cart-suggestions__subtitle {
    font-size: 0.8rem;
    color: var(--white-50);
}

.cart-suggestions__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* Chaque suggestion individuelle */
.cart-suggestion {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--border-radius);
    transition: all 0.2s ease;
}

.cart-suggestion:hover {
    background: rgba(212, 175, 55, 0.1);
    border-color: rgba(212, 175, 55, 0.3);
}

.cart-suggestion__info {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex: 1;
    min-width: 0;
}

.cart-suggestion__info > i {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(212, 175, 55, 0.15);
    border-radius: 10px;
    color: var(--gold-400);
    font-size: 1rem;
    flex-shrink: 0;
}

.cart-suggestion__details {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.cart-suggestion__name {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--white);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cart-suggestion__reason {
    font-size: 0.75rem;
    color: var(--gold-400);
    opacity: 0.8;
}

.cart-suggestion__price {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--gold-400);
    white-space: nowrap;
    margin-left: auto;
    padding-right: var(--space-2);
}

/* Bouton d'ajout - VISIBLE et CLIQUABLE */
.cart-suggestion__add {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--gold-400) 0%, var(--gold-500) 100%);
    border: none;
    border-radius: 10px;
    color: var(--dark-900);
    font-size: 1rem;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(212, 175, 55, 0.3);
}

.cart-suggestion__add:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.5);
}

.cart-suggestion__add:active {
    transform: scale(0.95);
}

/* Animation après ajout */
.cart-suggestion__add.added {
    background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
    box-shadow: 0 2px 8px rgba(76, 175, 80, 0.3);
}

.cart-suggestion__add.added i::before {
    content: "\f00c"; /* fa-check */
}

/* Cart Notification */
.cart-notification {
    position: fixed;
    bottom: var(--space-6);
    right: var(--space-6);
    background: var(--dark-800);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: var(--border-radius);
    padding: var(--space-4);
    box-shadow: var(--shadow-lg);
    z-index: 10002;
    opacity: 0;
    transform: translateY(20px);
    transition: var(--transition-base);
    max-width: 320px;
}

.cart-notification.show {
    opacity: 1;
    transform: translateY(0);
}

.cart-notification__content {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.cart-notification__icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(212, 175, 55, 0.1);
    border-radius: 10px;
    color: var(--gold-400);
}

.cart-notification__text {
    flex: 1;
}

.cart-notification__title {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--white);
    margin-bottom: var(--space-1);
}

.cart-notification__message {
    font-size: 0.8rem;
    color: var(--white-60);
}

.cart-notification__action {
    margin-top: var(--space-3);
    padding: var(--space-2) var(--space-4);
    background: linear-gradient(135deg, var(--gold-400), var(--gold-500));
    border: none;
    border-radius: 8px;
    color: var(--dark-900);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition-fast);
}

.cart-notification__action:hover {
    transform: translateY(-1px);
}

/* Floating Cart Widget */
.cart-widget {
    position: fixed;
    bottom: var(--space-6);
    right: var(--space-6);
    z-index: 9998;
}

.cart-widget__toggle {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--gold-400), var(--gold-500));
    border: none;
    border-radius: 50%;
    color: var(--dark-900);
    font-size: 1.3rem;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(212, 175, 55, 0.4);
    transition: var(--transition-base);
    position: relative;
}

.cart-widget__toggle:hover {
    transform: scale(1.1);
}

.cart-widget__badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 22px;
    height: 22px;
    background: #ff4757;
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
}

/* Cookie Consent */
.cookie-consent {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(10, 10, 12, 0.98);
    backdrop-filter: blur(20px);
    border-top: 1px solid rgba(212, 175, 55, 0.1);
    padding: var(--space-4) var(--space-8);
    z-index: 99999;
    transform: translateY(100%);
    transition: transform var(--transition-base);
}

.cookie-consent.show {
    transform: translateY(0);
}

.cookie-consent__content {
    max-width: var(--max-width);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    flex-wrap: wrap;
}

.cookie-consent__text {
    flex: 1;
    color: var(--white-80);
    font-size: 0.9rem;
}

.cookie-consent__text a {
    color: var(--gold-400);
    text-decoration: underline;
}

.cookie-consent__buttons {
    display: flex;
    gap: var(--space-3);
}

/* Page Hero (for subpages) */
.page-hero {
    padding: calc(var(--navbar-height) + var(--space-16)) 0 var(--space-16);
    background: var(--dark-900);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.page-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.08) 0%, transparent 70%);
    pointer-events: none;
}

.page-hero__title {
    font-size: clamp(2rem, 5vw, 3.5rem);
    margin-bottom: var(--space-4);
    position: relative;
}

.page-hero__breadcrumb {
    display: flex;
    justify-content: center;
    gap: var(--space-2);
    font-size: 0.9rem;
    color: var(--white-60);
}

.page-hero__breadcrumb a {
    color: var(--gold-400);
}

.page-hero__breadcrumb span {
    color: var(--white-40);
}

/* Page Hero Content */
.page-hero__content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    margin: 0 auto;
    padding: 0 var(--space-4);
}

.page-hero__icon {
    width: 70px;
    height: 70px;
    margin: 0 auto var(--space-5);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(212, 175, 55, 0.15);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 50%;
    color: var(--gold-400);
    font-size: 1.8rem;
}

.page-hero__logo {
    max-width: 200px;
    margin: 0 auto var(--space-5);
}

.page-hero__logo img {
    width: 100%;
    height: auto;
    max-height: 80px;
    object-fit: contain;
}

.page-hero__subtitle {
    font-size: 1.1rem;
    color: var(--white-70);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Page Hero Compact Mode - Taille réduite standard */
.page-hero {
    min-height: auto !important;
    height: auto !important;
}

.page-hero .hero__slideshow {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.page-hero .hero__orbs {
    opacity: 0.3;
}

.page-hero .hero__scroll {
    display: none;
}

/* Responsive Page Hero */
@media (max-width: 768px) {
    .page-hero {
        padding: calc(var(--navbar-height) + var(--space-10)) 0 var(--space-10);
    }

    .page-hero__icon {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }

    .page-hero__logo {
        max-width: 150px;
    }

    .page-hero__logo img {
        max-height: 60px;
    }

    .page-hero__subtitle {
        font-size: 1rem;
    }
}

/* Quote/Devis Page Specific */
.devis-section {
    padding-top: calc(var(--navbar-height) + var(--space-8));
}

.devis-grid {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: var(--space-8);
    align-items: start;
}

@media (max-width: 1024px) {
    .devis-grid {
        grid-template-columns: 1fr;
    }
}

.devis-sidebar {
    position: sticky;
    top: calc(var(--navbar-height) + var(--space-4));
    background: var(--dark-800);
    border: 1px solid rgba(212, 175, 55, 0.1);
    border-radius: var(--border-radius-lg);
    padding: var(--space-6);
}

/* Animation Classes */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

@keyframes bounce {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

.animate-fade-in { animation: fadeIn 0.5s ease; }
.animate-slide-up { animation: slideUp 0.5s ease; }
.shake { animation: shake 0.5s ease; }
.bounce { animation: bounce 0.3s ease; }

/* ═══════════════════════════════════════════════════════════════
   12. MODALS
   ═══════════════════════════════════════════════════════════════ */
.modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(8px);
    opacity: 0;
    visibility: hidden;
    transition: var(--transition-base);
}

.modal.active {
    opacity: 1;
    visibility: visible;
}

.modal__content {
    background: var(--dark-800);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: var(--border-radius-lg);
    max-width: 600px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    transform: scale(0.9) translateY(20px);
    transition: var(--transition-base);
}

.modal.active .modal__content {
    transform: scale(1) translateY(0);
}

.modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-6);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.modal__title {
    font-size: 1.25rem;
    color: var(--white);
}

.modal__close {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: var(--white-60);
    cursor: pointer;
    transition: var(--transition-fast);
}

.modal__close:hover {
    background: rgba(212, 175, 55, 0.1);
    color: var(--gold-400);
}

.modal__body {
    padding: var(--space-6);
}

.modal__footer {
    display: flex;
    gap: var(--space-3);
    justify-content: flex-end;
    padding: var(--space-6);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* ═══════════════════════════════════════════════════════════════
   13. ALERTS & MESSAGES
   ═══════════════════════════════════════════════════════════════ */
.alert {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    border-radius: var(--border-radius);
    margin-bottom: var(--space-4);
}

.alert--success {
    background: rgba(46, 213, 115, 0.1);
    border: 1px solid rgba(46, 213, 115, 0.3);
    color: #2ed573;
}

.alert--error {
    background: rgba(255, 71, 87, 0.1);
    border: 1px solid rgba(255, 71, 87, 0.3);
    color: #ff4757;
}

.alert--warning {
    background: rgba(255, 193, 7, 0.1);
    border: 1px solid rgba(255, 193, 7, 0.3);
    color: #ffc107;
}

.alert--info {
    background: rgba(212, 175, 55, 0.1);
    border: 1px solid rgba(212, 175, 55, 0.3);
    color: var(--gold-400);
}

.alert__icon {
    flex-shrink: 0;
    font-size: 1.1rem;
}

.alert__content {
    flex: 1;
}

.alert__title {
    font-weight: 600;
    margin-bottom: var(--space-1);
}

.alert__message {
    font-size: 0.9rem;
    opacity: 0.9;
}

/* ═══════════════════════════════════════════════════════════════
   14. SERVICE SELECTOR (Devis page)
   ═══════════════════════════════════════════════════════════════ */
.service-selector {
    background: var(--dark-800);
    border: 1px solid rgba(212, 175, 55, 0.1);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    margin-bottom: var(--space-4);
}

.service-selector__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-6);
    background: rgba(212, 175, 55, 0.05);
    cursor: pointer;
    transition: var(--transition-fast);
}

.service-selector__header:hover {
    background: rgba(212, 175, 55, 0.08);
}

.service-selector__title {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.service-selector__title i {
    color: var(--gold-400);
}

.service-selector__title h3 {
    font-size: 1.1rem;
    color: var(--white);
}

.service-selector__toggle {
    color: var(--gold-400);
    transition: transform var(--transition-fast);
}

.service-selector.open .service-selector__toggle {
    transform: rotate(180deg);
}

.service-selector__content {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-base);
}

.service-selector.open .service-selector__content {
    max-height: 2000px;
}

.service-selector__options {
    padding: var(--space-4) var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* Service Option (Checkbox style) */
.service-option {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-4);
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: var(--transition-fast);
}

.service-option:hover {
    background: rgba(212, 175, 55, 0.05);
    border-color: rgba(212, 175, 55, 0.2);
}

.service-option.selected {
    background: rgba(212, 175, 55, 0.1);
    border-color: var(--gold-400);
}

.service-option__checkbox {
    width: 22px;
    height: 22px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: var(--transition-fast);
}

.service-option.selected .service-option__checkbox {
    background: var(--gold-400);
    border-color: var(--gold-400);
}

.service-option__checkbox i {
    color: var(--dark-900);
    font-size: 0.7rem;
    opacity: 0;
    transition: var(--transition-fast);
}

.service-option.selected .service-option__checkbox i {
    opacity: 1;
}

.service-option__info {
    flex: 1;
}

.service-option__name {
    font-weight: 500;
    color: var(--white);
    margin-bottom: var(--space-1);
}

.service-option__description {
    font-size: 0.85rem;
    color: var(--white-60);
}

.service-option__price {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--gold-400);
    white-space: nowrap;
}

/* Quantity Selector */
.quantity-selector {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.quantity-selector__btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: var(--white);
    cursor: pointer;
    transition: var(--transition-fast);
}

.quantity-selector__btn:hover {
    background: rgba(212, 175, 55, 0.15);
    border-color: var(--gold-400);
    color: var(--gold-400);
}

.quantity-selector__value {
    width: 50px;
    text-align: center;
    font-weight: 600;
    color: var(--white);
}

/* ═══════════════════════════════════════════════════════════════
   15. CHATBOT
   ═══════════════════════════════════════════════════════════════ */
.chatbot {
    position: fixed;
    bottom: var(--space-6);
    right: var(--space-6);
    z-index: 9997;
}

.chatbot__toggle {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--gold-400), var(--gold-500));
    border: none;
    border-radius: 50%;
    color: var(--dark-900);
    font-size: 1.4rem;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(212, 175, 55, 0.4);
    transition: var(--transition-base);
}

.chatbot__toggle:hover {
    transform: scale(1.1);
}

.chatbot__window {
    position: absolute;
    bottom: 70px;
    right: 0;
    width: 380px;
    height: 500px;
    background: var(--dark-800);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: var(--border-radius-lg);
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px) scale(0.95);
    transition: var(--transition-base);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.chatbot.open .chatbot__window {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.chatbot__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4);
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.15), rgba(212, 175, 55, 0.05));
    border-bottom: 1px solid rgba(212, 175, 55, 0.1);
}

.chatbot__header-info {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.chatbot__avatar {
    width: 40px;
    height: 40px;
    background: rgba(212, 175, 55, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold-400);
}

.chatbot__name {
    font-weight: 600;
    color: var(--white);
}

.chatbot__status {
    font-size: 0.75rem;
    color: #2ed573;
}

.chatbot__close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: none;
    border-radius: 8px;
    color: var(--white-60);
    cursor: pointer;
    transition: var(--transition-fast);
}

.chatbot__close:hover {
    background: rgba(212, 175, 55, 0.1);
    color: var(--gold-400);
}

.chatbot__messages {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.chatbot__message {
    max-width: 85%;
    padding: var(--space-3) var(--space-4);
    border-radius: 16px;
    font-size: 0.9rem;
    line-height: 1.5;
}

.chatbot__message--bot {
    align-self: flex-start;
    background: rgba(255, 255, 255, 0.05);
    color: var(--white-90);
    border-bottom-left-radius: 4px;
}

.chatbot__message--user {
    align-self: flex-end;
    background: linear-gradient(135deg, var(--gold-400), var(--gold-500));
    color: var(--dark-900);
    border-bottom-right-radius: 4px;
}

.chatbot__input-container {
    display: flex;
    gap: var(--space-2);
    padding: var(--space-4);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.chatbot__input {
    flex: 1;
    padding: var(--space-3);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: var(--white);
    font-size: 0.9rem;
}

.chatbot__input:focus {
    outline: none;
    border-color: var(--gold-400);
}

.chatbot__send {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--gold-400), var(--gold-500));
    border: none;
    border-radius: 10px;
    color: var(--dark-900);
    cursor: pointer;
    transition: var(--transition-fast);
}

.chatbot__send:hover {
    transform: scale(1.05);
}

@media (max-width: 576px) {
    .chatbot__window {
        width: calc(100vw - var(--space-8));
        right: calc(-1 * var(--space-2));
    }
}

/* ═══════════════════════════════════════════════════════════════
   16. LOADING STATES
   ═══════════════════════════════════════════════════════════════ */
.loading {
    position: relative;
    pointer-events: none;
}

.loading::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(212, 175, 55, 0.2);
    border-top-color: var(--gold-400);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.skeleton {
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.05) 25%,
        rgba(255, 255, 255, 0.1) 50%,
        rgba(255, 255, 255, 0.05) 75%
    );
    background-size: 200% 100%;
    animation: shimmerSkeleton 1.5s infinite;
    border-radius: 8px;
}

@keyframes shimmerSkeleton {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ═══════════════════════════════════════════════════════════════
   17. TABS
   ═══════════════════════════════════════════════════════════════ */
.tabs {
    margin-bottom: var(--space-8);
}

.tabs__nav {
    display: flex;
    gap: var(--space-2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: var(--space-6);
    overflow-x: auto;
}

.tabs__btn {
    padding: var(--space-3) var(--space-6);
    background: none;
    border: none;
    color: var(--white-60);
    font-size: 0.95rem;
    cursor: pointer;
    position: relative;
    white-space: nowrap;
    transition: var(--transition-fast);
}

.tabs__btn::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--gold-400);
    transform: scaleX(0);
    transition: transform var(--transition-fast);
}

.tabs__btn:hover {
    color: var(--white);
}

.tabs__btn.active {
    color: var(--gold-400);
}

.tabs__btn.active::after {
    transform: scaleX(1);
}

.tabs__content {
    display: none;
}

.tabs__content.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

/* ═══════════════════════════════════════════════════════════════
   18. BADGES & TAGS
   ═══════════════════════════════════════════════════════════════ */
.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.badge--gold {
    background: linear-gradient(135deg, var(--gold-400), var(--gold-500));
    color: var(--dark-900);
}

.badge--outline {
    background: transparent;
    border: 1px solid var(--gold-400);
    color: var(--gold-400);
}

.badge--new {
    background: #2ed573;
    color: white;
}

.badge--promo {
    background: #ff4757;
    color: white;
}

.tag {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    font-size: 0.8rem;
    color: var(--white-70);
}

/* ═══════════════════════════════════════════════════════════════
   19. ACCORDION (FAQ style)
   ═══════════════════════════════════════════════════════════════ */
.accordion {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.accordion__item {
    background: var(--dark-800);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--border-radius);
    overflow: hidden;
}

.accordion__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-6);
    cursor: pointer;
    transition: var(--transition-fast);
}

.accordion__header:hover {
    background: rgba(212, 175, 55, 0.05);
}

.accordion__title {
    font-size: 1rem;
    font-weight: 500;
    color: var(--white);
}

.accordion__icon {
    color: var(--gold-400);
    transition: transform var(--transition-fast);
}

.accordion__item.open .accordion__icon {
    transform: rotate(180deg);
}

.accordion__content {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-base);
}

.accordion__item.open .accordion__content {
    max-height: 500px;
}

.accordion__body {
    padding: 0 var(--space-6) var(--space-4);
    color: var(--white-70);
    line-height: 1.7;
}

/* ═══════════════════════════════════════════════════════════════
   20. VISIO/VIDEO SECTION
   ═══════════════════════════════════════════════════════════════ */
.video-section {
    position: relative;
    background: var(--dark-900);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    aspect-ratio: 16/9;
}

.video-section__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition-base);
}

.video-section__overlay:hover {
    background: rgba(0, 0, 0, 0.3);
}

.video-section__play {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--gold-400), var(--gold-500));
    border-radius: 50%;
    color: var(--dark-900);
    font-size: 1.5rem;
    transition: var(--transition-base);
}

.video-section__overlay:hover .video-section__play {
    transform: scale(1.1);
}

.video-section iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* ═══════════════════════════════════════════════════════════════
   21. HERO - Elements supplémentaires
   ═══════════════════════════════════════════════════════════════ */
.hero__orbs {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    overflow: hidden;
}

.hero__orb {
    position: absolute;
    width: 4px;
    height: 4px;
    background: var(--gold-400);
    border-radius: 50%;
    opacity: 0.4;
    animation: floatOrb 15s ease-in-out infinite;
}

.hero__orb:nth-child(1) { left: 10%; animation-delay: 0s; }
.hero__orb:nth-child(2) { left: 20%; animation-delay: -3s; width: 3px; height: 3px; }
.hero__orb:nth-child(3) { left: 35%; animation-delay: -6s; width: 5px; height: 5px; }
.hero__orb:nth-child(4) { left: 50%; animation-delay: -9s; width: 2px; height: 2px; }
.hero__orb:nth-child(5) { left: 65%; animation-delay: -12s; }
.hero__orb:nth-child(6) { left: 80%; animation-delay: -2s; width: 3px; height: 3px; }
.hero__orb:nth-child(7) { left: 90%; animation-delay: -7s; width: 4px; height: 4px; }

@keyframes floatOrb {
    0%, 100% { transform: translateY(100vh); opacity: 0; }
    10% { opacity: 0.6; }
    90% { opacity: 0.6; }
    100% { transform: translateY(-20vh); opacity: 0; }
}

.hero__line {
    position: absolute;
    width: 1px;
    height: 200px;
    background: linear-gradient(to bottom, transparent, rgba(212, 175, 55, 0.3), transparent);
    z-index: 2;
    pointer-events: none;
}

.hero__line--1 {
    left: 15%;
    top: 20%;
    animation: linePulse 4s ease-in-out infinite;
}

.hero__line--2 {
    right: 15%;
    bottom: 20%;
    animation: linePulse 4s ease-in-out infinite 2s;
}

@keyframes linePulse {
    0%, 100% { opacity: 0.3; height: 200px; }
    50% { opacity: 0.6; height: 250px; }
}

/* Hero Carousel */
.hero__carousel {
    margin-bottom: var(--space-8);
    min-height: 80px;
}

.hero__slide {
    display: none;
    text-align: center;
    animation: fadeIn 0.5s ease;
}

.hero__slide--active {
    display: block;
}

.hero__slide-title {
    font-family: var(--font-display);
    font-size: clamp(1.2rem, 3vw, 1.8rem);
    color: var(--gold-400);
    margin-bottom: var(--space-2);
}

.hero__slide-text {
    font-size: clamp(0.9rem, 2vw, 1.1rem);
    color: var(--white-70);
    max-width: 600px;
    margin: 0 auto;
}

/* ═══════════════════════════════════════════════════════════════
   22. PROMO BANNER - Noël/Special/Drone/Platform
   ═══════════════════════════════════════════════════════════════ */
.promo-banner {
    position: relative;
    overflow: hidden;
}

.promo-banner__container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: var(--space-6) var(--space-8);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    flex-wrap: wrap;
}

/* Noël variant */
.promo-banner--noel {
    background: linear-gradient(135deg, rgba(196, 30, 58, 0.12) 0%, rgba(34, 139, 34, 0.08) 50%, rgba(212, 175, 55, 0.08) 100%);
}

.promo-banner__content {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex: 1;
    min-width: 280px;
}

.promo-banner__icon {
    font-size: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--gold-400), var(--gold-500));
    color: var(--dark-900);
    flex-shrink: 0;
}

.promo-banner__icon--noel {
    background: linear-gradient(135deg, #c41e3a, #a01830);
    color: var(--white);
    box-shadow: 0 4px 15px rgba(196, 30, 58, 0.3);
}

.promo-banner__text {
    flex: 1;
}

.promo-banner__title {
    font-family: var(--font-display);
    font-size: clamp(1.2rem, 2.5vw, 1.6rem);
    color: var(--white);
    margin-bottom: var(--space-1);
}

.promo-banner__description {
    color: var(--white-60);
    font-size: 0.9rem;
    margin: 0;
}

.promo-banner__button {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    background: linear-gradient(135deg, var(--gold-400), var(--gold-500));
    color: var(--dark-900);
    font-weight: 600;
    font-size: 0.9rem;
    border-radius: 50px;
    transition: var(--transition-base);
    white-space: nowrap;
}

.promo-banner__button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(212, 175, 55, 0.3);
}

/* Drone variant */
.promo-banner--drone {
    background: var(--dark-800);
    border: 1px solid rgba(212, 175, 55, 0.2);
    margin: var(--space-12) auto;
    max-width: var(--max-width);
    border-radius: var(--border-radius-xl);
}

.promo-banner--drone .promo-banner__container {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: var(--space-8);
    padding: 0;
}

@media (max-width: 968px) {
    .promo-banner--drone .promo-banner__container {
        grid-template-columns: 1fr;
    }
}

.promo-banner__media {
    position: relative;
    border-radius: var(--border-radius-xl) 0 0 var(--border-radius-xl);
    overflow: hidden;
    min-height: 300px;
}

@media (max-width: 968px) {
    .promo-banner__media {
        border-radius: var(--border-radius-xl) var(--border-radius-xl) 0 0;
        min-height: 250px;
    }
}

.promo-banner__media iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.promo-banner--drone .promo-banner__content {
    flex-direction: column;
    align-items: flex-start;
    padding: var(--space-8);
}

.promo-banner__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    background: linear-gradient(135deg, #c41e3a, #8b0000);
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 20px;
    margin-bottom: var(--space-3);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.promo-banner__discount {
    display: inline-block;
    background: linear-gradient(135deg, var(--gold-400), var(--gold-500));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
}

.promo-banner__features {
    margin: var(--space-4) 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
}

@media (max-width: 600px) {
    .promo-banner__features {
        grid-template-columns: 1fr;
    }
}

.promo-banner__features li {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--white-70);
    font-size: 0.9rem;
}

.promo-banner__features li i {
    color: var(--gold-400);
    font-size: 0.8rem;
}

.promo-banner__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-4);
}

.promo-banner__button--primary {
    background: linear-gradient(135deg, var(--gold-400), var(--gold-500));
    color: var(--dark-900);
}

.promo-banner__button--secondary {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--white);
}

.promo-banner__button--secondary:hover {
    border-color: var(--gold-400);
    color: var(--gold-400);
    background: transparent;
    box-shadow: none;
}

/* Platform variant */
.promo-banner--plateforme {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(212, 175, 55, 0.1) 100%);
    border: 1px solid rgba(99, 102, 241, 0.2);
    margin: var(--space-12) auto;
    max-width: var(--max-width);
    border-radius: var(--border-radius-xl);
}

.promo-banner--plateforme .promo-banner__badge {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
}

/* Responsive */
@media (max-width: 768px) {
    .promo-banner__container {
        flex-direction: column;
        text-align: center;
        padding: var(--space-6);
    }

    .promo-banner__content {
        flex-direction: column;
    }

    .promo-banner__buttons {
        justify-content: center;
    }
}

/* ═══════════════════════════════════════════════════════════════
   23. SERVICES PREMIUM - Section complète
   ═══════════════════════════════════════════════════════════════ */
.services-premium {
    padding: var(--space-24) 0;
    background: #08080c;
}

.services-premium__container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--space-8);
}

.services-premium__header {
    text-align: center;
    margin-bottom: var(--space-16);
}

.services-premium__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: rgba(212, 175, 55, 0.1);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 50px;
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gold-400);
    margin-bottom: var(--space-4);
}

.services-premium__title {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 5vw, 4rem);
    background: linear-gradient(135deg, var(--white) 0%, var(--gold-400) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: var(--space-4);
}

.services-premium__subtitle {
    font-size: 1.1rem;
    color: var(--white-60);
    max-width: 600px;
    margin: 0 auto;
}

/* Category Header */
.services-premium__category {
    margin-bottom: var(--space-12);
}

.category-header {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid rgba(212, 175, 55, 0.1);
}

.category-header__icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(212, 175, 55, 0.1);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 12px;
    color: var(--gold-400);
    font-size: 1.2rem;
}

.category-header__text h3 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--white);
    margin-bottom: var(--space-1);
}

.category-header__text p {
    font-size: 0.9rem;
    color: var(--white-60);
    margin: 0;
}

/* Category Header Alt Variant (for Artists section) */
.category-header--alt .category-header__icon {
    background: rgba(138, 43, 226, 0.1);
    border-color: rgba(138, 43, 226, 0.2);
    color: #a855f7;
}

/* Featured Service (Full width) */
.services-premium__featured {
    margin-bottom: var(--space-10);
}

.featured-service {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--dark-800);
    border: 1px solid rgba(212, 175, 55, 0.15);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.featured-service:hover {
    border-color: rgba(212, 175, 55, 0.3);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25), 0 0 40px rgba(212, 175, 55, 0.08);
    transform: translateY(-3px);
}

.featured-service__image {
    position: relative;
    height: 280px;
    max-height: 280px;
    overflow: hidden;
}

.featured-service__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.featured-service:hover .featured-service__image img {
    transform: scale(1.05);
}

.featured-service__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, var(--dark-800) 100%);
}

.featured-service__content {
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.featured-service__tag {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    background: linear-gradient(135deg, var(--gold-400), var(--gold-500));
    color: var(--dark-900);
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 20px;
    margin-bottom: var(--space-3);
    width: fit-content;
}

.featured-service__title {
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 3vw, 1.8rem);
    color: var(--white);
    margin-bottom: var(--space-3);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.featured-service__title i {
    color: var(--gold-400);
    font-size: 0.9em;
}

.featured-service__desc {
    font-size: 0.9rem;
    color: var(--white-70);
    line-height: 1.6;
    margin-bottom: var(--space-4);
}

.featured-service__features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.featured-service__features li {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.82rem;
    color: var(--white-80);
}

.featured-service__features li i {
    color: var(--gold-400);
    font-size: 0.7rem;
}

.featured-service__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--gold-400);
    font-weight: 500;
    transition: var(--transition-fast);
}

.featured-service:hover .featured-service__cta {
    gap: var(--space-3);
}

@media (max-width: 968px) {
    .featured-service {
        grid-template-columns: 1fr;
    }

    .featured-service__image {
        min-height: 200px;
    }

    .featured-service__content {
        padding: var(--space-5);
    }

    .featured-service__overlay {
        background: linear-gradient(180deg, transparent 0%, var(--dark-800) 100%);
    }
}

/* Premium Card */
.services-premium__duo {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
}

@media (max-width: 768px) {
    .services-premium__duo {
        grid-template-columns: 1fr;
    }
}

.premium-card {
    display: block;
    background: var(--dark-800);
    border: 1px solid rgba(212, 175, 55, 0.1);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.premium-card:hover {
    border-color: rgba(212, 175, 55, 0.3);
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3), 0 0 40px rgba(212, 175, 55, 0.08);
}

.premium-card--full {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

@media (max-width: 768px) {
    .premium-card--full {
        grid-template-columns: 1fr;
    }
}

.premium-card__image {
    position: relative;
    height: 220px;
    overflow: hidden;
}

.premium-card--full .premium-card__image {
    height: 280px;
    min-height: auto;
    max-height: 280px;
}

/* Featured variant - adds special styling for main cards */
.premium-card--featured {
    border-color: rgba(212, 175, 55, 0.25);
    box-shadow: 0 0 30px rgba(212, 175, 55, 0.1);
}

.premium-card--featured::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--gold-400), var(--gold-300), var(--gold-400));
}

.premium-card--featured:hover {
    border-color: rgba(212, 175, 55, 0.4);
    box-shadow: 0 10px 50px rgba(212, 175, 55, 0.15);
}

.premium-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.premium-card:hover .premium-card__image img {
    transform: scale(1.1);
}

.premium-card__shine {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 40%, rgba(212, 175, 55, 0.1) 50%, transparent 60%);
    transform: translateX(-100%);
    transition: transform 0.6s ease;
}

.premium-card:hover .premium-card__shine {
    transform: translateX(100%);
}

.premium-card__content {
    padding: var(--space-6);
}

.premium-card__icon {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(212, 175, 55, 0.1);
    border-radius: 10px;
    color: var(--gold-400);
    font-size: 1.1rem;
    margin-bottom: var(--space-4);
}

.premium-card__title {
    font-family: var(--font-display);
    font-size: 1.4rem;
    color: var(--white);
    margin-bottom: var(--space-3);
}

.premium-card__desc {
    font-size: 0.9rem;
    color: var(--white-60);
    line-height: 1.6;
    margin-bottom: var(--space-4);
}

.premium-card__features {
    margin-bottom: var(--space-4);
}

.premium-card__features li {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.85rem;
    color: var(--white-70);
    margin-bottom: var(--space-2);
}

.premium-card__features li i {
    color: var(--gold-400);
    font-size: 0.7rem;
}

.premium-card__features--expanded {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2) var(--space-4);
}

.premium-card__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--gold-400);
    font-size: 0.9rem;
    font-weight: 500;
    transition: var(--transition-fast);
}

.premium-card:hover .premium-card__link {
    gap: var(--space-3);
}

/* Wide Card (Artists) */
.services-premium__single {
    margin-bottom: var(--space-6);
}

.wide-card {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    background: var(--dark-800);
    border: 1px solid rgba(212, 175, 55, 0.1);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    transition: var(--transition-base);
}

.wide-card:hover {
    border-color: rgba(212, 175, 55, 0.3);
    transform: translateY(-4px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}

@media (max-width: 768px) {
    .wide-card {
        grid-template-columns: 1fr;
    }
}

.wide-card__image {
    position: relative;
    min-height: 280px;
    overflow: hidden;
}

.wide-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.wide-card:hover .wide-card__image img {
    transform: scale(1.05);
}

.wide-card__gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, var(--dark-800) 100%);
}

@media (max-width: 768px) {
    .wide-card__gradient {
        background: linear-gradient(180deg, transparent 0%, var(--dark-800) 100%);
    }
}

.wide-card__content {
    padding: var(--space-8);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.wide-card__badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.wide-card__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    background: rgba(212, 175, 55, 0.1);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 20px;
    font-size: 0.75rem;
    color: var(--gold-400);
}

.wide-card__title {
    font-family: var(--font-display);
    font-size: 1.8rem;
    color: var(--white);
    margin-bottom: var(--space-3);
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.wide-card__title i {
    color: var(--gold-400);
}

.wide-card__desc {
    font-size: 0.95rem;
    color: var(--white-70);
    line-height: 1.7;
    margin-bottom: var(--space-4);
}

.wide-card__features {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.wide-card__features span {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.85rem;
    color: var(--white-80);
}

.wide-card__features span i {
    color: var(--gold-400);
}

.wide-card__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--gold-400);
    font-weight: 500;
    transition: var(--transition-fast);
}

.wide-card:hover .wide-card__cta {
    gap: var(--space-3);
}

/* ═══════════════════════════════════════════════════════════════
   24. STATS SECTION
   ═══════════════════════════════════════════════════════════════ */
.stats {
    padding: var(--space-16) 0;
    background: linear-gradient(180deg,
        rgba(212, 175, 55, 0.08) 0%,
        rgba(212, 175, 55, 0.12) 50%,
        rgba(212, 175, 55, 0.08) 100%
    ), #151519;
}

.stats__container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--space-8);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-8);
}

@media (max-width: 968px) {
    .stats__container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .stats__container {
        grid-template-columns: 1fr;
        text-align: center;
    }
}

.stats__item {
    text-align: center;
}

.stats__number {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 700;
    background: linear-gradient(135deg, var(--gold-300), var(--gold-500));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    margin-bottom: var(--space-2);
}

.stats__label {
    font-size: 0.9rem;
    color: var(--white-60);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* ═══════════════════════════════════════════════════════════════
   25. PARTNERS SECTION - "Ils nous font confiance"
   ═══════════════════════════════════════════════════════════════ */
.partners {
    padding: var(--space-20) 0;
    background: #050507;
    overflow: hidden;
}

.partners__container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--space-8);
}

.partners__header {
    text-align: center;
    margin-bottom: var(--space-12);
}

.partners__title {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    color: var(--white);
    margin-bottom: var(--space-3);
}

.partners__subtitle {
    color: var(--white-60);
    font-size: 1rem;
    max-width: 500px;
    margin: 0 auto;
}

/* Slider infini */
.partners__slider {
    position: relative;
    width: 100%;
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, white 10%, white 90%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, white 10%, white 90%, transparent);
}

.partners__track {
    display: flex;
    gap: var(--space-8);
    animation: partnersScroll 40s linear infinite;
    width: max-content;
}

@keyframes partnersScroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(-100% / 3));
    }
}

.partners__slider:hover .partners__track {
    animation-play-state: paused;
}

.partners__item {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4) var(--space-6);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--border-radius-lg);
    min-width: 160px;
    height: 80px;
    transition: var(--transition-base);
}

.partners__item:hover {
    background: rgba(212, 175, 55, 0.08);
    border-color: rgba(212, 175, 55, 0.2);
    transform: scale(1.05);
}

.partners__item img {
    max-height: 50px;
    max-width: 130px;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: grayscale(100%) brightness(0.8);
    opacity: 0.7;
    transition: var(--transition-base);
}

.partners__item:hover img {
    filter: grayscale(0%) brightness(1);
    opacity: 1;
}

/* ═══════════════════════════════════════════════════════════════
   26. TESTIMONIALS CAROUSEL SECTION
   ═══════════════════════════════════════════════════════════════ */
.testimonials-carousel-section {
    padding: var(--space-24) 0;
    background: #101014;
    overflow: hidden;
}

.testimonials-carousel-section .container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--space-8);
}

.testimonials-carousel-section .section-header {
    text-align: center;
    margin-bottom: var(--space-12);
}

.testimonials-carousel-section .section-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3rem);
    background: linear-gradient(135deg, var(--white) 0%, var(--gold-400) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: var(--space-3);
}

.testimonials-carousel-section .section-subtitle {
    color: var(--white-60);
    font-size: 1.05rem;
}

/* Carousel Wrapper */
.testimonial-carousel-wrapper {
    position: relative;
    margin-bottom: var(--space-12);
}

.testimonial-carousel {
    position: relative;
    min-height: 450px;
}

/* Carousel Slide */
.carousel-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease, visibility 0.6s ease;
}

.carousel-slide.active {
    position: relative;
    opacity: 1;
    visibility: visible;
}

.carousel-slide__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
    background: var(--dark-800);
    border: 1px solid rgba(212, 175, 55, 0.15);
    border-radius: var(--border-radius-xl);
    overflow: hidden;
    min-height: 400px;
}

@media (max-width: 968px) {
    .carousel-slide__inner {
        grid-template-columns: 1fr;
        min-height: auto;
    }
}

/* Media Section */
.carousel-slide__media {
    position: relative;
    background: var(--dark-950);
    min-height: 300px;
}

.video-container {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 300px;
}

/* Video Thumbnail */
.video-thumbnail,
.youtube-thumbnail {
    position: relative;
    width: 100%;
    height: 100%;
    cursor: pointer;
    overflow: hidden;
}

.thumbnail-preview,
.youtube-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-play-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    background: rgba(0, 0, 0, 0.4);
    transition: var(--transition-base);
}

.video-thumbnail:hover .video-play-overlay,
.youtube-thumbnail:hover .video-play-overlay {
    background: rgba(0, 0, 0, 0.3);
}

.play-button {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(212, 175, 55, 0.9);
    border-radius: 50%;
    color: var(--dark-900);
    font-size: 1.8rem;
    transition: var(--transition-base);
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.3);
}

.play-button--youtube {
    background: #ff0000;
    color: white;
}

.video-thumbnail:hover .play-button,
.youtube-thumbnail:hover .play-button {
    transform: scale(1.1);
}

.video-label {
    color: var(--white);
    font-size: 0.9rem;
    font-weight: 500;
}

/* Carousel Photo & Placeholder */
.carousel-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.carousel-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--dark-800) 0%, var(--dark-900) 100%);
}

.carousel-placeholder i {
    font-size: 4rem;
    color: rgba(212, 175, 55, 0.2);
}

/* YouTube Embed */
.youtube-embed {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 300px;
}

.youtube-embed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Carousel Video */
.carousel-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: var(--dark-950);
}

/* Content Section */
.carousel-slide__content {
    padding: var(--space-8);
    display: flex;
    align-items: center;
}

.testimonial-content {
    width: 100%;
}

/* Stars Rating */
.stars-rating {
    display: flex;
    gap: var(--space-1);
    margin-bottom: var(--space-4);
}

.star {
    font-size: 1.3rem;
    color: rgba(212, 175, 55, 0.3);
}

.star.filled {
    color: var(--gold-400);
}

/* Quote */
.testimonial-quote {
    font-family: var(--font-display);
    font-size: clamp(1.1rem, 2vw, 1.4rem);
    color: var(--white-90);
    line-height: 1.7;
    margin-bottom: var(--space-6);
    font-style: italic;
    position: relative;
}

/* Author Info */
.testimonial-author-info {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.author-avatar {
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--gold-400), var(--gold-500));
    border-radius: 50%;
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--dark-900);
}

.author-details {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.author-details strong {
    font-size: 1.05rem;
    color: var(--white);
}

.author-details span {
    font-size: 0.9rem;
    color: var(--gold-400);
}

.author-details small {
    font-size: 0.8rem;
    color: var(--white-50);
}

/* Verified Badge */
.verified-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.2);
    border-radius: 20px;
    font-size: 0.8rem;
    color: #22c55e;
}

.verified-badge i {
    font-size: 0.9rem;
}

/* Carousel Navigation */
.carousel-navigation {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-6);
    margin-top: var(--space-6);
}

.carousel-btn {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--dark-800);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 50%;
    color: var(--gold-400);
    font-size: 1rem;
    cursor: pointer;
    transition: var(--transition-base);
}

.carousel-btn:hover {
    background: rgba(212, 175, 55, 0.1);
    border-color: var(--gold-400);
    transform: scale(1.1);
}

.carousel-dots {
    display: flex;
    gap: var(--space-2);
}

.carousel-dot {
    width: 12px;
    height: 12px;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: var(--transition-base);
}

.carousel-dot.active {
    background: var(--gold-400);
    transform: scale(1.2);
}

.carousel-dot:hover:not(.active) {
    background: rgba(255, 255, 255, 0.4);
}

/* Testimonials Stats */
.testimonials__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
    max-width: 700px;
    margin: 0 auto var(--space-8);
    padding: var(--space-6);
    background: var(--dark-800);
    border: 1px solid rgba(212, 175, 55, 0.1);
    border-radius: var(--border-radius-lg);
}

@media (max-width: 600px) {
    .testimonials__stats {
        grid-template-columns: 1fr;
        text-align: center;
    }
}

.testimonials__stat {
    text-align: center;
    padding: var(--space-4);
}

.testimonials__stat-value {
    display: block;
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--gold-300), var(--gold-500));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: var(--space-1);
}

.testimonials__stat-label {
    font-size: 0.85rem;
    color: var(--white-60);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Testimonials CTA */
.testimonials__cta {
    text-align: center;
}

.testimonials__cta .btn--outline {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    background: transparent;
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 30px;
    color: var(--gold-400);
    font-weight: 500;
    transition: var(--transition-base);
}

.testimonials__cta .btn--outline:hover {
    background: rgba(212, 175, 55, 0.1);
    border-color: var(--gold-400);
}

/* ═══════════════════════════════════════════════════════════════
   27. CONTACT SECTION - "Créons ensemble"
   ═══════════════════════════════════════════════════════════════ */
.contact-section {
    padding: var(--space-24) 0;
    background: #060609;
    position: relative;
    overflow: hidden;
}

.contact-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.05) 0%, transparent 70%);
    pointer-events: none;
}

.contact-section__container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--space-8);
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: var(--space-16);
    align-items: center;
    position: relative;
}

@media (max-width: 968px) {
    .contact-section__container {
        grid-template-columns: 1fr;
        text-align: center;
    }
}

.contact-section__content {
    position: relative;
}

.contact-section__title {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 5vw, 4rem);
    background: linear-gradient(135deg, var(--white) 0%, var(--gold-400) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: var(--space-4);
    line-height: 1.1;
}

.contact-section__description {
    font-size: 1.1rem;
    color: var(--white-60);
    line-height: 1.7;
    margin-bottom: var(--space-8);
    max-width: 500px;
}

@media (max-width: 968px) {
    .contact-section__description {
        margin: 0 auto var(--space-8);
    }
}

.contact-section__links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-bottom: var(--space-8);
}

@media (max-width: 968px) {
    .contact-section__links {
        justify-content: center;
    }
}

.contact-section__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-6);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--border-radius-lg);
    color: var(--white-80);
    font-size: 1rem;
    transition: var(--transition-base);
}

.contact-section__link:hover {
    background: rgba(212, 175, 55, 0.1);
    border-color: rgba(212, 175, 55, 0.3);
    color: var(--gold-400);
    transform: translateY(-2px);
}

.contact-section__link i {
    font-size: 1.2rem;
    color: var(--gold-400);
}

.contact-section__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
}

@media (max-width: 968px) {
    .contact-section__buttons {
        justify-content: center;
    }
}

.contact-section__button {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-8);
    border-radius: 50px;
    font-weight: 600;
    font-size: 1rem;
    transition: var(--transition-base);
    cursor: pointer;
}

.contact-section__button--primary {
    background: linear-gradient(135deg, var(--gold-400), var(--gold-500));
    color: var(--dark-900);
    border: none;
    box-shadow: 0 5px 25px rgba(212, 175, 55, 0.3);
}

.contact-section__button--primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 35px rgba(212, 175, 55, 0.4);
}

.contact-section__button--secondary {
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.2);
    color: var(--white);
}

.contact-section__button--secondary:hover {
    border-color: var(--gold-400);
    color: var(--gold-400);
    transform: translateY(-3px);
}

/* Coverage section */
.contact-section__coverage {
    background: var(--dark-800);
    border: 1px solid rgba(212, 175, 55, 0.15);
    border-radius: var(--border-radius-xl);
    padding: var(--space-8);
    position: relative;
}

.contact-section__coverage::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--gold-400), var(--gold-300), var(--gold-400));
    border-radius: var(--border-radius-xl) var(--border-radius-xl) 0 0;
}

.contact-section__coverage-title {
    font-family: var(--font-display);
    font-size: 1.4rem;
    color: var(--white);
    margin-bottom: var(--space-6);
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.contact-section__coverage-title i {
    color: var(--gold-400);
}

.contact-section__regions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
}

@media (max-width: 480px) {
    .contact-section__regions {
        grid-template-columns: 1fr;
    }
}

.contact-section__regions li {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--white-70);
    font-size: 0.95rem;
    padding: var(--space-2) 0;
}

.contact-section__regions li i {
    color: var(--gold-400);
    font-size: 0.8rem;
}

/* ═══════════════════════════════════════════════════════════════
   28. FOOTER COMPLET
   ═══════════════════════════════════════════════════════════════ */
.footer {
    background: var(--dark-950);
    border-top: 1px solid rgba(212, 175, 55, 0.1);
    padding-top: var(--space-16);
}

.footer__container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--space-8) var(--space-12);
    display: grid;
    grid-template-columns: 1.5fr 1fr 1.2fr 1fr 1.2fr;
    gap: var(--space-8);
}

@media (max-width: 1200px) {
    .footer__container {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .footer__container {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 480px) {
    .footer__container {
        grid-template-columns: 1fr;
    }
}

/* Footer Brand */
.footer__brand {
    grid-column: span 1;
}

@media (max-width: 1200px) {
    .footer__brand {
        grid-column: span 3;
    }
}

@media (max-width: 768px) {
    .footer__brand {
        grid-column: span 2;
    }
}

@media (max-width: 480px) {
    .footer__brand {
        grid-column: span 1;
    }
}

.footer__logo-wrapper {
    margin-bottom: var(--space-4);
}

.footer__logo-img {
    height: 60px;
    width: auto;
}

.footer__tagline {
    color: var(--white-60);
    font-size: 0.9rem;
    margin-bottom: var(--space-6);
}

.footer__social-title {
    font-size: 0.85rem;
    color: var(--white-60);
    margin-bottom: var(--space-3);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.footer__social {
    display: flex;
    gap: var(--space-3);
}

.footer__social a {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: var(--white-60);
    transition: var(--transition-fast);
}

.footer__social a:hover {
    background: rgba(212, 175, 55, 0.15);
    border-color: var(--gold-400);
    color: var(--gold-400);
}

/* Footer Nav & Contact */
.footer__nav,
.footer__contact,
.footer__coverage,
.footer__newsletter {
    padding-top: var(--space-2);
}

.footer__title {
    font-family: var(--font-display);
    font-size: 1.1rem;
    color: var(--white);
    margin-bottom: var(--space-6);
    position: relative;
    padding-bottom: var(--space-3);
}

.footer__title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 30px;
    height: 2px;
    background: var(--gold-400);
}

.footer__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.footer__list a {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--white-60);
    font-size: 0.9rem;
    transition: var(--transition-fast);
}

.footer__list a:hover {
    color: var(--gold-400);
    padding-left: var(--space-2);
}

.footer__list a i {
    width: 16px;
    color: var(--gold-400);
    opacity: 0.6;
}

.footer__list--contact li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    color: var(--white-60);
    font-size: 0.9rem;
    margin-bottom: var(--space-2);
}

.footer__list--contact li i {
    color: var(--gold-400);
    width: 16px;
    margin-top: 4px;
}

.footer__list--contact a {
    padding: 0;
}

.footer__list--contact a:hover {
    padding-left: 0;
}

.footer__whatsapp-icon {
    margin-left: var(--space-2);
    color: #25d366;
}

/* Footer Coverage */
.footer__coverage-text {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--white-80);
    font-size: 0.95rem;
    margin-bottom: var(--space-4);
}

.footer__coverage-text i {
    color: var(--gold-400);
}

.footer__cities {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.footer__city {
    padding: var(--space-1) var(--space-3);
    background: rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    font-size: 0.8rem;
    color: var(--white-60);
}

/* Footer Newsletter */
.footer__newsletter-text {
    color: var(--white-60);
    font-size: 0.9rem;
    margin-bottom: var(--space-4);
}

.footer__newsletter-form {
    display: flex;
    gap: var(--space-2);
}

.footer__newsletter-input {
    flex: 1;
    padding: var(--space-3);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: var(--white);
    font-size: 0.9rem;
}

.footer__newsletter-input:focus {
    outline: none;
    border-color: var(--gold-400);
}

.footer__newsletter-input::placeholder {
    color: var(--white-40);
}

.footer__newsletter-btn {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--gold-400), var(--gold-500));
    border: none;
    border-radius: 10px;
    color: var(--dark-900);
    cursor: pointer;
    transition: var(--transition-fast);
}

.footer__newsletter-btn:hover {
    transform: scale(1.05);
}

.footer__newsletter-message {
    margin-top: var(--space-3);
    font-size: 0.85rem;
    padding: var(--space-2) var(--space-3);
    border-radius: 6px;
}

.footer__newsletter-message--success {
    background: rgba(46, 213, 115, 0.1);
    color: #2ed573;
}

.footer__newsletter-message--error {
    background: rgba(255, 71, 87, 0.1);
    color: #ff4757;
}

/* Footer Bottom */
.footer__bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding: var(--space-6) var(--space-8);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-4);
    max-width: var(--max-width);
    margin: 0 auto;
}

.footer__bottom p {
    color: var(--white-40);
    font-size: 0.85rem;
    margin: 0;
}

.footer__legal {
    display: flex;
    align-items: center;
    gap: var(--space-6);
}

.footer__legal a {
    color: var(--white-40);
    font-size: 0.85rem;
    transition: var(--transition-fast);
}

.footer__legal a:hover {
    color: var(--gold-400);
}

.footer__admin-link {
    opacity: 0.3;
}

.footer__admin-link:hover {
    opacity: 1;
}

/* Theme Toggle */
.theme-toggle {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    cursor: pointer;
    position: relative;
    transition: var(--transition-fast);
}

.theme-toggle:hover {
    background: rgba(212, 175, 55, 0.1);
    border-color: var(--gold-400);
}

.theme-toggle__icon {
    position: absolute;
    transition: var(--transition-fast);
}

.theme-toggle__icon--light {
    color: var(--gold-400);
    opacity: 1;
}

.theme-toggle__icon--dark {
    color: var(--white-60);
    opacity: 0;
}

.theme-toggle--light .theme-toggle__icon--light {
    opacity: 0;
}

.theme-toggle--light .theme-toggle__icon--dark {
    opacity: 1;
}

/* ═══════════════════════════════════════════════════════════════
   29. FLOATING CART BUTTON & PANEL
   ═══════════════════════════════════════════════════════════════ */
.cart-float-btn {
    position: fixed;
    bottom: var(--space-6);
    right: var(--space-6);
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--gold-400), var(--gold-500));
    border: none;
    border-radius: 50%;
    color: var(--dark-900);
    font-size: 1.3rem;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(212, 175, 55, 0.4);
    transition: var(--transition-base);
    z-index: 9990;
}

.cart-float-btn:hover {
    transform: scale(1.1);
}

.cart-float-btn.hidden {
    transform: scale(0);
    opacity: 0;
}

.cart-float-btn__badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 22px;
    height: 22px;
    background: #ff4757;
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    opacity: 0;
    transform: scale(0);
    transition: var(--transition-fast);
}

.cart-float-btn__badge.show {
    opacity: 1;
    transform: scale(1);
}

.cart-float-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    transition: var(--transition-base);
    z-index: 9991;
}

.cart-float-overlay.show {
    opacity: 1;
    visibility: visible;
}

.cart-float-panel {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 100%;
    max-width: 420px;
    max-height: 80vh;
    background: var(--dark-800);
    border-left: 1px solid rgba(212, 175, 55, 0.2);
    border-top: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transition: var(--transition-base);
    z-index: 9992;
}

.cart-float-panel.open {
    transform: translateY(0);
}

@media (min-width: 769px) {
    .cart-float-panel {
        top: 0;
        bottom: 0;
        max-height: 100vh;
        border-radius: 0;
        transform: translateX(100%);
    }

    .cart-float-panel.open {
        transform: translateX(0);
    }
}

.cart-float-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-6);
    border-bottom: 1px solid rgba(212, 175, 55, 0.1);
}

.cart-float-panel__header h3 {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 1.1rem;
    color: var(--gold-400);
}

.cart-float-panel__close {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: none;
    border-radius: 8px;
    color: var(--white-60);
    cursor: pointer;
    transition: var(--transition-fast);
}

.cart-float-panel__close:hover {
    background: rgba(212, 175, 55, 0.1);
    color: var(--gold-400);
}

.cart-float-panel__items {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-4);
}

.cart-float-empty {
    text-align: center;
    padding: var(--space-12) var(--space-4);
    color: var(--white-40);
}

.cart-float-empty i {
    font-size: 3rem;
    margin-bottom: var(--space-4);
}

.cart-float-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3);
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
    margin-bottom: var(--space-3);
}

.cart-float-item__info {
    flex: 1;
}

.cart-float-item__name {
    display: block;
    font-size: 0.9rem;
    color: var(--white);
    margin-bottom: var(--space-1);
}

.cart-float-item__price {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--gold-400);
}

.cart-float-item__remove {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 71, 87, 0.1);
    border: none;
    border-radius: 6px;
    color: #ff4757;
    cursor: pointer;
    transition: var(--transition-fast);
}

.cart-float-item__remove:hover {
    background: rgba(255, 71, 87, 0.2);
}

.cart-float-panel__totals {
    padding: var(--space-4) var(--space-6);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.cart-float-panel__total-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    color: var(--white-70);
    margin-bottom: var(--space-2);
}

.cart-float-panel__total-row--grand {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--gold-400);
    padding-top: var(--space-2);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.cart-float-panel__actions {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-6);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.btn--outline-light {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--white-60);
}

.btn--outline-light:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.3);
}

.btn--grow {
    flex: 1;
}

/* ═══════════════════════════════════════════════════════════════
   30. SERVICE PAGES - Stats, Intro, Packages, Musicians
   ═══════════════════════════════════════════════════════════════ */

/* Service Stats */
.service-stats {
    padding: var(--space-12) 0;
    background: linear-gradient(180deg, rgba(212, 175, 55, 0.06) 0%, rgba(212, 175, 55, 0.03) 100%), #121216;
}

.service-stats__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
    max-width: 900px;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .service-stats__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.stat-item {
    text-align: center;
    padding: var(--space-4);
}

.stat-item__value {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    background: linear-gradient(135deg, var(--gold-300), var(--gold-500));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.1;
    margin-bottom: var(--space-1);
}

.stat-item__label {
    font-size: 0.85rem;
    color: var(--white-60);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Service Intro */
.service-intro {
    padding: var(--space-20) 0;
    background: #08080c;
}

.service-intro .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
    align-items: center;
}

@media (max-width: 968px) {
    .service-intro .container {
        grid-template-columns: 1fr;
    }
}

.service-intro__content {
    max-width: 550px;
}

.service-intro__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: rgba(212, 175, 55, 0.1);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 50px;
    font-size: 0.8rem;
    color: var(--gold-400);
    margin-bottom: var(--space-4);
}

.service-intro__title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3rem);
    color: var(--white);
    margin-bottom: var(--space-4);
    line-height: 1.2;
}

.service-intro__text {
    font-size: 1.05rem;
    color: var(--white-70);
    line-height: 1.8;
    margin-bottom: var(--space-6);
}

.service-intro__image {
    position: relative;
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    border: 2px solid var(--gold-400);
}

.service-intro__image img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.service-intro__image:hover img {
    transform: scale(1.03);
}

/* Service Packages */
.service-packages {
    padding: var(--space-20) 0;
    background: #0e0e12;
}

.service-packages__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
}

@media (max-width: 968px) {
    .service-packages__grid {
        grid-template-columns: 1fr;
    }
}

/* Package Card */
.package-card {
    background: var(--dark-800);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--border-radius-xl);
    padding: var(--space-8);
    display: flex;
    flex-direction: column;
    transition: var(--transition-base);
    position: relative;
    overflow: hidden;
}

.package-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: transparent;
    transition: var(--transition-base);
}

.package-card:hover {
    border-color: rgba(212, 175, 55, 0.2);
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}

.package-card:hover::before {
    background: linear-gradient(90deg, var(--gold-400), var(--gold-300));
}

.package-card--highlight {
    border-color: rgba(212, 175, 55, 0.3);
    background: linear-gradient(135deg, var(--dark-800) 0%, rgba(212, 175, 55, 0.05) 100%);
}

.package-card--highlight::before {
    background: linear-gradient(90deg, var(--gold-400), var(--gold-300));
}

.package-card__header {
    margin-bottom: var(--space-6);
}

.package-card__icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(212, 175, 55, 0.1);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 16px;
    color: var(--gold-400);
    font-size: 1.5rem;
    margin-bottom: var(--space-4);
}

.package-card__name {
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--white);
    margin-bottom: var(--space-2);
}

.package-card__desc {
    font-size: 0.95rem;
    color: var(--white-60);
    line-height: 1.6;
}

.package-card__features {
    flex: 1;
    margin-bottom: var(--space-6);
}

.package-card__features li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    font-size: 0.9rem;
    color: var(--white-70);
}

.package-card__features li i {
    color: var(--gold-400);
    font-size: 0.75rem;
    margin-top: 5px;
}

.package-card__price {
    padding: var(--space-4);
    background: rgba(212, 175, 55, 0.05);
    border-radius: var(--border-radius-lg);
    text-align: center;
    margin-bottom: var(--space-4);
    font-size: 0.95rem;
    color: var(--white-70);
}

.package-card__price strong {
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--gold-400);
}

.package-card__price small {
    font-size: 0.75rem;
    color: var(--white-50);
}

.package-card__footer {
    margin-top: auto;
}

.package-card__footer--centered {
    text-align: center;
    padding-top: var(--space-4);
}

/* Service Packages Alternative Background */
.service-packages--alt {
    background: var(--dark-850);
}

/* Musicians Section */
.musicians-section {
    padding: var(--space-20) 0;
    background: #060609;
}

.musicians-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
}

@media (max-width: 968px) {
    .musicians-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .musicians-grid {
        grid-template-columns: 1fr;
    }
}

/* Musician Card */
.musician-card {
    background: var(--dark-800);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--border-radius-xl);
    overflow: hidden;
    transition: var(--transition-base);
}

.musician-card:hover {
    border-color: rgba(212, 175, 55, 0.2);
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}

.musician-card__video {
    position: relative;
    height: 200px;
    background: var(--dark-900);
}

.musician-card__video .youtube-thumbnail-card,
.musician-card__video .drive-thumbnail-card {
    width: 100%;
    height: 100%;
    cursor: pointer;
    position: relative;
}

.musician-card__video img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.musician-card__instrument-badge {
    position: absolute;
    bottom: var(--space-3);
    left: var(--space-3);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    font-size: 0.75rem;
    color: var(--gold-400);
    z-index: 2;
}

.musician-card__youtube,
.musician-card__drive {
    width: 100%;
    height: 100%;
}

.musician-card__youtube iframe,
.musician-card__drive iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.musician-card__placeholder {
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--dark-900) 0%, var(--dark-800) 100%);
    font-size: 3rem;
    color: rgba(212, 175, 55, 0.2);
    position: relative;
}

.drive-thumb-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--dark-900) 0%, var(--dark-800) 100%);
    font-size: 3rem;
    color: rgba(212, 175, 55, 0.3);
}

.musician-card__content {
    padding: var(--space-6);
}

.musician-card__icon {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(212, 175, 55, 0.1);
    border-radius: 12px;
    color: var(--gold-400);
    font-size: 1.1rem;
    margin-bottom: var(--space-4);
}

.musician-card__title {
    font-family: var(--font-display);
    font-size: 1.3rem;
    color: var(--white);
    margin-bottom: var(--space-2);
}

.musician-card__desc {
    font-size: 0.9rem;
    color: var(--white-60);
    line-height: 1.6;
    margin-bottom: var(--space-4);
}

.musician-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding-top: var(--space-4);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.musician-card__price {
    font-size: 0.9rem;
    color: var(--white-70);
}

.musician-card__price small {
    font-size: 0.7rem;
    color: var(--white-50);
}

/* ═══════════════════════════════════════════════════════════════
   31. SERVICE PAGES - Showcase, Equipment, Extras, CTA
   ═══════════════════════════════════════════════════════════════ */

/* Service Showcase (What The Funk, Vally, etc.) */
.service-showcase {
    padding: var(--space-20) 0;
    background: #0c0c10;
}

.service-showcase--reverse .showcase-row {
    direction: rtl;
}

.service-showcase--reverse .showcase-content,
.service-showcase--reverse .showcase-image {
    direction: ltr;
}

.showcase-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
    align-items: center;
}

@media (max-width: 968px) {
    .showcase-row {
        grid-template-columns: 1fr;
    }
    .service-showcase--reverse .showcase-row {
        direction: ltr;
    }
}

.showcase-content {
    max-width: 520px;
}

.showcase-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: linear-gradient(135deg, rgba(138, 43, 226, 0.15), rgba(212, 175, 55, 0.1));
    border: 1px solid rgba(138, 43, 226, 0.3);
    border-radius: 50px;
    font-size: 0.8rem;
    color: #a855f7;
    margin-bottom: var(--space-4);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.showcase-title {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3.5vw, 2.5rem);
    color: var(--white);
    margin-bottom: var(--space-4);
    line-height: 1.2;
}

.showcase-text {
    font-size: 1rem;
    color: var(--white-70);
    line-height: 1.7;
    margin-bottom: var(--space-6);
}

.showcase-features {
    margin-bottom: var(--space-4);
}

.showcase-features li {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    font-size: 0.95rem;
    color: var(--white-80);
}

.showcase-features li i {
    color: var(--gold-400);
    font-size: 0.8rem;
}

.showcase-price {
    display: block;
    font-family: var(--font-display);
    font-size: 1.2rem;
    color: var(--gold-400);
    margin-bottom: var(--space-6);
}

.showcase-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.showcase-image {
    position: relative;
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    border: 2px solid var(--gold-400);
}

.showcase-image img {
    width: 100%;
    height: 350px;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.showcase-image:hover img {
    transform: scale(1.03);
}

.showcase-image-badge {
    position: absolute;
    bottom: var(--space-4);
    left: var(--space-4);
    padding: var(--space-2) var(--space-4);
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    border-radius: 30px;
    font-size: 0.8rem;
    color: var(--gold-400);
}

/* Service Equipment */
.service-equipment {
    padding: var(--space-20) 0;
    background: #050508;
}

.service-equipment__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
}

@media (max-width: 1200px) {
    .service-equipment__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .service-equipment__grid {
        grid-template-columns: 1fr;
    }
}

/* Equipment Card */
.equipment-card {
    background: var(--dark-800);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--border-radius-lg);
    padding: var(--space-6);
    transition: var(--transition-base);
}

.equipment-card:hover {
    border-color: rgba(212, 175, 55, 0.2);
    transform: translateY(-3px);
}

.equipment-card__header {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.equipment-card__icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(212, 175, 55, 0.1);
    border-radius: 12px;
    color: var(--gold-400);
    font-size: 1.2rem;
}

.equipment-card__title {
    font-family: var(--font-display);
    font-size: 1.1rem;
    color: var(--white);
}

.equipment-card__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.equipment-card__list li {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.9rem;
    color: var(--white-70);
}

.equipment-card__list li i {
    color: var(--gold-400);
    font-size: 0.7rem;
}

/* Service Extras */
.service-extras {
    padding: var(--space-16) 0;
    background: #0a0a0e;
}

.service-extras__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
}

@media (max-width: 1200px) {
    .service-extras__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .service-extras__grid {
        grid-template-columns: 1fr;
    }
}

/* Extra Card */
.extra-card {
    text-align: center;
    padding: var(--space-6);
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--border-radius-lg);
    transition: var(--transition-base);
}

.extra-card:hover {
    background: rgba(212, 175, 55, 0.05);
    border-color: rgba(212, 175, 55, 0.2);
    transform: translateY(-3px);
}

.extra-card__icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(212, 175, 55, 0.1);
    border-radius: 50%;
    color: var(--gold-400);
    font-size: 1.3rem;
    margin: 0 auto var(--space-4);
}

.extra-card__title {
    font-family: var(--font-display);
    font-size: 1.1rem;
    color: var(--white);
    margin-bottom: var(--space-2);
}

.extra-card__desc {
    font-size: 0.85rem;
    color: var(--white-60);
    line-height: 1.5;
}

/* Service CTA */
.service-cta {
    padding: var(--space-24) 0;
    background: linear-gradient(180deg, rgba(212, 175, 55, 0.05) 0%, #0d0d11 50%, rgba(212, 175, 55, 0.03) 100%);
    position: relative;
    overflow: hidden;
}

.service-cta::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.08) 0%, transparent 70%);
    pointer-events: none;
}

.service-cta__content {
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
    position: relative;
}

.service-cta__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: rgba(212, 175, 55, 0.1);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 50px;
    font-size: 0.8rem;
    color: var(--gold-400);
    margin-bottom: var(--space-4);
}

.service-cta__title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3rem);
    background: linear-gradient(135deg, var(--white) 0%, var(--gold-400) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: var(--space-4);
}

.service-cta__text {
    font-size: 1.1rem;
    color: var(--white-70);
    line-height: 1.7;
    margin-bottom: var(--space-8);
}

.service-cta__buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-4);
}

/* ═══════════════════════════════════════════════════════════════
   32. SECTION HEADERS - Generic styles for all pages
   ═══════════════════════════════════════════════════════════════ */

.section-header {
    text-align: center;
    margin-bottom: var(--space-12);
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.section-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3rem);
    background: linear-gradient(135deg, var(--white) 0%, var(--gold-400) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: var(--space-3);
    line-height: 1.2;
}

.section-subtitle {
    font-size: 1.05rem;
    color: var(--white-60);
    line-height: 1.7;
}

/* Container utility */
.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--space-8);
}

/* Button small variant */
.btn--small {
    padding: var(--space-2) var(--space-4);
    font-size: 0.85rem;
}

/* Light theme for service pages */
[data-theme="light"] .service-stats {
    background: #f5f5f5;
}

[data-theme="light"] .stat-item__label {
    color: #666666;
}

[data-theme="light"] .stat-item__value {
    color: #1a1a1a;
}

[data-theme="light"] .service-intro {
    background: #fafafa;
}

[data-theme="light"] .service-intro__title {
    color: #1a1a1a;
}

[data-theme="light"] .service-intro__text {
    color: #4a4a4a;
}

[data-theme="light"] .service-packages {
    background: #f5f5f5;
}

[data-theme="light"] .package-card {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .package-card__name {
    color: #1a1a1a;
}

[data-theme="light"] .package-card__desc,
[data-theme="light"] .package-card__features li {
    color: #4a4a4a;
}

[data-theme="light"] .package-card__price {
    color: #1a1a1a;
}

[data-theme="light"] .musicians-section {
    background: #fafafa;
}

[data-theme="light"] .musician-card {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .musician-card__title {
    color: #1a1a1a;
}

[data-theme="light"] .musician-card__desc {
    color: #4a4a4a;
}

[data-theme="light"] .service-showcase {
    background: #f5f5f5;
}

[data-theme="light"] .showcase-title {
    color: #1a1a1a;
}

[data-theme="light"] .showcase-text {
    color: #4a4a4a;
}

[data-theme="light"] .service-equipment {
    background: #fafafa;
}

[data-theme="light"] .equipment-card {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .equipment-card__title {
    color: #1a1a1a;
}

[data-theme="light"] .equipment-card__desc {
    color: #4a4a4a;
}

[data-theme="light"] .extra-card {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .extra-card__title {
    color: #1a1a1a;
}

[data-theme="light"] .extra-card__desc {
    color: #4a4a4a;
}

[data-theme="light"] .service-cta {
    background: linear-gradient(135deg, #f8f8f8 0%, rgba(212, 175, 55, 0.05) 100%);
}

[data-theme="light"] .service-cta__title {
    background: linear-gradient(135deg, var(--dark-900) 0%, var(--gold-500) 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

[data-theme="light"] .section-title {
    background: linear-gradient(135deg, var(--dark-900) 0%, var(--gold-500) 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

/* ═══════════════════════════════════════════════════════════════
   33. WEDDING PAGE - Intro, Team, Packages, CTA
   ═══════════════════════════════════════════════════════════════ */

/* Wedding Intro */
.wedding-intro {
    padding: var(--space-20) 0;
    background: var(--dark-950);
}

.wedding-intro .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
    align-items: center;
}

@media (max-width: 968px) {
    .wedding-intro .container {
        grid-template-columns: 1fr;
    }
}

.wedding-intro__content {
    max-width: 550px;
}

.wedding-intro__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: rgba(255, 105, 180, 0.1);
    border: 1px solid rgba(255, 105, 180, 0.2);
    border-radius: 50px;
    font-size: 0.8rem;
    color: #ff69b4;
    margin-bottom: var(--space-4);
}

.wedding-intro__title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3rem);
    color: var(--white);
    margin-bottom: var(--space-4);
    line-height: 1.2;
}

.wedding-intro__text {
    font-size: 1.05rem;
    color: var(--white-70);
    line-height: 1.8;
    margin-bottom: var(--space-6);
}

.wedding-intro__image {
    position: relative;
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    border: 2px solid var(--gold-400);
}

.wedding-intro__image img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.wedding-intro__image:hover img {
    transform: scale(1.03);
}

/* Wedding Team */
.wedding-team {
    padding: var(--space-20) 0;
    background: var(--dark-900);
}

.wedding-team__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
}

@media (max-width: 1200px) {
    .wedding-team__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .wedding-team__grid {
        grid-template-columns: 1fr;
    }
}

/* Team Card */
.team-card {
    background: var(--dark-800);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--border-radius-xl);
    overflow: hidden;
    transition: var(--transition-base);
}

.team-card:hover {
    border-color: rgba(212, 175, 55, 0.2);
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}

.team-card__image {
    position: relative;
    height: 280px;
    overflow: hidden;
}

.team-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    transition: transform var(--transition-slow);
}

.team-card:hover .team-card__image img {
    transform: scale(1.08);
}

.team-card__icon {
    position: absolute;
    bottom: var(--space-4);
    right: var(--space-4);
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(10px);
    border-radius: 50%;
    color: var(--gold-400);
    font-size: 1rem;
}

.team-card__content {
    padding: var(--space-6);
    text-align: center;
}

.team-card__name {
    font-family: var(--font-display);
    font-size: 1.3rem;
    color: var(--white);
    margin-bottom: var(--space-1);
}

.team-card__role {
    display: block;
    font-size: 0.85rem;
    color: var(--gold-400);
    margin-bottom: var(--space-3);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.team-card__desc {
    font-size: 0.9rem;
    color: var(--white-60);
    line-height: 1.6;
}

/* Wedding Packages */
.wedding-packages {
    padding: var(--space-20) 0;
    background: var(--dark-950);
}

.wedding-packages__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
}

@media (max-width: 1200px) {
    .wedding-packages__grid {
        grid-template-columns: 1fr;
        max-width: 600px;
        margin: 0 auto;
    }
}

/* Package Card Badge */
.package-card__badge {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    padding: var(--space-1) var(--space-3);
    background: linear-gradient(135deg, var(--gold-400), var(--gold-500));
    color: var(--dark-900);
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Wedding Extras */
.wedding-extras {
    padding: var(--space-16) 0;
    background: var(--dark-800);
}

.wedding-extras__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
}

@media (max-width: 968px) {
    .wedding-extras__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .wedding-extras__grid {
        grid-template-columns: 1fr;
    }
}

/* Wedding Partners / Premium Services */
.wedding-partners {
    padding: var(--space-20) 0;
    background: var(--dark-900);
}

.wedding-partners__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
    max-width: 900px;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .wedding-partners__grid {
        grid-template-columns: 1fr;
    }
}

/* Partner Card */
.partner-card {
    background: var(--dark-800);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--border-radius-xl);
    padding: var(--space-8);
    text-align: center;
    transition: var(--transition-base);
}

.partner-card:hover {
    border-color: rgba(212, 175, 55, 0.2);
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}

.partner-card__icon {
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(212, 175, 55, 0.1);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 50%;
    color: var(--gold-400);
    font-size: 1.5rem;
    margin: 0 auto var(--space-4);
}

.partner-card__name {
    font-family: var(--font-display);
    font-size: 1.3rem;
    color: var(--white);
    margin-bottom: var(--space-2);
}

.partner-card__desc {
    font-size: 0.95rem;
    color: var(--white-60);
    line-height: 1.6;
    margin-bottom: var(--space-4);
}

.partner-card__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--gold-400);
    font-size: 0.9rem;
    font-weight: 500;
    transition: var(--transition-fast);
}

.partner-card:hover .partner-card__link {
    gap: var(--space-3);
}

/* Wedding CTA */
.wedding-cta {
    padding: var(--space-24) 0;
    background: linear-gradient(135deg, var(--dark-900) 0%, rgba(255, 105, 180, 0.05) 100%);
    position: relative;
    overflow: hidden;
}

.wedding-cta::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(255, 105, 180, 0.08) 0%, transparent 70%);
    pointer-events: none;
}

.wedding-cta__content {
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
    position: relative;
}

.wedding-cta__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: linear-gradient(135deg, rgba(255, 105, 180, 0.15), rgba(212, 175, 55, 0.1));
    border: 1px solid rgba(255, 105, 180, 0.3);
    border-radius: 50px;
    font-size: 0.9rem;
    color: #ff69b4;
    margin-bottom: var(--space-4);
    font-weight: 600;
}

.wedding-cta__title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3rem);
    background: linear-gradient(135deg, var(--white) 0%, #ff69b4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: var(--space-4);
}

.wedding-cta__text {
    font-size: 1.1rem;
    color: var(--white-70);
    line-height: 1.7;
    margin-bottom: var(--space-8);
}

.wedding-cta__buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-4);
}

/* Light theme for wedding */
[data-theme="light"] .wedding-intro {
    background: #fafafa;
}

[data-theme="light"] .wedding-intro__title {
    color: #1a1a1a;
}

[data-theme="light"] .wedding-intro__text {
    color: #4a4a4a;
}

[data-theme="light"] .wedding-team {
    background: #f5f5f5;
}

[data-theme="light"] .team-card {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .team-card__name {
    color: #1a1a1a;
}

[data-theme="light"] .team-card__role {
    color: #666666;
}

[data-theme="light"] .team-card__desc {
    color: #4a4a4a;
}

[data-theme="light"] .wedding-packages {
    background: #fafafa;
}

[data-theme="light"] .wedding-extras {
    background: #f0f0f0;
}

[data-theme="light"] .wedding-partners {
    background: #f5f5f5;
}

[data-theme="light"] .partner-card {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .partner-card__name {
    color: #1a1a1a;
}

[data-theme="light"] .partner-card__desc {
    color: #4a4a4a;
}

[data-theme="light"] .wedding-cta {
    background: linear-gradient(135deg, #f8f8f8 0%, rgba(255, 105, 180, 0.05) 100%);
}

[data-theme="light"] .wedding-cta__title {
    background: linear-gradient(135deg, var(--dark-900) 0%, #d63384 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

/* ═══════════════════════════════════════════════════════════════
   34. DEVIS PAGE - Catalogue & Panier
   ═══════════════════════════════════════════════════════════════ */

/* Section principale */
.devis-section {
    padding: var(--space-8) 0 var(--space-16);
    background: var(--dark-950);
    min-height: 80vh;
}

.devis-container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--space-6);
    display: grid;
    grid-template-columns: 350px 1fr;
    gap: var(--space-8);
    align-items: start;
}

/* ═══════════════════════════════════════════════════════════════
   34.1 CART SIDEBAR - Panier sticky
   ═══════════════════════════════════════════════════════════════ */

.cart-sidebar {
    position: sticky;
    top: 100px;
    background: var(--dark-800);
    border: 1px solid rgba(212, 175, 55, 0.15);
    border-radius: var(--border-radius-xl);
    overflow: hidden;
}

.cart-sidebar__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-5);
    background: rgba(212, 175, 55, 0.05);
    border-bottom: 1px solid rgba(212, 175, 55, 0.1);
}

.cart-sidebar__header h3 {
    font-family: var(--font-display);
    font-size: 1.1rem;
    color: var(--white);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.cart-sidebar__header h3 i {
    color: var(--gold-400);
}

.cart-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 var(--space-2);
    background: var(--gold-400);
    color: var(--dark-900);
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 12px;
}

/* Cart Items */
.cart-sidebar__items {
    padding: var(--space-4);
    max-height: 300px;
    overflow-y: auto;
}

.cart-sidebar__items::-webkit-scrollbar {
    width: 4px;
}

.cart-sidebar__items::-webkit-scrollbar-thumb {
    background: rgba(212, 175, 55, 0.3);
    border-radius: 4px;
}

/* Cart Item */
.cart-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3);
    background: rgba(255, 255, 255, 0.02);
    border-radius: var(--border-radius-lg);
    margin-bottom: var(--space-3);
    transition: var(--transition-fast);
}

.cart-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.cart-item--has-promo {
    border-left: 3px solid var(--gold-400);
    background: rgba(212, 175, 55, 0.05);
}

.cart-item__info {
    flex: 1;
    min-width: 0;
}

.cart-item__name {
    display: block;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--white);
    margin-bottom: var(--space-1);
}

.cart-item__service {
    display: block;
    font-size: 0.75rem;
    color: var(--white-50);
}

.cart-item__price {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--gold-400);
    white-space: nowrap;
}

.cart-item__remove {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 71, 87, 0.1);
    border: none;
    border-radius: 6px;
    color: #ff4757;
    font-size: 0.75rem;
    cursor: pointer;
    transition: var(--transition-fast);
    flex-shrink: 0;
}

.cart-item__remove:hover {
    background: #ff4757;
    color: var(--white);
}

/* Cart Item Promo */
.cart-item__promo {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-2);
    font-size: 0.75rem;
}

.cart-item__original-price {
    text-decoration: line-through;
    color: var(--white-40);
}

.cart-item__savings {
    color: var(--gold-400);
    font-weight: 600;
    background: rgba(212, 175, 55, 0.15);
    padding: 2px 6px;
    border-radius: 4px;
}

/* Cart Empty */
.cart-empty {
    text-align: center;
    padding: var(--space-8);
    color: var(--white-50);
}

.cart-empty i {
    font-size: 2rem;
    margin-bottom: var(--space-3);
    opacity: 0.5;
}

.cart-empty p {
    margin-bottom: var(--space-2);
}

.cart-empty small {
    font-size: 0.8rem;
    opacity: 0.7;
}

/* Cart Totals */
.cart-sidebar__totals {
    padding: var(--space-4);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(0, 0, 0, 0.2);
}

.cart-total-row {
    display: flex;
    justify-content: space-between;
    padding: var(--space-2) 0;
    font-size: 0.9rem;
    color: var(--white-70);
}

.cart-total-row i {
    margin-right: var(--space-1);
}

.cart-total-row--promo {
    color: var(--gold-400);
    font-weight: 600;
    background: rgba(212, 175, 55, 0.1);
    padding: var(--space-2);
    border-radius: 4px;
    margin: var(--space-2) 0;
}

.cart-total-row--discount {
    color: #4caf50;
    font-weight: 600;
    background: rgba(76, 175, 80, 0.1);
    padding: var(--space-2);
    border-radius: 4px;
    margin: var(--space-2) 0;
}

.cart-total-row--grand {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--gold-400);
    padding-top: var(--space-3);
    margin-top: var(--space-2);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Cart Actions */
.cart-sidebar__actions {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-4);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.cart-sidebar__actions .btn--outline {
    flex: 0 0 auto;
}

.cart-sidebar__actions .btn--primary {
    flex: 1;
}

#btn-clear-cart {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: var(--white);
    transition: var(--transition-fast);
}

#btn-clear-cart:hover {
    background: rgba(244, 67, 54, 0.2);
    border-color: #f44336;
    color: #f44336;
}

/* Cart Login */
.cart-sidebar__login {
    padding: var(--space-4);
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(212, 175, 55, 0.03);
}

.cart-sidebar__login p {
    font-size: 0.85rem;
    color: var(--white-60);
    margin-bottom: var(--space-3);
}

.cart-sidebar__login p i {
    margin-right: var(--space-2);
}

/* ═══════════════════════════════════════════════════════════════
   34.2 CATALOG - Liste des services
   ═══════════════════════════════════════════════════════════════ */

.catalog {
    background: var(--dark-800);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--border-radius-xl);
    padding: var(--space-8);
}

.catalog__header {
    margin-bottom: var(--space-6);
}

.catalog__header h2 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--white);
    margin-bottom: var(--space-2);
}

.catalog__header p {
    font-size: 0.95rem;
    color: var(--white-60);
}

/* Catalog Filters */
.catalog__filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.catalog__filter {
    padding: var(--space-2) var(--space-4);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    color: var(--white-70);
    font-size: 0.85rem;
    cursor: pointer;
    transition: var(--transition-fast);
}

.catalog__filter:hover {
    background: rgba(212, 175, 55, 0.1);
    border-color: rgba(212, 175, 55, 0.2);
}

.catalog__filter.active {
    background: rgba(212, 175, 55, 0.15);
    border-color: var(--gold-400);
    color: var(--gold-400);
}

/* Catalog Loading & Error */
.catalog__services {
    min-height: 200px;
}

.catalog__loading,
.catalog__error {
    text-align: center;
    padding: var(--space-12);
    color: var(--white-50);
}

.catalog__loading i,
.catalog__error i {
    font-size: 2rem;
    margin-bottom: var(--space-3);
}

.catalog__loading i {
    color: var(--gold-400);
}

.catalog__error i {
    color: #ff4757;
}

/* ═══════════════════════════════════════════════════════════════
   34.3 SERVICE CATEGORY - Catégories de services
   ═══════════════════════════════════════════════════════════════ */

.service-category {
    margin-bottom: var(--space-10);
    padding-bottom: var(--space-8);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.service-category:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.service-category__header {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
    padding: var(--space-4) var(--space-5);
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.15) 0%, rgba(212, 175, 55, 0.05) 100%);
    border-left: 4px solid var(--gold-400);
    border-radius: 0 var(--border-radius-lg) var(--border-radius-lg) 0;
}

.service-category__header i {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(212, 175, 55, 0.2);
    border-radius: 12px;
    color: var(--gold-400);
    font-size: 1.3rem;
}

.service-category__header h3 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--white);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.service-category__desc {
    font-size: 0.95rem;
    color: var(--white-70);
    margin-bottom: var(--space-5);
    padding-left: var(--space-5);
    line-height: 1.6;
}

.service-category__items {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* Service Item - Sous-services */
.service-item {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-5);
    background: var(--dark-800);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--border-radius-lg);
    transition: var(--transition-fast);
}

.service-item:hover {
    background: rgba(212, 175, 55, 0.08);
    border-color: rgba(212, 175, 55, 0.3);
    transform: translateX(5px);
}

.service-item__info {
    flex: 1;
    min-width: 0;
}

.service-item__info h4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--white);
    margin-bottom: var(--space-2);
}

.service-item__info p {
    font-size: 0.85rem;
    color: var(--white-60);
    line-height: 1.5;
}

.service-item__price {
    font-family: var(--font-display);
    font-size: 1rem;
    color: var(--gold-400);
    white-space: nowrap;
}

.service-item__price small {
    font-size: 0.7rem;
    color: var(--white-50);
    font-family: var(--font-body);
}

.price-on-demand {
    font-size: 0.8rem;
    color: var(--white-50);
    font-style: italic;
}

.service-item__action {
    flex-shrink: 0;
}

/* Add to Cart Button */
.btn-add-cart {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(212, 175, 55, 0.1);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 10px;
    color: var(--gold-400);
    font-size: 1rem;
    cursor: pointer;
    transition: var(--transition-fast);
}

.btn-add-cart:hover {
    background: var(--gold-400);
    color: var(--dark-900);
}

/* Contact Button */
.btn-contact {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: var(--white-60);
    font-size: 0.9rem;
    transition: var(--transition-fast);
}

.btn-contact:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--white);
}

/* ═══════════════════════════════════════════════════════════════
   34.4 CHECKOUT MODAL
   ═══════════════════════════════════════════════════════════════ */

.modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
}

.modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
}

.modal__content {
    position: relative;
    width: 100%;
    max-width: 700px;
    max-height: 90vh;
    overflow-y: auto;
    background: var(--dark-800);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: var(--border-radius-xl);
}

.modal__close {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: none;
    border-radius: 50%;
    color: var(--white-60);
    font-size: 1.5rem;
    cursor: pointer;
    transition: var(--transition-fast);
    z-index: 1;
}

.modal__close:hover {
    background: rgba(255, 71, 87, 0.2);
    color: #ff4757;
}

.modal__header {
    padding: var(--space-8);
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.modal__header h2 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--white);
    margin-bottom: var(--space-2);
}

.modal__header h2 i {
    color: var(--gold-400);
    margin-right: var(--space-2);
}

.modal__header p {
    font-size: 0.95rem;
    color: var(--white-60);
}

/* Checkout Form */
.checkout-form {
    padding: var(--space-6);
}

.checkout-summary {
    background: rgba(212, 175, 55, 0.05);
    border: 1px solid rgba(212, 175, 55, 0.1);
    border-radius: var(--border-radius-lg);
    padding: var(--space-4);
    margin-bottom: var(--space-6);
}

.checkout-summary h4 {
    font-size: 1rem;
    color: var(--gold-400);
    margin-bottom: var(--space-3);
}

.checkout-summary ul {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-3);
}

.checkout-summary li {
    display: flex;
    justify-content: space-between;
    padding: var(--space-2) 0;
    font-size: 0.9rem;
    color: var(--white-80);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.checkout-summary li:last-child {
    border-bottom: none;
}

.checkout-summary li span {
    color: var(--gold-400);
}

.checkout-summary__subtotal,
.checkout-summary__discount {
    display: flex;
    justify-content: space-between;
    padding: var(--space-2) 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.checkout-summary__discount {
    color: #4caf50;
    font-weight: 600;
}

.checkout-summary__discount .discount-value {
    color: #4caf50;
}

.checkout-summary__total {
    padding-top: var(--space-3);
    margin-top: var(--space-2);
    font-size: 1rem;
    color: var(--white);
    text-align: right;
}

.checkout-summary__total strong {
    color: var(--gold-400);
    font-size: 1.2rem;
}

/* Checkout Section */
.checkout-section {
    margin-bottom: var(--space-6);
}

.checkout-section h3 {
    font-family: var(--font-display);
    font-size: 1.1rem;
    color: var(--white);
    margin-bottom: var(--space-4);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.checkout-section h3 i {
    color: var(--gold-400);
}

.checkout-section--rgpd {
    padding-top: var(--space-4);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.checkout-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
}

/* Checkout Submit */
.checkout-submit {
    text-align: center;
    padding-top: var(--space-4);
}

.checkout-submit .btn {
    min-width: 200px;
}

/* Checkout Success */
.checkout-success {
    text-align: center;
    padding: var(--space-12);
}

.checkout-success__icon {
    width: 80px;
    height: 80px;
    margin: 0 auto var(--space-6);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(76, 175, 80, 0.1);
    border-radius: 50%;
}

.checkout-success__icon i {
    font-size: 2.5rem;
    color: #4caf50;
}

.checkout-success h3 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--white);
    margin-bottom: var(--space-3);
}

.checkout-success p {
    color: var(--white-60);
    margin-bottom: var(--space-6);
}

/* ═══════════════════════════════════════════════════════════════
   34.5 CART MOBILE - Panier mobile
   ═══════════════════════════════════════════════════════════════ */

/* Toggle Button */
.cart-mobile-toggle {
    display: none;
    position: fixed;
    bottom: 150px;
    right: 20px;
    width: 55px;
    height: 55px;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--gold-400), #f0d77d);
    border: none;
    border-radius: 50%;
    color: var(--dark-900);
    font-size: 1.3rem;
    cursor: pointer;
    z-index: 9996;
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4);
    transition: var(--transition-fast);
}

.cart-mobile-toggle:hover {
    transform: scale(1.05);
}

.cart-mobile-toggle.hidden {
    opacity: 0;
    pointer-events: none;
    transform: scale(0.8);
}

.cart-mobile-toggle__badge {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 24px;
    height: 24px;
    background: #e53935;
    color: var(--white);
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Mobile Panel */
.cart-mobile-panel {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--dark-800);
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    z-index: 10001;
    max-height: 70vh;
    transform: translateY(100%);
    transition: transform 0.3s ease;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.5);
}

.cart-mobile-panel.open {
    transform: translateY(0);
}

.cart-mobile-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.cart-mobile-panel__header h3 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.1rem;
    color: var(--gold-400);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.cart-mobile-panel__close {
    background: none;
    border: none;
    color: var(--white-60);
    font-size: 1.5rem;
    cursor: pointer;
    padding: var(--space-2);
}

.cart-mobile-panel__items {
    max-height: 35vh;
    overflow-y: auto;
    padding: var(--space-4);
}

/* Mobile Cart Item */
.cart-mobile-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3);
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
    margin-bottom: var(--space-2);
}

.cart-mobile-item__info {
    flex: 1;
    min-width: 0;
}

.cart-mobile-item__name {
    display: block;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--white);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cart-mobile-item__price {
    font-size: 0.85rem;
    color: var(--gold-400);
    margin-top: var(--space-1);
}

.cart-mobile-item__remove {
    width: 32px;
    height: 32px;
    background: rgba(244, 67, 54, 0.1);
    border: none;
    border-radius: 8px;
    color: #f44336;
    cursor: pointer;
    margin-left: var(--space-3);
    transition: var(--transition-fast);
}

.cart-mobile-item__remove:hover {
    background: #f44336;
    color: var(--white);
}

/* Mobile Cart Empty */
.cart-mobile-empty {
    text-align: center;
    padding: var(--space-8);
    color: var(--white-50);
}

.cart-mobile-empty i {
    font-size: 2.5rem;
    margin-bottom: var(--space-3);
    opacity: 0.3;
}

/* Mobile Cart Totals */
.cart-mobile-panel__totals {
    padding: var(--space-4) var(--space-5);
    background: rgba(0, 0, 0, 0.2);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.cart-mobile-panel__total-row {
    display: flex;
    justify-content: space-between;
    padding: var(--space-2) 0;
    color: var(--white-80);
    font-size: 0.9rem;
}

.cart-mobile-panel__total-row--grand {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--gold-400);
    padding-top: var(--space-3);
    border-top: 1px solid rgba(212, 175, 55, 0.3);
    margin-top: var(--space-2);
}

.cart-mobile-panel__total-row--promo {
    color: var(--gold-400);
    font-weight: 600;
    background: rgba(212, 175, 55, 0.1);
    padding: var(--space-2);
    border-radius: 4px;
}

.cart-mobile-panel__total-row--discount {
    color: #4caf50;
    font-weight: 600;
    background: rgba(76, 175, 80, 0.1);
    padding: var(--space-2);
    border-radius: 4px;
}

/* Mobile Cart Actions */
.cart-mobile-panel__actions {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0));
}

.cart-mobile-panel__actions .btn {
    flex: 1;
    justify-content: center;
    padding: var(--space-4);
}

.cart-mobile-panel__actions .btn--clear {
    flex: 0 0 auto;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--white-70);
}

/* Mobile Overlay */
.cart-mobile-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 10000;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.cart-mobile-overlay.show {
    opacity: 1;
}

/* ═══════════════════════════════════════════════════════════════
   34.6 NOTIFICATIONS
   ═══════════════════════════════════════════════════════════════ */

.notification {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    padding: var(--space-4) var(--space-6);
    background: var(--dark-700);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--border-radius-lg);
    color: var(--white);
    font-size: 0.95rem;
    z-index: 10002;
    opacity: 0;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}

.notification.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

.notification--success {
    border-color: rgba(76, 175, 80, 0.3);
}

.notification--success i {
    color: #4caf50;
}

.notification--error {
    border-color: rgba(244, 67, 54, 0.3);
}

.notification--error i {
    color: #f44336;
}

/* ═══════════════════════════════════════════════════════════════
   34.7 RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 1200px) {
    .devis-container {
        grid-template-columns: 300px 1fr;
    }
}

@media (max-width: 1024px) {
    .cart-sidebar {
        display: none !important;
    }

    .cart-mobile-toggle {
        display: flex;
    }

    .cart-mobile-panel {
        display: block;
    }

    .cart-mobile-overlay {
        display: block;
        pointer-events: none;
    }

    .cart-mobile-overlay.show {
        pointer-events: auto;
    }

    .devis-container {
        display: block;
    }

    .catalog {
        width: 100%;
        padding-bottom: 100px;
    }
}

@media (max-width: 768px) {
    .devis-section {
        padding: var(--space-6) 0 var(--space-12);
    }

    .devis-container {
        padding: 0 var(--space-4);
    }

    .catalog {
        padding: var(--space-5);
    }

    .catalog__header h2 {
        font-size: 1.3rem;
    }

    .service-category__header i {
        width: 35px;
        height: 35px;
    }

    .service-category__desc {
        padding-left: calc(35px + var(--space-3));
    }

    .service-item {
        flex-wrap: wrap;
        gap: var(--space-3);
    }

    .service-item__info {
        flex: 1 1 100%;
        order: 1;
    }

    .service-item__price {
        order: 2;
        flex: 1;
    }

    .service-item__action {
        order: 3;
    }

    .checkout-grid {
        grid-template-columns: 1fr;
    }

    /* Positionnement des boutons flottants */
    #dj-chat-button {
        width: 44px !important;
        height: 44px !important;
        bottom: 12px !important;
        right: 12px !important;
    }

    #dj-chat-button svg {
        width: 20px !important;
        height: 20px !important;
    }

    #dj-whatsapp-wrapper {
        bottom: 62px !important;
        right: 12px !important;
    }

    #dj-whatsapp-wrapper .dj-whatsapp-float {
        width: 44px !important;
        height: 44px !important;
    }

    #dj-whatsapp-wrapper .dj-whatsapp-float svg {
        width: 22px !important;
        height: 22px !important;
    }

    .cart-mobile-toggle {
        bottom: 112px !important;
        right: 12px !important;
        width: 44px !important;
        height: 44px !important;
        font-size: 1rem !important;
    }

    .cart-mobile-toggle__badge {
        width: 18px !important;
        height: 18px !important;
        font-size: 0.6rem !important;
        min-width: 18px !important;
    }
}

@media (max-width: 480px) {
    .catalog__filters {
        gap: var(--space-1);
    }

    .catalog__filter {
        padding: var(--space-2) var(--space-3);
        font-size: 0.8rem;
    }

    .cart-mobile-toggle {
        bottom: 135px;
        right: 15px;
        width: 50px;
        height: 50px;
        font-size: 1.2rem;
    }

    .cart-mobile-toggle__badge {
        width: 20px;
        height: 20px;
        font-size: 0.65rem;
        top: -3px;
        right: -3px;
    }

    .cart-mobile-panel__items {
        max-height: 30vh;
    }

    .modal__content {
        max-height: 95vh;
    }

    .modal__header {
        padding: var(--space-6);
    }

    .checkout-form {
        padding: var(--space-4);
    }
}

/* ═══════════════════════════════════════════════════════════════
   34.8 LIGHT THEME
   ═══════════════════════════════════════════════════════════════ */

[data-theme="light"] .devis-section {
    background: #f5f5f5;
}

[data-theme="light"] .cart-sidebar {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .cart-sidebar__header {
    background: rgba(212, 175, 55, 0.08);
    border-color: rgba(212, 175, 55, 0.15);
}

[data-theme="light"] .cart-sidebar__header h3 {
    color: #1a1a1a;
}

[data-theme="light"] .cart-item {
    background: #f8f8f8;
}

[data-theme="light"] .cart-item:hover {
    background: #f0f0f0;
}

[data-theme="light"] .cart-item__name {
    color: #1a1a1a;
}

[data-theme="light"] .cart-item__price {
    color: #333333;
}

[data-theme="light"] .cart-item__details {
    color: #666666;
}

[data-theme="light"] .cart-empty {
    color: #666666;
}

[data-theme="light"] .catalog {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .catalog__header h2 {
    color: #1a1a1a;
}

[data-theme="light"] .catalog__header p {
    color: #666666;
}

[data-theme="light"] .catalog__filter {
    background: #f5f5f5;
    border-color: rgba(0, 0, 0, 0.1);
    color: #4a4a4a;
}

[data-theme="light"] .service-category__header h3 {
    color: #1a1a1a;
}

[data-theme="light"] .service-item {
    background: #f8f8f8;
    border-color: rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .service-item:hover {
    background: #f0f0f0;
}

[data-theme="light"] .service-item__info h4 {
    color: #1a1a1a;
}

[data-theme="light"] .service-item__info p {
    color: #666666;
}

[data-theme="light"] .service-item__price {
    color: #333333;
}

[data-theme="light"] .modal__content {
    background: #ffffff;
}

[data-theme="light"] .modal__header h2 {
    color: #1a1a1a;
}

[data-theme="light"] .modal__body {
    color: #4a4a4a;
}

[data-theme="light"] .checkout-section h3 {
    color: #1a1a1a;
}

[data-theme="light"] .checkout-section p,
[data-theme="light"] .checkout-section label {
    color: #4a4a4a;
}

[data-theme="light"] .cart-mobile-panel {
    background: #ffffff;
}

[data-theme="light"] .cart-mobile-panel__header h3 {
    color: var(--gold-500);
}

[data-theme="light"] .cart-mobile-item {
    background: #f5f5f5;
}

[data-theme="light"] .cart-mobile-item__name {
    color: #1a1a1a;
}

[data-theme="light"] .cart-mobile-item__price {
    color: #333333;
}

[data-theme="light"] .notification {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.1);
    color: #1a1a1a;
}

/* ═══════════════════════════════════════════════════════════════
   35. CONTACT PAGE
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   35.1 CONTACT FORM
   ═══════════════════════════════════════════════════════════════ */

.contact-form__wrapper {
    background: var(--dark-800);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--border-radius-xl);
    padding: var(--space-8);
}

.contact-form {
    display: block;
}

.contact-form__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5);
    margin-bottom: var(--space-6);
}

/* Form Groups */
.form-group {
    display: flex;
    flex-direction: column;
}

.form-group--full {
    grid-column: 1 / -1;
}

.form-label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--white);
    margin-bottom: var(--space-2);
}

.form-label i {
    color: var(--gold-400);
    font-size: 0.85rem;
}

/* Form Inputs */
.form-input,
.form-select,
.form-textarea {
    width: 100%;
    padding: var(--space-4);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--border-radius-lg);
    color: var(--white);
    font-family: var(--font-body);
    font-size: 0.95rem;
    transition: var(--transition-fast);
}

.form-input:hover,
.form-select:hover,
.form-textarea:hover {
    border-color: rgba(212, 175, 55, 0.3);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--gold-400);
    background: rgba(212, 175, 55, 0.05);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
}

.form-input::placeholder,
.form-textarea::placeholder {
    color: var(--white-40);
}

.form-select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23d4af37' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 3rem;
}

.form-select option {
    background: var(--dark-800);
    color: var(--white);
}

.form-textarea {
    resize: vertical;
    min-height: 120px;
}

/* RGPD Info Box */
.contact-form__rgpd-info {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-4);
    background: rgba(212, 175, 55, 0.05);
    border: 1px solid rgba(212, 175, 55, 0.15);
    border-radius: var(--border-radius-lg);
    margin-bottom: var(--space-6);
}

.contact-form__rgpd-info > i {
    color: var(--gold-400);
    font-size: 1.5rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.contact-form__rgpd-info strong {
    display: block;
    color: var(--gold-400);
    font-size: 0.95rem;
    margin-bottom: var(--space-1);
}

.contact-form__rgpd-info p {
    font-size: 0.85rem;
    color: var(--white-70);
    line-height: 1.5;
}

/* Checkboxes */
.contact-form__checkboxes {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.form-checkbox {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}

.form-checkbox input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin-top: 2px;
    flex-shrink: 0;
    accent-color: var(--gold-400);
    cursor: pointer;
}

.form-checkbox label {
    font-size: 0.9rem;
    color: var(--white-80);
    line-height: 1.5;
    cursor: pointer;
}

.form-checkbox label strong {
    color: var(--white);
}

.form-checkbox label a {
    color: var(--gold-400);
    text-decoration: underline;
    transition: var(--transition-fast);
}

.form-checkbox label a:hover {
    color: var(--gold-300);
}

.form-checkbox label small {
    display: block;
    font-size: 0.8rem;
    color: var(--white-50);
    margin-top: var(--space-1);
}

/* Submit Button */
.contact-form__submit {
    text-align: center;
}

.contact-form__submit .btn {
    min-width: 200px;
}

/* ═══════════════════════════════════════════════════════════════
   35.2 CONTACT SUCCESS
   ═══════════════════════════════════════════════════════════════ */

.contact-success {
    text-align: center;
    padding: var(--space-12);
}

.contact-success__icon {
    width: 100px;
    height: 100px;
    margin: 0 auto var(--space-6);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(76, 175, 80, 0.1);
    border-radius: 50%;
}

.contact-success__icon i {
    font-size: 3rem;
    color: #4caf50;
}

.contact-success__title {
    font-family: var(--font-display);
    font-size: 1.8rem;
    color: var(--white);
    margin-bottom: var(--space-3);
}

.contact-success__text {
    font-size: 1rem;
    color: var(--white-70);
    margin-bottom: var(--space-4);
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.contact-success__ref {
    font-size: 0.9rem;
    color: var(--gold-400);
    font-weight: 500;
}

/* ═══════════════════════════════════════════════════════════════
   35.3 CONTACT INFO SIDEBAR
   ═══════════════════════════════════════════════════════════════ */

.contact-info {
    background: var(--dark-800);
    border: 1px solid rgba(212, 175, 55, 0.15);
    border-radius: var(--border-radius-xl);
    padding: var(--space-8);
}

.contact-info__title {
    font-family: var(--font-display);
    font-size: 1.3rem;
    color: var(--white);
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid rgba(212, 175, 55, 0.1);
}

.contact-info__item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

.contact-info__item:last-of-type {
    margin-bottom: 0;
}

.contact-info__icon {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(212, 175, 55, 0.1);
    border-radius: 12px;
    color: var(--gold-400);
    font-size: 1rem;
    flex-shrink: 0;
}

.contact-info__text h5 {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--white);
    margin-bottom: var(--space-1);
}

.contact-info__text p {
    font-size: 0.9rem;
    color: var(--white-70);
}

.contact-info__text a {
    color: var(--white-70);
    transition: var(--transition-fast);
}

.contact-info__text a:hover {
    color: var(--gold-400);
}

/* Social Links */
.contact-info__social {
    margin-top: var(--space-8);
    padding-top: var(--space-6);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.contact-info__social > p {
    font-size: 0.9rem;
    color: var(--white-60);
    margin-bottom: var(--space-4);
}

.contact-info__social-links {
    display: flex;
    gap: var(--space-3);
}

.contact-info__social-links a {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: var(--white-70);
    font-size: 1.1rem;
    transition: var(--transition-fast);
}

.contact-info__social-links a:hover {
    background: var(--gold-400);
    border-color: var(--gold-400);
    color: var(--dark-900);
    transform: translateY(-3px);
}

/* ═══════════════════════════════════════════════════════════════
   35.4 CTA SECTION
   ═══════════════════════════════════════════════════════════════ */

.cta-section {
    padding: var(--space-16) 0;
    background: linear-gradient(135deg, var(--dark-800) 0%, var(--dark-900) 100%);
    position: relative;
    overflow: hidden;
}

.cta-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.3), transparent);
}

.cta-section__container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--space-6);
}

.cta-section__content {
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
}

.cta-section__title {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 4vw, 2.2rem);
    color: var(--white);
    margin-bottom: var(--space-4);
}

.cta-section__text {
    font-size: 1.05rem;
    color: var(--white-70);
    margin-bottom: var(--space-8);
    line-height: 1.6;
}

.cta-section__buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-4);
}

/* ═══════════════════════════════════════════════════════════════
   35.5 RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 968px) {
    .contact-section__grid {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }

    .contact-info {
        order: -1;
    }
}

@media (max-width: 768px) {
    .contact-form__wrapper {
        padding: var(--space-6);
    }

    .contact-form__grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    .form-group--full {
        grid-column: auto;
    }

    .contact-form__rgpd-info {
        flex-direction: column;
        text-align: center;
    }

    .contact-info {
        padding: var(--space-6);
    }

    .cta-section {
        padding: var(--space-12) 0;
    }

    .cta-section__buttons {
        flex-direction: column;
        align-items: center;
    }

    .cta-section__buttons .hero__button {
        width: 100%;
        max-width: 300px;
    }
}

@media (max-width: 480px) {
    .contact-form__wrapper,
    .contact-info {
        padding: var(--space-5);
    }

    .form-input,
    .form-select,
    .form-textarea {
        padding: var(--space-3);
    }

    .contact-success {
        padding: var(--space-8);
    }

    .contact-success__icon {
        width: 80px;
        height: 80px;
    }

    .contact-success__icon i {
        font-size: 2.5rem;
    }
}

/* ═══════════════════════════════════════════════════════════════
   35.6 LIGHT THEME
   ═══════════════════════════════════════════════════════════════ */

[data-theme="light"] .contact-form__wrapper {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .form-label {
    color: var(--dark-900);
}

[data-theme="light"] .form-input,
[data-theme="light"] .form-select,
[data-theme="light"] .form-textarea {
    background: #f8f8f8;
    border-color: rgba(0, 0, 0, 0.1);
    color: var(--dark-900);
}

[data-theme="light"] .form-input::placeholder,
[data-theme="light"] .form-textarea::placeholder {
    color: var(--dark-500);
}

[data-theme="light"] .form-select option {
    background: #ffffff;
    color: var(--dark-900);
}

[data-theme="light"] .contact-form__rgpd-info {
    background: rgba(212, 175, 55, 0.08);
}

[data-theme="light"] .contact-form__rgpd-info p {
    color: var(--dark-600);
}

[data-theme="light"] .form-checkbox label {
    color: var(--dark-700);
}

[data-theme="light"] .form-checkbox label strong {
    color: var(--dark-900);
}

[data-theme="light"] .contact-success__title {
    color: var(--dark-900);
}

[data-theme="light"] .contact-success__text {
    color: var(--dark-600);
}

[data-theme="light"] .contact-info {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .contact-info__title {
    color: var(--dark-900);
}

[data-theme="light"] .contact-info__text h5 {
    color: var(--dark-900);
}

[data-theme="light"] .contact-info__text p,
[data-theme="light"] .contact-info__text a {
    color: var(--dark-600);
}

[data-theme="light"] .contact-info__social-links a {
    background: #f5f5f5;
    border-color: rgba(0, 0, 0, 0.08);
    color: var(--dark-600);
}

[data-theme="light"] .cta-section {
    background: linear-gradient(135deg, #f5f5f5 0%, #ebebeb 100%);
}

[data-theme="light"] .cta-section__title {
    color: var(--dark-900);
}

[data-theme="light"] .cta-section__text {
    color: var(--dark-600);
}

/* ═══════════════════════════════════════════════════════════════
   36. GALLERY PAGE
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   36.1 GALLERY SECTION
   ═══════════════════════════════════════════════════════════════ */

.gallery-section {
    padding: var(--space-16) 0 var(--space-20);
    background: linear-gradient(180deg, var(--dark-950) 0%, var(--dark-900) 100%);
}

.gallery-intro {
    text-align: center;
    max-width: 750px;
    margin: 0 auto var(--space-10);
}

.gallery-intro p {
    font-size: 1.15rem;
    color: var(--white-70);
    line-height: 1.8;
}

/* ═══════════════════════════════════════════════════════════════
   36.2 GALLERY FILTERS - Améliorés
   ═══════════════════════════════════════════════════════════════ */

.gallery-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3);
    margin-bottom: var(--space-10);
    padding: var(--space-6) var(--space-4);
    background: rgba(0, 0, 0, 0.3);
    border-radius: var(--border-radius-xl);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.gallery-filter {
    padding: var(--space-3) var(--space-6);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 30px;
    color: var(--white-70);
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.gallery-filter:hover {
    background: rgba(212, 175, 55, 0.15);
    border-color: rgba(212, 175, 55, 0.4);
    color: var(--gold-400);
    transform: translateY(-2px);
}

.gallery-filter.active {
    background: linear-gradient(135deg, var(--gold-400) 0%, var(--gold-500) 100%);
    border-color: var(--gold-400);
    color: var(--dark-900);
    font-weight: 600;
    box-shadow: 0 4px 20px rgba(212, 175, 55, 0.3);
}

/* ═══════════════════════════════════════════════════════════════
   36.3 GALLERY GRID - Masonry Style
   ═══════════════════════════════════════════════════════════════ */

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 200px;
    gap: var(--space-4);
}

/* Images en vedette (plus grandes) - 1 sur 8 */
.gallery-item:nth-child(8n+1) {
    grid-column: span 2;
    grid-row: span 2;
}

/* Images moyennes - pour varier */
.gallery-item:nth-child(8n+4),
.gallery-item:nth-child(8n+7) {
    grid-row: span 2;
}

/* ═══════════════════════════════════════════════════════════════
   36.4 GALLERY ITEM - Amélioré
   ═══════════════════════════════════════════════════════════════ */

.gallery-item {
    position: relative;
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    cursor: pointer;
    opacity: 0;
    transform: translateY(30px) scale(0.95);
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.3s ease;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.gallery-item.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.gallery-item:hover {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5),
                0 0 0 2px rgba(212, 175, 55, 0.3);
    z-index: 2;
}

.gallery-item__image {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
}

.gallery-item__image img,
.gallery-item__image video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.gallery-item:hover .gallery-item__image img,
.gallery-item:hover .gallery-item__image video {
    transform: scale(1.08);
}

/* Overlay */
.gallery-item__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: var(--space-5);
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.3) 50%, transparent 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gallery-item:hover .gallery-item__overlay {
    opacity: 1;
}

.gallery-item__overlay h3 {
    font-family: var(--font-display);
    font-size: 1.1rem;
    color: var(--white);
    margin-bottom: var(--space-1);
}

.gallery-item__overlay p {
    font-size: 0.85rem;
    color: var(--gold-400);
}

.gallery-item__zoom {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(212, 175, 55, 0.9);
    border: none;
    border-radius: 50%;
    color: var(--dark-900);
    cursor: pointer;
    transform: scale(0);
    transition: transform 0.3s ease;
}

.gallery-item:hover .gallery-item__zoom {
    transform: scale(1);
}

.gallery-item__zoom:hover {
    background: var(--gold-300);
}

/* Video Items */
.gallery-item--video .gallery-item__image {
    position: relative;
}

.gallery-item__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.7);
    border: 2px solid var(--white);
    border-radius: 50%;
    color: var(--white);
    font-size: 1.2rem;
    transition: var(--transition-fast);
}

.gallery-item--video:hover .gallery-item__play {
    background: var(--gold-400);
    border-color: var(--gold-400);
    color: var(--dark-900);
    transform: translate(-50%, -50%) scale(1.1);
}

.gallery-item__play--youtube {
    background: #ff0000;
    border-color: #ff0000;
}

.gallery-item__play--youtube i {
    font-size: 1.5rem;
}

.gallery-item__overlay--video {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, transparent 100%);
}

/* ═══════════════════════════════════════════════════════════════
   36.5 LIGHTBOX
   ═══════════════════════════════════════════════════════════════ */

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.lightbox.active {
    opacity: 1;
    visibility: visible;
}

.lightbox__close {
    position: absolute;
    top: var(--space-6);
    right: var(--space-6);
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    color: var(--white);
    font-size: 2rem;
    cursor: pointer;
    transition: var(--transition-fast);
    z-index: 10;
}

.lightbox__close:hover {
    background: rgba(255, 255, 255, 0.2);
    color: var(--gold-400);
}

.lightbox__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: var(--white);
    font-size: 1.5rem;
    cursor: pointer;
    transition: var(--transition-fast);
    z-index: 10;
}

.lightbox__prev {
    left: var(--space-4);
    border-radius: 0 10px 10px 0;
}

.lightbox__next {
    right: var(--space-4);
    border-radius: 10px 0 0 10px;
}

.lightbox__nav:hover {
    background: var(--gold-400);
    color: var(--dark-900);
}

.lightbox__content {
    max-width: 90vw;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.lightbox__content img {
    max-width: 100%;
    max-height: 75vh;
    object-fit: contain;
    border-radius: var(--border-radius-lg);
    transition: opacity 0.3s ease;
}

.lightbox__info {
    text-align: center;
    margin-top: var(--space-4);
    padding: var(--space-4);
}

.lightbox__counter {
    font-size: 0.9rem;
    color: var(--white-50);
    margin-bottom: var(--space-2);
}

.lightbox__info h3 {
    font-family: var(--font-display);
    font-size: 1.3rem;
    color: var(--white);
    margin-bottom: var(--space-1);
}

.lightbox__info p {
    font-size: 0.9rem;
    color: var(--white-60);
}

/* ═══════════════════════════════════════════════════════════════
   36.6 VIDEO MODAL
   ═══════════════════════════════════════════════════════════════ */

.video-modal {
    position: fixed;
    inset: 0;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.video-modal.active {
    opacity: 1;
    visibility: visible;
}

.video-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.9);
}

.video-modal__content {
    position: relative;
    width: 90%;
    max-width: 1000px;
    aspect-ratio: 16/9;
    background: var(--dark-900);
    border-radius: var(--border-radius-xl);
    overflow: hidden;
}

.video-modal__close {
    position: absolute;
    top: -50px;
    right: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    color: var(--white);
    font-size: 1.2rem;
    cursor: pointer;
    transition: var(--transition-fast);
}

.video-modal__close:hover {
    background: rgba(255, 255, 255, 0.2);
    color: var(--gold-400);
}

.video-modal__player {
    width: 100%;
    height: 100%;
}

.video-modal__player iframe,
.video-modal__player video {
    width: 100%;
    height: 100%;
    border: none;
}

/* ═══════════════════════════════════════════════════════════════
   36.7 RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */

/* Tablette paysage - Masonry 3 colonnes */
@media (max-width: 1200px) {
    .gallery-grid {
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: 180px;
    }

    /* Adapter le pattern masonry pour 3 colonnes */
    .gallery-item:nth-child(8n+1) {
        grid-column: span 2;
        grid-row: span 2;
    }

    .gallery-item:nth-child(6n+1) {
        grid-column: span 2;
        grid-row: span 2;
    }

    .gallery-item:nth-child(6n+4) {
        grid-row: span 2;
    }
}

/* Tablette portrait */
@media (max-width: 968px) {
    .gallery-grid {
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: 160px;
        gap: var(--space-3);
    }

    /* Reset masonry pour grille plus simple */
    .gallery-item:nth-child(8n+1),
    .gallery-item:nth-child(8n+4),
    .gallery-item:nth-child(8n+7),
    .gallery-item:nth-child(6n+1),
    .gallery-item:nth-child(6n+4) {
        grid-column: span 1;
        grid-row: span 1;
    }

    /* Nouvelle logique masonry 3 cols */
    .gallery-item:nth-child(9n+1) {
        grid-column: span 2;
        grid-row: span 2;
    }

    .gallery-item:nth-child(9n+5) {
        grid-row: span 2;
    }

    .gallery-item__overlay {
        opacity: 1;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 60%);
    }

    .gallery-item__zoom {
        transform: scale(1);
        top: auto;
        bottom: var(--space-3);
        right: var(--space-3);
    }

    .gallery-filters {
        padding: var(--space-3) var(--space-4);
    }
}

/* Mobile paysage */
@media (max-width: 768px) {
    .gallery-section {
        padding: var(--space-8) 0 var(--space-12);
    }

    .gallery-filters {
        gap: var(--space-2);
        padding: var(--space-3);
        overflow-x: auto;
        justify-content: flex-start;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .gallery-filters::-webkit-scrollbar {
        display: none;
    }

    .gallery-filter {
        padding: var(--space-2) var(--space-4);
        font-size: 0.85rem;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 150px;
        gap: var(--space-3);
    }

    /* Reset toutes les règles masonry */
    .gallery-item:nth-child(9n+1),
    .gallery-item:nth-child(9n+5),
    .gallery-item:nth-child(8n+1),
    .gallery-item:nth-child(8n+4),
    .gallery-item:nth-child(8n+7),
    .gallery-item:nth-child(6n+1),
    .gallery-item:nth-child(6n+4) {
        grid-column: span 1;
        grid-row: span 1;
    }

    /* Masonry simple 2 cols - 1 grande image sur 4 */
    .gallery-item:nth-child(4n+1) {
        grid-column: span 2;
        grid-row: span 2;
    }

    .lightbox__close {
        top: var(--space-4);
        right: var(--space-4);
        width: 40px;
        height: 40px;
        font-size: 1.5rem;
    }

    .lightbox__nav {
        width: 40px;
        height: 60px;
    }

    .lightbox__prev {
        left: 0;
        border-radius: 0 8px 8px 0;
    }

    .lightbox__next {
        right: 0;
        border-radius: 8px 0 0 8px;
    }
}

/* Mobile portrait */
@media (max-width: 480px) {
    .gallery-section {
        padding: var(--space-6) 0 var(--space-10);
    }

    .gallery-intro {
        margin-bottom: var(--space-6);
    }

    .gallery-intro p {
        font-size: 1rem;
    }

    .gallery-filters {
        margin-bottom: var(--space-6);
    }

    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 120px;
        gap: var(--space-2);
    }

    /* Masonry plus subtil sur petit écran */
    .gallery-item:nth-child(4n+1) {
        grid-column: span 2;
        grid-row: span 2;
    }

    .gallery-item__overlay {
        padding: var(--space-2);
    }

    .gallery-item__overlay h3 {
        font-size: 0.85rem;
    }

    .gallery-item__overlay p {
        font-size: 0.7rem;
    }

    .gallery-item__zoom {
        width: 28px;
        height: 28px;
        bottom: var(--space-2);
        right: var(--space-2);
    }

    .gallery-item__zoom i {
        font-size: 0.75rem;
    }

    .gallery-item__play {
        width: 40px;
        height: 40px;
        font-size: 0.9rem;
    }

    .lightbox__info h3 {
        font-size: 1.1rem;
    }
}

/* ═══════════════════════════════════════════════════════════════
   36.8 LIGHT THEME
   ═══════════════════════════════════════════════════════════════ */

[data-theme="light"] .gallery-section {
    background: #f5f5f5;
}

[data-theme="light"] .gallery-intro p {
    color: var(--dark-600);
}

[data-theme="light"] .gallery-filter {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.1);
    color: var(--dark-700);
}

[data-theme="light"] .gallery-filter:hover {
    background: rgba(212, 175, 55, 0.1);
}

[data-theme="light"] .gallery-item {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .lightbox__counter {
    color: var(--white-60);
}

/* ═══════════════════════════════════════════════════════════════
   37. ARTISTS PAGES - Artistes Live & What The Funk
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   37.1 MUSICIANS GRID - Grille des musiciens
   ═══════════════════════════════════════════════════════════════ */

.musicians-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
}

@media (max-width: 968px) {
    .musicians-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .musicians-grid {
        grid-template-columns: 1fr;
    }
}

/* ═══════════════════════════════════════════════════════════════
   37.2 MUSICIAN CARD - Carte musicien avec vidéo
   ═══════════════════════════════════════════════════════════════ */

.musician-card__video {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: var(--border-radius-xl) var(--border-radius-xl) 0 0;
    overflow: hidden;
    background: var(--dark-700);
}

.musician-card__video .youtube-thumbnail-card,
.musician-card__video .drive-thumbnail-card {
    position: relative;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.musician-card__video .youtube-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.musician-card__video .youtube-thumbnail-card:hover .youtube-thumb-img {
    transform: scale(1.05);
}

/* Play Overlay */
.video-play-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);
    transition: background 0.3s ease;
}

.musician-card__video:hover .video-play-overlay,
.package-card__video:hover .video-play-overlay {
    background: rgba(0, 0, 0, 0.5);
}

/* Play Buttons */
.play-button {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 50%;
    color: var(--white);
    font-size: 1.3rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.play-button--youtube {
    width: 70px;
    height: 50px;
    background: #ff0000;
    border-radius: 12px;
    font-size: 1.8rem;
}

.musician-card__video:hover .play-button--youtube,
.package-card__video:hover .play-button--youtube {
    transform: scale(1.1);
    box-shadow: 0 0 30px rgba(255, 0, 0, 0.5);
}

.play-button--drive {
    background: linear-gradient(135deg, #4285f4, #34a853);
}

.musician-card__video:hover .play-button--drive {
    transform: scale(1.1);
    box-shadow: 0 0 30px rgba(66, 133, 244, 0.5);
}

/* Drive Placeholder */
.drive-thumb-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--dark-700) 0%, var(--dark-800) 100%);
}

.drive-thumb-placeholder i {
    font-size: 3rem;
    color: var(--gold-400);
    opacity: 0.5;
}

/* Instrument Badge */
.musician-card__instrument-badge {
    position: absolute;
    bottom: var(--space-3);
    left: var(--space-3);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: rgba(0, 0, 0, 0.8);
    border-radius: 20px;
    color: var(--gold-400);
    font-size: 0.8rem;
    font-weight: 500;
    backdrop-filter: blur(10px);
}

.musician-card__instrument-badge i {
    font-size: 0.9rem;
}

/* YouTube/Drive iframe containers */
.musician-card__youtube,
.musician-card__drive {
    position: relative;
    width: 100%;
    height: 100%;
}

.musician-card__youtube iframe,
.musician-card__drive iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* Placeholder for musicians without video */
.musician-card__placeholder {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, var(--dark-700) 0%, var(--dark-800) 100%);
    border-radius: var(--border-radius-xl) var(--border-radius-xl) 0 0;
}

.musician-card__placeholder > i {
    font-size: 3rem;
    color: var(--gold-400);
    opacity: 0.3;
    margin-bottom: var(--space-3);
}

/* ═══════════════════════════════════════════════════════════════
   37.3 PACKAGE CARD VIDEO - Vidéo dans les cartes artistes
   ═══════════════════════════════════════════════════════════════ */

.package-card__video {
    position: relative;
    width: 100%;
    border-radius: var(--border-radius-xl) var(--border-radius-xl) 0 0;
    overflow: hidden;
    aspect-ratio: 16/9;
}

.package-card__video .youtube-thumbnail-card {
    position: relative;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.package-card__video .youtube-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.package-card__video .youtube-thumbnail-card:hover .youtube-thumb-img {
    transform: scale(1.05);
}

.package-card__youtube {
    position: relative;
    width: 100%;
    height: 100%;
}

.package-card__youtube iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* Full width card adjustment */
.package-card--full-width {
    grid-column: span 2;
}

.package-card--full-width .package-card__header {
    text-align: center;
}

.package-card--full-width .package-card__icon {
    margin: 0 auto var(--space-4);
}

@media (max-width: 768px) {
    .package-card--full-width {
        grid-column: auto;
    }
}

/* ═══════════════════════════════════════════════════════════════
   37.4 WTF FORMULAS GRID - Grille des formules What The Funk
   ═══════════════════════════════════════════════════════════════ */

.wtf-formulas-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5);
    padding: var(--space-5);
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--border-radius-lg);
    margin: 0 var(--space-5) var(--space-4);
}

@media (max-width: 768px) {
    .wtf-formulas-grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
        margin: 0 var(--space-4) var(--space-4);
        padding: var(--space-4);
    }
}

/* ═══════════════════════════════════════════════════════════════
   37.5 WTF FORMULA CARD
   ═══════════════════════════════════════════════════════════════ */

.wtf-formula-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: var(--border-radius-xl);
    padding: var(--space-5);
    position: relative;
    transition: var(--transition-base);
}

.wtf-formula-card:hover {
    border-color: rgba(212, 175, 55, 0.4);
    background: rgba(255, 255, 255, 0.05);
    transform: translateY(-4px);
}

.wtf-formula-card--promo {
    background: linear-gradient(145deg, rgba(212, 175, 55, 0.1) 0%, rgba(212, 175, 55, 0.05) 100%);
    border: 2px solid rgba(212, 175, 55, 0.5);
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.15);
}

.wtf-formula-badge {
    position: absolute;
    top: -10px;
    right: var(--space-4);
    background: linear-gradient(135deg, #28a745, #20c997);
    color: var(--white);
    font-size: 0.75rem;
    font-weight: 700;
    padding: var(--space-2) var(--space-3);
    border-radius: 20px;
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
    animation: pulse-badge 2s ease-in-out infinite;
}

@keyframes pulse-badge {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.wtf-formula-name {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--white);
    margin: 0 0 var(--space-1);
}

.wtf-formula-subtitle {
    font-size: 0.85rem;
    color: var(--white-60);
    display: block;
    margin-bottom: var(--space-4);
}

.wtf-formula-price {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.wtf-formula-old-price {
    font-size: 1rem;
    color: var(--white-50);
    text-decoration: line-through;
}

.wtf-formula-amount {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--gold-400);
}

.wtf-formula-vat {
    font-size: 0.8rem;
    color: var(--white-50);
}

.wtf-formula-features {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-5);
}

.wtf-formula-features li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    font-size: 0.9rem;
    color: var(--white-80);
    margin-bottom: var(--space-2);
    line-height: 1.4;
}

.wtf-formula-features li i {
    color: var(--gold-400);
    font-size: 0.85rem;
    margin-top: 3px;
    flex-shrink: 0;
}

.wtf-formula-features li i.fa-gift {
    color: #28a745;
}

.wtf-formula-card--promo .wtf-formula-features li i.fa-gift + strong,
.wtf-formula-card--promo .wtf-formula-features li strong {
    color: #28a745;
}

/* ═══════════════════════════════════════════════════════════════
   37.6 WTF PAGE - Styles spécifiques What The Funk
   ═══════════════════════════════════════════════════════════════ */

.wtf-hero {
    position: relative;
    min-height: 80vh;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, var(--dark-950) 0%, var(--dark-900) 100%);
    overflow: hidden;
}

.wtf-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('/images/gallery_05.jpg') center/cover;
    opacity: 0.15;
}

.wtf-section {
    padding: var(--space-16) 0;
    background: var(--dark-950);
}

.wtf-section--alt {
    background: var(--dark-900);
}

.wtf-video-showcase {
    position: relative;
    border-radius: var(--border-radius-xl);
    overflow: hidden;
    aspect-ratio: 16/9;
    max-width: 900px;
    margin: 0 auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.wtf-members-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-4);
}

@media (max-width: 968px) {
    .wtf-members-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 600px) {
    .wtf-members-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.wtf-member {
    text-align: center;
}

.wtf-member__photo {
    width: 100px;
    height: 100px;
    margin: 0 auto var(--space-3);
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid rgba(212, 175, 55, 0.3);
    transition: var(--transition-fast);
}

.wtf-member:hover .wtf-member__photo {
    border-color: var(--gold-400);
    transform: scale(1.05);
}

.wtf-member__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wtf-member__name {
    font-weight: 600;
    color: var(--white);
    font-size: 0.9rem;
    margin-bottom: var(--space-1);
}

.wtf-member__role {
    font-size: 0.8rem;
    color: var(--gold-400);
}

/* ═══════════════════════════════════════════════════════════════
   37.7 FORMATIONS SECTION
   ═══════════════════════════════════════════════════════════════ */

.formations-section {
    padding: var(--space-16) 0;
    background: var(--dark-900);
}

.formations-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
}

@media (max-width: 768px) {
    .formations-grid {
        grid-template-columns: 1fr;
    }
}

/* ═══════════════════════════════════════════════════════════════
   37.8 FAQ SECTION
   ═══════════════════════════════════════════════════════════════ */

.faq-section,
.service-faq {
    padding: var(--space-16) 0;
    background: #0f0f13;
}

.faq-grid {
    display: grid;
    gap: var(--space-4);
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    background: var(--dark-800);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
}

.faq-item__question {
    width: 100%;
    padding: var(--space-5);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: none;
    border: none;
    color: var(--white);
    font-size: 1rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: var(--transition-fast);
}

.faq-item__question:hover {
    background: rgba(212, 175, 55, 0.05);
}

.faq-item__question i {
    color: var(--gold-400);
    transition: transform 0.3s ease;
}

.faq-item.open .faq-item__question i {
    transform: rotate(180deg);
}

.faq-item__answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.faq-item.open .faq-item__answer {
    max-height: 500px;
}

.faq-item__answer p {
    padding: 0 var(--space-5) var(--space-5);
    color: var(--white-70);
    line-height: 1.7;
}

/* ═══════════════════════════════════════════════════════════════
   37.9 RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .musician-card__video,
    .package-card__video {
        aspect-ratio: 16/10;
    }

    .play-button--youtube {
        width: 60px;
        height: 42px;
        font-size: 1.5rem;
    }

    .wtf-formula-card {
        padding: var(--space-4);
    }

    .wtf-formula-name {
        font-size: 1.1rem;
    }

    .wtf-formula-amount {
        font-size: 1.5rem;
    }
}

/* ═══════════════════════════════════════════════════════════════
   37.10 LIGHT THEME
   ═══════════════════════════════════════════════════════════════ */

[data-theme="light"] .wtf-formula-card {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(212, 175, 55, 0.3);
}

[data-theme="light"] .wtf-formula-card--promo {
    background: linear-gradient(145deg, rgba(212, 175, 55, 0.1) 0%, rgba(212, 175, 55, 0.05) 100%);
}

[data-theme="light"] .wtf-formula-name {
    color: var(--dark-900);
}

[data-theme="light"] .wtf-formula-features li {
    color: var(--dark-700);
}

[data-theme="light"] .wtf-formulas-grid {
    background: rgba(0, 0, 0, 0.03);
}

[data-theme="light"] .musician-card__instrument-badge {
    background: rgba(255, 255, 255, 0.95);
    color: var(--gold-500);
}

[data-theme="light"] .faq-item {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .faq-item__question {
    color: var(--dark-900);
}

[data-theme="light"] .faq-item__answer p {
    color: var(--dark-600);
}

[data-theme="light"] .wtf-member__name {
    color: var(--dark-900);
}

/* ═══════════════════════════════════════════════════════════════
   38. WHAT THE FUNK PAGE
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   38.1 GENRES & INTRO BADGES
   ═══════════════════════════════════════════════════════════════ */

.wtf-genres {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3);
    margin: var(--space-6) 0;
}

.wtf-genre {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: rgba(212, 175, 55, 0.1);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 25px;
    color: var(--gold-400);
    font-size: 0.9rem;
    font-weight: 500;
    transition: var(--transition-fast);
}

.wtf-genre:hover {
    background: rgba(212, 175, 55, 0.2);
    border-color: var(--gold-400);
    transform: translateY(-2px);
}

.wtf-genre i {
    font-size: 0.85rem;
}

.wtf-autonomy-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    background: rgba(76, 175, 80, 0.1);
    border: 1px solid rgba(76, 175, 80, 0.3);
    border-radius: var(--border-radius-lg);
    color: #4caf50;
    font-size: 0.95rem;
    font-weight: 500;
    margin: var(--space-4) 0 var(--space-8);
}

.wtf-autonomy-badge i {
    font-size: 1.1rem;
}

/* ═══════════════════════════════════════════════════════════════
   38.2 FORMULES (PRICING CARDS)
   ═══════════════════════════════════════════════════════════════ */

.wtf-formules {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
    margin: var(--space-8) 0;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 768px) {
    .wtf-formules {
        grid-template-columns: 1fr;
        gap: var(--space-5);
    }
}

.wtf-formule {
    position: relative;
    background: var(--dark-800);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--border-radius-xl);
    padding: var(--space-6);
    text-align: center;
    transition: var(--transition-fast);
}

.wtf-formule:hover {
    border-color: rgba(212, 175, 55, 0.3);
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.wtf-formule--premium {
    background: linear-gradient(145deg, var(--dark-800) 0%, rgba(212, 175, 55, 0.1) 100%);
    border-color: rgba(212, 175, 55, 0.4);
}

.wtf-formule--premium:hover {
    border-color: var(--gold-400);
}

.wtf-formule__badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    padding: var(--space-1) var(--space-4);
    background: var(--gold-400);
    color: var(--dark-900);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 20px;
}

.wtf-formule__header {
    margin-bottom: var(--space-4);
}

.wtf-formule__title {
    font-family: var(--font-display);
    font-size: 1.3rem;
    color: var(--white);
    margin-bottom: var(--space-1);
}

.wtf-formule__subtitle {
    font-size: 0.85rem;
    color: var(--white-60);
}

.wtf-formule__price {
    margin-bottom: var(--space-4);
}

.wtf-formule__amount {
    display: block;
    font-family: var(--font-display);
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--gold-400);
    line-height: 1.2;
}

.wtf-formule__vat {
    font-size: 0.8rem;
    color: var(--white-50);
    text-transform: uppercase;
}

.wtf-formule__price--promo .wtf-formule__old-price {
    display: block;
    font-size: 1rem;
    color: var(--white-40);
    text-decoration: line-through;
    margin-bottom: var(--space-1);
}

.wtf-formule__promo-note {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: rgba(212, 175, 55, 0.15);
    border-radius: var(--border-radius);
    color: var(--gold-400);
    font-size: 0.8rem;
    margin-bottom: var(--space-4);
}

.wtf-formule__features {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-5);
    text-align: left;
}

.wtf-formule__features li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-2) 0;
    font-size: 0.9rem;
    color: var(--white-80);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.wtf-formule__features li:last-child {
    border-bottom: none;
}

.wtf-formule__features li i {
    color: var(--gold-400);
    margin-top: 3px;
    flex-shrink: 0;
}

.wtf-formule__features li i.fa-gift {
    color: #4caf50;
}

.wtf-formule__features li strong {
    color: #4caf50;
}

.wtf-formule__btn {
    width: 100%;
}

/* ═══════════════════════════════════════════════════════════════
   38.3 SOCIALS
   ═══════════════════════════════════════════════════════════════ */

.wtf-socials {
    display: flex;
    justify-content: center;
    gap: var(--space-3);
    margin-top: var(--space-6);
}

.wtf-social {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    color: var(--white-70);
    font-size: 1.2rem;
    transition: var(--transition-fast);
}

.wtf-social:hover {
    background: var(--gold-400);
    border-color: var(--gold-400);
    color: var(--dark-900);
    transform: translateY(-3px) scale(1.1);
}

/* ═══════════════════════════════════════════════════════════════
   38.4 FORMATION SECTION
   ═══════════════════════════════════════════════════════════════ */

.wtf-formation {
    padding: var(--space-16) 0;
    background: var(--dark-900);
}

.wtf-formation__grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--space-4);
    margin-bottom: var(--space-8);
}

@media (max-width: 968px) {
    .wtf-formation__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 480px) {
    .wtf-formation__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.wtf-formation .wtf-member {
    text-align: center;
    padding: var(--space-4);
    background: var(--dark-800);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--border-radius-lg);
    transition: var(--transition-fast);
}

.wtf-formation .wtf-member:hover {
    border-color: rgba(212, 175, 55, 0.3);
    transform: translateY(-3px);
}

.wtf-formation .wtf-member__icon {
    width: 50px;
    height: 50px;
    margin: 0 auto var(--space-3);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(212, 175, 55, 0.1);
    border-radius: 50%;
    color: var(--gold-400);
    font-size: 1.2rem;
}

.wtf-formation .wtf-member__count {
    display: block;
    font-family: var(--font-display);
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--white);
    margin-bottom: var(--space-1);
}

.wtf-formation .wtf-member__role {
    font-size: 0.85rem;
    color: var(--white-60);
}

.wtf-formation__total {
    text-align: center;
    padding: var(--space-6);
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.1) 0%, rgba(212, 175, 55, 0.05) 100%);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: var(--border-radius-xl);
}

.wtf-formation__number {
    display: block;
    font-family: var(--font-display);
    font-size: 4rem;
    font-weight: 700;
    color: var(--gold-400);
    line-height: 1;
}

.wtf-formation__label {
    font-size: 1.1rem;
    color: var(--white-70);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* ═══════════════════════════════════════════════════════════════
   38.5 REPERTOIRE SECTION
   ═══════════════════════════════════════════════════════════════ */

.wtf-repertoire {
    padding: var(--space-16) 0;
    background: var(--dark-850);
}

.wtf-repertoire__grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}

.wtf-artist {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    background: var(--dark-800);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--border-radius-lg);
    color: var(--white);
    font-size: 0.95rem;
    transition: var(--transition-fast);
}

.wtf-artist:hover {
    border-color: rgba(212, 175, 55, 0.5);
    background: rgba(212, 175, 55, 0.1);
}

.wtf-artist i {
    color: var(--gold-400);
    font-size: 0.8rem;
}

.wtf-repertoire__note {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    color: var(--white-60);
    font-size: 0.9rem;
    font-style: italic;
    margin-bottom: var(--space-10);
}

.wtf-repertoire__note i {
    color: var(--gold-400);
}

/* Setlist SEO Section */
.wtf-setlist-seo {
    background: var(--dark-800);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--border-radius-xl);
    padding: var(--space-8);
}

.wtf-setlist-seo__title {
    font-family: var(--font-display);
    font-size: 1.3rem;
    color: var(--white);
    text-align: center;
    margin-bottom: var(--space-6);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
}

.wtf-setlist-seo__title i {
    color: var(--gold-400);
}

.wtf-setlist-seo__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
}

@media (max-width: 968px) {
    .wtf-setlist-seo__grid {
        grid-template-columns: 1fr;
        gap: var(--space-5);
    }
}

.wtf-setlist-seo__category h4 {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 1rem;
    color: var(--gold-400);
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid rgba(212, 175, 55, 0.2);
}

.wtf-setlist-seo__category ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.wtf-setlist-seo__category li {
    padding: var(--space-2) 0;
    color: var(--white-80);
    font-size: 0.9rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.wtf-setlist-seo__category li:last-child {
    border-bottom: none;
}

.wtf-setlist-seo__category li span {
    color: var(--white-50);
    font-size: 0.8rem;
}

/* ═══════════════════════════════════════════════════════════════
   38.6 VIDEO SECTION
   ═══════════════════════════════════════════════════════════════ */

.wtf-video {
    padding: var(--space-16) 0;
    background: var(--dark-900);
}

.wtf-video__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
}

@media (max-width: 968px) {
    .wtf-video__grid {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }
}

.wtf-video__item {
    background: var(--dark-800);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--border-radius-xl);
    overflow: hidden;
    transition: var(--transition-fast);
}

.wtf-video__item:hover {
    border-color: rgba(212, 175, 55, 0.3);
    transform: translateY(-5px);
}

.wtf-video__label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-4);
    font-family: var(--font-display);
    font-size: 1rem;
    color: var(--white);
    background: rgba(212, 175, 55, 0.1);
    border-bottom: 1px solid rgba(212, 175, 55, 0.2);
}

.wtf-video__label i {
    color: var(--gold-400);
}

.wtf-video__container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}

.wtf-video__container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.wtf-video__setlist {
    padding: var(--space-4);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.wtf-video__song {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--border-radius);
    font-size: 0.75rem;
    color: var(--white-70);
}

.wtf-video__song i {
    color: var(--gold-400);
    font-size: 0.65rem;
}

/* ═══════════════════════════════════════════════════════════════
   38.7 PRESTATIONS CARDS
   ═══════════════════════════════════════════════════════════════ */

.wtf-prestations {
    padding: var(--space-16) 0;
    background: var(--dark-950);
}

.wtf-prestations__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
    margin-bottom: var(--space-8);
}

@media (max-width: 968px) {
    .wtf-prestations__grid {
        grid-template-columns: 1fr;
        gap: var(--space-5);
    }
}

.wtf-presta-card {
    position: relative;
    background: var(--dark-800);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--border-radius-xl);
    padding: var(--space-6);
    overflow: hidden;
    transition: var(--transition-fast);
}

.wtf-presta-card:hover {
    border-color: rgba(212, 175, 55, 0.4);
    transform: translateY(-5px);
}

.wtf-presta-card__glow {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100px;
    background: linear-gradient(180deg, rgba(212, 175, 55, 0.1) 0%, transparent 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.wtf-presta-card:hover .wtf-presta-card__glow {
    opacity: 1;
}

.wtf-presta-card--featured {
    border-color: rgba(212, 175, 55, 0.4);
    background: linear-gradient(145deg, var(--dark-800) 0%, rgba(212, 175, 55, 0.08) 100%);
}

.wtf-presta-card__ribbon {
    position: absolute;
    top: 15px;
    right: -35px;
    padding: var(--space-1) var(--space-8);
    background: var(--gold-400);
    color: var(--dark-900);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    transform: rotate(45deg);
}

.wtf-presta-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-4);
}

.wtf-presta-card__icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(212, 175, 55, 0.15);
    border-radius: 12px;
    color: var(--gold-400);
    font-size: 1.3rem;
}

.wtf-presta-card--festivals .wtf-presta-card__icon {
    background: rgba(255, 87, 34, 0.15);
    color: #ff5722;
}

.wtf-presta-card--wedding .wtf-presta-card__icon {
    background: rgba(233, 30, 99, 0.15);
    color: #e91e63;
}

.wtf-presta-card--corporate .wtf-presta-card__icon {
    background: rgba(156, 39, 176, 0.15);
    color: #9c27b0;
}

.wtf-presta-card__badge {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--white-50);
    padding: var(--space-1) var(--space-2);
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--border-radius);
}

.wtf-presta-card__title {
    font-family: var(--font-display);
    font-size: 1.3rem;
    color: var(--white);
    margin-bottom: var(--space-2);
}

.wtf-presta-card__tagline {
    font-size: 0.9rem;
    color: var(--white-60);
    font-style: italic;
    margin-bottom: var(--space-5);
}

.wtf-presta-card__features {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-5);
}

.wtf-presta-card__features li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-2) 0;
    font-size: 0.9rem;
    color: var(--white-80);
}

.wtf-presta-card__features li i {
    color: var(--gold-400);
    margin-top: 3px;
    flex-shrink: 0;
}

.wtf-presta-card__stats {
    display: flex;
    gap: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.wtf-presta-card__stat {
    flex: 1;
    text-align: center;
}

.wtf-presta-card__stat-value {
    display: block;
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--gold-400);
}

.wtf-presta-card__stat-label {
    font-size: 0.75rem;
    color: var(--white-50);
    text-transform: uppercase;
}

.wtf-prestations__cta {
    text-align: center;
    padding: var(--space-6);
    background: rgba(255, 255, 255, 0.02);
    border-radius: var(--border-radius-xl);
}

.wtf-prestations__cta p {
    color: var(--white-60);
    margin-bottom: var(--space-4);
}

/* ═══════════════════════════════════════════════════════════════
   38.8 TECH SPECS SECTION
   ═══════════════════════════════════════════════════════════════ */

.wtf-tech {
    padding: var(--space-16) 0;
    background: var(--dark-900);
}

.wtf-tech__specs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
    margin-bottom: var(--space-10);
}

@media (max-width: 768px) {
    .wtf-tech__specs {
        grid-template-columns: repeat(2, 1fr);
    }
}

.wtf-spec {
    text-align: center;
    padding: var(--space-5);
    background: var(--dark-800);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--border-radius-lg);
    transition: var(--transition-fast);
}

.wtf-spec:hover {
    border-color: rgba(212, 175, 55, 0.3);
}

.wtf-spec__icon {
    width: 50px;
    height: 50px;
    margin: 0 auto var(--space-3);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(212, 175, 55, 0.1);
    border-radius: 50%;
    color: var(--gold-400);
    font-size: 1.2rem;
}

.wtf-spec__value {
    display: block;
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--white);
    margin-bottom: var(--space-1);
}

.wtf-spec__label {
    font-size: 0.8rem;
    color: var(--white-60);
}

.wtf-tech__content {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
    margin-bottom: var(--space-8);
}

@media (max-width: 968px) {
    .wtf-tech__content {
        grid-template-columns: 1fr;
    }
}

.wtf-tech__card {
    background: var(--dark-800);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--border-radius-xl);
    padding: var(--space-6);
}

.wtf-tech__card h3 {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 1.1rem;
    color: var(--white);
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid rgba(212, 175, 55, 0.2);
}

.wtf-tech__card h3 i {
    color: var(--gold-400);
}

.wtf-tech__card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.wtf-tech__card ul li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-2) 0;
    font-size: 0.9rem;
    color: var(--white-80);
}

.wtf-tech__card ul li i {
    color: var(--gold-400);
    margin-top: 3px;
    flex-shrink: 0;
}

.wtf-tech__band-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2);
}

.wtf-tech__musician {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2);
    background: rgba(255, 255, 255, 0.02);
    border-radius: var(--border-radius);
    font-size: 0.85rem;
    color: var(--white-80);
}

.wtf-tech__musician--sound {
    grid-column: 1 / -1;
    background: rgba(212, 175, 55, 0.1);
    border: 1px solid rgba(212, 175, 55, 0.2);
}

.wtf-tech__instrument {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--gold-400);
    background: rgba(212, 175, 55, 0.15);
    padding: 2px 6px;
    border-radius: 4px;
}

/* Tech Contact */
.wtf-tech__contact {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.1) 0%, rgba(212, 175, 55, 0.05) 100%);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: var(--border-radius-xl);
    padding: var(--space-6);
    margin-bottom: var(--space-6);
}

.wtf-tech__contact h3 {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 1.1rem;
    color: var(--white);
    margin-bottom: var(--space-4);
}

.wtf-tech__contact h3 i {
    color: var(--gold-400);
}

.wtf-tech__contact-info {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-6);
}

@media (max-width: 768px) {
    .wtf-tech__contact-info {
        flex-direction: column;
        gap: var(--space-3);
    }
}

.wtf-tech__contact-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.wtf-tech__contact-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--white-50);
    letter-spacing: 0.05em;
}

.wtf-tech__contact-value {
    font-size: 1rem;
    color: var(--white);
    font-weight: 500;
}

.wtf-tech__contact-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--gold-400);
    transition: var(--transition-fast);
}

.wtf-tech__contact-link:hover {
    color: var(--gold-300);
}

.wtf-tech__contact-link i {
    font-size: 0.9rem;
}

.wtf-tech__download {
    text-align: center;
}

/* ═══════════════════════════════════════════════════════════════
   38.9 ZONES SECTION
   ═══════════════════════════════════════════════════════════════ */

.wtf-zones {
    padding: var(--space-12) 0;
    background: var(--dark-850);
}

.wtf-zones__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3);
}

.wtf-zone {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: var(--dark-800);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 25px;
    color: var(--white-80);
    font-size: 0.9rem;
    transition: var(--transition-fast);
}

.wtf-zone:hover {
    border-color: rgba(212, 175, 55, 0.5);
    background: rgba(212, 175, 55, 0.1);
    color: var(--gold-400);
}

.wtf-zone i {
    color: var(--gold-400);
    font-size: 0.8rem;
}

/* ═══════════════════════════════════════════════════════════════
   38.10 CTA FORMULES
   ═══════════════════════════════════════════════════════════════ */

.wtf-cta-formules {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5);
    max-width: 700px;
    margin: var(--space-8) auto;
}

@media (max-width: 600px) {
    .wtf-cta-formules {
        grid-template-columns: 1fr;
    }
}

.wtf-cta-formule {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-5);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--border-radius-xl);
    transition: var(--transition-fast);
}

.wtf-cta-formule:hover {
    border-color: rgba(212, 175, 55, 0.3);
}

.wtf-cta-formule--premium {
    background: linear-gradient(145deg, rgba(212, 175, 55, 0.1) 0%, rgba(212, 175, 55, 0.05) 100%);
    border-color: rgba(212, 175, 55, 0.3);
}

.wtf-cta-formule__badge {
    position: absolute;
    top: -10px;
    right: var(--space-4);
    padding: var(--space-1) var(--space-3);
    background: var(--gold-400);
    color: var(--dark-900);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 15px;
}

.wtf-cta-formule__name {
    font-family: var(--font-display);
    font-size: 1rem;
    color: var(--white);
}

.wtf-cta-formule__price {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gold-400);
}

.wtf-cta-formule__price del {
    font-size: 1rem;
    color: var(--white-40);
    margin-right: var(--space-2);
}

.wtf-cta-formule__price small {
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--white-50);
}

/* ═══════════════════════════════════════════════════════════════
   38.11 RESPONSIVE WTF
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .wtf-genres {
        gap: var(--space-2);
    }

    .wtf-genre {
        padding: var(--space-1) var(--space-3);
        font-size: 0.8rem;
    }

    .wtf-formule__amount {
        font-size: 2rem;
    }

    .wtf-formation__number {
        font-size: 3rem;
    }

    .wtf-presta-card {
        padding: var(--space-5);
    }

    .wtf-presta-card__title {
        font-size: 1.1rem;
    }
}

@media (max-width: 480px) {
    .wtf-formule {
        padding: var(--space-4);
    }

    .wtf-formule__amount {
        font-size: 1.8rem;
    }

    .wtf-setlist-seo {
        padding: var(--space-5);
    }

    .wtf-video__setlist {
        display: none;
    }
}

/* ═══════════════════════════════════════════════════════════════
   38.12 LIGHT THEME WTF
   ═══════════════════════════════════════════════════════════════ */

[data-theme="light"] .wtf-genres {
    background: transparent;
}

[data-theme="light"] .wtf-genre {
    background: rgba(212, 175, 55, 0.08);
}

[data-theme="light"] .wtf-autonomy-badge {
    background: rgba(76, 175, 80, 0.08);
}

[data-theme="light"] .wtf-formule {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .wtf-formule--premium {
    background: linear-gradient(145deg, #ffffff 0%, rgba(212, 175, 55, 0.08) 100%);
}

[data-theme="light"] .wtf-formule__title {
    color: var(--dark-900);
}

[data-theme="light"] .wtf-formule__features li {
    color: var(--dark-700);
    border-color: rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .wtf-formation {
    background: #f5f5f5;
}

[data-theme="light"] .wtf-formation .wtf-member {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .wtf-formation .wtf-member__count {
    color: var(--dark-900);
}

[data-theme="light"] .wtf-repertoire {
    background: #ebebeb;
}

[data-theme="light"] .wtf-artist {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.08);
    color: var(--dark-900);
}

[data-theme="light"] .wtf-setlist-seo {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .wtf-setlist-seo__title {
    color: var(--dark-900);
}

[data-theme="light"] .wtf-setlist-seo__category li {
    color: var(--dark-700);
}

[data-theme="light"] .wtf-video {
    background: #f5f5f5;
}

[data-theme="light"] .wtf-video__item {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .wtf-video__label {
    color: var(--dark-900);
}

[data-theme="light"] .wtf-prestations {
    background: #ebebeb;
}

[data-theme="light"] .wtf-presta-card {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .wtf-presta-card__title {
    color: var(--dark-900);
}

[data-theme="light"] .wtf-presta-card__features li {
    color: var(--dark-700);
}

[data-theme="light"] .wtf-tech {
    background: #f5f5f5;
}

[data-theme="light"] .wtf-spec {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .wtf-spec__value {
    color: var(--dark-900);
}

[data-theme="light"] .wtf-tech__card {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .wtf-tech__card h3 {
    color: var(--dark-900);
}

[data-theme="light"] .wtf-tech__musician {
    background: rgba(0, 0, 0, 0.02);
    color: var(--dark-700);
}

[data-theme="light"] .wtf-tech__contact {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.08) 0%, rgba(212, 175, 55, 0.04) 100%);
}

[data-theme="light"] .wtf-zones {
    background: #ebebeb;
}

[data-theme="light"] .wtf-zone {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.08);
    color: var(--dark-700);
}

[data-theme="light"] .wtf-cta-formule {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .wtf-cta-formule__name {
    color: var(--dark-900);
}

/* ═══════════════════════════════════════════════════════════════
   38.13 WHAT THE FUNK - AMÉLIORATIONS VISUELLES AVANCÉES
   ═══════════════════════════════════════════════════════════════ */

/* -------------------------
   Animations d'entrée
   ------------------------- */
@keyframes wtf-pulse-glow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(212, 175, 55, 0.2);
    }
    50% {
        box-shadow: 0 0 40px rgba(212, 175, 55, 0.4), 0 0 60px rgba(212, 175, 55, 0.2);
    }
}

@keyframes wtf-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

@keyframes wtf-shimmer {
    0% { background-position: -200% center; }
    100% { background-position: 200% center; }
}

@keyframes wtf-vinyl-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* -------------------------
   Genre Tags Enhanced
   ------------------------- */
.wtf-genre {
    position: relative;
    overflow: hidden;
    cursor: default;
}

.wtf-genre::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.5s ease;
}

.wtf-genre:hover::before {
    left: 100%;
}

.wtf-genre:hover {
    box-shadow: 0 5px 20px rgba(212, 175, 55, 0.3);
}

/* -------------------------
   Formules Cards - Premium
   ------------------------- */
.wtf-formule {
    position: relative;
    overflow: hidden;
    transform-style: preserve-3d;
    perspective: 1000px;
}

.wtf-formule::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.03) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

.wtf-formule:hover::before {
    opacity: 1;
}

.wtf-formule:hover {
    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.4),
        0 0 30px rgba(212, 175, 55, 0.15);
}

/* Premium formule glow effect */
.wtf-formule--premium {
    animation: wtf-pulse-glow 3s ease-in-out infinite;
}

.wtf-formule--premium::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--gold-400), var(--gold-300), var(--gold-400));
    background-size: 200% auto;
    animation: wtf-shimmer 3s linear infinite;
}

/* Badge animation */
.wtf-formule__badge {
    animation: wtf-float 3s ease-in-out infinite;
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.4);
}

/* Price styling enhanced */
.wtf-formule__amount {
    position: relative;
    display: inline-block;
    background: linear-gradient(135deg, var(--gold-300) 0%, var(--gold-400) 50%, var(--gold-500) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.wtf-formule__old-price {
    position: relative;
}

.wtf-formule__old-price::after {
    content: '';
    position: absolute;
    top: 50%;
    left: -5%;
    width: 110%;
    height: 2px;
    background: #ef4444;
    transform: rotate(-8deg);
}

/* Features icons animation */
.wtf-formule__features li i {
    transition: transform 0.3s ease, color 0.3s ease;
}

.wtf-formule__features li:hover i {
    transform: scale(1.2);
}

.wtf-formule__features li i.fa-gift {
    animation: wtf-float 2s ease-in-out infinite;
}

/* Promo note enhanced */
.wtf-formule__promo-note {
    position: relative;
    overflow: hidden;
}

.wtf-formule__promo-note::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    animation: wtf-shimmer 2s ease-in-out infinite;
}

/* -------------------------
   Formation Section Enhanced
   ------------------------- */
.wtf-formation .wtf-member {
    position: relative;
    overflow: hidden;
}

.wtf-formation .wtf-member::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, transparent, var(--gold-400), transparent);
    transform: scaleX(0);
    transition: transform 0.4s ease;
}

.wtf-formation .wtf-member:hover::before {
    transform: scaleX(1);
}

.wtf-formation .wtf-member:hover {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.wtf-formation .wtf-member__icon {
    transition: all 0.3s ease;
}

.wtf-formation .wtf-member:hover .wtf-member__icon {
    transform: scale(1.1);
    background: rgba(212, 175, 55, 0.2);
}

.wtf-formation .wtf-member__count {
    transition: color 0.3s ease;
}

.wtf-formation .wtf-member:hover .wtf-member__count {
    color: var(--gold-400);
}

/* Total block animation */
.wtf-formation__total {
    position: relative;
    overflow: hidden;
}

.wtf-formation__total::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(from 0deg, transparent, rgba(212, 175, 55, 0.1), transparent);
    animation: wtf-vinyl-spin 10s linear infinite;
    opacity: 0.5;
}

.wtf-formation__number {
    position: relative;
    z-index: 1;
    text-shadow: 0 0 30px rgba(212, 175, 55, 0.5);
}

/* -------------------------
   Repertoire Section
   ------------------------- */
.wtf-artist {
    cursor: default;
    position: relative;
    overflow: hidden;
}

.wtf-artist::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.1), transparent);
    transform: translateX(-100%);
    transition: transform 0.5s ease;
}

.wtf-artist:hover::before {
    transform: translateX(100%);
}

.wtf-artist:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.wtf-artist i {
    transition: transform 0.3s ease;
}

.wtf-artist:hover i {
    transform: rotate(72deg) scale(1.2);
}

/* Setlist SEO Enhanced */
.wtf-setlist-seo {
    position: relative;
    overflow: hidden;
}

.wtf-setlist-seo::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold-400), transparent);
}

.wtf-setlist-seo__category h4 {
    transition: transform 0.3s ease;
}

.wtf-setlist-seo__category:hover h4 {
    transform: translateX(5px);
}

.wtf-setlist-seo__category li {
    transition: all 0.3s ease;
}

.wtf-setlist-seo__category li:hover {
    padding-left: var(--space-3);
    color: var(--white);
    background: rgba(212, 175, 55, 0.05);
    border-radius: var(--border-radius);
}

/* -------------------------
   Video Section Enhanced
   ------------------------- */
.wtf-video__item {
    position: relative;
}

.wtf-video__item::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(135deg, var(--gold-400), transparent, var(--gold-400));
    border-radius: calc(var(--border-radius-xl) + 2px);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: -1;
}

.wtf-video__item:hover::before {
    opacity: 1;
}

.wtf-video__item:hover {
    box-shadow:
        0 25px 60px rgba(0, 0, 0, 0.5),
        0 0 40px rgba(212, 175, 55, 0.2);
}

.wtf-video__label {
    transition: all 0.3s ease;
}

.wtf-video__item:hover .wtf-video__label {
    background: rgba(212, 175, 55, 0.2);
}

.wtf-video__label i {
    transition: transform 0.3s ease;
}

.wtf-video__item:hover .wtf-video__label i {
    transform: scale(1.2);
}

/* Video container play overlay */
.wtf-video__container {
    position: relative;
}

.wtf-video__container::after {
    content: '\f04b';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.7);
    border: 3px solid var(--gold-400);
    border-radius: 50%;
    color: var(--gold-400);
    font-size: 1.5rem;
    opacity: 0;
    transition: all 0.3s ease;
    pointer-events: none;
    z-index: 10;
}

.wtf-video__item:hover .wtf-video__container::after {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.1);
}

/* Song tags enhanced */
.wtf-video__song {
    transition: all 0.2s ease;
}

.wtf-video__song:hover {
    background: rgba(212, 175, 55, 0.15);
    color: var(--gold-400);
    transform: translateY(-2px);
}

/* -------------------------
   Prestations Cards Enhanced
   ------------------------- */
.wtf-presta-card {
    position: relative;
}

.wtf-presta-card::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--gold-400), var(--gold-500));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}

.wtf-presta-card:hover::before {
    transform: scaleX(1);
}

/* Card type specific colors */
.wtf-presta-card--festivals::before {
    background: linear-gradient(90deg, #ff5722, #ff9800);
}

.wtf-presta-card--wedding::before {
    background: linear-gradient(90deg, #e91e63, #f48fb1);
}

.wtf-presta-card--corporate::before {
    background: linear-gradient(90deg, #9c27b0, #ce93d8);
}

/* Icon enhancement */
.wtf-presta-card__icon {
    transition: all 0.4s ease;
}

.wtf-presta-card:hover .wtf-presta-card__icon {
    transform: scale(1.15) rotate(5deg);
}

/* Stats animation */
.wtf-presta-card__stat-value {
    transition: all 0.3s ease;
}

.wtf-presta-card:hover .wtf-presta-card__stat-value {
    transform: scale(1.1);
}

/* Featured card special effects */
.wtf-presta-card--featured {
    position: relative;
}

.wtf-presta-card--featured::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 2px solid transparent;
    border-radius: var(--border-radius-xl);
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.3), transparent, rgba(212, 175, 55, 0.3)) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: wtf-shimmer 4s linear infinite;
    background-size: 200% 200%;
    pointer-events: none;
}

/* Ribbon animation */
.wtf-presta-card__ribbon {
    box-shadow: 0 2px 10px rgba(212, 175, 55, 0.5);
    transition: all 0.3s ease;
}

.wtf-presta-card:hover .wtf-presta-card__ribbon {
    box-shadow: 0 4px 20px rgba(212, 175, 55, 0.7);
}

/* -------------------------
   Tech Section Enhanced
   ------------------------- */
.wtf-spec {
    position: relative;
    overflow: hidden;
}

.wtf-spec::before {
    content: '';
    position: absolute;
    top: -100%;
    left: -100%;
    width: 300%;
    height: 300%;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.1) 0%, transparent 50%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.wtf-spec:hover::before {
    opacity: 1;
}

.wtf-spec:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
}

.wtf-spec__icon {
    transition: all 0.3s ease;
}

.wtf-spec:hover .wtf-spec__icon {
    transform: scale(1.15);
    background: rgba(212, 175, 55, 0.2);
}

/* Tech card hover effects */
.wtf-tech__card {
    transition: all 0.3s ease;
}

.wtf-tech__card:hover {
    transform: translateY(-5px);
    border-color: rgba(212, 175, 55, 0.3);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}

/* Musician grid hover */
.wtf-tech__musician {
    transition: all 0.2s ease;
}

.wtf-tech__musician:hover {
    background: rgba(212, 175, 55, 0.1);
    transform: translateX(3px);
}

/* Contact block enhanced */
.wtf-tech__contact {
    position: relative;
    overflow: hidden;
}

.wtf-tech__contact::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
    animation: wtf-shimmer 4s ease-in-out infinite;
}

.wtf-tech__contact-link {
    position: relative;
    overflow: hidden;
}

.wtf-tech__contact-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--gold-400);
    transition: width 0.3s ease;
}

.wtf-tech__contact-link:hover::after {
    width: 100%;
}

/* -------------------------
   Zones Section Enhanced
   ------------------------- */
.wtf-zone {
    position: relative;
    overflow: hidden;
}

.wtf-zone::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.2) 0%, transparent 70%);
    transition: all 0.4s ease;
    transform: translate(-50%, -50%);
}

.wtf-zone:hover::before {
    width: 200%;
    height: 200%;
}

.wtf-zone:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.wtf-zone i {
    transition: transform 0.3s ease;
}

.wtf-zone:hover i {
    transform: scale(1.3);
}

/* -------------------------
   CTA Formules Enhanced
   ------------------------- */
.wtf-cta-formule {
    position: relative;
    overflow: hidden;
}

.wtf-cta-formule::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at center, rgba(212, 175, 55, 0.1) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.wtf-cta-formule:hover::before {
    opacity: 1;
}

.wtf-cta-formule:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
}

.wtf-cta-formule--premium {
    animation: wtf-pulse-glow 4s ease-in-out infinite;
}

.wtf-cta-formule--premium::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--gold-400), var(--gold-300), var(--gold-400));
    background-size: 200% auto;
    animation: wtf-shimmer 3s linear infinite;
}

.wtf-cta-formule__badge {
    animation: wtf-float 3s ease-in-out infinite;
    box-shadow: 0 3px 12px rgba(212, 175, 55, 0.5);
}

/* Button states enhanced */
.wtf-formule__btn {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.wtf-formule__btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.wtf-formule__btn:hover::before {
    left: 100%;
}

.wtf-formule__btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(212, 175, 55, 0.4);
}

/* Adding state */
.wtf-formule__btn.btn--adding {
    pointer-events: none;
    opacity: 0.8;
}

/* Added state */
.wtf-formule__btn.btn--added {
    background: linear-gradient(135deg, #4caf50 0%, #2e7d32 100%) !important;
    border-color: #4caf50 !important;
    color: white !important;
}

/* -------------------------
   Social Icons Enhanced
   ------------------------- */
.wtf-social {
    position: relative;
    overflow: hidden;
}

.wtf-social::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--gold-400) 0%, var(--gold-500) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
}

.wtf-social:hover::before {
    opacity: 1;
}

.wtf-social:hover {
    border-color: var(--gold-400);
    box-shadow: 0 8px 25px rgba(212, 175, 55, 0.4);
}

/* Platform specific colors on hover */
.wtf-social[title="Facebook"]:hover {
    background: #1877f2;
    border-color: #1877f2;
}

.wtf-social[title="Instagram"]:hover {
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
    border-color: #dc2743;
}

.wtf-social[title="TikTok"]:hover {
    background: #000000;
    border-color: #69c9d0;
    box-shadow:
        0 0 10px #69c9d0,
        0 0 20px #ee1d52;
}

/* -------------------------
   Service Phone CTA Enhanced
   ------------------------- */
.service-cta__phone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-6);
}

.service-cta__phone span {
    font-size: 0.9rem;
    color: var(--white-50);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.service-cta__phone a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--white);
    transition: all 0.3s ease;
}

.service-cta__phone a:hover {
    color: var(--gold-400);
    transform: scale(1.05);
}

.service-cta__phone a i {
    animation: wtf-float 2s ease-in-out infinite;
}

/* ═══════════════════════════════════════════════════════════════
   39. DJ LOCATION PAGE
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   39.1 PAGE HERO LOCATION
   ═══════════════════════════════════════════════════════════════ */

.page-hero--location {
    background-size: cover;
    background-position: center;
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 120px 20px 80px;
}

.page-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: rgba(212, 175, 55, 0.2);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 50px;
    color: var(--gold-400);
    font-size: 0.9rem;
    margin-bottom: var(--space-5);
}

/* ═══════════════════════════════════════════════════════════════
   39.2 INTRO GRID
   ═══════════════════════════════════════════════════════════════ */

.intro-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
    align-items: center;
}

.intro-content h2 {
    font-size: 2.5rem;
    margin-bottom: var(--space-5);
    color: var(--gold-400);
}

.intro-lead {
    font-size: 1.15rem;
    line-height: 1.8;
    color: var(--white-80);
    margin-bottom: var(--space-6);
}

.intro-features {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.intro-feature {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
}

.intro-feature i {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(212, 175, 55, 0.1);
    border-radius: 12px;
    color: var(--gold-400);
    font-size: 1.25rem;
    flex-shrink: 0;
}

.intro-feature strong {
    display: block;
    color: var(--white);
    margin-bottom: var(--space-1);
}

.intro-feature span {
    color: var(--white-70);
    font-size: 0.95rem;
}

.intro-image img {
    width: 100%;
    border-radius: var(--border-radius-xl);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

/* ═══════════════════════════════════════════════════════════════
   39.3 SERVICES LOCAL GRID
   ═══════════════════════════════════════════════════════════════ */

.services-local__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
}

.service-local-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--border-radius-xl);
    padding: var(--space-6);
    text-align: center;
    text-decoration: none;
    transition: var(--transition-fast);
}

.service-local-card:hover {
    background: rgba(212, 175, 55, 0.1);
    border-color: rgba(212, 175, 55, 0.3);
    transform: translateY(-5px);
}

.service-local-card__icon {
    width: 70px;
    height: 70px;
    margin: 0 auto var(--space-5);
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.2), rgba(212, 175, 55, 0.1));
    border-radius: 50%;
    color: var(--gold-400);
    font-size: 1.5rem;
}

.service-local-card h3 {
    color: var(--white);
    margin-bottom: var(--space-2);
    font-size: 1.2rem;
}

.service-local-card p {
    color: var(--white-70);
    font-size: 0.95rem;
    line-height: 1.6;
}

/* ═══════════════════════════════════════════════════════════════
   39.4 VENUES GRID
   ═══════════════════════════════════════════════════════════════ */

.venues__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: var(--space-4);
}

.venue-card {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--border-radius-lg);
}

.venue-card i {
    color: var(--gold-400);
}

.venue-card span {
    color: var(--white-90);
}

/* ═══════════════════════════════════════════════════════════════
   39.5 CTA LOCAL
   ═══════════════════════════════════════════════════════════════ */

.section--cta-local {
    padding: var(--space-12) 0;
}

.cta-local {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
    padding: var(--space-8) var(--space-10);
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.15), rgba(212, 175, 55, 0.05));
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: var(--border-radius-2xl);
}

.cta-local h2 {
    color: var(--white);
    margin-bottom: var(--space-2);
    font-size: 1.75rem;
}

.cta-local p {
    color: var(--white-80);
    margin: 0;
}

.cta-local__buttons {
    display: flex;
    gap: var(--space-4);
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════
   39.6 RESPONSIVE LOCATION
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
    .services-local__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .cta-local {
        flex-direction: column;
        text-align: center;
        padding: var(--space-7);
    }

    .cta-local__buttons {
        flex-direction: column;
        width: 100%;
    }

    .cta-local__buttons .btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .intro-grid {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }

    .intro-image {
        order: -1;
    }

    .intro-content h2 {
        font-size: 1.75rem;
    }

    .services-local__grid {
        grid-template-columns: 1fr;
    }

    .page-hero--location {
        min-height: 50vh;
        padding: 100px 15px 60px;
    }

    .page-hero__title {
        font-size: 2rem;
    }
}

/* ═══════════════════════════════════════════════════════════════
   39.7 LIGHT THEME LOCATION
   ═══════════════════════════════════════════════════════════════ */

[data-theme="light"] .service-local-card {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .service-local-card h3 {
    color: var(--dark-900);
}

[data-theme="light"] .service-local-card p {
    color: var(--dark-600);
}

[data-theme="light"] .venue-card {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .venue-card span {
    color: var(--dark-700);
}

[data-theme="light"] .cta-local {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.1), rgba(212, 175, 55, 0.05));
}

[data-theme="light"] .cta-local h2 {
    color: var(--dark-900);
}

[data-theme="light"] .cta-local p {
    color: var(--dark-600);
}

[data-theme="light"] .intro-content h2 {
    color: var(--gold-500);
}

[data-theme="light"] .intro-lead {
    color: var(--dark-600);
}

[data-theme="light"] .intro-feature strong {
    color: var(--dark-900);
}

[data-theme="light"] .intro-feature span {
    color: var(--dark-600);
}

/* ═══════════════════════════════════════════════════════════════
   40. VALLY PHOTOGRAPHY PAGE
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   40.1 PACKAGE CARD BADGE
   ═══════════════════════════════════════════════════════════════ */

.package-card--highlight .package-card__badge {
    background: linear-gradient(135deg, #e53935 0%, #c62828 100%);
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
    padding: var(--space-2) var(--space-4);
    border-radius: 4px;
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    box-shadow: 0 4px 15px rgba(229, 57, 53, 0.5);
    animation: pulse-badge 2s ease-in-out infinite;
    z-index: 10;
}

@keyframes pulse-badge {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 4px 15px rgba(229, 57, 53, 0.5);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 6px 25px rgba(229, 57, 53, 0.7);
    }
}

/* ═══════════════════════════════════════════════════════════════
   40.2 PORTFOLIO MASONRY
   ═══════════════════════════════════════════════════════════════ */

.vally-portfolio__masonry {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: var(--space-4);
    margin-top: var(--space-6);
}

.masonry-item {
    position: relative;
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    aspect-ratio: 4/3;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.masonry-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.masonry-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.masonry-item:hover img {
    transform: scale(1.1);
}

.vally-portfolio__count {
    text-align: center;
    margin-top: var(--space-5);
    color: var(--gold-400);
    font-size: 0.9rem;
}

/* ═══════════════════════════════════════════════════════════════
   40.3 VALLY HIGHLIGHTS
   ═══════════════════════════════════════════════════════════════ */

.vally-highlights {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin: var(--space-6) 0;
}

.vally-highlight {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: rgba(212, 175, 55, 0.1);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 25px;
    color: var(--gold-400);
    font-size: 0.9rem;
}

.vally-highlight i {
    font-size: 0.85rem;
}

/* ═══════════════════════════════════════════════════════════════
   40.4 VALLY PHILOSOPHY
   ═══════════════════════════════════════════════════════════════ */

.vally-philosophy {
    padding: var(--space-16) 0;
    background: linear-gradient(180deg, rgba(212, 175, 55, 0.04) 0%, rgba(212, 175, 55, 0.02) 100%), #0a0a0e;
}

.vally-quote {
    max-width: 700px;
    margin: var(--space-6) auto 0;
    text-align: center;
}

.vally-quote p {
    font-size: 1.3rem;
    font-style: italic;
    color: var(--gold-400);
    line-height: 1.6;
    quotes: """ """ "'" "'";
}

.vally-quote p::before {
    content: open-quote;
}

.vally-quote p::after {
    content: close-quote;
}

.vally-philosophy__content {
    max-width: 800px;
    margin: var(--space-8) auto 0;
    text-align: center;
}

.vally-philosophy__content p {
    color: var(--white-70);
    font-size: 1rem;
    line-height: 1.8;
}

/* ═══════════════════════════════════════════════════════════════
   40.5 VALLY ABOUT
   ═══════════════════════════════════════════════════════════════ */

.vally-about {
    padding: var(--space-16) 0;
    background: #060609;
}

.vally-about__grid {
    display: grid;
    grid-template-columns: 400px 1fr;
    gap: var(--space-10);
    align-items: center;
}

@media (max-width: 968px) {
    .vally-about__grid {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }
}

/* ═══════════════════════════════════════════════════════════════
   40.6 RESPONSIVE VALLY
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .vally-portfolio__masonry {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-2);
    }

    .package-card--highlight .package-card__badge {
        font-size: 0.95rem;
        padding: var(--space-2) var(--space-3);
    }

    .vally-quote p {
        font-size: 1.1rem;
    }
}

/* ═══════════════════════════════════════════════════════════════
   40.7 LIGHT THEME VALLY
   ═══════════════════════════════════════════════════════════════ */

[data-theme="light"] .vally-philosophy {
    background: #f5f5f5;
}

[data-theme="light"] .vally-philosophy__content p {
    color: var(--dark-600);
}

[data-theme="light"] .vally-about {
    background: #ffffff;
}

[data-theme="light"] .vally-highlight {
    background: rgba(212, 175, 55, 0.08);
}

/* ═══════════════════════════════════════════════════════════════
   40.8 VALLY PORTFOLIO SECTION
   ═══════════════════════════════════════════════════════════════ */

.vally-portfolio {
    padding: var(--space-16) 0 var(--space-20);
    background: #0c0c10;
}

/* Featured Portfolio - Layout créatif asymétrique */
.vally-portfolio__featured {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(2, 220px);
    gap: var(--space-4);
    margin-bottom: var(--space-8);
}

.portfolio-item {
    position: relative;
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.4s ease;
}

/* Layout asymétrique pour les 5 images */
.portfolio-item--1 {
    grid-column: 1 / 6;
    grid-row: 1 / 3;
}

.portfolio-item--2 {
    grid-column: 6 / 9;
    grid-row: 1 / 2;
}

.portfolio-item--3 {
    grid-column: 9 / 13;
    grid-row: 1 / 2;
}

.portfolio-item--4 {
    grid-column: 6 / 10;
    grid-row: 2 / 3;
}

.portfolio-item--5 {
    grid-column: 10 / 13;
    grid-row: 2 / 3;
}

.portfolio-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.portfolio-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5),
                0 0 0 3px rgba(212, 175, 55, 0.3);
    z-index: 2;
}

.portfolio-item:hover img {
    transform: scale(1.1);
}

.portfolio-item__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.7) 0%,
        rgba(0, 0, 0, 0.2) 40%,
        transparent 100%
    );
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.portfolio-item:hover .portfolio-item__overlay {
    opacity: 1;
}

.portfolio-item__overlay i {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(212, 175, 55, 0.9);
    border-radius: 50%;
    color: var(--dark-900);
    font-size: 1.2rem;
    transform: scale(0);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.portfolio-item:hover .portfolio-item__overlay i {
    transform: scale(1);
}

/* Portfolio CTA */
.vally-portfolio__cta {
    text-align: center;
    margin-top: var(--space-8);
}

/* ═══════════════════════════════════════════════════════════════
   40.9 VALLY ABOUT SECTION - Amélioré
   ═══════════════════════════════════════════════════════════════ */

.vally-about__image {
    position: relative;
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    border: 2px solid var(--gold-400);
}

.vally-about__image img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s ease;
}

.vally-about__image:hover img {
    transform: scale(1.03);
}

.vally-about__content {
    padding: var(--space-4) 0;
}

.vally-about__title {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    color: var(--white);
    margin-bottom: var(--space-4);
    line-height: 1.2;
}

.vally-about__text {
    color: var(--white-70);
    font-size: 1.05rem;
    line-height: 1.9;
    margin-bottom: var(--space-6);
}

.vally-about__quote {
    position: relative;
    padding: var(--space-5) var(--space-6);
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.1) 0%, rgba(212, 175, 55, 0.05) 100%);
    border-left: 4px solid var(--gold-400);
    border-radius: 0 var(--border-radius-lg) var(--border-radius-lg) 0;
}

.vally-about__quote p {
    font-style: italic;
    font-size: 1.1rem;
    color: var(--gold-300);
    line-height: 1.7;
    margin: 0;
}

/* ═══════════════════════════════════════════════════════════════
   40.10 VALLY LIGHTBOX
   ═══════════════════════════════════════════════════════════════ */

.vally-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.95);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    backdrop-filter: blur(10px);
}

.vally-lightbox.active {
    opacity: 1;
    visibility: visible;
}

.vally-lightbox__content {
    max-width: 90vw;
    max-height: 85vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vally-lightbox__content img {
    max-width: 100%;
    max-height: 85vh;
    object-fit: contain;
    border-radius: var(--border-radius-lg);
    box-shadow: 0 20px 80px rgba(0, 0, 0, 0.5);
    animation: lightboxZoom 0.3s ease-out;
}

@keyframes lightboxZoom {
    from {
        transform: scale(0.9);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

.vally-lightbox__close {
    position: absolute;
    top: var(--space-6);
    right: var(--space-6);
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    color: var(--white);
    font-size: 1.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.vally-lightbox__close:hover {
    background: var(--gold-400);
    border-color: var(--gold-400);
    color: var(--dark-900);
    transform: rotate(90deg);
}

.vally-lightbox__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: var(--white);
    font-size: 1.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.vally-lightbox__nav:hover {
    background: rgba(212, 175, 55, 0.3);
    color: var(--gold-400);
}

.vally-lightbox__nav--prev {
    left: 0;
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
}

.vally-lightbox__nav--next {
    right: 0;
    border-radius: var(--border-radius) 0 0 var(--border-radius);
}

.vally-lightbox__counter {
    position: absolute;
    bottom: var(--space-6);
    left: 50%;
    transform: translateX(-50%);
    padding: var(--space-2) var(--space-4);
    background: rgba(0, 0, 0, 0.6);
    border-radius: 20px;
    color: var(--white-70);
    font-size: 0.9rem;
}

/* ═══════════════════════════════════════════════════════════════
   40.11 GRID VARIANTS (pour pages services)
   ═══════════════════════════════════════════════════════════════ */

.service-extras__grid--3cols {
    grid-template-columns: repeat(3, 1fr);
}

.service-packages--dark {
    background: var(--dark-850);
}

.service-packages__grid--3cols {
    grid-template-columns: repeat(3, 1fr);
}

/* ═══════════════════════════════════════════════════════════════
   40.12 VALLY RESPONSIVE - Complet
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 1200px) {
    .vally-portfolio__featured {
        grid-template-rows: repeat(2, 180px);
    }
}

@media (max-width: 968px) {
    .vally-portfolio__featured {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(3, 180px);
    }

    .portfolio-item--1 {
        grid-column: 1 / 3;
        grid-row: 1 / 2;
    }

    .portfolio-item--2 {
        grid-column: 1 / 2;
        grid-row: 2 / 3;
    }

    .portfolio-item--3 {
        grid-column: 2 / 3;
        grid-row: 2 / 3;
    }

    .portfolio-item--4 {
        grid-column: 1 / 2;
        grid-row: 3 / 4;
    }

    .portfolio-item--5 {
        grid-column: 2 / 3;
        grid-row: 3 / 4;
    }

    .service-extras__grid--3cols {
        grid-template-columns: repeat(2, 1fr);
    }

    .service-packages__grid--3cols {
        grid-template-columns: repeat(2, 1fr);
    }

    .vally-about__image::before {
        inset: -2px;
    }
}

@media (max-width: 768px) {
    .vally-portfolio {
        padding: var(--space-10) 0 var(--space-12);
    }

    .vally-portfolio__featured {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(5, 200px);
        gap: var(--space-3);
    }

    .portfolio-item--1,
    .portfolio-item--2,
    .portfolio-item--3,
    .portfolio-item--4,
    .portfolio-item--5 {
        grid-column: 1 / 2;
        grid-row: auto;
    }

    .portfolio-item__overlay {
        opacity: 1;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, transparent 50%);
    }

    .portfolio-item__overlay i {
        transform: scale(1);
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    .service-extras__grid--3cols,
    .service-packages__grid--3cols {
        grid-template-columns: 1fr;
    }

    .vally-about {
        padding: var(--space-10) 0;
    }

    .vally-about__image {
        max-width: 300px;
        margin: 0 auto;
    }

    .vally-about__content {
        text-align: center;
    }

    .vally-about__quote {
        border-left: none;
        border-top: 3px solid var(--gold-400);
        border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg);
    }

    .vally-lightbox__close {
        top: var(--space-4);
        right: var(--space-4);
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
    }

    .vally-lightbox__nav {
        width: 40px;
        height: 60px;
        font-size: 1.2rem;
    }
}

@media (max-width: 480px) {
    .vally-portfolio__featured {
        grid-template-rows: repeat(5, 160px);
    }

    .vally-philosophy {
        padding: var(--space-10) 0;
    }

    .vally-quote p {
        font-size: 1rem;
    }

    .vally-about__title {
        font-size: 1.5rem;
    }

    .vally-about__text {
        font-size: 0.95rem;
    }

    .vally-about__quote {
        padding: var(--space-4);
    }

    .vally-about__quote p {
        font-size: 1rem;
    }
}

/* ═══════════════════════════════════════════════════════════════
   40.13 VALLY LIGHT THEME - Complet
   ═══════════════════════════════════════════════════════════════ */

[data-theme="light"] .vally-portfolio {
    background: linear-gradient(180deg, #f8f8f8 0%, #f0f0f0 100%);
}

[data-theme="light"] .portfolio-item {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .portfolio-item:hover {
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2),
                0 0 0 3px rgba(212, 175, 55, 0.3);
}

[data-theme="light"] .vally-about__title {
    color: var(--dark-900);
}

[data-theme="light"] .vally-about__text {
    color: var(--dark-600);
}

[data-theme="light"] .vally-about__quote {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.08) 0%, rgba(212, 175, 55, 0.03) 100%);
}

[data-theme="light"] .vally-about__quote p {
    color: var(--gold-600);
}

[data-theme="light"] .service-packages--dark {
    background: #f5f5f5;
}

[data-theme="light"] .vally-portfolio__count {
    color: var(--gold-600);
}

/* ═══════════════════════════════════════════════════════════════
   41. MÉDITATION NOMADE PAGE
   Expérience immersive alliant son et bien-être
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   41.1 MEDITATION VALUES (Introduction)
   ═══════════════════════════════════════════════════════════════ */

.meditation-values {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin: var(--space-6) 0;
}

.meditation-value {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    background: linear-gradient(135deg, rgba(138, 92, 246, 0.1) 0%, rgba(138, 92, 246, 0.05) 100%);
    border: 1px solid rgba(138, 92, 246, 0.2);
    border-radius: var(--border-radius-lg);
    transition: all 0.3s ease;
}

.meditation-value:hover {
    background: linear-gradient(135deg, rgba(138, 92, 246, 0.15) 0%, rgba(138, 92, 246, 0.08) 100%);
    border-color: rgba(138, 92, 246, 0.4);
    transform: translateX(5px);
}

.meditation-value > i {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(138, 92, 246, 0.3) 0%, rgba(168, 85, 247, 0.2) 100%);
    border-radius: 50%;
    color: #a78bfa;
    font-size: 1.3rem;
    flex-shrink: 0;
}

.meditation-value div {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.meditation-value strong {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--white);
}

.meditation-value span {
    font-size: 0.9rem;
    color: var(--white-60);
    line-height: 1.6;
}

/* ═══════════════════════════════════════════════════════════════
   41.2 MEDITATION SCIENCE (Statistics)
   ═══════════════════════════════════════════════════════════════ */

.meditation-science {
    padding: var(--space-16) 0;
    background: linear-gradient(180deg, var(--dark-900) 0%, var(--dark-950) 100%);
    position: relative;
    overflow: hidden;
}

.meditation-science::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(138, 92, 246, 0.1) 0%, transparent 70%);
    pointer-events: none;
}

.meditation-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
    position: relative;
    z-index: 1;
}

.meditation-stat {
    text-align: center;
    padding: var(--space-6);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(138, 92, 246, 0.15);
    border-radius: var(--border-radius-xl);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.meditation-stat:hover {
    background: rgba(138, 92, 246, 0.08);
    border-color: rgba(138, 92, 246, 0.4);
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(138, 92, 246, 0.15);
}

.meditation-stat__value {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    font-weight: 700;
    background: linear-gradient(135deg, #a78bfa 0%, #c4b5fd 50%, #a78bfa 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: var(--space-2);
}

.meditation-stat__label {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    color: var(--white);
    margin-bottom: var(--space-2);
}

.meditation-stat__desc {
    font-size: 0.85rem;
    color: var(--white-50);
    line-height: 1.5;
    margin: 0;
}

/* ═══════════════════════════════════════════════════════════════
   41.3 MEDITATION TEAM
   ═══════════════════════════════════════════════════════════════ */

.meditation-team .extra-card__icon {
    background: linear-gradient(135deg, rgba(138, 92, 246, 0.2) 0%, rgba(168, 85, 247, 0.1) 100%);
}

.meditation-team .extra-card__icon i {
    color: #a78bfa;
}

.meditation-team .extra-card:hover {
    border-color: rgba(138, 92, 246, 0.4);
    box-shadow: 0 15px 40px rgba(138, 92, 246, 0.15);
}

.extra-card__role {
    display: block;
    font-size: 0.85rem;
    color: #a78bfa;
    margin-top: calc(var(--space-1) * -1);
    margin-bottom: var(--space-3);
}

/* ═══════════════════════════════════════════════════════════════
   41.4 MEDITATION STEPS (Process)
   ═══════════════════════════════════════════════════════════════ */

.meditation-steps {
    padding: var(--space-16) 0;
    background: var(--dark-900);
}

.meditation-steps__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
    position: relative;
}

/* Ligne de connexion entre les étapes */
.meditation-steps__grid::before {
    content: '';
    position: absolute;
    top: 45px;
    left: 15%;
    right: 15%;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(138, 92, 246, 0.3) 20%,
        rgba(138, 92, 246, 0.3) 80%,
        transparent 100%
    );
    z-index: 0;
}

.meditation-step {
    position: relative;
    z-index: 1;
    padding: var(--space-6);
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--border-radius-xl);
    transition: all 0.4s ease;
}

.meditation-step:hover {
    background: rgba(138, 92, 246, 0.05);
    border-color: rgba(138, 92, 246, 0.3);
    transform: translateY(-5px);
}

.meditation-step__number {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%);
    border-radius: 50%;
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--white);
    margin: 0 auto var(--space-5);
    box-shadow: 0 8px 25px rgba(139, 92, 246, 0.4);
}

.meditation-step__title {
    font-family: var(--font-display);
    font-size: 1.3rem;
    color: var(--white);
    text-align: center;
    margin-bottom: var(--space-4);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
}

.meditation-step__duration {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    background: rgba(138, 92, 246, 0.2);
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
    color: #c4b5fd;
}

.meditation-step__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.meditation-step__list li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    font-size: 0.95rem;
    color: var(--white-70);
    line-height: 1.5;
}

.meditation-step__list li i {
    color: #a78bfa;
    font-size: 0.8rem;
    margin-top: 4px;
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════
   41.5 MEDITATION PACKAGES NOTE
   ═══════════════════════════════════════════════════════════════ */

.meditation-packages__note {
    text-align: center;
    margin-top: var(--space-8);
    padding: var(--space-4);
    background: rgba(138, 92, 246, 0.08);
    border: 1px solid rgba(138, 92, 246, 0.2);
    border-radius: var(--border-radius);
    font-size: 0.9rem;
    color: var(--white-60);
}

.meditation-packages__note i {
    color: #a78bfa;
    margin-right: var(--space-2);
}

/* ═══════════════════════════════════════════════════════════════
   41.6 MEDITATION TESTIMONIALS
   ═══════════════════════════════════════════════════════════════ */

.meditation-testimonials {
    padding: var(--space-16) 0;
    background: var(--dark-850);
}

.meditation-testimonials__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
}

.meditation-testimonial {
    padding: var(--space-6);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--border-radius-xl);
    transition: all 0.3s ease;
    position: relative;
}

.meditation-testimonial:hover {
    background: rgba(138, 92, 246, 0.05);
    border-color: rgba(138, 92, 246, 0.3);
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
}

.meditation-testimonial__quote {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(138, 92, 246, 0.15);
    border-radius: 50%;
    color: #a78bfa;
    font-size: 1rem;
}

.meditation-testimonial__text {
    font-size: 1rem;
    color: var(--white-80);
    line-height: 1.8;
    font-style: italic;
    margin-bottom: var(--space-4);
    padding-right: var(--space-10);
}

.meditation-testimonial__author {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.meditation-testimonial__author strong {
    font-size: 1rem;
    color: var(--white);
}

.meditation-testimonial__author span {
    font-size: 0.85rem;
    color: #a78bfa;
}

.meditation-testimonial__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-4);
}

.meditation-tag {
    padding: var(--space-1) var(--space-3);
    background: rgba(138, 92, 246, 0.15);
    border-radius: 20px;
    font-size: 0.75rem;
    color: #c4b5fd;
}

/* ═══════════════════════════════════════════════════════════════
   41.7 SERVICE EXTRAS DARK VARIANT
   ═══════════════════════════════════════════════════════════════ */

.service-extras--dark {
    background: var(--dark-850);
}

/* ═══════════════════════════════════════════════════════════════
   41.8 MEDITATION RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 1200px) {
    .meditation-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 968px) {
    .meditation-steps__grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    .meditation-steps__grid::before {
        display: none;
    }

    .meditation-step {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: var(--space-4);
        text-align: left;
    }

    .meditation-step__number {
        width: 50px;
        height: 50px;
        font-size: 1.2rem;
        margin: 0;
        grid-row: span 2;
        align-self: start;
    }

    .meditation-step__title {
        text-align: left;
        flex-direction: row;
        justify-content: flex-start;
        margin-bottom: var(--space-2);
    }

    .meditation-testimonials__grid {
        grid-template-columns: 1fr;
    }

    .meditation-stat {
        padding: var(--space-5);
    }

    .meditation-stat__value {
        font-size: 2.5rem;
    }
}

@media (max-width: 768px) {
    .meditation-science {
        padding: var(--space-10) 0;
    }

    .meditation-stats {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-3);
    }

    .meditation-stat {
        padding: var(--space-4);
    }

    .meditation-stat__value {
        font-size: 2rem;
    }

    .meditation-stat__label {
        font-size: 0.9rem;
    }

    .meditation-stat__desc {
        font-size: 0.8rem;
    }

    .meditation-steps {
        padding: var(--space-10) 0;
    }

    .meditation-value {
        padding: var(--space-3) var(--space-4);
    }

    .meditation-value > i {
        width: 40px;
        height: 40px;
        font-size: 1.1rem;
    }

    .meditation-testimonials {
        padding: var(--space-10) 0;
    }

    .meditation-testimonial {
        padding: var(--space-5);
    }

    .meditation-testimonial__text {
        font-size: 0.95rem;
        padding-right: var(--space-8);
    }

    .meditation-testimonial__quote {
        width: 32px;
        height: 32px;
        font-size: 0.85rem;
    }
}

@media (max-width: 480px) {
    .meditation-stats {
        grid-template-columns: 1fr;
    }

    .meditation-step {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .meditation-step__number {
        margin: 0 auto var(--space-4);
        grid-row: auto;
    }

    .meditation-step__title {
        flex-direction: column;
        align-items: center;
    }

    .meditation-value {
        flex-direction: column;
        text-align: center;
    }

    .meditation-value > i {
        margin: 0 auto;
    }

    .meditation-packages__note {
        font-size: 0.85rem;
        padding: var(--space-3);
    }
}

/* ═══════════════════════════════════════════════════════════════
   41.9 MEDITATION LIGHT THEME
   ═══════════════════════════════════════════════════════════════ */

[data-theme="light"] .meditation-science {
    background: linear-gradient(180deg, #faf5ff 0%, #f3e8ff 100%);
}

[data-theme="light"] .meditation-science::before {
    background: radial-gradient(circle, rgba(138, 92, 246, 0.15) 0%, transparent 70%);
}

[data-theme="light"] .meditation-stat {
    background: rgba(255, 255, 255, 0.8);
    border-color: rgba(138, 92, 246, 0.2);
}

[data-theme="light"] .meditation-stat:hover {
    background: rgba(255, 255, 255, 1);
}

[data-theme="light"] .meditation-stat__label {
    color: var(--dark-800);
}

[data-theme="light"] .meditation-stat__desc {
    color: var(--dark-500);
}

[data-theme="light"] .meditation-steps {
    background: #ffffff;
}

[data-theme="light"] .meditation-step {
    background: #faf5ff;
    border-color: rgba(138, 92, 246, 0.15);
}

[data-theme="light"] .meditation-step:hover {
    background: #f3e8ff;
}

[data-theme="light"] .meditation-step__list li {
    color: var(--dark-600);
}

[data-theme="light"] .meditation-value {
    background: linear-gradient(135deg, rgba(138, 92, 246, 0.08) 0%, rgba(138, 92, 246, 0.03) 100%);
}

[data-theme="light"] .meditation-value strong {
    color: var(--dark-800);
}

[data-theme="light"] .meditation-value span {
    color: var(--dark-500);
}

[data-theme="light"] .meditation-testimonials {
    background: #faf5ff;
}

[data-theme="light"] .meditation-testimonial {
    background: rgba(255, 255, 255, 0.9);
}

[data-theme="light"] .meditation-testimonial__text {
    color: var(--dark-600);
}

[data-theme="light"] .meditation-testimonial__author strong {
    color: var(--dark-800);
}

[data-theme="light"] .meditation-packages__note {
    background: rgba(138, 92, 246, 0.05);
}

[data-theme="light"] .service-extras--dark {
    background: #f5f5f5;
}

/* ═══════════════════════════════════════════════════════════════
   42. PAGE VISIO - CONSULTATION GRATUITE
   ═══════════════════════════════════════════════════════════════ */

/* -------------------------
   42.1 Benefits Section
   ------------------------- */
.visio-benefits {
    padding: var(--space-16) 0;
    background: var(--dark-900);
}

.visio-benefits__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
}

@media (max-width: 968px) {
    .visio-benefits__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .visio-benefits__grid {
        grid-template-columns: 1fr;
    }
}

.visio-benefit {
    text-align: center;
    padding: var(--space-6);
    background: var(--dark-800);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--border-radius-xl);
    transition: all 0.3s ease;
}

.visio-benefit:hover {
    transform: translateY(-5px);
    border-color: rgba(212, 175, 55, 0.3);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}

.visio-benefit__icon {
    width: 70px;
    height: 70px;
    margin: 0 auto var(--space-4);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(212, 175, 55, 0.1);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 50%;
    color: var(--gold-400);
    font-size: 1.5rem;
    transition: all 0.3s ease;
}

.visio-benefit:hover .visio-benefit__icon {
    transform: scale(1.1);
    background: rgba(212, 175, 55, 0.2);
}

.visio-benefit__title {
    font-family: var(--font-display);
    font-size: 1.1rem;
    color: var(--white);
    margin-bottom: var(--space-2);
}

.visio-benefit__text {
    font-size: 0.9rem;
    color: var(--white-60);
    line-height: 1.6;
}

/* -------------------------
   42.2 Form Section
   ------------------------- */
.visio-form-section {
    padding: var(--space-16) 0;
    background: linear-gradient(180deg, var(--dark-850) 0%, var(--dark-900) 100%);
}

.visio-form__wrapper {
    max-width: 800px;
    margin: 0 auto;
    background: var(--dark-800);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--border-radius-xl);
    padding: var(--space-8);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

.visio-form__header {
    text-align: center;
    margin-bottom: var(--space-8);
}

.visio-form__title {
    font-family: var(--font-display);
    font-size: 1.8rem;
    color: var(--white);
    margin-bottom: var(--space-2);
}

.visio-form__subtitle {
    color: var(--white-60);
    font-size: 1rem;
}

.visio-form__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5);
    margin-bottom: var(--space-6);
}

@media (max-width: 600px) {
    .visio-form__grid {
        grid-template-columns: 1fr;
    }
}

.visio-form__datetime {
    padding: var(--space-6);
    background: rgba(212, 175, 55, 0.05);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: var(--border-radius-lg);
    margin-bottom: var(--space-6);
}

.visio-form__section-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 1.1rem;
    color: var(--gold-400);
    margin-bottom: var(--space-4);
}

.visio-form__section-title i {
    font-size: 1rem;
}

.visio-form__datetime-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
}

@media (max-width: 480px) {
    .visio-form__datetime-grid {
        grid-template-columns: 1fr;
    }
}

.visio-form__note {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-4);
    padding: var(--space-3);
    background: rgba(255, 255, 255, 0.03);
    border-radius: var(--border-radius);
    font-size: 0.85rem;
    color: var(--white-50);
}

.visio-form__note i {
    color: var(--gold-400);
}

.visio-form__submit {
    text-align: center;
}

.visio-form__submit .btn {
    min-width: 250px;
}

/* Form Elements */
.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.form-group--full {
    grid-column: 1 / -1;
}

.form-label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--white-80);
}

.form-label i {
    color: var(--gold-400);
    font-size: 0.85rem;
}

.form-input,
.form-select,
.form-textarea {
    padding: var(--space-3) var(--space-4);
    background: var(--dark-900);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--border-radius);
    color: var(--white);
    font-size: 0.95rem;
    font-family: inherit;
    transition: all 0.3s ease;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--gold-400);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
}

.form-input::placeholder,
.form-textarea::placeholder {
    color: var(--white-30);
}

.form-select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23d4af37' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

.form-textarea {
    resize: vertical;
    min-height: 100px;
}

/* -------------------------
   42.3 Success Message
   ------------------------- */
.visio-success {
    text-align: center;
    padding: var(--space-10);
}

.visio-success__icon {
    width: 100px;
    height: 100px;
    margin: 0 auto var(--space-6);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(76, 175, 80, 0.1);
    border: 2px solid #4caf50;
    border-radius: 50%;
    color: #4caf50;
    font-size: 3rem;
    animation: visio-pulse 2s ease-in-out infinite;
}

@keyframes visio-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.visio-success__title {
    font-family: var(--font-display);
    font-size: 1.8rem;
    color: var(--white);
    margin-bottom: var(--space-3);
}

.visio-success__text {
    color: var(--white-70);
    font-size: 1rem;
    margin-bottom: var(--space-4);
}

.visio-success__room {
    padding: var(--space-4);
    background: rgba(212, 175, 55, 0.1);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: var(--border-radius);
    color: var(--gold-400);
    font-weight: 500;
}

/* -------------------------
   42.4 Steps Section
   ------------------------- */
.visio-steps {
    padding: var(--space-16) 0;
    background: var(--dark-900);
}

.visio-steps__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
    margin-top: var(--space-10);
}

@media (max-width: 968px) {
    .visio-steps__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .visio-steps__grid {
        grid-template-columns: 1fr;
    }
}

.visio-step {
    position: relative;
    text-align: center;
    padding: var(--space-6);
    background: var(--dark-800);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--border-radius-xl);
    transition: all 0.3s ease;
}

.visio-step:hover {
    transform: translateY(-5px);
    border-color: rgba(212, 175, 55, 0.3);
}

.visio-step__number {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--gold-400) 0%, var(--gold-500) 100%);
    border-radius: 50%;
    color: var(--dark-900);
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 700;
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.4);
}

.visio-step__title {
    font-family: var(--font-display);
    font-size: 1.1rem;
    color: var(--white);
    margin: var(--space-4) 0 var(--space-2);
}

.visio-step__text {
    font-size: 0.9rem;
    color: var(--white-60);
    line-height: 1.6;
}

/* Connector lines between steps */
@media (min-width: 969px) {
    .visio-step:not(:last-child)::after {
        content: '';
        position: absolute;
        top: 50%;
        right: -30px;
        width: 20px;
        height: 2px;
        background: linear-gradient(90deg, var(--gold-400), transparent);
        transform: translateY(-50%);
    }
}

/* -------------------------
   42.5 CTA Section (Generic)
   ------------------------- */
.cta-section {
    padding: var(--space-16) 0;
    background: linear-gradient(135deg, var(--dark-800) 0%, var(--dark-900) 100%);
    position: relative;
    overflow: hidden;
}

.cta-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at center, rgba(212, 175, 55, 0.08) 0%, transparent 70%);
    pointer-events: none;
}

.cta-section__container {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 var(--space-4);
}

.cta-section__content {
    position: relative;
    text-align: center;
    padding: var(--space-10);
    background: var(--dark-800);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: var(--border-radius-xl);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

.cta-section__title {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 4vw, 2rem);
    color: var(--white);
    margin-bottom: var(--space-3);
}

.cta-section__text {
    color: var(--white-70);
    font-size: 1rem;
    margin-bottom: var(--space-6);
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.cta-section__buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-4);
}

/* -------------------------
   42.6 Light Theme
   ------------------------- */
[data-theme="light"] .visio-benefits {
    background: #f5f5f5;
}

[data-theme="light"] .visio-benefit {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .visio-benefit__title {
    color: var(--dark-900);
}

[data-theme="light"] .visio-benefit__text {
    color: var(--dark-600);
}

[data-theme="light"] .visio-form-section {
    background: linear-gradient(180deg, #ebebeb 0%, #f5f5f5 100%);
}

[data-theme="light"] .visio-form__wrapper {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .visio-form__title {
    color: var(--dark-900);
}

[data-theme="light"] .visio-form__subtitle {
    color: var(--dark-600);
}

[data-theme="light"] .form-input,
[data-theme="light"] .form-select,
[data-theme="light"] .form-textarea {
    background: #f5f5f5;
    border-color: rgba(0, 0, 0, 0.1);
    color: var(--dark-900);
}

[data-theme="light"] .form-label {
    color: var(--dark-700);
}

[data-theme="light"] .visio-form__datetime {
    background: rgba(212, 175, 55, 0.05);
    border-color: rgba(212, 175, 55, 0.2);
}

[data-theme="light"] .visio-form__note {
    background: rgba(0, 0, 0, 0.03);
    color: var(--dark-600);
}

[data-theme="light"] .visio-steps {
    background: #f5f5f5;
}

[data-theme="light"] .visio-step {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .visio-step__title {
    color: var(--dark-900);
}

[data-theme="light"] .visio-step__text {
    color: var(--dark-600);
}

[data-theme="light"] .cta-section {
    background: linear-gradient(135deg, #ebebeb 0%, #f5f5f5 100%);
}

[data-theme="light"] .cta-section__content {
    background: #ffffff;
}

[data-theme="light"] .cta-section__title {
    color: var(--dark-900);
}

[data-theme="light"] .cta-section__text {
    color: var(--dark-600);
}

/* ═══════════════════════════════════════════════════════════════
   43. PAGE NOËL 2025 - OFFRE PROMOTIONNELLE
   ═══════════════════════════════════════════════════════════════ */

/* Christmas Color Palette */
:root {
    --xmas-red: #c41e3a;
    --xmas-red-light: #e63946;
    --xmas-red-dark: #9a1829;
    --xmas-green: #228b22;
    --xmas-green-light: #2ecc71;
    --xmas-green-dark: #1a6b1a;
}

/* -------------------------
   43.1 Hero Section
   ------------------------- */
.noel-hero {
    position: relative;
    padding: calc(var(--navbar-height) + var(--space-16)) 0 var(--space-16);
    background: linear-gradient(135deg, var(--dark-900) 0%, #1a0a0a 50%, var(--dark-900) 100%);
    text-align: center;
    overflow: hidden;
}

.noel-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 20% 30%, rgba(196, 30, 58, 0.15) 0%, transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(34, 139, 34, 0.1) 0%, transparent 40%),
        radial-gradient(circle at 50% 50%, rgba(212, 175, 55, 0.08) 0%, transparent 60%);
    pointer-events: none;
}

.noel-hero__content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    margin: 0 auto;
    padding: 0 var(--space-4);
}

.noel-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-5);
    background: linear-gradient(135deg, var(--xmas-red) 0%, var(--xmas-red-dark) 100%);
    border-radius: 50px;
    color: white;
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-5);
    box-shadow: 0 5px 20px rgba(196, 30, 58, 0.4);
    animation: noel-pulse 2s ease-in-out infinite;
}

@keyframes noel-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.noel-hero__badge i {
    animation: noel-gift-shake 1s ease-in-out infinite;
}

@keyframes noel-gift-shake {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-10deg); }
    75% { transform: rotate(10deg); }
}

.noel-hero__title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 6vw, 3.5rem);
    color: var(--white);
    margin-bottom: var(--space-5);
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.noel-hero__promo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

.noel-hero__discount {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-3) var(--space-5);
    background: linear-gradient(135deg, var(--gold-400) 0%, var(--gold-500) 100%);
    border-radius: var(--border-radius-lg);
    color: var(--dark-900);
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
    box-shadow: 0 8px 30px rgba(212, 175, 55, 0.5);
    animation: noel-bounce 2s ease-in-out infinite;
}

@keyframes noel-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.noel-hero__promo-text {
    font-size: 1.2rem;
    color: var(--white-80);
}

.noel-hero__subtitle {
    font-size: 1.1rem;
    color: var(--white-70);
    margin-bottom: var(--space-4);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.noel-hero__validity {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50px;
    color: var(--gold-400);
    font-size: 0.9rem;
    margin-bottom: var(--space-6);
}

.noel-hero__validity i {
    animation: noel-tick 1s ease-in-out infinite;
}

@keyframes noel-tick {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Snowflake Decoration */
.noel-hero__decoration {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    overflow: hidden;
}

.noel-hero__decoration i {
    position: absolute;
    color: rgba(255, 255, 255, 0.15);
    animation: noel-snowfall linear infinite;
}

.noel-hero__decoration i:nth-child(1) {
    left: 10%;
    font-size: 1.5rem;
    animation-duration: 8s;
}

.noel-hero__decoration i:nth-child(2) {
    left: 50%;
    font-size: 2rem;
    animation-duration: 10s;
    animation-delay: 2s;
}

.noel-hero__decoration i:nth-child(3) {
    left: 85%;
    font-size: 1.2rem;
    animation-duration: 7s;
    animation-delay: 4s;
}

@keyframes noel-snowfall {
    0% { top: -10%; transform: translateX(0) rotate(0deg); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { top: 110%; transform: translateX(100px) rotate(360deg); opacity: 0; }
}

/* -------------------------
   43.2 Advantages Section
   ------------------------- */
.noel-advantages {
    padding: var(--space-12) 0;
    background: var(--dark-900);
    border-bottom: 1px solid rgba(196, 30, 58, 0.2);
}

.noel-advantages__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
}

@media (max-width: 768px) {
    .noel-advantages__grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }
}

.noel-advantage {
    text-align: center;
    padding: var(--space-6);
    background: var(--dark-800);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--border-radius-xl);
    transition: all 0.3s ease;
}

.noel-advantage:hover {
    transform: translateY(-5px);
    border-color: rgba(196, 30, 58, 0.3);
    box-shadow: 0 15px 40px rgba(196, 30, 58, 0.15);
}

.noel-advantage__icon {
    width: 60px;
    height: 60px;
    margin: 0 auto var(--space-4);
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(196, 30, 58, 0.15) 0%, rgba(196, 30, 58, 0.05) 100%);
    border: 1px solid rgba(196, 30, 58, 0.3);
    border-radius: 50%;
    color: var(--xmas-red);
    font-size: 1.3rem;
    transition: all 0.3s ease;
}

.noel-advantage:hover .noel-advantage__icon {
    transform: scale(1.1) rotate(5deg);
}

.noel-advantage__title {
    font-family: var(--font-display);
    font-size: 1.1rem;
    color: var(--white);
    margin-bottom: var(--space-2);
}

.noel-advantage__desc {
    font-size: 0.9rem;
    color: var(--white-60);
    line-height: 1.6;
}

/* -------------------------
   43.3 Packages Section
   ------------------------- */
.noel-packages {
    background: linear-gradient(180deg, var(--dark-900) 0%, var(--dark-850) 100%);
    position: relative;
}

.noel-packages::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--xmas-red), transparent);
}

.noel-price {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
}

.noel-price__old {
    font-size: 1rem;
    color: var(--white-40);
    text-decoration: line-through;
    position: relative;
}

.noel-price__old::after {
    content: '';
    position: absolute;
    top: 50%;
    left: -5%;
    width: 110%;
    height: 2px;
    background: var(--xmas-red);
    transform: rotate(-5deg);
}

.noel-packages .package-card__amount {
    color: var(--xmas-green-light);
}

.noel-packages .package-card--highlight .package-card__amount {
    color: var(--gold-400);
}

.package-card__option {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3);
    margin: var(--space-4) 0;
    background: rgba(212, 175, 55, 0.08);
    border: 1px dashed rgba(212, 175, 55, 0.3);
    border-radius: var(--border-radius);
    font-size: 0.85rem;
    color: var(--gold-400);
}

.package-card__option i {
    color: var(--gold-400);
}

.noel-packages__note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    margin-top: var(--space-8);
    padding: var(--space-4);
    background: rgba(196, 30, 58, 0.1);
    border: 1px solid rgba(196, 30, 58, 0.2);
    border-radius: var(--border-radius-lg);
    color: var(--white-70);
    font-size: 0.9rem;
}

.noel-packages__note i {
    color: var(--xmas-red);
}

/* -------------------------
   43.4 Events Section
   ------------------------- */
.noel-events {
    padding: var(--space-16) 0;
    background: var(--dark-850);
}

.noel-events__grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-4);
    margin-top: var(--space-8);
}

.noel-event {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-6);
    background: var(--dark-800);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--border-radius-lg);
    color: var(--white);
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.noel-event:hover {
    transform: translateY(-3px);
    border-color: rgba(34, 139, 34, 0.4);
    background: rgba(34, 139, 34, 0.1);
}

.noel-event i {
    color: var(--xmas-green);
    font-size: 1.2rem;
    transition: transform 0.3s ease;
}

.noel-event:hover i {
    transform: scale(1.2);
}

/* -------------------------
   43.5 Conditions Section
   ------------------------- */
.noel-conditions {
    padding: var(--space-12) 0;
    background: var(--dark-900);
}

.noel-conditions__box {
    max-width: 700px;
    margin: 0 auto;
    padding: var(--space-6);
    background: var(--dark-800);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--border-radius-xl);
}

.noel-conditions__box h3 {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 1.1rem;
    color: var(--white);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.noel-conditions__box h3 i {
    color: var(--gold-400);
}

.noel-conditions__box ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.noel-conditions__box li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    color: var(--white-70);
    font-size: 0.9rem;
}

.noel-conditions__box li i {
    color: var(--xmas-green);
    margin-top: 3px;
    flex-shrink: 0;
}

/* -------------------------
   43.6 CTA Section
   ------------------------- */
.noel-cta {
    background: linear-gradient(135deg, #1a0a0a 0%, var(--dark-900) 50%, #0a1a0a 100%);
    position: relative;
    overflow: hidden;
}

.noel-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 30% 20%, rgba(196, 30, 58, 0.1) 0%, transparent 40%),
        radial-gradient(circle at 70% 80%, rgba(34, 139, 34, 0.1) 0%, transparent 40%);
    pointer-events: none;
}

.noel-cta .service-cta__content {
    position: relative;
    z-index: 1;
}

.noel-cta .service-cta__badge {
    background: linear-gradient(135deg, var(--xmas-red) 0%, var(--xmas-red-dark) 100%);
    color: white;
}

/* -------------------------
   43.7 Responsive
   ------------------------- */
@media (max-width: 768px) {
    .noel-hero {
        padding: calc(var(--navbar-height) + var(--space-10)) 0 var(--space-10);
    }

    .noel-hero__discount {
        font-size: 1.5rem;
        padding: var(--space-2) var(--space-4);
    }

    .noel-hero__promo {
        flex-direction: column;
        gap: var(--space-2);
    }

    .noel-event {
        padding: var(--space-3) var(--space-4);
        font-size: 0.85rem;
    }
}

/* -------------------------
   43.8 Light Theme
   ------------------------- */
[data-theme="light"] .noel-hero {
    background: linear-gradient(135deg, #fff5f5 0%, #ffffff 50%, #f5fff5 100%);
}

[data-theme="light"] .noel-hero__title {
    color: var(--dark-900);
    text-shadow: none;
}

[data-theme="light"] .noel-hero__subtitle,
[data-theme="light"] .noel-hero__promo-text {
    color: var(--dark-600);
}

[data-theme="light"] .noel-hero__validity {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .noel-hero__decoration i {
    color: rgba(196, 30, 58, 0.15);
}

[data-theme="light"] .noel-advantages {
    background: #f5f5f5;
    border-color: rgba(196, 30, 58, 0.1);
}

[data-theme="light"] .noel-advantage {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .noel-advantage__title {
    color: var(--dark-900);
}

[data-theme="light"] .noel-advantage__desc {
    color: var(--dark-600);
}

[data-theme="light"] .noel-packages {
    background: linear-gradient(180deg, #f5f5f5 0%, #ebebeb 100%);
}

[data-theme="light"] .noel-packages__note {
    background: rgba(196, 30, 58, 0.05);
}

[data-theme="light"] .noel-events {
    background: #ebebeb;
}

[data-theme="light"] .noel-event {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.08);
    color: var(--dark-900);
}

[data-theme="light"] .noel-conditions {
    background: #f5f5f5;
}

[data-theme="light"] .noel-conditions__box {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .noel-conditions__box h3 {
    color: var(--dark-900);
}

[data-theme="light"] .noel-conditions__box li {
    color: var(--dark-600);
}

[data-theme="light"] .noel-cta {
    background: linear-gradient(135deg, #fff5f5 0%, #f5f5f5 50%, #f5fff5 100%);
}
/* ═══════════════════════════════════════════════════════════════════════════
   ESPACE CLIENT - DJ Prestige Sound
   Styles pour login, register, dashboard et toutes les pages client
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────────
   1. BASE & LAYOUT
   ───────────────────────────────────────────────────────────────────────────── */
.client-page {
    min-height: 100vh;
    background: var(--dark-900);
    color: var(--white);
    padding-bottom: env(safe-area-inset-bottom);
}

.client-page.has-bottom-nav {
    padding-bottom: calc(70px + env(safe-area-inset-bottom));
}

/* ─────────────────────────────────────────────────────────────────────────────
   2. BACKGROUND SLIDESHOW
   ───────────────────────────────────────────────────────────────────────────── */
.background-slideshow {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.background-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
}

.background-slide::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(10, 10, 15, 0.85) 0%,
        rgba(10, 10, 15, 0.75) 50%,
        rgba(10, 10, 15, 0.9) 100%
    );
}

.background-slide.active {
    opacity: 1;
}

/* ─────────────────────────────────────────────────────────────────────────────
   3. AUTH LANGUAGE SELECTOR (Login/Register)
   ───────────────────────────────────────────────────────────────────────────── */
.auth-lang-selector {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 100;
    display: flex;
    gap: 8px;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(10px);
    padding: 6px;
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.auth-lang-btn {
    padding: 8px 14px;
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    border-radius: 20px;
    transition: all 0.3s ease;
}

.auth-lang-btn:hover {
    color: var(--gold-400);
}

.auth-lang-btn.active {
    background: var(--gold-400);
    color: var(--dark-900);
}

/* ─────────────────────────────────────────────────────────────────────────────
   4. LOGIN PAGE
   ───────────────────────────────────────────────────────────────────────────── */
.login-container {
    position: relative;
    z-index: 10;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    gap: 20px;
}

.login-card {
    background: rgba(20, 20, 25, 0.85);
    backdrop-filter: blur(20px);
    border-radius: 24px;
    padding: 40px 32px;
    width: 100%;
    max-width: 400px;
    border: 1px solid rgba(201, 169, 97, 0.2);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.logo-section {
    text-align: center;
    margin-bottom: 32px;
}

.logo-section img {
    width: 80px;
    height: auto;
    margin-bottom: 16px;
    filter: drop-shadow(0 4px 20px rgba(201, 169, 97, 0.3));
}

.logo-section h1 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 8px;
}

.logo-section p {
    font-size: 0.9rem;
    color: var(--white-80);
}

.error-message {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #f87171;
    padding: 14px 18px;
    border-radius: 12px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.9rem;
}

.error-message i {
    font-size: 1.1rem;
}

/* Password Toggle */
.password-toggle {
    position: relative;
}

.password-toggle .form-input {
    padding-right: 50px;
}

.password-toggle-btn {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--white-60);
    cursor: pointer;
    padding: 8px;
    transition: color 0.3s ease;
}

.password-toggle-btn:hover {
    color: var(--gold-400);
}

/* Remember Me */
.remember-me-group {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0;
    cursor: pointer;
}

.remember-me-checkbox {
    width: 20px;
    height: 20px;
    accent-color: var(--gold-400);
    cursor: pointer;
}

.remember-me-label {
    font-size: 0.9rem;
    color: var(--white-80);
}

/* Login Button */
.btn-login {
    width: 100%;
    padding: 16px 24px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--dark-900);
    background: linear-gradient(135deg, var(--gold-400) 0%, var(--gold-500) 100%);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(201, 169, 97, 0.3);
}

.btn-login:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(201, 169, 97, 0.4);
}

.btn-login:active {
    transform: translateY(0);
}

.login-footer {
    text-align: center;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.login-footer a {
    color: var(--gold-400);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.3s ease;
}

.login-footer a:hover {
    color: var(--gold-300);
    text-decoration: underline;
}

/* Register CTA Box */
.register-cta-box {
    background: rgba(20, 20, 25, 0.7);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 20px 24px;
    width: 100%;
    max-width: 400px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.register-cta-text {
    font-size: 0.9rem;
    color: var(--white-80);
}

.register-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: transparent;
    border: 2px solid var(--gold-400);
    color: var(--gold-400);
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.register-cta-btn:hover {
    background: var(--gold-400);
    color: var(--dark-900);
}

/* ─────────────────────────────────────────────────────────────────────────────
   5. REGISTER PAGE
   ───────────────────────────────────────────────────────────────────────────── */
.register-container {
    position: relative;
    z-index: 10;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px 40px;
}

.register-logo {
    text-align: center;
    margin-bottom: 24px;
}

.register-logo img {
    width: 70px;
    height: auto;
    margin-bottom: 12px;
    filter: drop-shadow(0 4px 20px rgba(201, 169, 97, 0.3));
}

.register-logo h1 {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 8px;
}

.register-subtitle {
    font-size: 0.9rem;
    color: var(--white-80);
}

.register-card {
    background: rgba(20, 20, 25, 0.85);
    backdrop-filter: blur(20px);
    border-radius: 24px;
    padding: 32px 28px;
    width: 100%;
    max-width: 420px;
    border: 1px solid rgba(201, 169, 97, 0.2);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.alert-error {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #f87171;
    padding: 14px 18px;
    border-radius: 12px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.9rem;
}

.password-input-wrapper {
    position: relative;
}

.password-input-wrapper .form-input {
    padding-right: 50px;
}

.toggle-password {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--white-60);
    cursor: pointer;
    padding: 8px;
    transition: color 0.3s ease;
}

.toggle-password:hover {
    color: var(--gold-400);
}

/* RGPD Checkbox */
.rgpd-consent {
    margin: 20px 0;
}

.checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    font-size: 0.85rem;
    line-height: 1.6;
}

.checkbox-label input[type="checkbox"] {
    width: 20px;
    height: 20px;
    min-width: 20px;
    margin-top: 2px;
    accent-color: var(--gold-400);
    cursor: pointer;
}

.checkbox-text {
    color: var(--white-80);
}

.checkbox-text a {
    color: var(--gold-400);
    text-decoration: underline;
}

.checkbox-text a:hover {
    color: var(--gold-300);
}

.checkbox-text .required,
.form-label .required {
    color: #f87171;
}

/* Features List */
.features-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 24px 0;
    padding: 20px;
    background: rgba(201, 169, 97, 0.08);
    border-radius: 12px;
    border: 1px solid rgba(201, 169, 97, 0.15);
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.9rem;
    color: var(--white-80);
}

.feature-item i {
    color: var(--gold-400);
    font-size: 1rem;
}

/* Register Button */
.btn-register {
    width: 100%;
    padding: 16px 24px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--dark-900);
    background: linear-gradient(135deg, var(--gold-400) 0%, var(--gold-500) 100%);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(201, 169, 97, 0.3);
}

.btn-register:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(201, 169, 97, 0.4);
}

.register-footer {
    text-align: center;
    margin-top: 24px;
    font-size: 0.9rem;
    color: var(--white-80);
}

.register-footer a {
    color: var(--gold-400);
    text-decoration: none;
    font-weight: 600;
    margin-left: 6px;
}

.register-footer a:hover {
    text-decoration: underline;
}

/* ─────────────────────────────────────────────────────────────────────────────
   6. CLIENT HEADER
   ───────────────────────────────────────────────────────────────────────────── */
.client-header {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: rgba(15, 15, 20, 0.85);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.client-header .logo {
    display: flex;
    align-items: center;
    gap: 12px;
}

.client-header .logo-image {
    width: 40px;
    height: auto;
}

.client-header .logo h1 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--gold-400);
    margin: 0;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.header-lang-selector {
    display: flex;
    gap: 4px;
    background: rgba(255, 255, 255, 0.05);
    padding: 4px;
    border-radius: 20px;
}

.header-lang-btn {
    padding: 6px 10px;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--white-60);
    text-decoration: none;
    border-radius: 16px;
    transition: all 0.3s ease;
}

.header-lang-btn.active {
    background: var(--gold-400);
    color: var(--dark-900);
}

.header-whatsapp-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #25D366;
    color: white;
    border-radius: 50%;
    text-decoration: none;
    font-size: 1.2rem;
    transition: transform 0.3s ease;
}

.header-whatsapp-btn:hover {
    transform: scale(1.1);
}

.user-badge {
    text-decoration: none;
}

.user-avatar {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--gold-400) 0%, var(--gold-500) 100%);
    color: var(--dark-900);
    font-weight: 700;
    font-size: 1rem;
    border-radius: 50%;
    transition: transform 0.3s ease;
}

.user-badge:hover .user-avatar {
    transform: scale(1.1);
}

/* ─────────────────────────────────────────────────────────────────────────────
   7. HERO CARD (Dashboard welcome)
   ───────────────────────────────────────────────────────────────────────────── */
.hero-card {
    position: relative;
    z-index: 10;
    margin: 20px;
    padding: 24px;
    background: linear-gradient(135deg, rgba(201, 169, 97, 0.2) 0%, rgba(201, 169, 97, 0.05) 100%);
    border-radius: 20px;
    border: 1px solid rgba(201, 169, 97, 0.3);
}

.hero-card h2 {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 8px;
}

.hero-card p {
    font-size: 0.9rem;
    color: var(--white-80);
    margin: 0;
}

/* ─────────────────────────────────────────────────────────────────────────────
   8. INSTALL PROMPT (PWA)
   ───────────────────────────────────────────────────────────────────────────── */
.install-prompt {
    position: relative;
    z-index: 10;
    margin: 0 20px 20px;
    padding: 16px;
    background: rgba(25, 25, 35, 0.9);
    border-radius: 16px;
    border: 1px solid rgba(201, 169, 97, 0.2);
}

.install-prompt-content {
    display: flex;
    align-items: center;
    gap: 16px;
}

.install-prompt-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--gold-400) 0%, var(--gold-500) 100%);
    color: var(--dark-900);
    border-radius: 12px;
    font-size: 1.3rem;
}

.install-prompt-text {
    flex: 1;
}

.install-prompt-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--white);
    margin-bottom: 4px;
}

.install-prompt-desc {
    font-size: 0.8rem;
    color: var(--white-60);
}

.install-prompt-btn {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gold-400);
    color: var(--dark-900);
    border-radius: 50%;
    text-decoration: none;
    font-size: 1rem;
    transition: transform 0.3s ease;
}

.install-prompt-btn:hover {
    transform: scale(1.1);
}

.install-prompt-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    color: var(--white-60);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 0.8rem;
    transition: all 0.3s ease;
}

.install-prompt-close:hover {
    background: rgba(255, 255, 255, 0.2);
    color: var(--white);
}

/* ─────────────────────────────────────────────────────────────────────────────
   9. STATS GRID
   ───────────────────────────────────────────────────────────────────────────── */
.stats-grid {
    position: relative;
    z-index: 10;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin: 0 20px 20px;
}

.stat-card {
    background: rgba(25, 25, 35, 0.8);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 20px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-2px);
    border-color: rgba(201, 169, 97, 0.3);
}

.stat-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
    background: rgba(201, 169, 97, 0.15);
    color: var(--gold-400);
    border-radius: 12px;
    font-size: 1.2rem;
}

.stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 4px;
}

.stat-label {
    font-size: 0.8rem;
    color: var(--white-60);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   10. NEXT EVENT BANNER
   ───────────────────────────────────────────────────────────────────────────── */
.next-event-banner {
    position: relative;
    z-index: 10;
    margin: 0 20px 20px;
    padding: 24px;
    background: linear-gradient(135deg, rgba(201, 169, 97, 0.15) 0%, rgba(201, 169, 97, 0.05) 100%);
    border-radius: 20px;
    border: 1px solid rgba(201, 169, 97, 0.25);
}

.next-event-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.next-event-header h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--gold-400);
    margin: 0;
}

.next-event-countdown {
    padding: 6px 14px;
    background: var(--gold-400);
    color: var(--dark-900);
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 20px;
}

.next-event-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 12px;
}

.next-event-info {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 16px;
}

.next-event-info div {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--white-80);
}

.next-event-info i {
    color: var(--gold-400);
}

.next-event-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: var(--gold-400);
    color: var(--dark-900);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 10px;
    transition: all 0.3s ease;
}

.next-event-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(201, 169, 97, 0.4);
}

/* ─────────────────────────────────────────────────────────────────────────────
   11. QUICK ACTIONS
   ───────────────────────────────────────────────────────────────────────────── */
.quick-actions {
    position: relative;
    z-index: 10;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin: 0 20px 20px;
}

.quick-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 24px 16px;
    background: rgba(25, 25, 35, 0.8);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    text-decoration: none;
    transition: all 0.3s ease;
}

.quick-action:hover {
    transform: translateY(-4px);
    border-color: rgba(201, 169, 97, 0.4);
}

.quick-action-icon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    color: var(--white-80);
    border-radius: 14px;
    font-size: 1.4rem;
    transition: all 0.3s ease;
}

.quick-action:hover .quick-action-icon {
    background: rgba(201, 169, 97, 0.2);
    color: var(--gold-400);
}

.quick-action-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--white);
    text-align: center;
}

/* Quick Action Variants */
.quick-action--gold {
    border-color: rgba(201, 169, 97, 0.3);
    background: linear-gradient(135deg, rgba(201, 169, 97, 0.15) 0%, rgba(201, 169, 97, 0.05) 100%);
}

.quick-action--gold .quick-action-icon {
    background: rgba(201, 169, 97, 0.2);
    color: var(--gold-400);
}

.quick-action--green .quick-action-icon {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.quick-action--purple .quick-action-icon {
    background: rgba(168, 85, 247, 0.15);
    color: #a855f7;
}

/* ─────────────────────────────────────────────────────────────────────────────
   12. EVENT MINI CARDS
   ───────────────────────────────────────────────────────────────────────────── */
.event-mini-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: rgba(25, 25, 35, 0.6);
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    text-decoration: none;
    transition: all 0.3s ease;
}

.event-mini-card:hover {
    background: rgba(25, 25, 35, 0.8);
    border-color: rgba(201, 169, 97, 0.3);
}

.event-date-box {
    min-width: 50px;
    text-align: center;
    padding: 10px;
    background: rgba(201, 169, 97, 0.15);
    border-radius: 10px;
}

.event-date-day {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--gold-400);
    line-height: 1;
}

.event-date-month {
    font-size: 0.7rem;
    color: var(--white-60);
    text-transform: uppercase;
    margin-top: 4px;
}

.event-mini-content {
    flex: 1;
    min-width: 0;
}

.event-mini-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--white);
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.event-mini-type {
    font-size: 0.8rem;
    color: var(--white-60);
}

/* Status Badges */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.badge.confirmed {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.badge.pending {
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
}

/* ─────────────────────────────────────────────────────────────────────────────
   13. EMPTY STATE
   ───────────────────────────────────────────────────────────────────────────── */
.empty-state {
    text-align: center;
    padding: 40px 20px;
}

.empty-state-icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--white-60);
    border-radius: 50%;
    font-size: 1.8rem;
}

.empty-state p {
    color: var(--white-60);
    font-size: 0.9rem;
}

/* ─────────────────────────────────────────────────────────────────────────────
   14. BOTTOM NAVIGATION
   ───────────────────────────────────────────────────────────────────────────── */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    display: flex;
    justify-content: space-around;
    padding: 12px 16px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
    background: rgba(15, 15, 20, 0.95);
    backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    color: var(--white-60);
    text-decoration: none;
    font-size: 0.7rem;
    font-weight: 500;
    border-radius: 12px;
    transition: all 0.3s ease;
}

.nav-item i {
    font-size: 1.3rem;
}

.nav-item.active,
.nav-item:hover {
    color: var(--gold-400);
}

.nav-item.active {
    background: rgba(201, 169, 97, 0.1);
}

/* ─────────────────────────────────────────────────────────────────────────────
   15. SECTION TITLES
   ───────────────────────────────────────────────────────────────────────────── */
.section {
    position: relative;
    z-index: 10;
    margin: 0 20px 20px;
}

.section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.section-title h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--white);
    margin: 0;
}

.section-title a {
    font-size: 0.85rem;
    color: var(--gold-400);
    text-decoration: none;
}

.section-title a:hover {
    text-decoration: underline;
}

/* ─────────────────────────────────────────────────────────────────────────────
   16. FADE IN ANIMATION
   ───────────────────────────────────────────────────────────────────────────── */
.fade-in {
    animation: fadeInUp 0.6s ease forwards;
    opacity: 0;
}

.fade-in:nth-child(1) { animation-delay: 0.1s; }
.fade-in:nth-child(2) { animation-delay: 0.2s; }
.fade-in:nth-child(3) { animation-delay: 0.3s; }
.fade-in:nth-child(4) { animation-delay: 0.4s; }
.fade-in:nth-child(5) { animation-delay: 0.5s; }

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   17. CLIENT FORM OVERRIDES
   ───────────────────────────────────────────────────────────────────────────── */
.client-page .form-group {
    margin-bottom: 20px;
}

.client-page .form-label {
    display: block;
    margin-bottom: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--white-80);
}

.client-page .form-label i {
    margin-right: 8px;
    color: var(--gold-400);
}

.client-page .form-input {
    width: 100%;
    padding: 14px 16px;
    font-size: 1rem;
    color: var(--white);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    transition: all 0.3s ease;
}

.client-page .form-input:focus {
    outline: none;
    border-color: var(--gold-400);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 3px rgba(201, 169, 97, 0.15);
}

.client-page .form-input::placeholder {
    color: var(--white-60);
}

/* ─────────────────────────────────────────────────────────────────────────────
   18. RESPONSIVE ADJUSTMENTS
   ───────────────────────────────────────────────────────────────────────────── */
@media (min-width: 768px) {
    .stats-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .quick-actions {
        grid-template-columns: repeat(4, 1fr);
    }

    .login-card,
    .register-card {
        padding: 48px 40px;
    }
}

@media (max-width: 380px) {
    .login-card,
    .register-card {
        padding: 28px 20px;
    }

    .stat-value {
        font-size: 1.3rem;
    }

    .quick-action {
        padding: 20px 12px;
    }

    .quick-action-icon {
        width: 44px;
        height: 44px;
        font-size: 1.2rem;
    }
}
/* ─────────────────────────────────────────────────────────────────────────────
   BOOK MEETING PAGE
   ───────────────────────────────────────────────────────────────────────────── */

.booking-section {
    padding: 20px;
    padding-bottom: 100px;
    position: relative;
    z-index: 10;
}

.meeting-types {
    display: grid;
    gap: 12px;
    margin-bottom: 24px;
}

.meeting-type-card {
    background: rgba(25, 25, 35, 0.8);
    backdrop-filter: blur(20px);
    border-radius: 16px;
    padding: 20px;
    border: 2px solid rgba(201, 169, 97, 0.15);
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: start;
    gap: 16px;
}

.meeting-type-card:hover {
    border-color: var(--gold-400);
    transform: translateY(-2px);
    box-shadow: var(--shadow-gold);
}

.meeting-type-card.selected {
    border-color: var(--gold-400);
    background: linear-gradient(145deg, rgba(201, 169, 97, 0.2) 0%, rgba(201, 169, 97, 0.1) 100%);
}

.meeting-type-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    background: rgba(201, 169, 97, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: var(--gold-400);
    flex-shrink: 0;
}

.meeting-type-content {
    flex: 1;
}

.meeting-type-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 4px;
}

.meeting-type-duration {
    font-size: 13px;
    color: var(--gold-400);
    margin-bottom: 6px;
}

.meeting-type-desc {
    font-size: 13px;
    color: var(--white-80);
    line-height: 1.5;
}

.form-card {
    background: rgba(25, 25, 35, 0.8);
    backdrop-filter: blur(20px);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 20px;
    box-shadow: var(--shadow-md);
    border: 1px solid rgba(201, 169, 97, 0.15);
}

.form-card h2,
.form-card h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 16px;
}

.form-card h2 i,
.form-card h3 i {
    margin-right: 8px;
    color: var(--gold-400);
}

.form-card p {
    font-size: 14px;
    color: var(--white-80);
    margin-bottom: 20px;
}

.slots-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
    margin-top: 16px;
}

.slot-btn {
    padding: 12px;
    background: rgba(40, 40, 50, 0.8);
    border: 2px solid rgba(201, 169, 97, 0.2);
    border-radius: 10px;
    color: var(--white);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    text-align: center;
}

.slot-btn:hover {
    border-color: var(--gold-400);
    background: rgba(50, 50, 60, 0.8);
}

.slot-btn.selected {
    background: linear-gradient(135deg, var(--gold-400) 0%, var(--gold-500) 100%);
    border-color: var(--gold-400);
    color: var(--dark-900);
}

.slot-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.loading-slots {
    text-align: center;
    padding: 40px;
    color: var(--white-80);
}

.action-buttons {
    position: fixed;
    bottom: 70px;
    left: 0;
    right: 0;
    padding: 16px 20px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
    background: rgba(15, 15, 20, 0.95);
    backdrop-filter: blur(20px);
    border-top: 1px solid rgba(201, 169, 97, 0.2);
    display: flex;
    gap: 12px;
    z-index: 99;
}

.action-buttons .btn-cancel {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 14px;
    color: var(--white);
    font-size: 1.2rem;
    text-decoration: none;
    transition: all 0.3s ease;
}

.action-buttons .btn-cancel:hover {
    background: rgba(255, 255, 255, 0.15);
}

.action-buttons .btn-submit {
    flex: 1;
    padding: 16px 24px;
    background: linear-gradient(135deg, var(--gold-400) 0%, var(--gold-500) 100%);
    border: none;
    border-radius: 14px;
    color: var(--dark-900);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.3s ease;
}

.action-buttons .btn-submit:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(201, 169, 97, 0.4);
}

.action-buttons .btn-submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* WhatsApp Widget */
.whatsapp-widget {
    position: fixed;
    bottom: 150px;
    right: 20px;
    z-index: 98;
}

.whatsapp-button {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #25D366;
    color: white;
    border-radius: 50%;
    font-size: 1.6rem;
    text-decoration: none;
    box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
    transition: all 0.3s ease;
}

.whatsapp-button:hover {
    transform: scale(1.1);
}

.whatsapp-tooltip {
    position: absolute;
    right: 70px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.9);
    color: white;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 0.8rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.whatsapp-button:hover .whatsapp-tooltip {
    opacity: 1;
}

/* Alert Messages */
.alert-error {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #f87171;
    padding: 14px 18px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.9rem;
}

.alert-error i {
    font-size: 1.1rem;
}

/* Form Elements for Client Area */
.form-select {
    width: 100%;
    padding: 14px 16px;
    font-size: 1rem;
    color: var(--white);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    transition: all 0.3s ease;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23C9A961' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
}

.form-select:focus {
    outline: none;
    border-color: var(--gold-400);
    box-shadow: 0 0 0 3px rgba(201, 169, 97, 0.15);
}

.form-textarea {
    width: 100%;
    padding: 14px 16px;
    font-size: 1rem;
    color: var(--white);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    resize: vertical;
    min-height: 100px;
    font-family: inherit;
    transition: all 0.3s ease;
}

.form-textarea:focus {
    outline: none;
    border-color: var(--gold-400);
    box-shadow: 0 0 0 3px rgba(201, 169, 97, 0.15);
}

.form-textarea::placeholder {
    color: var(--white-60);
}

/* Utility classes for client area */
.back-link {
    color: var(--white);
    text-decoration: none;
    font-size: 1.2rem;
    padding: 8px;
    transition: color 0.3s ease;
}

.back-link:hover {
    color: var(--gold-400);
}

.user-badge-link {
    text-decoration: none;
}

.mb-20 { margin-bottom: 20px; }
.mb-24 { margin-bottom: 24px; }
/* ─────────────────────────────────────────────────────────────────────────────
   MY MEETINGS PAGE
   ───────────────────────────────────────────────────────────────────────────── */
        .meetings-container {
            padding: 20px;
            padding-bottom: 100px;
            position: relative;
            z-index: 10;
        }

        .logo {
            text-align: center;
            margin-bottom: 24px;
        }

        .logo-image {
            height: 50px;
            width: auto;
            margin-bottom: 12px;
            filter: drop-shadow(0 4px 20px rgba(201, 169, 97, 0.3));
        }

        .logo h1 {
            font-size: 24px;
            font-weight: 800;
            background: linear-gradient(135deg, var(--gold-400), var(--gold-500));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            margin: 0;
        }

        .section-header {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 20px;
            padding-bottom: 12px;
            border-bottom: 2px solid rgba(201, 169, 97, 0.3);
        }

        .section-header i {
            color: var(--gold-400);
            font-size: 20px;
        }

        .section-header h2 {
            font-size: 18px;
            font-weight: 700;
            color: var(--white);
            margin: 0;
        }

        .section-header .count {
            background: var(--gold-400);
            color: white;
            padding: 4px 10px;
            border-radius: 20px;
            font-size: 13px;
            font-weight: 700;
        }

        .meeting-card {
            background: linear-gradient(145deg, rgba(25, 25, 35, 0.8) 0%, rgba(35, 35, 45, 0.8) 100%);
            backdrop-filter: blur(20px) saturate(180%);
            -webkit-backdrop-filter: blur(20px) saturate(180%);
            border-radius: 16px;
            padding: 20px;
            margin-bottom: 16px;
            border: 1px solid rgba(201, 169, 97, 0.2);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
            transition: all 0.3s;
        }

        .meeting-card:active {
            transform: scale(0.98);
        }

        .meeting-header {
            display: flex;
            align-items: flex-start;
            gap: 16px;
            margin-bottom: 16px;
        }

        .meeting-icon {
            width: 48px;
            height: 48px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            color: white;
            flex-shrink: 0;
        }

        .meeting-info {
            flex: 1;
        }

        .meeting-type {
            font-size: 16px;
            font-weight: 700;
            color: var(--white);
            margin-bottom: 4px;
        }

        .meeting-datetime {
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: 14px;
            color: var(--white-80);
            margin-bottom: 8px;
        }

        .meeting-datetime i {
            color: var(--gold-400);
            width: 16px;
        }

        .meeting-status {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 12px;
            border-radius: 8px;
            font-size: 13px;
            font-weight: 600;
            margin-top: 8px;
        }

        .meeting-details {
            display: grid;
            gap: 10px;
            margin-top: 16px;
            padding-top: 16px;
            border-top: 1px solid rgba(201, 169, 97, 0.2);
        }

        .meeting-detail {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            font-size: 14px;
        }

        .meeting-detail i {
            color: var(--gold-400);
            width: 16px;
            margin-top: 2px;
        }

        .meeting-detail-content {
            flex: 1;
            color: var(--white-80);
        }

        .meeting-detail-label {
            font-weight: 600;
            color: var(--white);
            margin-bottom: 2px;
        }

        .meeting-actions {
            display: flex;
            gap: 10px;
            margin-top: 16px;
        }

        .btn-meet {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 12px;
            background: linear-gradient(135deg, var(--gold-400) 0%, var(--gold-dark) 100%);
            color: white;
            text-decoration: none;
            border-radius: 10px;
            font-weight: 600;
            font-size: 14px;
            box-shadow: var(--shadow-gold);
            transition: all 0.3s;
            border: none;
            cursor: pointer;
        }

        .btn-meet:active {
            transform: scale(0.98);
        }

        .btn-cancel {
            padding: 12px;
            background: rgba(239, 68, 68, 0.15);
            color: #EF4444;
            border: 1px solid rgba(239, 68, 68, 0.3);
            border-radius: 10px;
            font-weight: 600;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.3s;
        }

        .btn-cancel:active {
            transform: scale(0.98);
        }

        .empty-state {
            text-align: center;
            padding: 60px 20px;
        }

        .empty-state i {
            font-size: 64px;
            color: rgba(201, 169, 97, 0.3);
            margin-bottom: 20px;
        }

        .empty-state h3 {
            font-size: 18px;
            font-weight: 700;
            color: var(--white);
            margin-bottom: 8px;
        }

        .empty-state p {
            font-size: 14px;
            color: var(--white-80);
            margin-bottom: 24px;
        }

        .btn-book-new {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 14px 24px;
            background: linear-gradient(135deg, var(--gold-400) 0%, var(--gold-dark) 100%);
            color: white;
            text-decoration: none;
            border-radius: 12px;
            font-weight: 700;
            box-shadow: var(--shadow-gold);
            transition: all 0.3s;
        }

        .btn-book-new:active {
            transform: scale(0.98);
        }

/* Additional utility classes */
.mt-40 { margin-top: 40px; }
.opacity-80 { opacity: 0.8; }

/* ─────────────────────────────────────────────────────────────────────────────
   SERVICES SELECTOR COMPONENT
   ───────────────────────────────────────────────────────────────────────────── */
.services-section {
    margin: 20px 0;
}

.service-category {
    background: linear-gradient(145deg, rgba(25, 25, 35, 0.8) 0%, rgba(35, 35, 45, 0.8) 100%);
    backdrop-filter: blur(20px) saturate(180%);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 16px;
    border: 1px solid rgba(201, 169, 97, 0.15);
}

.service-category-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
}

.service-category-title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 17px;
    font-weight: 700;
    color: var(--white);
}

.service-category-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(201, 169, 97, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold-400);
    font-size: 18px;
}

.service-toggle-icon {
    color: var(--gold-400);
    transition: transform 0.3s;
    font-size: 14px;
}

.service-toggle-icon.open {
    transform: rotate(180deg);
}

.service-content {
    display: none;
    margin-top: 20px;
}

.service-content.open {
    display: block;
}

.sub-services-grid {
    display: grid;
    gap: 12px;
}

.sub-service-item {
    position: relative;
    background: rgba(28, 28, 30, 0.4);
    border: 2px solid rgba(201, 169, 97, 0.15);
    border-radius: 12px;
    padding: 16px;
    cursor: pointer;
    transition: all 0.2s;
}

.sub-service-item:hover {
    border-color: rgba(201, 169, 97, 0.4);
    background: rgba(28, 28, 30, 0.6);
}

.sub-service-item.selected {
    border-color: var(--gold-400);
    background: rgba(201, 169, 97, 0.15);
    box-shadow: 0 4px 16px rgba(201, 169, 97, 0.2);
}

.sub-service-checkbox {
    position: absolute;
    opacity: 0;
}

.sub-service-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}

.sub-service-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--white);
    flex: 1;
}

.sub-service-price {
    font-size: 18px;
    font-weight: 700;
    color: var(--gold-400);
    white-space: nowrap;
    margin-left: 12px;
}

.sub-service-description {
    font-size: 13px;
    color: var(--white-80);
    line-height: 1.5;
    margin-top: 6px;
}

.sub-service-quantity {
    display: none;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(201, 169, 97, 0.2);
}

.sub-service-item.selected .sub-service-quantity {
    display: flex;
    align-items: center;
    gap: 12px;
}

.quantity-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--white-80);
}

.quantity-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.quantity-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(201, 169, 97, 0.2);
    border: 1px solid rgba(201, 169, 97, 0.3);
    color: var(--gold-400);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.quantity-btn:hover {
    background: rgba(201, 169, 97, 0.3);
    border-color: var(--gold-400);
}

.quantity-value {
    min-width: 32px;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    color: var(--white);
}

.services-total {
    position: sticky;
    bottom: 80px;
    background: linear-gradient(145deg, rgba(25, 25, 35, 0.8) 0%, rgba(35, 35, 45, 0.8) 100%);
    backdrop-filter: blur(20px) saturate(180%);
    border: 2px solid var(--gold-400);
    border-radius: 16px;
    padding: 16px 20px;
    margin: 20px 0;
    box-shadow: 0 8px 32px rgba(201, 169, 97, 0.3);
}

.services-total-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.services-total-label {
    font-size: 16px;
    font-weight: 600;
    color: var(--white-80);
}

.services-total-amount {
    font-size: 24px;
    font-weight: 700;
    background: var(--gold-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.selected-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    background: var(--gold-gradient);
    color: white;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 700;
    padding: 0 8px;
    margin-left: 8px;
}

/* Text utility classes */
.text-sm { font-size: 13px; }
.text-xs { font-size: 10px; }
.text-muted { color: var(--white-60); }
.text-right { text-align: right; }
.mt-2 { margin-top: 2px; }
.mt-8 { margin-top: 8px; }
.mb-16 { margin-bottom: 16px; }
.input-transparent { 
    border: none; 
    background: transparent; 
}
/* ═══════════════════════════════════════════════════════════════════════════
   EVENTS PAGE STYLES
   ═══════════════════════════════════════════════════════════════════════════ */

/* New Event Button */
.new-event-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 20px;
    padding: 16px 24px;
    background: linear-gradient(135deg, var(--gold-400) 0%, var(--gold-500) 100%);
    color: var(--dark-900);
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 14px;
    position: relative;
    z-index: 10;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(201, 169, 97, 0.3);
}

.new-event-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(201, 169, 97, 0.4);
}

.new-event-btn i {
    font-size: 1.1rem;
}

/* Tabs Container */
.tabs-container {
    position: relative;
    z-index: 10;
    margin: 0 20px 20px;
}

.tabs {
    display: flex;
    background: rgba(25, 25, 35, 0.8);
    backdrop-filter: blur(20px);
    border-radius: 14px;
    padding: 6px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 16px;
    background: transparent;
    border: none;
    border-radius: 10px;
    color: var(--white-60);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.tab:hover {
    color: var(--white);
}

.tab.active {
    background: rgba(201, 169, 97, 0.2);
    color: var(--gold-400);
}

.tab i {
    font-size: 1rem;
}

.tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    background: rgba(255, 255, 255, 0.15);
    color: var(--white-80);
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 11px;
}

.tab.active .tab-badge {
    background: var(--gold-400);
    color: var(--dark-900);
}

/* Tab Content */
.tab-content {
    display: none;
    position: relative;
    z-index: 10;
}

.tab-content.active {
    display: block;
}

.tab-content-padded {
    padding: 0 20px;
}

/* Event Card */
.event-card {
    background: rgba(25, 25, 35, 0.85);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    margin-bottom: 16px;
    border: 1px solid rgba(201, 169, 97, 0.15);
    overflow: hidden;
    transition: all 0.3s ease;
}

.event-card:hover {
    border-color: rgba(201, 169, 97, 0.3);
    transform: translateY(-2px);
}

/* Event Header */
.event-header {
    background: linear-gradient(135deg, rgba(201, 169, 97, 0.15) 0%, rgba(201, 169, 97, 0.05) 100%);
    padding: 20px;
    border-bottom: 1px solid rgba(201, 169, 97, 0.1);
}

.event-header.past {
    background: linear-gradient(135deg, rgba(100, 100, 110, 0.15) 0%, rgba(100, 100, 110, 0.05) 100%);
}

.event-date {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--gold-400);
    margin-bottom: 8px;
}

.event-header.past .event-date {
    color: var(--white-60);
}

.event-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 10px;
}

.event-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: 20px;
}

.event-status i {
    font-size: 0.75rem;
}

/* Pending status */
.event-status:has(.fa-clock) {
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
}

/* Event Body */
.event-body {
    padding: 20px;
}

.event-info {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.event-info-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.event-info-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(201, 169, 97, 0.1);
    color: var(--gold-400);
    border-radius: 10px;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.event-info-content {
    flex: 1;
}

.event-info-label {
    font-size: 0.75rem;
    color: var(--white-60);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

.event-info-value {
    font-size: 0.95rem;
    color: var(--white);
    font-weight: 500;
}

/* Event Actions */
.event-actions {
    display: flex;
    gap: 10px;
    padding: 16px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.event-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 10px;
    transition: all 0.3s ease;
}

.event-btn-primary {
    background: linear-gradient(135deg, var(--gold-400) 0%, var(--gold-500) 100%);
    color: var(--dark-900);
}

.event-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(201, 169, 97, 0.4);
}

.event-btn-secondary {
    background: rgba(255, 255, 255, 0.08);
    color: var(--white);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.event-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.2);
}

.event-btn-full {
    flex: none;
    width: 100%;
}

/* Empty State Extensions */
.empty-state-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--white);
    margin-bottom: 8px;
}

.empty-state-text {
    font-size: 0.9rem;
    color: var(--white-60);
    line-height: 1.6;
}

.empty-state-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    padding: 14px 24px;
    background: linear-gradient(135deg, var(--gold-400) 0%, var(--gold-500) 100%);
    color: var(--dark-900);
    font-weight: 600;
    text-decoration: none;
    border-radius: 12px;
    transition: all 0.3s ease;
}

.empty-state-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(201, 169, 97, 0.4);
}
/* ═══════════════════════════════════════════════════════════════════════════
   INVOICES PAGE STYLES
   ═══════════════════════════════════════════════════════════════════════════ */

/* Three columns tabs variant */
.tabs.three-cols .tab {
    padding: 12px 10px;
    font-size: 0.85rem;
}

/* Financial Summary */
.financial-summary {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin: 0 20px 20px;
    position: relative;
    z-index: 10;
}

.summary-item {
    background: rgba(25, 25, 35, 0.85);
    backdrop-filter: blur(20px);
    border-radius: 16px;
    padding: 20px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.summary-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.8rem;
    color: var(--white-60);
    margin-bottom: 10px;
}

.summary-label i {
    font-size: 0.9rem;
}

.summary-item:first-child .summary-label i {
    color: #fbbf24;
}

.summary-item:last-child .summary-label i {
    color: #22c55e;
}

.summary-amount {
    font-size: 1.5rem;
    font-weight: 700;
    color: #fbbf24;
    margin-bottom: 6px;
}

.summary-amount.paid {
    color: #22c55e;
}

.summary-count {
    font-size: 0.8rem;
    color: var(--white-60);
}

/* Invoice Card */
.invoice-card {
    background: rgba(25, 25, 35, 0.85);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    margin-bottom: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    overflow: hidden;
    transition: all 0.3s ease;
}

.invoice-card:hover {
    border-color: rgba(201, 169, 97, 0.3);
}

/* Invoice Header */
.invoice-header {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.15) 0%, rgba(34, 197, 94, 0.05) 100%);
    padding: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.invoice-header.unpaid {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.15) 0%, rgba(251, 191, 36, 0.05) 100%);
}

.invoice-header.partial {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.15) 0%, rgba(168, 85, 247, 0.05) 100%);
}

.invoice-header.overdue {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(239, 68, 68, 0.05) 100%);
}

.invoice-number {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--white-80);
    margin-bottom: 8px;
}

.invoice-number i {
    color: var(--gold-400);
}

.invoice-amount {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 10px;
}

.invoice-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: 20px;
}

.invoice-header.unpaid .invoice-status {
    background: rgba(251, 191, 36, 0.2);
    color: #fbbf24;
}

.invoice-header.partial .invoice-status {
    background: rgba(168, 85, 247, 0.2);
    color: #a855f7;
}

.invoice-header.overdue .invoice-status {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

/* Invoice Body */
.invoice-body {
    padding: 20px;
}

.invoice-info {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.invoice-info-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.invoice-info-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(201, 169, 97, 0.1);
    color: var(--gold-400);
    border-radius: 10px;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.invoice-info-content {
    flex: 1;
}

.invoice-info-label {
    font-size: 0.75rem;
    color: var(--white-60);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

.invoice-info-value {
    font-size: 0.95rem;
    color: var(--white);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Due Date Badges */
.due-badge {
    display: inline-block;
    padding: 3px 8px;
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 10px;
}

.due-badge.ok {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.due-badge.soon {
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
}

.due-badge.overdue {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

/* Invoice Actions */
.invoice-actions {
    display: flex;
    gap: 10px;
    padding: 16px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.invoice-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.08);
    color: var(--white);
}

.invoice-btn:hover {
    background: rgba(255, 255, 255, 0.12);
}

.invoice-btn-primary {
    background: linear-gradient(135deg, var(--gold-400) 0%, var(--gold-500) 100%);
    color: var(--dark-900);
}

.invoice-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(201, 169, 97, 0.4);
}

.invoice-btn-secondary {
    background: #25D366;
    color: white;
}

.invoice-btn-secondary:hover {
    background: #22c55e;
}

.copy-payment-btn {
    flex: 1;
}

.copy-payment-btn.copied {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
}

.copy-payment-btn.copied .copy-text::after {
    content: ' !';
}

/* Alert boxes */
.alert-success {
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: #22c55e;
    padding: 14px 18px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.9rem;
    margin-bottom: 20px;
}

.alert-warning {
    background: rgba(251, 191, 36, 0.15);
    border: 1px solid rgba(251, 191, 36, 0.3);
    color: #fbbf24;
    padding: 14px 18px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.9rem;
    margin-bottom: 20px;
}

.alert-info {
    background: rgba(59, 130, 246, 0.15);
    border: 1px solid rgba(59, 130, 246, 0.3);
    color: #3b82f6;
    padding: 14px 18px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.9rem;
    margin-bottom: 20px;
}

.services-section {
    margin: 20px 0;
}

.service-category {
    background: linear-gradient(145deg, var(--bg-card) 0%, var(--bg-card-light) 100%);
    backdrop-filter: blur(20px) saturate(180%);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 16px;
    border: 1px solid rgba(201, 169, 97, 0.15);
}

.service-category-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
}

.service-category-title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 17px;
    font-weight: 700;
    color: var(--text-primary);
}

.service-category-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(201, 169, 97, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold);
    font-size: 18px;
}

.service-toggle-icon {
    color: var(--gold);
    transition: transform 0.3s;
    font-size: 14px;
}

.service-toggle-icon.open {
    transform: rotate(180deg);
}

.service-content {
    display: none;
    margin-top: 20px;
}

.service-content.open {
    display: block;
}

.sub-services-grid {
    display: grid;
    gap: 12px;
}

.sub-service-item {
    position: relative;
    background: rgba(28, 28, 30, 0.4);
    border: 2px solid rgba(201, 169, 97, 0.15);
    border-radius: 12px;
    padding: 16px;
    cursor: pointer;
    transition: all 0.2s;
}

.sub-service-item:hover {
    border-color: rgba(201, 169, 97, 0.4);
    background: rgba(28, 28, 30, 0.6);
}

.sub-service-item.selected {
    border-color: var(--gold);
    background: rgba(201, 169, 97, 0.15);
    box-shadow: 0 4px 16px rgba(201, 169, 97, 0.2);
}

.sub-service-checkbox {
    position: absolute;
    opacity: 0;
}

.sub-service-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}

.sub-service-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    flex: 1;
}

.sub-service-price {
    font-size: 18px;
    font-weight: 700;
    color: var(--gold);
    white-space: nowrap;
    margin-left: 12px;
}

.sub-service-description {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-top: 6px;
}

.sub-service-quantity {
    display: none;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(201, 169, 97, 0.2);
}

.sub-service-item.selected .sub-service-quantity {
    display: flex;
    align-items: center;
    gap: 12px;
}

.quantity-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
}

.quantity-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.quantity-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(201, 169, 97, 0.2);
    border: 1px solid rgba(201, 169, 97, 0.3);
    color: var(--gold);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.quantity-btn:hover {
    background: rgba(201, 169, 97, 0.3);
    border-color: var(--gold);
}

.quantity-value {
    min-width: 32px;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}

.services-total {
    position: sticky;
    bottom: 80px;
    background: linear-gradient(145deg, var(--bg-card) 0%, var(--bg-card-light) 100%);
    backdrop-filter: blur(20px) saturate(180%);
    border: 2px solid var(--gold);
    border-radius: 16px;
    padding: 16px 20px;
    margin: 20px 0;
    box-shadow: 0 8px 32px rgba(201, 169, 97, 0.3);
}

.services-total-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.services-total-label {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-secondary);
}

.services-total-amount {
    font-size: 24px;
    font-weight: 700;
    background: var(--gold-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.selected-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    background: var(--gold-gradient);
    color: white;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 700;
    padding: 0 8px;
    margin-left: 8px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MEETINGS PAGE STYLES
   ═══════════════════════════════════════════════════════════════════════════ */

/* Meetings Container */
.meetings-container {
    padding: 20px;
    padding-bottom: calc(100px + env(safe-area-inset-bottom));
    position: relative;
    z-index: 10;
}

/* Section Header */
.section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 30px 0 16px;
    padding-left: 4px;
}

.section-header i {
    font-size: 1.1rem;
    color: var(--gold-400);
}

.section-header h2 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--white);
    margin: 0;
}

.section-header .count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 8px;
    background: var(--gold-400);
    color: var(--dark-900);
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 12px;
}

/* Meeting Card */
.meeting-card {
    background: rgba(25, 25, 35, 0.85);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    margin-bottom: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    overflow: hidden;
    transition: all 0.3s ease;
}

.meeting-card:hover {
    border-color: rgba(201, 169, 97, 0.3);
}

.meeting-card.opacity-80 {
    opacity: 0.8;
}

/* Meeting Header */
.meeting-header {
    display: flex;
    gap: 16px;
    padding: 20px;
    background: linear-gradient(135deg, rgba(201, 169, 97, 0.1) 0%, rgba(201, 169, 97, 0.03) 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.meeting-icon {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.meeting-icon i {
    font-size: 1.2rem;
    color: white;
}

.meeting-info {
    flex: 1;
}

.meeting-type {
    font-size: 1rem;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 6px;
}

.meeting-datetime {
    font-size: 0.85rem;
    color: var(--white-70);
    margin-bottom: 4px;
}

.meeting-datetime i {
    width: 16px;
    color: var(--gold-400);
    margin-right: 6px;
}

.meeting-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 16px;
    margin-top: 8px;
}

.meeting-status i {
    font-size: 0.7rem;
}

/* Meeting Details */
.meeting-details {
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.meeting-detail {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.meeting-detail > i {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(201, 169, 97, 0.1);
    color: var(--gold-400);
    border-radius: 8px;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.meeting-detail-content {
    flex: 1;
    font-size: 0.9rem;
    color: var(--white);
    line-height: 1.5;
}

.meeting-detail-label {
    font-size: 0.7rem;
    color: var(--white-60);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

/* Meeting Actions */
.meeting-actions {
    display: flex;
    gap: 10px;
    padding: 16px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.btn-meet {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 20px;
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
    color: white;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-meet:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
}

.btn-cancel {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-cancel:hover {
    background: rgba(239, 68, 68, 0.25);
    border-color: rgba(239, 68, 68, 0.5);
}

.btn-book-new {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    padding: 14px 24px;
    background: linear-gradient(135deg, var(--gold-400) 0%, var(--gold-500) 100%);
    color: var(--dark-900);
    font-weight: 600;
    text-decoration: none;
    border-radius: 12px;
    transition: all 0.3s ease;
}

.btn-book-new:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(201, 169, 97, 0.4);
}

/* Utility for margin-top */
.mt-40 {
    margin-top: 40px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   PROFILE PAGE STYLES
   ═══════════════════════════════════════════════════════════════════════════ */

/* Profile Hero Section */
.profile-hero {
    text-align: center;
    padding: 40px 20px 30px;
    position: relative;
    z-index: 10;
}

.profile-avatar-large {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gold-400) 0%, var(--gold-500) 100%);
    color: var(--dark-900);
    font-size: 2.5rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    box-shadow: 0 8px 30px rgba(201, 169, 97, 0.4);
}

.profile-name {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 6px;
}

.profile-email {
    font-size: 0.9rem;
    color: var(--white-60);
}

/* Info Card */
.info-card {
    background: rgba(25, 25, 35, 0.85);
    backdrop-filter: blur(20px);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    overflow: hidden;
    margin: 0 20px;
}

.info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.info-row:last-child {
    border-bottom: none;
}

.info-label {
    font-size: 0.85rem;
    color: var(--white-60);
}

.info-value {
    font-size: 0.95rem;
    color: var(--white);
    font-weight: 500;
    text-align: right;
}

/* Profile Menu */
.profile-menu {
    margin: 20px;
    background: rgba(25, 25, 35, 0.85);
    backdrop-filter: blur(20px);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    overflow: hidden;
    position: relative;
    z-index: 10;
}

.menu-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.3s ease;
}

.menu-item:last-child {
    border-bottom: none;
}

.menu-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.menu-item.danger {
    color: #ef4444;
}

.menu-item.danger .menu-icon {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.menu-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(201, 169, 97, 0.1);
    color: var(--gold-400);
    border-radius: 12px;
    font-size: 1rem;
    flex-shrink: 0;
}

.menu-content {
    flex: 1;
}

.menu-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--white);
    margin-bottom: 2px;
}

.menu-item.danger .menu-title {
    color: #ef4444;
}

.menu-subtitle {
    font-size: 0.8rem;
    color: var(--white-60);
}

.menu-arrow {
    color: var(--white-40);
    font-size: 1.5rem;
    font-weight: 300;
}

/* Section with title */
.section {
    padding: 30px 20px 16px;
    position: relative;
    z-index: 10;
}

.section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--white);
    margin: 0;
}

.section-title i {
    color: var(--gold-400);
}

/* App Version Footer */
.app-version {
    text-align: center;
    padding: 30px 20px;
    font-size: 0.75rem;
    color: var(--white-40);
    position: relative;
    z-index: 10;
}

.app-version div:first-child {
    margin-bottom: 4px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   BOOKING MEETING PAGE STYLES
   ═══════════════════════════════════════════════════════════════════════════ */

/* Booking Section */
.booking-section {
    padding: 20px;
    padding-bottom: 100px;
    position: relative;
    z-index: 10;
}

/* Meeting Types Selection */
.meeting-types {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
}

.meeting-type-card {
    display: flex;
    gap: 16px;
    padding: 20px;
    background: rgba(25, 25, 35, 0.85);
    backdrop-filter: blur(20px);
    border: 2px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.meeting-type-card:hover {
    border-color: rgba(201, 169, 97, 0.3);
    background: rgba(25, 25, 35, 0.95);
}

.meeting-type-card.selected {
    border-color: var(--gold-400);
    background: rgba(201, 169, 97, 0.1);
    box-shadow: 0 4px 20px rgba(201, 169, 97, 0.2);
}

.meeting-type-icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(201, 169, 97, 0.15);
    color: var(--gold-400);
    border-radius: 14px;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.meeting-type-card.selected .meeting-type-icon {
    background: var(--gold-400);
    color: var(--dark-900);
}

.meeting-type-content {
    flex: 1;
}

.meeting-type-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 4px;
}

.meeting-type-duration {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: var(--gold-400);
    margin-bottom: 6px;
}

.meeting-type-desc {
    font-size: 0.85rem;
    color: var(--white-60);
    line-height: 1.5;
}

/* Form Card */
.form-card {
    background: rgba(25, 25, 35, 0.85);
    backdrop-filter: blur(20px);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.form-card h2,
.form-card h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--white);
    margin: 0 0 12px 0;
}

.form-card h2 i,
.form-card h3 i {
    color: var(--gold-400);
}

.form-card p {
    font-size: 0.9rem;
    color: var(--white-60);
    line-height: 1.5;
    margin: 0;
}

.form-card-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--white);
    margin-bottom: 8px;
}

.form-card-title i {
    color: var(--gold-400);
}

/* Form Inputs */
.form-input,
.form-select,
.form-textarea {
    width: 100%;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: var(--white);
    font-size: 1rem;
    transition: all 0.3s ease;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--gold-400);
    background: rgba(255, 255, 255, 0.08);
}

.form-input::placeholder,
.form-textarea::placeholder {
    color: var(--white-40);
}

.form-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23c9a961' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 24px;
    padding-right: 44px;
}

.form-select option {
    background: #1c1c1e;
    color: var(--white);
}

.form-textarea {
    resize: vertical;
    min-height: 100px;
}

/* Time Slots Grid */
#slotsGrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.slot-btn {
    padding: 14px 12px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: var(--white);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.slot-btn:hover {
    border-color: rgba(201, 169, 97, 0.4);
    background: rgba(201, 169, 97, 0.1);
}

.slot-btn.selected {
    background: var(--gold-400);
    color: var(--dark-900);
    border-color: var(--gold-400);
}

.loading-slots {
    grid-column: 1 / -1;
    text-align: center;
    padding: 20px;
    color: var(--white-60);
}

/* Action Buttons (Fixed Bottom) */
.action-buttons {
    position: fixed;
    bottom: 80px;
    left: 0;
    right: 0;
    padding: 16px 20px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
    background: linear-gradient(to top, rgba(15, 15, 20, 0.98) 0%, rgba(15, 15, 20, 0.9) 100%);
    display: flex;
    gap: 12px;
    z-index: 100;
}

.btn-cancel {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    color: var(--white);
    font-size: 1.1rem;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-cancel:hover {
    background: rgba(255, 255, 255, 0.12);
}

.btn-submit {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 24px;
    background: linear-gradient(135deg, var(--gold-400) 0%, var(--gold-500) 100%);
    color: var(--dark-900);
    font-size: 1rem;
    font-weight: 600;
    border: none;
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-submit:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(201, 169, 97, 0.4);
}

.btn-submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Alert Error */
.alert-error {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #ef4444;
    border-radius: 14px;
    font-size: 0.9rem;
    margin-bottom: 20px;
}

.alert-error i {
    font-size: 1.1rem;
}


/* ═══════════════════════════════════════════════════════════════════════════
   FORM PAGES STYLES (Edit Profile, Change Password, etc.)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Form Section Container */
.form-section {
    padding: 20px;
    padding-bottom: calc(100px + env(safe-area-inset-bottom));
    position: relative;
    z-index: 10;
}

/* Form Group */
.form-group {
    margin-bottom: 20px;
}

.form-group:last-of-type {
    margin-bottom: 24px;
}

.form-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--white);
    margin-bottom: 8px;
}

.form-label i {
    color: var(--gold-400);
    font-size: 0.85rem;
}

.form-hint {
    font-size: 0.8rem;
    color: var(--white-50);
    margin-top: 6px;
}

/* Form Input States */
.form-input:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background: rgba(255, 255, 255, 0.03);
}

/* Section Intro */
.section-intro {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px;
    background: rgba(201, 169, 97, 0.1);
    border-radius: 12px;
    font-size: 0.9rem;
    color: var(--white-80);
    margin-bottom: 24px;
}

.section-intro i {
    color: var(--gold-400);
}

/* Action Buttons for Forms */
.action-buttons {
    display: flex;
    gap: 12px;
    margin-top: 24px;
}

.btn-cancel {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 20px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: var(--white);
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-cancel:hover {
    background: rgba(255, 255, 255, 0.12);
}

.btn-save {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 24px;
    background: linear-gradient(135deg, var(--gold-400) 0%, var(--gold-500) 100%);
    color: var(--dark-900);
    font-size: 0.95rem;
    font-weight: 600;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-save:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(201, 169, 97, 0.4);
}

/* ═══════════════════════════════════════════════════════════════════════════
   NOTIFICATIONS PAGE STYLES
   ═══════════════════════════════════════════════════════════════════════════ */

.notification-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.notification-item:last-of-type {
    border-bottom: none;
}

.notification-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(201, 169, 97, 0.1);
    color: var(--gold-400);
    border-radius: 14px;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.notification-content {
    flex: 1;
}

.notification-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--white);
    margin-bottom: 4px;
}

.notification-desc {
    font-size: 0.8rem;
    color: var(--white-60);
    line-height: 1.4;
}

.notification-toggle {
    flex-shrink: 0;
}

/* Toggle Switch */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 52px;
    height: 30px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 30px;
    transition: all 0.3s ease;
}

.toggle-slider::before {
    position: absolute;
    content: "";
    height: 24px;
    width: 24px;
    left: 3px;
    bottom: 3px;
    background: var(--white);
    border-radius: 50%;
    transition: all 0.3s ease;
}

.toggle-switch input:checked + .toggle-slider {
    background: linear-gradient(135deg, var(--gold-400) 0%, var(--gold-500) 100%);
}

.toggle-switch input:checked + .toggle-slider::before {
    transform: translateX(22px);
}

.toggle-switch input:focus + .toggle-slider {
    box-shadow: 0 0 0 2px rgba(201, 169, 97, 0.3);
}


/* ═══════════════════════════════════════════════════════════════════════════
   EVENT FORMS STYLES (New Event, Edit Event)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Form Intro Section */
.form-intro {
    background: rgba(25, 25, 35, 0.85);
    backdrop-filter: blur(20px);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 20px;
    border: 1px solid rgba(201, 169, 97, 0.2);
    text-align: center;
}

.form-intro h2 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--white);
    margin: 0 0 12px 0;
}

.form-intro h2 i {
    color: var(--gold-400);
}

.form-intro p {
    font-size: 0.9rem;
    color: var(--white-60);
    line-height: 1.6;
    margin: 0;
}

/* Form Row (side-by-side) */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

@media (max-width: 480px) {
    .form-row {
        grid-template-columns: 1fr;
    }
}

/* Required / Optional indicators */
.required {
    color: #ef4444;
    font-weight: 600;
}

.optional {
    font-size: 0.8rem;
    color: var(--white-50);
    font-weight: 400;
}

/* Collapsible Sections */
.form-card-title.collapsible {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.form-card-title.collapsible > div {
    display: flex;
    align-items: center;
    gap: 10px;
}

.toggle-icon {
    color: var(--gold-400);
    transition: transform 0.3s ease;
}

.collapsible-content {
    display: none;
    padding-top: 20px;
}

.collapsible-content.open {
    display: block;
}

.collapsible-hint {
    font-size: 0.85rem;
    color: var(--white-60);
    margin-bottom: 20px;
    padding: 12px 16px;
    background: rgba(201, 169, 97, 0.1);
    border-radius: 10px;
}

/* Music Pills */
.pills-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.music-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    color: var(--white);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.music-pill:hover {
    border-color: rgba(201, 169, 97, 0.4);
    background: rgba(201, 169, 97, 0.1);
}

.music-pill.selected {
    background: rgba(201, 169, 97, 0.2);
    border-color: var(--gold-400);
    color: var(--gold-400);
}

.music-pill.small {
    padding: 8px 14px;
    font-size: 0.85rem;
}

.music-pill input[type="checkbox"] {
    display: none;
}

.music-pill i {
    color: var(--gold-400);
}

/* Fixed Action Buttons */
.action-buttons-fixed {
    position: fixed;
    bottom: 80px;
    left: 0;
    right: 0;
    padding: 16px 20px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
    background: linear-gradient(to top, rgba(15, 15, 20, 0.98) 0%, rgba(15, 15, 20, 0.9) 100%);
    display: flex;
    gap: 12px;
    z-index: 100;
}

.action-buttons-fixed .btn-cancel {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
}

.action-buttons-fixed .btn-submit {
    flex: 1;
}

/* ═══════════════════════════════════════════════════════════════════════════
   EVENT DETAIL PAGE STYLES
   ═══════════════════════════════════════════════════════════════════════════ */

/* Detail Section */
.detail-section {
    padding: 20px;
    padding-bottom: calc(100px + env(safe-area-inset-bottom));
    position: relative;
    z-index: 10;
}

/* Info Panel */
.info-panel {
    background: rgba(25, 25, 35, 0.85);
    backdrop-filter: blur(20px);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 20px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.info-panel-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--white);
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.info-panel-title i {
    color: var(--gold-400);
}

.info-grid {
    display: grid;
    gap: 16px;
}

.info-item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.info-item-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(201, 169, 97, 0.1);
    color: var(--gold-400);
    border-radius: 10px;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.info-item-content {
    flex: 1;
}

.info-item-label {
    font-size: 0.75rem;
    color: var(--white-60);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.info-item-value {
    font-size: 0.95rem;
    color: var(--white);
    font-weight: 500;
}

/* Music Tags */
.music-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.music-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(201, 169, 97, 0.15);
    color: var(--gold-400);
    font-size: 0.8rem;
    font-weight: 500;
    border-radius: 16px;
}

/* Service List */
.service-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.service-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 12px;
}

.service-list-name {
    font-size: 0.95rem;
    color: var(--white);
    font-weight: 500;
}

.service-list-qty {
    font-size: 0.8rem;
    color: var(--white-60);
    margin-top: 2px;
}

.service-list-price {
    font-size: 1rem;
    font-weight: 600;
    color: var(--gold-400);
}

/* Total Card */
.total-card {
    background: linear-gradient(135deg, rgba(201, 169, 97, 0.15) 0%, rgba(201, 169, 97, 0.05) 100%);
    border: 1px solid rgba(201, 169, 97, 0.3);
    border-radius: 16px;
    padding: 20px;
    margin-top: 20px;
}

.total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
}

.total-row.main {
    padding-top: 12px;
    margin-top: 12px;
    border-top: 1px solid rgba(201, 169, 97, 0.3);
}

.total-label {
    font-size: 0.9rem;
    color: var(--white-70);
}

.total-row.main .total-label {
    font-size: 1rem;
    font-weight: 600;
    color: var(--white);
}

.total-value {
    font-size: 0.95rem;
    color: var(--white);
    font-weight: 500;
}

.total-row.main .total-value {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--gold-400);
}

/* Success / Thank You Messages */
.success-message {
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(34, 197, 94, 0.3);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 20px;
    text-align: center;
}

.success-message-icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
    font-size: 1.5rem;
    border-radius: 50%;
    margin: 0 auto 16px;
}

.success-message-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #22c55e;
    margin-bottom: 8px;
}

.success-message-text {
    font-size: 0.9rem;
    color: var(--white-80);
    line-height: 1.6;
}


/* ═══════════════════════════════════════════════════════════════════════════
   CEREMONY PAGE STYLES
   ═══════════════════════════════════════════════════════════════════════════ */

/* Ceremony Hero Section */
.ceremony-hero {
    text-align: center;
    padding: 40px 20px 30px;
    position: relative;
    z-index: 10;
}

.ceremony-icon {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--gold-400) 0%, var(--gold-500) 100%);
    color: var(--dark-900);
    font-size: 2rem;
    border-radius: 50%;
    margin: 0 auto 20px;
    box-shadow: 0 8px 30px rgba(201, 169, 97, 0.4);
}

.ceremony-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 10px;
}

.ceremony-subtitle {
    font-size: 0.95rem;
    color: var(--white-60);
    line-height: 1.6;
}

/* Access Card */
.access-card {
    background: rgba(25, 25, 35, 0.85);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    padding: 24px;
    margin: 0 20px 20px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    position: relative;
    z-index: 10;
}

.access-card-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 8px;
    text-align: center;
}

.access-card-desc {
    font-size: 0.9rem;
    color: var(--white-60);
    text-align: center;
    margin-bottom: 20px;
}

.access-form {
    margin-bottom: 20px;
}

.access-form .form-group {
    margin-bottom: 16px;
}

.form-input-code {
    width: 100%;
    padding: 16px 20px;
    background: rgba(255, 255, 255, 0.06);
    border: 2px solid rgba(201, 169, 97, 0.3);
    border-radius: 12px;
    color: var(--white);
    font-size: 1.2rem;
    font-weight: 600;
    text-align: center;
    letter-spacing: 3px;
    transition: all 0.3s ease;
}

.form-input-code:focus {
    outline: none;
    border-color: var(--gold-400);
    background: rgba(255, 255, 255, 0.08);
}

.form-input-code::placeholder {
    color: var(--white-40);
    letter-spacing: 2px;
}

/* Info Box */
.info-box {
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 20px;
    font-size: 0.85rem;
    color: var(--white-70);
    line-height: 1.6;
}

.info-box strong {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #3b82f6;
    margin-bottom: 8px;
}

.info-box strong i {
    font-size: 1rem;
}

/* WhatsApp CTA Button */
.whatsapp-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 16px 24px;
    background: #25D366;
    border-radius: 14px;
    text-decoration: none;
    transition: all 0.3s ease;
    margin-bottom: 16px;
}

.whatsapp-cta:hover {
    background: #22c55e;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
}

.whatsapp-cta i {
    font-size: 1.8rem;
    color: white;
}

.whatsapp-cta-text {
    text-align: left;
}

.whatsapp-cta-text .label {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.8);
}

.whatsapp-cta-text .title {
    font-size: 1.1rem;
    font-weight: 700;
    color: white;
}

/* Contact Support Link */
.contact-support {
    text-align: center;
}

.contact-support a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--white-60);
    font-size: 0.85rem;
    text-decoration: none;
    transition: color 0.3s ease;
}

.contact-support a:hover {
    color: var(--gold-400);
}

/* Access Granted State */
.access-granted {
    text-align: center;
    padding: 30px;
}

.access-granted-icon {
    font-size: 64px;
    color: var(--gold-400);
    margin-bottom: 16px;
}

.access-granted-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 12px;
}

.access-granted-text {
    color: var(--white-60);
    margin-bottom: 24px;
}

.access-granted-text strong {
    color: var(--gold-400);
}


/* ═══════════════════════════════════════════════════════════════════════════
   CEREMONY FORM PAGE STYLES
   ═══════════════════════════════════════════════════════════════════════════ */

/* Ceremony Progress Bar */
.ceremony-progress {
    display: flex;
    justify-content: center;
    gap: 12px;
    padding: 20px;
    position: relative;
    z-index: 10;
}

.progress-item {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(25, 25, 35, 0.85);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    color: var(--white-50);
    font-size: 1rem;
    text-decoration: none;
    transition: all 0.3s ease;
}

.progress-item:hover {
    border-color: rgba(201, 169, 97, 0.4);
    color: var(--white-70);
}

.progress-item.active {
    background: linear-gradient(135deg, var(--gold-400) 0%, var(--gold-500) 100%);
    border-color: var(--gold-400);
    color: var(--dark-900);
    box-shadow: 0 4px 15px rgba(201, 169, 97, 0.4);
}

.progress-item.completed {
    background: rgba(34, 197, 94, 0.2);
    border-color: #22c55e;
    color: #22c55e;
}

/* Save Indicator */
.save-indicator {
    display: none;
    position: fixed;
    top: 100px;
    left: 50%;
    transform: translateX(-50%);
    padding: 10px 20px;
    background: rgba(76, 175, 80, 0.95);
    color: white;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 30px;
    align-items: center;
    gap: 8px;
    z-index: 1000;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
}

.save-indicator i {
    font-size: 1rem;
}

/* Section Header for Forms */
.section-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px;
    background: linear-gradient(135deg, rgba(201, 169, 97, 0.15) 0%, rgba(201, 169, 97, 0.05) 100%);
    border-radius: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.section-icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--gold-400) 0%, var(--gold-500) 100%);
    color: var(--dark-900);
    font-size: 1.2rem;
    border-radius: 14px;
    flex-shrink: 0;
}

.section-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--white);
    flex: 1;
}

.conjoint-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(201, 169, 97, 0.2);
    color: var(--gold-400);
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: 20px;
}

/* Question Block */
.question-block {
    background: rgba(25, 25, 35, 0.85);
    backdrop-filter: blur(20px);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.question-label {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--white);
    margin-bottom: 14px;
}

.question-label i {
    color: var(--gold-400);
    margin-top: 3px;
    flex-shrink: 0;
}

.question-label span {
    flex: 1;
    line-height: 1.5;
}

.question-input {
    width: 100%;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: var(--white);
    font-size: 0.95rem;
    font-family: inherit;
    line-height: 1.6;
    resize: vertical;
    min-height: 100px;
    transition: all 0.3s ease;
}

.question-input:focus {
    outline: none;
    border-color: var(--gold-400);
    background: rgba(255, 255, 255, 0.08);
}

.question-input::placeholder {
    color: var(--white-40);
}

/* Navigation Buttons */
.nav-buttons {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 20px;
    padding-bottom: calc(100px + env(safe-area-inset-bottom));
    position: relative;
    z-index: 10;
}

.btn-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 20px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: var(--white);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-nav:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.2);
}

.btn-nav.next {
    background: linear-gradient(135deg, var(--gold-400) 0%, var(--gold-500) 100%);
    color: var(--dark-900);
    border: none;
}

.btn-nav.next:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(201, 169, 97, 0.4);
}


/* ═══════════════════════════════════════════════════════════════════════════
   CEREMONY CODE REQUEST STYLES
   ═══════════════════════════════════════════════════════════════════════════ */

/* Conjoint Selector */
.conjoint-selector {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 20px;
}

.conjoint-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px 16px;
    background: rgba(255, 255, 255, 0.06);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    color: var(--white);
    cursor: pointer;
    transition: all 0.3s ease;
}

.conjoint-option:hover {
    border-color: rgba(201, 169, 97, 0.4);
    background: rgba(201, 169, 97, 0.1);
}

.conjoint-option.selected {
    border-color: var(--gold-400);
    background: rgba(201, 169, 97, 0.2);
    box-shadow: 0 4px 20px rgba(201, 169, 97, 0.3);
}

.conjoint-icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(201, 169, 97, 0.15);
    color: var(--gold-400);
    font-size: 1.3rem;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.conjoint-option.selected .conjoint-icon {
    background: var(--gold-400);
    color: var(--dark-900);
}

.conjoint-label {
    font-size: 1rem;
    font-weight: 700;
    color: var(--white);
}

.conjoint-sublabel {
    font-size: 0.75rem;
    color: var(--white-50);
}

/* Request Code Button */
.btn-request-code {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 24px;
    background: linear-gradient(135deg, var(--gold-400) 0%, var(--gold-500) 100%);
    color: var(--dark-900);
    font-size: 1rem;
    font-weight: 600;
    border: none;
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-bottom: 16px;
}

.btn-request-code:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(201, 169, 97, 0.4);
}

.btn-request-code:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Request Result */
.request-result {
    padding: 16px;
    border-radius: 12px;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.request-result.success {
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: #22c55e;
}

.request-result.error {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #ef4444;
}

.request-result i {
    font-size: 1.1rem;
}

/* Divider */
.divider-or {
    display: flex;
    align-items: center;
    margin: 20px 0;
}

.divider-or::before,
.divider-or::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
}

.divider-or span {
    padding: 0 16px;
    font-size: 0.85rem;
    color: var(--white-50);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Access Card Title with icon */
.access-card-title i {
    margin-right: 8px;
    color: var(--gold-400);
}

/* ═══════════════════════════════════════════════════════════════════════════
   EVENT DETAIL PAGE STYLES
   ═══════════════════════════════════════════════════════════════════════════ */

/* Back Button */
.back-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 20px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: var(--white-70);
    font-size: 0.9rem;
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
    z-index: 10;
}

.back-button:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--white);
    border-color: rgba(255, 255, 255, 0.2);
}

.back-button i {
    font-size: 0.85rem;
}

/* Event Hero Section */
.event-hero {
    text-align: center;
    padding: 20px;
    margin-bottom: 20px;
    position: relative;
    z-index: 10;
}

.event-hero-title {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 10px;
    line-height: 1.3;
}

.event-hero-type {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(201, 169, 97, 0.15);
    border: 1px solid rgba(201, 169, 97, 0.3);
    border-radius: 20px;
    color: var(--gold-400);
    font-size: 0.9rem;
    font-weight: 500;
}

/* Success Message */
.success-message {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
    border-radius: 16px;
    padding: 20px;
    margin: 0 20px 20px;
    position: relative;
    z-index: 10;
}

.success-message.orange {
    background: rgba(201, 169, 97, 0.1);
    border-color: rgba(201, 169, 97, 0.3);
}

.success-message-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
}

.success-message-icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
    font-size: 1.3rem;
    border-radius: 50%;
    flex-shrink: 0;
}

.success-message-icon.orange {
    background: rgba(201, 169, 97, 0.2);
    color: var(--gold-400);
}

.success-message-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--white);
}

.success-message-text {
    font-size: 0.9rem;
    color: var(--white-70);
    line-height: 1.6;
}

/* Detail Section */
.detail-section {
    padding: 0 20px;
    position: relative;
    z-index: 10;
}

/* Detail Card */
.detail-card {
    background: rgba(25, 25, 35, 0.85);
    backdrop-filter: blur(20px);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.detail-card.empty {
    text-align: center;
    padding: 40px 20px;
}

.detail-card.additional {
    border-color: rgba(201, 169, 97, 0.3);
    background: rgba(25, 25, 35, 0.9);
}

.detail-card.total {
    background: linear-gradient(135deg, rgba(201, 169, 97, 0.15) 0%, rgba(201, 169, 97, 0.05) 100%);
    border-color: rgba(201, 169, 97, 0.3);
}

.detail-card-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.detail-card-title i {
    color: var(--gold-400);
}

.detail-card-title.orange {
    color: var(--gold-400);
}

/* Detail Row */
.detail-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.detail-row:last-child {
    border-bottom: none;
}

.detail-icon {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(201, 169, 97, 0.15);
    color: var(--gold-400);
    font-size: 0.95rem;
    border-radius: 10px;
    flex-shrink: 0;
}

.detail-icon.orange {
    background: rgba(251, 146, 60, 0.15);
    color: #fb923c;
}

.detail-content {
    flex: 1;
}

.detail-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    color: var(--white-50);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.detail-label i {
    color: var(--gold-400);
    font-size: 0.85rem;
}

.detail-value {
    font-size: 1rem;
    color: var(--white);
    font-weight: 500;
}

/* Status Badge Large */
.status-badge-large {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
}

.status-badge-large.confirmed {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.status-badge-large.pending {
    background: rgba(251, 146, 60, 0.15);
    color: #fb923c;
    border: 1px solid rgba(251, 146, 60, 0.3);
}

/* Notes Text */
.notes-text {
    font-size: 0.95rem;
    color: var(--white-80);
    line-height: 1.7;
    white-space: pre-wrap;
}

/* Tag Container */
.tag-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

/* Tags */
.tag {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--white-80);
}

.tag.gold {
    background: rgba(201, 169, 97, 0.15);
    border-color: rgba(201, 169, 97, 0.3);
    color: var(--gold-400);
}

.tag.blue {
    background: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.3);
    color: #3b82f6;
}

.tag.purple {
    background: rgba(168, 85, 247, 0.15);
    border-color: rgba(168, 85, 247, 0.3);
    color: #a855f7;
}

.tag.green {
    background: rgba(34, 197, 94, 0.15);
    border-color: rgba(34, 197, 94, 0.3);
    color: #22c55e;
}

.tag.orange {
    background: rgba(251, 146, 60, 0.15);
    border-color: rgba(251, 146, 60, 0.3);
    color: #fb923c;
}

/* Notes Box */
.notes-box {
    background: rgba(255, 255, 255, 0.05);
    border-left: 3px solid var(--white-30);
    border-radius: 8px;
    padding: 14px;
    margin-top: 10px;
    margin-bottom: 16px;
    font-size: 0.9rem;
    color: var(--white-80);
    line-height: 1.6;
}

.notes-box.gold {
    background: rgba(201, 169, 97, 0.08);
    border-left-color: var(--gold-400);
}

.notes-box.pink {
    background: rgba(236, 72, 153, 0.08);
    border-left-color: #ec4899;
}

.notes-box.red {
    background: rgba(239, 68, 68, 0.08);
    border-left-color: #ef4444;
}

.notes-box.blue {
    background: rgba(59, 130, 246, 0.08);
    border-left-color: #3b82f6;
}

/* Playlist Button */
.playlist-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    background: linear-gradient(135deg, #1DB954 0%, #1ed760 100%);
    color: white;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: 25px;
    text-decoration: none;
    transition: all 0.3s ease;
    margin-top: 10px;
    margin-bottom: 16px;
}

.playlist-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(29, 185, 84, 0.4);
}

/* Empty State */
.empty-state-icon {
    font-size: 3rem;
    color: var(--white-30);
    margin-bottom: 16px;
}

.empty-state-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--white-70);
    margin-bottom: 8px;
}

.empty-state-text {
    font-size: 0.9rem;
    color: var(--white-50);
    margin-bottom: 20px;
}

.empty-state-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(135deg, var(--gold-400) 0%, var(--gold-500) 100%);
    color: var(--dark-900);
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.empty-state-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(201, 169, 97, 0.4);
}

/* Service Group */
.service-group {
    margin-bottom: 16px;
}

.service-group:last-child {
    margin-bottom: 0;
}

.service-group-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 12px;
    margin-bottom: 10px;
}

.service-group-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--white);
    margin: 0;
}

.service-group-title.orange {
    color: #fb923c;
}

/* Service Item */
.service-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 12px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
    margin-bottom: 8px;
    border-left: 3px solid rgba(201, 169, 97, 0.4);
}

.service-item:last-child {
    margin-bottom: 0;
}

.service-item.additional {
    border-left-color: #fb923c;
    background: rgba(251, 146, 60, 0.05);
}

.service-item-content {
    flex: 1;
}

.service-item-name {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--white);
    margin-bottom: 4px;
}

.service-item-qty {
    font-size: 0.8rem;
    color: var(--gold-400);
    margin-bottom: 2px;
}

.service-item-vat {
    font-size: 0.75rem;
    color: var(--white-50);
}

.service-item-price {
    text-align: right;
}

.service-item-unit {
    font-size: 0.75rem;
    color: var(--white-50);
    margin-bottom: 2px;
}

.service-item-total {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--white);
}

.service-item-total.orange {
    color: #fb923c;
}

.service-item-ttc {
    font-size: 0.7rem;
    color: var(--white-40);
    text-transform: uppercase;
}

/* Totals Section */
.totals-section {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.totals-section.orange {
    border-top-color: rgba(251, 146, 60, 0.3);
}

.totals-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
}

.totals-row.final {
    margin-top: 8px;
    padding-top: 12px;
    padding-bottom: 5px;
    border-top: 1px dashed rgba(255, 255, 255, 0.1);
}

.totals-label {
    font-size: 0.9rem;
    color: var(--white-60);
}

.totals-label-main {
    font-size: 1rem;
    font-weight: 600;
    color: var(--white);
}

.totals-label-sub {
    font-size: 0.75rem;
    color: var(--white-50);
    margin-top: 2px;
}

.totals-value {
    font-size: 0.95rem;
    color: var(--white-80);
    font-weight: 500;
}

.totals-value-main {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gold-400);
    text-shadow: 0 0 10px rgba(201, 169, 97, 0.3);
}

.totals-value-main.orange {
    color: #fb923c;
}

.totals-value-main.grand {
    color: var(--gold-400);
    font-size: 1.5rem;
}

/* Action Buttons */
.action-buttons {
    padding: 20px;
    padding-bottom: calc(100px + env(safe-area-inset-bottom));
    position: relative;
    z-index: 10;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 24px;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: 12px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
}

.btn-block {
    display: flex;
    width: 100%;
    margin-bottom: 12px;
}

.btn-block:last-child {
    margin-bottom: 0;
}

.btn-primary {
    background: linear-gradient(135deg, var(--gold-400) 0%, var(--gold-500) 100%);
    color: var(--dark-900);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(201, 169, 97, 0.4);
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--white);
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.25);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ADD SERVICES PAGE STYLES
   ═══════════════════════════════════════════════════════════════════════════ */

/* Back Button Container */
.back-button-container {
    padding: 20px;
    padding-bottom: 0;
    position: relative;
    z-index: 10;
}

/* Page Header */
.page-header {
    text-align: center;
    padding: 30px 20px;
    position: relative;
    z-index: 10;
}

.page-header-icon {
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--gold-400) 0%, var(--gold-500) 100%);
    color: var(--dark-900);
    font-size: 1.8rem;
    border-radius: 50%;
    margin: 0 auto 16px;
    box-shadow: 0 8px 30px rgba(201, 169, 97, 0.4);
}

.page-header-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--white);
    margin: 0 0 8px 0;
}

.page-header-subtitle {
    font-size: 0.95rem;
    color: var(--white-60);
    margin: 0;
}

/* Alert Info */
.alert-info {
    display: flex;
    gap: 14px;
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.25);
    border-radius: 14px;
    padding: 16px;
    margin: 0 20px 16px;
    position: relative;
    z-index: 10;
}

.alert-info-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(59, 130, 246, 0.2);
    color: #3b82f6;
    font-size: 1.1rem;
    border-radius: 12px;
    flex-shrink: 0;
}

.alert-info-content {
    flex: 1;
}

.alert-info-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #3b82f6;
    margin-bottom: 4px;
}

.alert-info-text {
    font-size: 0.85rem;
    color: var(--white-70);
    line-height: 1.5;
}

.alert-info-text strong {
    color: #3b82f6;
}

/* Alert Warning */
.alert-warning {
    display: flex;
    gap: 14px;
    background: rgba(251, 146, 60, 0.1);
    border: 1px solid rgba(251, 146, 60, 0.25);
    border-radius: 14px;
    padding: 16px;
    margin: 0 20px 16px;
    position: relative;
    z-index: 10;
}

.alert-warning-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(251, 146, 60, 0.2);
    color: #fb923c;
    font-size: 1.1rem;
    border-radius: 12px;
    flex-shrink: 0;
}

.alert-warning-content {
    flex: 1;
}

.alert-warning-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #fb923c;
    margin-bottom: 4px;
}

.alert-warning-text {
    font-size: 0.85rem;
    color: var(--white-70);
    line-height: 1.5;
}

.alert-warning-text strong {
    color: #fb923c;
}

/* Alert Error */
.alert-error {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.25);
    border-radius: 12px;
    padding: 14px 16px;
    margin: 0 20px 16px;
    color: #ef4444;
    font-size: 0.9rem;
    position: relative;
    z-index: 10;
}

.alert-error i {
    font-size: 1rem;
}

/* Alert Success */
.alert-success {
    display: flex;
    gap: 14px;
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.25);
    border-radius: 14px;
    padding: 16px;
    margin: 0 20px 16px;
    position: relative;
    z-index: 10;
}

.alert-success-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
    font-size: 1.1rem;
    border-radius: 12px;
    flex-shrink: 0;
}

.alert-success-content {
    flex: 1;
}

.alert-success-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #22c55e;
    margin-bottom: 4px;
}

.alert-success-text {
    font-size: 0.85rem;
    color: var(--white-70);
    line-height: 1.5;
}

/* Form Submit Container */
.form-submit-container {
    padding: 20px;
    padding-bottom: calc(100px + env(safe-area-inset-bottom));
    position: relative;
    z-index: 10;
}

/* Submit Button */
.btn-submit {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 24px;
    background: linear-gradient(135deg, var(--gold-400) 0%, var(--gold-500) 100%);
    color: var(--dark-900);
    font-size: 1rem;
    font-weight: 600;
    border: none;
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-submit:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(201, 169, 97, 0.4);
}

.btn-submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.btn-submit i {
    font-size: 1rem;
}

/* Already Selected Service */
.sub-service-item.already-selected {
    opacity: 0.5;
    pointer-events: none;
    position: relative;
}

.sub-service-item.already-selected::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    border-radius: inherit;
}

/* Existing Service Badge */
.existing-service-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(34, 197, 94, 0.9);
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 20px;
    z-index: 10;
    box-shadow: 0 2px 10px rgba(34, 197, 94, 0.3);
}

.existing-service-badge i {
    font-size: 0.7rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CEREMONY FORM - ENHANCED BEAUTIFUL DESIGN
   Un design romantique et élégant pour les mariés
   ═══════════════════════════════════════════════════════════════════════════ */

/* Override existing ceremony progress with enhanced version */
.ceremony-progress {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 25px 20px;
    position: relative;
    z-index: 10;
}

/* Progress connector lines */
.ceremony-progress::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 120px);
    max-width: 320px;
    height: 2px;
    background: linear-gradient(90deg,
        rgba(201, 169, 97, 0.1) 0%,
        rgba(201, 169, 97, 0.3) 50%,
        rgba(201, 169, 97, 0.1) 100%);
    z-index: -1;
}

.progress-item {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(25, 25, 35, 0.9);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    color: var(--white-40);
    font-size: 1rem;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    z-index: 1;
}

.progress-item::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid transparent;
    transition: all 0.4s ease;
}

.progress-item:hover {
    border-color: rgba(201, 169, 97, 0.5);
    color: var(--white-70);
    transform: scale(1.08);
}

.progress-item:hover::after {
    border-color: rgba(201, 169, 97, 0.2);
}

.progress-item.active {
    background: linear-gradient(135deg, var(--gold-400) 0%, var(--gold-500) 100%);
    border-color: var(--gold-400);
    color: var(--dark-900);
    box-shadow:
        0 4px 20px rgba(201, 169, 97, 0.5),
        0 0 40px rgba(201, 169, 97, 0.2);
    transform: scale(1.1);
}

.progress-item.active::after {
    border-color: rgba(201, 169, 97, 0.4);
    animation: pulse-ring 2s ease-out infinite;
}

@keyframes pulse-ring {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(1.3); opacity: 0; }
}

.progress-item.completed {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    border-color: #22c55e;
    color: white;
    box-shadow: 0 4px 15px rgba(34, 197, 94, 0.4);
}

/* Enhanced Save Indicator */
.save-indicator {
    display: none;
    position: fixed;
    top: 90px;
    left: 50%;
    transform: translateX(-50%);
    padding: 12px 24px;
    background: rgba(76, 175, 80, 0.95);
    color: white;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: 30px;
    align-items: center;
    gap: 10px;
    z-index: 1000;
    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.3),
        0 0 30px rgba(76, 175, 80, 0.3);
    backdrop-filter: blur(15px);
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from { transform: translate(-50%, -20px); opacity: 0; }
    to { transform: translate(-50%, 0); opacity: 1; }
}

.save-indicator i {
    font-size: 1.1rem;
    animation: checkBounce 0.5s ease-out;
}

@keyframes checkBounce {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.3); }
}

/* Enhanced Form Section */
.form-section {
    padding: 0 20px;
    position: relative;
    z-index: 10;
}

/* Beautiful Section Header */
.section-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px;
    background: linear-gradient(135deg,
        rgba(201, 169, 97, 0.2) 0%,
        rgba(201, 169, 97, 0.08) 50%,
        rgba(201, 169, 97, 0.15) 100%);
    border-radius: 20px;
    margin-bottom: 24px;
    flex-wrap: wrap;
    border: 1px solid rgba(201, 169, 97, 0.2);
    position: relative;
    overflow: hidden;
}

/* Decorative shimmer effect */
.section-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.1) 50%,
        transparent 100%);
    animation: shimmer 3s ease-in-out infinite;
}

@keyframes shimmer {
    0% { left: -100%; }
    100% { left: 100%; }
}

.section-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--gold-400) 0%, var(--gold-500) 100%);
    color: var(--dark-900);
    font-size: 1.4rem;
    border-radius: 16px;
    flex-shrink: 0;
    box-shadow:
        0 4px 15px rgba(201, 169, 97, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    position: relative;
    z-index: 1;
}

.section-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--white);
    flex: 1;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    position: relative;
    z-index: 1;
}

.conjoint-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: linear-gradient(135deg, rgba(201, 169, 97, 0.3) 0%, rgba(201, 169, 97, 0.15) 100%);
    color: var(--gold-400);
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 25px;
    border: 1px solid rgba(201, 169, 97, 0.3);
    position: relative;
    z-index: 1;
}

/* Beautiful Question Blocks */
.question-block {
    background: rgba(25, 25, 35, 0.88);
    backdrop-filter: blur(25px);
    border-radius: 20px;
    padding: 24px;
    margin-bottom: 20px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

/* Subtle glow on hover */
.question-block::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(201, 169, 97, 0) 0%,
        rgba(201, 169, 97, 0) 100%,
        transparent 100%);
    transition: all 0.4s ease;
}

.question-block:hover {
    border-color: rgba(201, 169, 97, 0.25);
    transform: translateY(-2px);
    box-shadow:
        0 8px 30px rgba(0, 0, 0, 0.2),
        0 0 20px rgba(201, 169, 97, 0.05);
}

.question-block:hover::before {
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(201, 169, 97, 0.5) 50%,
        transparent 100%);
}

/* Focus state for question block */
.question-block:focus-within {
    border-color: rgba(201, 169, 97, 0.4);
    box-shadow:
        0 8px 40px rgba(0, 0, 0, 0.25),
        0 0 30px rgba(201, 169, 97, 0.1);
}

.question-block:focus-within::before {
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(201, 169, 97, 0.7) 50%,
        transparent 100%);
}

/* Enhanced Question Label */
.question-label {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--white);
    margin-bottom: 16px;
    line-height: 1.5;
}

.question-label i {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(201, 169, 97, 0.2) 0%, rgba(201, 169, 97, 0.1) 100%);
    color: var(--gold-400);
    font-size: 0.95rem;
    border-radius: 10px;
    flex-shrink: 0;
    margin-top: 0;
}

.question-label span {
    flex: 1;
    line-height: 1.6;
    padding-top: 6px;
}

/* Beautiful Question Input */
.question-input {
    width: 100%;
    padding: 18px 20px;
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.06) 0%,
        rgba(255, 255, 255, 0.03) 100%);
    border: 2px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    color: var(--white);
    font-size: 1rem;
    font-family: inherit;
    line-height: 1.7;
    resize: vertical;
    min-height: 120px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.question-input:hover {
    border-color: rgba(255, 255, 255, 0.15);
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.08) 0%,
        rgba(255, 255, 255, 0.04) 100%);
}

.question-input:focus {
    outline: none;
    border-color: var(--gold-400);
    background: linear-gradient(135deg,
        rgba(201, 169, 97, 0.08) 0%,
        rgba(201, 169, 97, 0.03) 100%);
    box-shadow:
        0 0 0 4px rgba(201, 169, 97, 0.1),
        0 4px 20px rgba(0, 0, 0, 0.1);
}

.question-input::placeholder {
    color: var(--white-35);
    font-style: italic;
}

/* Character count hint (optional styling) */
.question-input:not(:placeholder-shown) {
    border-color: rgba(201, 169, 97, 0.2);
}

/* Enhanced Navigation Buttons */
.nav-buttons {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 24px 20px;
    padding-bottom: calc(110px + env(safe-area-inset-bottom));
    position: relative;
    z-index: 10;
}

.btn-nav {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 24px;
    background: rgba(255, 255, 255, 0.08);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    color: var(--white);
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.btn-nav::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.1) 50%,
        transparent 100%);
    transition: left 0.5s ease;
}

.btn-nav:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.btn-nav:hover::before {
    left: 100%;
}

.btn-nav.prev i {
    transition: transform 0.3s ease;
}

.btn-nav.prev:hover i {
    transform: translateX(-4px);
}

.btn-nav.next {
    background: linear-gradient(135deg, var(--gold-400) 0%, var(--gold-500) 100%);
    color: var(--dark-900);
    border: none;
    box-shadow: 0 4px 15px rgba(201, 169, 97, 0.3);
}

.btn-nav.next::before {
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.3) 50%,
        transparent 100%);
}

.btn-nav.next:hover {
    transform: translateY(-3px);
    box-shadow:
        0 8px 25px rgba(201, 169, 97, 0.5),
        0 0 40px rgba(201, 169, 97, 0.2);
}

.btn-nav.next i {
    transition: transform 0.3s ease;
}

.btn-nav.next:hover i {
    transform: translateX(4px);
}

/* Active state when clicking */
.btn-nav:active {
    transform: translateY(0) scale(0.98);
}

/* Romantic decorative elements for ceremony pages */
.ceremony-form-page .background-slideshow::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center,
        transparent 0%,
        rgba(201, 169, 97, 0.03) 50%,
        transparent 100%);
    pointer-events: none;
}

/* Special styling for specific section icons */
.section-icon .fa-heart {
    animation: heartbeat 1.5s ease-in-out infinite;
}

@keyframes heartbeat {
    0%, 100% { transform: scale(1); }
    14% { transform: scale(1.15); }
    28% { transform: scale(1); }
    42% { transform: scale(1.15); }
    70% { transform: scale(1); }
}

.section-icon .fa-ring {
    animation: sparkle 2s ease-in-out infinite;
}

@keyframes sparkle {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.3); }
}

/* Mobile optimizations */
@media (max-width: 400px) {
    .ceremony-progress {
        gap: 6px;
    }

    .progress-item {
        width: 42px;
        height: 42px;
        font-size: 0.9rem;
    }

    .section-header {
        padding: 20px;
    }

    .section-icon {
        width: 48px;
        height: 48px;
        font-size: 1.2rem;
    }

    .section-title {
        font-size: 1.2rem;
    }

    .question-block {
        padding: 20px;
    }

    .question-label {
        font-size: 0.95rem;
    }

    .question-input {
        padding: 16px;
        min-height: 100px;
    }

    .btn-nav {
        padding: 14px 18px;
        font-size: 0.9rem;
    }
}

/* Extra touch for filled questions */
.question-block.has-content {
    border-color: rgba(34, 197, 94, 0.2);
}

.question-block.has-content::after {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    top: 12px;
    right: 12px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
    font-size: 0.7rem;
    border-radius: 50%;
}


/* ═══════════════════════════════════════════════════════════════
   SECTION BACKGROUND ANIMATIONS
   Animations subtiles et variées pour chaque section
   ═══════════════════════════════════════════════════════════════ */

/* Animation Keyframes */
@keyframes float-orb {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.3; }
    25% { transform: translate(30px, -20px) scale(1.1); opacity: 0.5; }
    50% { transform: translate(-20px, -40px) scale(0.9); opacity: 0.4; }
    75% { transform: translate(-30px, 20px) scale(1.05); opacity: 0.35; }
}

@keyframes pulse-glow {
    0%, 100% { opacity: 0.1; transform: scale(1); }
    50% { opacity: 0.3; transform: scale(1.05); }
}

@keyframes shimmer-line {
    0% { transform: translateX(-100%) rotate(-45deg); }
    100% { transform: translateX(200%) rotate(-45deg); }
}

@keyframes gradient-shift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes float-up {
    0% { transform: translateY(100%) rotate(0deg); opacity: 0; }
    10% { opacity: 0.6; }
    90% { opacity: 0.6; }
    100% { transform: translateY(-100vh) rotate(360deg); opacity: 0; }
}

@keyframes wave-move {
    0% { transform: translateX(0) translateY(0); }
    50% { transform: translateX(-25px) translateY(10px); }
    100% { transform: translateX(0) translateY(0); }
}

@keyframes sparkle {
    0%, 100% { opacity: 0; transform: scale(0); }
    50% { opacity: 1; transform: scale(1); }
}

/* ─────────────────────────────────────────────────────────────────
   Style 1: Orbes Dorées Flottantes (Services Premium)
   ───────────────────────────────────────────────────────────────── */
.section-bg-orbs {
    position: relative;
    overflow: hidden;
}

.section-bg-orbs::before,
.section-bg-orbs::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

.section-bg-orbs::before {
    width: 400px;
    height: 400px;
    top: 10%;
    left: -100px;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.15) 0%, transparent 70%);
    animation: float-orb 20s ease-in-out infinite;
}

.section-bg-orbs::after {
    width: 300px;
    height: 300px;
    bottom: 15%;
    right: -50px;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.1) 0%, transparent 70%);
    animation: float-orb 25s ease-in-out infinite reverse;
}

/* ─────────────────────────────────────────────────────────────────
   Style 2: Lignes de Lumière (Stats)
   ───────────────────────────────────────────────────────────────── */
.section-bg-lines {
    position: relative;
    overflow: hidden;
}

.section-bg-lines::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        linear-gradient(90deg, transparent 0%, transparent 50%, rgba(212, 175, 55, 0.03) 50%, transparent 51%),
        linear-gradient(0deg, transparent 0%, transparent 50%, rgba(212, 175, 55, 0.03) 50%, transparent 51%);
    background-size: 60px 60px;
    pointer-events: none;
    z-index: 0;
}

/* Shimmer line removed - caused visual issues */

/* ─────────────────────────────────────────────────────────────────
   Style 3: Points Scintillants (Partners)
   ───────────────────────────────────────────────────────────────── */
.section-bg-sparkles {
    position: relative;
    overflow: hidden;
}

.section-bg-sparkles .sparkle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: var(--gold-400);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

.section-bg-sparkles .sparkle:nth-child(1) { top: 20%; left: 10%; animation: sparkle 3s ease-in-out infinite; }
.section-bg-sparkles .sparkle:nth-child(2) { top: 40%; left: 85%; animation: sparkle 4s ease-in-out infinite 0.5s; }
.section-bg-sparkles .sparkle:nth-child(3) { top: 70%; left: 25%; animation: sparkle 3.5s ease-in-out infinite 1s; }
.section-bg-sparkles .sparkle:nth-child(4) { top: 30%; left: 70%; animation: sparkle 4.5s ease-in-out infinite 1.5s; }
.section-bg-sparkles .sparkle:nth-child(5) { top: 80%; left: 60%; animation: sparkle 3s ease-in-out infinite 2s; }
.section-bg-sparkles .sparkle:nth-child(6) { top: 15%; left: 45%; animation: sparkle 5s ease-in-out infinite 0.8s; }

/* ─────────────────────────────────────────────────────────────────
   Style 4: Vagues Douces (Testimonials)
   ───────────────────────────────────────────────────────────────── */
.section-bg-waves {
    position: relative;
    overflow: hidden;
}

.section-bg-waves::before,
.section-bg-waves::after {
    content: '';
    position: absolute;
    pointer-events: none;
    z-index: 0;
}

.section-bg-waves::before {
    width: 150%;
    height: 200px;
    bottom: -100px;
    left: -25%;
    background: radial-gradient(ellipse at center, rgba(212, 175, 55, 0.08) 0%, transparent 70%);
    border-radius: 50%;
    animation: wave-move 10s ease-in-out infinite;
}

.section-bg-waves::after {
    width: 120%;
    height: 150px;
    top: -75px;
    left: -10%;
    background: radial-gradient(ellipse at center, rgba(212, 175, 55, 0.05) 0%, transparent 70%);
    border-radius: 50%;
    animation: wave-move 12s ease-in-out infinite reverse;
}

/* ─────────────────────────────────────────────────────────────────
   Style 5: Gradient Animé (Contact)
   ───────────────────────────────────────────────────────────────── */
.section-bg-gradient {
    position: relative;
    overflow: hidden;
}

.section-bg-gradient::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        135deg,
        rgba(212, 175, 55, 0.03) 0%,
        transparent 25%,
        transparent 50%,
        rgba(212, 175, 55, 0.02) 75%,
        transparent 100%
    );
    background-size: 400% 400%;
    animation: gradient-shift 15s ease infinite;
    pointer-events: none;
    z-index: 0;
}

/* ─────────────────────────────────────────────────────────────────
   Style 6: Particules Montantes (CTA Sections)
   ───────────────────────────────────────────────────────────────── */
.section-bg-particles {
    position: relative;
    overflow: hidden;
}

.section-bg-particles .particle {
    position: absolute;
    width: 6px;
    height: 6px;
    background: rgba(212, 175, 55, 0.4);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

.section-bg-particles .particle:nth-child(1) { left: 10%; animation: float-up 15s linear infinite; }
.section-bg-particles .particle:nth-child(2) { left: 25%; animation: float-up 18s linear infinite 2s; }
.section-bg-particles .particle:nth-child(3) { left: 40%; animation: float-up 12s linear infinite 4s; }
.section-bg-particles .particle:nth-child(4) { left: 55%; animation: float-up 20s linear infinite 1s; }
.section-bg-particles .particle:nth-child(5) { left: 70%; animation: float-up 16s linear infinite 3s; }
.section-bg-particles .particle:nth-child(6) { left: 85%; animation: float-up 14s linear infinite 5s; }

/* Ensure content stays above backgrounds */
.section-bg-orbs > *,
.section-bg-lines > *,
.section-bg-sparkles > *,
.section-bg-waves > *,
.section-bg-gradient > *,
.section-bg-particles > * {
    position: relative;
    z-index: 1;
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    .section-bg-orbs::before,
    .section-bg-orbs::after,
    .section-bg-lines::after,
    .section-bg-sparkles .sparkle,
    .section-bg-waves::before,
    .section-bg-waves::after,
    .section-bg-gradient::before,
    .section-bg-particles .particle {
        animation: none;
    }
}
/**
 * DJ Prestige Sound - Admin PWA Styles
 * Optimized for iOS native-like experience
 * Version 2.0.0
 */

/* ===========================================
   CSS Variables & Safe Area
   =========================================== */
:root {
    --safe-area-top: env(safe-area-inset-top, 0px);
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-left: env(safe-area-inset-left, 0px);
    --safe-area-right: env(safe-area-inset-right, 0px);
}

/* ===========================================
   Offline Indicator
   =========================================== */
.offline-indicator {
    position: fixed;
    top: calc(var(--safe-area-top) + 60px);
    left: 50%;
    transform: translateX(-50%) translateY(-100px);
    background: rgba(244, 67, 54, 0.95);
    color: white;
    padding: 10px 20px;
    border-radius: 25px;
    font-size: 13px;
    font-weight: 600;
    z-index: 9998;
    display: flex;
    align-items: center;
    gap: 8px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 20px rgba(244, 67, 54, 0.3);
    transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.offline-indicator.visible {
    transform: translateX(-50%) translateY(0);
}

.offline-indicator i {
    font-size: 14px;
}

/* ===========================================
   Update Banner
   =========================================== */
.update-banner {
    position: fixed;
    bottom: calc(var(--safe-area-bottom) + 80px);
    left: 16px;
    right: 16px;
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light, #e5c766) 100%);
    color: var(--bg-dark, #0d0d14);
    padding: 14px 20px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    z-index: 9997;
    transform: translateY(150%);
    transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    box-shadow: 0 10px 30px rgba(212, 175, 55, 0.3);
}

.update-banner.visible {
    transform: translateY(0);
}

.update-banner span {
    font-size: 14px;
    font-weight: 600;
}

.update-banner button {
    background: var(--bg-dark, #0d0d14);
    color: var(--gold, #d4af37);
    border: none;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: transform 0.2s;
}

.update-banner button:active {
    transform: scale(0.95);
}

/* ===========================================
   Enhanced Toast Notifications
   =========================================== */
#toastContainer {
    position: fixed;
    top: calc(var(--safe-area-top) + 70px);
    left: 16px;
    right: 16px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

.toast {
    background: rgba(0, 0, 0, 0.9);
    color: white;
    padding: 14px 20px;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 12px;
    transform: translateY(-30px);
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    pointer-events: auto;
}

.toast.visible {
    transform: translateY(0);
    opacity: 1;
}

.toast i {
    font-size: 18px;
    flex-shrink: 0;
}

.toast--success {
    background: rgba(76, 175, 80, 0.95);
}

.toast--error {
    background: rgba(244, 67, 54, 0.95);
}

.toast--warning {
    background: rgba(255, 152, 0, 0.95);
}

.toast--info {
    background: rgba(33, 150, 243, 0.95);
}

/* ===========================================
   Modal System
   =========================================== */
.admin-modal {
    position: fixed;
    inset: 0;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    padding-top: calc(var(--safe-area-top) + 20px);
    padding-bottom: calc(var(--safe-area-bottom) + 20px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}

.admin-modal--visible {
    opacity: 1;
    visibility: visible;
}

.admin-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.admin-modal__content {
    position: relative;
    background: var(--bg-card, #1a1a24);
    border-radius: 20px;
    padding: 24px;
    max-width: 340px;
    width: 100%;
    transform: scale(0.9) translateY(20px);
    transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

.admin-modal--visible .admin-modal__content {
    transform: scale(1) translateY(0);
}

.admin-modal__close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    color: var(--text-muted, #8a8a9a);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.admin-modal__close:hover {
    background: rgba(255, 255, 255, 0.15);
    color: white;
}

.admin-modal__title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 16px;
    padding-right: 40px;
    color: white;
}

.admin-modal__body {
    color: var(--text-muted, #8a8a9a);
    font-size: 14px;
    line-height: 1.6;
}

.admin-modal__body p {
    margin-bottom: 20px;
}

.admin-modal__actions {
    display: flex;
    gap: 12px;
    margin-top: 20px;
}

.admin-modal__actions .admin-btn {
    flex: 1;
}

/* ===========================================
   Navigation Enhancements
   =========================================== */
.admin-nav--hidden {
    transform: translateY(100%);
}

.admin-nav {
    transition: transform 0.3s ease;
}

/* Active tab indicator animation */
.admin-nav__item--active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 3px;
    background: var(--gold, #d4af37);
    border-radius: 0 0 3px 3px;
}

/* ===========================================
   Pull-to-Refresh
   =========================================== */
.ptr-indicator {
    position: fixed;
    top: calc(var(--safe-area-top) + 60px);
    left: 50%;
    transform: translateX(-50%) translateY(-100px);
    background: var(--gold, #d4af37);
    color: var(--bg-dark, #0d0d14);
    padding: 10px 20px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    z-index: 9999;
    transition: transform 0.3s ease, opacity 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    opacity: 0;
}

.ptr-indicator.visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

.ptr-indicator i {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ===========================================
   Loading States
   =========================================== */
.admin-btn--loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

.admin-btn--loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.admin-btn--loading i {
    visibility: hidden;
}

/* Skeleton loading */
.skeleton {
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.05) 25%,
        rgba(255, 255, 255, 0.1) 50%,
        rgba(255, 255, 255, 0.05) 75%
    );
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
    border-radius: 4px;
}

@keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ===========================================
   Haptic Press Effect
   =========================================== */
[data-haptic] {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

[data-haptic]:active {
    transform: scale(0.97);
    transition: transform 0.1s ease;
}

/* ===========================================
   iOS Bounce Prevention
   =========================================== */
html, body {
    overscroll-behavior-y: none;
}

.admin-content {
    -webkit-overflow-scrolling: touch;
}

/* ===========================================
   App Ready State
   =========================================== */
.admin-page {
    opacity: 0;
    transition: opacity 0.2s ease;
}

.admin-page.app-ready {
    opacity: 1;
}

/* ===========================================
   Install Prompt (for non-standalone)
   =========================================== */
.install-prompt {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(180deg, rgba(13, 13, 20, 0) 0%, var(--bg-dark, #0d0d14) 20%);
    padding: 30px 20px;
    padding-bottom: calc(var(--safe-area-bottom) + 20px);
    z-index: 9996;
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.install-prompt.visible {
    transform: translateY(0);
}

.install-prompt__card {
    background: var(--bg-card, #1a1a24);
    border-radius: 20px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.install-prompt__icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light, #e5c766) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.install-prompt__icon i {
    font-size: 24px;
    color: var(--bg-dark, #0d0d14);
}

.install-prompt__content {
    flex: 1;
}

.install-prompt__title {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 4px;
    color: white;
}

.install-prompt__text {
    font-size: 13px;
    color: var(--text-muted, #8a8a9a);
}

.install-prompt__actions {
    display: flex;
    gap: 8px;
}

.install-prompt__btn {
    padding: 10px 16px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: transform 0.2s;
}

.install-prompt__btn:active {
    transform: scale(0.95);
}

.install-prompt__btn--primary {
    background: var(--gold, #d4af37);
    color: var(--bg-dark, #0d0d14);
}

.install-prompt__btn--ghost {
    background: transparent;
    color: var(--text-muted, #8a8a9a);
}

/* ===========================================
   Badge Notification Counter
   =========================================== */
.notification-badge-count {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    background: #f44336;
    color: white;
    font-size: 10px;
    font-weight: 700;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    box-shadow: 0 2px 8px rgba(244, 67, 54, 0.4);
    animation: badge-pulse 2s infinite;
}

@keyframes badge-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* ===========================================
   Share Sheet Styling
   =========================================== */
.share-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bg-card, #1a1a24);
    border-radius: 20px 20px 0 0;
    padding: 20px;
    padding-bottom: calc(var(--safe-area-bottom) + 20px);
    z-index: 10002;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.share-sheet.visible {
    transform: translateY(0);
}

.share-sheet__handle {
    width: 40px;
    height: 4px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
    margin: 0 auto 20px;
}

.share-sheet__title {
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 20px;
    color: white;
}

.share-sheet__options {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.share-sheet__option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    padding: 12px;
    border-radius: 12px;
    transition: background 0.2s;
}

.share-sheet__option:active {
    background: rgba(255, 255, 255, 0.1);
}

.share-sheet__option-icon {
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.share-sheet__option-icon i {
    font-size: 20px;
}

.share-sheet__option-label {
    font-size: 11px;
    color: var(--text-muted, #8a8a9a);
}

/* ===========================================
   Responsive Adjustments
   =========================================== */
@media (max-width: 375px) {
    .toast {
        padding: 12px 16px;
        font-size: 13px;
    }

    .admin-modal__content {
        padding: 20px;
    }

    .update-banner {
        flex-direction: column;
        text-align: center;
    }
}

/* iPad and larger screens */
@media (min-width: 768px) {
    .update-banner {
        left: 50%;
        right: auto;
        transform: translateX(-50%) translateY(150%);
        min-width: 400px;
    }

    .update-banner.visible {
        transform: translateX(-50%) translateY(0);
    }

    #toastContainer {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        min-width: 350px;
    }
}

/**
 * DJ Prestige Sound - Admin Application CSS
 * Version 2.0.0
 */

/* ===========================================
   Variables
   =========================================== */
:root {
    --gold: #d4af37;
    --gold-light: #e5c766;
    --gold-dark: #b8962e;
    --bg-dark: #0d0d14;
    --bg-card: #1a1a24;
    --bg-card-hover: #22222e;
    --bg-input: #12121a;
    --text-primary: #ffffff;
    --text-secondary: #c0c0c8;
    --text-muted: #8a8a9a;
    --border-color: #2a2a3a;
    --success: #4CAF50;
    --error: #f44336;
    --warning: #ff9800;
    --info: #2196F3;
    --safe-area-top: env(safe-area-inset-top, 0px);
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
}

/* ===========================================
   Base Styles
   =========================================== */
.admin-page {
    background: var(--bg-dark);
    color: var(--text-primary);
    min-height: 100vh;
    padding-bottom: calc(80px + var(--safe-area-bottom));
}

/* ===========================================
   Header
   =========================================== */
.admin-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: rgba(13, 13, 20, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 12px 16px;
    padding-top: calc(var(--safe-area-top) + 12px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border-color);
}

.admin-header__left,
.admin-header__right {
    width: 50px;
    display: flex;
    align-items: center;
}

.admin-header__right {
    justify-content: flex-end;
}

.admin-header__center {
    flex: 1;
    text-align: center;
}

.admin-header__title {
    font-size: 17px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
}

.admin-header__title i {
    color: var(--gold);
    font-size: 14px;
}

.admin-header__back {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold);
    text-decoration: none;
    border-radius: 10px;
    transition: background 0.2s;
}

.admin-header__back:active {
    background: rgba(255, 255, 255, 0.1);
}

.admin-header__logo-img {
    height: 32px;
    width: auto;
}

.admin-header__icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: 10px;
    position: relative;
    transition: background 0.2s;
}

.admin-header__icon:active {
    background: rgba(255, 255, 255, 0.1);
}

.admin-header__badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    background: var(--error);
    color: white;
    font-size: 10px;
    font-weight: 700;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

/* ===========================================
   Content
   =========================================== */
.admin-content {
    padding: 16px;
    padding-top: calc(var(--safe-area-top) + 70px);
    min-height: 100vh;
}

/* ===========================================
   Section
   =========================================== */
.admin-section {
    margin-bottom: 24px;
}

.admin-section__title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.admin-section__title i {
    color: var(--gold);
}

.admin-section__title--danger {
    color: var(--error);
}

.admin-section__title--danger i {
    color: var(--error);
}

/* ===========================================
   Cards
   =========================================== */
.admin-card {
    background: var(--bg-card);
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: inherit;
    transition: background 0.2s, transform 0.2s;
}

.admin-card--clickable:active {
    background: var(--bg-card-hover);
    transform: scale(0.98);
}

.admin-card--danger {
    border-left: 3px solid var(--error);
}

.admin-card__body {
    flex: 1;
    min-width: 0;
}

.admin-card__title {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 4px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-card__subtitle {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0 0 4px 0;
}

.admin-card__meta {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
}

.admin-card__separator {
    margin: 0 6px;
    opacity: 0.5;
}

.admin-card__amount {
    font-size: 16px;
    font-weight: 600;
    color: var(--gold);
}

.admin-card__rank {
    font-size: 18px;
    font-weight: 700;
    color: var(--gold);
    min-width: 32px;
}

.admin-card-list {
    display: flex;
    flex-direction: column;
}

/* ===========================================
   Form Card
   =========================================== */
.admin-form-card {
    background: var(--bg-card);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 16px;
}

.admin-form-card__hint {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 12px;
    text-align: center;
}

/* ===========================================
   Menu
   =========================================== */
.admin-menu {
    background: var(--bg-card);
    border-radius: 16px;
    overflow: hidden;
}

.admin-menu__item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    text-decoration: none;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
    transition: background 0.2s;
}

.admin-menu__item:last-child {
    border-bottom: none;
}

.admin-menu__item:active {
    background: var(--bg-card-hover);
}

.admin-menu__icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.admin-menu__icon--gold { background: rgba(212, 175, 55, 0.15); color: var(--gold); }
.admin-menu__icon--blue { background: rgba(33, 150, 243, 0.15); color: #2196F3; }
.admin-menu__icon--green { background: rgba(76, 175, 80, 0.15); color: #4CAF50; }
.admin-menu__icon--red { background: rgba(244, 67, 54, 0.15); color: #f44336; }
.admin-menu__icon--purple { background: rgba(156, 39, 176, 0.15); color: #9C27B0; }
.admin-menu__icon--orange { background: rgba(255, 152, 0, 0.15); color: #ff9800; }

.admin-menu__content {
    flex: 1;
}

.admin-menu__label {
    display: block;
    font-size: 15px;
    font-weight: 500;
}

.admin-menu__desc {
    display: block;
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 2px;
}

.admin-menu__item > i:last-child {
    color: var(--text-muted);
    font-size: 12px;
}

/* ===========================================
   User Card
   =========================================== */
.admin-user-card {
    background: linear-gradient(135deg, var(--bg-card) 0%, #252535 100%);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.admin-user-card__avatar {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.admin-user-card__avatar span {
    font-size: 24px;
    font-weight: 700;
    color: var(--bg-dark);
}

.admin-user-card__info h3 {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 4px 0;
}

.admin-user-card__info p {
    font-size: 14px;
    color: var(--text-muted);
    margin: 0;
}

/* ===========================================
   Hero Card
   =========================================== */
.admin-hero-card {
    background: linear-gradient(135deg, var(--gold-dark) 0%, var(--gold) 50%, var(--gold-light) 100%);
    border-radius: 20px;
    padding: 24px;
    text-align: center;
    margin-bottom: 20px;
    color: var(--bg-dark);
}

.admin-hero-card__title {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 8px 0;
}

.admin-hero-card__subtitle {
    font-size: 14px;
    opacity: 0.8;
    margin: 0;
}

/* ===========================================
   Stats
   =========================================== */
.admin-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.admin-stat {
    background: var(--bg-card);
    border-radius: 16px;
    padding: 16px;
}

.admin-stat__content {
    text-align: center;
}

.admin-stat__value {
    display: block;
    font-size: 24px;
    font-weight: 700;
    color: var(--gold);
    margin-bottom: 4px;
}

.admin-stat__label {
    display: block;
    font-size: 12px;
    color: var(--text-muted);
    text-transform: uppercase;
}

/* ===========================================
   KPI Hero
   =========================================== */
.admin-kpi-hero {
    background: var(--bg-card);
    border-radius: 20px;
    padding: 30px;
    text-align: center;
    margin-bottom: 20px;
}

.admin-kpi-hero__value {
    display: block;
    font-size: 42px;
    font-weight: 700;
    color: var(--gold);
    margin-bottom: 8px;
}

.admin-kpi-hero__label {
    font-size: 14px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ===========================================
   Badges
   =========================================== */
.admin-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.admin-badge--success { background: rgba(76, 175, 80, 0.15); color: #4CAF50; }
.admin-badge--error { background: rgba(244, 67, 54, 0.15); color: #f44336; }
.admin-badge--warning { background: rgba(255, 152, 0, 0.15); color: #ff9800; }
.admin-badge--info { background: rgba(33, 150, 243, 0.15); color: #2196F3; }
.admin-badge--ghost { background: rgba(255, 255, 255, 0.1); color: var(--text-secondary); }

/* ===========================================
   Buttons
   =========================================== */
.admin-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 24px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: transform 0.2s, opacity 0.2s;
}

.admin-btn:active {
    transform: scale(0.98);
}

.admin-btn--primary {
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);
    color: var(--bg-dark);
}

.admin-btn--secondary {
    background: var(--bg-card);
    color: var(--text-primary);
}

.admin-btn--danger {
    background: var(--error);
    color: white;
}

.admin-btn--ghost {
    background: transparent;
    color: var(--text-secondary);
}

.admin-btn--full {
    width: 100%;
}

.admin-btn--small {
    padding: 10px 16px;
    font-size: 13px;
}

/* ===========================================
   Form Actions
   =========================================== */
.admin-form-actions {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ===========================================
   Period Selector
   =========================================== */
.admin-period-selector {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    overflow-x: auto;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
}

.admin-period-btn {
    flex-shrink: 0;
    padding: 10px 16px;
    background: var(--bg-card);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}

.admin-period-btn--active {
    background: var(--gold);
    color: var(--bg-dark);
}

/* ===========================================
   Chart Bar
   =========================================== */
.admin-chart-bar {
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    height: 150px;
    gap: 8px;
}

.admin-chart-bar__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
}

.admin-chart-bar__fill {
    width: 100%;
    max-width: 40px;
    background: linear-gradient(180deg, var(--gold) 0%, var(--gold-dark) 100%);
    border-radius: 6px 6px 0 0;
    margin-top: auto;
    min-height: 10px;
    transition: height 0.5s ease;
}

.admin-chart-bar__label {
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 8px;
    text-align: center;
}

/* ===========================================
   Confirm Card
   =========================================== */
.admin-confirm-card {
    background: var(--bg-card);
    border-radius: 20px;
    padding: 30px;
    text-align: center;
    max-width: 400px;
    margin: 40px auto;
}

.admin-confirm-card--danger {
    border-top: 4px solid var(--error);
}

.admin-confirm-card__icon {
    width: 70px;
    height: 70px;
    background: rgba(244, 67, 54, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.admin-confirm-card__icon i {
    font-size: 32px;
    color: var(--error);
}

.admin-confirm-card__title {
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 16px 0;
}

.admin-confirm-card__message {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0 0 16px 0;
    line-height: 1.5;
}

.admin-confirm-card__warning {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0 0 24px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.admin-confirm-card__actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}

/* ===========================================
   Alerts
   =========================================== */
.admin-alert {
    padding: 14px 16px;
    border-radius: 12px;
    font-size: 14px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: opacity 0.3s, transform 0.3s;
}

.admin-alert--success {
    background: rgba(76, 175, 80, 0.15);
    color: #4CAF50;
    border: 1px solid rgba(76, 175, 80, 0.3);
}

.admin-alert--error {
    background: rgba(244, 67, 54, 0.15);
    color: #f44336;
    border: 1px solid rgba(244, 67, 54, 0.3);
}

.admin-alert--warning {
    background: rgba(255, 152, 0, 0.15);
    color: #ff9800;
    border: 1px solid rgba(255, 152, 0, 0.3);
}

/* ===========================================
   Bottom Navigation
   =========================================== */
.admin-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(13, 13, 20, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding-bottom: var(--safe-area-bottom);
    border-top: 1px solid var(--border-color);
    z-index: 100;
    transition: transform 0.3s ease;
}

.admin-nav--hidden {
    transform: translateY(100%);
}

.admin-nav__inner {
    display: flex;
    justify-content: space-around;
    padding: 8px 0;
}

.admin-nav__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 16px;
    text-decoration: none;
    color: var(--text-muted);
    transition: color 0.2s;
    position: relative;
}

.admin-nav__item--active {
    color: var(--gold);
}

.admin-nav__item--active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 3px;
    background: var(--gold);
    border-radius: 0 0 3px 3px;
}

.admin-nav__icon {
    font-size: 20px;
}

.admin-nav__label {
    font-size: 10px;
    font-weight: 500;
}

/* ===========================================
   Forms
   =========================================== */
.admin-form-group {
    margin-bottom: 20px;
}

.admin-form-label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.admin-form-input,
.admin-form-select,
.admin-form-textarea {
    width: 100%;
    padding: 14px 16px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    font-size: 15px;
    color: var(--text-primary);
    transition: border-color 0.2s;
}

.admin-form-input:focus,
.admin-form-select:focus,
.admin-form-textarea:focus {
    outline: none;
    border-color: var(--gold);
}

.admin-form-textarea {
    min-height: 100px;
    resize: vertical;
}

/* ===========================================
   Empty State
   =========================================== */
.admin-empty {
    text-align: center;
    padding: 40px 20px;
}

.admin-empty__icon {
    font-size: 48px;
    color: var(--text-muted);
    margin-bottom: 16px;
    opacity: 0.5;
}

.admin-empty__title {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 8px 0;
}

.admin-empty__text {
    font-size: 14px;
    color: var(--text-muted);
    margin: 0;
}
/**
 * DJ Prestige Sound - Admin CSS Additions
 * Classes manquantes pour dashboard et autres pages
 */

/* ===========================================
   Stats avec icônes
   =========================================== */
.admin-stat {
    background: var(--bg-card);
    border-radius: 16px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.admin-stat__icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.admin-stat__icon--blue { background: rgba(33, 150, 243, 0.15); color: #2196F3; }
.admin-stat__icon--green { background: rgba(76, 175, 80, 0.15); color: #4CAF50; }
.admin-stat__icon--purple { background: rgba(156, 39, 176, 0.15); color: #9C27B0; }
.admin-stat__icon--gold { background: rgba(212, 175, 55, 0.15); color: var(--gold); }
.admin-stat__icon--red { background: rgba(244, 67, 54, 0.15); color: #f44336; }
.admin-stat__icon--orange { background: rgba(255, 152, 0, 0.15); color: #ff9800; }

.admin-stat__content {
    flex: 1;
    min-width: 0;
}

.admin-stat__value {
    display: block;
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

.admin-stat__label {
    display: block;
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* ===========================================
   Section Header avec bouton
   =========================================== */
.admin-section__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.admin-section__header .admin-section__title {
    margin-bottom: 0;
}

/* ===========================================
   Quick Actions Grid
   =========================================== */
.admin-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.admin-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 20px 16px;
    background: var(--bg-card);
    border-radius: 16px;
    text-decoration: none;
    color: var(--text-primary);
    transition: transform 0.2s, background 0.2s;
}

.admin-action:active {
    transform: scale(0.97);
    background: var(--bg-card-hover);
}

.admin-action i {
    font-size: 24px;
}

.admin-action span {
    font-size: 13px;
    font-weight: 500;
    text-align: center;
}

.admin-action--blue i { color: #2196F3; }
.admin-action--green i { color: #4CAF50; }
.admin-action--purple i { color: #9C27B0; }
.admin-action--gold i { color: var(--gold); }
.admin-action--red i { color: #f44336; }
.admin-action--orange i { color: #ff9800; }

/* ===========================================
   Card avec Date
   =========================================== */
.admin-card__date {
    width: 50px;
    height: 54px;
    background: var(--bg-input);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.admin-card__date--today {
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);
}

.admin-card__date--today .admin-card__day,
.admin-card__date--today .admin-card__month {
    color: var(--bg-dark);
}

.admin-card__day {
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    color: var(--text-primary);
}

.admin-card__month {
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-top: 2px;
}

.admin-card__status {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    flex-shrink: 0;
}

.admin-card__subtitle {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0 0 4px 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.admin-card__subtitle i {
    font-size: 12px;
    color: var(--text-muted);
}

.admin-card__meta i {
    font-size: 11px;
    margin-right: 4px;
    color: var(--text-muted);
}

/* ===========================================
   Badge variants
   =========================================== */
.admin-badge--gold { background: rgba(212, 175, 55, 0.15); color: var(--gold); }
.admin-badge--blue { background: rgba(33, 150, 243, 0.15); color: #2196F3; }
.admin-badge--green { background: rgba(76, 175, 80, 0.15); color: #4CAF50; }
.admin-badge--purple { background: rgba(156, 39, 176, 0.15); color: #9C27B0; }
.admin-badge--orange { background: rgba(255, 152, 0, 0.15); color: #ff9800; }

/* ===========================================
   Alert Card (clickable)
   =========================================== */
.admin-alert-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    background: var(--bg-card);
    border-radius: 16px;
    text-decoration: none;
    color: var(--text-primary);
    transition: transform 0.2s, background 0.2s;
}

.admin-alert-card:active {
    transform: scale(0.98);
    background: var(--bg-card-hover);
}

.admin-alert-card--warning {
    border-left: 4px solid var(--warning);
}

.admin-alert-card--error {
    border-left: 4px solid var(--error);
}

.admin-alert-card--success {
    border-left: 4px solid var(--success);
}

.admin-alert-card__icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.admin-alert-card--warning .admin-alert-card__icon {
    background: rgba(255, 152, 0, 0.15);
    color: var(--warning);
}

.admin-alert-card--error .admin-alert-card__icon {
    background: rgba(244, 67, 54, 0.15);
    color: var(--error);
}

.admin-alert-card__content {
    flex: 1;
}

.admin-alert-card__content strong {
    display: block;
    font-size: 15px;
    margin-bottom: 2px;
}

.admin-alert-card__content span {
    font-size: 13px;
    color: var(--text-muted);
}

.admin-alert-card > i:last-child {
    color: var(--text-muted);
    font-size: 14px;
}

/* ===========================================
   Floating Action Button
   =========================================== */
.admin-fab {
    position: fixed;
    bottom: calc(90px + var(--safe-area-bottom));
    right: 20px;
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bg-dark);
    font-size: 22px;
    text-decoration: none;
    box-shadow: 0 4px 20px rgba(212, 175, 55, 0.4);
    transition: transform 0.2s, box-shadow 0.2s;
    z-index: 50;
}

.admin-fab:active {
    transform: scale(0.95);
}

/* ===========================================
   Button variants
   =========================================== */
.admin-btn--sm {
    padding: 8px 14px;
    font-size: 13px;
    border-radius: 10px;
}

.admin-btn--ghost {
    background: transparent;
    color: var(--gold);
}

.admin-btn--ghost:active {
    background: rgba(212, 175, 55, 0.1);
}

/* ===========================================
   Empty State amélioration
   =========================================== */
.admin-empty {
    text-align: center;
    padding: 40px 20px;
    background: var(--bg-card);
    border-radius: 16px;
}

.admin-empty i {
    font-size: 48px;
    color: var(--text-muted);
    margin-bottom: 16px;
    opacity: 0.5;
}

.admin-empty p {
    font-size: 14px;
    color: var(--text-muted);
    margin: 0;
}

/* ===========================================
   Liste d'éléments avec flèche
   =========================================== */
.admin-list-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: var(--bg-card);
    border-radius: 12px;
    margin-bottom: 8px;
    text-decoration: none;
    color: var(--text-primary);
    transition: background 0.2s;
}

.admin-list-item:active {
    background: var(--bg-card-hover);
}

.admin-list-item__icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
    background: rgba(212, 175, 55, 0.15);
    color: var(--gold);
}

.admin-list-item__content {
    flex: 1;
    min-width: 0;
}

.admin-list-item__title {
    font-size: 15px;
    font-weight: 500;
    margin: 0 0 2px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-list-item__subtitle {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
}

.admin-list-item__arrow {
    color: var(--text-muted);
    font-size: 14px;
}

/* ===========================================
   Tabs / Filtres
   =========================================== */
.admin-tabs {
    display: flex;
    gap: 8px;
    padding: 4px;
    background: var(--bg-card);
    border-radius: 12px;
    margin-bottom: 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.admin-tab {
    flex: 1;
    padding: 10px 16px;
    background: transparent;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    white-space: nowrap;
    text-decoration: none;
    text-align: center;
}

.admin-tab--active,
.admin-tab.active {
    background: var(--gold);
    color: var(--bg-dark);
}

/* ===========================================
   Search Bar
   =========================================== */
.admin-search {
    position: relative;
    margin-bottom: 16px;
}

.admin-search__input {
    width: 100%;
    padding: 14px 16px 14px 44px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    font-size: 15px;
    color: var(--text-primary);
}

.admin-search__input:focus {
    outline: none;
    border-color: var(--gold);
}

.admin-search__icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 16px;
}

/* ===========================================
   Info Grid (pour détails)
   =========================================== */
.admin-info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.admin-info-item {
    background: var(--bg-input);
    padding: 14px;
    border-radius: 12px;
}

.admin-info-item--full {
    grid-column: span 2;
}

.admin-info-item__label {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.admin-info-item__value {
    font-size: 15px;
    color: var(--text-primary);
    font-weight: 500;
}

.admin-info-item__value a {
    color: var(--gold);
    text-decoration: none;
}

/* ===========================================
   Timeline
   =========================================== */
.admin-timeline {
    position: relative;
    padding-left: 24px;
}

.admin-timeline::before {
    content: '';
    position: absolute;
    left: 7px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--border-color);
}

.admin-timeline__item {
    position: relative;
    padding-bottom: 20px;
}

.admin-timeline__item::before {
    content: '';
    position: absolute;
    left: -20px;
    top: 4px;
    width: 10px;
    height: 10px;
    background: var(--gold);
    border-radius: 50%;
}

.admin-timeline__date {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.admin-timeline__content {
    font-size: 14px;
    color: var(--text-secondary);
}

/* ===========================================
   Table responsive
   =========================================== */
.admin-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 12px;
    background: var(--bg-card);
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.admin-table th,
.admin-table td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.admin-table th {
    font-weight: 600;
    color: var(--text-muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.admin-table tr:last-child td {
    border-bottom: none;
}

.admin-table tbody tr:active {
    background: var(--bg-card-hover);
}

/* ===========================================
   Switch Toggle
   =========================================== */
.admin-switch {
    position: relative;
    width: 50px;
    height: 28px;
}

.admin-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.admin-switch__slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-input);
    border-radius: 14px;
    transition: background 0.3s;
}

.admin-switch__slider::before {
    content: '';
    position: absolute;
    height: 22px;
    width: 22px;
    left: 3px;
    bottom: 3px;
    background: white;
    border-radius: 50%;
    transition: transform 0.3s;
}

.admin-switch input:checked + .admin-switch__slider {
    background: var(--gold);
}

.admin-switch input:checked + .admin-switch__slider::before {
    transform: translateX(22px);
}

/* ===========================================
   Divider
   =========================================== */
.admin-divider {
    height: 1px;
    background: var(--border-color);
    margin: 20px 0;
}

/* ===========================================
   Chevron pour navigation
   =========================================== */
.admin-card > .fa-chevron-right,
.admin-menu__item > .fa-chevron-right {
    color: var(--text-muted);
    font-size: 12px;
    flex-shrink: 0;
}
/**
 * DJ Prestige Sound - Events Page CSS
 */

/* ===========================================
   Filters Container
   =========================================== */
.admin-filters {
    margin-bottom: 16px;
}

.admin-search {
    position: relative;
    margin-bottom: 12px;
}

.admin-search > i {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 14px;
    pointer-events: none;
}

.admin-search__input {
    width: 100%;
    padding: 12px 16px 12px 44px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    font-size: 15px;
    color: var(--text-primary);
}

.admin-search__input::placeholder {
    color: var(--text-muted);
}

.admin-search__input:focus {
    outline: none;
    border-color: var(--gold);
}

/* ===========================================
   Filter Chips
   =========================================== */
.admin-filter-chips {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
}

.admin-chip {
    flex-shrink: 0;
    padding: 8px 14px;
    background: var(--bg-card);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
    white-space: nowrap;
}

.admin-chip--active {
    background: var(--gold);
    color: var(--bg-dark);
}

.admin-chip:active {
    opacity: 0.8;
}

/* ===========================================
   Mini Stats Row
   =========================================== */
.admin-mini-stats {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
}

.admin-mini-stat {
    flex: 1;
    background: var(--bg-card);
    border-radius: 12px;
    padding: 12px;
    text-align: center;
}

.admin-mini-stat--highlight {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.15) 0%, rgba(212, 175, 55, 0.05) 100%);
    border: 1px solid rgba(212, 175, 55, 0.3);
}

.admin-mini-stat__value {
    display: block;
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
}

.admin-mini-stat--highlight .admin-mini-stat__value {
    color: var(--gold);
}

.admin-mini-stat__label {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
    text-transform: uppercase;
}

/* ===========================================
   Section Featured
   =========================================== */
.admin-section--featured {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.08) 0%, transparent 100%);
    margin: 0 -16px 24px;
    padding: 16px;
    border-radius: 0;
}

.admin-section__title--featured {
    color: var(--gold);
}

.admin-section__title--featured i {
    color: var(--gold);
}

.admin-section__title--sticky {
    position: sticky;
    top: calc(var(--safe-area-top) + 60px);
    background: var(--bg-dark);
    padding: 8px 0;
    margin: 0 -16px 12px;
    padding-left: 16px;
    z-index: 10;
}

.admin-section__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 11px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-left: 8px;
}

.admin-section__title--featured .admin-section__count {
    background: rgba(212, 175, 55, 0.2);
    color: var(--gold);
}

/* ===========================================
   Card Variants for Events
   =========================================== */
.admin-card--featured {
    border-left: 3px solid var(--gold);
}

.admin-card--today {
    background: linear-gradient(135deg, var(--bg-card) 0%, rgba(212, 175, 55, 0.1) 100%);
}

.admin-card--past {
    opacity: 0.6;
}

.admin-card--past .admin-card__title {
    text-decoration: line-through;
    text-decoration-color: var(--text-muted);
}

.admin-card__weekday {
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-top: 2px;
}

.admin-card__date--today .admin-card__weekday {
    color: var(--bg-dark);
}

.admin-card__date--urgent {
    background: linear-gradient(135deg, var(--error) 0%, #ff6b6b 100%);
}

.admin-card__date--urgent .admin-card__day,
.admin-card__date--urgent .admin-card__weekday {
    color: white;
}

.admin-card__end {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    flex-shrink: 0;
    min-width: 70px;
}

/* ===========================================
   Countdown Badge
   =========================================== */
.admin-countdown {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    padding: 4px 8px;
    background: var(--bg-input);
    border-radius: 6px;
}

.admin-countdown--urgent {
    background: rgba(244, 67, 54, 0.15);
    color: var(--error);
}

.admin-countdown--soon {
    background: rgba(255, 152, 0, 0.15);
    color: var(--warning);
}

/* ===========================================
   Card Alert Icon
   =========================================== */
.admin-card__alert {
    color: var(--warning);
    font-size: 14px;
}

/* ===========================================
   Card Price
   =========================================== */
.admin-card__price {
    font-size: 13px;
    font-weight: 600;
    color: var(--gold);
}

/* ===========================================
   Text Utilities
   =========================================== */
.admin-text--muted {
    color: var(--text-muted);
    font-style: italic;
}

.admin-text--gold {
    color: var(--gold);
}

.admin-text--success {
    color: var(--success);
}

.admin-text--error {
    color: var(--error);
}

/* ===========================================
   Tabs amélioration (icônes)
   =========================================== */
.admin-tab i {
    margin-right: 6px;
    font-size: 12px;
}

/* ===========================================
   Empty state avec bouton
   =========================================== */
.admin-empty .admin-btn {
    margin-top: 16px;
}
/**
 * DJ Prestige Sound - Clients & Invoices CSS
 */

/* ===========================================
   Sort Dropdown
   =========================================== */
.admin-sort {
    margin-top: 12px;
}

.admin-select {
    width: 100%;
    padding: 12px 16px;
    padding-right: 40px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    font-size: 15px;
    color: var(--text-primary);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a8a9a' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    cursor: pointer;
}

.admin-select:focus {
    outline: none;
    border-color: var(--gold);
}

.admin-select--sm {
    padding: 10px 14px;
    padding-right: 36px;
    font-size: 14px;
    border-radius: 10px;
}

/* ===========================================
   Card Avatar
   =========================================== */
.admin-card__avatar {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.admin-card__avatar span {
    font-size: 16px;
    font-weight: 700;
    color: var(--bg-dark);
}

/* ===========================================
   Card Icon (pour factures)
   =========================================== */
.admin-card__icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 18px;
}

/* ===========================================
   Card Stat
   =========================================== */
.admin-card__stat {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: var(--text-muted);
}

.admin-card__stat i {
    font-size: 12px;
    color: var(--gold);
}

/* ===========================================
   Card Price Large
   =========================================== */
.admin-card__price--large {
    font-size: 16px;
    font-weight: 700;
}

/* ===========================================
   Stats Compact (2 columns)
   =========================================== */
.admin-stats--compact {
    grid-template-columns: repeat(2, 1fr);
    margin-bottom: 16px;
}

.admin-stats--compact .admin-stat {
    padding: 14px;
}

.admin-stats--compact .admin-stat__value {
    font-size: 20px;
}

/* ===========================================
   Stats Color Variants
   =========================================== */
.admin-stat--green {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.1) 0%, rgba(76, 175, 80, 0.05) 100%);
    border: 1px solid rgba(76, 175, 80, 0.2);
}

.admin-stat--green .admin-stat__value {
    color: #4CAF50;
}

.admin-stat--orange {
    background: linear-gradient(135deg, rgba(255, 152, 0, 0.1) 0%, rgba(255, 152, 0, 0.05) 100%);
    border: 1px solid rgba(255, 152, 0, 0.2);
}

.admin-stat--orange .admin-stat__value {
    color: #ff9800;
}

.admin-stat--blue {
    background: linear-gradient(135deg, rgba(33, 150, 243, 0.1) 0%, rgba(33, 150, 243, 0.05) 100%);
    border: 1px solid rgba(33, 150, 243, 0.2);
}

.admin-stat--blue .admin-stat__value {
    color: #2196F3;
}

.admin-stat--red {
    background: linear-gradient(135deg, rgba(244, 67, 54, 0.1) 0%, rgba(244, 67, 54, 0.05) 100%);
    border: 1px solid rgba(244, 67, 54, 0.2);
}

.admin-stat--red .admin-stat__value {
    color: #f44336;
}

/* ===========================================
   Detail Page Styles
   =========================================== */
.admin-detail-header {
    text-align: center;
    padding: 20px;
    margin-bottom: 20px;
}

.admin-detail-header__avatar {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

.admin-detail-header__avatar span {
    font-size: 28px;
    font-weight: 700;
    color: var(--bg-dark);
}

.admin-detail-header__avatar i {
    font-size: 32px;
    color: var(--bg-dark);
}

.admin-detail-header__title {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 8px;
}

.admin-detail-header__subtitle {
    font-size: 14px;
    color: var(--text-muted);
    margin: 0;
}

/* ===========================================
   Action Buttons Grid
   =========================================== */
.admin-action-buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 20px;
}

.admin-action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 8px;
    background: var(--bg-card);
    border-radius: 12px;
    text-decoration: none;
    color: var(--text-primary);
    transition: background 0.2s, transform 0.2s;
    border: none;
    cursor: pointer;
}

.admin-action-btn:active {
    background: var(--bg-card-hover);
    transform: scale(0.97);
}

.admin-action-btn i {
    font-size: 20px;
}

.admin-action-btn span {
    font-size: 11px;
    color: var(--text-muted);
}

.admin-action-btn--gold i { color: var(--gold); }
.admin-action-btn--blue i { color: #2196F3; }
.admin-action-btn--green i { color: #4CAF50; }
.admin-action-btn--red i { color: #f44336; }

/* ===========================================
   Form Create Styles
   =========================================== */
.admin-form {
    background: var(--bg-card);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 20px;
}

.admin-form__title {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 10px;
}

.admin-form__title i {
    color: var(--gold);
}

.admin-form__row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.admin-form__row--full {
    grid-template-columns: 1fr;
}

/* ===========================================
   Phone/Email Links
   =========================================== */
.admin-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--gold);
    text-decoration: none;
}

.admin-link:active {
    opacity: 0.7;
}

.admin-link i {
    font-size: 12px;
}

/* ===========================================
   Status Badge Inline
   =========================================== */
.admin-status-inline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
}

/* ===========================================
   Amount Display
   =========================================== */
.admin-amount {
    font-size: 32px;
    font-weight: 700;
    color: var(--gold);
    text-align: center;
    margin: 20px 0;
}

.admin-amount__label {
    display: block;
    font-size: 13px;
    color: var(--text-muted);
    font-weight: 400;
    margin-top: 4px;
}

/* ===========================================
   Notes/Comments
   =========================================== */
.admin-notes {
    background: var(--bg-input);
    border-radius: 12px;
    padding: 16px;
    margin-top: 16px;
}

.admin-notes__title {
    font-size: 12px;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: 8px;
}

.admin-notes__content {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.5;
    white-space: pre-wrap;
}
/**
 * DJ Prestige Sound - Settings & Other Pages CSS
 */

/* ===========================================
   Menu Icon Colors (additions)
   =========================================== */
.admin-menu__icon--pink {
    background: rgba(233, 30, 99, 0.15);
    color: #E91E63;
}

.admin-menu__icon--cyan {
    background: rgba(0, 188, 212, 0.15);
    color: #00BCD4;
}

/* Default icon (no color) */
.admin-menu__icon:not([class*="--"]) {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
}

/* ===========================================
   Menu Item Danger
   =========================================== */
.admin-menu__item--danger:active {
    background: rgba(244, 67, 54, 0.1);
}

/* ===========================================
   Version Footer
   =========================================== */
.admin-version {
    text-align: center;
    font-size: 12px;
    color: var(--text-muted);
    margin: 30px 0 20px;
    padding: 0 20px;
    line-height: 1.6;
}

/* ===========================================
   Notification Page Styles
   =========================================== */
.admin-notification-list {
    display: flex;
    flex-direction: column;
}

.admin-notification {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px;
    background: var(--bg-card);
    margin-bottom: 8px;
    border-radius: 12px;
    text-decoration: none;
    color: var(--text-primary);
    transition: background 0.2s;
}

.admin-notification:active {
    background: var(--bg-card-hover);
}

.admin-notification--unread {
    border-left: 3px solid var(--gold);
}

.admin-notification__icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
    background: rgba(212, 175, 55, 0.15);
    color: var(--gold);
}

.admin-notification__content {
    flex: 1;
    min-width: 0;
}

.admin-notification__title {
    font-size: 14px;
    font-weight: 500;
    margin: 0 0 4px;
}

.admin-notification__text {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.4;
}

.admin-notification__time {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 6px;
}

/* ===========================================
   Stats Page
   =========================================== */
.admin-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

.admin-stats-grid--3cols {
    grid-template-columns: repeat(3, 1fr);
}

.admin-stat-card {
    background: var(--bg-card);
    border-radius: 16px;
    padding: 20px;
    text-align: center;
}

.admin-stat-card__icon {
    width: 48px;
    height: 48px;
    background: rgba(212, 175, 55, 0.15);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
    font-size: 20px;
    color: var(--gold);
}

.admin-stat-card__value {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.admin-stat-card__label {
    font-size: 12px;
    color: var(--text-muted);
    text-transform: uppercase;
}

/* ===========================================
   Equipment Page
   =========================================== */
.admin-equipment-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    background: var(--bg-card);
    border-radius: 12px;
    margin-bottom: 8px;
}

.admin-equipment-item__image {
    width: 60px;
    height: 60px;
    border-radius: 10px;
    object-fit: cover;
    background: var(--bg-input);
}

.admin-equipment-item__info {
    flex: 1;
}

.admin-equipment-item__name {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 4px;
}

.admin-equipment-item__details {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
}

.admin-equipment-item__status {
    flex-shrink: 0;
}

/* ===========================================
   Expense Page
   =========================================== */
.admin-expense-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    background: var(--bg-card);
    border-radius: 12px;
    margin-bottom: 8px;
    text-decoration: none;
    color: var(--text-primary);
}

.admin-expense-item__icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    background: rgba(255, 152, 0, 0.15);
    color: var(--warning);
}

.admin-expense-item__info {
    flex: 1;
    min-width: 0;
}

.admin-expense-item__title {
    font-size: 15px;
    font-weight: 500;
    margin: 0 0 2px;
}

.admin-expense-item__date {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
}

.admin-expense-item__amount {
    font-size: 16px;
    font-weight: 600;
    color: var(--error);
}

/* ===========================================
   Quote Page (similar to invoice)
   =========================================== */
.admin-quote-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.admin-quote-status--draft {
    background: rgba(108, 117, 125, 0.15);
    color: #6c757d;
}

.admin-quote-status--sent {
    background: rgba(33, 150, 243, 0.15);
    color: #2196F3;
}

.admin-quote-status--accepted {
    background: rgba(76, 175, 80, 0.15);
    color: #4CAF50;
}

.admin-quote-status--rejected {
    background: rgba(244, 67, 54, 0.15);
    color: #f44336;
}

/* ===========================================
   Loading Spinner
   =========================================== */
.admin-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border-color);
    border-top-color: var(--gold);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 40px auto;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ===========================================
   Progress Bar
   =========================================== */
.admin-progress {
    height: 8px;
    background: var(--bg-input);
    border-radius: 4px;
    overflow: hidden;
    margin: 12px 0;
}

.admin-progress__bar {
    height: 100%;
    background: linear-gradient(90deg, var(--gold) 0%, var(--gold-light) 100%);
    border-radius: 4px;
    transition: width 0.5s ease;
}

/* ===========================================
   No Data Placeholder
   =========================================== */
.admin-no-data {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted);
}

.admin-no-data i {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.3;
}

.admin-no-data p {
    font-size: 15px;
    margin: 0;
}
/**
 * DJ Prestige Sound - Detail Pages CSS
 * For event-detail.php, client-detail.php, invoice-detail.php
 */

/* ===========================================
   Detail Header - Date variant (for events)
   =========================================== */
.admin-detail-header__date {
    width: 80px;
    height: 90px;
    background: var(--bg-card);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.admin-detail-header__date--today {
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);
}

.admin-detail-header__date--today .admin-detail-header__day,
.admin-detail-header__date--today .admin-detail-header__month,
.admin-detail-header__date--today .admin-detail-header__year {
    color: var(--bg-dark);
}

.admin-detail-header__date--past {
    opacity: 0.6;
}

.admin-detail-header__day {
    font-size: 32px;
    font-weight: 700;
    line-height: 1;
    color: var(--text-primary);
}

.admin-detail-header__month {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-top: 4px;
    text-transform: capitalize;
}

.admin-detail-header__year {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* ===========================================
   Detail Header - Icon variant (for invoices)
   =========================================== */
.admin-detail-header__icon {
    width: 80px;
    height: 80px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    flex-shrink: 0;
}

/* ===========================================
   Detail Header - Info section
   =========================================== */
.admin-detail-header__info {
    flex: 1;
    min-width: 0;
}

.admin-detail-header__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

/* ===========================================
   Detail Header - Amount (for invoices)
   =========================================== */
.admin-detail-header__amount {
    font-size: 24px;
    font-weight: 700;
    color: var(--gold);
    flex-shrink: 0;
}

/* ===========================================
   Detail Header - Centered (for clients)
   =========================================== */
.admin-detail-header--centered {
    flex-direction: column;
    text-align: center;
}

.admin-detail-header--centered .admin-detail-header__avatar {
    margin: 0 auto 16px;
}

.admin-detail-header__avatar--large {
    width: 100px;
    height: 100px;
    font-size: 36px;
    border-radius: 28px;
}

/* ===========================================
   Quick Actions (appeler, email, maps)
   =========================================== */
.admin-quick-actions {
    display: flex;
    gap: 10px;
    margin-bottom: 24px;
    padding: 0 4px;
}

.admin-quick-action {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 14px 8px;
    background: var(--bg-card);
    border-radius: 14px;
    text-decoration: none;
    color: var(--text-primary);
    transition: transform 0.2s, background 0.2s;
}

.admin-quick-action:active {
    transform: scale(0.96);
    background: var(--bg-card-hover);
}

.admin-quick-action i {
    font-size: 20px;
    color: var(--gold);
}

.admin-quick-action span {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    white-space: nowrap;
}

/* ===========================================
   Detail Grid (infos en grille)
   =========================================== */
.admin-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.admin-detail-item {
    background: var(--bg-input);
    border-radius: 12px;
    padding: 14px;
}

.admin-detail-item--full {
    grid-column: span 2;
}

.admin-detail-item--highlight {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.15) 0%, rgba(212, 175, 55, 0.05) 100%);
    border: 1px solid rgba(212, 175, 55, 0.3);
}

.admin-detail-item--highlight .admin-detail-item__value {
    color: var(--gold);
    font-weight: 600;
}

.admin-detail-item__label {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.admin-detail-item__value {
    font-size: 15px;
    color: var(--text-primary);
    font-weight: 500;
}

/* ===========================================
   Detail Content (texte libre)
   =========================================== */
.admin-detail-content {
    background: var(--bg-card);
    border-radius: 14px;
    padding: 16px;
}

.admin-detail-content p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-secondary);
}

.admin-detail-content--warning {
    background: rgba(255, 152, 0, 0.1);
    border-left: 4px solid var(--warning);
}

.admin-detail-content--info {
    background: var(--bg-input);
}

.admin-detail-content--info p {
    margin-bottom: 8px;
}

.admin-detail-content--info p:last-child {
    margin-bottom: 0;
}

/* ===========================================
   Detail Venue & Address
   =========================================== */
.admin-detail-venue {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 6px;
    color: var(--text-primary);
}

.admin-detail-address {
    font-size: 14px;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.5;
}

/* ===========================================
   Detail Client Card (clickable)
   =========================================== */
.admin-detail-client {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    background: var(--bg-card);
    border-radius: 14px;
    text-decoration: none;
    color: var(--text-primary);
    transition: background 0.2s;
}

.admin-detail-client:active {
    background: var(--bg-card-hover);
}

.admin-detail-client__avatar {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    color: var(--bg-dark);
    flex-shrink: 0;
}

.admin-detail-client__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.admin-detail-client__name {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}

.admin-detail-client__email,
.admin-detail-client__phone,
.admin-detail-client__address,
.admin-detail-client__vat {
    font-size: 13px;
    color: var(--text-muted);
}

.admin-detail-client > .fa-chevron-right {
    color: var(--text-muted);
    font-size: 14px;
}

/* ===========================================
   Detail List (services, etc)
   =========================================== */
.admin-detail-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.admin-detail-list__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: var(--bg-card);
    border-radius: 10px;
    font-size: 14px;
}

.admin-detail-list__item i {
    color: var(--success);
    font-size: 14px;
}

/* ===========================================
   Notes List
   =========================================== */
.admin-notes-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.admin-note {
    background: var(--bg-card);
    border-radius: 12px;
    padding: 14px;
    border-left: 3px solid var(--gold);
}

.admin-note__header {
    margin-bottom: 8px;
}

.admin-note__date {
    font-size: 12px;
    color: var(--text-muted);
}

.admin-note__content {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* ===========================================
   Invoice Items
   =========================================== */
.admin-invoice-items {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.admin-invoice-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px;
    background: var(--bg-card);
    border-radius: 12px;
}

.admin-invoice-item__desc {
    flex: 1;
    min-width: 0;
}

.admin-invoice-item__name {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.admin-invoice-item__qty {
    font-size: 12px;
    color: var(--text-muted);
}

.admin-invoice-item__total {
    font-size: 15px;
    font-weight: 600;
    color: var(--gold);
    flex-shrink: 0;
    margin-left: 12px;
}

/* ===========================================
   Communication structured
   =========================================== */
.admin-detail-communication {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
}

.admin-badge--large {
    font-size: 16px;
    padding: 10px 16px;
    letter-spacing: 1px;
}

/* ===========================================
   Status Buttons
   =========================================== */
.admin-status-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.admin-status-btn {
    flex: 1;
    min-width: 100px;
    padding: 12px 16px;
    background: var(--bg-card);
    border: 2px solid transparent;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    text-decoration: none;
    text-align: center;
    transition: all 0.2s;
}

.admin-status-btn:active {
    transform: scale(0.97);
}

.admin-status-btn--active {
    border-color: var(--status-color, var(--gold));
    background: color-mix(in srgb, var(--status-color, var(--gold)) 15%, transparent);
    color: var(--status-color, var(--gold));
}

/* ===========================================
   Badge Muted
   =========================================== */
.admin-badge--muted {
    background: rgba(108, 117, 125, 0.15);
    color: #6c757d;
}

/* ===========================================
   Stats Gold variant
   =========================================== */
.admin-stat--gold {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.1) 0%, rgba(212, 175, 55, 0.05) 100%);
    border: 1px solid rgba(212, 175, 55, 0.2);
}

.admin-stat--gold .admin-stat__value {
    color: var(--gold);
}

/* ===========================================
   Card List container
   =========================================== */
.admin-card-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ===========================================
   Card compact & clickable variants
   =========================================== */
.admin-card--compact {
    padding: 12px 14px;
}

.admin-card--clickable {
    cursor: pointer;
    text-decoration: none;
    color: var(--text-primary);
}

.admin-card--clickable:active {
    background: var(--bg-card-hover);
    transform: scale(0.99);
}

/* ===========================================
   Empty Small variant
   =========================================== */
.admin-empty--small {
    padding: 30px 20px;
}

.admin-empty--small i {
    font-size: 36px;
}

/* ===========================================
   Form Elements (for payment form)
   =========================================== */
.admin-form__group {
    margin-bottom: 16px;
}

.admin-label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.admin-input {
    width: 100%;
    padding: 14px 16px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    font-size: 15px;
    color: var(--text-primary);
    transition: border-color 0.2s;
}

.admin-input:focus {
    outline: none;
    border-color: var(--gold);
}

.admin-input::placeholder {
    color: var(--text-muted);
}

/* ===========================================
   Button Full Width
   =========================================== */
.admin-btn--full {
    width: 100%;
    justify-content: center;
}

/**
 * DJ Prestige Sound - Forms & Create Pages CSS
 * For event-create.php, client-create.php, invoice-create.php, etc.
 */

/* ===========================================
   Form Page Container
   =========================================== */
.admin-form-page {
    margin-bottom: 100px;
}

/* ===========================================
   Alert Messages
   =========================================== */
.admin-alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    border-radius: 14px;
    margin-bottom: 20px;
}

.admin-alert i {
    font-size: 20px;
    flex-shrink: 0;
    margin-top: 2px;
}

.admin-alert p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
}

.admin-alert ul {
    margin: 6px 0 0;
    padding-left: 18px;
    font-size: 14px;
}

.admin-alert ul li {
    margin-bottom: 4px;
}

.admin-alert--error {
    background: rgba(244, 67, 54, 0.12);
    border: 1px solid rgba(244, 67, 54, 0.3);
    color: #f44336;
}

.admin-alert--success {
    background: rgba(76, 175, 80, 0.12);
    border: 1px solid rgba(76, 175, 80, 0.3);
    color: #4CAF50;
}

.admin-alert--warning {
    background: rgba(255, 152, 0, 0.12);
    border: 1px solid rgba(255, 152, 0, 0.3);
    color: #ff9800;
}

.admin-alert--info {
    background: rgba(33, 150, 243, 0.12);
    border: 1px solid rgba(33, 150, 243, 0.3);
    color: #2196F3;
}

/* ===========================================
   Textarea
   =========================================== */
.admin-textarea {
    width: 100%;
    padding: 14px 16px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    font-size: 15px;
    color: var(--text-primary);
    font-family: inherit;
    resize: vertical;
    min-height: 80px;
    transition: border-color 0.2s;
}

.admin-textarea:focus {
    outline: none;
    border-color: var(--gold);
}

.admin-textarea::placeholder {
    color: var(--text-muted);
}

/* ===========================================
   Quick Type Buttons
   =========================================== */
.admin-quick-types {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.admin-quick-type {
    padding: 8px 14px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}

.admin-quick-type:active {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--bg-dark);
    transform: scale(0.96);
}

/* ===========================================
   Checkbox List & Items
   =========================================== */
.admin-checkbox-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.admin-checkbox-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--bg-card);
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.2s;
}

.admin-checkbox-item:active {
    background: var(--bg-card-hover);
}

.admin-checkbox-item input {
    display: none;
}

.admin-checkbox-item__check {
    width: 24px;
    height: 24px;
    border: 2px solid var(--border-color);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: transparent;
    transition: all 0.2s;
    flex-shrink: 0;
}

.admin-checkbox-item input:checked + .admin-checkbox-item__check {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--bg-dark);
}

.admin-checkbox-item__label {
    font-size: 15px;
    color: var(--text-primary);
}

/* ===========================================
   Form Actions (sticky bottom)
   =========================================== */
.admin-form-actions {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 16px;
    padding-bottom: calc(16px + var(--safe-area-bottom));
    background: var(--bg-dark);
    border-top: 1px solid var(--border-color);
    z-index: 100;
}

/* ===========================================
   Button Large variant
   =========================================== */
.admin-btn--large {
    padding: 16px 24px;
    font-size: 16px;
    border-radius: 14px;
}

.admin-btn--large i {
    font-size: 18px;
}

/* ===========================================
   Invoice Preview Card
   =========================================== */
.admin-invoice-preview {
    background: var(--bg-card);
    border-radius: 16px;
    overflow: hidden;
}

.admin-invoice-preview__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.15) 0%, rgba(212, 175, 55, 0.05) 100%);
    border-bottom: 1px solid var(--border-color);
}

.admin-invoice-preview__number {
    font-size: 16px;
    font-weight: 700;
    color: var(--gold);
}

.admin-invoice-preview__date {
    font-size: 14px;
    color: var(--text-muted);
}

.admin-invoice-preview__event {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.admin-invoice-preview__event strong {
    font-size: 15px;
    color: var(--text-primary);
}

.admin-invoice-preview__event span {
    font-size: 13px;
    color: var(--text-muted);
}

.admin-invoice-preview__client {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-color);
    font-size: 14px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 10px;
}

.admin-invoice-preview__client i {
    color: var(--text-muted);
}

.admin-invoice-preview__amounts {
    padding: 16px;
}

.admin-invoice-preview__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    font-size: 14px;
    color: var(--text-secondary);
}

.admin-invoice-preview__row--total {
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
    font-size: 18px;
    font-weight: 700;
    color: var(--gold);
}

.admin-invoice-preview__comm {
    padding: 14px 16px;
    background: var(--bg-input);
    font-size: 13px;
    color: var(--text-muted);
    text-align: center;
}

.admin-invoice-preview__comm strong {
    display: block;
    margin-top: 4px;
    font-size: 16px;
    color: var(--text-primary);
    letter-spacing: 1px;
}

/* ===========================================
   Radio Group (for status selection)
   =========================================== */
.admin-radio-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.admin-radio-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--bg-card);
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.2s;
}

.admin-radio-item input {
    display: none;
}

.admin-radio-item__circle {
    width: 22px;
    height: 22px;
    border: 2px solid var(--border-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s;
}

.admin-radio-item__circle::after {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: transparent;
    transition: background 0.2s;
}

.admin-radio-item input:checked + .admin-radio-item__circle {
    border-color: var(--gold);
}

.admin-radio-item input:checked + .admin-radio-item__circle::after {
    background: var(--gold);
}

.admin-radio-item__label {
    font-size: 15px;
    color: var(--text-primary);
}

/* ===========================================
   File Input Styling
   =========================================== */
.admin-file-input {
    display: block;
}

.admin-file-input input[type="file"] {
    display: none;
}

.admin-file-input__button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px;
    background: var(--bg-input);
    border: 2px dashed var(--border-color);
    border-radius: 12px;
    font-size: 14px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}

.admin-file-input__button:active {
    background: var(--bg-card-hover);
    border-color: var(--gold);
}

.admin-file-input__button i {
    font-size: 20px;
    color: var(--gold);
}

/* ===========================================
   Date Picker enhancement
   =========================================== */
.admin-input[type="date"],
.admin-input[type="time"] {
    padding-right: 12px;
}

.admin-input[type="date"]::-webkit-calendar-picker-indicator,
.admin-input[type="time"]::-webkit-calendar-picker-indicator {
    filter: invert(0.7);
    opacity: 0.6;
    cursor: pointer;
}

/* ===========================================
   Number Input with arrows
   =========================================== */
.admin-input[type="number"] {
    -moz-appearance: textfield;
}

.admin-input[type="number"]::-webkit-inner-spin-button,
.admin-input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ===========================================
   Form Helper Text
   =========================================== */
.admin-form__help {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 6px;
}

/* ===========================================
   Form Error State
   =========================================== */
.admin-input--error,
.admin-textarea--error,
.admin-select--error {
    border-color: var(--error);
}

.admin-form__error {
    font-size: 12px;
    color: var(--error);
    margin-top: 6px;
}

/* ===========================================
   Inline Form Group (for checkboxes in form)
   =========================================== */
.admin-form__group .admin-checkbox-item {
    padding: 12px 0;
    background: transparent;
}

/* ============================================================
   DJ PRESTIGE SOUND - ESPACE PRESTATAIRE CSS
   PWA Application Styles
   ============================================================ */

/* Variables */
:root {
    --presta-primary: #6366f1;
    --presta-primary-light: #818cf8;
    --presta-primary-dark: #4f46e5;
    --presta-bg: #0f0f1a;
    --presta-card: #1a1a2e;
    --presta-card-hover: #252542;
    --presta-text: #ffffff;
    --presta-text-muted: #a0a0b0;
    --presta-text-dim: #606070;
    --presta-border: rgba(255, 255, 255, 0.1);
    --presta-success: #10b981;
    --presta-warning: #f59e0b;
    --presta-danger: #ef4444;
    --presta-nav-height: 70px;
    --presta-header-height: 60px;
    --safe-area-top: env(safe-area-inset-top, 0px);
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
}

/* Base App Styles */
.presta-app {
    background: var(--presta-bg);
    min-height: 100vh;
    color: var(--presta-text);
    padding-top: calc(var(--presta-header-height) + var(--safe-area-top));
    padding-bottom: calc(var(--presta-nav-height) + var(--safe-area-bottom));
}

/* Header */
.presta-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: calc(var(--presta-header-height) + var(--safe-area-top));
    padding-top: var(--safe-area-top);
    background: var(--presta-card);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 16px;
    padding-right: 16px;
    z-index: 100;
    border-bottom: 1px solid var(--presta-border);
}

.presta-header__left,
.presta-header__right {
    width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.presta-header__center {
    flex: 1;
    text-align: center;
}

.presta-header__center h1 {
    font-size: 17px;
    font-weight: 600;
    margin: 0;
}

.presta-header__back {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--presta-primary-light);
    font-size: 18px;
    text-decoration: none;
}

.presta-header__logo img {
    width: 36px;
    height: 36px;
    border-radius: 8px;
}

.presta-header__avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--presta-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 14px;
    text-decoration: none;
    overflow: hidden;
}

.presta-header__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Main Content */
.presta-main {
    padding: 16px;
}

/* Bottom Navigation */
.presta-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: calc(var(--presta-nav-height) + var(--safe-area-bottom));
    padding-bottom: var(--safe-area-bottom);
    background: var(--presta-card);
    display: flex;
    align-items: center;
    justify-content: space-around;
    border-top: 1px solid var(--presta-border);
    z-index: 100;
}

.presta-nav__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 16px;
    color: var(--presta-text-muted);
    text-decoration: none;
    font-size: 11px;
    transition: color 0.2s;
}

.presta-nav__item i {
    font-size: 20px;
}

.presta-nav__item.active {
    color: var(--presta-primary-light);
}

/* Welcome Section */
.presta-welcome {
    margin-bottom: 24px;
}

.presta-welcome__greeting h2 {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 4px;
}

.presta-welcome__role {
    color: var(--presta-primary-light);
    font-size: 14px;
    margin: 0;
}

/* Stats Grid */
.presta-stats {
    margin-bottom: 24px;
}

.presta-stats__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.presta-stat-card {
    background: var(--presta-card);
    border-radius: 16px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.presta-stat-card__icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.presta-stat-card--pending .presta-stat-card__icon {
    background: rgba(245, 158, 11, 0.15);
    color: var(--presta-warning);
}

.presta-stat-card--accepted .presta-stat-card__icon {
    background: rgba(16, 185, 129, 0.15);
    color: var(--presta-success);
}

.presta-stat-card--upcoming .presta-stat-card__icon {
    background: rgba(99, 102, 241, 0.15);
    color: var(--presta-primary-light);
}

.presta-stat-card--earnings .presta-stat-card__icon {
    background: rgba(236, 72, 153, 0.15);
    color: #ec4899;
}

.presta-stat-card__content {
    display: flex;
    flex-direction: column;
}

.presta-stat-card__value {
    font-size: 20px;
    font-weight: 700;
}

.presta-stat-card__label {
    font-size: 12px;
    color: var(--presta-text-muted);
}

/* Alert Box */
.presta-alert {
    background: var(--presta-card);
    border-radius: 16px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}

.presta-alert--warning {
    border-left: 4px solid var(--presta-warning);
}

.presta-alert__icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(245, 158, 11, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--presta-warning);
    font-size: 18px;
}

.presta-alert__content {
    flex: 1;
}

.presta-alert__content strong {
    display: block;
    font-size: 14px;
    margin-bottom: 2px;
}

.presta-alert__content p {
    margin: 0;
    font-size: 12px;
    color: var(--presta-text-muted);
}

.presta-alert__action {
    color: var(--presta-text-muted);
    font-size: 18px;
}

/* Section */
.presta-section {
    margin-bottom: 24px;
}

.presta-section__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.presta-section__header h3 {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.presta-section__header h3 i {
    color: var(--presta-primary-light);
    font-size: 14px;
}

.presta-section__link {
    font-size: 13px;
    color: var(--presta-primary-light);
    text-decoration: none;
}

/* Featured Event Card */
.presta-event-card--featured {
    background: linear-gradient(135deg, var(--presta-card) 0%, var(--presta-card-hover) 100%);
    border-radius: 20px;
    padding: 20px;
    display: flex;
    gap: 16px;
    text-decoration: none;
    color: inherit;
    border: 1px solid var(--presta-border);
    position: relative;
}

.presta-event-card__date {
    width: 60px;
    text-align: center;
    flex-shrink: 0;
}

.presta-event-card__day {
    display: block;
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
}

.presta-event-card__month {
    display: block;
    font-size: 12px;
    color: var(--presta-primary-light);
    text-transform: uppercase;
}

.presta-event-card__content {
    flex: 1;
    min-width: 0;
}

.presta-event-card__content h4 {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.presta-event-card__details {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.presta-event-card__details span {
    font-size: 13px;
    color: var(--presta-text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}

.presta-event-card__details i {
    width: 14px;
    font-size: 12px;
    color: var(--presta-primary-light);
}

.presta-event-card__fee {
    margin-top: 10px;
    font-size: 18px;
    font-weight: 700;
    color: var(--presta-success);
}

.presta-event-card__status {
    position: absolute;
    top: 12px;
    right: 12px;
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 20px;
    font-weight: 500;
}

.presta-event-card__status--en_attente {
    background: rgba(245, 158, 11, 0.15);
    color: var(--presta-warning);
}

.presta-event-card__status--accepte {
    background: rgba(16, 185, 129, 0.15);
    color: var(--presta-success);
}

.presta-event-card__status--refuse {
    background: rgba(239, 68, 68, 0.15);
    color: var(--presta-danger);
}

/* Quick Actions */
.presta-actions {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.presta-action-btn {
    background: var(--presta-card);
    border-radius: 16px;
    padding: 16px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--presta-text);
    transition: background 0.2s;
}

.presta-action-btn:active {
    background: var(--presta-card-hover);
}

.presta-action-btn i {
    font-size: 22px;
    color: var(--presta-primary-light);
}

.presta-action-btn span {
    font-size: 11px;
    text-align: center;
}

/* Events List */
.presta-events-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.presta-event-item {
    background: var(--presta-card);
    border-radius: 16px;
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    color: inherit;
    transition: background 0.2s;
}

.presta-event-item:active {
    background: var(--presta-card-hover);
}

.presta-event-item__date {
    width: 44px;
    height: 44px;
    background: rgba(99, 102, 241, 0.1);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.presta-event-item__day {
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
}

.presta-event-item__month,
.presta-event-item__weekday {
    font-size: 10px;
    color: var(--presta-primary-light);
    text-transform: uppercase;
}

.presta-event-item__content {
    flex: 1;
    min-width: 0;
}

.presta-event-item__content h4 {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.presta-event-item__venue,
.presta-event-item__meta span {
    font-size: 12px;
    color: var(--presta-text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
}

.presta-event-item__meta {
    display: flex;
    gap: 12px;
}

.presta-event-item__meta i {
    font-size: 10px;
    color: var(--presta-primary-light);
}

.presta-event-item__fee {
    display: inline-block;
    margin-top: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--presta-success);
}

.presta-event-item__arrow {
    color: var(--presta-text-dim);
    font-size: 14px;
}

/* Status Badge */
.presta-status-badge {
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 20px;
    font-weight: 500;
    white-space: nowrap;
}

.presta-status-badge--pending {
    background: rgba(245, 158, 11, 0.15);
    color: var(--presta-warning);
}

.presta-status-badge--accepted {
    background: rgba(16, 185, 129, 0.15);
    color: var(--presta-success);
}

.presta-status-badge--refused {
    background: rgba(239, 68, 68, 0.15);
    color: var(--presta-danger);
}

/* Filters */
.presta-filters {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 16px;
    margin-bottom: 8px;
    -webkit-overflow-scrolling: touch;
}

.presta-filter {
    flex-shrink: 0;
    padding: 10px 16px;
    background: var(--presta-card);
    border-radius: 20px;
    font-size: 13px;
    color: var(--presta-text-muted);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}

.presta-filter i {
    font-size: 12px;
}

.presta-filter.active {
    background: var(--presta-primary);
    color: white;
}

/* Empty State */
.presta-empty {
    text-align: center;
    padding: 48px 24px;
}

.presta-empty--small {
    padding: 24px;
}

.presta-empty__icon {
    font-size: 48px;
    color: var(--presta-text-dim);
    margin-bottom: 16px;
}

.presta-empty h3 {
    font-size: 18px;
    margin: 0 0 8px;
}

.presta-empty p {
    color: var(--presta-text-muted);
    font-size: 14px;
    margin: 0;
}

/* Month Section */
.presta-month-section {
    margin-bottom: 24px;
}

.presta-month-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--presta-text-muted);
    margin: 0 0 12px;
    padding-left: 4px;
}

/* Event Detail Header */
.presta-event-header {
    background: linear-gradient(135deg, var(--presta-primary) 0%, var(--presta-primary-dark) 100%);
    border-radius: 20px;
    padding: 24px;
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.presta-event-header__date-badge {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    padding: 12px 16px;
    text-align: center;
    flex-shrink: 0;
}

.presta-event-header__day {
    display: block;
    font-size: 32px;
    font-weight: 700;
    line-height: 1;
}

.presta-event-header__month {
    display: block;
    font-size: 12px;
    opacity: 0.9;
    margin-top: 2px;
}

.presta-event-header__year {
    display: block;
    font-size: 11px;
    opacity: 0.7;
}

.presta-event-header__info {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.presta-event-header__info h2 {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 6px;
}

.presta-event-header__type {
    font-size: 13px;
    opacity: 0.9;
}

/* Message */
.presta-message {
    padding: 14px 16px;
    border-radius: 12px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}

.presta-message--success {
    background: rgba(16, 185, 129, 0.15);
    color: var(--presta-success);
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.presta-message--error {
    background: rgba(239, 68, 68, 0.15);
    color: var(--presta-danger);
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.presta-message--info {
    background: rgba(99, 102, 241, 0.15);
    color: var(--presta-primary-light);
    border: 1px solid rgba(99, 102, 241, 0.3);
}

/* Detail Status */
.presta-detail-status {
    margin-bottom: 20px;
}

.presta-detail-status__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 500;
}

.presta-detail-status__badge--pending {
    background: rgba(245, 158, 11, 0.15);
    color: var(--presta-warning);
}

.presta-detail-status__badge--accepted {
    background: rgba(16, 185, 129, 0.15);
    color: var(--presta-success);
}

.presta-detail-status__badge--refused {
    background: rgba(239, 68, 68, 0.15);
    color: var(--presta-danger);
}

/* Detail Section */
.presta-detail-section {
    background: var(--presta-card);
    border-radius: 20px;
    padding: 20px;
    margin-bottom: 16px;
}

.presta-detail-section__title {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.presta-detail-section__title i {
    color: var(--presta-primary-light);
    font-size: 14px;
}

/* Detail Grid */
.presta-detail-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.presta-detail-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.presta-detail-item__icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(99, 102, 241, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--presta-primary-light);
    font-size: 14px;
    flex-shrink: 0;
}

.presta-detail-item__content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.presta-detail-item__label {
    font-size: 12px;
    color: var(--presta-text-muted);
}

.presta-detail-item__value {
    font-size: 14px;
    font-weight: 500;
}

/* Fee Card */
.presta-fee-card {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
    border-radius: 16px;
    padding: 20px;
    text-align: center;
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.presta-fee-card__amount {
    font-size: 32px;
    font-weight: 700;
    color: var(--presta-success);
}

.presta-fee-card__label {
    font-size: 13px;
    color: var(--presta-text-muted);
    margin-top: 4px;
}

/* Detail Notes */
.presta-detail-notes {
    font-size: 14px;
    line-height: 1.6;
    color: var(--presta-text-muted);
}

/* Response Form */
.presta-response-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.presta-response-buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

/* Buttons */
.presta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 20px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
}

.presta-btn--accept {
    background: var(--presta-success);
    color: white;
}

.presta-btn--refuse {
    background: rgba(239, 68, 68, 0.15);
    color: var(--presta-danger);
}

.presta-btn--primary {
    background: linear-gradient(135deg, var(--presta-primary) 0%, var(--presta-primary-light) 100%);
    color: white;
}

.presta-btn--full {
    width: 100%;
}

.presta-btn:active {
    transform: scale(0.98);
}

/* Form Styles */
.presta-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.presta-form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.presta-form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.presta-form-label {
    font-size: 13px;
    color: var(--presta-text-muted);
}

.presta-form-input,
.presta-form-textarea {
    width: 100%;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--presta-border);
    border-radius: 10px;
    font-size: 15px;
    color: var(--presta-text);
    transition: border-color 0.2s;
}

.presta-form-input:focus,
.presta-form-textarea:focus {
    outline: none;
    border-color: var(--presta-primary);
}

.presta-form-textarea {
    resize: vertical;
    min-height: 80px;
}

/* Response Info */
.presta-response-info {
    font-size: 14px;
}

.presta-response-info__date {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--presta-text-muted);
    margin-bottom: 12px;
}

.presta-response-info__date i {
    color: var(--presta-primary-light);
}

.presta-response-info__comment {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
    padding: 12px;
}

.presta-response-info__comment strong {
    display: block;
    font-size: 12px;
    color: var(--presta-text-muted);
    margin-bottom: 6px;
}

.presta-response-info__comment p {
    margin: 0;
    line-height: 1.5;
}

/* Contact Options */
.presta-contact-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.presta-contact-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 16px 12px;
    background: rgba(99, 102, 241, 0.1);
    border-radius: 14px;
    text-decoration: none;
    color: var(--presta-primary-light);
    transition: background 0.2s;
}

.presta-contact-btn:active {
    background: rgba(99, 102, 241, 0.2);
}

.presta-contact-btn i {
    font-size: 22px;
}

.presta-contact-btn span {
    font-size: 12px;
}

.presta-contact-btn--whatsapp {
    background: rgba(37, 211, 102, 0.1);
    color: #25d366;
}

.presta-contact-btn--whatsapp:active {
    background: rgba(37, 211, 102, 0.2);
}

/* Profile Header */
.presta-profile-header {
    text-align: center;
    margin-bottom: 24px;
}

.presta-profile-header__avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin: 0 auto 16px;
    overflow: hidden;
    border: 3px solid var(--presta-primary);
}

.presta-profile-header__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.presta-profile-header__initials {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--presta-primary) 0%, var(--presta-primary-light) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    font-weight: 700;
    color: white;
}

.presta-profile-header__name {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 4px;
}

.presta-profile-header__role {
    color: var(--presta-primary-light);
    font-size: 14px;
    margin: 0;
}

/* Profile Stats */
.presta-profile-stats {
    display: flex;
    justify-content: center;
    gap: 32px;
    background: var(--presta-card);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 24px;
}

.presta-profile-stat {
    text-align: center;
}

.presta-profile-stat__value {
    display: block;
    font-size: 22px;
    font-weight: 700;
}

.presta-profile-stat__label {
    font-size: 12px;
    color: var(--presta-text-muted);
}

/* Info List */
.presta-info-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.presta-info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--presta-border);
}

.presta-info-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.presta-info-item__label {
    font-size: 13px;
    color: var(--presta-text-muted);
}

.presta-info-item__value {
    font-size: 14px;
    font-weight: 500;
    text-align: right;
}

/* Action List */
.presta-action-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.presta-action-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 14px;
    text-decoration: none;
    color: inherit;
    transition: background 0.2s;
}

.presta-action-item:active {
    background: rgba(255, 255, 255, 0.06);
}

.presta-action-item__icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(99, 102, 241, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--presta-primary-light);
    font-size: 16px;
}

.presta-action-item__content {
    flex: 1;
}

.presta-action-item__title {
    display: block;
    font-size: 14px;
    font-weight: 500;
}

.presta-action-item__desc {
    display: block;
    font-size: 12px;
    color: var(--presta-text-muted);
    margin-top: 2px;
}

.presta-action-item > i {
    color: var(--presta-text-dim);
    font-size: 14px;
}

.presta-action-item--danger .presta-action-item__icon {
    background: rgba(239, 68, 68, 0.1);
    color: var(--presta-danger);
}

/* App Version */
.presta-app-version {
    text-align: center;
    padding: 24px;
    color: var(--presta-text-dim);
    font-size: 12px;
}

.presta-app-version p {
    margin: 0;
    line-height: 1.6;
}

/* Booked Dates */
.presta-booked-dates {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.presta-booked-date {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    background: rgba(16, 185, 129, 0.1);
    border-radius: 10px;
    border-left: 3px solid var(--presta-success);
}

.presta-booked-date__date {
    font-weight: 600;
    font-size: 14px;
}

.presta-booked-date__title {
    font-size: 13px;
    color: var(--presta-text-muted);
}

/* Unavailability List */
.presta-unavail-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.presta-unavail-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    background: rgba(239, 68, 68, 0.1);
    border-radius: 10px;
    border-left: 3px solid var(--presta-danger);
}

.presta-unavail-item__dates {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.presta-unavail-item__date {
    font-weight: 600;
    font-size: 14px;
}

.presta-unavail-item__motif {
    font-size: 12px;
    color: var(--presta-text-muted);
}

.presta-btn-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: var(--presta-text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.presta-btn-icon--danger:hover,
.presta-btn-icon--danger:active {
    background: rgba(239, 68, 68, 0.2);
    color: var(--presta-danger);
}