/* ===================================
   GLOBAL FOCUS RESET
   =================================== */

*:focus {
    outline: none;
}
*:focus-visible {
    outline: 2px solid var(--primary-color, #e63946);
    outline-offset: 2px;
}

/* ===================================
   PAGE LOADER
   =================================== */

.page-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: #000000;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: opacity 1s ease-out;
}

.page-loader.fade-out {
    opacity: 0;
    pointer-events: none;
}

.page-loader-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Hide body overflow while loader is active */
body.loader-active {
    overflow: hidden;
}

/* ===================================
   CUSTOM NOTIFICATIONS
   =================================== */

.custom-notification {
    position: fixed;
    top: 100px;
    right: 20px;
    max-width: 500px;
    min-width: 300px;
    background: rgba(26, 26, 26, 0.98);
    border: 2px solid;
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    z-index: 10000;
    opacity: 0;
    transform: translateX(400px);
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    animation: slideInRight 0.5s ease-out forwards;
}

.custom-notification.show {
    opacity: 1;
    transform: translateX(0);
}

.custom-notification-error {
    border-color: var(--primary-color);
}

.custom-notification-success {
    border-color: #00ff88;
}

.custom-notification-info {
    border-color: #00a8ff;
}

.notification-content {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    flex: 1;
}

.notification-icon {
    font-size: 1.5rem;
    margin-top: 0.15rem;
    flex-shrink: 0;
}

.custom-notification-error .notification-icon {
    color: var(--primary-color);
}

.custom-notification-success .notification-icon {
    color: #00ff88;
}

.custom-notification-info .notification-icon {
    color: #00a8ff;
}

.notification-message {
    color: var(--text-primary);
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    line-height: 1.5;
    flex: 1;
}

.notification-close {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.notification-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(400px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Mobile responsive */
@media (max-width: 768px) {
    .custom-notification {
        right: 10px;
        left: 10px;
        max-width: none;
        min-width: 0;
        top: 80px;
    }
}

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* CRITICAL: Prevent horizontal overflow on ALL devices */
html {
    overflow-x: hidden !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
}

body {
    overflow-x: hidden !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
}

:root {
    --primary-color: #ff0040;
    --secondary-color: #00d4ff;
    --accent-color: #ff6b35;
    --dark-bg: #0a0a0a;
    --darker-bg: #050505;
    --card-bg: #1a1a1a;
    --text-primary: #ffffff;
    --text-secondary: #b0b0b0;
    --text-muted: #666666;
    --gradient-primary: linear-gradient(135deg, #ff0040, #ff6b35);
    --gradient-secondary: linear-gradient(135deg, #00d4ff, #0099cc);
    --gradient-bg: linear-gradient(135deg, #0a0a0a, #1a1a1a);
    --shadow-glow: 0 0 20px rgba(255, 0, 64, 0.3);
    --shadow-glow-blue: 0 0 20px rgba(0, 212, 255, 0.3);
}

body {
    font-family: 'Inter', sans-serif;
    background: var(--dark-bg);
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Navigation */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    background: transparent !important;
    backdrop-filter: blur(0);
    z-index: 1000;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.navbar.scrolled {
    background: rgba(10, 10, 10, 0.95) !important;
    backdrop-filter: blur(10px);
}

/* Remove backdrop-filter when mobile menu is open to prevent stacking context issues */
.navbar:has(.nav-menu.active),
.navbar.menu-open {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.navbar.scrolled:has(.nav-menu.active),
.navbar.scrolled.menu-open {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 5rem 1rem 7.2rem;
    width: 100%;
    max-width: 100%;
    margin: 0;
    box-sizing: border-box;
}

.nav-logo {
    display: flex;
    align-items: center;
}

.logo-image {
    height: 50px;
    width: auto;
    transition: all 0.3s ease;
}

.logo-compact {
    display: none;
}

@media (max-width: 1400px) and (min-width: 1080px) {
    .logo-full {
        display: none;
    }
    .logo-compact {
        display: block;
        height: 38px;
    }
}

.logo-image:hover {
    transform: scale(1.05);
    filter: drop-shadow(0 0 10px rgba(255, 0, 64, 0.3));
}

.nav-menu {
    display: flex;
    gap: 1.4rem;
    align-items: center;
    flex-wrap: nowrap;
    white-space: nowrap;
}

.nav-link {
    color: #ffffff;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.92rem;
    transition: all 0.3s ease;
    position: relative;
}

.video-text {
    margin-left: 0.8rem;
}

.nav-link:hover {
    color: var(--primary-color);
    text-shadow: 0 0 10px rgba(255, 0, 64, 0.5);
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--gradient-primary);
    transition: width 0.3s ease;
}

.nav-link:hover::after {
    width: 100%;
}

.nav-icons {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0.5rem;
}

.nav-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: #ffffff;
    text-decoration: none;
    font-size: 0.95rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transition: all 0.3s ease;
}

.nav-icon:hover {
    color: var(--primary-color);
    border-color: var(--primary-color);
    background: rgba(255, 0, 64, 0.1);
    box-shadow: 0 0 15px rgba(255, 0, 64, 0.3);
}

.reserve-btn {
    background: var(--gradient-primary);
    color: var(--text-primary) !important;
    padding: 0.5rem 1.5rem;
    border-radius: 0;
    text-shadow: none !important;
    transform: skewX(-10deg) !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

.reserve-btn span,
.reserve-btn *,
a.reserve-btn span,
a.reserve-btn * {
    transform: skewX(10deg) !important;
    display: inline-block;
}

.reserve-btn:hover {
    transform: skewX(-10deg) translateY(-2px) !important;
    box-shadow: var(--shadow-glow);
}

/* Dropdown Menus */
.nav-dropdown {
    position: relative;
    display: inline-block;
}

.nav-dropdown .nav-link {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.nav-dropdown .fa-chevron-down {
    font-size: 0.7rem;
    transition: transform 0.3s ease;
}

.nav-dropdown:hover .fa-chevron-down {
    transform: rotate(180deg);
}

/* Hide mobile-only submenu items on desktop */
.mobile-only-submenu {
    display: none !important;
}

.dropdown-content {
    position: absolute;
    top: 100%;
    left: 0;
    background: rgba(10, 10, 10, 0.95);
    backdrop-filter: blur(10px);
    min-width: 200px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 1000;
    border: 1px solid rgba(255, 0, 64, 0.2);
    margin-top: 0.5rem;
}

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

.dropdown-content a {
    display: block;
    color: #ffffff;
    padding: 0.8rem 1.2rem;
    text-decoration: none;
    transition: all 0.3s ease;
    font-weight: 400;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.dropdown-content a:last-child {
    border-bottom: none;
}

.dropdown-content a:hover {
    background: rgba(255, 0, 64, 0.1);
    color: var(--primary-color);
    padding-left: 1.5rem;
}

.hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
}

.bar {
    width: 25px;
    height: 3px;
    background: var(--text-primary);
    margin: 3px 0;
    transition: 0.3s;
}

/* Hero Section */
.hero {
    min-height: auto; /* allow content to define height */
    max-height: none;
    display: flex;
    align-items: stretch;
    position: relative;
    overflow: hidden;
}

/* Preserve full viewport height for the main hero at top of home */
#home.hero {
    min-height: 100vh;
}

/* Only apply electric border effects to main hero - only when active, not on hover */
#home .hero-logo-item::before,
#home .hero-logo-item::after,
#home .hero-logo-item.active::before,
#home .hero-logo-item.active::after {
    display: block;
}

.hero-logo-item::before,
.hero-logo-item::after {
    display: none;
}

/* Preload the electric border filter to avoid visual artifacts */
.hero::before {
    content: '';
    position: absolute;
    width: 1px;
    height: 1px;
    filter: url(#turbulent-displace);
    opacity: 0;
    pointer-events: none;
    z-index: -1000;
}

.hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--gradient-bg);
    z-index: -2;
}

.hero-bg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 0.6s ease-in-out;
    z-index: -1;
    pointer-events: none;
    animation: slowZoom 30s ease-in-out infinite alternate;
}

.hero-bg-overlay.active {
    opacity: 0.4;
}

.hero-bg-default {
    background: none;
    opacity: 1;
}

.hero-bg-manoir {
    background-image: url('images/manoir-bg.webp');
}

.hero-bg-prison {
    background-image: url('images/prison-bg.webp');
}

.hero-bg-metro {
    background-image: url('images/metro-bg.webp');
}

.hero-bg-banque {
    background-image: url('images/bank-bg.webp');
}

.hero-bg-tokyo {
    background-image: url('images/tokyo-bg.webp');
}

.laser-grid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(rgba(255, 0, 64, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 0, 64, 0.1) 1px, transparent 1px);
    background-size: 50px 50px;
    animation: gridMove 20s linear infinite;
}

@keyframes gridMove {
    0% { transform: translate(0, 0); }
    100% { transform: translate(50px, 50px); }
}

.floating-particles {
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 20% 80%, rgba(255, 0, 64, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 80% 20%, rgba(0, 212, 255, 0.1) 0%, transparent 50%);
    animation: float 15s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(180deg); }
}

.hero-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr auto;
    gap: 0;
    row-gap: 0;
    align-items: stretch;
    width: 100%;
    margin: 0 auto;
    padding-left: 7.2rem;
}

/* Main hero content - 3 columns with logos on right */
#home .hero-content {
    grid-template-columns: 1fr 10px;
    grid-template-rows: 1fr;
    padding-top: 100px;
    padding-left: 7.2rem;
    padding-right: 2rem;
    gap: 0;
}

#home .hero-visual {
    display: none;
}

/* Map hero: increase first column (hero-text) by +20% total */
.hero.hero-map .hero-content {
    grid-template-columns: 1.31fr 1fr; /* +30% total on first column */
}

.hero-text {
    z-index: 2;
    padding-right: 4rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0;
    grid-row: 1;
    height: 100%;
}

/* Remove right padding only for map hero variant */
.hero.hero-map .hero-text {
    padding-right: 0;
}

.hero-text .hero-title {
    margin-bottom: 36px !important;
}

.hero-text .hero-subtitle,
.hero-text .hero-buttons {
    margin-bottom: 60px !important;
}

/* Remove extra space under buttons within hero text */
.hero-text .hero-buttons {
    margin-bottom: 0 !important;
}

.hero-content-default {
    display: block;
}

.hero-content-item {
    display: none;
    opacity: 0;
    transition: opacity 0.033s ease;
}

.hero-content-item.active {
    display: block;
    opacity: 1;
}

.hero-content-default.hidden {
    display: none;
    opacity: 0;
}

.hero-visual {
    grid-row: 1;
    height: 100%;
}

/* Main hero - fix column positions */
#home .hero-text {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

#home .hero-visual {
    grid-column: 2;
    grid-row: 1;
}

/* About section map hero spacing */
#about + .hero .hero-text {
    padding: 20px;
}

.hero-title {
    font-family: 'Orbitron', monospace;
    font-size: 3.047rem;
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: 0; /* prevent pushing content down */
    opacity: 1;
}

.title-line {
    display: block;
    opacity: 0;
    transform: translateY(50px);
    animation: slideUp 0.8s ease forwards;
}

.title-line:nth-child(1) { animation-delay: 0.2s; }
.title-line:nth-child(2) { animation-delay: 0.4s; }
.title-line:nth-child(3) { animation-delay: 0.6s; }

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

.highlight {
    background: linear-gradient(135deg, #ff0040, #ff6b35);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline;
    position: relative;
    /* Fallback for browsers that don't support background-clip */
    color: #ff0040;
}

.hero-subtitle {
    font-size: 1.32rem;
    color: #ffffff;
    margin-bottom: 81px;
    opacity: 0;
    animation: fadeIn 0.6s ease 0.4s forwards;
    max-width: 60%;
}

@keyframes fadeIn {
    to { opacity: 1; }
}

.hero-buttons {
    display: flex;
    gap: 1rem;
    opacity: 0;
    animation: fadeIn 0.6s ease 0.7s forwards;
    margin-top: 20px;
    padding-left: 10px;
}

@media (max-width: 1079px) {
    /* Reduce slide descriptions in home hero */
    .hero-content-item .hero-subtitle {
        font-size: 0.924rem;
    }

    #home .hero-content-default .hero-subtitle {
        font-size: 0.924rem;
    }
}

.btn-primary, .btn-secondary {
    padding: 1.1rem 2.2rem;
    border: none;
    border-radius: 0;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex !important;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    font-size: 1rem;
    transform: skewX(-10deg) !important;
    position: relative;
}

.btn-primary span,
.btn-primary i,
.btn-primary *,
.btn-secondary span,
.btn-secondary i,
.btn-secondary *,
button.btn-primary span,
button.btn-primary *,
button.btn-secondary span,
button.btn-secondary * {
    transform: skewX(10deg) !important;
    display: inline-block;
}

.btn-primary {
    background: var(--gradient-primary);
    color: var(--text-primary);
    box-shadow: var(--shadow-glow);
}

.btn-primary:hover {
    transform: skewX(-10deg) translateY(-3px) !important;
    box-shadow: 0 10px 30px rgba(255, 0, 64, 0.4);
}

.btn-secondary {
    background: transparent;
    color: var(--text-primary);
    border: 2px solid var(--primary-color);
}

.btn-secondary:hover {
    background: var(--primary-color);
    transform: skewX(-10deg) translateY(-3px) !important;
}

.hero-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    max-height: 80vh;
    overflow: hidden;
}

.map-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.map-wrapper {
    position: relative;
    display: inline-block;
}

.swiss-map-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain; /* ensure no crop */
    object-position: center center;
    opacity: 0.7; /* 70% transparent map image */
    animation: glowPulse 3s ease-in-out infinite;
}

@keyframes glowPulse {
    0%, 100% {
        filter: drop-shadow(0 0 12px rgba(255, 0, 64, 0.7)) drop-shadow(0 0 24px rgba(255, 0, 64, 0.475)) drop-shadow(0 0 48px rgba(255, 0, 64, 0.275));
    }
    50% {
        filter: drop-shadow(0 0 18px rgba(255, 0, 64, 0.9)) drop-shadow(0 0 36px rgba(255, 0, 64, 0.625)) drop-shadow(0 0 72px rgba(255, 0, 64, 0.425));
    }
}

.pins-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: auto; /* allow mouse tracking and cursor styling */
    z-index: 1; /* ensure pins above the semi-transparent image */
    opacity: 1 !important;
    mix-blend-mode: normal;
}

.city-pin {
    position: absolute;
    transform: translate(-50%, -50%);
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
    pointer-events: all;
    opacity: 1 !important;
}

.city-pin:hover {
    transform: translate(-50%, -50%) scale(1.2);
}

.pin-dot {
    width: 32px;
    height: 32px;
    background: #ff0040;
    border: 4px solid #ffffff;
    border-radius: 50%;
    box-shadow: 0 0 18px rgba(255, 0, 64, 1), 0 0 36px rgba(255, 0, 64, 0.5);
    animation: pulse 2s ease-in-out infinite, gpsBlink 1.2s ease-in-out infinite;
    opacity: 1 !important;
    mix-blend-mode: normal;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 18px rgba(255, 0, 64, 0.7), 0 0 36px rgba(255, 0, 64, 0.35);
    }
    50% {
        transform: scale(1.08);
        box-shadow: 0 0 26px rgba(255, 0, 64, 0.95), 0 0 52px rgba(255, 0, 64, 0.6);
    }
}

/* Additional blink to mimic GPS ping */
@keyframes gpsBlink {
    0%, 100% {
        box-shadow: 0 0 10px rgba(255, 0, 64, 0.5), 0 0 20px rgba(255, 0, 64, 0.25), 0 0 0 0 rgba(255,0,64,0.0);
    }
    50% {
        box-shadow: 0 0 35px rgba(255, 0, 64, 1), 0 0 70px rgba(255, 0, 64, 0.7), 0 0 0 10px rgba(255,0,64,0.25);
    }
}

.pin-label {
    position: absolute;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255, 0, 64, 0.95);
    color: #ffffff;
    padding: 0.3rem 0.8rem;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 700;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.city-pin:hover .pin-label {
    opacity: 1;
}

/* Logo next to each pin */
.pin-logo {
    position: absolute;
    top: 0;
    left: 0;
    height: 28px;
    width: auto;
    filter: drop-shadow(0 0 8px rgba(0,0,0,0.6));
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.12s ease, transform 0.06s linear;
    will-change: transform, opacity;
    transform: translate(-50%, -50%);
}

/* Single cursor-following logo injected into overlay */
.pin-cursor-logo {
    position: absolute;
    top: 0;
    left: 0;
    height: 96px; /* base size; we animate scale 0 -> 1 */
    width: auto;
    transform: translate(-50%, -50%) scale(0);
    pointer-events: none;
    opacity: 0;
    filter: drop-shadow(0 0 10px rgba(0,0,0,0.7));
    transition: opacity 0.18s ease, transform 0.18s ease;
    z-index: 2;
}

.character-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.character {
    position: absolute;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--gradient-primary);
    animation: characterFloat 3s ease-in-out infinite;
    opacity: 1;
    transition: opacity 0.6s ease-in-out;
}

.hero.background-active .character {
    opacity: 0;
}

.character-1 {
    top: 20%;
    left: 20%;
    animation-delay: 0s;
}

.character-2 {
    top: 50%;
    right: 20%;
    background: var(--gradient-secondary);
    animation-delay: 1s;
}

.character-3 {
    bottom: 20%;
    left: 50%;
    background: linear-gradient(135deg, var(--accent-color), var(--primary-color));
    animation-delay: 2s;
}

@keyframes characterFloat {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(180deg); }
}

.character-glow {
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    border-radius: 50%;
    background: inherit;
    opacity: 0.3;
    filter: blur(10px);
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 0.3; }
    50% { transform: scale(1.2); opacity: 0.6; }
}

.laser-beams {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.laser-beam {
    position: absolute;
    height: 2px;
    background: var(--gradient-primary);
    box-shadow: 0 0 10px var(--primary-color);
    animation: laserMove 4s linear infinite;
}

.beam-1 {
    top: 30%;
    left: 0;
    width: 60%;
    animation-delay: -1s;
}

.beam-2 {
    top: 60%;
    right: 0;
    width: 70%;
    background: var(--gradient-secondary);
    box-shadow: 0 0 10px var(--secondary-color);
    animation-delay: -2.5s;
}

.beam-3 {
    top: 80%;
    left: 20%;
    width: 50%;
    background: linear-gradient(90deg, var(--accent-color), var(--primary-color));
    animation-delay: -0.5s;
}

@keyframes laserMove {
    0% { transform: translateX(-100%); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translateX(100%); opacity: 0; }
}

/* Hero Logos Wrapper */
.hero-logos-wrapper {
    display: contents;
    position: relative;
}

/* Hero Carousel Arrows - hidden on desktop by default */
.hero-carousel-arrow {
    display: none;
    background: rgba(255, 0, 64, 0.2);
    border: 2px solid rgba(255, 0, 64, 0.5);
    color: var(--primary-color);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.hero-carousel-arrow:hover {
    background: rgba(255, 0, 64, 0.4);
    border-color: var(--primary-color);
    box-shadow: 0 0 20px rgba(255, 0, 64, 0.5);
}

.hero-carousel-arrow:active {
    transform: translateY(-50%) scale(0.9);
}

/* Hero Logos */
.hero-logos {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 3rem;
    margin-top: 0;
    flex-wrap: nowrap;
    z-index: 10;
    padding-bottom: 0;
    align-self: end;
}

/* Main hero logos styling - right border, vertical */
#home .hero-logos {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 0.6rem;
    grid-column: 3;
    grid-row: 1;
    padding-right: 0;
    padding-left: 0;
    position: relative;
    z-index: 100;
    min-width: 200px;
    align-self: center;
}

/* Second hero logos styling - horizontal, bottom */
.hero:not(#home) .hero-logos {
    grid-column: 1 / -1;
    grid-row: 2;
}

.hero-logo-item {
    width: 7.35%;
    flex: 0 0 7.35%;
    min-width: 0;
    max-width: 7.35%;
    transition: all 0.3s ease;
    position: relative;
    padding: 2px;
    border-radius: 8px;
}

/* Main hero logo styling - fixed width */
#home .hero-logo-item {
    width: 103.275px;
    flex: 0 0 calc(90vh / 5 - 20px);
    padding: 10px 70px;
    min-width: 103.275px;
    max-width: 103.275px;
    max-height: calc(90vh / 5 - 20px);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s ease-out, all 0.3s ease;
    will-change: transform;
}

/* Hide LaseRed logo on desktop - only show logos 2-6 */
#home .hero-logo-item[data-logo="lasered"] {
    display: none !important;
}

#home .hero-logo-item[data-logo="lasered"] img {
    width: 63px !important;
    height: 63px !important;
    min-width: 63px;
    max-width: 63px;
    min-height: 63px;
    max-height: 63px;
    object-fit: contain;
}

#home .hero-logo-item img {
    width: 103.275px !important;
    height: auto !important;
    min-width: 103.275px;
    max-width: 103.275px;
    max-height: calc(90vh / 5 - 20px);
    object-fit: contain;
}

.hero-logo-item img {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 4px 15px rgba(0,0,0,0.3));
    transition: all 0.3s ease;
    display: block;
}

#home .hero-logo-item {
    opacity: 1 !important;
    visibility: visible !important;
}

#home .hero-logo-item img {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Hover effect - transform handled by JavaScript parallax */
.hero-logo-item:hover img {
    filter: drop-shadow(0 8px 25px rgba(255, 0, 64, 0.5));
}

.hero-logo-item::before,
.hero-logo-item::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 10px;
    pointer-events: none;
    opacity: .5;
    border: 2px solid rgba(255, 0, 64, 0);
    filter: url(#turbulent-displace);
    transition: opacity .12s linear;
}

.hero-logo-item.active::before {
    border-color: rgba(255, 0, 64, 0.7);
    opacity: 0.8;
    box-shadow: 0 0 18px rgba(255, 0, 64, 0.55);
}

.hero-logo-item.active::after {
    border-color: rgba(255, 0, 64, 0.9);
    opacity: 1;
    box-shadow: 0 0 22px rgba(255, 0, 64, 0.7);
}

/* Parallax 3D Scene */
.parallax-scene {
    position: absolute;
    inset: 0;
    perspective: 1000px;
    transform-style: preserve-3d;
    overflow: visible;
    pointer-events: none;
}

.parallax-layer {
    position: absolute;
    max-width: 30%;
    height: auto;
    filter: drop-shadow(0 10px 30px rgba(0,0,0,0.6));
    will-change: transform;
    transition: transform 0.2s ease-out;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform-origin: center center;
    image-rendering: -webkit-optimize-contrast;
    outline: 1px solid transparent;
    opacity: 0.8;
}

/* décalage 100px vers la gauche: +100 sur right, et espacement accru */
.parallax-link:nth-child(1) .parallax-layer { right: 300px; bottom: 0; z-index: 5; }
.parallax-link:nth-child(2) .parallax-layer { right: calc(20% + 100px); top: 0; z-index: 4; }
.parallax-link:nth-child(3) .parallax-layer { right: calc(5% + 100px); top: 45%; z-index: 3; }
.parallax-link:nth-child(4) .parallax-layer { right: calc(32% + 100px); bottom: 8%; z-index: 2; }
.parallax-link:nth-child(5) .parallax-layer { right: calc(50% + 100px); top: 22%; z-index: 1; }

.parallax-link {
    position: absolute;
    inset: 0;
    pointer-events: auto;
}

.parallax-link:hover .parallax-layer {
    opacity: 1;
}

.scroll-indicator {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    animation: bounce 2s infinite;
}

.scroll-arrow {
    width: 20px;
    height: 20px;
    border-right: 2px solid var(--primary-color);
    border-bottom: 2px solid var(--primary-color);
    transform: rotate(45deg);
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); }
    40% { transform: translateX(-50%) translateY(-10px); }
    60% { transform: translateX(-50%) translateY(-5px); }
}

@keyframes slowZoom {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.1);
    }
}

/* Formulas Section */
.formulas-section {
    padding: 3.2rem 2rem;
    background: linear-gradient(180deg, rgba(10, 10, 10, 0.95) 0%, rgba(20, 10, 15, 0.95) 100%);
    position: relative;
    overflow: hidden;
}

.formulas-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 50% 50%, rgba(255, 0, 64, 0.03) 0%, transparent 70%);
    pointer-events: none;
}

.section-header {
    text-align: center;
    margin-bottom: 4rem;
    position: relative;
    z-index: 1;
}

.section-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 3rem;
    font-weight: 900;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.section-subtitle {
    font-size: 1.2rem;
    color: var(--text-secondary);
    max-width: 600px;
    margin: 0 auto;
}

.formulas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
    position: relative;
    z-index: 1;
}

/* Galaxy Fold and similar tablets (700-900px) - single centered card */
@media (min-width: 769px) and (max-width: 950px) {
    .formulas-grid {
        grid-template-columns: 1fr;
        max-width: 420px;
        margin-left: auto;
        margin-right: auto;
    }
    
    .formula-card {
        max-width: 100%;
    }
}

.formula-card {
    background: rgba(20, 20, 30, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 2.5rem 2rem;
    border-radius: 0;
    position: relative;
    transition: all 0.3s ease;
    overflow: hidden;
}

.formula-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, transparent, rgba(255, 0, 64, 0.5), transparent);
    transform: translateX(-100%);
    transition: transform 0.6s ease;
}

.formula-card:hover::before {
    transform: translateX(100%);
}

.formula-card:hover {
    transform: translateY(-10px);
    border-color: rgba(255, 0, 64, 0.3);
    box-shadow: 0 10px 40px rgba(255, 0, 64, 0.2);
}

