/* Montserrat font loaded via functions.php preload for better LCP */
    
    :root {
        --gold-primary: #D7BF81;
        --gold-dark: #B8860B;
        --gold-light: rgba(197, 157, 58, 0.1);
        --gold-medium: rgba(197, 157, 58, 0.3);
        --gold-bright: #D7BF81;
        
        /* Nouvelles couleurs allégées */
        --white-pure: #ffffff;
        --white-soft: rgba(255, 255, 255, 0.95);
        --gray-light: rgba(255, 255, 255, 0.12);
        --gray-medium: rgba(255, 255, 255, 0.25);
        --black-soft: rgba(0, 0, 0, 0.6);
        --black-light: rgba(0, 0, 0, 0.3);

        /* HEADER HEIGHT: the single source of truth is --pm-header-h, defined
           in assets/design-system.css (loaded first, sitewide). The header is
           non-sticky and in-flow; `.main-nav { height: var(--pm-header-h) }`
           below binds the rendered header to that token, and every hero
           `calc(100vh - var(--pm-header-h))` / page `padding-top:
           var(--pm-header-h)` reads the SAME token — so header-height ===
           clearance by construction and no white gap can open under the
           header on any page. Newsbar removed 2026-06-13 ⇒ --pm-newsletter-h
           is 0 there. To change the header height, edit design-system.css. */
    }
    
    /* RESET OPTIMISÉ */
    * {
        box-sizing: border-box;
    }
    
    html {
        background: #0d0d0d;
        margin: 0;
        padding: 0;
        /* iPhone Dynamic Island / notch — fill safe area with site header color (anthracite) */
        background-color: #0d0d0d;
    }

    body {
        background: #fff;
        margin: 0;
        padding: 0;
    }

    /* ── iPhone Dynamic Island / Notch / Safe-Area ──
       Ensures the status bar area and safe-area insets
       are filled with the site header color (#0d0d0d),
       not white. Works with viewport-fit=cover.
       Also handles landscape left/right safe areas for
       content not to go under the Dynamic Island. */
    @supports (padding-top: env(safe-area-inset-top)) {
        /* Header: extend background behind the status bar / Dynamic Island */
        .piano-header {
            padding-top: env(safe-area-inset-top, 0px);
        }

        /* Landscape mode: prevent content from going under the
           Dynamic Island / sensor housing on left/right edges */
        body {
            padding-left: env(safe-area-inset-left, 0px);
            padding-right: env(safe-area-inset-right, 0px);
        }

        /* Header must still span full width in landscape */
        .piano-header {
            padding-left: env(safe-area-inset-left, 0px);
            padding-right: env(safe-area-inset-right, 0px);
        }
    }
    
    /* MASQUER BLOCKSY */
    .site-header, #header, .ct-header,
    .site-footer, #footer, .ct-footer { 
        display: none !important; 
    }
    
    /* FIX SPÉCIFIQUE PAGE EXPLORE */
    body.page-id-1077 .entry-title,
    body.page-id-1077 .entry-header,
    body.page-id-1077 article > h1:first-child,
    body.page-id-1077 article > h2:first-child,
    .page-template-default.page-explore h1:not(.brand-text .brand-name),
    .page-template-default.page-explore h2:not(.brand-text .brand-name) {
        position: absolute !important;
        left: -99999px !important;
        top: -99999px !important;
        width: 1px !important;
        height: 1px !important;
    }
    
    /* =========================================================
       LIMITE CLAIRE DU HEADER - RIEN NE PASSE EN DESSOUS
       Header = 140px (32px top-bar + 108px main-nav)
       Tout contenu DOIT commencer APRÈS cette limite
       ========================================================= */

    body {
        padding-top: 0;
    }

    /* ═══════════════════════════════════════════════════════════════════════
       HEADER → CONTENT GAP FIX (site-wide)
       The custom .piano-header is non-sticky and IN FLOW, so it already owns
       the top edge of every page. Blocksy ADDITIONALLY pads the content
       wrapper with padding-top: var(--theme-content-vertical-spacing) (50-60px)
       — which opened a dark band between the header and the first section
       (hero) on EVERY page except Learn, which zeroed it locally. This
       generalises the Learn fix to the whole site: kill ONLY the TOP content
       spacing; bottom spacing is preserved (footer breathing room intact).
       The hero now butts straight under the navbar at every breakpoint.
       ═══════════════════════════════════════════════════════════════════════ */
    #main.site-main,
    .site-main,
    .ct-main-content,
    #main-container > #main,
    #main-container > main {
        padding-top: 0 !important;
        margin-top: 0 !important;
        --theme-content-vertical-spacing: 0 !important;
    }
    /* Belt-and-braces: Blocksy injects the top pad via this attribute hook. */
    [data-vertical-spacing*="top"] {
        padding-top: 0 !important;
    }

    /* Pages whose body content lives in .entry-content (no full-bleed hero):
       the in-flow header already clears them, so NO extra top padding — a
       var(--pm-header-h) padding here would re-open the very gap we just
       closed. A small, fixed breathing space keeps text off the navbar. */
    body:not(.home):not(.page-template-default) .entry-content,
    body.single .entry-content {
        padding-top: 0;
    }

    /* =========================================================
       HEROES : Position sous le header, JAMAIS dessous
       ========================================================= */
    .entry-content > *:first-child,
    .hero-section,
    .page-hero {
        margin-top: 0 !important;
        position: relative;
    }

    /* Les 3 HEROES principaux - padding-top = hauteur header */
    .pianomode-hero-explore,
    .pianomode-hero-listen-play,
    .pianomode-hero-learn {
        position: relative;
        margin-top: 0 !important;
        /* Le padding-top est géré dans chaque fichier hero CSS */
    }
    
    /* HEADER PRINCIPAL — NON-STICKY, scrolls away with the page. */
    .piano-header {
        position: relative;
        width: 100%;
        height: auto;
        font-family: "Montserrat", sans-serif;
        z-index: 20;
        /* WHITE-GAP FIX (iPhone Safari only): the header's dark colour came
           ONLY from its children (.top-bar / .main-nav). The element itself
           was transparent, so the `padding-top: env(safe-area-inset-top)`
           band added under the notch (≈47px on notched iPhones, 0 on Android)
           showed the white <body> through — a white strip at the top of the
           header on iPhone Safari and nowhere else. Painting the header dark
           makes the safe-area band (and any sub-pixel seam) match the chrome.
           NEVER remove this background. */
        background: #0d0d0d;
    }

    .piano-header::after { content: none; }

    /* TOP BAR — REFINED 2026 NEWSLETTER STRIP
       Editorial dark base with a soft gold under-glow. Type sits at
       sentence-case fluid scale, letter-spaced, single-line marquee with
       dot separators and a subtle breathing tint on the active item. */
    .top-bar {
        background:
            radial-gradient(120% 200% at 50% -10%, rgba(215, 191, 129, 0.10), transparent 55%),
            linear-gradient(90deg,
                #08070a 0%,
                #0d0c10 30%,
                #15120c 50%,
                #0d0c10 70%,
                #08070a 100%);
        padding: 0 clamp(12px, 3vw, 28px);
        text-align: center;
        font-family: "Montserrat", "Inter", system-ui, sans-serif;
        font-size: clamp(11px, 1.15vw, 13px);
        font-weight: 500;
        letter-spacing: clamp(0.4px, 0.12vw, 0.9px);
        text-transform: none;
        color: rgba(245, 238, 217, 0.88);
        height: clamp(34px, 4.6vw, 42px);
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 0;
        position: relative;
        overflow: hidden;
        white-space: nowrap;
        cursor: pointer;
        transition: color 0.3s cubic-bezier(0.22, 1, 0.36, 1),
                    background 0.3s cubic-bezier(0.22, 1, 0.36, 1);
        border-bottom: 1px solid rgba(215, 191, 129, 0.18);
    }
    /* Hairline gold thread under the strip — subtle 2026 detail. */
    .top-bar::after {
        content: '';
        position: absolute;
        left: 0; right: 0; bottom: 0;
        height: 1px;
        background: linear-gradient(90deg,
            transparent 0%,
            rgba(215, 191, 129, 0.35) 50%,
            transparent 100%);
        pointer-events: none;
    }
    .top-bar:focus-visible {
        outline: 2px solid var(--gold-primary);
        outline-offset: -2px;
    }
    .pm-newsbar-track {
        display: inline-flex;
        align-items: center;
        flex-wrap: nowrap;
        white-space: nowrap;
        gap: clamp(36px, 5vw, 72px);
        padding-left: clamp(36px, 5vw, 72px);
        animation: pmNewsbarScroll 220s linear infinite;
        will-change: transform;
    }
    .top-bar:hover .pm-newsbar-track,
    .top-bar:focus-within .pm-newsbar-track { animation-play-state: paused; }
    .pm-newsbar-item {
        display: inline-flex;
        align-items: center;
        gap: clamp(10px, 1.4vw, 16px);
        position: relative;
    }
    /* Dot separator between items — a tiny gold diamond. The first item
       in each pass keeps no leading dot (handled via :first-child). */
    .pm-newsbar-item::before {
        content: '';
        display: inline-block;
        width: 4px; height: 4px;
        margin-right: clamp(28px, 4vw, 56px);
        background: rgba(215, 191, 129, 0.55);
        transform: rotate(45deg);
        flex: 0 0 4px;
    }
    .pm-newsbar-track > .pm-newsbar-item:first-child::before { display: none; }
    /* Music note — refined as a subtle accent, smaller, less prominent. */
    .pm-newsbar-note {
        color: var(--gold-primary);
        opacity: 0.7;
        font-size: 0.95em;
        line-height: 1;
        font-weight: 400;
    }
    .pm-newsbar-text {
        color: rgba(245, 238, 217, 0.88);
        font-weight: 500;
        font-feature-settings: "ss01" 1;
    }
    .top-bar:hover .pm-newsbar-text { color: #fff; }
    .pm-newsbar-sr-only {
        position: absolute;
        width: 1px; height: 1px;
        padding: 0; margin: -1px;
        overflow: hidden; clip: rect(0,0,0,0);
        white-space: nowrap; border: 0;
    }

    @keyframes pmNewsbarScroll {
        from { transform: translateX(0); }
        to   { transform: translateX(-50%); }
    }

    @media (prefers-reduced-motion: reduce) {
        .pm-newsbar-track { animation: none; }
    }
    /* Marquee perceived speed scales with viewport-to-track ratio. On
       narrow screens the same translateX(-100%) animation feels much
       faster because the visible portion of the track moves a larger
       proportion of the viewport every second. We lengthen the duration
       on tablet / mobile so the perceived speed stays comparable to
       desktop. */
    @media (max-width: 1024px) {
        .pm-newsbar-track { animation-duration: 280s; }
    }
    @media (max-width: 768px) {
        .pm-newsbar-track {
            animation-duration: 340s;
            gap: clamp(30px, 5vw, 48px);
            padding-left: clamp(28px, 5vw, 40px);
        }
        .pm-newsbar-item::before { margin-right: clamp(22px, 4vw, 36px); }
    }
    @media (max-width: 480px) {
        .pm-newsbar-track {
            animation-duration: 400s;
            gap: clamp(24px, 5vw, 36px);
            padding-left: clamp(20px, 5vw, 30px);
        }
        .pm-newsbar-item::before { margin-right: clamp(18px, 4vw, 28px); }
    }
    
    /* Effet de brillance dorée qui traverse */
    .top-bar::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 50%;
        height: 100%;
        background: linear-gradient(90deg,
            transparent,
            rgba(215, 191, 129, 0.1),
            rgba(215, 191, 129, 0.2),
            rgba(215, 191, 129, 0.1),
            transparent);
        animation: shimmerTopBar 8s ease-in-out infinite;
        pointer-events: none;
    }

    /* Ligne dorée animée en bas */
    .top-bar::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 1px;
        background: linear-gradient(90deg,
            transparent 0%,
            rgba(215, 191, 129, 0.4) 25%,
            rgba(215, 191, 129, 0.6) 50%,
            rgba(215, 191, 129, 0.4) 75%,
            transparent 100%);
        animation: pulseGoldLine 3s ease-in-out infinite;
    }

    @keyframes shimmerTopBar {
        0% { left: -100%; }
        50% { left: 100%; }
        100% { left: 100%; }
    }

    @keyframes pulseGoldLine {
        0%, 100% { opacity: 0.5; }
        50% { opacity: 1; }
    }
    
    /* SCROLL STATE - TOP BAR DISPARAIT */
    .piano-header.scrolled .top-bar {
        transform: translateY(-32px);
        opacity: 0;
        pointer-events: none;
    }
    
    .main-nav {
        background: linear-gradient(180deg,
            #0a0a0a 0%,
            #101010 55%,
            #161616 100%);

        backdrop-filter: none;
        -webkit-backdrop-filter: none;

        width: 100% !important;
        height: var(--pm-header-h);
        padding: 0;

        display: flex;
        align-items: center;
        justify-content: center;

        transition: height 0.45s cubic-bezier(0.4, 0, 0.2, 1),
                    background 0.45s cubic-bezier(0.4, 0, 0.2, 1),
                    box-shadow 0.45s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        left: 0;
        right: 0;

        /* Single hairline gold separator at the bottom — replaces the prior
           gradient bar + extra glows. */
        border-bottom: 1px solid rgba(215, 191, 129, 0.18);

        /* Soft drop shadow only (no inset highlight, no top edge gold glow) */
        box-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
    }

    .main-nav::before { content: none; }

    /* ───────── OCCASIONAL GOLD SHEEN ─────────
       A single dark-gold wave drifts across the header bar roughly every
       16s, then rests — an eye-catch, never a constant animation. Very low
       opacity so it reads as a subtle shimmer, not a banner. pointer-events
       none + z-index 0 keep it behind (and non-blocking to) the nav. */
    .main-nav::after {
        content: '';
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 0;
        opacity: 0;
        background: linear-gradient(100deg,
            transparent 38%,
            rgba(215, 191, 129, 0.08) 47%,
            rgba(230, 212, 168, 0.16) 50%,
            rgba(215, 191, 129, 0.08) 53%,
            transparent 62%);
        background-size: 220% 100%;
        background-position: 200% 0;
    }
    @media (prefers-reduced-motion: no-preference) {
        .main-nav::after { animation: pmHeaderSheen 16s ease-in-out infinite; }
    }
    @keyframes pmHeaderSheen {
        0%, 80%   { background-position: 200% 0; opacity: 0; }
        84%       { opacity: 1; }
        99%       { opacity: 1; }
        100%      { background-position: -40% 0; opacity: 0; }
    }

    /* 3-column grid: logo locked left, nav links TRULY centered (independent
       of logo / actions widths), search + Sign in locked right. */
    .main-nav .nav-content-wrapper {
        width: 100%;
        /* Full-bleed: no max-width cap, minimal edge inset, so the logo hugs
           the far left and the search + account hug the far right of the
           screen (owner). The nav links stay centered via the grid. */
        max-width: 100%;
        padding: 0 clamp(14px, 1.8vw, 26px);
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        gap: 16px;
        position: relative;
        z-index: 1; /* above the header sheen ::after */
    }
    .main-nav .logo-section    { justify-self: start; }
    .main-nav .nav-container   { justify-self: center; }
    .main-nav .buttons-container { justify-self: end; }

    .home-page .main-nav {
        background: linear-gradient(180deg,
            #0a0a0a 0%,
            #101010 55%,
            #161616 100%);
        border-bottom: 1px solid rgba(215, 191, 129, 0.18);
        width: 100% !important;
        height: var(--pm-header-h);
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* =========================================================
       SCROLL STATE - GLASSMORPHISM MODERNE
       Quand on scroll, le header devient transparent avec blur
       ========================================================= */

    /* Reduce header height when scrolled so no invisible click-blocking zone */
    .piano-header.scrolled {
        height: 60px;
        pointer-events: auto;
    }

    .piano-header.scrolled .main-nav {
        height: 60px;
        padding: 0;
        /* translateY(-32px) removed with the newsbar — it used to pull the
           nav up over the (now-gone) marquee and would otherwise lift the
           bar, briefly exposing a strip under it. */
        transform: none;

        background: linear-gradient(180deg,
            rgba(15, 15, 15, 0.75) 0%,
            rgba(20, 20, 20, 0.65) 50%,
            rgba(25, 25, 25, 0.55) 100%);

        backdrop-filter: blur(20px) saturate(180%);
        -webkit-backdrop-filter: blur(20px) saturate(180%);

        border-bottom: 1px solid rgba(215, 191, 129, 0.25);

        box-shadow:
            0 8px 32px rgba(0, 0, 0, 0.3),
            0 1px 0 rgba(255, 255, 255, 0.05) inset,
            0 -1px 0 rgba(0, 0, 0, 0.1) inset;

        width: 100% !important;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .piano-header.scrolled .main-nav::before,
    .piano-header.scrolled .main-nav::after { content: none; }

    .logo-section {
        display: flex;
        align-items: center;
        gap: 14px;
        flex-shrink: 0;
        min-height: 64px;
    }

    /* Subtle desktop offset to keep brand block from the very edge — the
       previous 50px translateX was excessive on the new shorter header. */
    @media (min-width: 1025px) {
        .logo-section {
            /* No offset — the brand block sits at the far left edge (owner). */
            transform: none;
        }
    }

    .logo-float {
        transform: translateY(0) scale(1);
        transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        display: flex;
        align-items: center;
    }

    /* Discrete halo visible on hover only — kept but tightened */
    .logo-float::before {
        content: "";
        position: absolute;
        top: -4px;
        left: -4px;
        right: -4px;
        bottom: -4px;
        border: 1px solid var(--gold-primary);
        border-radius: 50%;
        opacity: 0;
        transform: scale(0.85);
        transition: opacity 0.35s ease, transform 0.35s ease;
        pointer-events: none;
    }

    .logo-float:hover {
        transform: translateY(-2px) scale(1.04);
    }

    .logo-float:hover::before {
        opacity: 0.35;
        transform: scale(1.08);
        animation: logoHalo 2.4s ease-in-out infinite;
    }

    @keyframes logoHalo {
        0%, 100% { opacity: 0.35; transform: scale(1.08); }
        50%      { opacity: 0.55; transform: scale(1.14); }
    }

    .logo-float img {
        height: 56px;
        width: auto;
        display: block;
        transition: height 0.45s ease, filter 0.45s ease;
        filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
    }

    .piano-header.scrolled .logo-float img {
        height: 36px;
    }

    .brand-text {
        cursor: pointer;
        transition: transform 0.35s ease;
        outline: none;
        display: flex;
        flex-direction: column;
        align-items: center;       /* horizontal center of the brand-name */
        justify-content: center;   /* vertical center vs the logo */
        text-align: center;
        line-height: 1;
        text-decoration: none;     /* now a real <a> (#32): keep the logo look */
        color: inherit;
    }

    .brand-text:focus:not(:focus-visible) {
        outline: none;
    }
    
    .brand-text:hover {
        transform: translateX(3px);
    }
    
    .brand-text .brand-name {
        font-size: 28px;
        font-weight: 800;
        letter-spacing: 1.2px;
        margin: 0;
        color: var(--white-pure);
        font-family: "Montserrat", sans-serif;
        /* No relief/emboss on the brand title (owner) — flat, clean type. */
        text-shadow: none;
        white-space: nowrap;
        line-height: 1;
        transition: color 0.35s ease, text-shadow 0.35s ease;
    }

    .brand-text .brand-name .piano-letter {
        display: inline-block;
        transition: color 0.35s ease, text-shadow 0.35s ease;
        color: var(--white-pure);
    }

    /* Discreet gold accent on header hover only */
    .piano-header:hover .brand-text .brand-name .piano-letter {
        color: var(--gold-bright);
        text-shadow: 0 0 12px rgba(212, 175, 71, 0.45);
    }

    .piano-header.scrolled .brand-text .brand-name {
        font-size: 24px;
    }

    .brand-text p {
        font-size: 11px;
        letter-spacing: 0.4px;
        text-transform: none;
        font-style: italic;
        color: rgba(255, 255, 255, 0.62);
        margin: 0;
        font-family: "Montserrat", sans-serif;
        white-space: nowrap;
        max-width: 260px;
        transition: color 0.35s ease;
        position: relative;
        line-height: 1.2;
    }

    .piano-header:hover .brand-text p {
        color: rgba(255, 255, 255, 0.88);
    }

    .pm-tagline-char {
        display: inline-block;
        opacity: 1;
        transform: none;
        filter: none;
        white-space: pre;
    }

    .brand-text p.pm-tagline-elegant .pm-tagline-char {
        opacity: 0;
        transform: translateY(6px);
        filter: blur(3px);
        animation: pmTaglineCharIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }

    @keyframes pmTaglineCharIn {
        0%   { opacity: 0; transform: translateY(6px); filter: blur(3px); }
        55%  { opacity: 1; filter: blur(0); }
        100% { opacity: 1; transform: translateY(0); filter: blur(0); }
    }

    .brand-text p.pm-tagline-simple {
        animation: pmTaglineFade 0.45s ease-out both;
    }
    @keyframes pmTaglineFade {
        from { opacity: 0; }
        to   { opacity: 1; }
    }

    @media (prefers-reduced-motion: reduce) {
        .brand-text p.pm-tagline-elegant .pm-tagline-char,
        .brand-text p.pm-tagline-simple {
            opacity: 1 !important;
            transform: none !important;
            filter: none !important;
            animation: none !important;
        }
    }

    .brand-text p.typing,
    .brand-text p.typing::after { animation: none; }
    
    /* SOUS-TITRE CACHÉ AU SCROLL */
    .piano-header.scrolled .brand-text p {
        opacity: 0;
        height: 0;
        margin: 0;
    }
    
    /* NAVIGATION STABILISÉE */
    .nav-container {
        flex-grow: 1;
        display: flex;
        justify-content: center;
        min-height: 60px;
        align-items: center;
    }
    
    .nav-menu {
        display: flex;
        list-style: none;
        align-items: center;
        gap: 35px;
        margin: 0;
        padding: 0;
        height: 60px;
    }
    
    .nav-menu a {
        color: rgba(255, 255, 255, 0.85);
        text-decoration: none;
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 1.8px;
        text-transform: uppercase;
        padding: 10px 16px;
        position: relative;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        font-family: "Montserrat", sans-serif;
        white-space: nowrap;
        border-radius: 8px;
    }

    /* Underline pseudo-element disabled — gold color + background highlight
       carry the hover/active state on their own. */
    .nav-menu a::after { content: none; }

    .nav-menu a:hover {
        color: var(--gold-primary);
        background: rgba(215, 191, 129, 0.08);
    }

    .nav-menu a.active {
        color: var(--gold-primary);
        background: rgba(215, 191, 129, 0.1);
    }
    
    /* MUSICAL STAFF ICON (replaces old MORE button) */
    .nav-more {
        position: relative;
    }

    /* OLD MORE BUTTON - COMMENTED OUT
    .nav-more-trigger {
        display: flex;
        flex-direction: row; /* Colonne pour mettre les points en dessous */
        align-items: center;
        gap: 2px; /* Espace entre MORE et les points */
        cursor: pointer;
        color: var(--white-soft);
        text-decoration: none;
        font-size: 13px;
        font-weight: 600;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        transition: all 0.4s ease;
        font-family: "Montserrat", sans-serif;
        white-space: nowrap;
    }
    
    .nav-more-trigger:hover {
        color: var(--gold-bright);
        transform: translateY(-2px);
        text-shadow: 0 0 12px rgba(212, 175, 71, 0.4);
    }
    
    /* Variables de réglage fin (optionnelles) */
    /* ===============================
   MORE icon — 3 bars "tempo" baseline
   =============================== */

    /* Variables réglage fin */
    :root{
    --more-bars-gap: 2px;            /* espace entre les barres */
    --more-bars-thickness: 2px;      /* épaisseur des barres */
    --more-bars-w1: 2.5px;            /* longue */
    --more-bars-w2: 5.5px;            /* moyenne */
    --more-bars-w3: 9px;             /* courte */
    --more-rot: 90deg;              /* rotation sens inverse */
    --more-offset-x: -10px;            /* micro offset horizontal */
    --more-offset-y: 5px;            /* micro offset vertical (caler avec le E) */
    }

    /* Texte + icône sur la même ligne */
    .nav-more-trigger{
    display:flex;
    align-items:center;  /* calé sur la ligne du "E" de MORE */
    gap:2px;
    line-height:1;
    }

    /* Icône : on aligne à DROITE AVANT rotation → devient BAS après rotation */
    .nav-more-icon{
    position:relative;
    width:16px;  /* hitbox stable */
    height:calc(var(--more-bars-thickness)*3 + var(--more-bars-gap)*2);
    display:flex;
    flex-direction:column;
    align-items:flex-end;                 /* clé du baseline après rotation */
    gap:var(--more-bars-gap);

    transform-origin:right center;        /* pour ne pas déplacer l’icône */
    transform:translate(var(--more-offset-x), var(--more-offset-y)) rotate(var(--more-rot));
    will-change:transform;
    }

    /* Barres */
    .nav-more-icon span{
    display:block;
    height:var(--more-bars-thickness);
    background:var(--white-soft);
    border-radius:999px;
    transition:background .25s ease, transform .25s ease;
    }

    /* largeurs (avant rot) → hauteurs visuelles (après rot) */
    .nav-more-icon span:nth-child(1){ width:var(--more-bars-w1); } /* longue */
    .nav-more-icon span:nth-child(2){ width:var(--more-bars-w2); } /* moyenne */
    .nav-more-icon span:nth-child(3){ width:var(--more-bars-w3); } /* courte */

    /* Hover doré */
    .nav-more:hover .nav-more-icon span{ background:var(--gold-bright); }

    /* Option mobile (un peu plus lisible) */
    @media (max-width:480px){
    :root{
        --more-bars-thickness:2.5px;
        --more-bars-w1:16px;
        --more-bars-w2:12px;
        --more-bars-w3:8px;
        --more-offset-y:1px;
    }
    }


    
    .nav-more-dropdown {
        position: absolute;
        top: calc(100% + 15px);
        left: 50%;
        transform: translateX(-50%);
        min-width: 200px;
        background: rgba(30, 30, 30, 0.95);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-radius: 12px;
        padding: 15px 0;
        opacity: 0;
        visibility: hidden;
        transform: translateX(-50%) translateY(-10px);
        transition: all 0.3s ease;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
        border: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .nav-more:hover .nav-more-dropdown,
    .nav-more-dropdown:hover {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(0);
    }
    
    .nav-more-dropdown::before {
        content: "";
        position: absolute;
        top: -6px;
        left: 50%;
        transform: translateX(-50%);
        width: 12px;
        height: 12px;
        background: rgba(30, 30, 30, 0.95);
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        border-left: 1px solid rgba(255, 255, 255, 0.1);
        transform: translateX(-50%) rotate(45deg);
    }
    
    .nav-more-dropdown a {
        display: block;
        padding: 12px 25px;
        color: rgba(255, 255, 255, 0.9);
        text-decoration: none;
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 1px;
        text-transform: uppercase;
        transition: all 0.3s ease;
        font-family: "Montserrat", sans-serif;
    }
    
    .nav-more-dropdown a:hover {
        background: rgba(197, 157, 58, 0.15);
        color: var(--gold-bright);
        transform: translateX(0px);
    }
    END OF OLD MORE BUTTON COMMENT */

    /* Fait descendre l'ancre sous le header sticky */
    #start-here {
      scroll-margin-top: -100px;
    }
    
    /* BUTTONS CONTAINER */
    .buttons-container {
        flex-shrink: 0;
        min-height: 60px;
        display: flex;
        align-items: center;
        gap: 20px;
    }
    
    /* (Removed translateX(-50px) nudge — the 3-column grid now locks the
       actions cluster to the right edge cleanly.) */

    /* BOUTONS MODERNES - Design contemporain */
    .search-btn,
    .account-btn,
    .burger-btn {
        width: 44px;
        height: 44px;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.05);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.1);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        overflow: hidden;
    }

    /* Effet de brillance au hover */
    .search-btn::before,
    .account-btn::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg,
            transparent,
            rgba(215, 191, 129, 0.2),
            transparent);
        transition: left 0.5s ease;
    }

    .piano-header.scrolled .search-btn,
    .piano-header.scrolled .account-btn,
    .piano-header.scrolled .burger-btn {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.08);
    }

    .search-btn:hover,
    .account-btn:hover {
        background: rgba(215, 191, 129, 0.15);
        border-color: rgba(215, 191, 129, 0.4);
        transform: translateY(-2px);
        box-shadow:
            0 8px 24px rgba(0, 0, 0, 0.2),
            0 0 20px rgba(215, 191, 129, 0.15);
    }

    .search-btn:hover::before,
    .account-btn:hover::before {
        left: 100%;
    }

    .search-btn svg,
    .account-btn svg {
        width: 20px;
        height: 20px;
        stroke: rgba(255, 255, 255, 0.85);
        stroke-width: 2;
        fill: none;
        transition: all 0.3s ease;
        z-index: 1;
    }

    .search-btn:hover svg,
    .account-btn:hover svg {
        stroke: var(--gold-primary);
        transform: scale(1.05);
    }

    /* ───────── SEARCH = bare gold magnifier (no frame) ─────────
       Owner: colour the loupe gold, drop the square rounded button/border,
       leave it standing alone right next to the Sign-in button. These rules
       override the shared framed-button style above. */
    .search-btn,
    .piano-header.scrolled .search-btn {
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        width: 40px;
        height: 44px;
        overflow: visible;
    }
    .search-btn::before { display: none !important; } /* no frame sheen */
    .search-btn svg {
        stroke: var(--pm-gold, #D7BF81);
        width: 23px;
        height: 23px;
    }
    .search-btn:hover {
        background: transparent !important;
        border: 0 !important;
        transform: translateY(-1px);
        box-shadow: none !important;
    }
    .search-btn:hover svg {
        stroke: var(--pm-gold-bright, #E6D4A8);
        transform: scale(1.12);
        filter: drop-shadow(0 0 6px rgba(215, 191, 129, 0.45));
    }
    
    /* BURGER ICON MODERNE - Design élégant */
    .burger-btn {
        display: none;
        flex-direction: column;
        gap: 5px;
        padding: 0;
        background: rgba(255, 255, 255, 0.05) !important;
        backdrop-filter: blur(10px) !important;
        border: 1px solid rgba(215, 191, 129, 0.25) !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
    }

    .burger-line {
        width: 20px;
        height: 2px;
        background: var(--gold-primary);
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        border-radius: 2px;
        transform-origin: center;
        position: relative;
    }

    .burger-btn:hover {
        background: rgba(215, 191, 129, 0.12) !important;
        border-color: rgba(215, 191, 129, 0.5) !important;
        transform: translateY(-2px);
        box-shadow:
            0 8px 24px rgba(0, 0, 0, 0.25),
            0 0 20px rgba(215, 191, 129, 0.15) !important;
    }

    .burger-btn:hover .burger-line {
        box-shadow: 0 0 12px rgba(215, 191, 129, 0.5);
    }

    .burger-btn.active .burger-line:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }

    .burger-btn.active .burger-line:nth-child(2) {
        opacity: 0;
        transform: scaleX(0);
    }

    .burger-btn.active .burger-line:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -5px);
    }

    /* ═══════════ SIGN-IN BUTTON — 2026 light-gold pill ═══════════
       Design-system gold gradient, dark ink, fluid hover (lift + sheen
       sweep + arrow nudge). Sits at the right edge, search icon to its
       left. Light-gold family per the design system tokens. */
    .pm-signin-btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        height: 44px;
        padding: 0 22px;
        border-radius: 100px;
        font-family: "Montserrat", sans-serif;
        font-size: 14px;
        font-weight: 600;
        letter-spacing: 0.01em;
        line-height: 1;
        text-decoration: none;
        white-space: nowrap;
        color: #1b1505;
        background: linear-gradient(135deg,
            var(--pm-gold-bright, #E6D4A8) 0%,
            var(--pm-gold, #D7BF81) 45%,
            var(--pm-gold-dark, #BEA86E) 100%);
        border: 1px solid rgba(245, 237, 214, 0.45);
        box-shadow:
            0 4px 16px rgba(215, 191, 129, 0.22),
            inset 0 1px 0 rgba(255, 255, 255, 0.45);
        position: relative;
        overflow: hidden;
        isolation: isolate;
        transition: transform .3s cubic-bezier(.4,0,.2,1),
                    box-shadow .3s ease, filter .3s ease;
    }
    .pm-signin-btn::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: -1;
        background: linear-gradient(110deg,
            transparent 20%,
            rgba(255, 255, 255, 0.55) 50%,
            transparent 80%);
        transform: translateX(-130%);
        transition: transform .6s ease;
    }
    /* Colour is LOCKED dark ink in every state and under any OS colour-scheme:
       the pill is already gold, so the label/arrow must never turn gold on
       hover, and a browser dark/light theme must not flip it. */
    .pm-signin-btn,
    .pm-signin-btn:link,
    .pm-signin-btn:visited,
    .pm-signin-btn:hover,
    .pm-signin-btn:focus,
    .pm-signin-btn:active { color: #1b1505; }
    .pm-signin-btn:hover {
        transform: translateY(-2px) scale(1.015);
        box-shadow:
            0 12px 30px rgba(215, 191, 129, 0.45),
            0 0 0 1px rgba(245, 237, 214, 0.5) inset,
            inset 0 1px 0 rgba(255, 255, 255, 0.6);
        filter: saturate(1.06) brightness(1.02);
    }
    .pm-signin-btn:hover::before { transform: translateX(130%); }
    .pm-signin-btn:active { transform: translateY(0); }
    .pm-signin-btn:focus-visible {
        outline: 2px solid var(--pm-gold-pale, #F5EDD6);
        outline-offset: 3px;
    }
    .pm-signin-btn__arrow {
        width: 17px;
        height: 17px;
        stroke: currentColor; /* uniform with the label, in every state */
        stroke-width: 2.2;
        fill: none;
        stroke-linecap: round;
        stroke-linejoin: round;
        transition: transform .3s cubic-bezier(.4,0,.2,1);
    }
    .pm-signin-btn:hover .pm-signin-btn__arrow { transform: translateX(3px); }
    /* Slightly tighter on smaller desktops/tablets where it stays visible. */
    @media (max-width: 1180px) and (min-width: 1025px) {
        .pm-signin-btn { padding: 0 18px; font-size: 13px; }
    }
    /* Mobile: search icon is hidden here, so the cluster is Sign in + burger.
       Compact the pill so it never crowds the burger on narrow phones. */
    @media (max-width: 480px) {
        .pm-signin-btn { height: 40px; padding: 0 15px; font-size: 13px; gap: 6px; }
        .pm-signin-btn__arrow { width: 15px; height: 15px; }
        .buttons-container { gap: 12px; }
    }

    /* ═══════════════════ LIGHT THEME (toggle) — site footer ═══════════════════
       Same beige "paper" surface as the header, dark-ink links, deeper-gold
       social + decorative staff. Tokens from the design system. */
    html[data-theme="light"] .pianomode-footer {
        background: linear-gradient(180deg, #ece0bc 0%, #f3ead2 100%);
        border-top: 1px solid var(--pm-chrome-border-strong);
    }
    html[data-theme="light"] .footer-links a,
    html[data-theme="light"] .footer-nav a { color: var(--pm-chrome-text); }
    html[data-theme="light"] .footer-links a:hover,
    html[data-theme="light"] .footer-nav a:hover { color: var(--pm-chrome-accent); }
    html[data-theme="light"] .footer-copyright { color: var(--pm-chrome-text-muted); }
    html[data-theme="light"] .footer-logo a { color: var(--pm-chrome-text); }
    html[data-theme="light"] .pm-social-icon {
        border-color: var(--pm-chrome-border-strong);
        background: var(--pm-chrome-elevated);
        color: var(--pm-chrome-accent);
    }
    html[data-theme="light"] .pm-social-icon:hover { background: rgba(160, 137, 74, 0.14); }
    /* Decorative staff lines + treble clef — deeper gold so they read on beige. */
    html[data-theme="light"] .footer-musical-staff .staff-lines,
    html[data-theme="light"] .footer-musical-staff .treble-clef,
    html[data-theme="light"] .footer-musical-staff .note-complex { color: var(--pm-chrome-accent); }

    /* ═══════════════════ LIGHT THEME (toggle) — site header ═══════════════════
       Beige "paper" nav bar with dark-ink brand + links and deeper-gold
       accents. The Sign-in pill and the logo keep their identity — the beige
       bar is the contrast. Tokens from the design system; !important only
       where the dark base used it. Default theme stays dark. */
    html[data-theme="light"] .piano-header { background: var(--pm-chrome-surface); }
    html[data-theme="light"] .main-nav,
    html[data-theme="light"] .home-page .main-nav {
        background: linear-gradient(180deg, #f7efda 0%, #f1e7cd 55%, #ece0bc 100%);
        border-bottom: 1px solid var(--pm-chrome-border-strong);
        box-shadow: 0 1px 0 rgba(120, 96, 40, 0.10);
    }
    html[data-theme="light"] .brand-text .brand-name .piano-letter { color: var(--pm-chrome-text); }
    html[data-theme="light"] .piano-header:hover .brand-text .brand-name .piano-letter { color: var(--pm-chrome-accent-strong); }
    html[data-theme="light"] .nav-menu a { color: var(--pm-chrome-text); }
    html[data-theme="light"] .nav-menu a:hover,
    html[data-theme="light"] .nav-menu a.active { color: var(--pm-chrome-accent); }
    /* Search loupe keeps its gold identity, deepened for contrast on beige. */
    html[data-theme="light"] .search-btn svg { stroke: var(--pm-chrome-accent); }
    html[data-theme="light"] .search-btn:hover svg { stroke: var(--pm-chrome-accent-strong); }
    /* Burger → deeper gold on beige. */
    html[data-theme="light"] .burger-line { background: var(--pm-chrome-accent); }
    html[data-theme="light"] .burger-btn {
        border-color: var(--pm-chrome-border-strong) !important;
        background: var(--pm-chrome-elevated) !important;
    }
    /* Musical-staff "more" trigger — inline gold strokes deepened to read on beige. */
    html[data-theme="light"] .nav-staff-icon path { stroke: var(--pm-chrome-accent) !important; }
    html[data-theme="light"] .nav-staff-icon ellipse { fill: var(--pm-chrome-accent) !important; }
    /* Scrolled glass → light frosted. */
    html[data-theme="light"] .piano-header.scrolled .main-nav {
        background: rgba(244, 236, 214, 0.82);
        border-bottom-color: var(--pm-chrome-border-strong);
    }

    /* ───────── DESKTOP SEARCH OVERLAY (loupe click) — theme-aware, premium ──
       ONE block: [ loupe · field · round gold submit ]. The field is part of
       the block (transparent) — the ONLY contour is the block's gold border
       (pill). The submit is a perfect circle, sized & inset so it sits
       CONCENTRIC with the pill's right cap (equal gap all round) → it "marries"
       the block seamlessly. Editorial two-tone title + gold flourish. Dark by
       default, beige in light — every colour driven by the --pm-chrome-* tokens. */
    .pm-search-overlay {
        position: fixed;
        inset: 0;
        z-index: 999999;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 24px;
        opacity: 0;
        transition: opacity 0.35s ease;
        background: radial-gradient(125% 125% at 50% 0%, rgba(20, 18, 15, 0.92), rgba(8, 7, 6, 0.97));
        backdrop-filter: blur(22px) saturate(120%);
        -webkit-backdrop-filter: blur(22px) saturate(120%);
    }
    .pm-search-overlay__box { width: 100%; max-width: 640px; text-align: center; }
    /* Title — editorial two-tone (ink/cream + gold emphasis) with a small
       centred gold flourish under it. Reads as "better quality" than a flat line. */
    .pm-search-overlay__eyebrow {
        display: block;
        margin: 0 0 14px;
        font-family: "Montserrat", sans-serif;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.34em;
        text-transform: uppercase;
        color: var(--pm-chrome-accent);
    }
    .pm-search-overlay__title {
        position: relative;
        margin: 0 0 32px;
        font-family: "Fraunces", Georgia, serif;
        font-weight: 300;
        font-style: italic;
        font-size: clamp(32px, 5.4vw, 48px);
        line-height: 1.08;
        letter-spacing: 0.005em;
        color: var(--pm-chrome-text);
    }
    .pm-search-overlay__title em {
        font-style: italic;
        color: var(--pm-chrome-accent);
        /* Centred title: zero the global italic-overhang spacing so "play?"
           stays optically centred (no clip risk — plenty of room around it). */
        margin-inline-end: 0;
        padding-inline-end: 0;
    }
    .pm-search-overlay__title::after {
        content: "";
        display: block;
        width: 62px;
        height: 2px;
        margin: 20px auto 0;
        border-radius: 2px;
        background: linear-gradient(90deg, transparent, var(--pm-chrome-accent), transparent);
        opacity: 0.9;
    }
    /* The single block — transparent fill, gold contour pill (the ONLY outline).
       Heavy !important + appearance:none to defeat Blocksy/WP form defaults
       (otherwise the theme paints a white field box and a square button). */
    .pm-search-overlay form.pm-search-overlay__form,
    .pm-search-overlay .pm-search-overlay__form {
        position: relative;
        display: flex !important;
        align-items: center;
        gap: 12px;
        margin: 0 !important;
        padding: 7px 7px 7px 24px !important;
        background: transparent !important;
        border: 1.5px solid var(--pm-chrome-border-strong) !important;
        border-radius: 100px !important;
        box-shadow: 0 18px 50px rgba(0, 0, 0, 0.30) !important;
        transition: border-color 0.3s ease, box-shadow 0.3s ease;
    }
    .pm-search-overlay .pm-search-overlay__form:focus-within {
        border-color: var(--pm-chrome-accent) !important;
        box-shadow:
            0 18px 50px rgba(0, 0, 0, 0.30),
            0 0 0 4px rgba(215, 191, 129, 0.14) !important;
    }
    .pm-search-overlay__icon {
        flex: 0 0 auto;
        width: 21px; height: 21px;
        stroke: var(--pm-chrome-accent);
        stroke-width: 2; fill: none;
        stroke-linecap: round; stroke-linejoin: round;
        opacity: 0.9;
    }
    /* Field is PART of the block: fully transparent, no border/box (kills the
       "white search box contour" the owner reported). */
    .pm-search-overlay input.pm-search-overlay__input,
    .pm-search-overlay .pm-search-overlay__input {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        width: auto !important;
        height: 48px !important;
        background: transparent !important;
        background-color: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        outline: none !important;
        box-shadow: none !important;
        padding: 0 6px !important;
        margin: 0 !important;
        font-size: 17px !important;
        font-family: "Montserrat", sans-serif !important;
        color: var(--pm-chrome-text) !important;
        -webkit-text-fill-color: var(--pm-chrome-text) !important;
        -webkit-appearance: none !important;
        appearance: none !important;
    }
    .pm-search-overlay .pm-search-overlay__input::placeholder { color: var(--pm-chrome-text-muted) !important; -webkit-text-fill-color: var(--pm-chrome-text-muted) !important; }
    .pm-search-overlay .pm-search-overlay__input:-webkit-autofill {
        -webkit-text-fill-color: var(--pm-chrome-text) !important;
        -webkit-box-shadow: 0 0 0 40px transparent inset !important;
        transition: background-color 9999s ease-in-out 0s;
    }
    /* Round BRILLIANT gold submit — a bright gold coin in both themes. Forced
       48×48 circle (appearance:none + explicit size + radius:50%) so the theme
       can't square it off. Sized & inset to sit CONCENTRIC with the pill's
       right end-cap → seamless marriage. */
    .pm-search-overlay button.pm-search-overlay__submit,
    .pm-search-overlay .pm-search-overlay__submit {
        flex: 0 0 auto !important;
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        border-radius: 50% !important;
        cursor: pointer;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        -webkit-appearance: none !important;
        appearance: none !important;
        background: linear-gradient(140deg, #F6E7B0 0%, #E9D496 45%, #D9C083 100%) !important;
        box-shadow:
            0 5px 16px rgba(215, 191, 129, 0.45),
            inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
        transition: transform 0.25s ease, filter 0.25s ease, box-shadow 0.25s ease;
    }
    .pm-search-overlay .pm-search-overlay__submit:hover { transform: scale(1.07); filter: brightness(1.06); }
    .pm-search-overlay .pm-search-overlay__submit:focus-visible { outline: 2px solid var(--pm-chrome-accent); outline-offset: 3px; }
    .pm-search-overlay .pm-search-overlay__submit svg {
        width: 20px; height: 20px;
        stroke: #2a2008; stroke-width: 2.4; fill: none;
        stroke-linecap: round; stroke-linejoin: round;
    }
    .pm-search-overlay__hint {
        margin: 22px 0 0;
        font-family: "Montserrat", sans-serif;
        font-size: 13px;
        letter-spacing: 0.03em;
        color: var(--pm-chrome-text-muted);
    }
    /* Clickable ESC chip — styled like a <kbd> but it closes the overlay. */
    .pm-search-overlay__hint kbd,
    .pm-search-overlay button.pm-search-overlay__esc,
    .pm-search-overlay .pm-search-overlay__esc {
        font-family: inherit;
        font-size: 12px;
        padding: 2px 8px;
        border-radius: 6px;
        border: 1px solid var(--pm-chrome-border-strong);
        background: var(--pm-chrome-elevated);
        color: var(--pm-chrome-text-soft);
    }
    .pm-search-overlay button.pm-search-overlay__esc {
        cursor: pointer;
        -webkit-appearance: none;
        appearance: none;
        line-height: 1.4;
        transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
    }
    .pm-search-overlay .pm-search-overlay__esc:hover,
    .pm-search-overlay .pm-search-overlay__esc:focus-visible {
        border-color: var(--pm-chrome-accent);
        color: var(--pm-chrome-accent);
        background: rgba(215, 191, 129, 0.14);
        outline: none;
    }
    html[data-theme="light"] .pm-search-overlay {
        background: radial-gradient(125% 125% at 50% 0%, rgba(248, 242, 226, 0.95), rgba(236, 224, 188, 0.97));
    }
    html[data-theme="light"] .pm-search-overlay__form {
        box-shadow: 0 18px 50px rgba(120, 96, 40, 0.16) !important;
    }
    html[data-theme="light"] .pm-search-overlay .pm-search-overlay__form:focus-within {
        box-shadow:
            0 18px 50px rgba(120, 96, 40, 0.16),
            0 0 0 4px rgba(160, 137, 74, 0.16) !important;
    }
    html[data-theme="light"] .pm-search-overlay__submit {
        box-shadow:
            0 5px 16px rgba(160, 137, 74, 0.35),
            inset 0 1px 0 rgba(255, 255, 255, 0.85) !important;
    }

    /* MOBILE MENU AMÉLIORÉ */
    .mobile-menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 320px;
        max-width: 90%;
        height: 100vh;
        background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.95) 0%,
            rgba(240, 240, 240, 0.95) 100%);
        backdrop-filter: blur(25px);
        -webkit-backdrop-filter: blur(25px);
        transition: right 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 999998;
        padding: 30px;
        padding-top: calc(30px + env(safe-area-inset-top, 0px));
        padding-right: calc(30px + env(safe-area-inset-right, 0px));
        padding-bottom: calc(30px + env(safe-area-inset-bottom, 0px));
        overflow-y: auto;
        border: none;
    }
    
    .mobile-menu.active {
        right: 0 !important;
        visibility: visible !important;
    }
    
    .mobile-menu-header {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 50px;
        padding-bottom: 30px;
        border: none;
    }
    
    .mobile-menu-header img {
        height: 60px;
        filter: drop-shadow(0 4px 10px rgba(0,0,0,0.2));
    }
    
    .mobile-search {
        margin-bottom: 32px;
    }

    /* ==========================================================
       Mobile burger search — mirrors the musical staff design
       (slim, gold hairline that grows from center on focus,
       loupe icon + transparent input + submit arrow on ONE row).
       Colours adapted for the white menu background.
       ========================================================== */
    .mobile-search form.pm-mobile-search {
        position: relative;
        display: flex;
        flex-direction: row;
        align-items: center;
        flex-wrap: nowrap;
        gap: 10px;
        margin: 0;
        padding: 6px 2px 8px;
        width: 100%;
        background: transparent;
        border: 0;
        border-bottom: 1px solid rgba(190, 168, 110, 0.30);
        border-radius: 0;
        box-shadow: none;
        transition: border-color .4s cubic-bezier(.22,1,.36,1);
    }
    .mobile-search .pm-mobile-search::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: -1px;
        width: 0;
        height: 1px;
        background: linear-gradient(90deg,
            transparent 0%,
            #BEA86E 20%,
            #D7BF81 50%,
            #BEA86E 80%,
            transparent 100%);
        transform: translateX(-50%);
        transition: width .5s cubic-bezier(.22,1,.36,1);
        pointer-events: none;
    }
    .mobile-search .pm-mobile-search:focus-within { border-bottom-color: transparent; }
    .mobile-search .pm-mobile-search:focus-within::after { width: 100%; }

    .mobile-search .pm-mobile-search-icon {
        display: inline-flex;
        color: #BEA86E;
        opacity: 0.7;
        flex: 0 0 16px;
        width: 16px;
        height: 16px;
        transition: opacity .3s cubic-bezier(.22,1,.36,1);
    }
    .mobile-search .pm-mobile-search:focus-within .pm-mobile-search-icon { opacity: 1; }

    .mobile-search input.pm-mobile-search-input {
        flex: 1 1 auto;
        min-width: 0;
        width: 100%;
        height: 28px;
        background: transparent !important;
        background-color: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        outline: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
        font-family: "Montserrat", sans-serif;
        font-size: 0.92rem;
        font-weight: 400;
        color: #2a2a2a !important;
        letter-spacing: 0.01em;
        caret-color: #BEA86E;
        -webkit-appearance: none;
        color-scheme: light;
        -webkit-text-fill-color: #2a2a2a !important;
    }
    .mobile-search input.pm-mobile-search-input:focus {
        background: transparent !important;
        background-color: transparent !important;
        box-shadow: none !important;
    }
    .mobile-search input.pm-mobile-search-input::placeholder {
        color: rgba(60, 60, 60, 0.45) !important;
        font-weight: 300;
        letter-spacing: 0.02em;
    }

    .mobile-search button.pm-mobile-search-submit {
        flex: 0 0 26px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 26px;
        height: 26px;
        padding: 0;
        margin: 0;
        background: transparent;
        color: #BEA86E;
        border: 0;
        border-radius: 50%;
        box-shadow: none;
        cursor: pointer;
        transition:
            transform .3s cubic-bezier(.22,1,.36,1),
            color .3s cubic-bezier(.22,1,.36,1);
    }
    .mobile-search button.pm-mobile-search-submit:hover {
        color: #D7BF81;
        transform: translateX(2px);
    }
    .mobile-search button.pm-mobile-search-submit:focus-visible {
        outline: 1px solid #BEA86E;
        outline-offset: 3px;
    }
    
    .mobile-nav {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    
    .mobile-nav li {
        margin-bottom: 25px;
    }
    
    .mobile-nav a {
        color: #333;
        text-decoration: none;
        font-size: 16px;
        font-weight: 600;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        font-family: "Montserrat", sans-serif;
        transition: all 0.3s ease;
        display: block;
        padding: 10px 0;
        position: relative;
    }
    
    .mobile-nav a:hover,
    .mobile-nav a.active {
        color: var(--gold-primary);
        transform: translateX(10px);
    }
    
    /* Séparateur dans le menu mobile */
    .mobile-nav-separator {
        height: 1px;
        background: rgba(0, 0, 0, 0.1);
        margin: 20px 0;
    }
    
    .mobile-menu-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.6);
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
        z-index: 999997;
        backdrop-filter: blur(5px);
    }
    
    .mobile-menu-overlay.active {
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* MOBILE MENU — Social Media Links */
    .pm-mobile-social {
        margin-top: 20px;
        padding-top: 20px;
        border-top: 1px solid rgba(0, 0, 0, 0.08);
    }

    .pm-mobile-social-title {
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        color: #888;
        font-family: "Montserrat", sans-serif;
        margin: 0 0 14px;
    }

    .pm-mobile-social-row {
        display: flex;
        align-items: center;
        gap: 14px;
    }

    .pm-mobile-social-row a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: 1.5px solid rgba(0, 0, 0, 0.08);
        background: rgba(0, 0, 0, 0.03);
        color: #666;
        transition: all 0.25s ease;
        text-decoration: none;
    }

    .pm-mobile-social-row a svg {
        color: inherit;
    }
    /* Instagram: stroke-only icon */
    .pm-mobile-social-row a:first-child svg { fill: none; stroke: currentColor; }
    /* TikTok, Facebook, Pinterest: fill-only icons */
    .pm-mobile-social-row a:nth-child(n+2) svg { fill: currentColor; stroke: none; }

    .pm-mobile-social-row a:hover {
        color: #D7BF81;
        border-color: rgba(215, 191, 129, 0.4);
        background: rgba(215, 191, 129, 0.06);
    }

    /* MOBILE ACCOUNT LINK in menu */
    .mobile-nav-account a {
        display: flex !important;
        align-items: center;
        gap: 10px;
        color: var(--gold-primary, #D7BF81);
        font-weight: 700;
    }

    .mobile-nav-account svg {
        flex-shrink: 0;
        stroke: var(--gold-primary, #D7BF81);
        transition: stroke 0.3s ease;
    }

    .mobile-nav-account a:hover,
    .mobile-nav-account a.active {
        color: var(--gold-hover, #BEA86E);
    }

    .mobile-nav-account a:hover svg,
    .mobile-nav-account a.active svg {
        stroke: var(--gold-hover, #BEA86E);
    }

    /* HERO SECTION AVEC DÉGRADÉ AJUSTÉ */
    .hero-immersive {
        position: relative;
        height: 100vh;
        overflow: hidden;
        background: #000;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        margin-top: 0;
        margin-bottom: -100px; /* Chevauche le début de la section suivante pour supprimer la séparation */
        border: none;
        outline: none;
        transform: translateY(-140px); /* Remonte TOUT le hero sous le header transparent (comme page Explore) */
    }
    
    /* Dégradé blanc plus bas pour ne pas cacher le bouton */
    .hero-immersive::after {
        content: "";
        position: absolute;
        bottom: -1px;
        left: 0;
        right: 0;
        height: 200px;
        background: linear-gradient(to top, 
            #ffffff 0%,
            rgba(255, 255, 255, 0.99) 2%,
            rgba(255, 255, 255, 0.95) 8%,
            rgba(255, 255, 255, 0.9) 15%,
            rgba(255, 255, 255, 0.8) 25%,    
            rgba(255, 255, 255, 0.6) 40%,    
            rgba(255, 255, 255, 0.4) 60%,    
            rgba(255, 255, 255, 0.2) 80%,    
            rgba(255, 255, 255, 0.05) 95%,   
            transparent 100%);
        z-index: 3;
        pointer-events: none;
    }
    
    /* IMAGE DU HERO : Passe sous le header pour effet glassmorphism */
    .hero-video {
        position: absolute;
        top: 0; /* Commence en haut du hero (qui est maintenant à 0px du viewport) */
        left: 50%;
        min-width: 100%;
        min-height: 100%; /* Couvre toute la hauteur */
        width: auto;
        height: auto;
        transform: translateX(-50%);
        opacity: 0.7;
        object-fit: cover;
        z-index: 0; /* En arrière-plan */
    }

    .hero-mobile-bg {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 100%;
        background-size: cover;
        z-index: 0; /* En arrière-plan */
        background-position: center;
    }

    .hero-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 100%;
        background: radial-gradient(ellipse at center, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.7) 100%);
        z-index: 1;
    }
    
    /* CONTENU DU HERO : Reste EN DESSOUS du header (protégé) */
    .hero-content {
        position: relative;
        z-index: 10; /* Au-dessus de l'image */
        text-align: center;
        color: #fff;
        padding: 0 20px;
        margin-top: 370px; /* 140px (transform) + 140px (header) + 40px (marge) = JAMAIS sous le header */
        margin-bottom: 200px !important;
    }
    
    .hero-title {
        font-size: clamp(48px, 8vw, 96px);
        font-weight: 900;
        letter-spacing: -2px;
        margin-bottom: 30px;
        color: #fff;
        font-family: "Montserrat", sans-serif;
        line-height: 1.1;
    }
    
    .hero-word {
        display: inline-block;
        opacity: 0;
        animation: fadeInUp 0.6s ease forwards;
        margin: 0 4px;
        color: #fff;
    }
    
    .hero-word:nth-child(1) { animation-delay: 0.5s; }
    .hero-word:nth-child(2) { animation-delay: 0.7s; }
    .hero-word:nth-child(3) { animation-delay: 0.9s; }
    .hero-word:nth-child(4) { animation-delay: 1.1s; }
    .hero-word:nth-child(5) { animation-delay: 1.3s; }
    .hero-word:nth-child(6) { animation-delay: 1.5s; }
    .hero-word:nth-child(7) { animation-delay: 1.7s; }
    .hero-word:nth-child(8) { animation-delay: 1.9s; }
    
    .hero-word span {
        color: var(--gold-primary);
    }
    
    .hero-description {
        font-size: clamp(16px, 2vw, 20px);
        font-weight: 400;
        letter-spacing: 0.5px;
        line-height: 1.6;
        max-width: 800px;
        margin: 0 auto 50px;
        opacity: 0;
        animation: fadeInUp 0.8s ease forwards;
        animation-delay: 2.2s;
        color: #fff;
        font-family: "Montserrat", sans-serif;
    }
    
    @keyframes fadeInUp {
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    /* GET STARTED BUTTON REDESIGN */
    .hero-get-started {
        opacity: 0;
        animation: fadeInUp 0.8s ease forwards;
        animation-delay: 2.1s;
        display: inline-flex;
        align-items: center;
        gap: 15px;
        cursor: pointer;
        padding: 16px 32px;
        background: transparent;
        border-radius: 50px;
        border: 2px solid var(--gold-primary);
        transition: all 0.4s ease;
        position: relative;
        overflow: hidden;
    }
    
    .hero-get-started::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        background: var(--gold-primary);
        border-radius: 50%;
        transform: translate(-50%, -50%);
        transition: width 0.6s ease, height 0.6s ease;
    }
    
    .hero-get-started:hover::before {
        width: 300px;
        height: 300px;
    }
    
    .hero-get-started:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 30px rgba(197, 157, 58, 0.3);
    }
    
    .hero-get-started:hover .get-started-text,
    .hero-get-started:hover .arrow-down svg {
        color: #000;
        stroke: #000;
    }
    
    .get-started-text {
        font-size: 14px;
        font-weight: 700;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: #fff;
        font-family: "Montserrat", sans-serif;
        position: relative;
        z-index: 1;
        transition: color 0.3s ease;
    }
    
    .arrow-down {
        width: 20px;
        height: 20px;
        position: relative;
        z-index: 1;
        animation: arrowBounce 2s ease-in-out infinite;
    }
    
    .arrow-down svg {
        width: 100%;
        height: 100%;
        stroke: #fff;
        stroke-width: 2.5;
        fill: none;
        stroke-linecap: round;
        stroke-linejoin: round;
        transition: stroke 0.3s ease;
    }
    
    @keyframes arrowBounce {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(3px); }
    }
    
    /* RESPONSIVE */
    @media (max-width: 1024px) {
        .nav-menu {
            gap: 25px;
        }
        
        .nav-menu a {
            font-size: 12px;
        }
    }
    
    /* Switch to mobile/tablet layout at 1024px (was 850px). Phones in
       landscape orientation (~896px wide) used to fall in the dead zone
       where the desktop nav + search + account + burger all tried to fit,
       and the rightmost button overflowed the viewport with a white
       flash during scrolled-state transitions. The Musical Staff canvas
       reachable via the burger now covers every navigation need below
       desktop, so we hide the desktop chrome earlier. */
    @media (max-width: 1024px) {
        /* Heroes : padding géré dans leurs fichiers CSS respectifs */
        /* NE PAS mettre padding-top: 0 ici, sinon le contenu passe sous le header */

        .main-nav {
            height: var(--pm-header-h);
            padding: 0 22px;
            max-width: 100%;
            gap: 16px;
        }

        .home-page .main-nav { height: var(--pm-header-h); }

        .piano-header.scrolled .main-nav {
            padding: 0 22px;
        }
        
        .nav-container {
            display: none;
        }
        
        /* Search stays visible at EVERY size (owner: search + account always
           visible, hard right). It is now a bare gold magnifier, so it sits
           cleanly next to the Sign-in pill without crowding the burger. */
        .search-btn {
            display: flex;
        }

        /* (.account-btn is retired — replaced by .pm-signin-btn, which has no
           hide rule and therefore stays visible at all sizes too.) */
        .account-btn {
            display: none !important;
        }
        
        .burger-btn {
            display: flex;
            background: rgba(255, 255, 255, 0.05) !important;
            border: 1px solid rgba(215, 191, 129, 0.3) !important;
        }
        
        .logo-section {
            margin-left: 0;
        }
        
        .logo-float img { 
            height: 40px; 
        }
        
        .piano-header.scrolled .logo-float img {
            height: 35px;
        }
        
        .brand-text .brand-name { 
            font-size: 26px; 
        }
        
        .piano-header.scrolled .brand-text .brand-name {
            font-size: 22px;
        }
        
        .brand-text p { 
            font-size: 9px;
            letter-spacing: 1.2px;
        }
        
        .hero-immersive::after {
            height: 250px;
            background: linear-gradient(to top, 
                rgba(255, 255, 255, 1) 0%,
                rgba(255, 255, 255, 0.98) 5%,
                rgba(255, 255, 255, 0.9) 15%,
                rgba(255, 255, 255, 0.7) 30%,
                rgba(255, 255, 255, 0.5) 50%,
                rgba(255, 255, 255, 0.2) 70%,
                rgba(255, 255, 255, 0.05) 85%,
                transparent 100%);
        }
    }
    
    @media (max-width: 480px) {
        /* Heroes : padding géré dans leurs fichiers CSS respectifs */
        /* NE PAS mettre padding-top: 0 ici, sinon le contenu passe sous le header */

        /* HEADER TRÈS PETIT ÉCRAN FULL WIDTH
           height MUST be auto: this used to be a fixed 100px (newsbar 32 +
           nav 68). The newsbar is gone and .main-nav is now var(--pm-header-h),
           so a fixed 100px left ~32px of the header's #0d0d0d background showing
           BELOW the nav — the black band between header and hero on mobile.
           auto = the header is exactly its content (safe-area + nav). */
        .piano-header {
            height: auto;
        }

        /* Pas de padding sur body mobile - les pages avec hero utilisent transform */
        body {
            padding-top: 0 !important;
        }

        /* In-flow header already clears the content on mobile too — no extra
           top padding (see the site-wide gap fix near the top of this file). */
        body:not(.home):not(.page-template-default) .entry-content,
        body.single .entry-content {
            padding-top: 0 !important;
        }

        .main-nav {
            height: var(--pm-header-h);
            padding: 0;
            width: 100% !important;
        }

        /* Override .home-page .main-nav (higher specificity at base level) */
        .home-page .main-nav {
            height: var(--pm-header-h);
            padding: 0;
        }
        
        .main-nav .nav-content-wrapper {
            padding: 0 20px;
        }
        
        .piano-header.scrolled .main-nav,
        .home-page .piano-header.scrolled .main-nav {
            height: 60px;
            padding: 0;
        }

        .piano-header.scrolled .main-nav .nav-content-wrapper {
            padding: 0 20px;
        }
        
        .brand-text .brand-name { 
            font-size: 22px; 
        }
        
        .brand-text p { 
            display: none; 
        }
        
        .hero-video { 
            display: none; 
        }
        
        .hero-mobile-bg {
            display: block;
        }

        .hero-title {
            font-size: 36px;
        }

        .hero-get-started {
            padding: 14px 26px;
        }

        .get-started-text {
            font-size: 12px;
        }
        
        .burger-btn {
            background: rgba(255, 255, 255, 0.05) !important;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
            border: 1px solid rgba(215, 191, 129, 0.3) !important;
        }
        
        .hero-content {
            margin-top: 240px !important; /* 100px (transform) + 100px (header) + 40px (marge) = JAMAIS sous le header */
        }

        .hero-immersive {
            border: none !important;
            outline: none !important;
            box-shadow: none !important;
            -webkit-appearance: none !important;
            transform: translateY(-100px) !important; /* Remonte sous le header mobile */
            margin-bottom: -80px !important; /* Chevauche le début de la section suivante */
        }
        
        .hero-immersive::after {
            bottom: -3px !important;
            height: 300px !important;
            background: linear-gradient(to top, 
                #ffffff 0%,
                #ffffff 2%,
                rgba(255, 255, 255, 0.98) 8%,
                rgba(255, 255, 255, 0.9) 18%,
                rgba(255, 255, 255, 0.75) 30%,
                rgba(255, 255, 255, 0.6) 45%,
                rgba(255, 255, 255, 0.4) 60%,
                rgba(255, 255, 255, 0.2) 75%,
                rgba(255, 255, 255, 0.05) 90%,
                transparent 100%) !important;
        }
    }

    /* AJUSTEMENTS POUR LE COMPOSANT START JOURNEY */
    .pm-title-section {
        padding-top: 120px !important; /* Espace correct pour ne pas chevaucher le hero */
        margin-top: 0 !important;
    }

    /* Améliorer le contraste du hero overlay */
    .hero-overlay {
        background: radial-gradient(ellipse at center, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.8) 100%) !important;
    }

    /* Assurer que le texte du hero est bien visible */
    .hero-title,
    .hero-description,
    .hero-get-started {
        text-shadow: 0 4px 12px rgba(0,0,0,0.8), 0 2px 4px rgba(0,0,0,0.6) !important;
    }

    /* CORRECTION LISTEN & PLAY - Contenu ne doit JAMAIS passer sous le header */
    .pianomode-hero-content {
        margin-top: 100px !important; /* 150px (transform) + 140px (header) = JAMAIS sous le header */
    }

    .pianomode-hero-badge {
        margin-top: 0 !important; /* Pas de margin supplémentaire sur le badge */
    }

    /* Style pour le nombre d'articles dans les tags */
    .pm-tag-count {
        font-size: 0.75em;
        opacity: 0.7;
        margin-left: 4px;
        font-weight: 400;
    }

    /* Mobile - ajuster */
    @media (max-width: 768px) {
        .pm-title-section {
            padding-top: 80px !important;
        }

        .pm-tag-count {
            font-size: 0.7em;
        }

        /* CORRECTION LISTEN & PLAY MOBILE */
        .pianomode-hero-content {
            margin-top: 80px !important; /* 120px (transform mobile) + 100px (header mobile) */
        }
    }

    /* =========================================================
       FOOTER - Design moderne harmonisé avec le header
       Fond sombre opaque, limite franche dorée, logo cliquable
       ========================================================= */

    .pianomode-footer {
        /* Fond noir solide - IDENTIQUE AU HEADER */
        background: linear-gradient(180deg,
            #1f1f1f 0%,
            #1a1a1a 30%,
            #141414 60%,
            #0d0d0d 100%);

        /* Pas de blur - fond opaque */
        backdrop-filter: none;
        -webkit-backdrop-filter: none;

        padding: 0;
        margin-top: 0;
        position: relative;
        overflow: hidden;
        width: 100%;
        font-family: "Montserrat", sans-serif;

        /* Bordure dorée en haut - limite franche */
        border-top: 1px solid rgba(215, 191, 129, 0.25);

        /* Ombre vers le haut */
        box-shadow:
            0 -4px 30px rgba(0, 0, 0, 0.4),
            0 -1px 0 rgba(215, 191, 129, 0.1) inset;
    }

    /* Effet de lumière ambiante dorée en haut */
    .pianomode-footer::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg,
            transparent 0%,
            rgba(215, 191, 129, 0.3) 20%,
            rgba(215, 191, 129, 0.5) 50%,
            rgba(215, 191, 129, 0.3) 80%,
            transparent 100%);
        opacity: 0.8;
        z-index: 10;
    }

    /* Ligne dorée animée en haut */
    .pianomode-footer::after {
        content: '';
        position: absolute;
        top: -1px;
        left: 0;
        width: 100%;
        height: 3px;
        background: linear-gradient(90deg,
            transparent 0%,
            #BEA86E 15%,
            #D7BF81 35%,
            #E6D4A8 50%,
            #D7BF81 65%,
            #BEA86E 85%,
            transparent 100%);
        z-index: 11;
        box-shadow: 0 0 15px rgba(215, 191, 129, 0.4);
    }

    .footer-container {
        max-width: 1400px;
        margin: 0 auto;
        padding: 50px 60px;
        padding-bottom: calc(50px + env(safe-area-inset-bottom, 0px));
        position: relative;
        z-index: 2;
    }

    /* Structure principale du footer : VERTICAL - Logo en haut, Links au milieu, Portée animée, Copyright en bas */
    .footer-main-row {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        gap: 35px;
    }

    /* Logo PianoMode cliquable centré en haut */
    .footer-logo {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
    }

    .footer-logo a {
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        transition: all 0.3s ease;
    }

    .footer-logo a:hover {
        transform: translateY(-2px);
    }

    /* Logo image */
    .footer-logo-img {
        height: 50px;
        width: auto;
        transition: all 0.3s ease;
        filter: drop-shadow(0 0 10px rgba(215, 191, 129, 0.2));
    }

    .footer-logo a:hover .footer-logo-img {
        filter: drop-shadow(0 0 15px rgba(215, 191, 129, 0.4));
        transform: scale(1.02);
    }

    /* Navigation centrale - centrée */
    .footer-nav {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        margin: 0;
    }

    .footer-links {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 50px;
        list-style: none;
        margin: 0;
        padding: 0;
        flex-wrap: wrap;
    }

    .footer-links li {
        margin: 0;
        padding: 0;
    }

    .footer-links a {
        color: rgba(255, 255, 255, 0.85);
        text-decoration: none;
        font-size: 13px;
        font-weight: 600;
        letter-spacing: 1px;
        text-transform: uppercase;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        font-family: "Montserrat", sans-serif;
        padding: 8px 0;
    }

    .footer-links a::before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 0;
        height: 2px;
        background: linear-gradient(90deg, #BEA86E, #D7BF81, #E6D4A8);
        border-radius: 2px;
        transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .footer-links a:hover {
        color: #D7BF81;
        text-shadow: 0 0 10px rgba(215, 191, 129, 0.3);
    }

    .footer-links a:hover::before {
        width: 100%;
    }

    /* Copyright centré en bas */
    .footer-copyright {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .footer-copyright p {
        color: rgba(255, 255, 255, 0.4);
        font-size: 11px;
        letter-spacing: 1px;
        text-transform: uppercase;
        margin: 0;
        text-align: center;
        font-family: "Montserrat", sans-serif;
    }

    /* =========================================================
       FOOTER SOCIAL MEDIA ICONS
       ========================================================= */
    .pm-social-links {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 18px;
        margin: 8px 0 4px;
    }

    .pm-social-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: 1.5px solid rgba(215, 191, 129, 0.2);
        background: rgba(215, 191, 129, 0.04);
        color: rgba(215, 191, 129, 0.6);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        text-decoration: none;
    }

    .pm-social-icon svg {
        color: inherit;
    }
    /* Instagram: stroke-only icon */
    .pm-social-icon:first-child svg { fill: none; stroke: currentColor; }
    /* TikTok, Facebook, Pinterest: fill-only icons */
    .pm-social-icon:nth-child(n+2) svg { fill: currentColor; stroke: none; }

    .pm-social-icon:hover {
        color: #D7BF81;
        border-color: rgba(215, 191, 129, 0.5);
        background: rgba(215, 191, 129, 0.1);
        transform: translateY(-2px);
        box-shadow: 0 4px 16px rgba(215, 191, 129, 0.15);
    }

    /* =========================================================
       PORTÉE MUSICALE ANIMÉE DU FOOTER
       ========================================================= */
    .footer-musical-staff {
        position: relative;
        width: 100%;
        max-width: 800px;
        height: 80px;
        overflow: hidden;
        margin: 10px auto;
    }

    .footer-musical-staff .staff-lines {
        position: absolute;
        top: 8px;
        left: 0;
        right: 0;
        height: 65px;
        background:
            linear-gradient(transparent 8px, rgba(215, 191, 129, 0.3) 8px, rgba(215, 191, 129, 0.3) 9px, transparent 9px),
            linear-gradient(transparent 23px, rgba(215, 191, 129, 0.3) 23px, rgba(215, 191, 129, 0.3) 24px, transparent 24px),
            linear-gradient(transparent 38px, rgba(215, 191, 129, 0.3) 38px, rgba(215, 191, 129, 0.3) 39px, transparent 39px),
            linear-gradient(transparent 53px, rgba(215, 191, 129, 0.3) 53px, rgba(215, 191, 129, 0.3) 54px, transparent 54px),
            linear-gradient(transparent 68px, rgba(215, 191, 129, 0.3) 68px, rgba(215, 191, 129, 0.3) 69px, transparent 69px);
        opacity: 0.6;
    }

    .footer-musical-staff .treble-clef {
        position: absolute;
        top: 16px;
        left: 30px;
        font-size: 45px;
        color: #D7BF81;
        z-index: 3;
        line-height: 1;
        animation: footerClefBreathing 4s ease-in-out infinite;
        text-shadow: 2px 2px 6px rgba(215, 191, 129, 0.3);
    }

    @keyframes footerClefBreathing {
        0%, 100% {
            transform: scale(1) rotate(-1deg);
            opacity: 0.8;
            filter: drop-shadow(0 3px 10px rgba(215, 191, 129, 0.3));
        }
        50% {
            transform: scale(1.08) rotate(1deg);
            opacity: 1;
            filter: drop-shadow(0 5px 15px rgba(215, 191, 129, 0.5));
        }
    }

    .footer-musical-staff .floating-notes-complex {
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 2;
    }

    .footer-musical-staff .note-complex {
        position: absolute;
        font-size: 20px;
        color: #D7BF81;
        animation: footerNoteMove 14s linear infinite;
        text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
        font-weight: 600;
    }

    .footer-musical-staff .note-complex:nth-child(1) { top: 12px; animation-delay: 0s; left: -50px; animation-duration: 15s; }
    .footer-musical-staff .note-complex:nth-child(2) { top: 28px; animation-delay: 2.5s; left: -50px; animation-duration: 16s; }
    .footer-musical-staff .note-complex:nth-child(3) { top: 42px; animation-delay: 5s; left: -50px; animation-duration: 14s; }
    .footer-musical-staff .note-complex:nth-child(4) { top: 52px; animation-delay: 7.5s; left: -50px; animation-duration: 17s; }
    .footer-musical-staff .note-complex:nth-child(5) { top: 20px; animation-delay: 10s; left: -50px; animation-duration: 13s; }
    .footer-musical-staff .note-complex:nth-child(6) { top: 35px; animation-delay: 1.8s; left: -50px; animation-duration: 18s; }
    .footer-musical-staff .note-complex:nth-child(7) { top: 48px; animation-delay: 4.2s; left: -50px; animation-duration: 15s; }
    .footer-musical-staff .note-complex:nth-child(8) { top: 15px; animation-delay: 6.7s; left: -50px; animation-duration: 16s; }
    .footer-musical-staff .note-complex:nth-child(9) { top: 32px; animation-delay: 9.3s; left: -50px; animation-duration: 14s; }
    .footer-musical-staff .note-complex:nth-child(10) { top: 45px; animation-delay: 3.6s; left: -50px; animation-duration: 17s; }
    .footer-musical-staff .note-complex:nth-child(11) { top: 22px; animation-delay: 8.1s; left: -50px; animation-duration: 15s; }
    .footer-musical-staff .note-complex:nth-child(12) { top: 38px; animation-delay: 11.4s; left: -50px; animation-duration: 16s; }

    @keyframes footerNoteMove {
        0% {
            left: -50px;
            opacity: 0;
            transform: scale(0.7) rotate(-10deg);
        }
        5% {
            opacity: 1;
            transform: scale(1) rotate(0deg);
        }
        15% { transform: scale(1.15) rotate(8deg); }
        30% { transform: scale(0.95) rotate(-5deg); }
        45% { transform: scale(1.1) rotate(3deg); }
        60% { transform: scale(1) rotate(-2deg); }
        75% { transform: scale(1.05) rotate(5deg); }
        90% {
            opacity: 1;
            transform: scale(1) rotate(0deg);
        }
        95% {
            opacity: 0.3;
            transform: scale(0.8) rotate(-8deg);
        }
        100% {
            left: calc(100% + 50px);
            opacity: 0;
            transform: scale(0.7) rotate(-10deg);
        }
    }

    .back-to-top-btn {
        position: fixed;
        bottom: 30px;
        right: 30px;
        width: 50px;
        height: 50px;
        background: transparent;
        border: 2px solid #D7BF81;
        border-radius: 50%;
        cursor: pointer;
        z-index: 999;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        visibility: hidden;
        transform: translateY(20px) scale(0.9);
        box-shadow: 0 4px 15px rgba(215, 191, 129, 0.25);
        backdrop-filter: blur(8px);
        pointer-events: none;
    }

    .back-to-top-btn.visible {
        opacity: 0.7;
        visibility: visible;
        transform: translateY(0) scale(1);
        pointer-events: auto;
    }

    .back-to-top-btn:hover {
        opacity: 1;
        transform: translateY(-3px) scale(1.05);
        box-shadow: 0 6px 20px rgba(215, 191, 129, 0.4);
        background: rgba(215, 191, 129, 0.1);
        border-color: #E8D49B;
    }

    .back-to-top-btn svg {
        width: 20px;
        height: 20px;
        stroke: #D7BF81;
        stroke-width: 2.5;
        fill: none;
    }

    .back-to-top-btn:hover svg {
        stroke: #E8D49B;
    }

    @media (max-width: 1024px) {
        .footer-container {
            padding: 40px 40px;
        }

        .footer-main-row {
            gap: 30px;
        }

        .footer-links {
            gap: 35px;
        }

        .footer-logo-img {
            height: 45px;
        }

        .footer-musical-staff {
            height: 70px;
            max-width: 600px;
        }

        .footer-musical-staff .treble-clef {
            font-size: 40px;
            left: 20px;
        }

        .footer-musical-staff .note-complex {
            font-size: 18px;
        }
    }

    @media (max-width: 768px) {
        .footer-container {
            padding: 35px 20px;
        }

        .footer-main-row {
            gap: 25px;
        }

        .footer-logo-img {
            height: 40px;
        }

        .footer-links {
            gap: 15px;
        }

        .footer-links a {
            font-size: 10px;
        }

        .footer-musical-staff {
            height: 60px;
            max-width: 100%;
        }

        .footer-musical-staff .staff-lines {
            height: 55px;
            background:
                linear-gradient(transparent 6px, rgba(215, 191, 129, 0.3) 6px, rgba(215, 191, 129, 0.3) 7px, transparent 7px),
                linear-gradient(transparent 18px, rgba(215, 191, 129, 0.3) 18px, rgba(215, 191, 129, 0.3) 19px, transparent 19px),
                linear-gradient(transparent 30px, rgba(215, 191, 129, 0.3) 30px, rgba(215, 191, 129, 0.3) 31px, transparent 31px),
                linear-gradient(transparent 42px, rgba(215, 191, 129, 0.3) 42px, rgba(215, 191, 129, 0.3) 43px, transparent 43px),
                linear-gradient(transparent 54px, rgba(215, 191, 129, 0.3) 54px, rgba(215, 191, 129, 0.3) 55px, transparent 55px);
        }

        .footer-musical-staff .treble-clef {
            font-size: 35px;
            left: 15px;
            top: 12px;
        }

        .footer-musical-staff .note-complex {
            font-size: 16px;
        }

        .footer-musical-staff .note-complex:nth-child(1) { top: 10px; }
        .footer-musical-staff .note-complex:nth-child(2) { top: 22px; }
        .footer-musical-staff .note-complex:nth-child(3) { top: 34px; }
        .footer-musical-staff .note-complex:nth-child(4) { top: 42px; }
        .footer-musical-staff .note-complex:nth-child(5) { top: 16px; }
        .footer-musical-staff .note-complex:nth-child(6) { top: 28px; }
        .footer-musical-staff .note-complex:nth-child(7) { top: 38px; }
        .footer-musical-staff .note-complex:nth-child(8) { top: 12px; }
        .footer-musical-staff .note-complex:nth-child(9) { top: 24px; }
        .footer-musical-staff .note-complex:nth-child(10) { top: 36px; }
        .footer-musical-staff .note-complex:nth-child(11) { top: 18px; }
        .footer-musical-staff .note-complex:nth-child(12) { top: 30px; }

        .back-to-top-btn {
            bottom: 16px;
            right: 16px;
            width: 44px;
            height: 44px;
            border-width: 1.5px;
            opacity: 0;
        }

        .back-to-top-btn.visible {
            opacity: 0.6;
        }

        .back-to-top-btn:active {
            opacity: 0.9;
            transform: scale(0.95);
        }

        .back-to-top-btn svg {
            width: 18px;
            height: 18px;
            stroke-width: 2.5;
        }
    }

    @media (max-width: 480px) {
        .back-to-top-btn {
            bottom: 14px;
            right: 14px;
            width: 42px;
            height: 42px;
            border-width: 1.5px;
        }

        .back-to-top-btn.visible {
            opacity: 0.55;
        }

        .back-to-top-btn svg {
            width: 17px;
            height: 17px;
        }
    }