/* ============================================================
   BAMBA SOURANG — ÉDITION LUXE
   Palette : encre chaude / ivoire / champagne
   Typographie : Cormorant Garamond (display) · Jost (labels)
   ============================================================ */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    --encre: #100E0B;
    --encre-2: #191612;
    --ivoire: #F3EFE7;
    --creme: #EBE4D8;
    --or: #C2A16B;
    --or-doux: rgba(194, 161, 107, 0.35);
    --or-trace: rgba(194, 161, 107, 0.16);
    --taupe: #9A8D7C;
    --brume: rgba(243, 239, 231, 0.55);

    --serif: 'Cormorant Garamond', Georgia, serif;
    --sans: 'Jost', 'Helvetica Neue', sans-serif;

    --gutter: clamp(24px, 6vw, 96px);
    --ease-lux: cubic-bezier(0.22, 1, 0.36, 1);
}

html { scroll-behavior: smooth; }

body {
    font-family: var(--serif);
    background: var(--encre);
    color: var(--ivoire);
    font-size: 19px;
    line-height: 1.75;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

::selection { background: var(--or); color: var(--encre); }

img { display: block; max-width: 100%; }

/* ---------- Préchargeur ---------- */

.veil {
    position: fixed; inset: 0; z-index: 4000;
    background: var(--encre);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 28px;
    transition: opacity 0.9s var(--ease-lux), visibility 0.9s;
}

.veil.lifted { opacity: 0; visibility: hidden; pointer-events: none; }

/* Marque bamba en masque recolorable — hérite currentColor */
.mark-glyph {
    display: inline-block;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20xmlns%3Ainkscape%3D%22http%3A%2F%2Fwww.inkscape.org%2Fnamespaces%2Finkscape%22%20version%3D%221.1%22%20width%3D%22148.1667%22%20height%3D%22148%22%20viewBox%3D%220%200%20148.1667%20148%22%3E%0A%3Cdefs%3E%0A%3CclipPath%20id%3D%22clip_1%22%3E%0A%3Cpath%20transform%3D%22matrix%281%2C0%2C0%2C-1%2C0%2C148%29%22%20d%3D%22M0%200H148.1667V148H0Z%22%2F%3E%0A%3C%2FclipPath%3E%0A%3C%2Fdefs%3E%0A%3Cg%20clip-path%3D%22url%28%23clip_1%29%22%3E%0A%3Cpath%20transform%3D%22matrix%281%2C0%2C0%2C-1%2C0%2C148%29%22%20d%3D%22M55.22983%2014.74913%2057.52583%2020.81613C85.36483%2012.18213%20115.4748%2026.61313%20125.9458%2054.23913%20136.4138%2081.86013%20123.3398%20112.4131%2096.77283%20124.3981L99.15683%20130.6801C129.0708%20117.4231%20143.9618%2082.83113%20132.2268%2051.85513%20120.4888%2020.88413%2086.41083%204.846133%2055.22983%2014.74913M51.24983%2023.19113%2048.94483%2017.12413C19.03183%2030.37313%204.139833%2064.97413%2015.87783%2095.94513%2027.61283%20126.9161%2061.68683%20142.9581%2092.87583%20133.0551L90.50083%20126.7741C62.65783%20135.4101%2032.62283%20121.1871%2022.15583%2093.56113%2011.69183%2065.94413%2024.67683%2035.17413%2051.24983%2023.19113%22%20fill%3D%22%231d1d1b%22%2F%3E%0A%3Cpath%20transform%3D%22matrix%281%2C0%2C0%2C-1%2C0%2C148%29%22%20d%3D%22M42.43393%2079.16713V76.53213C60.13493%2076.25613%2068.95493%2065.69313%2068.95493%2055.11313%2068.95493%2044.52413%2060.10593%2034.02713%2042.43393%2033.78913V31.15813C61.86293%2031.39313%2071.58993%2043.21513%2071.58993%2055.11313%2071.58993%2067.09013%2061.88793%2078.89113%2042.43393%2079.16713%22%20fill%3D%22%231d1d1b%22%2F%3E%0A%3Cpath%20transform%3D%22matrix%281%2C0%2C0%2C-1%2C0%2C148%29%22%20d%3D%22M42.45053%2080.94883%2040.64753%2080.97383V74.77583L42.40453%2074.75083C59.42053%2074.49183%2067.16953%2064.38783%2067.16953%2055.11283%2067.16953%2045.87083%2059.42053%2035.80083%2042.40453%2035.57083L40.64753%2035.54483V29.35183L42.45053%2029.36883C63.68953%2029.64483%2073.37153%2042.90183%2073.37153%2055.11283%2073.37153%2067.34083%2063.68953%2080.64783%2042.45053%2080.94883%22%20fill%3D%22%231d1d1b%22%2F%3E%0A%3Cpath%20transform%3D%22matrix%281%2C0%2C0%2C-1%2C0%2C148%29%22%20d%3D%22M72.19173%20106.107C67.80873%20110.749%2061.65373%20113.304%2054.84473%20113.304%2046.36473%20113.304%2039.10473%20109.36%2034.91473%20102.469L34.67173%20102.067%2034.88073%20101.641C35.81773%2099.77503%2036.44973%2098.31203%2036.86373%2097.04903L37.55673%2094.99603%2038.46073%2096.96503C40.30873%20101.005%2044.90073%20107.784%2054.84473%20107.784%2061.71573%20107.784%2066.89773%20104.811%2070.25173%2098.94703%2072.97773%2094.18903%2073.69773%2088.81503%2073.69773%2086.38503V79.03803H79.22573V86.38503C79.22573%2094.40603%2076.79273%20101.231%2072.19173%20106.107%22%20fill%3D%22%231d1d1b%22%2F%3E%0A%3Cpath%20transform%3D%22matrix%281%2C0%2C0%2C-1%2C0%2C148%29%22%20d%3D%22M96.01203%2088.12903C101.599%2088.12903%20106.621%2086.36803%20110.548%2083.03103L112.305%2081.53403V88.17503L111.849%2088.50103C107.202%2091.71303%20101.725%2093.41103%2096.01203%2093.41103%2089.80203%2093.41103%2084.02203%2091.36103%2079.73203%2087.64003%2075.19503%2083.69603%2072.68603%2078.09203%2072.68603%2071.87003%2072.68603%2059.47003%2082.71303%2050.11503%2096.01203%2050.11503%20102.067%2050.11503%20107.537%2051.59103%20111.824%2054.38103L112.305%2054.70303V61.32303L110.59%2060.01403C105.592%2056.20003%2099.90103%2055.40503%2096.01203%2055.40503%2087.26803%2055.40503%2077.97103%2061.17203%2077.97103%2071.87003%2077.97103%2082.54603%2087.04603%2088.12903%2096.01203%2088.12903%22%20fill%3D%22%231d1d1b%22%2F%3E%0A%3Cpath%20transform%3D%22matrix%281%2C0%2C0%2C-1%2C0%2C148%29%22%20d%3D%22M111.4222%20113.5465C107.3112%20117.2435%20101.5952%20119.3635%2095.73523%20119.3635%2086.36823%20119.3635%2078.51523%20116.2025%2071.74823%20109.7155L71.09623%20109.0805%2075.16523%20105.3795%2075.74223%20105.9395C81.10823%20111.1795%2087.83623%20113.8355%2095.73523%20113.8355%20104.5472%20113.8355%20113.9612%20108.2145%20113.9612%2092.44053V32.17053H119.4812V92.44053C119.4812%20101.5155%20116.6922%20108.8175%20111.4222%20113.5465%22%20fill%3D%22%231d1d1b%22%2F%3E%0A%3Cpath%20transform%3D%22matrix%281%2C0%2C0%2C-1%2C0%2C148%29%22%20d%3D%22M33.11163%20118.5104%2032.26263%20118.5024V36.52843H37.77863V118.5104Z%22%20fill%3D%22%231d1d1b%22%2F%3E%0A%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20xmlns%3Ainkscape%3D%22http%3A%2F%2Fwww.inkscape.org%2Fnamespaces%2Finkscape%22%20version%3D%221.1%22%20width%3D%22148.1667%22%20height%3D%22148%22%20viewBox%3D%220%200%20148.1667%20148%22%3E%0A%3Cdefs%3E%0A%3CclipPath%20id%3D%22clip_1%22%3E%0A%3Cpath%20transform%3D%22matrix%281%2C0%2C0%2C-1%2C0%2C148%29%22%20d%3D%22M0%200H148.1667V148H0Z%22%2F%3E%0A%3C%2FclipPath%3E%0A%3C%2Fdefs%3E%0A%3Cg%20clip-path%3D%22url%28%23clip_1%29%22%3E%0A%3Cpath%20transform%3D%22matrix%281%2C0%2C0%2C-1%2C0%2C148%29%22%20d%3D%22M55.22983%2014.74913%2057.52583%2020.81613C85.36483%2012.18213%20115.4748%2026.61313%20125.9458%2054.23913%20136.4138%2081.86013%20123.3398%20112.4131%2096.77283%20124.3981L99.15683%20130.6801C129.0708%20117.4231%20143.9618%2082.83113%20132.2268%2051.85513%20120.4888%2020.88413%2086.41083%204.846133%2055.22983%2014.74913M51.24983%2023.19113%2048.94483%2017.12413C19.03183%2030.37313%204.139833%2064.97413%2015.87783%2095.94513%2027.61283%20126.9161%2061.68683%20142.9581%2092.87583%20133.0551L90.50083%20126.7741C62.65783%20135.4101%2032.62283%20121.1871%2022.15583%2093.56113%2011.69183%2065.94413%2024.67683%2035.17413%2051.24983%2023.19113%22%20fill%3D%22%231d1d1b%22%2F%3E%0A%3Cpath%20transform%3D%22matrix%281%2C0%2C0%2C-1%2C0%2C148%29%22%20d%3D%22M42.43393%2079.16713V76.53213C60.13493%2076.25613%2068.95493%2065.69313%2068.95493%2055.11313%2068.95493%2044.52413%2060.10593%2034.02713%2042.43393%2033.78913V31.15813C61.86293%2031.39313%2071.58993%2043.21513%2071.58993%2055.11313%2071.58993%2067.09013%2061.88793%2078.89113%2042.43393%2079.16713%22%20fill%3D%22%231d1d1b%22%2F%3E%0A%3Cpath%20transform%3D%22matrix%281%2C0%2C0%2C-1%2C0%2C148%29%22%20d%3D%22M42.45053%2080.94883%2040.64753%2080.97383V74.77583L42.40453%2074.75083C59.42053%2074.49183%2067.16953%2064.38783%2067.16953%2055.11283%2067.16953%2045.87083%2059.42053%2035.80083%2042.40453%2035.57083L40.64753%2035.54483V29.35183L42.45053%2029.36883C63.68953%2029.64483%2073.37153%2042.90183%2073.37153%2055.11283%2073.37153%2067.34083%2063.68953%2080.64783%2042.45053%2080.94883%22%20fill%3D%22%231d1d1b%22%2F%3E%0A%3Cpath%20transform%3D%22matrix%281%2C0%2C0%2C-1%2C0%2C148%29%22%20d%3D%22M72.19173%20106.107C67.80873%20110.749%2061.65373%20113.304%2054.84473%20113.304%2046.36473%20113.304%2039.10473%20109.36%2034.91473%20102.469L34.67173%20102.067%2034.88073%20101.641C35.81773%2099.77503%2036.44973%2098.31203%2036.86373%2097.04903L37.55673%2094.99603%2038.46073%2096.96503C40.30873%20101.005%2044.90073%20107.784%2054.84473%20107.784%2061.71573%20107.784%2066.89773%20104.811%2070.25173%2098.94703%2072.97773%2094.18903%2073.69773%2088.81503%2073.69773%2086.38503V79.03803H79.22573V86.38503C79.22573%2094.40603%2076.79273%20101.231%2072.19173%20106.107%22%20fill%3D%22%231d1d1b%22%2F%3E%0A%3Cpath%20transform%3D%22matrix%281%2C0%2C0%2C-1%2C0%2C148%29%22%20d%3D%22M96.01203%2088.12903C101.599%2088.12903%20106.621%2086.36803%20110.548%2083.03103L112.305%2081.53403V88.17503L111.849%2088.50103C107.202%2091.71303%20101.725%2093.41103%2096.01203%2093.41103%2089.80203%2093.41103%2084.02203%2091.36103%2079.73203%2087.64003%2075.19503%2083.69603%2072.68603%2078.09203%2072.68603%2071.87003%2072.68603%2059.47003%2082.71303%2050.11503%2096.01203%2050.11503%20102.067%2050.11503%20107.537%2051.59103%20111.824%2054.38103L112.305%2054.70303V61.32303L110.59%2060.01403C105.592%2056.20003%2099.90103%2055.40503%2096.01203%2055.40503%2087.26803%2055.40503%2077.97103%2061.17203%2077.97103%2071.87003%2077.97103%2082.54603%2087.04603%2088.12903%2096.01203%2088.12903%22%20fill%3D%22%231d1d1b%22%2F%3E%0A%3Cpath%20transform%3D%22matrix%281%2C0%2C0%2C-1%2C0%2C148%29%22%20d%3D%22M111.4222%20113.5465C107.3112%20117.2435%20101.5952%20119.3635%2095.73523%20119.3635%2086.36823%20119.3635%2078.51523%20116.2025%2071.74823%20109.7155L71.09623%20109.0805%2075.16523%20105.3795%2075.74223%20105.9395C81.10823%20111.1795%2087.83623%20113.8355%2095.73523%20113.8355%20104.5472%20113.8355%20113.9612%20108.2145%20113.9612%2092.44053V32.17053H119.4812V92.44053C119.4812%20101.5155%20116.6922%20108.8175%20111.4222%20113.5465%22%20fill%3D%22%231d1d1b%22%2F%3E%0A%3Cpath%20transform%3D%22matrix%281%2C0%2C0%2C-1%2C0%2C148%29%22%20d%3D%22M33.11163%20118.5104%2032.26263%20118.5024V36.52843H37.77863V118.5104Z%22%20fill%3D%22%231d1d1b%22%2F%3E%0A%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A") center / contain no-repeat;
}

.veil-mark {
    width: 96px; height: 96px;
    color: var(--or);
    opacity: 0;
    animation: markEnter 1.1s var(--ease-lux) 0.15s forwards;
}

@keyframes markEnter {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.84);
        filter: blur(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

/* Le nom s'écrit lettre à lettre pendant le chargement,
   une fois la marque posée (délais par lettre posés en JS) */
.veil-word {
    font-family: var(--serif);
    font-weight: 300;
    font-size: clamp(24px, 3.6vw, 46px);
    letter-spacing: 0.04em;
    color: var(--ivoire);
    display: flex;
    align-items: baseline;
    gap: 0.32em;
    padding: 0 var(--gutter);
    white-space: nowrap;
}

.veil-word em {
    font-style: italic;
    font-weight: 400;
    color: var(--or);
}

.veil-word .ltr {
    display: inline-block;
    opacity: 0;
    transform: translateY(0.35em);
    filter: blur(6px);
    animation: ltrIn 0.7s var(--ease-lux) forwards;
}

@keyframes ltrIn {
    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

/* ---------- Navigation ---------- */

.lux-nav {
    position: fixed; top: 0; left: 0; right: 0;
    z-index: 1000;
    display: flex; align-items: center; justify-content: space-between;
    padding: 26px var(--gutter);
    transition: background 0.5s var(--ease-lux), padding 0.5s var(--ease-lux),
                border-color 0.5s var(--ease-lux);
    border-bottom: 1px solid transparent;
}

.lux-nav.scrolled {
    background: rgba(16, 14, 11, 0.82);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom-color: var(--or-trace);
    padding-top: 16px; padding-bottom: 16px;
}

.lux-nav .brand {
    font-family: var(--serif);
    font-size: 21px;
    font-weight: 500;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: var(--ivoire);
    text-decoration: none;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 14px;
}

.lux-nav .brand-mark {
    width: 30px; height: 30px;
    flex: none;
    transition: color 0.4s var(--ease-lux);
}

.lux-nav .brand:hover .brand-mark { color: var(--or); }

.lux-nav .brand em {
    font-style: italic;
    color: var(--or);
    letter-spacing: 0.2em;
}

.lux-nav .links { display: flex; gap: clamp(20px, 3.5vw, 48px); align-items: center; }

.lux-nav .links a {
    font-family: var(--sans);
    font-weight: 400;
    font-size: 11px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--brume);
    text-decoration: none;
    position: relative;
    padding-bottom: 4px;
    transition: color 0.4s;
}

.lux-nav .links a::after {
    content: '';
    position: absolute; left: 0; bottom: 0;
    width: 100%; height: 1px;
    background: var(--or);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.5s var(--ease-lux);
}

.lux-nav .links a:hover, .lux-nav .links a.active { color: var(--ivoire); }
.lux-nav .links a:hover::after, .lux-nav .links a.active::after {
    transform: scaleX(1);
    transform-origin: left;
}

.lang-switch {
    display: flex;
    align-items: center;
    gap: 2px;
    padding-left: clamp(4px, 1.5vw, 12px);
    border-left: 1px solid var(--or-trace);
}

.lang-switch button {
    font-family: var(--sans);
    font-weight: 400;
    font-size: 11px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--brume);
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 6px;
    transition: color 0.4s;
}

.lang-switch button:hover { color: var(--ivoire); }
.lang-switch button.active { color: var(--or); }

/* ---------- Hero ---------- */

.lux-hero {
    position: relative;
    height: 100vh; height: 100svh;
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
}

.lux-hero .backdrop {
    position: absolute; inset: 0;
}

.lux-hero .backdrop img {
    width: 100%; height: 100%;
    object-fit: cover;
    animation: kenburns 22s var(--ease-lux) forwards;
    transform-origin: center;
}

@keyframes kenburns {
    from { transform: scale(1.12); }
    to   { transform: scale(1); }
}

.lux-hero .backdrop::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg,
        rgba(16, 14, 11, 0.55) 0%,
        rgba(16, 14, 11, 0.18) 38%,
        rgba(16, 14, 11, 0.22) 62%,
        rgba(16, 14, 11, 0.78) 100%);
}

