/* ═══════════════════════════════════════════════════════════════════
   BASE.CSS – Common styles shared across all pages
   ═══════════════════════════════════════════════════════════════════ */

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

:root {
    --bg-light: #f5f5f3;
    --bg-card: #ffffff;
    --bg-section: #f0f7f9;
    --blue-pastel: #87d4e0;
    --blue-ocean: #4fa8ba;
    --blue-deep: #2c7a8a;
    --beige-sand: #d4c5b0;
    --coral-soft: #ff8c75;
    --text-dark: #1a2332;
    --text-muted: #5a6a7a;
    --nav-height: 64px;
    --banner-height: 44px;

    /* Accent colors - intense energy */
    --accent-hot: #FF006E;
    --accent-neon: #39FF14;
    --accent-electric: #FFDD00;
    --accent-cyber: #00F5FF;
    
    /* Nav transparent state colors */
    --nav-text-light: rgba(255, 255, 255, 0.95);
    --nav-logo-light: rgba(255, 255, 255, 0.98);

    /* Tactile : cible minimale recommandee (WCAG 2.5.5 / HIG / Material) */
    --tap-min: 44px;

    /* Encoches & barres systeme (necessite viewport-fit=cover dans le <meta>) */
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
}

html {
    scroll-behavior: smooth;
    /* iOS gonfle le texte en rotation paysage : on garde nos tailles. */
    -webkit-text-size-adjust: 100%;
}

body {
    background-color: var(--bg-light);
    color: var(--text-dark);
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    line-height: 1.7;
    overflow-x: hidden;
    position: relative;
}

/* Film grain texture overlay - subtle underground aesthetic */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    opacity: 0.03;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    animation: grain-pulse 4s ease-in-out infinite alternate;
}

@keyframes grain-pulse {
    0% {
        opacity: 0.02;
    }

    100% {
        opacity: 0.04;
    }
}

/* ─────────────────────────────────────────────
   SCROLLBAR
   ───────────────────────────────────────────── */
::-webkit-scrollbar {
    width: 6px;
}

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

::-webkit-scrollbar-thumb {
    background: var(--blue-pastel);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--blue-ocean);
}

/* ─────────────────────────────────────────────
   TEXT SELECTION
   ───────────────────────────────────────────── */
::selection {
    background: var(--blue-pastel);
    color: var(--text-dark);
}

::-moz-selection {
    background: var(--blue-pastel);
    color: var(--text-dark);
}

/* ─────────────────────────────────────────────
   SCREEN READER ONLY (keeps text for SEO)
   ───────────────────────────────────────────── */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* ─────────────────────────────────────────────
   SKIP TO CONTENT LINK
   ───────────────────────────────────────────── */
.skip-link {
    position: absolute;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    padding: 0.75rem 1.5rem;
    background: var(--blue-ocean);
    color: white;
    font-family: 'Oswald', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 2px;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(94, 184, 197, 0.3);
    transition: top 0.3s ease;
}

.skip-link:focus {
    top: 1rem;
    outline: 3px solid var(--blue-ocean);
    outline-offset: 3px;
}

/* ─────────────────────────────────────────────
   EVENT BANNER
   ───────────────────────────────────────────── */
#event-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 101;
    height: var(--banner-height);
    background: linear-gradient(90deg, var(--accent-hot), var(--accent-electric));
    overflow: hidden;
    animation: banner-unfurl 0.65s cubic-bezier(0.65, 0, 0.35, 1) both;
}

@keyframes banner-unfurl {
    from {
        height: 0;
    }
    to {
        height: var(--banner-height);
    }
}

@media (prefers-reduced-motion: reduce) {
    #event-banner {
        animation: none;
    }
}

#event-banner a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    height: 100%;
    padding: 0 1rem;
    text-decoration: none;
    color: #0a121c;
    font-family: 'Oswald', sans-serif;
    text-align: center;
    transition: filter 0.2s ease;
}

#event-banner a:hover {
    filter: brightness(1.08);
}

