/* 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;
        /* ONE colour everywhere: the reference light gold, hardcoded so no page
           (e.g. a CTA that redefines --pm-gold globally) can ever recolour these
           header icons. Same in dark and light mode, every device. */
        stroke: #D7BF81;
        stroke-width: 2;
        fill: none;
        transition: all 0.3s ease;
        z-index: 1;
    }

    .search-btn:hover svg,
    .account-btn:hover svg {
        stroke: #D7BF81;
        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: #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: #D7BF81;
        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);
    }

    /* ───────── ACCOUNT ICON BUTTON (tablet + mobile) ─────────
       A framed square that mirrors the burger exactly, with the theme's own
       person glyph. It replaces the wide "Account" text pill on tablet and
       below so the right cluster stays narrow and is ALWAYS fully on-screen.
       Hidden on desktop (the text pill shows there instead). Visibility is
       toggled in the responsive blocks. */
    .pm-account-btn {
        display: none;
        width: 44px;
        height: 44px;
        align-items: center;
        justify-content: center;
        padding: 0;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.05);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border: 1px solid rgba(215, 191, 129, 0.25);
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        /* Hardcoded reference light gold (its SVG uses currentColor): immune to
           any page redefining --pm-gold, so the mobile account icon is never the
           wrong yellow again. */
        color: #D7BF81;
        cursor: pointer;
        text-decoration: none;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .pm-account-btn svg {
        width: 22px;
        height: 22px;
        display: block;
    }
    .pm-account-btn:hover {
        background: rgba(215, 191, 129, 0.12);
        border-color: rgba(215, 191, 129, 0.5);
        transform: translateY(-2px);
        box-shadow:
            0 8px 24px rgba(0, 0, 0, 0.25),
            0 0 20px rgba(215, 191, 129, 0.15);
    }
    .pm-account-btn:focus-visible {
        outline: 2px solid var(--pm-gold-pale, #F5EDD6);
        outline-offset: 3px;
    }
    .piano-header.scrolled .pm-account-btn {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.08);
    }

    /* ═══════════ 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;
        }

        /* NO-OVERFLOW LAYOUT (the hard rule: the right buttons must NEVER leave
           the screen, at any width). The desktop grid (1fr auto 1fr) auto-placed
           the actions into the empty centre column once the nav was hidden, and
           a fixed cluster width pushed the burger off-screen on narrow phones.
           Here the wrapper is a plain two-end flex row: the LOGO/brand absorbs
           all the squeeze (it shrinks and ellipsises), while the actions cluster
           never shrinks and stays pinned hard-right, always fully visible. */
        .main-nav .nav-content-wrapper {
            display: flex;
            align-items: center;
            gap: 12px;
            width: 100%;
            max-width: 100%;
            box-sizing: border-box;
            min-width: 0;
        }
        .main-nav .logo-section {
            flex: 0 1 auto;
            min-width: 0;
            overflow: hidden;
            justify-self: auto;
        }
        .main-nav .brand-text { min-width: 0; overflow: hidden; }
        .main-nav .brand-text .brand-name {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .main-nav .buttons-container {
            flex: 0 0 auto;          /* never shrinks */
            margin-left: auto;       /* pinned to the right edge */
            min-width: 0;
            justify-self: auto;
        }

        /* Tablet and below: the wide "Account" text pill is replaced by the
           compact person-icon button (same framed square as the burger), so the
           cluster stays narrow and on-screen. The pill returns on desktop. */
        .pm-signin-btn { display: none !important; }
        .pm-account-btn { display: inline-flex; }

        /* Search loupe is hidden below desktop: search lives inside the burger
           menu panel, so a standalone magnifier here is redundant and only
           crowds the cluster. The actions pair is just the account icon + burger. */
        .search-btn {
            display: none !important;
        }

        /* (.account-btn is the retired legacy icon class; keep it hidden so it
           never doubles up with the new .pm-account-btn.) */
        .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;
        }

        /* Phones: show the logo mark alone (no wordmark) for a clean, consistent
           header. The "PianoMode" wordmark could only fit by truncating to an
           ugly fragment at this width, and the logo already carries the brand.
           The wordmark returns at 481px and up (tablets, desktop). This also
           leaves the actions cluster comfortably clear of the logo. */
        .brand-text {
            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;
        }
    }