.lux-hero .crest {
    position: relative; z-index: 5;
    text-align: center;
    padding: 0 var(--gutter);
}

.lux-hero .overline {
    font-family: var(--sans);
    font-weight: 400;
    font-size: 11px;
    letter-spacing: 0.5em;
    text-indent: 0.5em;
    text-transform: uppercase;
    color: var(--or);
    margin-bottom: 34px;
    opacity: 0;
    animation: riseIn 1.4s var(--ease-lux) 0.9s forwards;
}

.lux-hero h1 {
    font-family: var(--serif);
    font-weight: 300;
    font-size: clamp(56px, 11vw, 168px);
    line-height: 0.98;
    letter-spacing: 0.01em;
    color: var(--ivoire);
    opacity: 0;
    animation: riseIn 1.6s var(--ease-lux) 1.15s forwards;
}

.lux-hero h1 em {
    font-style: italic;
    font-weight: 400;
    color: var(--creme);
}

.lux-hero .edition {
    margin-top: 40px;
    display: inline-flex; align-items: center; gap: 20px;
    opacity: 0;
    animation: riseIn 1.4s var(--ease-lux) 1.5s forwards;
}

.lux-hero .edition .rule { width: 56px; height: 1px; background: var(--or-doux); }

.lux-hero .edition span {
    font-family: var(--serif);
    font-style: italic;
    font-size: clamp(17px, 2vw, 22px);
    color: var(--brume);
}

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