#event-banner .event-banner-badge {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 2px;
    padding: 2px 8px;
    background: rgba(10, 18, 28, 0.85);
    color: #fff;
    border-radius: 3px;
    flex-shrink: 0;
}

#event-banner .event-banner-ticker {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    display: flex;
    align-items: center;
    overflow: hidden;
}

#event-banner .event-banner-text {
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.3px;
    white-space: nowrap;
    flex-shrink: 0;
    padding-left: 100%;
    animation: banner-ticker 11s linear infinite;
    will-change: transform;
}

@keyframes banner-ticker {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }
}

@media (prefers-reduced-motion: reduce) {
    #event-banner .event-banner-text {
        animation: none;
        padding-left: 0;
    }
}

#event-banner .event-banner-cta {
    font-weight: 700;
    font-size: 0.8rem;
    text-decoration: underline;
    flex-shrink: 0;
    white-space: nowrap;
}

/* ─────────────────────────────────────────────
   NAV
   ───────────────────────────────────────────── */
nav {
    --nav-progress: 1;
    position: fixed;
    top: var(--banner-height);
    left: 0;
    right: 0;
    z-index: 100;
    height: var(--nav-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2.5rem;
    background: rgba(255, 255, 255, calc(var(--nav-progress) * 0.95));
    border-bottom: 2px solid rgba(135, 212, 224, calc(var(--nav-progress) * 0.5));
    box-shadow: 0 2px 10px rgba(0, 0, 0, calc(var(--nav-progress) * 0.05));
}

.nav-logo {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--nav-logo-light);
    letter-spacing: 4px;
    cursor: default;
    user-select: none;
    text-decoration: none;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    transition: color 0.4s ease, text-shadow 0.4s ease;
}

.beta-badge {
    display: inline-block;
    padding: 4px 10px;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: #fff;
    font-family: 'Oswald', sans-serif;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.4), 0 0 12px rgba(59, 130, 246, 0.2);
    text-shadow: none;
    animation: beta-pulse 2s ease-in-out infinite;
}

.genius-badge {
    display: inline-block;
    padding: 4px 12px;
    background: linear-gradient(135deg, var(--accent-hot), var(--accent-neon));
    color: var(--text-dark);
    font-family: 'Oswald', sans-serif;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(255, 0, 110, 0.5), 0 0 20px rgba(57, 255, 20, 0.3);
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    animation: genius-badge-pulse 2s ease-in-out infinite;
}

@keyframes genius-badge-pulse {
    0%, 100% {
        box-shadow: 0 2px 12px rgba(255, 0, 110, 0.5), 0 0 20px rgba(57, 255, 20, 0.3);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 2px 16px rgba(255, 0, 110, 0.7), 0 0 30px rgba(57, 255, 20, 0.5), 0 0 40px rgba(0, 245, 255, 0.3);
        transform: scale(1.05);
    }
}

@keyframes beta-pulse {

    0%,
    100% {
        box-shadow: 0 2px 8px rgba(59, 130, 246, 0.4), 0 0 12px rgba(59, 130, 246, 0.2);
    }

    50% {
        box-shadow: 0 2px 12px rgba(59, 130, 246, 0.6), 0 0 20px rgba(59, 130, 246, 0.4);
    }
}

.nav-links {
    list-style: none;
    display: flex;
    gap: 2rem;
}

.nav-links a {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 0.82rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--nav-text-light);
    text-decoration: none;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
    transition: color 0.4s ease, text-shadow 0.4s ease;
    position: relative;
    padding-bottom: 4px;
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--blue-ocean);
    transition: width 0.3s ease;
}

.nav-links a:hover,
.nav-links a.active {
    color: var(--blue-ocean);
}

.nav-links a:hover::after,
.nav-links a.active::after {
    width: 100%;
}

/* Scrolled state: revert to original dark colors */
nav.nav--scrolled .nav-logo {
    color: var(--blue-ocean);
}

nav.nav--scrolled .nav-links a {
    color: var(--text-muted);
    text-shadow: none;
}