.formula-featured {
    background: linear-gradient(135deg, rgba(255, 0, 64, 0.1) 0%, rgba(20, 20, 30, 0.8) 100%);
    border: 2px solid rgba(255, 0, 64, 0.3);
}

.formula-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: var(--gradient-primary);
    color: var(--text-primary);
    padding: 0.4rem 1rem;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.formula-duration {
    font-family: 'Orbitron', sans-serif;
    font-size: 3rem;
    font-weight: 900;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.5rem;
}

.formula-price {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(255, 0, 64, 0.2);
}

.per-player {
    color: var(--primary-color);
    font-size: 0.9rem;
    display: block;
    margin-top: 0.3rem;
}

.formula-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 2rem;
}

.formula-content {
    margin-bottom: 2rem;
}

.formula-round {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    margin-bottom: 1.5rem;
}

.round-number {
    background: rgba(255, 0, 64, 0.2);
    color: var(--primary-color);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
    flex-shrink: 0;
    border: 1px solid rgba(255, 0, 64, 0.3);
}

.formula-round p {
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

.mode-list {
    display: block;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
    font-style: italic;
    margin-top: 0.5rem;
    line-height: 1.4;
}

.formula-note {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.4);
    font-style: italic;
    margin-top: auto;
}

.section-cta {
    text-align: center;
    position: relative;
    z-index: 1;
}

/* Formulas Carousel - hidden on desktop */
.formulas-carousel-wrapper {
    position: relative;
}

.formulas-carousel-arrow {
    display: none;
    background: rgba(255, 0, 64, 0.2);
    border: 2px solid rgba(255, 0, 64, 0.5);
    color: var(--primary-color);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    font-size: 1.2rem;
}

.formulas-carousel-arrow:hover {
    background: rgba(255, 0, 64, 0.4);
    border-color: var(--primary-color);
    box-shadow: 0 0 20px rgba(255, 0, 64, 0.5);
}

.formulas-carousel-arrow:active {
    transform: scale(0.9);
}

/* Game Modes Section */
.game-modes-section {
    padding: 3.2rem 2rem;
    background: linear-gradient(180deg, rgba(20, 10, 15, 0.95) 0%, rgba(10, 10, 10, 0.95) 100%);
    position: relative;
    overflow: hidden;
}

.game-modes-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 50% 50%, rgba(255, 0, 64, 0.03) 0%, transparent 70%);
    pointer-events: none;
}

.game-modes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
    position: relative;
    z-index: 1;
}

.game-mode-card {
    background: rgba(20, 20, 30, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 2.5rem 1.5rem;
    border-radius: 0;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

/* Desktop: Transform accordion structure to original layout */
.game-mode-card .mode-header {
    display: block;
    width: 100%;
    padding: 0;
    background: transparent;
    border: none;
    cursor: default;
    text-align: center;
}

.game-mode-card .mode-header .mode-chevron {
    display: none;
}

.game-mode-card .mode-content {
    display: block;
    max-height: none !important;
    padding: 0 !important;
    overflow: visible !important;
}

.game-mode-card .mode-header .mode-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
    background: rgba(255, 0, 64, 0.1);
    border: 2px solid rgba(255, 0, 64, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    transition: all 0.3s ease;
}

.game-mode-card .mode-header .mode-icon i {
    font-size: 2rem;
    color: var(--primary-color);
}

.game-mode-card .mode-header .mode-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 1rem;
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
}

.game-mode-card .mode-content .mode-description {
    color: var(--text-secondary);
    line-height: 1.6;
    font-size: 0.95rem;
    position: relative;
    z-index: 1;
    margin: 0;
}

.game-mode-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 0, 64, 0.1) 0%, transparent 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.game-mode-card:hover::before {
    opacity: 1;
}

.game-mode-card:hover {
    transform: translateY(-10px);
    border-color: rgba(255, 0, 64, 0.3);
    box-shadow: 0 10px 40px rgba(255, 0, 64, 0.15);
}

.mode-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
    background: rgba(255, 0, 64, 0.1);
    border: 2px solid rgba(255, 0, 64, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    transition: all 0.3s ease;
}

.game-mode-card:hover .mode-header .mode-icon {
    background: rgba(255, 0, 64, 0.2);
    border-color: rgba(255, 0, 64, 0.5);
    transform: scale(1.1);
}

.mode-icon i {
    font-size: 2rem;
    color: var(--primary-color);
}

.mode-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 1rem;
    position: relative;
    z-index: 1;
}

.mode-description {
    color: var(--text-secondary);
    line-height: 1.6;
    font-size: 0.95rem;
    position: relative;
    z-index: 1;
}

/* Stats Section */
.stats-section {
    padding: 1.6rem 0;
    background: linear-gradient(45deg, #660000, #ff0055, #660000, #ff0055);
    background-size: 400% 400%;
    animation: gradientShift 6s ease infinite;
    border-top: 1px solid rgba(255, 0, 64, 0.2);
    position: relative;
    overflow: hidden;
}

@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }
    25% {
        background-position: 50% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    75% {
        background-position: 50% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.stats-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    pointer-events: none;
    z-index: 0;
}

.stats-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
}

.stat-item {
    text-align: center;
    padding: 2rem;
    background: transparent;
    border-radius: 15px;
    border: none;
    transition: all 0.3s ease;
}

.stat-item:hover {
    transform: translateY(-5px);
}

.stat-icon {
    font-size: 2.5rem;
    color: #ffffff;
    margin-bottom: 1rem;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8), 0 4px 16px rgba(0, 0, 0, 0.6);
}

.stat-number {
    font-family: 'Orbitron', monospace;
    font-size: 3rem;
    font-weight: 900;
    color: #ffffff;
    margin-bottom: 0.5rem;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8), 0 4px 16px rgba(0, 0, 0, 0.6);
}

.stat-label {
    color: #ffffff;
    font-weight: 500;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8), 0 4px 16px rgba(0, 0, 0, 0.6);
    white-space: nowrap;
}

.stat-label-mobile {
    display: none;
}

@media (max-width: 480px) {
    .stat-label-desktop {
        display: none;
    }
    .stat-label-mobile {
        display: inline;
    }
}

/* About Section */
.about {
    padding: 2.4rem 0;
    background: var(--dark-bg);
}

.section-header {
    text-align: center;
    margin-bottom: 4rem;
}

.section-title {
    font-family: 'Orbitron', monospace;
    font-size: 2.5rem;
    font-weight: 900;
    margin-bottom: 1rem;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.section-subtitle {
    font-size: 1.2rem;
    color: var(--text-secondary);
    max-width: 600px;
    margin: 0 auto;
}

.about-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.feature-list {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.feature-item {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    margin-bottom: 15px;
}

.feature-icon {
    width: 60px;
    height: 60px;
    background: var(--gradient-primary);
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--text-primary);
    flex-shrink: 0;
}

.feature-content h3 {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

.feature-content p {
    color: var(--text-secondary);
    line-height: 1.6;
}

.game-modes {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.mode-card {
    background: var(--card-bg);
    padding: 1.5rem;
    border-radius: 15px;
    text-align: center;
    border: 1px solid rgba(255, 0, 64, 0.2);
    transition: all 0.3s ease;
}

.mode-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-glow);
    border-color: var(--primary-color);
}

.mode-icon {
    font-size: 2rem;
    margin-bottom: 1rem;
}

.mode-card h4 {
    color: var(--text-primary);
    font-weight: 600;
}

/* Locations Section */
.locations {
    padding: 2.4rem 0;
    background: var(--darker-bg);
}

.locations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

.location-card {
    background: var(--card-bg);
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(255, 0, 64, 0.2);
    transition: all 0.3s ease;
    position: relative;
}

.location-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-glow);
    border-color: var(--primary-color);
}

.location-image {
    height: 200px;
    background: var(--gradient-primary);
    position: relative;
    overflow: hidden;
}

.location-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    z-index: 2;
}

.location-overlay h3 {
    font-family: 'Orbitron', monospace;
    font-size: 1.5rem;
    font-weight: 900;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

.location-overlay p {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.location-glow {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: inherit;
    opacity: 0.3;
    filter: blur(20px);
    z-index: 1;
}

.location-content {
    padding: 1.5rem;
}

.location-content h4 {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.location-content p {
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.btn-outline {
    background: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
    padding: 0.5rem 1.5rem;
    border-radius: 0;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    transform: skewX(-10deg) !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

.btn-outline span,
.btn-outline *,
button.btn-outline span,
button.btn-outline * {
    transform: skewX(10deg) !important;
    display: inline-block;
}

.btn-outline:hover {
    background: var(--primary-color);
    color: var(--text-primary);
    transform: skewX(-10deg) translateY(-2px) !important;
}

/* Events Section */
.events {
    padding: 2.4rem 0;
    background: var(--dark-bg);
}

.events .section-header {
    margin-top: 50px;
}

.events-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    align-items: stretch;
}

.event-card {
    background: var(--card-bg);
    padding: 2rem 2rem 4.5rem;
    border-radius: 20px;
    text-align: center;
    border: 1px solid rgba(255, 0, 64, 0.2);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.event-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 0, 64, 0.1), transparent);
    transition: left 0.5s ease;
}

.event-card:hover::before {
    left: 100%;
}

.event-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-glow);
    border-color: var(--primary-color);
}

.event-icon {
    width: 80px;
    height: 80px;
    background: var(--gradient-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--text-primary);
    margin: 0 auto 1.5rem;
}

.event-card h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.event-card p {
    color: var(--text-secondary);
    margin-bottom: 2rem;
    line-height: 1.6;
}

/* Desktop: Transform accordion structure to original layout */
.event-card .event-header {
    display: block;
    width: 100%;
    padding: 0;
    background: transparent;
    border: none;
    cursor: default;
    text-align: center;
}

.event-card .event-header .event-chevron {
    display: none;
}

.event-card .event-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    max-height: none !important;
    padding: 0 !important;
    overflow: visible !important;
}

.event-card .event-header .event-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
    background: var(--gradient-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--text-primary);
}

.event-card .event-header h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--text-primary);
    display: block;
    width: 100%;
}

.event-card .event-content p {
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0 0 0.25rem 0;
}

.event-card .event-content .btn-primary {
    margin-top: 0;
    width: auto;
    align-self: center;
}

.event-card .event-content .event-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--primary-color);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-decoration: none;
    opacity: 0.8;
    transition: opacity 0.2s ease, gap 0.2s ease;
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
}

.event-card .event-content .event-link i {
    font-size: 0.75rem;
    transition: transform 0.2s ease;
}

.event-card .event-content .event-link:hover {
    opacity: 1;
    gap: 0.6rem;
}

.event-card .event-content .event-link:hover i {
    transform: translateX(3px);
}

/* Testimonials Section */
.testimonials {
    padding: 2.4rem 0;
    background: var(--darker-bg);
    overflow-x: hidden; /* prevent pseudo-elements from causing horizontal scroll */
}

/* Make testimonials full-width */
.testimonials .container {
    max-width: 100%;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
}

/* New 3-column testimonials grid */
.testimonials-slider-wrapper {
    position: relative;
}

.testimonials-slider-arrow {
    display: none; /* Hidden on desktop */
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(380px, 1fr));
    gap: 2.5rem;
    justify-items: center; /* centers cards within columns */
}

.press-card {
    position: relative;
    padding: 2.2rem 2rem 2rem;
    padding-top: calc(2.2rem + 10px);
    background: var(--card-bg); /* match Events cards */
    border: 1px solid rgba(255, 0, 64, 0.2);
    border-radius: 20px; /* match Events cards */
    overflow: visible; /* allow decorative quotes to overflow the corners */
    min-height: 220px;
    width: 100%;
    max-width: 520px; /* desktop default */
    opacity: 1; /* Always visible on desktop */
    transform: none; /* No transform on desktop */
    pointer-events: auto; /* Always interactive on desktop */
    transition: all 0.3s ease; /* match Events cards */
}

.press-logo {
    width: 100%;
    max-width: 220px;
    height: 44px;
    object-fit: contain;
    object-position: center center;
    display: inline-block;
    margin-top: 20px;
    transform: scale(1.0);
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    transition: all 0.3s ease;
}

.press-logo:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
}

/* Léman Bleu: +30% size and max brightness filter */
img[src="images/lemanbleu.png"] {
    transform: scale(1.3);
}

/* Align logo block with quote text column */
.press-card .press-quote + .press-logo {
    align-self: flex-start;
}

/* Hover animation similar to .event-card (sweep + lift) */
/* remove logo hover effects; animation stays on cards only */

/* Decorative quotes removed */
.press-card::before {
    display: none;
}

.press-card::after {
    /* Use ::after for the sweep hover animation (as in .event-card) */
    /* DISABLED: Hover animation causing issues */
    /* content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 0, 64, 0.1), transparent);
    transition: left 0.5s ease; */
}

/* DISABLED: Hover animation causing issues */
/* .press-card:hover::after {
    left: 100%;
} */

/* .press-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-glow);
    border-color: var(--primary-color);
} */

/* Ensure inner content sits above decorative quotes */
.press-card .press-logo,
.press-card .press-quote,
.press-card .press-source {
    position: relative;
    z-index: 1;
}

.press-quote { margin-top: 1.2rem; }
.press-quote p {
    font-size: 1.76rem; /* 20% smaller */
    color: #ffffff;
    line-height: 1.7;
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
}

.press-source { display: none; }

/* Placeholder for press logos (to be replaced with provided assets) */
.press-logo-placeholder {
    width: 100%;
    height: 44px;
    border: 1px dashed rgba(255, 255, 255, 0.18);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.5);
    font-size: 0.85rem;
}

.reviews-stream {
    padding: 4rem 0 2rem;
    background: var(--dark-bg);
    overflow-x: hidden;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
}

/* Full-bleed for reviews section */
.reviews-stream .container {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
    overflow-x: hidden;
    box-sizing: border-box;
    width: 100%;
}

.reviews-marquee {
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    margin: 1.5rem 0;
    padding: 0;
    box-sizing: border-box;
}

.marquee-row {
    display: flex;
    gap: 2rem;
    white-space: nowrap; /* keeps the carousel in one line (cards themselves can wrap text) */
}

.marquee-content {
    display: inline-flex;
    gap: 2rem;
}

.review-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 520px;            /* equal width for all */
    flex: 0 0 520px;         /* lock width in flex row */
    padding: 1.8rem 2rem;    /* more airy */
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    background: rgba(255,255,255,0.03);
    color: var(--text-primary);
    box-shadow: 0 6px 20px rgba(0,0,0,0.22);
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

.review-card::before,
.review-card::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    transition: opacity 0.35s ease;
}

/* Step 1: solid black base (element background already dark; keep hidden) */
.review-card::before {
    background: #000000;
    opacity: 0;
}

/* Step 2: solid red layer fades in first */
.review-card::after {
    background: #660000;
    opacity: 0;
}

/* On hover, fade solid red in */
.review-card:hover::after {
    opacity: 1;
}

/* Step 3: JS toggles .is-gradient shortly after hover, animate gradient like stats section */
.review-card.is-gradient::after {
    background: linear-gradient(45deg, #660000, #ff0055, #660000, #ff0055);
    background-size: 400% 400%;
    animation: gradientShift 6s ease infinite;
}

.review-text {
    font-size: 1.08rem;
    line-height: 1.6;
    color: var(--text-primary);
    opacity: 0.95;
    white-space: normal; /* allow multi-line paragraphs */
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
}

.review-author {
    margin-top: 0.8rem;
    color: var(--primary-color);
    font-weight: 700;
    font-family: 'Orbitron', sans-serif;
}

.review-card:hover {
    border-color: rgba(255,255,255,0.35);
    box-shadow: 0 8px 32px rgba(255, 0, 64, 0.4);
}

.review-card:hover .review-author,
.review-card:hover .review-text,
.review-card:hover .review-stars {
    color: #ffffff;
    transition: color 0.4s ease;
}

/* reuse stats-section gradient animation */

.review-stars {
    font-family: 'Orbitron', sans-serif;
    letter-spacing: 1px;
    color: var(--primary-color);
    margin-bottom: 0.6rem;
    font-weight: 700;
}

.marquee-row.left {
    animation: marqueeLeft 22.5s linear infinite;
}

.marquee-row.right {
    animation: marqueeRight 22.5s linear infinite;
}

@keyframes marqueeLeft {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@keyframes marqueeRight {
    0% { transform: translateX(-50%); }
    100% { transform: translateX(0); }
}

.testimonials-slider {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
}

.testimonial-card {
    display: none;
    text-align: center;
    padding: 3rem 2rem;
    background: var(--card-bg);
    border-radius: 20px;
    border: 1px solid rgba(255, 0, 64, 0.2);
}

.testimonial-card.active {
    display: block;
    animation: fadeInSlide 0.5s ease;
}

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

.testimonial-content p {
    font-size: 1.3rem;
    font-style: italic;
    color: var(--text-primary);
    margin-bottom: 2rem;
    line-height: 1.6;
}

.source-name {
    font-weight: 600;
    color: var(--primary-color);
    font-size: 1.1rem;
}

.testimonial-dots {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 2rem;
}

.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--text-muted);
    cursor: pointer;
    transition: all 0.3s ease;
}

.dot.active {
    background: var(--primary-color);
    box-shadow: 0 0 10px rgba(255, 0, 64, 0.5);
}

/* Contact Section */
.contact {
    padding: 2.4rem 0;
    background: var(--dark-bg);
}

.contact-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: start;
}

.contact-info h2 {
    font-family: 'Orbitron', monospace;
    font-size: 2.5rem;
    font-weight: 900;
    margin-bottom: 2rem;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    color: var(--text-secondary);
}

.contact-item i {
    color: var(--primary-color);
    font-size: 1.2rem;
    width: 20px;
}

.social-links {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
}

.social-link {
    width: 50px;
    height: 50px;
    background: var(--card-bg);
    border: 1px solid rgba(255, 0, 64, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    text-decoration: none;
    transition: all 0.3s ease;
}

.social-link:hover {
    background: var(--primary-color);
    color: var(--text-primary);
    transform: translateY(-3px);
    box-shadow: var(--shadow-glow);
}

.contact-form {
    background: var(--card-bg);
    padding: 2rem;
    border-radius: 20px;
    border: 1px solid rgba(255, 0, 64, 0.2);
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 1rem;
    background: var(--darker-bg);
    border: 1px solid rgba(255, 0, 64, 0.2);
    border-radius: 10px;
    color: var(--text-primary);
    font-family: inherit;
    transition: all 0.3s ease;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 10px rgba(255, 0, 64, 0.3);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--text-muted);
}

/* Footer */
.footer {
    background: var(--darker-bg);
    padding: 1.2rem 0;
    border-top: 1px solid rgba(255, 0, 64, 0.2);
    width: 100%;
    max-width: 100%;
    overflow: visible !important;
    position: relative;
}

.footer .container {
    max-width: 100%;
    padding-left: 20px;
    padding-right: 20px;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 2rem;
    overflow: visible !important;
    position: relative;
}

.footer-logo {
    display: flex;
    align-items: center;
}

.footer-links {
    display: flex;
    gap: 1.2rem;
    flex-wrap: wrap;
}

.footer-links a {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-links a:hover {
    color: var(--primary-color);
}

/* Footer columns */
.footer-columns {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* 5 columns on desktop */
    gap: 1.5rem;
    margin-top: 1rem;
}

.footer-col {
    text-align: center;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 1.25rem 1rem;
    transition: all 0.3s ease;
}

.footer-col:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(220, 38, 38, 0.3);
}