.lux-hero .margins {
    position: absolute; z-index: 5;
    bottom: 36px; left: 0; right: 0;
    display: flex; justify-content: space-between; align-items: flex-end;
    padding: 0 var(--gutter);
}

.lux-hero .margins span {
    font-family: var(--sans);
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: rgba(243, 239, 231, 0.4);
}

.lux-hero .cue {
    position: absolute; z-index: 5;
    bottom: 30px; left: 50%;
    width: 1px; height: 64px;
    background: linear-gradient(to bottom, transparent, var(--or));
    overflow: hidden;
}

.lux-hero .cue::after {
    content: '';
    position: absolute; inset: 0;
    background: var(--encre);
    animation: cueDrop 2.4s var(--ease-lux) infinite;
}

@keyframes cueDrop {
    0%   { transform: translateY(0); }
    60%, 100% { transform: translateY(105%); }
}

/* ---------- Ossature commune ---------- */

.wrap { max-width: 1440px; margin: 0 auto; padding: 0 var(--gutter); }

section.chapter { padding: clamp(110px, 15vw, 200px) 0; position: relative; }

.chapter-head { margin-bottom: clamp(48px, 7vw, 96px); }

.kicker {
    display: inline-flex; align-items: center; gap: 18px;
    font-family: var(--sans);
    font-weight: 400;
    font-size: 11px;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: var(--or);
    margin-bottom: 26px;
}