nav.nav--scrolled .nav-links a::after {
    background: var(--blue-ocean);
}

nav.nav--scrolled .nav-links a:hover::after,
nav.nav--scrolled .nav-links a.active::after {
    width: 100%;
}

/* Genius link - outline ghost pill */
.genius-link {
    position: relative;
    padding: 6px 16px !important;
    background: transparent !important;
    color: var(--blue-ocean) !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 0.82rem !important;
    letter-spacing: 2px;
    border-radius: 20px;
    border: 1.5px solid var(--blue-ocean) !important;
    box-shadow: none;
    transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

.genius-link::after {
    display: none !important;
}

.genius-link:hover {
    background: var(--blue-pastel) !important;
    color: var(--text-dark) !important;
    box-shadow: 0 4px 14px rgba(79, 168, 186, 0.3);
    transform: none;
    text-shadow: none !important;
}

nav.nav--scrolled .genius-link {
    color: var(--blue-ocean) !important;
    border-color: var(--blue-ocean) !important;
}

nav.nav--scrolled .genius-link:hover {
    background: var(--blue-pastel) !important;
    color: var(--text-dark) !important;
}

/* ─────────────────────────────────────────────
   HAMBURGER BUTTON
   ───────────────────────────────────────────── */
.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    /* Cible tactile pleine (44x44) : les barres restent a 22px de large. */
    width: var(--tap-min);
    height: var(--tap-min);
    background: none;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    padding: 10px;
    -webkit-tap-highlight-color: transparent;
}

.nav-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--blue-ocean);
    border-radius: 2px;
    box-shadow: none;
    transition: transform 0.3s ease, opacity 0.2s ease;
    transform-origin: center;
}

nav.nav--open .nav-toggle span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

nav.nav--open .nav-toggle span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

nav.nav--open .nav-toggle span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ─────────────────────────────────────────────
   FOOTER
   ───────────────────────────────────────────── */
footer {
    background: linear-gradient(180deg, #2c3e50 0%, #24303f 100%);
    border-top: 1px solid rgba(179, 235, 242, 0.3);
    padding: 3.25rem 2rem 1.75rem;
}

.footer-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 2.5rem;
    align-items: start;
}

.footer-logo {
    font-family: 'JetBrains Mono', monospace;
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: 8px;
    color: var(--blue-pastel);
    text-shadow: 0 2px 4px rgba(94, 184, 197, 0.2);
    margin-bottom: 0.5rem;
}

.footer-name {
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
    letter-spacing: 1px;
}

.footer-location {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.85rem;
    margin-top: 0.35rem;
}

.footer-heading {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--blue-pastel);
    margin-bottom: 1rem;
}

.footer-col--nav ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.footer-col--nav a {
    display: inline-block;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: 0.95rem;
    transition: color 0.2s ease, transform 0.2s ease;
}

.footer-col--nav a:hover {
    color: #fff;
    transform: translateX(4px);
}

.footer-social {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.footer-social a {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(179, 235, 242, 0.15);
    color: rgba(255, 255, 255, 0.75);
    transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.footer-social a:hover {
    background: var(--blue-ocean);
    border-color: var(--blue-ocean);
    color: #fff;
    transform: translateY(-3px);
}

.footer-social svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.footer-bottom {
    max-width: 1100px;
    margin: 2.5rem auto 0;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    text-align: center;
}

.footer-bottom p {
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.8rem;
    letter-spacing: 1px;
}

@media (max-width: 720px) {
    .footer-inner {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
        justify-items: center;
    }

    .footer-col--nav ul {
        align-items: center;
    }

    .footer-col--nav a:hover {
        transform: none;
    }

    .footer-social {
        justify-content: center;
    }
}

/* ─────────────────────────────────────────────
   DIVIDER - Animated section separators
   ───────────────────────────────────────────── */
.divider {
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(179, 235, 242, 0.4), transparent);
    margin: 0;
}

.divider-animated {
    width: 100%;
    height: 3px;
    margin: 4rem 0;
    position: relative;
    overflow: hidden;
    background: linear-gradient(90deg, transparent, rgba(135, 212, 224, 0.2), transparent);
}

.divider-animated::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, var(--accent-cyber), transparent);
    animation: divider-sweep 3s ease-in-out infinite;
}