.footer-col h4 {
    font-family: 'Orbitron', monospace;
    font-weight: 900;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

.footer-col p {
    color: var(--text-secondary);
    margin: 0.2rem 0;
    font-size: 0.9rem;
}

.footer-legal {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.legal-links {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.legal-links a {
    color: var(--text-secondary);
    text-decoration: none;
}

.legal-links a:hover { color: var(--primary-color); }

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

.newsletter input[type="email"] {
    padding: 0.7rem 1rem;
    background: var(--darker-bg);
    border: 1px solid rgba(255, 0, 64, 0.2);
    color: var(--text-primary);
}

.footer-info {
    color: var(--text-muted);
    font-size: 0.9rem;
    padding-bottom: 50px;
    text-align: center; /* Center copyright on desktop */
    width: 100%;
    max-width: 100%;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
    position: relative !important;
    overflow: visible !important;
    z-index: 1 !important;
}

.footer-credits {
    margin-top: 0.5rem;
    position: relative !important;
    overflow: visible !important;
    z-index: 2 !important;
}

.footer-credits a {
    text-decoration: none;
    color: inherit;
    transition: opacity 0.3s ease;
}

.footer-credits a:hover {
    opacity: 0.8;
}

.credits-text {
    color: #666666; /* Dark grey */
}

.credits-talents {
    color: #FFD700; /* Bright yellow */
    font-weight: 600;
}

.credits-agence {
    background: linear-gradient(90deg, #FF8C00, #FF4500);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 500;
}

.credits-jeunes {
    background: linear-gradient(90deg, #FF1493, #8B00FF);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 500;
}

/* Stefan Dacey @ Talents - Interactive Footer Link */
.stefan-link {
    position: relative !important;
    display: inline-block !important;
    text-decoration: none !important;
    color: inherit !important;
    vertical-align: baseline !important;
    overflow: visible !important;
    z-index: 10 !important;
}

.stefan-text {
    color: var(--text-secondary);
    transition: color 0.3s ease;
}

.stefan-link:hover .stefan-text {
    color: var(--primary-color);
}

/* Desktop hover icons container */
.stefan-icons-container {
    position: absolute !important;
    bottom: calc(100% - 17px) !important; /* Changed from 8px to -17px (8 - 25) to move down 25px */
    left: 50% !important;
    transform: translateX(-50%) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease !important;
    z-index: 99999 !important;
    white-space: nowrap !important;
    display: block !important;
    min-width: 200px !important;
    height: auto !important;
    will-change: opacity, transform, visibility !important;
}

/* Ensure container is always in DOM and positioned correctly */
#stefan-icons-container {
    position: absolute !important;
    display: block !important;
}

/* FORCE VISIBILITY FOR DEBUGGING - Uncomment to test and bypass cache */
/* TEMPORARY: Uncomment these 5 lines to force visibility permanently */
/*
.stefan-icons-container {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    display: block !important;
    background: rgba(255, 0, 0, 0.3) !important;
}
*/

/* Hover states - multiple selectors for maximum compatibility */
.stefan-link:hover .stefan-icons-container,
.stefan-link:focus .stefan-icons-container,
.stefan-link:hover .stefan-icons-container:hover,
.stefan-icons-container:hover,
.stefan-icons-container:focus-within {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateX(-50%) translateY(-2px) !important;
    display: block !important;
}

/* Force visibility on desktop hover */
@media (min-width: 769px) {
    .stefan-link:hover .stefan-icons-container,
    .stefan-link:focus .stefan-icons-container {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        display: block !important;
    }
}

/* Bridge zone to maintain hover */
.stefan-icons-bridge {
    position: absolute !important;
    bottom: -12px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 250px !important;
    height: 15px !important;
    background: transparent !important;
    pointer-events: auto !important;
    z-index: 1 !important;
}

/* Icons wrapper */
.stefan-icons {
    display: flex !important;
    gap: 10px !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 16px !important;
    background: rgba(10, 10, 10, 0.95) !important; /* Changed to opaque dark background */
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-radius: 20px !important;
    border: 1px solid #ff0040 !important; /* Fine red border */
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
    position: relative !important;
    z-index: 10001 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Individual icon */
.stefan-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    border-radius: 50% !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: relative !important;
    color: white !important;
    font-size: 16px !important;
}

.stefan-icon i {
    font-size: 16px !important;
    line-height: 1 !important;
}

/* LinkedIn - Blue */
.stefan-icon-linkedin {
    background-color: #0077B5 !important;
}

.stefan-icon-linkedin:hover {
    background-color: #005885 !important;
    transform: translateY(-3px) scale(1.1) !important;
}

/* Instagram - Gradient Pink to Orange */
.stefan-icon-instagram {
    background: linear-gradient(135deg, #E4405F 0%, #FCAF45 100%) !important;
}

.stefan-icon-instagram:hover {
    background: linear-gradient(135deg, #C13584 0%, #E1306C 50%, #FCAF45 100%) !important;
    transform: translateY(-3px) scale(1.1) !important;
}

/* WhatsApp - Green */
.stefan-icon-whatsapp {
    background-color: #25D366 !important;
}

.stefan-icon-whatsapp:hover {
    background-color: #1DA851 !important;
    transform: translateY(-3px) scale(1.1) !important;
}

/* Email - Gray */
.stefan-icon-email {
    background-color: #666666 !important;
}

.stefan-icon-email:hover {
    background-color: #4a4a4a !important;
    transform: translateY(-3px) scale(1.1) !important;
}

.stefan-icon:active {
    transform: translateY(-1px) scale(1.05) !important;
}

.stefan-icon:focus {
    outline: none;
}

/* Mobile overlay */
.stefan-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000 !important; /* Higher than header (1000) and mobile menu (1200) */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.stefan-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.stefan-overlay-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
}

.stefan-overlay-content {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    box-sizing: border-box;
}

.stefan-overlay-close {
    position: fixed !important; /* Changed from absolute to fixed to be above header */
    top: 80px !important; /* Increased from 20px to 80px to be below header on mobile */
    right: 20px !important;
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10001 !important; /* Higher than overlay (10000) and header (1000) */
    transition: opacity 0.3s ease;
}

/* On mobile, adjust position to be below header */
@media (max-width: 768px) {
    .stefan-overlay-close {
        top: 80px !important; /* Below header on mobile */
    }
}

.stefan-overlay-close:hover {
    opacity: 0.7;
}

.stefan-overlay-close svg {
    width: 100%;
    height: 100%;
}

.stefan-overlay-icons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    max-width: 300px;
    width: 100%;
}

.stefan-overlay-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    text-decoration: none !important;
    transition: all 0.3s ease;
    margin: 0 auto;
    border-radius: 50%;
    color: white !important;
    font-size: 28px !important;
}

.stefan-overlay-icon i {
    font-size: 28px !important;
    line-height: 1 !important;
}

/* LinkedIn - Blue */
.stefan-overlay-icon-linkedin {
    background-color: #0077B5 !important;
}

.stefan-overlay-icon-linkedin:hover {
    background-color: #005885 !important;
    transform: scale(1.1);
}

/* Instagram - Gradient Pink to Orange */
.stefan-overlay-icon-instagram {
    background: linear-gradient(135deg, #E4405F 0%, #FCAF45 100%) !important;
}

.stefan-overlay-icon-instagram:hover {
    background: linear-gradient(135deg, #C13584 0%, #E1306C 50%, #FCAF45 100%) !important;
    transform: scale(1.1);
}

/* WhatsApp - Green */
.stefan-overlay-icon-whatsapp {
    background-color: #25D366 !important;
}

.stefan-overlay-icon-whatsapp:hover {
    background-color: #1DA851 !important;
    transform: scale(1.1);
}

/* Email - Gray */
.stefan-overlay-icon-email {
    background-color: #666666 !important;
}

.stefan-overlay-icon-email:hover {
    background-color: #4a4a4a !important;
    transform: scale(1.1);
}

.stefan-overlay-icon:focus {
    outline: none;
}

/* Disable body scroll when overlay is active */
body.stefan-overlay-open {
    overflow: hidden;
}

/* Responsive Design */

/* Tablet breakpoint */
@media (max-width: 1400px) and (min-width: 769px) {
    /* Hero adjustments for tablets */
    #home .hero-content {
        grid-template-columns: 1fr 10px; /* hero-text takes remaining space, logos column only 10px */
        padding-left: 40px;
        padding-right: 40px;
        gap: 0; /* No gap to prevent overflow */
        max-width: 100%;
        box-sizing: border-box;
    }
    
    /* Hide hero-visual on tablets */
    #home .hero-visual {
        display: none !important;
    }
    
    /* Hero-text takes full width with 40px padding on all sides */
    #home .hero-text {
        grid-column: 1;
        padding: 40px !important;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow: hidden;
    }
    
    /* Ensure logos column is only 10px wide */
    #home .hero-logos-wrapper {
        grid-column: 2;
        width: 10px;
        min-width: 10px;
        max-width: 10px;
        box-sizing: border-box;
        overflow: hidden;
    }
    
    /* Testimonials section - "On parle de nous" */
    .testimonials-grid {
        grid-template-columns: repeat(3, 1fr) !important; /* Each card takes 1/3 of width */
        gap: 1.5rem;
    }
    
    .press-card {
        max-width: 100% !important; /* Remove max-width restriction */
        width: 100%;
    }
    
    /* Reduce font size by 30% */
    .press-quote p {
        font-size: 1.232rem !important; /* 1.76rem * 0.7 = 1.232rem */
    }
    
    /* Disable decorative quotes */
    .press-card::before {
        display: none !important;
    }
}

/* Below 1440px */
@media (max-width: 1440px) {
    .nav-container {
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* Mobile menu breakpoint - 1060px and below */
@media (max-width: 1079px) {
    .hamburger {
        display: flex;
    }
    
    .nav-icons {
        order: 10;
        margin: 1rem 0;
        gap: 1rem;
    }
    
    .nav-icon {
        width: 44px;
        height: 44px;
        font-size: 1.1rem;
    }
    
    .nav-container {
        padding: 1rem 20px;
        justify-content: flex-start;
    }
    .nav-logo { 
        justify-content: flex-start; 
        position: relative; 
        z-index: 999999 !important;
    }
    .logo-image { 
        margin-left: 0;
        height: 32px;
    }
    .lang-switcher-mobile {
        display: flex;
        margin-left: auto !important;
        margin-right: 12px;
    }
    .hamburger { 
        position: relative; 
        z-index: 999999 !important;
        margin-left: 0 !important;
    }
    .navbar { 
        background: rgba(10,10,10,0.9) !important; 
        backdrop-filter: blur(6px); 
        z-index: 999998 !important; /* Above menu overlay */
    }
    
    .nav-menu {
        position: fixed !important;
        inset: 0 !important; /* full-screen overlay */
        height: 100vh !important;
        height: 100dvh !important; /* Dynamic viewport height for mobile */
        width: 100vw !important;
        max-width: 100vw !important;
        left: 0 !important;
        right: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 1.2rem;
        background-color: rgba(10, 10, 10, 0.99) !important;
        text-align: center;
        transition: transform 0.3s ease;
        transform: translateX(-100%);
        box-shadow: none;
        padding: 2rem 0;
        z-index: 999997 !important; /* Extremely high z-index */
        box-sizing: border-box !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }
    
    .nav-menu.active {
        transform: translateX(0) !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    .nav-link { 
        font-size: 1.25rem; 
    }
    .reserve-btn { 
        margin-top: 0.6rem; 
    }
    
    /* ===========================================
       MOBILE MENU - DROPDOWNS CENTERED + 2 COLUMNS
       =========================================== */
    
    /* Hide standalone Contact link on mobile */
    .nav-link-contact {
        display: none !important;
    }
    
    /* Show Contact in submenu on mobile */
    .mobile-only-submenu {
        display: block !important;
    }
    
    /* Nav dropdown centered - HIGH SPECIFICITY */
    #nav-menu.active .nav-dropdown,
    .nav-menu.active .nav-dropdown {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
        text-align: center !important;
    }
    
    #nav-menu.active .nav-dropdown > .nav-link,
    .nav-menu.active .nav-dropdown > .nav-link {
        font-size: 1.3rem !important;
        font-weight: 700 !important;
        margin-bottom: 0.5rem !important;
        pointer-events: none !important;
        text-align: center !important;
        justify-content: center !important;
        width: 100% !important;
        display: flex !important;
    }
    
    #nav-menu.active .nav-dropdown > .nav-link .fa-chevron-down,
    .nav-menu.active .nav-dropdown > .nav-link .fa-chevron-down {
        display: none !important;
    }
    
    /* Submenus in 2 columns, centered - HIGH SPECIFICITY */
    #nav-menu.active .nav-dropdown .dropdown-content,
    .nav-menu.active .nav-dropdown .dropdown-content,
    #nav-menu.active .dropdown-content,
    .nav-menu.active .dropdown-content {
        position: static !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 auto !important;
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem 2rem !important;
        width: auto !important;
        min-width: 250px !important;
        max-width: 320px !important;
    }
    
    #nav-menu.active .dropdown-content a,
    .nav-menu.active .dropdown-content a {
        font-size: 1rem !important;
        padding: 0.1rem 0.125rem !important;
        color: rgba(255, 255, 255, 0.8) !important;
        border-bottom: none !important;
        text-align: center !important;
        display: block !important;
        white-space: nowrap !important;
    }
    
    #nav-menu.active .dropdown-content a:hover,
    .nav-menu.active .dropdown-content a:hover {
        color: var(--primary-color) !important;
        background: transparent !important;
    }
    
    #nav-menu.active .dropdown-divider,
    .nav-menu.active .dropdown-divider {
        display: none !important;
    }
    
    /* Map section behaves like mobile */
    .hero.hero-map {
        padding-top: 30px;
        padding-bottom: 30px;
    }
    
    .hero.hero-map .hero-content {
        grid-template-columns: 1fr !important;
    }
    
    .hero.hero-map .hero-content > *:nth-child(2) {
        display: none !important;
    }
    
    .hero.hero-map .hero-text {
        width: 100% !important;
        grid-column: 1 !important;
    }
    
    /* Stats section behaves like mobile */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
    
    /* Reduce stat number size by 30% + 20% on mobile */
    .stat-number {
        font-size: 1.68rem; /* 3rem * 0.7 * 0.8 = 1.68rem */
        margin-bottom: 0 !important;
    }
    
    /* Remove margin-bottom on mobile */
    .stat-icon {
        margin-bottom: 0 !important;
    }
    
    .stat-label {
        margin-bottom: 0 !important;
    }
}

@media (max-width: 768px) {
    /* Prevent horizontal overflow on mobile - CRITICAL FIX */
    /* Remove the universal selector as it's too aggressive */
    
    html {
        overflow-x: hidden !important;
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    body {
        overflow-x: hidden !important;
        max-width: 100% !important;
        width: 100% !important;
        position: relative;
        box-sizing: border-box !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Force ALL elements to use border-box and prevent overflow */
    * {
        box-sizing: border-box !important;
    }
    
    /* Prevent any element from exceeding 100% width - ULTIMATE FIX */
    *:not(html):not(body):not(.marquee-row):not(.marquee-content) {
        max-width: 100% !important;
    }
    
    /* Force all block and inline-block elements */
    div, section, header, footer, nav, main, article, aside, p, h1, h2, h3, h4, h5, h6, ul, ol, li, a, span, img, video, iframe, canvas, svg {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Force all positioned elements */
    [style*="position"],
    [class*="fixed"],
    [class*="absolute"] {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Force all containers and wrappers */
    [class*="container"],
    [class*="wrapper"],
    [class*="content"],
    [class*="section"] {
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }
    
    /* ABSOLUTE FIX: Force viewport to not exceed screen */
    html {
        position: relative !important;
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
    }
    
    body {
        position: relative !important;
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
    }
    
    /* Prevent any element from causing horizontal scroll - ULTIMATE FIX */
    *:not(.marquee-row):not(.marquee-content):not(html):not(body) {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Force all positioned elements to not exceed */
    [style*="position: fixed"],
    [style*="position: absolute"],
    .navbar,
    .nav-menu,
    [class*="fixed"],
    [class*="absolute"] {
        max-width: 100% !important;
        width: 100% !important;
        left: 0 !important;
        right: 0 !important;
        box-sizing: border-box !important;
    }
    
    /* Prevent negative margins from causing overflow - only negative ones */
    *[style*="margin-left: -"],
    *[style*="margin-right: -"] {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Ensure wrappers don't use negative margins */
    .hero-logos-wrapper,
    .formulas-carousel-wrapper,
    .testimonials-slider-wrapper {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Force all elements with fixed widths to not exceed */
    [style*="width:"] {
        max-width: 100% !important;
    }
    
    /* Prevent transforms from causing overflow */
    [style*="transform"] {
        max-width: 100% !important;
    }
    
    /* Exception for marquee content that needs to scroll */
    .marquee-row,
    .marquee-content {
        max-width: none !important;
    }
    
    /* But contain the parent - USE 100% NOT 100vw */
    .reviews-marquee {
        max-width: 100% !important;
        overflow: hidden !important;
    }
    
    /* Force ALL elements to not exceed viewport - USE 100% NOT 100vw */
    *:not(.marquee-row):not(.marquee-content):not(html):not(body) {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Specific fixes for common elements - USE 100% NOT 100vw */
    .navbar,
    .nav-container,
    .nav-menu,
    .footer,
    .footer-info,
    .footer-content,
    .footer-columns,
    .footer-legal,
    .container,
    section,
    header,
    footer,
    nav,
    main,
    article,
    aside {
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }
    
    /* SVG container should not cause overflow */
    .svg-container {
        position: absolute !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        max-width: 0 !important;
    }
    
    /* Fix navbar on mobile */
    .navbar {
        max-width: 100% !important;
        width: 100% !important;
        left: 0 !important;
        right: 0 !important;
        box-sizing: border-box !important;
    }
    
    .nav-container {
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    
    /* Remove padding from formulas and game modes sections on mobile */
    .formulas-section {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    .formulas-section .container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    .game-modes-section {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* Remove margin-bottom from testimonials section header on mobile */
    .testimonials .section-header {
        margin-bottom: 0 !important;
    }
    
    /* Ensure all sections don't overflow - USE 100% NOT 100vw */
    section {
        max-width: 100% !important;
        overflow-x: hidden !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Ensure container doesn't overflow - USE 100% NOT 100vw */
    .container {
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        width: 100% !important;
    }
    
    /* Prevent any element with fixed width from causing overflow */
    [style*="width"],
    img,
    video,
    iframe {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Ensure all positioned elements don't cause overflow - USE 100% NOT 100vw */
    [class*="arrow"],
    [class*="carousel"],
    [class*="slider"] {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Fix reviews stream container on mobile - USE 100% NOT 100vw */
    .reviews-stream {
        max-width: 100% !important;
        overflow-x: hidden !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .reviews-stream .container {
        max-width: 100% !important;
        overflow-x: hidden !important;
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
    }
    
    /* Fix reviews marquee on mobile - enable manual horizontal scroll */
    .reviews-marquee {
        padding: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        overflow-x: auto !important; /* Enable horizontal scroll */
        overflow-y: hidden !important;
        box-sizing: border-box !important;
        -webkit-overflow-scrolling: touch !important; /* Smooth scroll on iOS */
        scrollbar-width: none !important; /* Hide scrollbar Firefox */
        -ms-overflow-style: none !important; /* Hide scrollbar IE/Edge */
    }
    .reviews-marquee::-webkit-scrollbar {
        display: none !important; /* Hide scrollbar Chrome/Safari */
    }
    
    /* Stop animation and allow manual scroll on mobile */
    .marquee-row {
        animation: none !important; /* Stop auto-scroll animation */
        max-width: none !important;
        width: max-content !important;
        padding: 0 20px !important;
    }
    .marquee-row.left,
    .marquee-row.right {
        animation: none !important; /* Override specific animations */
    }
    
    /* Hide duplicate content on mobile (was for infinite loop) */
    .marquee-content[aria-hidden="true"] {
        display: none !important;
    }
    
    /* Fix testimonials container on mobile - USE 100% NOT 100vw */
    .testimonials .container {
        padding-left: 20px !important;
        padding-right: 20px !important;
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Reduce main hero vertical footprint by ~10% on mobile */
    #home.hero {
        min-height: 90vh;
        overflow-x: hidden;
    }

    /* Slightly reduce top padding of hero content on mobile */
    #home .hero-content {
        padding-top: 60px;
        overflow-x: hidden;
    }
    
    .hero-content {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 0.6rem; /* reduced space between buttons and logos */
        padding-left: 20px; /* 20px side padding */
        padding-right: 20px;
    }
    /* Ensure override for main hero's desktop padding */
    #home .hero-content {
        padding-left: 20px;
        padding-right: 20px;
        grid-template-columns: 1fr !important; /* collapse to single column */
        grid-template-rows: auto;
    }
    
    /* Hero-map: hide 2nd column and make 1st column 100% width on mobile */
    .hero.hero-map {
        padding-top: 30px;
        padding-bottom: 30px;
    }
    
    .hero.hero-map .hero-content {
        grid-template-columns: 1fr !important;
    }
    
    .hero.hero-map .hero-content > *:nth-child(2) {
        display: none !important;
    }
    
    .hero.hero-map .hero-text {
        width: 100% !important;
        grid-column: 1 !important;
    }
    .hero-text {
        padding-right: 0;
        align-items: center;
    }
    .hero-title,
    .hero-subtitle {
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }
    /* Hero slide descriptions: justify text but keep block centered */
    #home .hero-content-item .hero-subtitle,
    #home .hero-content-default .hero-subtitle {
        text-align: justify !important;
        text-align-last: center !important;
        -moz-text-align-last: center !important;
    }
    .hero-subtitle { max-width: 100% !important; margin-bottom: 20px !important; }
    .hero-text .hero-subtitle { margin-bottom: 20px !important; }
    
    .hero-title {
        font-size: 2.5rem;
    }
    
    .hero-buttons {
        justify-content: center;
        flex-wrap: wrap;
    }

    /* Revert hero buttons to default sizing on mobile */
    .hero .btn-primary,
    .hero .btn-secondary,
    .hero button.btn-primary,
    .hero button.btn-secondary,
    .hero a.btn-primary,
    .hero a.btn-secondary {
        padding: 1.1rem 2.2rem;
        font-size: 1rem;
        margin-top: 20px;
    }
    .hero .btn-primary i,
    .hero .btn-secondary i { font-size: 1em; }

    /* Hide secondary button on mobile; keep first centered */
    .hero .btn-secondary { display: none !important; }

    /* Hide second column visual on mobile to avoid implicit grid column */
    .hero-visual {
        display: none !important;
    }

    /* Mobile carousel wrapper - 3D perspective container */
    #home .hero-logos-wrapper {
        grid-column: 1 / -1;
        grid-row: 2;
        position: relative;
        width: 100%;
        max-width: 100%;
        margin-top: -10vh;
        margin-left: 0;
        margin-right: 0;
        overflow: visible;
        perspective: 900px;
        perspective-origin: center center;
        padding: 0 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
    }
    
    /* Show carousel arrows on mobile - positioned at edges */
    .hero-carousel-arrow {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 200;
    }
    
    #home .hero-carousel-prev {
        left: 5px;
    }
    
    #home .hero-carousel-next {
        right: 5px;
    }
    
    /* Main hero logos on mobile: 3D circular carousel - compact 36° spacing */
    #home .hero-logos {
        display: flex !important;
        position: relative;
        width: 180px;
        height: 110px;
        margin-left: -40px !important;
        flex-shrink: 0;
        transform-style: preserve-3d;
        transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    /* Add subtle shadow to enhance 3D effect */
    #home .hero-logos::after {
        content: '';
        position: absolute;
        bottom: -15px;
        left: 50%;
        transform: translateX(-50%);
        width: 80px;
        height: 8px;
        background: radial-gradient(ellipse, rgba(0, 0, 0, 0.3), transparent);
        border-radius: 50%;
        z-index: -1;
    }
    
    #home .hero-logo-item {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 63px;
        height: 93px;
        margin-left: -31.5px;
        margin-top: -46.5px;
        padding: 15px 0;
        transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
        transform-style: preserve-3d;
        backface-visibility: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Center logo (front) - active logo, slightly shifted right */
    #home .hero-logo-item.center-item {
        transform: translateZ(160px) translateX(10px) scale(1.15);
        opacity: 1;
        z-index: 100;
        filter: brightness(1.1) drop-shadow(0 4px 15px rgba(255, 0, 64, 0.3));
    }
    
    /* Side logos (left and right) - compact 36° spacing (60% of original) */
    #home .hero-logo-item.side-left {
        width: 50px;
        height: 80px;
        margin-left: -25px;
        margin-top: -40px;
        padding: 15px 0;
        transform: rotateY(-36deg) translateZ(160px) scale(1);
        opacity: 0.7;
        z-index: 50;
        filter: brightness(0.8) drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
        transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    #home .hero-logo-item.side-right {
        width: 50px;
        height: 80px;
        margin-left: -25px;
        margin-top: -40px;
        padding: 15px 0;
        transform: rotateY(36deg) translateZ(160px) scale(1);
        opacity: 0.7;
        z-index: 50;
        filter: brightness(0.8) drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
        transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    /* Images for side logos */
    #home .hero-logo-item.side-left img,
    #home .hero-logo-item.side-right img {
        width: 50px !important;
        height: 50px !important;
        max-width: 50px;
        max-height: 50px;
    }
    
    /* Back logos - compact 72° spacing (60% of original) */
    #home .hero-logo-item.back-left {
        transform: rotateY(-72deg) translateZ(160px) scale(0.8);
        opacity: 0;
        z-index: 1;
        pointer-events: none;
        transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    #home .hero-logo-item.back-center {
        transform: rotateY(180deg) translateZ(160px) scale(0.8);
        opacity: 0;
        z-index: 1;
        pointer-events: none;
        transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    #home .hero-logo-item.back-right {
        transform: rotateY(72deg) translateZ(160px) scale(0.8);
        opacity: 0;
        z-index: 1;
        pointer-events: none;
        transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    /* Legacy classes for compatibility */
    #home .hero-logo-item.side-item {
        transform: rotateY(36deg) translateZ(160px) scale(1);
        opacity: 0;
        pointer-events: none;
        transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    #home .hero-logo-item.hidden-item {
        opacity: 0;
        transform: rotateY(180deg) translateZ(160px) scale(0.8);
        pointer-events: none;
        transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    #home .hero-logo-item img {
        width: 63px !important;
        height: 63px !important;
        object-fit: contain;
        max-width: 63px;
        max-height: 63px;
        flex-shrink: 0;
    }
    
    /* Make LaseRed logo container taller with padding - show on mobile */
    #home .hero-logo-item[data-logo="lasered"] {
        display: flex !important;
        width: 63px !important;
        height: 93px !important;
        padding: 15px 0 !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* Keep LaseRed logo taller in side positions */
    #home .hero-logo-item[data-logo="lasered"].side-left,
    #home .hero-logo-item[data-logo="lasered"].side-right {
        width: 50px !important;
        height: 80px !important;
        margin-left: -25px !important;
        margin-top: -40px !important;
        padding: 15px 0 !important;
    }
    
    #home .hero-logo-item[data-logo="lasered"] img {
        width: 63px !important;
        height: 63px !important;
        min-width: 63px;
        max-width: 63px;
        min-height: 63px;
        max-height: 63px;
        object-fit: contain;
    }
    
    /* Ensure LaseRed logo image stays square in center position */
    #home .hero-logo-item[data-logo="lasered"].center-item img {
        width: 63px !important;
        height: 63px !important;
        min-width: 63px;
        max-width: 63px;
        min-height: 63px;
        max-height: 63px;
    }
    
    /* Adjust LaseRed logo image size for side positions */
    #home .hero-logo-item[data-logo="lasered"].side-left img,
    #home .hero-logo-item[data-logo="lasered"].side-right img {
        width: 50px !important;
        height: 50px !important;
        min-width: 50px;
        max-width: 50px;
        min-height: 50px;
        max-height: 50px;
    }
    
    /* Electric border only on center item on mobile */
    #home .hero-logo-item.side-left::before,
    #home .hero-logo-item.side-left::after,
    #home .hero-logo-item.side-right::before,
    #home .hero-logo-item.side-right::after,
    #home .hero-logo-item.back-left::before,
    #home .hero-logo-item.back-left::after,
    #home .hero-logo-item.back-center::before,
    #home .hero-logo-item.back-center::after,
    #home .hero-logo-item.back-right::before,
    #home .hero-logo-item.back-right::after {
        opacity: 0 !important;
    }
    
    /* Ensure center item has active border including LaseRed logo */
    #home .hero-logo-item.center-item::before,
    #home .hero-logo-item.center-item::after {
        display: block !important;
    }
    
    #home .hero-logo-item.center-item.active::before {
        border-color: rgba(255, 0, 64, 0.7);
        opacity: 0.8;
        box-shadow: 0 0 18px rgba(255, 0, 64, 0.55);
    }
    
    #home .hero-logo-item.center-item.active::after {
        border-color: rgba(255, 0, 64, 0.9);
        opacity: 1;
        box-shadow: 0 0 22px rgba(255, 0, 64, 0.7);
    }
    
    /* LaseRed logo 3D transformations - compact 36° spacing */
    #home .hero-logo-item[data-logo="lasered"].center-item {
        width: 63px !important;
        height: 93px !important;
        margin-left: -31.5px !important;
        margin-top: -46.5px !important;
        padding: 15px 0 !important;
        transform: translateZ(160px) translateX(10px) scale(1.15) !important;
    }
    
    #home .hero-logo-item[data-logo="lasered"].side-left {
        width: 50px !important;
        height: 80px !important;
        margin-top: -40px !important;
        padding: 15px 0 !important;
        transform: rotateY(-36deg) translateZ(160px) scale(1) !important;
    }
    
    #home .hero-logo-item[data-logo="lasered"].side-right {
        width: 50px !important;
        height: 80px !important;
        margin-top: -40px !important;
        padding: 15px 0 !important;
        transform: rotateY(36deg) translateZ(160px) scale(1) !important;
    }
    
    #home .hero-logo-item[data-logo="lasered"].back-left {
        transform: rotateY(-72deg) translateZ(160px) scale(0.8) !important;
    }
    
    #home .hero-logo-item[data-logo="lasered"].back-center {
        transform: rotateY(180deg) translateZ(160px) scale(0.8) !important;
    }
    
    #home .hero-logo-item[data-logo="lasered"].back-right {
        transform: rotateY(72deg) translateZ(160px) scale(0.8) !important;
    }
    
    /* Formulas 3D Carousel on Mobile */
    .formulas-carousel-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        perspective: 1400px;
        perspective-origin: center center;
        margin-bottom: 0;
        margin-left: 0;
        margin-right: 0;
        width: 100%;
        max-width: 100%;
        padding: 2rem 20px;
        box-sizing: border-box;
        overflow-x: hidden;
    }
    
    .formulas-carousel-arrow {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 200;
    }
    
    .formulas-carousel-prev {
        left: 5px;
    }
    
    .formulas-carousel-next {
        right: 5px;
    }
    
    .formulas-grid {
        display: flex !important;
        position: relative;
        width: 85%;
        max-width: 380px;
        height: 600px;
        margin: 0 auto;
        transform-style: preserve-3d;
        transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .formula-card {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 100%;
        height: auto;
        max-height: 580px;
        margin-left: -50%;
        margin-top: -290px;
        padding: 2rem 1.5rem;
        transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
        transform-style: preserve-3d;
        backface-visibility: hidden;
        overflow-y: auto;
    }
    
    /* Reduce font sizes for mobile carousel */
    .formula-card .formula-duration {
        font-size: 1.8rem; /* Reduced by 40% from 3rem */
    }
    
    .formula-card .formula-title {
        font-size: 1.05rem; /* Reduced by 30% from 1.5rem */
        margin-bottom: 1.5rem;
    }
    
    .formula-card .formula-round p {
        font-size: 0.77rem; /* Reduced by 30% from ~1.1rem */
        line-height: 1.5;
    }
    
    .formula-card .mode-list {
        font-size: 0.525rem; /* Reduced by 30% from 0.75rem */
    }
    
    .formula-card .formula-price {
        font-size: 1.3rem;
    }
    
    .formula-card .per-player {
        font-size: 0.7rem;
    }
    
    .formula-card .formula-note {
        font-size: 0.75rem;
    }
    
    .formula-card .round-number {
        font-size: 0.85rem;
        width: 28px;
        height: 28px;
    }
    
    .formula-card .formula-content {
        gap: 1rem;
    }
    
    /* Reduce badge size by 20% on mobile */
    .formula-card .formula-badge {
        font-size: 0.68rem; /* 0.85rem * 0.8 */
        padding: 0.32rem 0.8rem; /* 0.4rem 1rem * 0.8 */
        top: 0.8rem; /* 1rem * 0.8 */
        right: 0.8rem; /* 1rem * 0.8 */
    }
    
    /* Center card - fully visible */
    .formula-card.formula-center {
        transform: translateZ(150px) scale(1);
        opacity: 1 !important;
        z-index: 100;
        pointer-events: auto;
        background: rgba(20, 20, 30, 1) !important;
    }
    
    /* Left card - 3D effect */
    .formula-card.formula-left {
        transform: rotateY(45deg) translateZ(50px) scale(0.75);
        opacity: 0.4;
        z-index: 50;
        pointer-events: none;
        filter: brightness(0.6);
    }
    
    /* Right card - 3D effect */
    .formula-card.formula-right {
        transform: rotateY(-45deg) translateZ(50px) scale(0.75);
        opacity: 0.4;
        z-index: 50;
        pointer-events: none;
        filter: brightness(0.6);
    }
    
    /* Disable hover effects on non-center cards */
    .formula-card:not(.formula-center):hover {
        transform: none;
        border-color: rgba(255, 255, 255, 0.1);
        box-shadow: none;
    }
    
    .formula-card:not(.formula-center)::before {
        display: none;
    }

    .about-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    /* Feature items: center icons vertically and add spacing on mobile */
    .feature-item {
        align-items: center !important;
        margin-bottom: 15px !important;
    }
    
    .game-modes {
        grid-template-columns: 1fr;
    }
    
    /* Game Modes Accordion on Mobile */
    .game-mode-card {
        padding: 0 !important;
        text-align: left !important;
        position: relative;
    }
    
    /* Override desktop styles for mobile accordion */
    .game-mode-card .mode-header {
        display: flex !important;
        width: 100%;
        align-items: center;
        gap: 1rem;
        padding: 0.75rem 1.5rem;
        background: transparent;
        border: none;
        cursor: pointer;
        text-align: left;
        transition: all 0.3s ease;
        position: relative;
        z-index: 10;
        box-sizing: border-box;
    }
    
    .game-mode-card .mode-header .mode-chevron {
        display: block !important;
    }
    
    .game-mode-card .mode-header:hover {
        background: rgba(255, 0, 64, 0.05);
    }
    
    .game-mode-card .mode-header * {
        pointer-events: none;
    }
    
    .game-mode-card .mode-header .mode-icon {
        width: 50px !important;
        height: 50px !important;
        min-width: 50px;
        margin: 0 !important;
        flex-shrink: 0;
        pointer-events: none;
    }
    
    .game-mode-card .mode-header .mode-icon i {
        font-size: 1.5rem !important;
        pointer-events: none;
    }
    
    .game-mode-card .mode-header .mode-title {
        flex: 1;
        margin: 0 !important;
        font-size: 1rem !important;
        pointer-events: none;
    }
    
    .game-mode-card .mode-header .mode-chevron {
        font-size: 0.9rem;
        color: var(--primary-color);
        transition: transform 0.3s ease;
        flex-shrink: 0;
        pointer-events: none;
    }
    
    .game-mode-card.active .mode-header .mode-chevron {
        transform: rotate(180deg);
    }
    
    .game-mode-card .mode-content {
        display: block !important;
        max-height: 0 !important;
        overflow: hidden !important;
        transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), padding 0.4s ease;
        padding: 0 1.5rem !important;
    }
    
    .game-mode-card.active .mode-content {
        max-height: 200px !important;
        padding: 0 1.5rem 1.5rem 1.5rem !important;
    }
    
    .game-mode-card .mode-content .mode-description {
        margin: 0;
        padding-top: 0.5rem;
        font-size: 0.9rem;
        line-height: 1.6;
    }
    
    /* Disable hover effects on mobile */
    .game-mode-card:hover {
        transform: none !important;
        border-color: rgba(255, 255, 255, 0.1) !important;
        box-shadow: none !important;
    }
    
    .game-mode-card:hover::before {
        opacity: 0 !important;
    }
    
    .game-mode-card:hover .mode-icon {
        transform: none !important;
        background: rgba(255, 0, 64, 0.1) !important;
        border-color: rgba(255, 0, 64, 0.3) !important;
    }
    
    .contact-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    /* Center contact section content on mobile */
    .contact-info {
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }
    
    .contact-info h2 {
        text-align: center !important;
    }
    
    .contact-item {
        justify-content: center !important;
    }
    
    .social-links {
        justify-content: center !important;
    }
    
    .footer-content {
        flex-direction: column;
        text-align: center;
    }
    
    .footer-links {
        justify-content: center;
    }
    
    /* Footer columns 2x2 on mobile */
    .footer-columns {
        grid-template-columns: repeat(2, 1fr) !important; /* 2x2 grid on mobile */
    }
    
    /* Center legal links and newsletter on mobile */
    .footer-legal {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .legal-links {
        justify-content: center !important;
    }
    
    .newsletter {
        display: flex !important;
        justify-content: center !important;
        width: 100% !important;
        margin-top: 20px !important;
    }
    
    .newsletter form {
        justify-content: center !important;
        width: 100% !important;
        max-width: 400px;
    }
    
    /* Fix footer-info width on mobile to prevent horizontal scroll */
    .footer-info {
        width: 100% !important;
        max-width: 100%;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Ensure footer doesn't overflow */
    .footer {
        overflow-x: hidden;
        overflow-y: visible !important;
        max-width: 100%;
    }
    
    /* Allow Stefan icons to overflow on mobile */
    .stefan-icons-container {
        overflow: visible !important;
    }

    /* Testimonials: prevent overflow and fit mobile width */
    .testimonials .container {
        max-width: 100%;
        padding-left: 20px;
        padding-right: 20px;
        overflow-x: hidden;
    }
    
    /* Testimonials slider wrapper */
    .testimonials-slider-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        margin-left: 0;
        margin-right: 0;
        width: 100%;
        max-width: 100%;
        padding: 2rem 20px;
        box-sizing: border-box;
        overflow-x: hidden;
    }
    
    .testimonials-slider-arrow {
        display: flex !important;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 40px;
        height: 40px;
        background: rgba(255, 0, 64, 0.2);
        border: 1px solid rgba(255, 0, 64, 0.4);
        border-radius: 50%;
        color: var(--primary-color);
        font-size: 1rem;
        cursor: pointer;
        z-index: 10;
        transition: all 0.3s ease;
        left: 5px;
        right: auto;
    }
    
    .testimonials-slider-arrow.testimonials-slider-next {
        left: auto;
        right: 5px;
    }
    
    .testimonials-slider-arrow:hover {
        background: rgba(255, 0, 64, 0.4);
        border-color: var(--primary-color);
        transform: translateY(-50%) scale(1.1);
    }
    
    .testimonials-grid {
        display: flex !important;
        position: relative;
        width: 85%;
        max-width: 400px;
        overflow: hidden;
        gap: 0;
        min-height: 280px;
    }
    
    .press-card {
        min-width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        opacity: 0 !important;
        transform: translateX(20px) !important;
        transition: opacity 0.4s ease, transform 0.4s ease !important;
        pointer-events: none !important;
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
    }
    
    .press-card.press-active {
        opacity: 1 !important;
        transform: translateX(0) !important;
        pointer-events: auto !important;
        position: relative !important;
    }
    
    /* Hide decorative quotes on mobile */
    .press-card::before {
        display: none !important;
    }
    
    /* Reduce quote font size by 30% on mobile */
    .press-quote p {
        font-size: 1.232rem !important; /* 1.76rem * 0.7 */
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 2rem;
    }
    
    .section-title {
        font-size: 2rem;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
    
    /* Reduce stat number size by 30% + 20% on mobile */
    .stat-number {
        font-size: 1.68rem; /* 3rem * 0.7 * 0.8 = 1.68rem */
        margin-bottom: 0 !important;
    }
    
    /* Remove margin-bottom on mobile */
    .stat-icon {
        margin-bottom: 0 !important;
    }
    
    .stat-label {
        margin-bottom: 0 !important;
    }
    
    .locations-grid {
        grid-template-columns: 1fr;
    }
    
    .events-grid {
        grid-template-columns: 1fr;
    }
    
    /* Events Accordion on Mobile */
    .event-card {
        padding: 0 !important;
        text-align: left !important;
        position: relative;
    }
    
    /* Override desktop styles for mobile accordion */
    .event-card .event-header {
        display: flex !important;
        width: 100%;
        align-items: center;
        gap: 1rem;
        padding: 0.75rem 1.5rem;
        background: transparent;
        border: none;
        cursor: pointer;
        text-align: left;
        transition: all 0.3s ease;
        position: relative;
        z-index: 10;
        box-sizing: border-box;
    }
    
    .event-card .event-header:hover {
        background: rgba(255, 0, 64, 0.05);
    }
    
    .event-card .event-header * {
        pointer-events: none;
    }
    
    .event-card .event-header .event-icon {
        width: 50px !important;
        height: 50px !important;
        min-width: 50px;
        margin: 0 !important;
        flex-shrink: 0;
        pointer-events: none;
        font-size: 1.5rem !important;
    }
    
    .event-card .event-header h3 {
        flex: 1;
        margin: 0 !important;
        font-size: 1rem !important;
        pointer-events: none;
    }
    
    .event-card .event-header .event-chevron {
        display: block !important;
        font-size: 0.9rem;
        color: var(--primary-color);
        transition: transform 0.3s ease;
        flex-shrink: 0;
        pointer-events: none;
    }
    
    .event-card.active .event-header .event-chevron {
        transform: rotate(180deg);
    }
    
    .event-card .event-content {
        display: block !important;
        max-height: 0 !important;
        overflow: hidden !important;
        transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), padding 0.4s ease;
        padding: 0 1.5rem !important;
    }
    
    .event-card.active .event-content {
        max-height: 400px !important;
        padding: 0 1.5rem 1.5rem 1.5rem !important;
    }
    
    .event-card .event-content p {
        margin: 0;
        padding-top: 0.5rem;
        font-size: 0.9rem;
        line-height: 1.6;
        margin-bottom: 1rem;
    }
    
    .event-card .event-content .btn-primary {
        margin-top: 0.5rem;
        width: auto;
        align-self: center;
    }

    .event-card {
        padding-bottom: 2rem !important;
    }

    .event-card .event-content .event-link {
        position: static !important;
        transform: none !important;
        left: auto !important;
        bottom: auto !important;
        white-space: normal !important;
        display: inline-flex;
        margin-top: 0.75rem;
    }
    
    /* Disable hover effects on mobile */
    .event-card:hover {
        transform: none !important;
        border-color: rgba(255, 0, 64, 0.2) !important;
        box-shadow: none !important;
    }
    
    .event-card:hover::before {
        left: -100% !important;
    }
    
    /* Reduce review cards size by 50% on mobile */
    .review-card {
        width: 260px !important;  /* 520px * 0.5 */
        flex: 0 0 260px !important;
        padding: 0.9rem 1rem !important;  /* 1.8rem 2rem * 0.5 */
        border-radius: 8px !important;  /* 16px * 0.5 */
    }
    
    .review-text {
        font-size: 0.85rem !important;  /* Reduced for readability */
        line-height: 1.4 !important;
    }
    
    .review-author {
        font-size: 0.9rem !important;
        margin-top: 0.4rem !important;  /* 0.8rem * 0.5 */
    }
    
    .review-stars {
        font-size: 0.85rem !important;
        margin-bottom: 0.3rem !important;  /* 0.6rem * 0.5 */
    }
    
    .marquee-content {
        gap: 1rem !important;  /* 2rem * 0.5 */
    }
}