.kicker::before {
    content: '';
    width: 44px; height: 1px;
    background: var(--or-doux);
}

.display {
    font-family: var(--serif);
    font-weight: 300;
    font-size: clamp(38px, 5.4vw, 84px);
    line-height: 1.08;
    letter-spacing: 0.005em;
    color: var(--ivoire);
}

.display em { font-style: italic; font-weight: 400; color: var(--creme); }

.prose {
    font-size: clamp(19px, 1.6vw, 23px);
    line-height: 1.85;
    color: var(--brume);
    max-width: 62ch;
}

.prose + .prose { margin-top: 1.4em; }

/* ---------- Révélations au défilement ---------- */

.reveal {
    opacity: 0;
    transform: translateY(36px);
    transition: opacity 1.2s var(--ease-lux), transform 1.2s var(--ease-lux);
}

.reveal.visible { opacity: 1; transform: translateY(0); }

.reveal-frame { overflow: hidden; position: relative; }

.reveal-frame::after {
    content: '';
    position: absolute; inset: 0;
    background: var(--encre);
    transform: scaleY(1);
    transform-origin: top;
    transition: transform 1.3s var(--ease-lux);
}

.reveal-frame.visible::after { transform: scaleY(0); }

.reveal-frame img {
    transform: scale(1.12);
    transition: transform 1.6s var(--ease-lux);
}

.reveal-frame.visible img { transform: scale(1); }

/* ---------- Préambule ---------- */

.preamble { display: grid; grid-template-columns: 1fr; gap: 40px; max-width: 900px; }

.preamble .lead {
    font-family: var(--serif);
    font-weight: 300;
    font-size: clamp(28px, 3.6vw, 52px);
    line-height: 1.32;
    color: var(--ivoire);
}

.preamble .lead em { font-style: italic; color: var(--or); }

/* ---------- Les chapitres (liste des univers) ---------- */

.folio { border-top: 1px solid var(--or-trace); }

.folio-row {
    display: grid;
    grid-template-columns: 90px 1fr auto;
    align-items: center;
    gap: clamp(16px, 3vw, 48px);
    padding: clamp(14px, 1.6vw, 22px) 0;
    border-bottom: 1px solid var(--or-trace);
    text-decoration: none;
    position: relative;
    transition: padding-left 0.6s var(--ease-lux);
}

.folio-row:hover { padding-left: 18px; }

.folio-row .numeral {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(17px, 1.7vw, 22px);
    color: var(--or);
}

.folio-row .name {
    font-family: var(--serif);
    font-weight: 300;
    font-size: clamp(30px, 4.6vw, 66px);
    line-height: 1.05;
    color: var(--ivoire);
    transition: color 0.5s;
}

.folio-row:hover .name { color: var(--or); }

.folio-row .name em {
    display: block;
    font-size: clamp(15px, 1.5vw, 19px);
    font-style: italic;
    font-weight: 400;
    color: var(--taupe);
    margin-top: 10px;
    letter-spacing: 0.02em;
    transition: color 0.5s;
}

.folio-row:hover .name em { color: var(--brume); }

.folio-row .tally {
    display: flex; align-items: center; gap: 22px;
    color: var(--taupe);
}

.folio-row .row-thumb {
    height: clamp(112px, 13vw, 182px);
    width: auto;
    display: block;
    opacity: 0;
    transform: translateX(14px) scale(0.96);
    transition: opacity 0.5s var(--ease-lux), transform 0.5s var(--ease-lux);
}

.folio-row:hover .row-thumb { opacity: 1; transform: translateX(0) scale(1); }

.folio-row .tally .arrow {
    display: inline-block;
    transition: transform 0.5s var(--ease-lux);
    color: var(--or);
    font-family: var(--serif);
    font-size: 20px;
}

.folio-row:hover .tally .arrow { transform: translateX(10px); }

/* ---------- Citation parallaxe ---------- */

.oracle {
    position: relative;
    min-height: 88vh;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}

.oracle .plate {
    position: absolute;
    inset: -18% 0;
    z-index: 0;
    will-change: transform;
}

.oracle .plate img {
    width: 100%; height: 100%;
    object-fit: cover;
}