@keyframes divider-sweep {
    0% {
        left: -100%;
    }

    100% {
        left: 100%;
    }
}

/* Section divider with glitch effect */
.section-divider {
    width: 100%;
    height: 2px;
    margin: 0;
    position: relative;
    background: linear-gradient(90deg, transparent 0%, var(--blue-pastel) 50%, transparent 100%);
}

.section-divider.glitch-divider {
    animation: divider-glitch 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@keyframes divider-glitch {

    0%,
    100% {
        transform: translateX(0);
        filter: hue-rotate(0deg);
    }

    20% {
        transform: translateX(-5px);
        filter: hue-rotate(90deg);
    }

    40% {
        transform: translateX(5px);
        filter: hue-rotate(-90deg);
    }

    60% {
        transform: translateX(-3px);
    }

    80% {
        transform: translateX(3px);
    }
}

/* ─────────────────────────────────────────────
   LANGUAGE SWITCHER
   ───────────────────────────────────────────── */
.lang-switcher {
    font-family: 'Oswald', sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-muted);
    text-decoration: none;
    padding: 0.5rem 1rem;
    border: 1px solid var(--blue-pastel);
    border-radius: 4px;
    transition: all 0.25s ease;
    display: inline-block;
}

.lang-switcher:hover {
    color: var(--blue-ocean);
    border-color: var(--blue-ocean);
    box-shadow: 0 2px 8px rgba(94, 184, 197, 0.2);
}

/* ─────────────────────────────────────────────
   BACKGROUND PATTERNS - Geometric textures
   ───────────────────────────────────────────── */
.bg-pattern-geo {
    position: relative;
    overflow: hidden;
}

.bg-pattern-geo::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.04;
    background-image:
        linear-gradient(30deg, var(--blue-ocean) 12%, transparent 12.5%, transparent 87%, var(--blue-ocean) 87.5%, var(--blue-ocean)),
        linear-gradient(150deg, var(--blue-ocean) 12%, transparent 12.5%, transparent 87%, var(--blue-ocean) 87.5%, var(--blue-ocean)),
        linear-gradient(30deg, var(--blue-ocean) 12%, transparent 12.5%, transparent 87%, var(--blue-ocean) 87.5%, var(--blue-ocean)),
        linear-gradient(150deg, var(--blue-ocean) 12%, transparent 12.5%, transparent 87%, var(--blue-ocean) 87.5%, var(--blue-ocean));
    background-size: 80px 140px;
    background-position: 0 0, 0 0, 40px 70px, 40px 70px;
    pointer-events: none;
    z-index: 0;
}

.bg-gradient-shift {
    position: relative;
    overflow: hidden;
}

.bg-gradient-shift::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    right: -50%;
    bottom: -50%;
    background: radial-gradient(ellipse at center,
            rgba(57, 255, 20, 0.08) 0%,
            rgba(0, 245, 255, 0.06) 30%,
            rgba(255, 0, 110, 0.04) 60%,
            transparent 80%);
    animation: gradient-shift 15s ease-in-out infinite alternate;
    pointer-events: none;
    z-index: 0;
}

@keyframes gradient-shift {
    0% {
        transform: translate(0, 0) scale(1);
    }

    33% {
        transform: translate(10%, -5%) scale(1.05);
    }

    66% {
        transform: translate(-5%, 10%) scale(0.95);
    }

    100% {
        transform: translate(-10%, -10%) scale(1.1);
    }
}

/* Ensure content stays above background patterns */
.bg-pattern-geo>*,
.bg-gradient-shift>* {
    position: relative;
    z-index: 1;
}

