/* ============================================================
   HERO SHELL — header + hero de l'accueil, partagés par les
   pages locales (Nancy, Lunéville, Dijon).
   Extrait de index.css — ne pas éditer ici sans reporter là-bas.
   ============================================================ */
        /* ================================================================
           NAVIGATION
        ================================================================ */
        nav {
            position: fixed;
            top: 0;
            width: 100%;
            z-index: 1000;
            padding: 30px 56px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            transition: padding 0.4s ease, background 0.4s ease;
        }

        nav.scrolled { padding: 20px 56px; }

        .nav-logo {
            font-family: 'Cormorant Garamond', serif;
            text-decoration: none;
            display: flex;
            flex-direction: column;
            gap: 2px;
            opacity: 0;
            transform: translateY(-4px);
            transition: opacity 0.5s ease, transform 0.5s ease, color 0.4s ease;
            pointer-events: none;
            white-space: nowrap;
            line-height: 1;
        }

        .nav-logo.visible {
            opacity: 1;
            transform: translateY(0);
            pointer-events: auto;
        }

        .nav-logo-name {
            font-size: 1rem;
            font-weight: 300;
            letter-spacing: 5px;
            text-transform: uppercase;
        }

        .nav-logo-sub {
            font-size: 9px;
            font-weight: 200;
            letter-spacing: 6px;
            text-transform: uppercase;
            color: rgba(58,24,40,0.45);
        }

        nav ul {
            display: flex;
            gap: 40px;
            list-style: none;
        }

        nav a {
            text-decoration: none;
            font-size: 9.5px;
            letter-spacing: 3.5px;
            text-transform: uppercase;
            font-weight: 300;
            transition: opacity 0.3s;
            position: relative;
        }

        nav a::after {
            content: '';
            position: absolute;
            bottom: -4px;
            left: 0;
            width: 0;
            height: 1px;
            background: currentColor;
            transition: width 0.4s ease;
        }

        nav a:hover { opacity: 1; }
        nav a:hover::after { width: 100%; }

        nav.on-dark .nav-logo { color: rgba(255,255,255,0.82); }
        nav.on-dark a         { color: rgba(255,255,255,0.72); }

        nav.on-cream .nav-logo,
        nav.on-light .nav-logo { color: var(--dark); }
        nav.on-cream a,
        nav.on-light a         { color: var(--dark); }

        /* Hamburger */
        .nav-toggle {
            display: none;
            position: fixed;
            top: 26px;
            right: 28px;
            z-index: 1001;
            background: none;
            border: none;
            cursor: pointer;
            width: 28px;
            flex-direction: column;
            gap: 7px;
            padding: 4px;
        }

        .nav-toggle span {
            display: block;
            height: 1px;
            background: var(--dark);
            transition: all 0.35s ease;
        }

        nav.on-dark .nav-toggle span { background: var(--white); }

        .nav-toggle.open span:nth-child(1) { transform: rotate(45deg) translate(5.5px, 5.5px); }
        .nav-toggle.open span:nth-child(2) { opacity: 0; }
        .nav-toggle.open span:nth-child(3) { transform: rotate(-45deg) translate(5.5px, -5.5px); }

        /* ================================================================
           HERO
        ================================================================ */
        .hero {
            position: relative;
            height: 100vh;
            min-height: 600px;
            overflow: hidden;
            background: var(--ink);
        }

        /* Léger débord haut/bas (30px) : marge de sécurité pour la parallaxe
           JS (translateY), toujours clippée par .hero (overflow:hidden).
           Miroir de la règle équivalente dans index.css. */
        .hero-slides { position: absolute; top: -30px; left: 0; right: 0; height: calc(100% + 60px); }

        .hero-slide {
            position: absolute;
            inset: 0;
            opacity: 0;
            transition: opacity 2.8s ease;
            overflow: hidden;
        }

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

        .slide-blur {
            position: absolute;
            inset: -50px;
            background-size: cover;
            background-position: center;
            filter: blur(32px) brightness(0.38) saturate(0.85);
            animation: kenBurns 26s ease-in-out infinite;
        }

        .hero-slide img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: contain;
            z-index: 1;
            animation: kenBurnsSubtle 26s ease-in-out infinite;
        }

        .hero-placeholder {
            position: absolute;
            inset: 0;
            background: linear-gradient(155deg, #160510 0%, #2e1020 30%, #6b2840 65%, #c98090 100%);
        }

        @keyframes kenBurns       { 0%,100%{transform:scale(1)}   50%{transform:scale(1.09)} }
        @keyframes kenBurnsSubtle { 0%,100%{transform:scale(1)}   50%{transform:scale(1.04)} }

        .hero-grain {
            position: absolute;
            inset: 0;
            z-index: 2;
            pointer-events: none;
            opacity: 0.055;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
            background-size: 200px;
        }

        .hero-overlay {
            position: absolute;
            inset: 0;
            z-index: 3;
            background: linear-gradient(
                to top,
                rgba(15,7,3,0.82) 0%,
                rgba(15,7,3,0.28) 45%,
                rgba(15,7,3,0.14) 100%
            );
        }

        .hero-content {
            display: none; /* masqué sur ordinateur — visible uniquement sur mobile */
            position: absolute;
            bottom: 80px;
            left: 64px;
            z-index: 4;
            opacity: 0;
            transform: translateY(24px);
            transition: opacity 1.4s cubic-bezier(0.16,1,0.3,1), transform 1.4s cubic-bezier(0.16,1,0.3,1);
        }

        .hero-content.reveal { opacity: 1; transform: translateY(0); }

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

        .hero-eyebrow {
            display: block;
            font-size: 10px;
            letter-spacing: 5px;
            text-transform: uppercase;
            color: var(--rose);
            font-weight: 400;
            margin-bottom: 16px;
        }

        .hero-content .hero-name {
            font-family: 'Cormorant Garamond', serif;
            font-size: clamp(4rem, 9vw, 9.5rem);
            font-weight: 300;
            letter-spacing: 8px;
            text-transform: uppercase;
            color: var(--white);
            line-height: 0.92;
            margin-bottom: 22px;
            text-shadow: 0 6px 48px rgba(0,0,0,0.35);
        }

        .hero-rule {
            width: 48px;
            height: 1px;
            background: var(--rose);
            margin-bottom: 16px;
        }

        .hero-tagline {
            font-family: 'Cormorant Garamond', serif;
            font-size: clamp(0.85rem, 1.6vw, 1.2rem);
            font-weight: 300;
            font-style: italic;
            letter-spacing: 6px;
            color: rgba(255,255,255,0.80);
        }

        .hero-categories {
            position: absolute;
            bottom: 86px;
            right: 64px;
            z-index: 4;
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: 10px;
            opacity: 0;
            transform: translateY(24px);
            transition: opacity 1.2s cubic-bezier(0.16,1,0.3,1) 0.25s, transform 1.2s cubic-bezier(0.16,1,0.3,1) 0.25s;
        }

        .hero-categories.reveal { opacity: 1; transform: translateY(0); }

        .hero-cat {
            font-size: 10px;
            letter-spacing: 4px;
            text-transform: uppercase;
            color: rgba(255,255,255,0.65);
            font-weight: 300;
            cursor: pointer;
            transition: color 0.35s;
            background: none;
            border: none;
        }

        .hero-cat:hover { color: rgba(255,255,255,1); }

        .hero-scroll {
            position: absolute;
            bottom: 32px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 4;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            opacity: 0;
            transition: opacity 1s ease 0.5s;
        }

        .hero-scroll.reveal { opacity: 1; }

        .hero-scroll-line {
            width: 1px;
            height: 52px;
            background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.38));
            animation: scrollPulse 2.8s ease-in-out infinite;
        }

        @keyframes scrollPulse {
            0%,100%{ transform:scaleY(1); opacity:1; }
            50%    { transform:scaleY(0.6); opacity:0.4; }
        }

        .hero-arrow {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            z-index: 4;
            background: rgba(255,255,255,0.05);
            border: 1px solid rgba(255,255,255,0.16);
            color: var(--white);
            width: 44px;
            height: 44px;
            border-radius: 50%;
            cursor: pointer;
            font-size: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.35s;
            opacity: 0;
            -webkit-backdrop-filter: blur(10px);`n            backdrop-filter: blur(10px);
        }

        .hero:hover .hero-arrow { opacity: 1; }
        .hero-arrow:hover { background: rgba(255,255,255,0.15); transform: translateY(-50%) scale(1.1); }
        .hero-arrow.prev { left: 22px; }
        .hero-arrow.next { right: 22px; }

/* Pages locales : contrairement a l'accueil (ou le nom est deja dans la nav),
   le bloc titre du hero (H1 local + bouton) doit etre visible sur ordinateur —
   mais en version raffinee et discrete, dans l'esprit epure du site. */
.hero-content { display: block; max-width: 620px; }
.hero-content .hero-eyebrow { font-size: 9px; letter-spacing: 4px; margin-bottom: 18px; }
.hero-content .hero-name {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.8rem, 2.9vw, 2.7rem);
    font-weight: 300;
    letter-spacing: 8px;
    text-transform: uppercase;
    line-height: 1.25;
    color: rgba(255,255,255,0.94);
    margin: 0 0 18px;
}
.hero-content .hero-rule { width: 40px; margin-bottom: 16px; }
.hero-content .hero-tagline { font-size: 0.82rem; letter-spacing: 3px; color: rgba(255,255,255,0.68); }

/* Bouton retour à l'accueil (spécifique aux pages locales) */
.hero-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 26px;
    padding: 10px 24px;
    border: 1px solid rgba(255,255,255,0.30);
    color: rgba(255,255,255,0.82);
    font-size: 8.5px;
    letter-spacing: 3.5px;
    text-transform: uppercase;
    font-weight: 300;
    text-decoration: none;
    transition: border-color 0.4s, background 0.4s;
}
.hero-btn:hover { border-color: var(--rose); background: rgba(255,255,255,0.08); }
h1.hero-name { margin: 0; }

/* Responsive (repris de l'accueil) */
@media (max-width: 900px) {
    nav { padding: 24px 32px; }
    nav.scrolled { padding: 18px 32px; }
    .hero-content { left: 40px; bottom: 64px; }
    .hero-categories { right: 40px; bottom: 70px; }
}
@media (max-width: 640px) {
    .nav-logo { display: none; }
    .nav-toggle { display: flex; }
    #navMenu {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(19,10,5,0.97);
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0;
        z-index: 999;
        padding: 60px 40px;
    }
    #navMenu.open { display: flex; }
    #navMenu.open li { width: 100%; text-align: center; }
    #navMenu.open a {
        display: block;
        color: rgba(255,255,255,0.75);
        font-size: 11px;
        letter-spacing: 5px;
        text-transform: uppercase;
        padding: 16px 0;
        border-bottom: 1px solid rgba(255,255,255,0.06);
        transition: color 0.25s;
    }
    #navMenu.open li:last-child a { border-bottom: none; }
    #navMenu.open a:hover, #navMenu.open a:active { color: var(--rose); }
    .hero { height: 100vh; height: 100svh; min-height: 100vh; }
    .hero-content { display: block; left: 24px; right: 24px; bottom: 44px; }
    .hero-content .hero-eyebrow { font-size: 9px; letter-spacing: 3.5px; margin-bottom: 18px; }
    .hero-content .hero-name { font-size: clamp(1.5rem, 6.5vw, 2rem); letter-spacing: 5px; margin-bottom: 16px; line-height: 1.3; }
    .hero-content .hero-rule { width: 36px; margin-bottom: 14px; }
    .hero-content .hero-tagline { font-size: 0.85rem; letter-spacing: 4px; }
    .hero-btn { margin-top: 22px; padding: 12px 26px; }
    .hero-categories { display: none; }
    .hero-scroll { display: none; }
    .hero-arrow { display: none; }
}