.oracle::after {
    content: '';
    position: absolute; inset: 0; z-index: 1;
    background: rgba(16, 14, 11, 0.52);
}

.oracle blockquote {
    position: relative; z-index: 2;
    text-align: center;
    padding: 0 var(--gutter);
    max-width: 1000px;
}

.oracle blockquote p {
    font-family: var(--serif);
    font-weight: 300;
    font-style: italic;
    font-size: clamp(30px, 4.6vw, 66px);
    line-height: 1.25;
    color: var(--ivoire);
}

.oracle blockquote cite {
    display: inline-flex; align-items: center; gap: 18px;
    margin-top: 36px;
    font-family: var(--sans);
    font-style: normal;
    font-size: 11px;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--or);
}

.oracle blockquote cite::before,
.oracle blockquote cite::after {
    content: '';
    width: 40px; height: 1px;
    background: var(--or-doux);
}

/* ---------- Planches éditoriales ---------- */

.plates {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: clamp(20px, 3vw, 48px);
    align-items: start;
}

.plate-card { position: relative; }

.plate-card.span-7 { grid-column: span 7; }
.plate-card.span-5 { grid-column: span 5; margin-top: clamp(60px, 8vw, 140px); }
.plate-card.span-8 { grid-column: 3 / span 8; margin-top: clamp(40px, 6vw, 100px); }
.plate-card.span-6 { grid-column: span 6; }
.plate-card.span-6.late { margin-top: clamp(60px, 8vw, 140px); }

.plate-card img { width: 100%; height: auto; cursor: zoom-in; }

/* ---------- Bande horizontale (la collection) ---------- */

.strip-shell { padding: clamp(110px, 15vw, 200px) 0; background: var(--encre-2); }

.strip-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 32px;
    padding: 0 var(--gutter);
    max-width: 1440px; margin: 0 auto clamp(48px, 6vw, 80px);
}

.strip-hint {
    font-family: var(--sans);
    font-size: 10px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--taupe);
    white-space: nowrap;
    padding-bottom: 14px;
}

.strip {
    display: flex;
    gap: clamp(20px, 3vw, 44px);
    overflow-x: auto;
    padding: 8px var(--gutter) 32px;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    cursor: grab;
}

.strip::-webkit-scrollbar { display: none; }
.strip.dragging { cursor: grabbing; scroll-snap-type: none; }

.strip figure {
    flex: 0 0 auto;
    scroll-snap-align: center;
    width: clamp(280px, 34vw, 560px);
}

.strip figure.tall { width: clamp(220px, 24vw, 380px); }

.strip img {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    cursor: zoom-in;
}

.strip figure.tall img { aspect-ratio: 4 / 5; }

/* ---------- Nocturne ---------- */

.nocturne { background: #0A0908; }

.nocturne .plates { margin-top: clamp(48px, 7vw, 96px); }

/* ---------- Finale / invitation ---------- */

.finale {
    position: relative;
    min-height: 92vh;
    display: flex; align-items: center; justify-content: center;
    text-align: center;
    overflow: hidden;
}

.finale .plate { position: absolute; inset: -15% 0; z-index: 0; will-change: transform; }
.finale .plate img { width: 100%; height: 100%; object-fit: cover; }

.finale::after {
    content: '';
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(180deg, rgba(16,14,11,0.75), rgba(16,14,11,0.45) 50%, rgba(16,14,11,0.85));
}

.finale .crest { position: relative; z-index: 2; padding: 0 var(--gutter); }

.finale h2 {
    font-family: var(--serif);
    font-weight: 300;
    font-size: clamp(40px, 6.5vw, 96px);
    line-height: 1.08;
    color: var(--ivoire);
}

.finale h2 em { font-style: italic; color: var(--creme); }

.finale p {
    margin: 28px auto 48px;
    max-width: 52ch;
    font-size: clamp(17px, 1.6vw, 21px);
    color: var(--brume);
}

.btn-lux {
    display: inline-block;
    font-family: var(--sans);
    font-weight: 400;
    font-size: 11px;
    letter-spacing: 0.36em;
    text-indent: 0.36em;
    text-transform: uppercase;
    color: var(--ivoire);
    text-decoration: none;
    border: 1px solid var(--or-doux);
    padding: 20px 52px;
    position: relative;
    overflow: hidden;
    transition: color 0.5s var(--ease-lux), border-color 0.5s;
    z-index: 1;
}

.btn-lux::before {
    content: '';
    position: absolute; inset: 0;
    background: var(--or);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.55s var(--ease-lux);
    z-index: -1;
}

.btn-lux:hover { color: var(--encre); border-color: var(--or); }
.btn-lux:hover::before { transform: scaleX(1); transform-origin: left; }

.btn-lux.ghost { border-color: rgba(243,239,231,0.25); }

/* ---------- Pied de page ---------- */

.lux-footer {
    border-top: 1px solid var(--or-trace);
    padding: clamp(60px, 8vw, 100px) var(--gutter) 48px;
}

.lux-footer .inner {
    max-width: 1440px; margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 32px;
}

.lux-footer .monogram {
    display: inline-flex;
    color: var(--ivoire);
    text-decoration: none;
    justify-self: center;
    grid-column: 2;
    transition: color 0.4s var(--ease-lux);
}

.lux-footer .monogram .mark-glyph {
    width: 40px; height: 40px;
}

.lux-footer .monogram:hover { color: var(--or); }

.lux-footer .col { display: flex; flex-direction: column; gap: 10px; }
.lux-footer .col.right { align-items: flex-end; text-align: right; }

.lux-footer a, .lux-footer span {
    font-family: var(--sans);
    font-size: 10px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--taupe);
    text-decoration: none;
    transition: color 0.4s;
}

.lux-footer a:hover { color: var(--or); }

.lux-footer .baseline {
    margin-top: 56px;
    text-align: center;
    font-family: var(--serif);
    font-style: italic;
    font-size: 15px;
    color: rgba(154, 141, 124, 0.7);
}

/* ---------- Visionneuse ---------- */

.lux-lightbox {
    position: fixed; inset: 0; z-index: 3000;
    background: rgba(10, 9, 8, 0.96);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden;
    transition: opacity 0.5s var(--ease-lux), visibility 0.5s;
    padding: clamp(20px, 5vw, 80px);
}

.lux-lightbox.active { opacity: 1; visibility: visible; }