/* Animations and Effects */
@keyframes glow {
    0%, 100% {
        box-shadow: 0 0 5px var(--primary-color);
    }
    50% {
        box-shadow: 0 0 20px var(--primary-color), 0 0 30px var(--primary-color);
    }
}

.animate-glow {
    animation: glow 2s ease-in-out infinite;
}

/* Scroll animations */
.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--darker-bg);
}

::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--accent-color);
}

/* Video Preview Styles (Desktop hover) */
.video-preview-container {
    position: fixed;
    width: calc(200px * 9 / 16); /* 9:16 aspect ratio, height is 200px */
    height: 200px;
    pointer-events: none; /* Don't interfere with mouse events */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s ease;
    z-index: 10005; /* Above everything */
    left: 0;
    top: 0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8);
    border: 2px solid rgba(255, 0, 64, 0.5);
    will-change: left, top, opacity;
}

.video-preview-container.active {
    opacity: 1;
    visibility: visible;
}

.video-preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background: #000000;
    border-radius: 6px;
}

/* Hide preview on mobile and tablet (when menu is mobile) */
@media (max-width: 1079px) {
    .video-preview-container {
        display: none !important;
    }
}

/* Video Popup Styles */
.video-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.video-popup.active {
    display: flex;
    opacity: 1;
}

.video-popup-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    cursor: pointer;
}

.video-popup-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10001;
    padding: 20px;
    box-sizing: border-box;
}

.video-popup-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    background: rgba(255, 0, 64, 0.8);
    border: 2px solid rgba(255, 0, 64, 1);
    border-radius: 50%;
    color: #ffffff;
    font-size: 1.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10002;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.video-popup-close:hover {
    background: rgba(255, 0, 64, 1);
    transform: scale(1.1);
    box-shadow: 0 0 20px rgba(255, 0, 64, 0.6);
}

.video-wrapper {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: calc(100vh * 9 / 16); /* Maintain 9:16 aspect ratio based on height */
    max-height: 100vh;
    cursor: pointer; /* Show pointer cursor on black background */
}

.promo-video {
    width: 100%;
    height: 100%;
    max-height: 100vh;
    object-fit: contain;
    background: #000000;
    border-radius: 0;
    cursor: pointer; /* Pointer for play/pause and fullscreen */
    pointer-events: auto; /* Ensure video is clickable */
}

.video-controls-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 100%);
    padding: 20px;
    z-index: 10003;
    pointer-events: none;
}

.video-controls {
    display: flex;
    align-items: center;
    gap: 15px;
    pointer-events: auto;
    max-width: 100%;
}

.video-control-btn {
    background: rgba(255, 0, 64, 0.8);
    border: 2px solid rgba(255, 0, 64, 1);
    border-radius: 50%;
    width: 45px;
    height: 45px;
    color: #ffffff;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.video-control-btn:hover {
    background: rgba(255, 0, 64, 1);
    transform: scale(1.1);
    box-shadow: 0 0 15px rgba(255, 0, 64, 0.6);
}

.video-mute-btn.muted i::before {
    content: "\f6a9"; /* fa-volume-mute */
}

.video-volume-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.video-volume-container {
    position: absolute;
    bottom: calc(100% + 5px);
    left: 50%;
    transform: translateX(-50%);
    padding: 0;
    width: 20px;
    height: 90px;
    background: transparent;
    border-radius: 3px;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    pointer-events: none;
    z-index: 10004;
    box-sizing: border-box;
}

/* Keep volume visible when hovering wrapper or container */
.video-volume-wrapper:hover .video-volume-container,
.video-volume-container:hover {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Create an invisible hover bridge area */
.video-volume-wrapper::after {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 95px;
    background: transparent;
    pointer-events: none;
    z-index: 10003;
}

.video-volume-wrapper:hover::after {
    pointer-events: auto;
}

.video-volume-bar {
    width: 6px;
    height: 80px;
    position: absolute;
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 3px;
}

.video-volume-fill {
    width: 100%;
    background: linear-gradient(180deg, #00d4ff, #0099cc);
    border-radius: 3px;
    height: 100%;
    transition: height 0.1s linear;
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.6);
    min-height: 0;
}

.video-progress-container {
    flex: 1;
    min-width: 0;
    pointer-events: auto;
    z-index: 10005;
}

.video-progress-bar {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 3px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    pointer-events: auto;
    z-index: 10005;
}

.video-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #ff0040, #ff6b35);
    border-radius: 3px;
    width: 0%;
    transition: width 0.1s linear;
    box-shadow: 0 0 10px rgba(255, 0, 64, 0.6);
    pointer-events: none;
}

.video-fullscreen-btn.fullscreen i::before {
    content: "\f066"; /* fa-compress */
}

/* Hide native video controls when custom controls are visible */
.promo-video::-webkit-media-controls {
    display: none !important;
}

.promo-video::-webkit-media-controls-enclosure {
    display: none !important;
}

.promo-video::-webkit-media-controls-panel {
    display: none !important;
}

.promo-video::-webkit-media-controls-play-button {
    display: none !important;
}

.promo-video::-webkit-media-controls-timeline {
    display: none !important;
}

.promo-video::-webkit-media-controls-current-time-display {
    display: none !important;
}

.promo-video::-webkit-media-controls-time-remaining-display {
    display: none !important;
}

.promo-video::-webkit-media-controls-mute-button {
    display: none !important;
}

.promo-video::-webkit-media-controls-volume-slider {
    display: none !important;
}

.promo-video::-webkit-media-controls-fullscreen-button {
    display: none !important;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .video-popup-container {
        padding: 10px;
    }
    
    .video-popup-close {
        top: 10px;
        right: 10px;
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
    }
    
    .video-controls {
        gap: 10px;
        padding: 15px;
    }
    
    .video-control-btn {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }
    
    .video-volume-container {
        display: none !important; /* Hide volume control on mobile */
    }
    
    .video-progress-bar {
        height: 5px;
    }
}

/* ========================================
   ESPACES PAGE STYLES
   ======================================== */

/* Hero Espaces */
.hero-espaces {
    min-height: 350px;
    padding-top: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    vertical-align: middle;
}

.hero-espaces .hero-content {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100%;
    max-width: 100%;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
}

.hero-espaces .hero-text {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    padding: 0 20px;
    box-sizing: border-box;
}

.hero-espaces .container {
    width: 100%;
    max-width: none !important;
    margin: 0 auto;
    padding: 0 20px;
}

.hero-espaces .hero-subtitle {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    margin-bottom: 0;
}

/* Hero for single espace pages */
.hero-espace-single {
    min-height: 350px;
    padding-top: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    vertical-align: middle;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
}

.hero-espace-single .hero-background {
    background: transparent;
}

.hero-espace-single .hero-bg-overlay {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.5) 100%);
    opacity: 1;
}

.hero-espace-single .hero-content {
    display: block !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100%;
    max-width: 100%;
    justify-content: center;
    align-items: center;
}

.hero-espace-single .hero-text {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    padding: 40px 20px;
    box-sizing: border-box;
}

.hero-espace-single .hero-title {
    font-size: 3.656rem;
    color: #ffffff;
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.9), 0 0 20px rgba(0, 0, 0, 0.8);
    margin-bottom: 0.3rem;
}

.hero-espace-single .hero-title .highlight {
    color: #ffffff !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: #ffffff !important;
    background-clip: unset !important;
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.9), 0 0 20px rgba(0, 0, 0, 0.8);
}

.hero-espace-single .hero-subtitle {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.9), 0 0 20px rgba(0, 0, 0, 0.7);
    font-weight: 700;
}

.hero-address {
    color: #ffffff;
    font-size: 1rem;
    text-align: center;
    margin: -20px auto 0 auto;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.9), 0 0 15px rgba(0, 0, 0, 0.7);
    font-weight: 500;
    opacity: 0.95;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.hero-address i {
    color: var(--primary-color);
}

.espace-location-hero {
    display: block;
    width: 200px;
    margin: 0 auto 1.5rem auto;
    padding: 0.5rem 1.5rem;
    background: var(--primary-color);
    color: var(--text-primary);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.9rem;
    transform: skewX(-10deg);
    text-align: center;
    box-sizing: border-box;
}

.espace-location-hero span {
    display: inline-block;
    transform: skewX(10deg);
}

/* Espaces Overview Section */
.espaces-overview {
    padding: 4rem 0;
    background: var(--dark-bg);
    width: 100%;
    max-width: 100%;
}

.espaces-overview .container {
    max-width: 100%;
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
}

.espaces-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 15px;
    margin-top: 3rem;
    margin-bottom: 30px;
}

.espace-card {
    position: relative;
    display: block;
    text-decoration: none;
    color: var(--text-primary);
    background: var(--card-bg);
    border-radius: 15px;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.espace-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 40px rgba(255, 0, 64, 0.4);
}

.espace-description {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 1rem 0 1.5rem 0;
    min-height: 3em;
}

.espace-reserve-btn {
    width: 100%;
    justify-content: center;
    margin-top: 1rem;
}

.espace-card-image {
    position: relative;
    width: 100%;
    height: 250px;
    overflow: hidden;
}

.espace-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.espace-card:hover .espace-card-image img {
    transform: scale(1.1);
}

.espace-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.7) 100%);
}

.espace-card-content {
    padding: 2rem;
    position: relative;
    z-index: 1;
}

.espace-card-content h3 {
    font-family: 'Orbitron', monospace;
    font-size: 1.8rem;
    font-weight: 900;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

.espace-theme {
    display: block;
    font-size: 1.1rem;
    color: var(--primary-color);
    font-weight: 600;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.espace-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--secondary-color);
    font-weight: 600;
    transition: all 0.3s ease;
}

.espace-card:hover .espace-link {
    color: var(--primary-color);
    transform: translateX(5px);
}

.espace-reserve-btn {
    text-decoration: none;
}

/* Espace Detail Section */
.espace-detail {
    position: relative;
    padding: 6rem 0;
    min-height: 80vh;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.espace-detail-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.15;
    z-index: 0;
}

.espace-detail-bg::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(10, 10, 10, 0.9) 0%, rgba(26, 26, 26, 0.8) 100%);
}

.espace-detail-content {
    position: relative;
    z-index: 1;
    width: 100%;
}

.espace-detail-header {
    text-align: center;
    margin-bottom: 4rem;
}

.espace-location {
    display: inline-block;
    padding: 0.5rem 1.5rem;
    background: var(--primary-color);
    color: var(--text-primary);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.9rem;
    margin-bottom: 1rem;
    transform: skewX(-10deg);
}

.espace-location span {
    display: inline-block;
    transform: skewX(10deg);
}

.espace-detail-title {
    font-family: 'Orbitron', monospace;
    font-size: 3.5rem;
    font-weight: 900;
    margin-bottom: 1rem;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.espace-detail-subtitle {
    font-size: 1.3rem;
    color: var(--text-secondary);
    max-width: 600px;
    margin: 0 auto;
}

.espace-detail-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4rem;
    align-items: center;
    margin-top: 3rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.espace-detail-image {
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.espace-detail-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 15px;
}

.espace-detail-info {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.espace-info-card {
    background: rgba(26, 26, 26, 0.8);
    padding: 2rem;
    border-radius: 15px;
    border: 1px solid rgba(255, 0, 64, 0.2);
}

.espace-info-card h3 {
    font-family: 'Orbitron', monospace;
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--primary-color);
}

.espace-info-card p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--text-secondary);
}

.espace-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: rgba(26, 26, 26, 0.6);
    border-radius: 10px;
    border-left: 3px solid var(--primary-color);
}

.feature-item i {
    font-size: 1.5rem;
    color: var(--secondary-color);
}

.feature-item span {
    font-size: 1rem;
    color: var(--text-primary);
    font-weight: 500;
}