/* ─────────────────────────────────────────────
   RESPONSIVE – Mobile Menu (full-screen overlay)
   ───────────────────────────────────────────── */
@media (max-width: 680px) {
    .nav-toggle {
        display: flex;
    }

    /* Close icon (×) style when open */
    nav.nav--open .nav-toggle span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
        background: var(--blue-pastel);
    }
    nav.nav--open .nav-toggle span:nth-child(2) {
        opacity: 0;
        transform: scaleX(0);
    }
    nav.nav--open .nav-toggle span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
        background: var(--blue-pastel);
    }

    .nav-links {
        display: none;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(10, 18, 28, 0.97);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        padding: 2rem;
        gap: 0;
        z-index: 99;
        /* decorative accent line at top */
        border-top: 2px solid var(--blue-pastel);
    }

    nav.nav--open .nav-links {
        display: flex;
        animation: overlay-fade-in 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    @keyframes overlay-fade-in {
        from {
            opacity: 0;
            transform: scale(1.03);
        }
        to {
            opacity: 1;
            transform: scale(1);
        }
    }

    /* Each link gets a stagger via nth-child */
    .nav-links li {
        width: 100%;
        text-align: center;
        opacity: 0;
        transform: translateY(20px);
    }

    nav.nav--open .nav-links li {
        animation: link-rise 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }

    nav.nav--open .nav-links li:nth-child(1) { animation-delay: 0.08s; }
    nav.nav--open .nav-links li:nth-child(2) { animation-delay: 0.14s; }
    nav.nav--open .nav-links li:nth-child(3) { animation-delay: 0.20s; }
    nav.nav--open .nav-links li:nth-child(4) { animation-delay: 0.26s; }
    nav.nav--open .nav-links li:nth-child(5) { animation-delay: 0.32s; }
    nav.nav--open .nav-links li:nth-child(6) { animation-delay: 0.38s; }

    @keyframes link-rise {
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .nav-links a {
        display: block;
        font-family: 'Oswald', sans-serif;
        font-size: 2rem;
        font-weight: 400;
        letter-spacing: 6px;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.75);
        text-shadow: none;
        padding: 0.9rem 0;
        text-decoration: none;
        transition: color 0.2s ease, letter-spacing 0.2s ease;
        border-bottom: 1px solid rgba(135, 212, 224, 0.08);
    }

    .nav-links a:hover,
    .nav-links a.active {
        color: var(--blue-pastel);
        letter-spacing: 8px;
    }

    /* Override the underline pseudo for big overlay links */
    .nav-links a::after {
        display: none !important;
    }

    /* Génie pill adapts to dark bg */
    .genius-link {
        font-family: 'Oswald', sans-serif !important;
        font-size: 1.6rem !important;
        letter-spacing: 5px !important;
        padding: 10px 32px !important;
        border-color: var(--blue-pastel) !important;
        color: var(--blue-pastel) !important;
        background: transparent !important;
        border-width: 1.5px !important;
        margin-top: 0.4rem;
    }

    .genius-link:hover {
        background: var(--blue-pastel) !important;
        color: var(--text-dark) !important;
        letter-spacing: 7px !important;
    }
}

/* ─────────────────────────────────────────────
   ACCESSIBILITY - Reduced Motion
   ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    /* Disable grain pulse */
    body::before {
        animation: none !important;
        opacity: 0.02 !important;
    }
}
/* ═══════════════════════════════════════════════════════════════════
   FONDATIONS TACTILES & MOBILE
   Regroupe ce qui relève du « comment le site se comporte au doigt » :
   états actifs, cibles de tap, encoches, et neutralisation des effets
   pensés pour la souris. Chargé après le reste : à spécificité égale,
   ces règles gagnent volontairement la cascade.
   ═══════════════════════════════════════════════════════════════════ */

/* ── L'attribut hidden reste hidden ──────────────────────────────
   N'importe quelle règle d'auteur posant un `display` sur un élément
   porteur de [hidden] annule le `display: none` du navigateur, et
   l'élément réapparaît. Ce garde-fou évite d'avoir à y penser à chaque
   fois qu'on styles un élément affiché conditionnellement. */