.lux-lightbox img {
    max-width: 100%;
    max-height: calc(100vh - 160px);
    object-fit: contain;
    box-shadow: 0 40px 120px rgba(0,0,0,0.6);
}

.lux-lightbox .close {
    position: absolute; top: 28px; right: var(--gutter);
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--brume);
    cursor: pointer;
    background: none; border: none;
    padding: 8px;
    transition: color 0.3s;
}

.lux-lightbox .close:hover { color: var(--or); }

.lux-lightbox .arrow-btn {
    position: absolute; top: 50%;
    transform: translateY(-50%);
    background: none; border: none;
    font-family: var(--serif);
    font-size: 34px;
    color: var(--brume);
    cursor: pointer;
    padding: 20px;
    transition: color 0.3s, transform 0.3s;
}

.lux-lightbox .arrow-btn:hover { color: var(--or); }
.lux-lightbox .prev { left: clamp(8px, 2vw, 32px); }
.lux-lightbox .next { right: clamp(8px, 2vw, 32px); }

.lux-lightbox .legend {
    position: absolute;
    bottom: 30px; left: 50%;
    transform: translateX(-50%);
    max-width: 70ch;
    text-align: center;
    padding: 0 24px;
}

.lux-lightbox .legend .counter {
    font-family: var(--sans);
    font-size: 10px;
    letter-spacing: 0.34em;
    color: var(--or);
    margin-bottom: 8px;
}


/* ---------- Pages Collections ---------- */

.panel {
    position: sticky; top: 0;
    height: 100vh; height: 100svh;
    overflow: hidden;
    display: flex; align-items: flex-end;
}

.panel .plate { position: absolute; inset: 0; }
.panel .plate img { width: 100%; height: 100%; object-fit: cover; }

.panel::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(16,14,11,0.45), rgba(16,14,11,0.1) 45%, rgba(16,14,11,0.82));
}

.panel .plaque {
    position: relative; z-index: 2;
    width: 100%;
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 32px;
    padding: 0 var(--gutter) clamp(48px, 7vh, 88px);
    max-width: 1600px; margin: 0 auto;
    text-decoration: none;
}

.panel .plaque .numeral {
    font-family: var(--serif);
    font-style: italic;
    font-size: clamp(18px, 2vw, 26px);
    color: var(--or);
    margin-bottom: 14px;
}

.panel .plaque h2 {
    font-family: var(--serif);
    font-weight: 300;
    font-size: clamp(40px, 6.5vw, 100px);
    line-height: 1.02;
    color: var(--ivoire);
    transition: color 0.5s;
}

.panel .plaque:hover h2 { color: var(--or); }

.panel .plaque .sub {
    font-family: var(--serif);
    font-style: italic;
    font-size: clamp(16px, 1.7vw, 21px);
    color: var(--brume);
    margin-top: 14px;
}

.panel .plaque .go {
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--ivoire);
    white-space: nowrap;
    display: flex; align-items: center; gap: 14px;
    padding-bottom: 12px;
}

.panel .plaque .go .arrow {
    font-family: var(--serif);
    font-size: 22px;
    color: var(--or);
    transition: transform 0.5s var(--ease-lux);
}

.panel .plaque:hover .go .arrow { transform: translateX(10px); }

/* ---------- Page Série ---------- */

.serie-hero {
    position: relative;
    min-height: 78vh;
    display: flex; align-items: flex-end;
    overflow: hidden;
    padding-bottom: clamp(48px, 7vh, 90px);
}

.serie-hero .plate { position: absolute; inset: 0; }
.serie-hero .plate img { width: 100%; height: 100%; object-fit: cover; animation: kenburns 18s var(--ease-lux) forwards; }

.serie-hero::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(16,14,11,0.5), rgba(16,14,11,0.15) 45%, rgba(16,14,11,0.9));
}

.serie-hero .wrap { position: relative; z-index: 2; width: 100%; }

.serie-hero .numeral {
    font-family: var(--serif);
    font-style: italic;
    font-size: clamp(18px, 2vw, 26px);
    color: var(--or);
    margin-bottom: 16px;
}

.serie-hero h1 {
    font-family: var(--serif);
    font-weight: 300;
    font-size: clamp(46px, 8vw, 130px);
    line-height: 1.0;
    color: var(--ivoire);
}

.serie-hero .sub {
    font-family: var(--serif);
    font-style: italic;
    font-size: clamp(17px, 2vw, 24px);
    color: var(--brume);
    margin-top: 20px;
}

.serie-gallery { padding: clamp(80px, 10vw, 150px) 0; }

/* Colonnes construites en JS à partir des dimensions connues :
   contrairement à `columns`, rien ne se rééquilibre au chargement. */
.masonry {
    display: flex;
    align-items: flex-start;
    gap: clamp(20px, 2.6vw, 40px);
}

.masonry .col {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 2.6vw, 40px);
}

.masonry figure { position: relative; }

.masonry img { width: 100%; height: auto; cursor: zoom-in; }