/* Espace Selectors */
.espace-selectors {
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.selector-group {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.selector-label {
    font-family: 'Orbitron', monospace;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.formula-selector,
.mode-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.formula-option,
.mode-option {
    background: rgba(26, 26, 26, 0.8);
    border: 2px solid rgba(255, 0, 64, 0.3);
    color: var(--text-primary);
    padding: 1rem 1.5rem;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 140px;
    font-size: 0.95rem;
}

.formula-option:hover,
.mode-option:hover {
    border-color: var(--primary-color);
    background: rgba(255, 0, 64, 0.1);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(255, 0, 64, 0.3);
}

.formula-option.active,
.mode-option.active {
    background: var(--gradient-primary);
    border-color: var(--primary-color);
    color: var(--text-primary);
    box-shadow: 0 0 20px rgba(255, 0, 64, 0.5);
}

.formula-option {
    flex: 1;
    min-width: 150px;
}

.formula-name {
    font-weight: 600;
    margin-bottom: 0.5rem;
    display: block;
}

.formula-price {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--secondary-color);
    display: block;
}

.formula-option.active .formula-price {
    color: var(--text-primary);
}

.mode-option {
    flex: 1;
    min-width: 120px;
}

.mode-option span {
    font-weight: 500;
}

.espace-cta {
    margin-top: 2rem;
}

.espace-cta .btn-primary {
    width: 100%;
    justify-content: center;
    padding: 1.2rem 2.5rem;
    font-size: 1.1rem;
}

.selected-price {
    font-weight: 700;
    color: var(--secondary-color);
}

/* Alternate layout for detail sections */
.espace-detail-alt .espace-detail-grid {
    direction: rtl;
}

.espace-detail-alt .espace-detail-grid > * {
    direction: ltr;
}

/* CTA Final Section */
.espaces-cta-final {
    padding: 6rem 0;
    background: linear-gradient(135deg, var(--dark-bg) 0%, var(--darker-bg) 100%);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.espaces-cta-final::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at center, rgba(255, 0, 64, 0.1) 0%, transparent 70%);
    pointer-events: none;
}

.cta-final-content {
    position: relative;
    z-index: 1;
    max-width: 700px;
    margin: 0 auto;
}

.cta-final-content h2 {
    font-family: 'Orbitron', monospace;
    font-size: 3rem;
    font-weight: 900;
    margin-bottom: 1.5rem;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.cta-final-content p {
    font-size: 1.3rem;
    color: var(--text-secondary);
    margin-bottom: 2.5rem;
}

.btn-large {
    padding: 1.5rem 3rem;
    font-size: 1.2rem;
}

/* Responsive Design for Espaces Page */
@media (max-width: 1079px) {
    .espace-detail-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    
    .espace-detail-alt .espace-detail-grid {
        direction: ltr;
    }
    
    .espace-features {
        grid-template-columns: 1fr;
    }
    
    .espace-detail-title {
        font-size: 2.5rem;
    }
    
    .formula-selector,
    .mode-selector {
        flex-direction: column;
    }
    
    .formula-option,
    .mode-option {
        width: 100%;
        min-width: 100%;
    }
}

@media (max-width: 1400px) {
    .espaces-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
    }
}

@media (max-width: 768px) {
    .espaces-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .espace-card-image {
        height: 200px;
    }
    
    .espace-detail {
        padding: 4rem 0;
    }
    
    .espace-detail-title {
        font-size: 2rem;
    }
    
    .espace-detail-subtitle {
        font-size: 1.1rem;
    }
    
    .espace-info-card {
        padding: 1.5rem;
    }
    
    .espace-info-card h3 {
        font-size: 1.5rem;
    }
    
    .cta-final-content h2 {
        font-size: 2rem;
    }
    
    .cta-final-content p {
        font-size: 1.1rem;
    }
    
    .btn-large {
        padding: 1.2rem 2rem;
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .espace-detail-title {
        font-size: 1.8rem;
    }
    
    .espace-location {
        font-size: 0.8rem;
        padding: 0.4rem 1rem;
    }
    
    .espace-card-content h3 {
        font-size: 1.5rem;
    }
}

/* Reservation Section */
.reservation-section {
    padding: 6rem 0;
    background: var(--dark-bg);
    position: relative;
    overflow: hidden;
}

.reservation-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at center, rgba(255, 0, 64, 0.05) 0%, transparent 70%);
    pointer-events: none;
}

.reservation-content {
    position: relative;
    z-index: 1;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
}

.reservation-title {
    font-family: 'Orbitron', monospace;
    font-size: 2.5rem;
    font-weight: 900;
    text-align: center;
    margin-bottom: 1rem;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.reservation-subtitle {
    text-align: center;
    color: var(--text-secondary);
    font-size: 1.1rem;
    margin-bottom: 3rem;
    font-weight: normal;
}

/* Mobile: justify text with centered last line for reservation descriptions */
@media (max-width: 768px) {
    .reservation-subtitle {
        text-align: justify !important;
        text-align-last: center !important;
        -moz-text-align-last: center !important;
        padding: 0 10px;
    }
}

.reservation-form {
    background: var(--card-bg);
    border-radius: 20px;
    padding: 3rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    margin-bottom: 3rem;
}

.reservation-group {
    margin-bottom: 2.5rem;
}

.reservation-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    font-family: 'Orbitron', monospace;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1rem;
    text-align: center;
}

.reservation-label i {
    color: var(--primary-color);
    font-size: 1.2rem;
}

.game-mode-description {
    text-align: center;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
    font-style: italic;
    margin: 0.5rem 0 1.5rem 0;
}

.tag-optional {
    display: inline-block;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.7rem;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    margin-left: 0.5rem;
    vertical-align: middle;
}

/* Players Selector */
.players-selector {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.players-counter {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
}

.players-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--gradient-primary);
    border: 2px solid var(--primary-color);
    color: var(--text-primary);
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 0 15px rgba(255, 0, 64, 0.4);
    flex-shrink: 0; /* Prevent buttons from shrinking */
}

@media (max-width: 768px) {
    .players-btn {
        width: 50px;
        height: 50px;
        border-radius: 50%; /* Ensure perfect circle on mobile */
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .players-counter {
        align-items: center; /* Ensure vertical centering */
        gap: 1.5rem;
    }
    
    .players-input-wrapper {
        display: flex;
        align-items: center; /* Center the input vertically */
    }
}

.players-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 0 25px rgba(255, 0, 64, 0.7);
    background: var(--gradient-primary);
    border-color: var(--primary-color);
}

.players-btn:active {
    transform: scale(0.95);
}

.players-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.players-btn:disabled:hover {
    transform: none;
    box-shadow: 0 0 15px rgba(255, 0, 64, 0.4);
}

.players-input-wrapper {
    position: relative;
    width: 80px;
    height: auto;
}

.players-display {
    display: block;
    width: 80px;
    padding: 1rem;
    background: rgba(26, 26, 26, 0.8);
    border: 2px solid rgba(255, 0, 64, 0.3);
    border-radius: 10px;
    color: var(--text-primary);
    font-size: 1.5rem;
    font-weight: 700;
    text-align: center;
    transition: all 0.3s ease;
}

.players-input-hidden {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
    border: none;
    padding: 0;
    margin: 0;
}

.players-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 0.9rem;
    gap: 0.5rem;
}

.players-note {
    color: var(--text-secondary);
    font-size: 0.85rem;
    text-align: center;
}

.btn-call-16 {
    display: none !important; /* Hidden by default, shown only when >= 16 players */
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
}

.players-note a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

.players-note a:hover {
    color: var(--secondary-color);
}

/* Formula Selector in Reservation */
.reservation-form .formula-selector {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.reservation-form .formula-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.5rem 1rem;
    min-width: auto;
    gap: 0.5rem;
}

.reservation-form .formula-name {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.reservation-form .formula-desc {
    font-size: 0.85rem;
    color: #ffffff;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.reservation-form .formula-price {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--secondary-color);
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.reservation-form .formula-option.active .formula-price {
    color: var(--text-primary);
}

.reservation-form .formula-per-player {
    font-size: 0.75rem;
    color: #ffffff;
    font-weight: 700;
    margin-top: 0.25rem;
}

.reservation-form .formula-option {
    border-bottom: 2px solid rgba(255, 0, 64, 0.3);
}

.formula-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
    text-align: center;
}

.formula-note i {
    color: var(--primary-color);
}

.formula-extra-option {
    margin-top: 1.5rem;
    padding: 1.25rem;
    border: 2px solid rgba(255, 0, 64, 0.3);
    border-radius: 12px;
    background: rgba(26, 26, 26, 0.65);
    text-align: center;
}

.checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    font-weight: 600;
    color: var(--text-primary);
    font-size: 1.05rem;
}

.checkbox-label input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: var(--primary-color);
    cursor: pointer;
    flex-shrink: 0;
}

/* Uniformiser la taille de toutes les checkboxes */
input[type="checkbox"] {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
}

.checkbox-text {
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* Style du lien CGU */
.cgu-link {
    color: var(--primary-color) !important;
    text-decoration: none !important;
    font-weight: inherit !important;
    text-transform: inherit !important;
    letter-spacing: inherit !important;
}

.cgu-link:hover {
    text-decoration: underline !important;
}

.birthday-description-always {
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.5;
    padding: 1rem;
    background: rgba(255, 0, 64, 0.05);
    border-left: 3px solid var(--primary-red);
    border-radius: 4px;
}

.birthday-description-always p {
    margin: 0;
}

.birthday-description-extra {
    margin-top: 1rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.5;
    padding: 1rem;
    background: rgba(26, 26, 26, 0.3);
    border-radius: 4px;
    border: 1px solid rgba(255, 0, 64, 0.15);
    display: none;
}

.birthday-description-extra p {
    margin: 0;
}

.birthday-formulas {
    margin-top: 1.5rem;
    padding: 1.5rem;
    background: rgba(26, 26, 26, 0.5);
    border-radius: 10px;
    border: 1px solid rgba(255, 0, 64, 0.2);
    display: none;
}

.birthday-formulas[style*="display: block"],
.birthday-formulas.show {
    display: block !important;
}

.birthday-formulas-title {
    font-family: 'Orbitron', monospace;
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--text-primary);
    text-align: center;
}

.birthday-formula .formula-extra {
    display: block;
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-top: 0.5rem;
    font-style: italic;
}

/* Mode Selector in Reservation */
.mode-selector-wrapper {
    margin-top: 1.5rem;
    padding: 1.5rem;
    background: rgba(26, 26, 26, 0.5);
    border-radius: 10px;
    border: 1px solid rgba(255, 0, 64, 0.2);
}

.mode-selector-title {
    font-family: 'Orbitron', monospace;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    text-align: center;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.game-modes-grid-selectable {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: 1rem;
}

.game-mode-card-selectable {
    background: rgba(20, 20, 30, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 2.5rem 1.5rem;
    border-radius: 0;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.game-mode-card-selectable::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 0, 64, 0.1) 0%, transparent 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.game-mode-card-selectable:hover::before {
    opacity: 1;
}

.game-mode-card-selectable:hover {
    transform: translateY(-10px);
    border-color: rgba(255, 0, 64, 0.3);
    box-shadow: 0 10px 40px rgba(255, 0, 64, 0.15);
}

.game-mode-card-selectable.active {
    background: rgba(255, 0, 64, 0.1);
    border-color: var(--primary-color);
    box-shadow: 0 0 20px rgba(255, 0, 64, 0.5);
}

.game-mode-card-selectable.active::before {
    opacity: 1;
    background: linear-gradient(135deg, rgba(255, 0, 64, 0.2) 0%, rgba(255, 0, 64, 0.05) 100%);
}

.game-mode-card-selectable .mode-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
    background: rgba(255, 0, 64, 0.1);
    border: 2px solid rgba(255, 0, 64, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    transition: all 0.3s ease;
}

.game-mode-card-selectable:hover .mode-icon,
.game-mode-card-selectable.active .mode-icon {
    background: rgba(255, 0, 64, 0.2);
    border-color: rgba(255, 0, 64, 0.5);
    transform: scale(1.1);
}

.game-mode-card-selectable .mode-icon i {
    font-size: 2rem;
    color: var(--primary-color);
}

.game-mode-card-selectable .mode-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 1rem;
    position: relative;
    z-index: 1;
}

.game-mode-card-selectable .mode-description {
    color: var(--text-secondary);
    line-height: 1.6;
    font-size: 0.95rem;
    position: relative;
    z-index: 1;
    margin: 0;
}

/* Date and Time Selector */
.datetime-selector {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.date-input-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
}

.time-input-wrapper {
    position: relative;
}

/* Form Row and Col Layout */
.form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 1rem;
}

.form-row:last-child {
    margin-bottom: 0;
}

.form-col {
    width: 100%;
}

.form-col-full {
    grid-column: 1 / -1;
}

/* Age Categories Checkboxes */
.reservation-label-small {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.reservation-label-small i {
    color: var(--primary-color);
    font-size: 1rem;
}

.age-categories-checkboxes {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.age-category-checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    padding: 0.75rem 1.25rem;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    transition: all 0.3s ease;
    user-select: none;
}

.age-category-checkbox:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 0, 64, 0.3);
}

.age-category-input {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--primary-color);
}

.age-category-label {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-primary);
}

.age-category-checkbox:has(.age-category-input:checked) {
    background: rgba(255, 0, 64, 0.15);
    border-color: var(--primary-color);
}

.age-category-checkbox:has(.age-category-input:checked) .age-category-label {
    color: var(--primary-color);
}

/* Form Input Fields */
.form-input {
    width: 100%;
    padding: 1rem 1.5rem;
    background: rgba(26, 26, 26, 0.8);
    border: 2px solid rgba(255, 0, 64, 0.3);
    border-radius: 10px;
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 500;
    transition: all 0.3s ease;
    font-family: 'Inter', sans-serif;
    box-sizing: border-box;
}

.form-input::placeholder {
    color: var(--text-muted);
    opacity: 0.7;
}

.form-input:focus {
    outline: none;
    border-color: var(--primary-color);
    background: rgba(255, 0, 64, 0.1);
    box-shadow: 0 0 20px rgba(255, 0, 64, 0.3);
}

.form-input:hover:not(:focus) {
    border-color: rgba(255, 0, 64, 0.5);
}

.date-input,
.time-input {
    width: 100%;
    padding: 1rem 1.5rem;
    background: rgba(26, 26, 26, 0.8);
    border: 2px solid rgba(255, 0, 64, 0.3);
    border-radius: 10px;
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 500;
    transition: all 0.3s ease;
    cursor: pointer;
    font-family: 'Orbitron', monospace;
}

.date-input[readonly] {
    cursor: pointer;
    user-select: none;
}

.date-input::-webkit-calendar-picker-indicator {
    cursor: pointer;
    filter: invert(1);
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.date-input::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
    filter: invert(1) sepia(1) saturate(5) hue-rotate(320deg);
}

.date-input:focus,
.time-input:focus {
    outline: none;
    border-color: var(--primary-color);
    background: rgba(255, 0, 64, 0.1);
    box-shadow: 0 0 20px rgba(255, 0, 64, 0.3);
}

/* Style the native date picker calendar */
.date-input::-webkit-datetime-edit {
    color: var(--text-primary);
    font-family: 'Orbitron', monospace;
}

.date-input::-webkit-datetime-edit-fields-wrapper {
    color: var(--text-primary);
}

.date-input::-webkit-datetime-edit-text {
    color: var(--text-secondary);
    padding: 0 0.3em;
}

.date-input::-webkit-datetime-edit-month-field,
.date-input::-webkit-datetime-edit-day-field,
.date-input::-webkit-datetime-edit-year-field {
    color: var(--text-primary);
}

.date-input::-webkit-inner-spin-button {
    display: none;
}

/* For Firefox */
.date-input::-moz-placeholder {
    color: var(--text-secondary);
    opacity: 1;
}

.time-input::-webkit-calendar-picker-indicator {
    cursor: pointer;
    filter: invert(1);
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.time-input::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
    filter: invert(1) sepia(1) saturate(5) hue-rotate(320deg);
}

/* Custom Calendar */
.custom-calendar {
    width: 100%;
    max-width: 400px;
    background: var(--card-bg);
    border: 2px solid rgba(255, 0, 64, 0.3);
    border-radius: 15px;
    padding: 1.5rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    margin: 0 auto;
}

.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.calendar-nav {
    background: rgba(255, 0, 64, 0.1);
    border: 2px solid rgba(255, 0, 64, 0.3);
    color: var(--primary-color);
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.calendar-nav:hover {
    background: rgba(255, 0, 64, 0.2);
    border-color: var(--primary-color);
    transform: scale(1.1);
}

.calendar-month-year {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.calendar-month {
    font-family: 'Orbitron', monospace;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.calendar-year {
    font-size: 0.9rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.calendar-weekday {
    text-align: center;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    padding: 0.5rem 0;
}

.calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.calendar-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.3s ease;
    background: rgba(26, 26, 26, 0.5);
    border: 1px solid transparent;
}

.calendar-day.empty {
    cursor: default;
    background: transparent;
    border: none;
}

.calendar-day.past {
    color: var(--text-secondary);
    opacity: 0.4;
    cursor: not-allowed;
    background: rgba(26, 26, 26, 0.2);
}

.calendar-day.today {
    border: 2px solid var(--primary-color);
    background: rgba(255, 0, 64, 0.1);
    font-weight: 700;
}

.calendar-day.selected {
    background: var(--gradient-primary);
    color: var(--text-primary);
    font-weight: 700;
    border-color: var(--primary-color);
    box-shadow: 0 0 15px rgba(255, 0, 64, 0.5);
}

.calendar-day:not(.past):not(.empty):hover {
    background: rgba(255, 0, 64, 0.2);
    border-color: rgba(255, 0, 64, 0.5);
    transform: scale(1.1);
}

.calendar-footer {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 0, 64, 0.2);
}

.calendar-btn {
    flex: 1;
    padding: 0.75rem 1rem;
    background: rgba(255, 0, 64, 0.1);
    border: 2px solid rgba(255, 0, 64, 0.3);
    border-radius: 8px;
    color: var(--primary-color);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.9rem;
}

.calendar-btn:hover {
    background: rgba(255, 0, 64, 0.2);
    border-color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(255, 0, 64, 0.3);
}

.input-label {
    display: block;
    margin-top: 0.5rem;
    margin-bottom: 1rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 500;
    text-align: center;
}

/* Time Slots Grid */
.time-slots-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 0.75rem;
    margin-top: 1rem;
}

.time-slot-btn {
    padding: 0.75rem 1rem;
    background: rgba(26, 26, 26, 0.8);
    border: 2px solid rgba(255, 0, 64, 0.3);
    border-radius: 10px;
    color: var(--text-primary);
    font-size: 0.95rem;
    font-weight: 500;
    font-family: 'Orbitron', monospace;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
}

.time-slot-btn:hover {
    background: rgba(255, 0, 64, 0.1);
    border-color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(255, 0, 64, 0.3);
}

.time-slot-btn.active {
    background: var(--gradient-primary);
    color: var(--text-primary);
    font-weight: 700;
    border-color: var(--primary-color);
    box-shadow: 0 0 15px rgba(255, 0, 64, 0.5);
}

/* Price Summary */
.price-summary {
    background: rgba(255, 0, 64, 0.1);
    border: 2px solid rgba(255, 0, 64, 0.3);
    border-radius: 15px;
    padding: 2rem;
    margin-top: 2rem;
}

.price-breakdown {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1rem;
}

.price-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(255, 0, 64, 0.2);
}

.price-line:last-child {
    border-bottom: none;
}

.price-line.total {
    padding: 1rem 0;
    margin-top: 0.5rem;
}

.price-label {
    font-size: 1rem;
    color: var(--text-primary);
    font-weight: 500;
}

.price-line.total .price-label {
    font-size: 1.2rem;
    font-weight: 700;
}

.price-value {
    font-size: 1.1rem;
    color: var(--secondary-color);
    font-weight: 700;
}

.price-line.total .price-value {
    font-size: 1.5rem;
    color: #ffffff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8), 0 0 10px rgba(0, 0, 0, 0.5);
}

.price-note {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 1rem;
    color: var(--text-secondary);
    font-size: 0.85rem;
    line-height: 1.5;
}

.price-note i {
    color: var(--primary-color);
    margin-top: 0.2rem;
}

.btn-reserve {
    width: 100%;
    justify-content: center;
    padding: 1.5rem 2.5rem;
    font-size: 1.2rem;
    margin-top: 2rem;
}

/* Reservation Info Cards */
.reservation-info {
    margin-top: 3rem;
}

.info-card {
    background: var(--card-bg);
    border-radius: 15px;
    padding: 2rem;
    border: 2px solid rgba(255, 0, 64, 0.2);
    transition: all 0.3s ease;
}

.info-card:hover {
    border-color: var(--primary-color);
    box-shadow: 0 5px 20px rgba(255, 0, 64, 0.2);
    transform: translateY(-5px);
}

.info-card h3 {
    font-family: 'Orbitron', monospace;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.info-card h3 i {
    color: var(--primary-color);
    font-size: 1.3rem;
}

.info-card p {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 0.75rem;
}

.info-card p:last-child {
    margin-bottom: 0;
}

.info-card a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

.info-card a:hover {
    color: var(--secondary-color);
}

/* ── Disabled format tabs ── */
.format-tab.format-tab-disabled {
    opacity: 0.42;
    cursor: not-allowed;
    pointer-events: none;
}

.format-tab.format-tab-disabled .ftab-sub {
    color: #f87171 !important;
    font-weight: 600;
}

/* ── Player count infoboxes ── */
.players-infobox {
    display: none;
    margin-top: 1.1rem;
    border-radius: 10px;
    overflow: hidden;
    animation: ftPanelIn 0.22s ease;
}

.pib-inner {
    display: flex;
    gap: 1rem;
    padding: 1.1rem 1.2rem;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    align-items: flex-start;
}

.players-infobox-matchmaking .pib-inner {
    background: rgba(56, 189, 248, 0.06);
    border-color: rgba(56, 189, 248, 0.25);
}

.players-infobox-tournois .pib-inner {
    background: rgba(251, 191, 36, 0.06);
    border-color: rgba(251, 191, 36, 0.25);
}

.pib-icon {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.players-infobox-matchmaking .pib-icon {
    background: rgba(56, 189, 248, 0.15);
    color: #38bdf8;
}

.players-infobox-tournois .pib-icon {
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
}

.pib-icon i {
    font-size: 0.9rem;
}

.pib-body {
    flex: 1;
    min-width: 0;
}

.pib-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.2rem 0.55rem;
    border-radius: 4px;
    margin-bottom: 0.55rem;
}

.players-infobox-matchmaking .pib-badge {
    background: rgba(56, 189, 248, 0.15);
    color: #38bdf8;
}

.players-infobox-tournois .pib-badge {
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
}

.pib-text {
    font-size: 0.87rem;
    color: rgba(255,255,255,0.7);
    line-height: 1.7;
    margin: 0 0 0.75rem;
}

.pib-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    padding: 0.35rem 0.8rem;
    border-radius: 6px;
    transition: background 0.18s ease, color 0.18s ease;
}

.players-infobox-matchmaking .pib-cta {
    background: rgba(56, 189, 248, 0.12);
    color: #38bdf8;
    border: 1px solid rgba(56, 189, 248, 0.25);
}

.players-infobox-matchmaking .pib-cta:hover {
    background: rgba(56, 189, 248, 0.22);
    color: #7dd3fc;
    text-decoration: none;
}

.players-infobox-tournois .pib-cta {
    background: rgba(251, 191, 36, 0.12);
    color: #fbbf24;
    border: 1px solid rgba(251, 191, 36, 0.25);
}

.players-infobox-tournois .pib-cta:hover {
    background: rgba(251, 191, 36, 0.22);
    color: #fde68a;
    text-decoration: none;
}

@media (max-width: 480px) {
    .pib-inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 0.6rem;
        padding: 1.1rem 1rem 1rem;
    }
    .pib-icon {
        margin-bottom: 0.1rem;
    }
    .pib-body {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .pib-badge {
        justify-content: center;
    }
    .pib-text {
        font-size: 0.83rem;
        text-align: center;
    }
    .pib-cta {
        align-self: center;
    }
}

/* ── Help section with mini contact cards ── */
.help-section-intro {
    font-size: 0.95rem;
    color: rgba(255,255,255,0.6);
    margin: 0.5rem 0 1.5rem;
    line-height: 1.6;
}

.help-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.85rem;
    margin-top: 0.25rem;
}

.help-mini-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
    padding: 1.4rem 1rem 1.2rem;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.15s ease;
    cursor: pointer;
}

.help-mini-card:hover {
    background: rgba(255, 0, 64, 0.08);
    border-color: rgba(255, 0, 64, 0.35);
    transform: translateY(-2px);
    color: inherit;
    text-decoration: none;
}

.help-mini-card-icon {
    width: 2.6rem;
    height: 2.6rem;
    background: rgba(255, 0, 64, 0.12);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-bottom: 0.25rem;
}

.help-mini-card-icon i {
    font-size: 1rem;
    color: #ff0040;
}

.help-mini-card-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
}

.help-mini-card-title {
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
}

.help-mini-card-value {
    font-size: 0.95rem;
    font-weight: 600;
    color: #ff0040;
    line-height: 1.2;
}

.help-mini-card-note {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.45);
    line-height: 1.3;
    margin-top: 0.05rem;
}

@media (max-width: 640px) {
    .help-cards-grid {
        grid-template-columns: 1fr;
        gap: 0.65rem;
    }
    .help-mini-card {
        flex-direction: row;
        align-items: center;
        text-align: left;
        gap: 0.85rem;
        padding: 1rem 1.1rem;
    }
    .help-mini-card-icon {
        flex-shrink: 0;
    }
    .help-mini-card-body {
        align-items: flex-start;
        gap: 0.15rem;
    }
}

.info-price {
    color: var(--secondary-color) !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
}

/* Responsive Design for Reservation */
@media (max-width: 1079px) {
    .reservation-form {
        padding: 2rem;
    }
    
    .reservation-form .formula-selector {
        grid-template-columns: 1fr;
    }
    
    .reservation-form .mode-selector {
        grid-template-columns: 1fr;
    }
    
    .game-modes-grid-selectable {
        grid-template-columns: 1fr;
    }
    
    .datetime-selector {
        grid-template-columns: 1fr;
    }
    
    .reservation-info {
        grid-template-columns: 1fr;
    }
}

/* Guest Invitations Styles */
.guest-invitations-description {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 1rem;
    line-height: 1.5;
}

.guest-emails-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1rem;
}