[hidden] {
    display: none !important;
}

/* ── Focus clavier visible partout (le focus souris/tactile reste discret) ── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--blue-ocean);
    outline-offset: 3px;
    border-radius: 6px;
}

/* ── Appareils tactiles : pas de :hover collant ──────────────────────
   Sur un écran tactile, :hover reste appliqué après le tap jusqu'au tap
   suivant : une carte reste « soulevée », un bouton reste inversé. On
   annule donc les effets de survol qui déplacent ou transforment, et on
   les remplace par un retour au doigt (:active) court et lisible. */
@media (hover: none) {

    .footer-col--nav a:hover,
    .footer-social a:hover {
        transform: none;
    }

    .footer-social a:active {
        background: var(--blue-ocean);
        border-color: var(--blue-ocean);
        color: #fff;
        transform: scale(0.94);
    }

    .footer-col--nav a:active {
        color: #fff;
    }
}

/* ── Nav : encoches + cible du hamburger ─────────────────────────── */
nav {
    padding-left: max(2.5rem, var(--safe-left));
    padding-right: max(2.5rem, var(--safe-right));
}

@media (max-width: 680px) {
    nav {
        padding-left: max(1rem, var(--safe-left));
        padding-right: max(1rem, var(--safe-right));
    }

    /* Au-dessus de la photo du hero, les barres bleu pastel se perdent :
       on leur donne un fond de verre qui disparaît une fois la nav opaque. */
    .nav-toggle {
        background: rgba(18, 30, 42, 0.28);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.22);
        transition: background 0.35s ease, border-color 0.35s ease;
    }

    .nav-toggle span {
        background: #fff;
        transition: transform 0.3s ease, opacity 0.2s ease, background 0.35s ease;
    }

    nav.nav--scrolled .nav-toggle {
        background: transparent;
        border-color: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    nav.nav--scrolled .nav-toggle span {
        background: var(--blue-ocean);
    }

    .nav-toggle:active {
        transform: scale(0.92);
    }

    /* Le hamburger est statique, l'overlay du menu est positionné en
       z-index 99 : dans le contexte d'empilement de la nav, l'overlay
       passait donc PAR-DESSUS le bouton. La croix de fermeture était
       recouverte par le voile sombre — invisible et intouchable, sans
       autre issue que de taper un lien. Il faut positionner le bouton
       pour qu'il participe à l'empilement. */
    .nav-toggle {
        position: relative;
        z-index: 100;
    }

    /* Menu plein écran : marges sûres, pas de scroll qui déborde sur la page. */
    .nav-links {
        padding: calc(var(--safe-top) + 4.5rem) 1.5rem calc(var(--safe-bottom) + 2rem);
        gap: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    .nav-links a {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 60px;
        font-size: 1.75rem;
        letter-spacing: 5px;
        padding: 0.6rem 0;
        -webkit-tap-highlight-color: transparent;
    }

    .nav-links a:active {
        color: var(--blue-pastel);
    }

    .genius-link {
        font-size: 1.5rem !important;
        letter-spacing: 4px !important;
        padding: 14px 30px !important;
        min-height: 60px;
    }
}

/* Pendant que le menu est ouvert, la page derrière ne doit pas défiler.
   La classe est posée par data-renderer.js (initHamburgerMenu). */
body.menu-open {
    overflow: hidden;
    touch-action: none;
}

/* ── Téléphone en paysage ────────────────────────────────────────
   Le seuil du menu mobile est en largeur (680px) : un téléphone tourné
   fait 812px de large et retombe donc sur la barre de nav horizontale,
   avec ses libellés de 26px de haut. On leur rend une hauteur de doigt
   sans toucher au desktop, et on écarte le contenu de l'encoche qui est
   alors sur le côté. */
@media (max-height: 500px) and (orientation: landscape) and (hover: none) {
    nav {
        height: 52px;
    }

    .nav-links {
        gap: 1.5rem;
    }

    .nav-links a {
        display: inline-flex;
        align-items: center;
        min-height: var(--tap-min);
        padding-bottom: 0;
    }

    section,
    footer,
    .artist-intro-section {
        padding-left: max(2rem, var(--safe-left));
        padding-right: max(2rem, var(--safe-right));
    }
}

/* ── Footer : cibles confortables et marges sûres sur mobile ─────── */
@media (max-width: 720px) {
    footer {
        padding-left: max(1.25rem, var(--safe-left));
        padding-right: max(1.25rem, var(--safe-right));
        padding-bottom: calc(1.75rem + var(--safe-bottom));
    }

    .footer-col--nav ul {
        gap: 0;
        width: 100%;
        max-width: 260px;
    }

    /* Sans largeur sur le <li>, le lien centré ne fait que la largeur du
       texte : « Génie » offrait 41px de cible au doigt. */
    .footer-col--nav li {
        width: 100%;
    }

    .footer-col--nav a {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: var(--tap-min);
        width: 100%;
        font-size: 1rem;
        border-radius: 8px;
        -webkit-tap-highlight-color: transparent;
    }

    .footer-social {
        gap: 0.5rem;
    }

    .footer-social a {
        width: var(--tap-min);
        height: var(--tap-min);
        -webkit-tap-highlight-color: transparent;
    }

    .footer-social svg {
        width: 20px;
        height: 20px;
    }

    .footer-bottom {
        margin-top: 2rem;
    }
}

/* ── Bannière spectacle : encoche, ancres et petits écrans ────────
   La bannière est arrivée pendant ce chantier ; ces règles la
   raccordent au reste du travail mobile. */

/* Depuis viewport-fit=cover, un élément fixé à top:0 passe sous la barre
   d'état. On fait porter l'encoche à --banner-height : la hauteur de la
   bannière, la fin de son animation de déroulé et le décalage de la nav
   (top: var(--banner-height)) suivent tous automatiquement. */
:root {
    --banner-height: calc(44px + var(--safe-top));
}

#event-banner {
    padding-top: var(--safe-top);
}