.serie-nav {
    border-top: 1px solid var(--or-trace);
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.serie-nav a {
    padding: clamp(48px, 7vw, 90px) var(--gutter);
    text-decoration: none;
    transition: background 0.5s;
}

.serie-nav a:hover { background: var(--encre-2); }

.serie-nav a + a { border-left: 1px solid var(--or-trace); text-align: right; }

.serie-nav .tag {
    font-family: var(--sans);
    font-size: 10px;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: var(--or);
    margin-bottom: 14px;
}

.serie-nav .dest {
    font-family: var(--serif);
    font-weight: 300;
    font-size: clamp(24px, 3.4vw, 46px);
    color: var(--ivoire);
    transition: color 0.4s;
}

.serie-nav a:hover .dest { color: var(--or); }

/* ---------- Responsive ---------- */

@media (max-width: 860px) {
    .folio-row .row-thumb { display: none; }

    .plates { grid-template-columns: 1fr 1fr; gap: clamp(10px, 3vw, 20px); }
    .plate-card.span-6 { grid-column: span 1; margin-top: 0; }
    .plate-card.span-6.late { margin-top: clamp(28px, 8vw, 60px); }
    .plate-card.span-7, .plate-card.span-5, .plate-card.span-8 { grid-column: 1 / -1; margin-top: 0; }

    .folio-row { grid-template-columns: 48px 1fr auto; }

    .panel .plaque { flex-direction: column; align-items: flex-start; gap: 20px; }

    .lux-footer .inner { grid-template-columns: 1fr; justify-items: center; text-align: center; }
    .lux-footer .monogram { grid-column: 1; order: -1; }
    .lux-footer .col.right { align-items: center; text-align: center; }

    .duet .prose { max-width: 65ch; }
}

@media (max-width: 640px) {
    .serie-nav { grid-template-columns: 1fr; }
    .serie-nav a + a { border-left: none; border-top: 1px solid var(--or-trace); text-align: left; }
    .lux-hero .margins { display: none; }

    .lux-hero { height: auto; aspect-ratio: 1600 / 1066; }
    .lux-hero .backdrop img { object-fit: contain; animation: none; }

    .lux-lightbox .arrow-btn {
        top: auto;
        bottom: 24px;
        transform: none;
        background: rgba(16, 14, 11, 0.6);
        border: 1px solid rgba(194, 161, 107, 0.35);
        padding: 10px 22px;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }
    .lux-lightbox .prev { left: 25%; right: auto; }
    .lux-lightbox .next { right: 25%; left: auto; }
    .lux-lightbox .legend { bottom: 84px; }

    /* Citation & invitation : sur téléphone la photo entière (contain) ne
       remplit qu'un tiers d'un cadre en vh — d'où de grands vides sombres
       avant/après l'image. On laisse la photo prendre sa hauteur naturelle et
       le texte coule dessous, sans superposition ni recadrage. */
    .oracle { min-height: 0; display: block; }
    .oracle .plate { position: relative; inset: auto; transform: none !important; }
    .oracle .plate img { height: auto; object-fit: unset; display: block; }
    .oracle blockquote { max-width: 100%; padding: 44px var(--gutter) 10px; }

    .finale { min-height: 0; display: block; overflow: visible; }
    .finale .plate { position: relative; inset: auto; transform: none !important; }
    .finale .plate img { height: auto; object-fit: unset; display: block; }
    .finale::after { display: none; }
    .finale .crest { max-width: 100%; padding: 44px var(--gutter) 8px; }

    /* Bande « Fragments choisis » : chaque photo garde son ratio, aucun recadrage */
    .strip img,
    .strip figure.tall img {
        aspect-ratio: auto;
        height: auto;
        object-fit: contain;
    }

    /* Héros de série : la photo prend sa hauteur naturelle (aucun recadrage,
       plus de grand vide sombre d'un cadre en vh) et le titre coule dessous,
       sur le fond sombre plein de la section. Le titre superposé devenait
       illisible sur les photos très texturées ; en flux, la sérif ivoire garde
       un contraste maximal. */
    .serie-hero {
        min-height: 0;
        display: block;
        padding: 0 0 clamp(40px, 9vw, 64px);
        overflow: visible;
    }
    .serie-hero .plate { position: relative; inset: auto; }
    .serie-hero .plate img { height: auto; object-fit: unset; display: block; animation: none; }
    .serie-hero::after { display: none; }
    .serie-hero .wrap {
        position: relative;
        inset: auto;
        padding: clamp(32px, 8vw, 52px) var(--gutter) 0;
    }

    /* Panneaux plein cadre à texte superposé — on montre la photo entière,
       centrée sur le fond sombre de la section (contain), sans recadrage.
       Le scrim et la min-height gardent le texte lisible. */
    .panel .plate { inset: 0; }
    .panel .plate img {
        object-fit: contain;
        object-position: center;
        animation: none;
    }

    .btn-lux {
        font-size: 9px;
        letter-spacing: 0.2em;
        text-indent: 0.2em;
        padding: 16px 24px;
        max-width: 100%;
        overflow-wrap: anywhere;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    html { scroll-behavior: auto; }
    .reveal, .reveal-frame::after { opacity: 1; transform: none; }
}

/* ---------- Studio & Contact ---------- */

.duet {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(48px, 7vw, 120px);
    align-items: start;
}

.duet h3 {
    font-family: var(--serif);
    font-weight: 300;
    font-size: clamp(26px, 3vw, 42px);
    color: var(--ivoire);
    margin-bottom: 20px;
}

.duet h3 em { font-style: italic; color: var(--creme); }

.bases {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(24px, 4vw, 64px);
}

.base-card {
    border: 1px solid var(--or-trace);
    padding: clamp(32px, 4vw, 56px);
}

.base-card .tag {
    font-family: var(--sans);
    font-size: 10px;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--or);
    margin-bottom: 18px;
}

.base-card h3 {
    font-family: var(--serif);
    font-weight: 300;
    font-size: clamp(30px, 3.6vw, 52px);
    color: var(--ivoire);
    line-height: 1.05;
}

.base-card .coords {
    margin-top: 14px;
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--taupe);
}

.base-card .place {
    margin-top: 22px;
    font-family: var(--serif);
    font-style: italic;
    font-size: 17px;
    color: var(--brume);
}

@media (max-width: 860px) {
    .duet, .bases { grid-template-columns: 1fr; }
}

/* ============================================================
   OPTIMISATION MOBILE — passe partagée (nav, pied, titres,
   échelles typo, cibles tactiles, garde-fous iOS)
   Appended last so it overrides earlier rules by source order.
   ============================================================ */

/* Garde-fous globaux tactiles / iOS (toutes tailles) */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-padding-top: 84px; /* le nav fixe ne masque plus les ancres */
}
body { -webkit-tap-highlight-color: transparent; overscroll-behavior-y: none; }
/* pas de survol persistant sur écran tactile */
@media (hover: none) {
    .btn-lux:hover::before { transform: scaleX(0); }
    .btn-lux:hover { color: var(--ivoire); border-color: var(--or-doux); }
}