.guest-email-input-wrapper {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.guest-email-input-wrapper .form-input {
    flex: 1;
}

.btn-remove-guest {
    background: rgba(255, 0, 64, 0.2);
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.btn-remove-guest:hover {
    background: var(--primary-color);
    color: var(--text-primary);
    transform: scale(1.05);
}

.btn-add-guest {
    background: rgba(255, 0, 64, 0.1);
    border: 2px solid rgba(255, 0, 64, 0.3);
    color: var(--primary-color);
    padding: 0.75rem 1.5rem;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 600;
    font-size: 0.95rem;
}

.btn-add-guest:hover {
    background: rgba(255, 0, 64, 0.2);
    border-color: var(--primary-color);
    transform: translateY(-2px);
}

/* Thank You Page Styles */
.thank-you-page {
    padding: 4rem 0;
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.thank-you-content {
    max-width: 700px;
    width: 100%;
    background: rgba(20, 20, 30, 0.8);
    border: 2px solid rgba(255, 0, 64, 0.3);
    border-radius: 20px;
    padding: 3rem;
    text-align: center;
}

.thank-you-icon {
    font-size: 5rem;
    color: var(--primary-color);
    margin-bottom: 1.5rem;
    animation: scaleIn 0.5s ease;
}

@keyframes scaleIn {
    from {
        transform: scale(0);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

.thank-you-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 1rem;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.thank-you-message {
    color: var(--text-secondary);
    font-size: 1.1rem;
    margin-bottom: 2.5rem;
    line-height: 1.6;
}

.reservation-summary {
    background: rgba(26, 26, 26, 0.6);
    border: 1px solid rgba(255, 0, 64, 0.2);
    border-radius: 15px;
    padding: 2rem;
    margin-bottom: 2.5rem;
    text-align: left;
}

.summary-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 1.5rem;
    text-align: center;
    padding-bottom: 1rem;
    border-bottom: 2px solid rgba(255, 0, 64, 0.3);
}

.summary-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.summary-item:last-child {
    border-bottom: none;
}

.summary-item.total {
    border-top: 2px solid rgba(255, 0, 64, 0.3);
    margin-top: 1rem;
    padding-top: 1.5rem;
    font-weight: 700;
    font-size: 1.2rem;
}

.summary-label {
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
}

.summary-label i {
    color: var(--primary-color);
    width: 20px;
}

.summary-value {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 1rem;
}

.summary-item.total .summary-value {
    color: var(--primary-color);
    font-size: 1.3rem;
}

.thank-you-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.thank-you-actions .btn-primary,
.thank-you-actions .btn-secondary {
    padding: 1rem 2rem;
    font-size: 1rem;
    min-width: 200px;
}

.thank-you-actions .btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
    color: var(--text-primary);
}

.thank-you-actions .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
}

/* Multi-step Form Navigation */
.form-steps-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 3rem;
    padding: 0 1rem;
    position: relative;
}

.form-steps-navigation::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 2px;
    background: rgba(255, 255, 255, 0.1);
    z-index: 0;
}

.step-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    position: relative;
    z-index: 1;
    transition: all 0.3s ease;
    flex: 1;
}

.step-number {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--text-secondary);
    transition: all 0.3s ease;
}

.step-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    transition: all 0.3s ease;
}

.step-nav-item.active .step-number {
    background: var(--gradient-primary);
    border-color: var(--primary-color);
    color: var(--text-primary);
    box-shadow: 0 0 20px rgba(255, 0, 64, 0.5);
}

.step-nav-item.active .step-label {
    color: var(--primary-color);
}

.step-nav-item.completed .step-number {
    background: rgba(255, 0, 64, 0.2);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.step-nav-item.completed .step-label {
    color: var(--text-primary);
}

.step-nav-item:hover:not(.active) .step-number {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
}

/* Form Steps */
.form-step {
    display: none !important;
    animation: fadeIn 0.3s ease;
    width: 100%;
    position: relative;
}

.form-step.active {
    display: block !important;
}

/* But keep buttons visible outside steps */
.form-steps-buttons {
    display: flex !important;
    position: relative;
    z-index: 10;
}

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

/* Form Steps Buttons */
.form-steps-buttons {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-step-prev,
.btn-step-next {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 10px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.btn-step-prev {
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
    color: var(--text-primary);
}

.btn-step-prev:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
}

.btn-step-next {
    background: var(--gradient-primary);
    border: 2px solid var(--primary-color);
    color: var(--text-primary);
}

.btn-step-next:hover {
    box-shadow: 0 0 20px rgba(255, 0, 64, 0.5);
    transform: translateY(-2px);
}

/* Hide submit button until last step */
#submitBtn {
    display: none;
}

/* Show submit button on last step (step 5) */
.form-step[data-step="5"] #submitBtn,
.form-step.active[data-step="5"] #submitBtn {
    display: inline-flex !important;
}

@media (max-width: 768px) {
    /* On mobile, submit button should be visible on last step */
    .form-step.active[data-step="5"] #submitBtn {
        display: inline-flex !important;
        width: 100%;
        justify-content: center;
    }
}

/* Error state for fields */
.form-input.error,
.form-step input.error,
.form-step select.error,
.form-step textarea.error {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 10px rgba(255, 0, 64, 0.3) !important;
}

@media (max-width: 768px) {
    .form-steps-navigation {
        flex-wrap: wrap;
        gap: 1rem;
        padding: 0;
    }
    
    .step-nav-item {
        flex: 0 0 calc(33.333% - 0.67rem);
    }
    
    .step-label {
        font-size: 0.75rem;
    }
    
    .step-number {
        width: 35px;
        height: 35px;
        font-size: 0.9rem;
    }
    
    /* Hide inactive steps on mobile - ensure only current step is visible */
    .form-step:not(.active) {
        display: none !important;
    }
    
    .form-step.active {
        display: block !important;
    }
    
    /* Buttons side by side on mobile */
    .form-steps-buttons {
        flex-direction: row !important; /* Changed from column to row */
        justify-content: space-between;
        gap: 1rem;
    }
    
    .btn-step-prev {
        flex: 1;
        justify-content: center;
        order: 1; /* Left side */
    }
    
    .btn-step-next {
        flex: 1;
        justify-content: center;
        order: 2; /* Right side */
    }
    
    .thank-you-content {
        padding: 2rem 1.5rem;
    }
    
    .thank-you-title {
        font-size: 2rem;
    }
    
    .summary-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .thank-you-actions {
        flex-direction: column;
        align-items: center;
    }
    
    .thank-you-actions .btn-primary,
    .thank-you-actions .btn-secondary {
        width: auto !important;
        min-width: auto !important;
    }
    
    .reservation-title {
        font-size: 2rem;
    }
    
    .reservation-form {
        padding: 1.5rem;
        background: transparent;
    }
    
    .reservation-group {
        margin-bottom: 2rem;
    }
    
    .form-row {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .price-summary {
        padding: 1.5rem;
    }
}

/* ===================================
   MODES DE JEU PAGE STYLES
   =================================== */

.hero-modes {
    min-height: 50vh;
}

.modes-details-section {
    padding: 6rem 0;
    background: linear-gradient(180deg, 
        rgba(10, 10, 30, 1) 0%,
        rgba(20, 10, 40, 1) 50%,
        rgba(10, 10, 30, 1) 100%
    );
}

.mode-detail-card {
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.05) 0%,
        rgba(255, 255, 255, 0.02) 100%
    );
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 3rem;
    margin-bottom: 3rem;
    transition: all 0.3s ease;
}

.mode-detail-card:hover {
    border-color: var(--primary-color);
    box-shadow: 0 10px 40px rgba(255, 0, 64, 0.2);
    transform: translateY(-5px);
}

.mode-detail-header {
    display: flex;
    align-items: center;
    gap: 2rem;
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.mode-detail-icon {
    width: 80px;
    height: 80px;
    background: var(--gradient-primary);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: white;
    flex-shrink: 0;
}

.mode-detail-title-wrapper {
    flex: 1;
}

.mode-detail-title {
    font-size: 2.5rem;
    font-weight: 900;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.5rem;
}

.mode-detail-tagline {
    font-size: 1.2rem;
    color: var(--text-secondary);
    font-weight: 300;
}

.mode-detail-content {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: 3rem;
}

.mode-detail-description h3 {
    font-size: 1.5rem;
    color: var(--primary-color);
    margin-bottom: 1rem;
    margin-top: 2rem;
}

.mode-detail-description h3:first-child {
    margin-top: 0;
}

.mode-detail-description p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
}

.mode-benefits {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0;
}

.mode-benefits li {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

.mode-benefits li i {
    color: var(--secondary-color);
    font-size: 1.2rem;
    margin-top: 0.2rem;
    flex-shrink: 0;
}

.mode-benefits li strong {
    color: var(--text-primary);
}

.mode-detail-cta {
    position: sticky;
    top: 100px;
}

.cta-card {
    background: linear-gradient(135deg, 
        rgba(255, 0, 64, 0.1) 0%,
        rgba(0, 240, 255, 0.1) 100%
    );
    border: 2px solid rgba(255, 0, 64, 0.3);
    border-radius: 15px;
    padding: 2rem;
    text-align: center;
}

.cta-card h4 {
    font-size: 1.5rem;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.cta-card p {
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
    font-size: 1rem;
}

.cta-card .btn-primary {
    width: 100%;
    justify-content: center;
}

/* ===================================
   FORMULES PAGE STYLES
   =================================== */

.hero-formules {
    min-height: 50vh;
}

.formulas-comparison-section {
    padding: 6rem 0;
    background: linear-gradient(180deg, 
        rgba(10, 10, 30, 1) 0%,
        rgba(20, 10, 40, 1) 50%,
        rgba(10, 10, 30, 1) 100%
    );
}

.formulas-comparison-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-top: 3rem;
}

.formula-comparison-card {
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.05) 0%,
        rgba(255, 255, 255, 0.02) 100%
    );
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 2.5rem;
    transition: all 0.3s ease;
    position: relative;
    display: flex;
    flex-direction: column;
}

.formula-comparison-card:hover {
    border-color: var(--primary-color);
    box-shadow: 0 10px 40px rgba(255, 0, 64, 0.2);
    transform: translateY(-5px);
}

.formula-comparison-card.formula-featured {
    border: 2px solid var(--primary-color);
    box-shadow: 0 10px 40px rgba(255, 0, 64, 0.3);
    transform: scale(1.05);
}

.formula-comparison-card.formula-featured:hover {
    transform: scale(1.08) translateY(-5px);
}

.formula-badge-top {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--gradient-primary);
    padding: 0.5rem 1.5rem;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 700;
    color: white;
    white-space: nowrap;
}

.formula-comparison-header {
    text-align: center;
    padding-bottom: 2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 2rem;
}

.formula-comparison-title {
    font-size: 2rem;
    font-weight: 900;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 1rem;
}

.formula-comparison-duration {
    font-size: 1.2rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.formula-comparison-duration i {
    color: var(--secondary-color);
}

.formula-comparison-price {
    margin-top: 1rem;
}

.price-amount {
    font-size: 3rem;
    font-weight: 900;
    color: var(--primary-color);
    display: block;
}

.price-per {
    font-size: 0.9rem;
    color: var(--text-secondary);
    display: block;
}

.formula-comparison-content {
    flex: 1;
}

.formula-comparison-content h3 {
    font-size: 1.3rem;
    color: var(--text-primary);
    margin: 2rem 0 1rem 0;
}

.formula-comparison-content h3:first-child {
    margin-top: 0;
}

.formula-comparison-features,
.formula-comparison-ideal {
    list-style: none;
    padding: 0;
    margin: 1rem 0;
}

.formula-comparison-features li,
.formula-comparison-ideal li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

.formula-comparison-features li i,
.formula-comparison-ideal li i {
    color: var(--secondary-color);
    margin-top: 0.2rem;
    flex-shrink: 0;
}

.formula-comparison-features li strong {
    color: var(--text-primary);
}

.formula-modes-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1rem 0;
}

.mode-badge {
    background: rgba(0, 240, 255, 0.1);
    border: 1px solid rgba(0, 240, 255, 0.3);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.85rem;
    color: var(--secondary-color);
    font-weight: 600;
}

.formula-comparison-benefits {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
    padding: 1.5rem;
    margin-top: 1.5rem;
}

.formula-comparison-benefits h3 {
    margin-top: 0;
}

.formula-comparison-benefits p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

.formula-comparison-benefits p:last-child {
    margin-bottom: 0;
}

.formula-comparison-benefits strong {
    color: var(--primary-color);
}

.formula-comparison-cta {
    margin-top: 2rem;
    text-align: center;
}

.btn-full {
    width: 100%;
    justify-content: center;
}

.formula-comparison-note {
    margin-top: 1rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

/* Special Formulas Section */
.special-formulas-section {
    padding: 6rem 0;
    background: rgba(10, 10, 30, 1);
}

.special-formulas-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-top: 3rem;
}

.special-formula-card {
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.05) 0%,
        rgba(255, 255, 255, 0.02) 100%
    );
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 2.5rem;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.special-formula-card:hover {
    border-color: var(--secondary-color);
    box-shadow: 0 10px 40px rgba(0, 240, 255, 0.2);
    transform: translateY(-5px);
}

.special-formula-icon {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, var(--secondary-color), #00d4ff);
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: white;
    margin-bottom: 1.5rem;
}

.special-formula-title {
    font-size: 1.8rem;
    font-weight: 900;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.special-formula-description {
    font-size: 1.05rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 2rem;
}

.special-formula-details {
    flex: 1;
}

.special-formula-details h4 {
    font-size: 1.2rem;
    color: var(--secondary-color);
    margin: 1.5rem 0 1rem 0;
}

.special-formula-details ul {
    list-style: none;
    padding: 0;
    margin: 1rem 0;
}

.special-formula-details ul li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

.special-formula-details ul li i {
    color: var(--secondary-color);
    margin-top: 0.2rem;
    flex-shrink: 0;
}

.special-formula-price {
    background: rgba(0, 240, 255, 0.1);
    border-radius: 10px;
    padding: 1.5rem;
    margin: 1.5rem 0;
    text-align: center;
}

.price-info {
    font-size: 1.2rem;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.price-info strong {
    font-size: 1.5rem;
    color: var(--secondary-color);
}

.price-note {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-top: 0.5rem;
}

.special-formula-card .btn-primary {
    width: 100%;
    justify-content: center;
    margin-top: 1.5rem;
}

/* FAQ Section */
.faq-section {
    padding: 6rem 0;
    background: linear-gradient(180deg, 
        rgba(10, 10, 30, 1) 0%,
        rgba(20, 10, 40, 1) 100%
    );
}

.faq-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    margin-top: 3rem;
}

.faq-item {
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.05) 0%,
        rgba(255, 255, 255, 0.02) 100%
    );
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.faq-item:hover {
    border-color: var(--primary-color);
}

.faq-question {
    width: 100%;
    background: none;
    border: none;
    padding: 1.5rem;
    text-align: left;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    transition: all 0.3s ease;
}

.faq-question:hover {
    color: var(--primary-color);
}

.faq-question i {
    color: var(--primary-color);
    transition: transform 0.3s ease;
}

.faq-question[aria-expanded="true"] i {
    transform: rotate(180deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.faq-question[aria-expanded="true"] + .faq-answer {
    max-height: 500px;
}

.faq-answer p {
    padding: 0 1.5rem 1.5rem;
    color: var(--text-secondary);
    line-height: 1.8;
    font-size: 1rem;
}

.faq-answer strong {
    color: var(--text-primary);
}

/* Final CTA Section */
.final-cta-section {
    padding: 8rem 0;
    background: linear-gradient(135deg, 
        rgba(255, 0, 64, 0.1) 0%,
        rgba(0, 240, 255, 0.1) 100%
    );
    position: relative;
    overflow: hidden;
}

.final-cta-section::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, 
        rgba(255, 0, 64, 0.1) 0%,
        transparent 50%
    );
    animation: pulse 10s ease-in-out infinite;
}

.final-cta-content {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.final-cta-content h2 {
    font-size: 3rem;
    font-weight: 900;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 1.5rem;
}

.final-cta-content > p {
    font-size: 1.3rem;
    color: var(--text-secondary);
    margin-bottom: 3rem;
}

.final-cta-buttons {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    margin-bottom: 2rem;
}

.btn-large {
    padding: 1.25rem 3rem;
    font-size: 1.2rem;
}

.final-cta-note {
    font-size: 1.1rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.final-cta-note i {
    color: var(--secondary-color);
}

/* Espaces Grid — full-width wrapper */
.espaces-grid-fullwidth {
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    padding: 0;
}

/* Responsive Design for New Pages */
@media (max-width: 1200px) {
    .mode-detail-content {
        grid-template-columns: 1fr 300px;
        gap: 2rem;
    }
}

@media (max-width: 992px) {
    .formulas-comparison-grid,
    .special-formulas-grid {
        grid-template-columns: 1fr;
    }
    
    .formula-comparison-card.formula-featured {
        transform: scale(1);
    }
    
    .formula-comparison-card.formula-featured:hover {
        transform: translateY(-5px);
    }
    
    .faq-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .mode-detail-card {
        padding: 2rem;
    }
    
    .mode-detail-header {
        flex-direction: column;
        text-align: center;
    }
    
    .mode-detail-title {
        font-size: 2rem;
    }
    
    .mode-detail-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .mode-detail-cta {
        position: static;
    }
    
    .final-cta-content h2 {
        font-size: 2rem;
    }
    
    .final-cta-content > p {
        font-size: 1.1rem;
    }
    
    .final-cta-buttons {
        flex-direction: column;
        gap: 1rem;
    }
    
    .btn-large {
        width: 100%;
        justify-content: center;
    }
    
    .espaces-grid {
        grid-template-columns: 1fr;
    }
}

/* ===================================
   CONTACT PAGE STYLES
   =================================== */

.hero-contact {
    min-height: 50vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-contact .hero-content {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-contact .hero-text {
    margin: 0 auto;
    text-align: center;
    width: 100%;
}

.hero-contact .hero-title {
    text-align: center;
}

.hero-contact .hero-subtitle {
    text-align: center !important;
    width: 100%;
    max-width: none !important;
}

.contact-content-section {
    padding: 6rem 0;
    background: linear-gradient(180deg, 
        rgba(10, 10, 30, 1) 0%,
        rgba(20, 10, 40, 1) 50%,
        rgba(10, 10, 30, 1) 100%
    );
}

/* Contact Form */
.contact-form-wrapper {
    max-width: 800px;
    margin: 0 auto 6rem;
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.05) 0%,
        rgba(255, 255, 255, 0.02) 100%
    );
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 3rem;
}

.contact-form-header {
    text-align: center;
    margin-bottom: 3rem;
}

.contact-form-title {
    font-size: 2.5rem;
    font-weight: 900;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 1rem;
}

.contact-form-subtitle {
    font-size: 1.2rem;
    color: var(--text-secondary);
}

.contact-form-simple {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.contact-form-simple .form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.contact-form-simple label {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.contact-form-simple label .required {
    color: var(--primary-color);
    font-weight: 700;
}

.contact-form-simple label .optional {
    color: var(--text-secondary);
    font-weight: 400;
    font-size: 0.9rem;
}

.contact-form-simple input,
.contact-form-simple select,
.contact-form-simple textarea {
    width: 100%;
    padding: 1rem 1.5rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: var(--text-primary);
    font-size: 1rem;
    font-family: 'Inter', sans-serif;
    transition: all 0.3s ease;
}

.contact-form-simple input:focus,
.contact-form-simple select:focus,
.contact-form-simple textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 20px rgba(255, 0, 64, 0.2);
}

.contact-form-simple input::placeholder,
.contact-form-simple textarea::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.contact-form-simple select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 3rem;
}

.contact-form-simple select option {
    background: #1a1a2e;
    color: white;
}

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

.contact-form-simple .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.contact-form-simple .btn-full {
    margin-top: 1rem;
}

/* Espaces Section */
.contact-espaces-section {
    margin-bottom: 6rem;
}

.contact-espaces-header {
    text-align: center;
    margin-bottom: 3rem;
}

.contact-espaces-title {
    font-size: 2.5rem;
    font-weight: 900;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.contact-espaces-title .highlight {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.contact-espaces-subtitle {
    font-size: 1.2rem;
    color: var(--text-secondary);
}

.contact-espaces-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.contact-espace-card {
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.05) 0%,
        rgba(255, 255, 255, 0.02) 100%
    );
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 2rem;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.contact-espace-card:hover {
    border-color: var(--primary-color);
    box-shadow: 0 10px 40px rgba(255, 0, 64, 0.2);
    transform: translateY(-5px);
}

.contact-espace-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.contact-espace-icon {
    width: 50px;
    height: 50px;
    background: var(--gradient-primary);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
    flex-shrink: 0;
}

.contact-espace-title-wrapper {
    flex: 1;
}

.contact-espace-city {
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.contact-espace-theme {
    font-size: 0.95rem;
    color: var(--primary-color);
    font-weight: 600;
}

.contact-espace-details {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex: 1;
}

.contact-espace-detail {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 1rem;
    color: var(--text-secondary);
}

.contact-espace-detail i {
    color: var(--secondary-color);
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}

.contact-espace-detail a {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.3s ease;
}

.contact-espace-detail a:hover {
    color: var(--primary-color);
}

/* Social Links Section */
.contact-social-section {
    text-align: center;
    padding: 3rem;
    background: linear-gradient(135deg, 
        rgba(255, 0, 64, 0.1) 0%,
        rgba(0, 240, 255, 0.1) 100%
    );
    border-radius: 20px;
}

.contact-social-section h3 {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 2rem;
}

.contact-social-links {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.contact-social-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    text-decoration: none;
    color: var(--text-primary);
    min-width: 120px;
    transition: all 0.3s ease;
}

.contact-social-link:hover {
    border-color: var(--primary-color);
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(255, 0, 64, 0.2);
}

.contact-social-link i {
    font-size: 2rem;
    color: var(--primary-color);
}

.contact-social-link span {
    font-size: 0.95rem;
    font-weight: 600;
}

/* Responsive Design for Contact Page */
@media (max-width: 768px) {
    .hero-contact {
        min-height: 40vh;
    }
    
    .contact-form-wrapper {
        padding: 2rem;
        margin-bottom: 4rem;
    }
    
    .contact-form-title {
        font-size: 2rem;
    }
    
    .contact-form-simple .form-row {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .contact-espaces-grid {
        grid-template-columns: 1fr;
    }
    
    .contact-espaces-title {
        font-size: 2rem;
    }
    
    .contact-social-links {
        gap: 1rem;
    }
    
    .contact-social-link {
        min-width: 100px;
        padding: 1rem;
    }
}

/* ===================================
   CONTACT CTA SECTION (Homepage)
   =================================== */

/* Contact Banner - Minimal */
.contact-banner {
    background: rgba(15, 15, 15, 0.95);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.contact-banner-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    padding: 1.25rem 2rem;
    max-width: 1400px;
    margin: 0 auto;
}

.contact-banner i {
    color: var(--primary-color);
    font-size: 1.25rem;
    opacity: 0.9;
}

.contact-banner-text {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.02em;
}

.contact-banner-btn {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1.25rem;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.contact-banner-btn:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: rgba(255, 0, 64, 0.1);
}

@media (max-width: 768px) {
    .contact-banner-inner {
        padding: 1rem 1.5rem;
        gap: 1rem;
    }
    
    .contact-banner-text {
        font-size: 0.875rem;
    }
    
    .contact-banner-btn {
        padding: 0.4rem 1rem;
        font-size: 0.8rem;
    }
}

/* ===================================
   BLOG STYLES
   =================================== */

.hero-blog {
    min-height: 50vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-blog .hero-content {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-blog .hero-text {
    margin: 0 auto;
    text-align: center;
    width: 100%;
    padding-top: 80px;
}

.hero-blog .hero-title,
.hero-blog .hero-subtitle {
    text-align: center;
}

.hero-blog .hero-subtitle {
    text-align: center !important;
    width: 100%;
    max-width: none !important;
}

/* Hero Simple - Same centered style as blog for legal pages */
.hero-simple {
    min-height: 50vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-simple .hero-content {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-simple .hero-text {
    margin: 0 auto;
    text-align: center;
    width: 100%;
    padding-top: 80px;
}

.hero-simple .hero-title,
.hero-simple .hero-subtitle {
    text-align: center;
}

.hero-simple .hero-subtitle {
    text-align: center !important;
    width: 100%;
    max-width: none !important;
}

.blog-content-section {
    padding: 6rem 0;
    background: linear-gradient(180deg, 
        rgba(10, 10, 30, 1) 0%,
        rgba(20, 10, 40, 1) 50%,
        rgba(10, 10, 30, 1) 100%
    );
}

/* Featured Article */
.blog-featured {
    position: relative;
    margin-bottom: 4rem;
    border-radius: 20px;
    overflow: hidden;
}

.blog-featured-badge {
    position: absolute;
    top: 2rem;
    left: 2rem;
    background: var(--gradient-primary);
    padding: 0.75rem 1.5rem;
    border-radius: 30px;
    font-weight: 700;
    font-size: 0.95rem;
    color: white;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.blog-featured-link {
    display: block;
    text-decoration: none;
    color: inherit;
    position: relative;
}

.blog-featured-image {
    position: relative;
    height: 500px;
    overflow: hidden;
}

.blog-featured-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.blog-featured-link:hover .blog-featured-image img {
    transform: scale(1.05);
}

.blog-featured-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, 
        transparent 0%,
        rgba(10, 10, 30, 0.95) 100%
    );
}

.blog-featured-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 3rem;
    z-index: 1;
}

.blog-featured-category {
    display: inline-block;
    padding: 0.5rem 1rem;
    background: rgba(0, 240, 255, 0.2);
    border: 1px solid var(--secondary-color);
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--secondary-color);
    margin-bottom: 1rem;
}

.blog-featured-title {
    font-size: 2.5rem;
    font-weight: 900;
    color: var(--text-primary);
    margin-bottom: 1rem;
    line-height: 1.2;
}

.blog-featured-excerpt {
    font-size: 1.2rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.blog-featured-meta {
    display: flex;
    gap: 2rem;
    font-size: 0.95rem;
    color: var(--text-secondary);
}

.blog-meta-date,
.blog-meta-read {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.blog-meta-date i,
.blog-meta-read i {
    color: var(--primary-color);
}

/* Categories Filter */
.blog-categories {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 3rem;
    justify-content: center;
}

.blog-category-btn {
    padding: 0.75rem 1.5rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 25px;
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    font-size: 0.95rem;
}

.blog-category-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--primary-color);
    transform: translateY(-2px);
}

.blog-category-btn.active {
    background: var(--gradient-primary);
    border-color: var(--primary-color);
}

/* Articles Grid */
.blog-articles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 2rem;
}

.blog-article-card {
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.05) 0%,
        rgba(255, 255, 255, 0.02) 100%
    );
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.blog-article-card:hover {
    border-color: var(--primary-color);
    box-shadow: 0 10px 40px rgba(255, 0, 64, 0.2);
    transform: translateY(-5px);
}

.blog-article-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.blog-article-image {
    position: relative;
    height: 250px;
    overflow: hidden;
}

.blog-article-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.blog-article-card:hover .blog-article-image img {
    transform: scale(1.1);
}

.blog-article-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, 
        transparent 0%,
        rgba(10, 10, 30, 0.7) 100%
    );
}

.blog-article-category {
    position: absolute;
    top: 1rem;
    right: 1rem;
    padding: 0.5rem 1rem;
    background: rgba(0, 240, 255, 0.9);
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: 700;
    color: #000;
}

.blog-article-content {
    padding: 2rem;
}

.blog-article-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 1rem;
    line-height: 1.3;
}

.blog-article-excerpt {
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.blog-article-meta {
    display: flex;
    gap: 1.5rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Empty State */
.blog-empty {
    text-align: center;
    padding: 4rem 2rem;
}

.blog-empty i {
    font-size: 4rem;
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
    opacity: 0.5;
}

.blog-empty p {
    font-size: 1.2rem;
    color: var(--text-secondary);
    margin-bottom: 2rem;
}

/* ===================================
   ARTICLE PAGE STYLES
   =================================== */

.article-hero {
    position: relative;
    min-height: 60vh;
    display: flex;
    align-items: flex-end;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.article-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, 
        rgba(10, 10, 30, 0.3) 0%,
        rgba(10, 10, 30, 0.95) 100%
    );
}

.article-hero-content {
    position: relative;
    z-index: 1;
    padding: 3rem 0;
}

.article-hero-category {
    display: inline-block;
    padding: 0.5rem 1rem;
    background: var(--gradient-primary);
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 700;
    color: white;
    margin-bottom: 1rem;
}

.article-hero-title {
    font-size: 3.5rem;
    font-weight: 900;
    color: var(--text-primary);
    margin-bottom: 1.5rem;
    line-height: 1.2;
    max-width: 900px;
}

.article-hero-meta {
    display: flex;
    gap: 2rem;
    font-size: 1rem;
    color: var(--text-secondary);
}

.article-meta-date i,
.article-meta-read i {
    color: var(--secondary-color);
}

/* Article Content */
.article-content-section {
    padding: 4rem 0;
    background: rgba(10, 10, 30, 1);
}

.article-wrapper {
    max-width: 800px;
    margin: 0 auto;
}

.article-body {
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.05) 0%,
        rgba(255, 255, 255, 0.02) 100%
    );
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 3rem;
    margin-bottom: 3rem;
}