#event-banner a {
    padding-left: max(1rem, var(--safe-left));
    padding-right: max(1rem, var(--safe-right));
}

/* Une ancre (#albums, #social depuis le footer) amenait sa cible juste
   sous le bord haut, c'est-à-dire cachée derrière la bannière et la nav. */
html {
    scroll-padding-top: calc(var(--banner-height) + var(--nav-height) + 0.5rem);
}

@media (max-width: 680px) {

    /* Sur 375px il ne restait que 179px de fenêtre au message qui défile,
       124px sur un écran de 320px : on lit trois mots à la fois. On
       resserre tout ce qui l'entoure pour lui rendre de la place. */
    #event-banner a {
        gap: 0.55rem;
        padding-left: max(0.85rem, var(--safe-left));
        padding-right: max(0.85rem, var(--safe-right));
    }

    #event-banner .event-banner-badge {
        font-size: 0.62rem;
        letter-spacing: 1.5px;
        padding: 2px 7px;
    }

    #event-banner .event-banner-text {
        font-size: 0.8rem;
    }

    #event-banner .event-banner-cta {
        font-size: 0.75rem;
    }

    /* Menu ouvert : la nav passe au-dessus de la bannière (z-index 101),
       sinon le bandeau rose flotte par-dessus l'overlay sombre et reste
       cliquable au-dessus du menu. Élever la nav plutôt que l'overlay
       garde le hamburger accessible : il est enfant de la nav. */
    nav.nav--open {
        z-index: 102;
    }
}

/* Sous 400px, la pastille « SHOW » est ce qu'on peut sacrifier : elle est
   décorative, le message dit déjà qu'il s'agit d'un spectacle, alors que
   l'appel à l'action porte le clic. */
@media (max-width: 360px) {
    #event-banner .event-banner-badge {
        display: none;
    }
}