@media (max-width: 700px) {
    /* Rythme vertical resserré — moins de défilement à vide */
    section.chapter { padding: clamp(68px, 15vw, 104px) 0; }
    .strip-shell { padding: clamp(68px, 15vw, 104px) 0; }
    /* Le bas du héros de série (padding-bottom) sépare déjà le titre de la
       galerie ; on réduit le padding-haut pour ne pas doubler l'espace et
       éviter un grand vide entre le titre et la première image. */
    .serie-gallery { padding: clamp(16px, 4vw, 28px) 0 clamp(56px, 12vw, 96px); }
    .chapter-head { margin-bottom: clamp(36px, 8vw, 60px); }

    /* Titres : plancher réduit + retour à la ligne garanti */
    .lux-hero h1 { font-size: clamp(40px, 12.5vw, 62px); line-height: 1.04; }
    .serie-hero h1 { font-size: clamp(38px, 11.5vw, 58px); line-height: 1.05; }
    .panel .plaque h2 { font-size: clamp(34px, 9.5vw, 56px); }
    .display { font-size: clamp(31px, 8.4vw, 48px); }
    .finale h2 { font-size: clamp(33px, 9vw, 52px); }
    .oracle blockquote p { font-size: clamp(26px, 7.2vw, 42px); line-height: 1.28; }
    .folio-row .name { font-size: clamp(26px, 7.2vw, 42px); }
    .preamble .lead { font-size: clamp(23px, 6.2vw, 34px); line-height: 1.34; }
    .prose { font-size: clamp(17px, 4.4vw, 20px); }
    .lux-hero h1, .serie-hero h1, .panel .plaque h2, .display,
    .finale h2, .oracle blockquote p, .folio-row .name {
        overflow-wrap: break-word;
    }

    /* L'oracle, la finale et le héros de série n'imposent plus de hauteur en
       vh : la photo coule à sa hauteur naturelle et le texte suit ou se
       superpose sur son bas (voir bloc 640px) — plus de vides sombres. */

    /* Bande horizontale : cartes plus étroites + aperçu de la suivante */
    /* Tête de section en colonne : le hint en ligne comprimait le kicker et
       le titre sur deux lignes chacun. Kicker et titre tiennent désormais sur
       une ligne, et le hint se cale à droite, juste au-dessus des images. */
    .strip-head { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 16px; }
    .strip-hint { align-self: flex-end; padding-bottom: 0; }

    /* Cartes plus étroites : l'image suivante reste bien visible et invite
       au défilement horizontal. */
    .strip figure { width: clamp(200px, 58vw, 260px); }
    .strip figure.tall { width: clamp(150px, 44vw, 190px); }
    .strip { scroll-snap-type: x mandatory; }
}

/* Pied de page — cibles tactiles et respiration */
@media (max-width: 860px) {
    .lux-footer { padding-top: clamp(48px, 10vw, 72px); }
    .lux-footer .col { gap: 4px; }
    .lux-footer a, .lux-footer span { font-size: 11px; letter-spacing: 0.24em; }
    .lux-footer .col a { padding: 8px 0; } /* cible tactile */
    .lux-footer .baseline { margin-top: 36px; font-size: 14px; padding: 0 8px; }
}

/* Visionneuse — commandes plus grandes au pouce */
@media (max-width: 640px) {
    .lux-lightbox .close { top: 16px; padding: 12px; font-size: 12px; }
    .lux-lightbox .arrow-btn { font-size: 30px; padding: 14px 26px; }
    .lux-lightbox img { max-height: calc(100svh - 180px); }
}

/* ============================================================
   MENU HAMBURGER (mobile) — bouton injecté par luxe.js,
   panneau plein écran réutilisant .links (dont la bascule FR/EN)
   ============================================================ */

.nav-toggle { display: none; } /* masqué sur desktop */

@media (max-width: 700px) {
    /* Barre : marque à gauche, hamburger à droite, sur une seule ligne centrée.
       En flux (sticky) sur son propre bandeau plein plutôt que flottante par-dessus
       l'image : le héros commence sous la barre, la photo reste entièrement visible. */
    .lux-nav {
        position: sticky; top: 0;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
        padding: 16px var(--gutter);
        column-gap: 12px;
        background: var(--encre);
        border-bottom-color: var(--or-trace);
    }
    .lux-nav.scrolled { padding-top: 12px; padding-bottom: 12px; }

    .lux-nav .brand {
        flex: 0 1 auto;
        min-width: 0;
        font-size: clamp(13px, 4vw, 16px);
        letter-spacing: 0.14em;
        gap: 10px;
        overflow: hidden;
        text-overflow: ellipsis;
        position: relative;
        z-index: 1201;
    }
    .lux-nav .brand-mark { width: 24px; height: 24px; }

    .nav-toggle {
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        width: 44px; height: 44px; /* cible tactile confortable */
        margin-right: -10px;
        padding: 11px;
        background: none; border: none; cursor: pointer;
        position: relative; z-index: 1201;
    }
    .nav-toggle span {
        display: block;
        width: 22px; height: 1.5px;
        background: var(--ivoire);
        transition: transform 0.4s var(--ease-lux), opacity 0.25s var(--ease-lux);
    }
    /* → croix quand ouvert */
    body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
    body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
    body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

    /* Panneau plein écran */
    .lux-nav .links {
        position: fixed; inset: 0;
        z-index: 1200;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: clamp(20px, 5vh, 34px);
        padding: 96px var(--gutter) 56px;
        background: rgba(16, 14, 11, 0.98);
        backdrop-filter: blur(22px);
        -webkit-backdrop-filter: blur(22px);
        opacity: 0; visibility: hidden;
        transform: translateY(-10px);
        transition: opacity 0.5s var(--ease-lux),
                    transform 0.5s var(--ease-lux),
                    visibility 0.5s;
    }
    body.nav-open .lux-nav .links {
        opacity: 1; visibility: visible; transform: none;
    }
    body.nav-open { overflow: hidden; } /* verrou du défilement */

    /* Le backdrop-filter de .scrolled fait de .lux-nav le bloc conteneur des
       descendants position:fixed → le panneau se recadre sur la barre. On le
       neutralise à l'ouverture pour que .links reste calé sur le viewport. */
    body.nav-open .lux-nav.scrolled {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    /* Liens : grands, en serif, façon sommaire */
    .lux-nav .links a {
        font-family: var(--serif);
        font-weight: 300;
        font-size: clamp(28px, 8vw, 40px);
        letter-spacing: 0.01em;
        text-transform: none;
        color: var(--ivoire);
        padding: 6px 0;
    }
    .lux-nav .links a::after { display: none; }
    .lux-nav .links a.active { color: var(--or); }

    /* Bascule FR / EN au bas du menu, séparée par un filet or */
    .lux-nav .links .lang-switch {
        margin-top: clamp(20px, 5vh, 34px);
        padding: clamp(20px, 5vh, 34px) 0 0;
        border-left: none;
        border-top: 1px solid var(--or-trace);
        gap: 8px;
    }
    .lux-nav .links .lang-switch button {
        font-size: 13px;
        letter-spacing: 0.24em;
        padding: 10px 12px;
    }
}