.article-body h2 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary-color);
    margin: 2rem 0 1rem 0;
}

.article-body h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 1.5rem 0 1rem 0;
}

.article-body p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
}

.article-body ul,
.article-body ol {
    margin: 1.5rem 0;
    padding-left: 2rem;
}

.article-body li {
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
}

.article-body strong {
    color: var(--text-primary);
    font-weight: 600;
}

.article-body blockquote {
    border-left: 4px solid var(--primary-color);
    padding-left: 2rem;
    margin: 2rem 0;
    font-style: italic;
    color: var(--text-secondary);
}

.article-body blockquote p {
    font-size: 1.2rem;
}

.article-body blockquote em {
    color: var(--primary-color);
    font-style: normal;
    font-weight: 600;
}

/* Article Footer */
.article-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 3rem;
    flex-wrap: wrap;
    gap: 2rem;
}

.article-share h4 {
    font-size: 1.2rem;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.article-share-buttons {
    display: flex;
    gap: 1rem;
}

.article-share-btn {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: white;
    transition: all 0.3s ease;
    font-size: 1.2rem;
}

.article-share-facebook {
    background: #1877F2;
}

.article-share-twitter {
    background: #1DA1F2;
}

.article-share-linkedin {
    background: #0A66C2;
}

.article-share-whatsapp {
    background: #25D366;
}

.article-share-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 20px rgba(255, 255, 255, 0.3);
}

/* Related Articles */
.article-related {
    margin-top: 4rem;
}

.article-related-title {
    font-size: 2rem;
    font-weight: 900;
    color: var(--text-primary);
    margin-bottom: 2rem;
    text-align: center;
}

.article-related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

/* Article CTA */
.article-cta-section {
    padding: 4rem 0;
    background: linear-gradient(135deg, 
        rgba(255, 0, 64, 0.1) 0%,
        rgba(0, 240, 255, 0.1) 100%
    );
}

.article-cta-content {
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
}

.article-cta-content h2 {
    font-size: 2.5rem;
    font-weight: 900;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.article-cta-content p {
    font-size: 1.2rem;
    color: var(--text-secondary);
    margin-bottom: 2rem;
}

/* Responsive Design for Blog */
@media (max-width: 992px) {
    .blog-articles-grid {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    }
    
    .blog-featured-title {
        font-size: 2rem;
    }
    
    .article-hero-title {
        font-size: 2.5rem;
    }
}

@media (max-width: 768px) {
    .hero-blog,
    .hero-simple,
    .hero-events {
        min-height: 40vh;
    }
    
    .blog-featured-image {
        height: 300px;
    }
    
    .blog-featured-content {
        padding: 2rem;
    }
    
    .blog-featured-title {
        font-size: 1.5rem;
    }
    
    .blog-featured-excerpt {
        font-size: 1rem;
    }
    
    .blog-articles-grid {
        grid-template-columns: 1fr;
    }
    
    .article-hero {
        min-height: 50vh;
    }
    
    .article-hero-title {
        font-size: 2rem;
    }
    
    .article-body {
        padding: 2rem;
    }
    
    .article-body h2 {
        font-size: 1.5rem;
    }
    
    .article-footer {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .article-related-grid {
        grid-template-columns: 1fr;
    }
    
    .article-cta-content h2 {
        font-size: 2rem;
    }
}

/* ===================================
   Cookie Consent Banner (RGPD)
   =================================== */

.cookie-banner {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(150%);
    max-width: 900px;
    width: calc(100% - 40px);
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(20px);
    border: 1px solid #ff0040;
    border-radius: 12px;
    padding: 20px;
    z-index: 99999;
    box-shadow: 0 10px 40px rgba(255, 0, 64, 0.3);
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.cookie-banner.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

.cookie-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.cookie-text {
    flex: 1;
    min-width: 250px;
}

.cookie-text p {
    margin: 0;
    color: #fff;
    font-size: 14px;
    line-height: 1.5;
    display: flex;
    align-items: center;
    gap: 10px;
}

.cookie-text i {
    color: #ff0040;
    font-size: 18px;
}

.cookie-link {
    color: #ff0040;
    text-decoration: underline;
    transition: color 0.3s ease;
}

.cookie-link:hover {
    color: #ff3366;
}

.cookie-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.cookie-btn {
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.cookie-btn-accept {
    background: #ff0040;
    color: #fff;
}

.cookie-btn-accept:hover {
    background: #ff3366;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 0, 64, 0.4);
}

.cookie-btn-reject {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.cookie-btn-reject:hover {
    background: rgba(255, 255, 255, 0.15);
}

.cookie-btn-customize {
    background: transparent;
    color: #fff;
    border: 1px solid #ff0040;
}

.cookie-btn-customize:hover {
    background: rgba(255, 0, 64, 0.1);
}

/* Cookie Modal */
.cookie-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.cookie-modal.show {
    opacity: 1;
    visibility: visible;
}

.cookie-modal-content {
    background: #1a1a1a;
    border: 1px solid #ff0040;
    border-radius: 12px;
    max-width: 600px;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(255, 0, 64, 0.3);
}

.cookie-modal-header {
    padding: 20px 25px;
    border-bottom: 1px solid rgba(255, 0, 64, 0.2);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cookie-modal-header h3 {
    margin: 0;
    color: #fff;
    font-family: 'Orbitron', sans-serif;
    font-size: 20px;
}

.cookie-modal-close {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    padding: 5px;
    transition: color 0.3s ease;
}

.cookie-modal-close:hover {
    color: #ff0040;
}

.cookie-modal-body {
    padding: 25px;
}

.cookie-category {
    margin-bottom: 20px;
    padding: 15px;
    background: rgba(255, 0, 64, 0.05);
    border: 1px solid rgba(255, 0, 64, 0.1);
    border-radius: 8px;
}

.cookie-category:last-child {
    margin-bottom: 0;
}

.cookie-category-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.cookie-category-header h4 {
    margin: 0;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
}

.cookie-category-description {
    margin: 0;
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
    line-height: 1.5;
}

/* Toggle Switch */
.cookie-toggle {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 26px;
}

.cookie-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.cookie-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.4s;
    border-radius: 26px;
}

.cookie-toggle-slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.4s;
    border-radius: 50%;
}

.cookie-toggle input:checked + .cookie-toggle-slider {
    background-color: #ff0040;
}

.cookie-toggle input:checked + .cookie-toggle-slider:before {
    transform: translateX(24px);
}

.cookie-toggle input:disabled + .cookie-toggle-slider {
    background-color: #666;
    cursor: not-allowed;
}

.cookie-modal-footer {
    padding: 20px 25px;
    border-top: 1px solid rgba(255, 0, 64, 0.2);
    display: flex;
    justify-content: flex-end;
}

/* Responsive */
@media (max-width: 768px) {
    .cookie-content {
        flex-direction: column;
        align-items: stretch;
    }

    .cookie-actions {
        width: 100%;
        flex-direction: column;
    }

    .cookie-btn {
        width: 100%;
        justify-content: center;
    }

    .cookie-banner {
        bottom: 10px;
        width: calc(100% - 20px);
    }
}

/* Legal Pages Styles */
.legal-section {
    padding: 80px 0;
    background: #0a0a0a;
    color: #fff;
}

.legal-content {
    max-width: 900px;
    margin: 0 auto;
}

.legal-intro {
    margin-bottom: 40px;
    padding: 20px;
    background: rgba(255, 0, 64, 0.05);
    border-left: 4px solid #ff0040;
    border-radius: 4px;
}

.legal-intro p {
    margin: 0 0 10px;
    line-height: 1.6;
}

.legal-intro p:last-child {
    margin-bottom: 0;
}

.legal-block {
    margin-bottom: 40px;
}

.legal-block h2 {
    color: #ff0040;
    font-family: 'Orbitron', sans-serif;
    font-size: 28px;
    margin-bottom: 20px;
}

.legal-block h3 {
    color: #fff;
    font-size: 20px;
    margin: 20px 0 15px;
}

.legal-block p {
    line-height: 1.7;
    margin-bottom: 15px;
    color: rgba(255, 255, 255, 0.9);
}

.legal-block ul {
    margin: 15px 0;
    padding-left: 25px;
}

.legal-block li {
    margin-bottom: 10px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
}

.legal-block a {
    color: #ff0040;
    text-decoration: underline;
    transition: color 0.3s ease;
}

.legal-block a:hover {
    color: #ff3366;
}

.legal-nav {
    display: flex;
    gap: 15px;
    margin-top: 40px;
    flex-wrap: wrap;
}

.cookie-table {
    overflow-x: auto;
    margin: 20px 0;
}

.cookie-table table {
    width: 100%;
    border-collapse: collapse;
}

.cookie-table th,
.cookie-table td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 0, 64, 0.2);
}

.cookie-table th {
    background: rgba(255, 0, 64, 0.1);
    color: #ff0040;
    font-weight: 600;
}

.cookie-table td {
    color: rgba(255, 255, 255, 0.9);
}

.cookie-table code {
    background: rgba(255, 0, 64, 0.1);
    padding: 2px 6px;
    border-radius: 3px;
    font-family: 'Courier New', monospace;
    color: #ff3366;
}

/* Events Private Page Styles */
.hero-events {
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-events .hero-content {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-events .hero-text {
    margin: 0 auto;
    text-align: center;
    width: 100%;
    padding-top: 80px;
}

.hero-events .hero-title,
.hero-events .hero-subtitle {
    text-align: center;
}

.hero-events .hero-subtitle {
    text-align: center !important;
    width: 100%;
    max-width: none !important;
}

.hero-events .hero-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 2rem;
}

.events-intro {
    padding: 60px 0;
    background: linear-gradient(180deg, #0a0a0a 0%, #000 100%);
}

.event-section {
    padding: 80px 0;
    background: #0a0a0a;
    border-top: 1px solid rgba(255, 0, 64, 0.1);
}

.event-section-alt {
    background: #000;
}

.event-content {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 10px;
    align-items: start;
}

.event-content-reverse {
    grid-template-columns: 1.2fr 1fr;
}

.event-image {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(255, 0, 64, 0.2);
}

.event-image img {
    width: 100%;
    height: auto;
    display: block;
}

.event-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
    background: #ff0040;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #fff;
    box-shadow: 0 4px 12px rgba(255, 0, 64, 0.4);
}

.event-details {
    color: #fff;
}

.event-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 32px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    color: #fff;
}

.event-title i {
    color: #ff0040;
}

.event-description {
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 30px;
    color: rgba(255, 255, 255, 0.9);
}

.event-features,
.event-info {
    margin-bottom: 30px;
}

.event-features h3,
.event-info h3 {
    font-size: 20px;
    margin-bottom: 15px;
    color: #ff0040;
}

.features-list,
.info-list {
    list-style: none;
    padding: 0;
}

.features-list li,
.info-list li {
    padding: 10px 0;
    display: block; /* Changed from flex to block for better text flow */
    border-bottom: 1px solid rgba(255, 0, 64, 0.1);
    line-height: 1.6;
}

.features-list li i,
.info-list li i {
    margin-right: 12px;
}

.features-list li strong,
.info-list li strong {
    color: var(--text-primary);
}

.features-list li:last-child,
.info-list li:last-child {
    border-bottom: none;
}

.features-list > li > i,
.info-list > li > i {
    color: #ff0040;
    font-size: 14px;
    width: 16px;
    display: inline-block;
}

.event-highlight {
    background: rgba(255, 0, 64, 0.1);
    border-left: 4px solid #ff0040;
    padding: 15px 20px;
    margin: 20px 0;
    display: flex;
    align-items: start;
    gap: 15px;
}

.event-highlight i {
    color: #ff0040;
    font-size: 20px;
    margin-top: 2px;
}

.event-cta {
    display: flex;
    gap: 15px;
    margin-top: 30px;
    flex-wrap: wrap;
}

.events-cta-section {
    padding: 80px 0;
    background: linear-gradient(135deg, #ff0040 0%, #cc0033 100%);
    text-align: center;
}

.events-cta-content h2 {
    font-family: 'Orbitron', sans-serif;
    font-size: 36px;
    margin-bottom: 15px;
    color: #fff;
}

.events-cta-content p {
    font-size: 18px;
    margin-bottom: 30px;
    color: rgba(255, 255, 255, 0.9);
}

.events-cta-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

.dropdown-divider {
    height: 1px;
    background: rgba(255, 0, 64, 0.2);
    margin: 5px 0;
}

@media (max-width: 992px) {
    .event-content,
    .event-content-reverse {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .event-title {
        font-size: 28px;
    }
}

@media (max-width: 768px) {
    .event-section {
        padding: 60px 0;
    }

    .event-cta {
        flex-direction: column;
    }

    .event-cta .btn-primary,
    .event-cta .btn-secondary {
        width: 100%;
    }

    .events-cta-content h2 {
        font-size: 28px;
    }

    .events-cta-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .events-cta-buttons .btn-primary,
    .events-cta-buttons .btn-secondary {
        width: 100%;
    }
}

/* ===================================
   GALLERY STYLES (Photos & Vidéos)
   =================================== */

.gallery-section {
    padding: 80px 0;
    background: linear-gradient(180deg, #0a0a0a 0%, #000 100%);
}

.gallery-section .section-header {
    text-align: center;
    margin-bottom: 60px;
}

.gallery-section .section-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 48px;
    font-weight: 900;
    color: #fff;
    margin-bottom: 20px;
}

.gallery-section .section-subtitle {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.7);
    max-width: 700px;
    margin: 0 auto 30px;
    line-height: 1.6;
}

.instagram-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 40px;
    font-size: 18px;
    font-weight: 600;
    background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    color: #fff;
    text-decoration: none;
    border-radius: 50px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(188, 24, 136, 0.3);
}

.instagram-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 25px rgba(188, 24, 136, 0.5);
}

.instagram-btn i {
    font-size: 24px;
}

/* Instagram Feed Container */
.instagram-feed {
    margin: 60px 0;
}

.instagram-embed-container {
    max-width: 1200px;
    margin: 0 auto;
}

.instagram-grid {
    display: none; /* Hidden by default, shown if widget fails */
}

.instagram-placeholder {
    text-align: center;
    padding: 80px 20px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 20px;
    border: 2px dashed rgba(255, 255, 255, 0.1);
}

.instagram-placeholder i {
    font-size: 80px;
    color: #bc1888;
    margin-bottom: 20px;
}

.instagram-placeholder h3 {
    font-family: 'Orbitron', sans-serif;
    font-size: 32px;
    color: #fff;
    margin-bottom: 15px;
}

.instagram-placeholder p {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 30px;
}

.instagram-placeholder a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
}

.instagram-placeholder a:hover {
    text-decoration: underline;
}

/* Gallery Grid */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 20px;
    margin-top: 60px;
}

.gallery-item {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 15px;
    cursor: pointer;
    transition: transform 0.3s ease;
    background: #000;
}

.gallery-item:hover {
    transform: scale(1.03);
    z-index: 10;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

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

.gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(188, 24, 136, 0.9) 0%, rgba(255, 0, 64, 0.9) 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    padding: 20px;
}

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

.gallery-overlay-stats {
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex;
    gap: 15px;
}

.gallery-overlay-stats span {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #fff;
    font-weight: 600;
    font-size: 16px;
}

.gallery-overlay-stats i {
    font-size: 20px;
}

.gallery-overlay-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.gallery-overlay-icon i {
    font-size: 48px;
    color: #fff;
}

.gallery-overlay-icon span {
    font-family: 'Orbitron', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #fff;
}

/* Load More Button */
.gallery-load-more {
    text-align: center;
    margin-top: 60px;
}

.gallery-load-more .btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 40px;
    font-size: 18px;
}

/* Lightbox */
.lightbox {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.lightbox.active {
    display: flex;
}

.lightbox-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(10px);
}

.lightbox-content {
    position: relative;
    max-width: 1200px;
    width: 100%;
    max-height: 90vh;
    background: #1a1a1a;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
    animation: lightboxFadeIn 0.3s ease;
}

@keyframes lightboxFadeIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    font-size: 24px;
    transition: all 0.3s ease;
    z-index: 10;
}

.lightbox-close:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    transform: rotate(90deg);
}

.lightbox-inner {
    display: grid;
    grid-template-columns: 1fr 400px;
    height: 100%;
    max-height: 90vh;
}

.lightbox-image-container {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    padding: 20px;
}

.lightbox-image-container img {
    max-width: 100%;
    max-height: calc(90vh - 40px);
    object-fit: contain;
    border-radius: 10px;
}

.lightbox-info {
    display: flex;
    flex-direction: column;
    background: #1a1a1a;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
}

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

.lightbox-profile {
    display: flex;
    align-items: center;
    gap: 12px;
}

.lightbox-profile-pic {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
}

.lightbox-username {
    font-weight: 600;
    color: #fff;
    font-size: 16px;
}

.lightbox-follow-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    color: #fff;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.3s ease;
}

.lightbox-follow-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(188, 24, 136, 0.5);
}

.lightbox-caption {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
    font-size: 15px;
}

.lightbox-caption::-webkit-scrollbar {
    width: 8px;
}

.lightbox-caption::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
}

.lightbox-caption::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

.lightbox-caption::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

.lightbox-footer {
    padding: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.lightbox-likes {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-weight: 600;
    margin-bottom: 10px;
}

.lightbox-likes i {
    color: var(--primary-color);
    font-size: 18px;
}

.lightbox-date {
    color: rgba(255, 255, 255, 0.5);
    font-size: 13px;
}

.lightbox-view-on-instagram {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px;
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.lightbox-view-on-instagram:hover {
    background: rgba(255, 255, 255, 0.1);
}

.lightbox-view-on-instagram i {
    font-size: 20px;
}

/* Simplified Lightbox */
.lightbox-content-simple {
    max-width: 95vw;
    max-height: 95vh;
    width: auto;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: transparent;
    padding: 0;
    box-shadow: none;
    animation: lightboxFadeInSimple 0.3s ease;
}

@keyframes lightboxFadeInSimple {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.lightbox-content-simple .lightbox-close {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.8);
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.lightbox-content-simple .lightbox-close:hover {
    background: #ff0040;
    border-color: #ff0040;
}

.lightbox-media-container {
    display: flex;
    align-items: center;
    justify-content: center;
    max-height: calc(100vh - 120px);
    max-width: 90vw;
}

.lightbox-media-container img,
.lightbox-media-container video {
    max-width: 90vw;
    max-height: calc(100vh - 120px);
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
}

.lightbox-instagram-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 20px;
    padding: 14px 35px;
    background: linear-gradient(135deg, #833ab4 0%, #fd1d1d 50%, #fcb045 100%);
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    border-radius: 30px;
    transition: all 0.3s ease;
}

.lightbox-instagram-cta:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 30px rgba(253, 29, 29, 0.3);
}

.lightbox-instagram-cta i {
    font-size: 20px;
}

/* Video indicator on gallery items */
.gallery-video-indicator {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 36px;
    height: 36px;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 14px;
    z-index: 2;
    pointer-events: none;
}

.gallery-item {
    position: relative;
}

/* Video thumbnail container */
.gallery-video-thumb {
    position: relative;
    width: 100%;
    height: 100%;
    background: #1a1a1a;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.gallery-video-thumb video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery-video-thumb .gallery-video-indicator {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    font-size: 24px;
    background: rgba(255, 0, 64, 0.9);
}

/* Gallery CTA */
.gallery-cta {
    text-align: center;
    margin-top: 80px;
    padding: 60px 20px;
    background: linear-gradient(135deg, rgba(255, 0, 64, 0.1) 0%, rgba(188, 24, 136, 0.1) 100%);
    border-radius: 20px;
    border: 1px solid rgba(255, 0, 64, 0.2);
}

.gallery-cta h3 {
    font-family: 'Orbitron', sans-serif;
    font-size: 36px;
    font-weight: 900;
    color: #fff;
    margin-bottom: 15px;
}

.gallery-cta p {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 30px;
}

/* Responsive */
@media (max-width: 992px) {
    .gallery-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 15px;
    }
    
    .gallery-section .section-title {
        font-size: 36px;
    }
    
    .lightbox-inner {
        grid-template-columns: 1fr;
    }
    
    .lightbox-info {
        max-height: 400px;
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .lightbox-image-container img {
        max-height: 50vh;
    }
}

@media (max-width: 768px) {
    .gallery-section {
        padding: 60px 0;
    }
    
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    
    .gallery-section .section-title {
        font-size: 28px;
    }
    
    .gallery-section .section-subtitle {
        font-size: 16px;
    }
    
    .instagram-btn {
        padding: 12px 30px;
        font-size: 16px;
    }
    
    .gallery-cta h3 {
        font-size: 24px;
    }
    
    .gallery-cta p {
        font-size: 16px;
    }
    
    .gallery-load-more .btn-secondary {
        width: 100%;
        max-width: 300px;
    }
    
    .lightbox {
        padding: 10px;
    }
    
    .lightbox-content {
        border-radius: 15px;
        max-height: 95vh;
    }
    
    .lightbox-close {
        width: 40px;
        height: 40px;
        top: 10px;
        right: 10px;
        font-size: 20px;
    }
    
    .lightbox-inner {
        max-height: 95vh;
    }
    
    .lightbox-image-container {
        padding: 10px;
    }
    
    .lightbox-image-container img {
        max-height: 40vh;
    }
    
    .lightbox-info {
        max-height: 50vh;
    }
    
    .lightbox-header,
    .lightbox-caption,
    .lightbox-footer,
    .lightbox-view-on-instagram {
        padding: 15px;
    }
    
    .lightbox-caption {
        font-size: 14px;
    }
    
    .gallery-overlay-stats {
        top: 10px;
        right: 10px;
    }
    
    .gallery-overlay-stats span {
        font-size: 14px;
    }
    
    .gallery-overlay-icon i {
        font-size: 36px;
    }
    
    .gallery-overlay-icon span {
        font-size: 16px;
    }
}

/* ===========================================
   MOBILE FIXES - January 2026
   =========================================== */

/* Fix hero scrollbar issue - TARGET hero-content-default */
.hero-content-default {
    overflow: hidden !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    max-height: none !important;
}

.hero-content-default::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Also hide on all hero elements */
#home .hero,
#home .hero *,
.hero-text,
.hero-content,
.hero-content-item,
.hero-title,
.hero-subtitle,
.hero-buttons {
    overflow: hidden !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

#home .hero::-webkit-scrollbar,
#home .hero *::-webkit-scrollbar,
.hero-text::-webkit-scrollbar,
.hero-content::-webkit-scrollbar,
.hero-content-item::-webkit-scrollbar,
.hero-title::-webkit-scrollbar,
.hero-subtitle::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
}

/* Remove borders from feature-item in hero-features (Desktop + Mobile) */
.hero-features .feature-item,
.feature-list .feature-item {
    border-left: none !important;
    border: none !important;
}

/* Remove ALL feature-item borders globally */
.feature-item {
    border-left: none !important;
    border: none !important;
}

@media (max-width: 768px) {
    /* ===========================================
       HOME PAGE MOBILE FIXES
       =========================================== */
    
    /* Fix hero scrollbar on appearance - comprehensive fix */
    #home .hero-content-item,
    #home .hero-content-default,
    #home .hero-text,
    #home .hero-content {
        overflow: hidden !important;
        overflow-x: hidden !important;
        overflow-y: hidden !important;
        max-height: none;
    }
    
    /* Ensure no scrollbar on hero text elements */
    #home .hero-title,
    #home .hero-subtitle,
    #home .hero-buttons {
        overflow: visible !important;
    }
    
    /* ===========================================
       RESERVATION FORM MOBILE FIXES
       =========================================== */

    .reservation-form {
        padding: 0 !important;
        background: transparent !important;
    }

    /* Hide form steps navigation completely on mobile */
    .form-steps-navigation {
        display: none !important;
    }
    
    /* Players selector: counter + infobox stacked vertically */
    .players-selector {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.75rem !important;
    }

    .players-info {
        width: 100%;
    }

    .players-infobox {
        width: 100%;
    }
    
    .players-counter {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.5rem !important;
    }
    
    .players-btn {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
    }
    
    .players-input-wrapper {
        text-align: center !important;
        min-width: 50px !important;
    }
    
    .players-display {
        font-size: 1.5rem !important;
    }
    
    /* Form buttons: side by side with smaller previous button */
    .form-steps-buttons {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 1rem !important;
        width: 100% !important;
    }
    
    .form-steps-buttons .btn-secondary,
    .form-steps-buttons .btn-step-prev,
    #btnStepPrev {
        width: auto !important;
        min-width: auto !important;
        padding: 0.75rem 1rem !important;
        flex-shrink: 0 !important;
    }
    
    /* Hide text "Précédent" on mobile */
    .form-steps-buttons .btn-secondary span,
    .form-steps-buttons .btn-step-prev span,
    #btnStepPrev span {
        display: none !important;
    }
    
    /* Keep only the Font Awesome icon, no ::after */
    .form-steps-buttons .btn-secondary::after,
    .form-steps-buttons .btn-step-prev::after,
    #btnStepPrev::after {
        display: none !important;
        content: none !important;
    }
    
    .form-steps-buttons .btn-primary {
        flex: 1 !important;
        max-width: none !important;
    }
    
    /* ===========================================
       GAME MODES MOBILE - MORE COMPACT
       =========================================== */
    
    .game-mode-card {
        margin-bottom: 0.5rem !important;
    }
    
    .game-mode-card .mode-header {
        padding: 0.5rem 1rem !important;
        gap: 0.75rem !important;
    }
    
    .game-mode-card .mode-header .mode-icon {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
    }
    
    .game-mode-card .mode-header .mode-icon i {
        font-size: 1.2rem !important;
    }
    
    .game-mode-card .mode-header .mode-title {
        font-size: 0.9rem !important;
    }
    
    .game-mode-card.active .mode-content {
        max-height: 150px !important;
        padding: 0 1rem 1rem 1rem !important;
    }
    
    .game-mode-card .mode-content .mode-description {
        font-size: 0.85rem !important;
        line-height: 1.5 !important;
    }
    
    /* Selectable game mode cards in reservation */
    .game-mode-card-selectable {
        padding: 1rem !important;
    }
    
    .game-mode-card-selectable .mode-icon {
        width: 50px !important;
        height: 50px !important;
        margin-bottom: 0.75rem !important;
    }
    
    .game-mode-card-selectable .mode-icon i {
        font-size: 1.5rem !important;
    }
    
    .game-mode-card-selectable .mode-title {
        font-size: 0.9rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    .game-mode-card-selectable .mode-description {
        font-size: 0.8rem !important;
        line-height: 1.4 !important;
    }
    
    /* ===========================================
       MOBILE MENU - SHOW SUBMENUS BY DEFAULT
       =========================================== */
    
    /* Nav dropdown in mobile menu - centered */
    .nav-menu.active .nav-dropdown {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
    }
    
    .nav-menu.active .nav-dropdown > .nav-link {
        font-size: 1.3rem !important;
        font-weight: 700 !important;
        margin-bottom: 0.5rem !important;
        pointer-events: none !important;
        text-align: center !important;
        justify-content: center !important;
    }
    
    .nav-menu.active .nav-dropdown > .nav-link .fa-chevron-down {
        display: none !important;
    }
    
    /* Submenus in 2 columns */
    .nav-menu.active .dropdown-content {
        position: static !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 auto !important;
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.25rem 1rem !important;
        width: 100% !important;
        max-width: 300px !important;
    }
    
    .nav-menu.active .dropdown-content a {
        font-size: 0.95rem !important;
        padding: 0.125rem 0.125rem !important;
        color: rgba(255, 255, 255, 0.8) !important;
        border-bottom: none !important;
        text-align: center !important;
    }
    
    .nav-menu.active .dropdown-content a:hover {
        color: var(--primary-color) !important;
        background: transparent !important;
        padding-left: 0.5rem !important;
    }
    
    .nav-menu.active .dropdown-divider {
        display: none !important;
    }
    
    /* ===========================================
       FOOTER MOBILE FIX
       =========================================== */
    
    .footer-logo {
        margin-top: 20px !important;
    }
    
    /* ===========================================
       EVENTS PRIVES PAGE - CTA BUTTONS
       =========================================== */
    
    .event-cta .btn-primary,
    .event-cta .btn-secondary,
    .events-cta-buttons .btn-primary,
    .events-cta-buttons .btn-secondary {
        width: auto !important;
        display: inline-flex !important;
    }
    
    .event-cta,
    .events-cta-buttons {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 1rem !important;
    }
}

/* ═══════════════════════════════════════════════
   On parle de nous — Press section
═══════════════════════════════════════════════ */
.press {
    padding: 5rem 0 4.5rem;
    background: var(--darker-bg);
    overflow: hidden;
}

.press .container {
    max-width: 1100px;
}

.press-track {
    display: flex;
    align-items: stretch;
    margin-top: 3.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.press-sep {
    width: 1px;
    background: rgba(255, 255, 255, 0.07);
    flex-shrink: 0;
    align-self: stretch;
}

.press-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 2.5rem;
    text-align: center;
    gap: 1.2rem;
    transition: background 0.35s ease;
    cursor: default;
}

.press-item:hover {
    background: rgba(255, 255, 255, 0.025);
}

.press-item-logo {
    max-height: 46px;
    max-width: 160px;
    width: auto;
    object-fit: contain;
    opacity: 0.7;
    transition: opacity 0.35s ease;
    display: block;
}

.press-item-logo--lemanbleu {
    max-height: 54px;
    filter:
        drop-shadow(1px  0px 0 white)
        drop-shadow(-1px 0px 0 white)
        drop-shadow(0px  1px 0 white)
        drop-shadow(0px -1px 0 white)
        drop-shadow(1px  1px 0 white)
        drop-shadow(-1px -1px 0 white)
        drop-shadow(1px -1px 0 white)
        drop-shadow(-1px 1px 0 white);
}

.press-item:hover .press-item-logo {
    opacity: 1;
}

.press-item-accent {
    display: block;
    width: 28px;
    height: 2px;
    background: var(--primary-color);
    border-radius: 2px;
    flex-shrink: 0;
    opacity: 0.8;
}

.press-item-quote {
    font-family: 'Inter', sans-serif;
    font-size: 0.97rem;
    font-style: italic;
    font-weight: 400;
    color: var(--text-secondary);
    line-height: 1.7;
    margin: 0;
    padding: 0;
    max-width: 300px;
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .press-item {
        padding: 2.5rem 1.8rem;
    }

    .press-item-quote {
        font-size: 0.92rem;
    }
}

@media (max-width: 660px) {
    .press-track {
        flex-direction: column;
        border-top: none;
        border-bottom: none;
    }

    .press-sep {
        width: 100%;
        height: 1px;
        flex-shrink: 0;
        align-self: auto;
    }

    .press-item {
        padding: 2.5rem 2rem;
        border-top: 1px solid rgba(255, 255, 255, 0.07);
        border-bottom: 1px solid rgba(255, 255, 255, 0.07);
        gap: 1rem;
    }

    .press-item:not(:first-child) {
        border-top: none;
    }

    .press-item:not(:last-child) {
        border-bottom: none;
    }

    .press-sep {
        display: none;
    }

    .press-item-quote {
        max-width: 100%;
        font-size: 0.95rem;
    }
}

/* ── Mobile: remove all hero laser beams ─────────────────────────────────── */
@media (max-width: 768px) {
    /* Hide the three CSS-defined horizontal beams */
    .laser-beams {
        display: none !important;
    }

    /* Stop the floating-particles container from rotating (its rotate(180deg)
       creates the sweeping "rotating beam" effect visible on mobile) */
    .floating-particles {
        animation: none !important;
    }
}

/* ── Photo Trail Section ── */
.photo-trail-section {
    position: relative;
    height: 560px;
    overflow: hidden;
    background: #080808;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: crosshair;
}

.photo-trail-img {
    position: absolute;
    width: 252px;
    height: 336px;
    object-fit: cover;
    border-radius: 14px;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.35s ease;
    will-change: transform, opacity;
}

.photo-trail-img[data-status="active"] {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}

.photo-trail-content {
    position: relative;
    z-index: 50;
    text-align: center;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
}

.photo-trail-title {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(2.2rem, 6vw, 4.8rem);
    font-weight: 900;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1.1;
    text-shadow: 0 0 60px rgba(0,0,0,0.8);
}

.photo-trail-cta {
    pointer-events: all;
}

@media (max-width: 768px) {
    .photo-trail-section { height: 420px; cursor: default; }
    .photo-trail-img { width: 130px; height: 170px; }
}

/* ── Gallery Lightbox Navigation ── */
.lightbox-content {
    position: relative;
}

.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.55);
    border: none;
    color: #fff;
    font-size: 18px;
    padding: 18px 15px;
    cursor: pointer;
    z-index: 10;
    transition: background 0.2s;
    line-height: 1;
}

.lightbox-nav:hover { background: rgba(255,0,64,0.75); }
.lightbox-prev { left: -58px; border-radius: 3px 0 0 3px; }
.lightbox-next { right: -58px; border-radius: 0 3px 3px 0; }

@media (max-width: 900px) {
    .lightbox-prev { left: 4px; }
    .lightbox-next { right: 4px; }
}

/* ── Space Photos Strip ── */
.space-photos-section {
    background: #0d0d0d;
    padding: 0;
    overflow: hidden;
}

.space-photos-strip {
    display: flex;
    flex-direction: row;
    gap: 6px;
    overflow-x: auto;
    padding: 24px 40px;
    scrollbar-width: thin;
    scrollbar-color: #ff0040 #1a1a1a;
    -webkit-overflow-scrolling: touch;
}

.space-photos-strip::-webkit-scrollbar { height: 3px; }
.space-photos-strip::-webkit-scrollbar-track { background: #1a1a1a; }
.space-photos-strip::-webkit-scrollbar-thumb { background: #ff0040; border-radius: 2px; }

.space-photo-item {
    flex: 0 0 auto;
    height: 280px;
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    cursor: pointer;
}

.space-photo-item img {
    height: 100%;
    width: auto;
    max-width: none;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}

.space-photo-item:hover img { transform: scale(1.05); }

.space-photo-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.25s ease;
    color: #fff;
    font-size: 22px;
    opacity: 0;
}

.space-photo-item:hover .space-photo-overlay {
    background: rgba(0,0,0,0.4);
    opacity: 1;
}

/* Space Photos Lightbox */
.space-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
}

.space-lightbox.active { display: flex; }

.space-lightbox-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.92);
    cursor: pointer;
}

.space-lightbox-content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.space-lightbox-content img {
    max-width: 92vw;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 4px;
    display: block;
}

.space-lightbox-close {
    position: absolute;
    top: -44px;
    right: 0;
    background: none;
    border: none;
    color: #fff;
    font-size: 22px;
    cursor: pointer;
    padding: 8px 12px;
    line-height: 1;
    transition: color 0.2s;
}

.space-lightbox-close:hover { color: #ff0040; }

.space-lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.55);
    border: none;
    color: #fff;
    font-size: 18px;
    padding: 18px 15px;
    cursor: pointer;
    z-index: 2;
    transition: background 0.2s;
    line-height: 1;
}

.space-lightbox-nav:hover { background: rgba(255,0,64,0.75); }
.space-lightbox-prev { left: -58px; border-radius: 3px 0 0 3px; }
.space-lightbox-next { right: -58px; border-radius: 0 3px 3px 0; }

@media (max-width: 900px) {
    .space-lightbox-prev { left: 4px; }
    .space-lightbox-next { right: 4px; }
}

/* Mobile: horizontal snap carousel */
@media (max-width: 768px) {
    .space-photos-strip {
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        overflow-y: visible;
        scroll-snap-type: x mandatory;
        gap: 8px;
        padding: 0;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .space-photos-strip::-webkit-scrollbar { display: none; }

    .space-photo-item {
        flex: 0 0 50vw;
        width: 50vw;
        height: 62vw;
        border-radius: 6px;
        padding-bottom: 0;
        scroll-snap-align: center;
    }

    .space-photo-item img {
        position: static;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .space-photo-overlay { display: none; }
}

/* Mobile carousel arrows */
.space-photos-arrows {
    display: none;
}

@media (max-width: 768px) {
    .space-photos-arrows {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 20px;
        padding: 14px 0 6px;
    }

    .space-photos-arrow {
        background: rgba(255,255,255,0.08);
        border: 1px solid rgba(255,255,255,0.2);
        color: #fff;
        width: 38px;
        height: 38px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        font-size: 14px;
        transition: background 0.2s, border-color 0.2s;
        flex-shrink: 0;
    }

    .space-photos-arrow:active,
    .space-photos-arrow:hover {
        background: #ff0040;
        border-color: #ff0040;
    }
}

/* ── Hero Tags ── */
.hero-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 26px;
}

@media (max-width: 768px) {
    .hero-tags {
        justify-content: center;
    }
}

.hero-tag {
    display: inline-block;
    background: transparent;
    color: #ff0040;
    border: 1px solid #ff0040;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 3px;
    font-family: 'Orbitron', sans-serif;
    line-height: 1.4;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .hero-tag {
        font-size: 8px;
        color: #ffffff;
        font-weight: 700;
        border-color: #ffffff;
    }
    /* Hide tags on first (default) hero slide only */
    #home .hero-content-default .hero-tags {
        display: none !important;
    }
    /* Reduce spacing around hero subtitle by 40% */
    #home .hero-text .hero-title {
        margin-bottom: 22px !important;
    }
    #home .hero-subtitle,
    #home .hero-text .hero-subtitle {
        margin-bottom: 12px !important;
    }
}

/* ============================================================
   FORMAT TABS — Step 2 of reservation form
   ============================================================ */

.format-tabs-section {
    padding: 0 !important;
}

.format-tabs-section .reservation-label {
    flex-direction: column;
    gap: 0.35rem;
}

.format-intro-text {
    color: rgba(255,255,255,0.6);
    font-size: 0.95rem;
    line-height: 1.8;
    margin: 0.75rem 0 1.5rem;
    padding: 0;
    text-align: center;
}

/* ── Tabs count subtitle ── */
.format-count-label {
    text-align: center;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.35);
    margin: 0 0 0.75rem;
}

.min-pricing-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    background: rgba(59, 130, 246, 0.08);
    border: 1px solid rgba(59, 130, 246, 0.25);
    border-radius: 10px;
    padding: 0.85rem 1.1rem;
    margin-bottom: 1rem;
    font-size: 0.88rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.85);
}
.min-pricing-notice i {
    color: #3b82f6;
    margin-top: 3px;
    flex-shrink: 0;
}
.min-pricing-notice a {
    color: #3b82f6;
    text-decoration: underline;
    font-weight: 600;
    cursor: pointer;
}
.min-pricing-notice a:hover {
    color: #60a5fa;
}

/* ── Tab navigation ── */
.format-tabs-nav {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.1);
    margin-bottom: 0;
}

.format-tab {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: 0.9rem 0.4rem 0.75rem;
    background: rgba(255,255,255,0.03);
    border: none;
    border-right: 1px solid rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.5);
    font-family: inherit;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease;
    text-align: center;
    position: relative;
}

.format-tab:last-child {
    border-right: none;
}

.format-tab i {
    font-size: 1rem;
    opacity: 0.7;
    transition: opacity 0.18s ease;
    margin-bottom: 0.1rem;
    flex-shrink: 0;
}

.ftab-label {
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.01em;
}

.ftab-sub {
    font-size: 0.68rem;
    opacity: 0.55;
    line-height: 1.2;
    font-weight: 400;
}

.format-tab:hover {
    background: rgba(255, 0, 64, 0.08);
    color: rgba(255,255,255,0.85);
}

.format-tab:hover i {
    opacity: 1;
}

.format-tab.active {
    background: rgba(255, 0, 64, 0.14);
    color: #fff;
    box-shadow: inset 0 -2px 0 0 #ff0040;
}

.format-tab.active i,
.format-tab.active .ftab-sub {
    opacity: 1;
}

/* ── Description panels ── */
.format-panels {
    margin-top: 0;
}

.format-panel {
    display: none;
    animation: ftPanelIn 0.22s ease;
}

.format-panel.active {
    display: block;
}

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

.fp-desc {
    margin: 1.2rem 0 1.25rem;
    color: rgba(255,255,255,0.72);
    font-size: 0.95rem;
    line-height: 1.8;
    padding: 1.1rem 1.4rem;
    background: rgba(255,255,255,0.03);
    border-left: 2px solid rgba(255,0,64,0.5);
    border-radius: 0 8px 8px 0;
}

.fp-desc em {
    display: block;
    margin-top: 0.65rem;
    opacity: 0.65;
    font-style: italic;
    font-size: 0.87rem;
}

/* ── Phone-only card ── */
#formatPhoneOnly {
    animation: ftPanelIn 0.22s ease;
}

.format-phone-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2rem 1.5rem;
    margin: 0.5rem 0 1rem;
    background: rgba(255, 0, 64, 0.04);
    border: 1px solid rgba(255, 0, 64, 0.18);
    border-radius: 12px;
    gap: 0.75rem;
}

.format-phone-card-icon {
    width: 3rem;
    height: 3rem;
    background: rgba(255, 0, 64, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.25rem;
}

.format-phone-card-icon i {
    font-size: 1.1rem;
    color: #ff0040;
}

.format-phone-card p {
    color: rgba(255,255,255,0.7);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

#formatFormulaStd,
#formatFormulaBirthday {
    animation: ftPanelIn 0.22s ease;
}

/* ── Responsive: 2×3 card grid on mobile ── */
@media (max-width: 640px) {
    .format-tabs-nav {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5rem;
        border: none;
        border-radius: 0;
        overflow: visible;
        background: transparent;
    }

    .format-tab {
        border: 1px solid rgba(255,255,255,0.1) !important;
        border-radius: 10px;
        padding: 1rem 0.4rem 0.9rem;
        gap: 0.45rem;
    }

    .format-tab:last-child {
        border-right: 1px solid rgba(255,255,255,0.1) !important;
    }

    .format-tab.active {
        box-shadow: inset 0 0 0 2px #ff0040;
    }

    .format-tab.format-tab-disabled {
        opacity: 0.38;
    }

    .format-tab i {
        font-size: 1.25rem;
        margin-bottom: 0.05rem;
    }

    .ftab-label {
        font-size: 0.78rem;
        font-weight: 700;
    }

    .ftab-sub {
        font-size: 0.67rem;
        display: block !important;
    }

    .fp-desc {
        font-size: 0.9rem;
        padding: 0.95rem 1.1rem;
    }
}

/* ============================================================
   HELP WIDGET — sticky bottom-right + lightbox
   ============================================================ */

.help-widget {
    position: fixed;
    bottom: 1.5rem;
    left: 1.5rem;
    z-index: 900;
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.help-widget.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.help-widget-close {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.15);
    background: rgba(0,0,0,0.7);
    color: rgba(255,255,255,0.6);
    font-size: 0.55rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 2;
    padding: 0;
}
.help-widget-close:hover {
    background: rgba(230,57,70,0.3);
    border-color: var(--primary-color, #e63946);
    color: #fff;
}

.help-widget-btn {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.6rem 0.9rem 0.6rem 0.65rem;
    background: #161616;
    border: 1px solid rgba(255, 0, 64, 0.45);
    border-radius: 50px;
    color: #fff;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    box-shadow: 0 4px 24px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,0,64,0.12);
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.help-widget-btn:hover {
    background: rgba(255, 0, 64, 0.1);
    border-color: rgba(255, 0, 64, 0.7);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,0,64,0.3);
}

.help-widget-icon {
    width: 1.75rem;
    height: 1.75rem;
    background: rgba(255, 0, 64, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.help-widget-icon i {
    font-size: 0.75rem;
    color: #ff0040;
}

.help-widget-text {
    display: flex;
    flex-direction: column;
    gap: 0;
    line-height: 1.2;
}

.help-widget-title {
    font-size: 0.78rem;
    font-weight: 700;
    color: #fff;
}

.help-widget-sub {
    font-size: 0.68rem;
    color: rgba(255,255,255,0.45);
}

.help-widget-arrow {
    font-size: 0.6rem;
    color: rgba(255,255,255,0.35);
    margin-left: 0.05rem;
}

/* ── Lightbox ── */
.help-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0 1rem 1.5rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.help-lightbox.open {
    opacity: 1;
    pointer-events: auto;
}

.help-lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.65);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.help-lightbox-panel {
    position: relative;
    width: 100%;
    max-width: 540px;
    background: #161616;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    padding: 1.5rem 1.5rem 1.25rem;
    transform: translateY(24px);
    transition: transform 0.3s cubic-bezier(0.34, 1.2, 0.64, 1);
}

.help-lightbox.open .help-lightbox-panel {
    transform: translateY(0);
}

.help-lightbox-close {
    position: absolute;
    top: 0.9rem;
    right: 0.9rem;
    width: 1.75rem;
    height: 1.75rem;
    background: rgba(255,255,255,0.07);
    border: none;
    border-radius: 50%;
    color: rgba(255,255,255,0.55);
    font-size: 0.7rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.18s ease, color 0.18s ease;
}

.help-lightbox-close:hover {
    background: rgba(255, 0, 64, 0.15);
    color: #ff0040;
}

.help-lightbox-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 0.35rem;
    padding-right: 2rem;
}

.help-lightbox-title i {
    color: #ff0040;
    margin-right: 0.4rem;
}

@media (max-width: 480px) {
    .help-widget {
        bottom: 1rem;
        left: 1rem;
    }
    .help-lightbox {
        padding: 0;
        align-items: flex-end;
    }
    .help-lightbox-panel {
        border-radius: 14px 14px 0 0;
        max-width: 100%;
        padding: 1.25rem 1.1rem 1rem;
    }
}

/* ============================================================
   EVENT FORMAT — subtitle on espaces.php hero
   ============================================================ */
.hero-subtitle-format {
    color: #ff0040 !important;
    font-family: 'Orbitron', monospace;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: clamp(0.85rem, 1.8vw, 1.05rem) !important;
    margin-bottom: 0.5rem !important;
}

/* ============================================================
   FORMAT RANGE WARNING — step 1 player count
   ============================================================ */
.format-range-warning {
    display: none;
    margin-top: 1rem;
    border-radius: 10px;
    overflow: hidden;
    animation: ftPanelIn 0.22s ease;
}

.frw-inner {
    display: flex;
    gap: 0.85rem;
    padding: 1rem 1.1rem;
    background: rgba(251, 146, 60, 0.06);
    border: 1px solid rgba(251, 146, 60, 0.25);
    border-radius: 10px;
    align-items: flex-start;
}

.frw-icon {
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 8px;
    background: rgba(251, 146, 60, 0.15);
    color: #fb923c;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.frw-icon i {
    font-size: 0.85rem;
}

.frw-body {
    flex: 1;
    min-width: 0;
}

.frw-text {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.7);
    line-height: 1.65;
    margin: 0 0 0.6rem;
}

.frw-text strong {
    color: #fb923c;
    font-weight: 700;
}

.frw-scroll-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: #fb923c;
    background: rgba(251, 146, 60, 0.1);
    border: 1px solid rgba(251, 146, 60, 0.25);
    border-radius: 6px;
    padding: 0.35rem 0.8rem;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.18s, color 0.18s;
}

.frw-scroll-btn:hover {
    background: rgba(251, 146, 60, 0.2);
    color: #fbbf24;
}

@media (max-width: 480px) {
    .frw-inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 0.5rem;
        padding: 1rem;
    }
    .frw-body {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}
.events-grid-two{grid-template-columns:1fr 1fr;margin-top:20px}.event-icon-img{background:transparent!important;border:none!important;padding:0!important}.event-icon-img img{width:100%;height:100%;object-fit:contain;border-radius:50%}@media(max-width:480px){.events-grid-two{grid-template-columns:1fr}}
.logo-compact{display:none!important}.logo-full{display:block!important}@media (min-width:769px) and (max-width:1270px){.logo-compact{display:block!important}.logo-full{display:none!important}}