/* =========================================================================
   EXELAR — Couche « Vivant » · ÉDITION PREMIUM
   Additive : ne remplace aucune règle de style.css. À charger APRÈS style.css.
   Dégradation totale sans JS · respect de prefers-reduced-motion ·
   effets souris désactivés sur tactile.
   ========================================================================= */

/* =========================================================================
   0. PRELOADER cinématique
   ========================================================================= */
.exe-preloader {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: grid;
    place-items: center;
    background: var(--ivoire);
    transition: opacity 0.8s ease, visibility 0.8s ease;
}
.exe-preloader__inner { text-align: center; }
.exe-preloader__brand {
    font-family: var(--display);
    font-size: clamp(2rem, 6vw, 3.4rem);
    letter-spacing: 0.5em;
    text-indent: 0.5em;
    color: var(--encre);
    overflow: hidden;
}
.exe-preloader__brand span {
    display: inline-block;
    transform: translateY(110%);
    animation: exePreBrand 0.9s 0.1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes exePreBrand { to { transform: none; } }
.exe-preloader__bar {
    width: min(240px, 60vw);
    height: 1px;
    margin: 2rem auto 1rem;
    background: var(--ligne);
    position: relative;
    overflow: hidden;
}
.exe-preloader__bar::after {
    content: '';
    position: absolute;
    inset: 0;
    width: var(--p, 0%);
    background: linear-gradient(90deg, var(--or-fonce), var(--or));
    transition: width 0.2s linear;
}
.exe-preloader__count {
    font-family: var(--corps);
    font-size: 0.75rem;
    letter-spacing: 0.4em;
    color: var(--or-fonce);
}
.exe-preloader--done { opacity: 0; visibility: hidden; }
/* rideau qui s'écarte */
.exe-preloader__curtain {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--encre);
    transform: scaleY(0);
    transform-origin: bottom;
}
.exe-preloader--done .exe-preloader__curtain {
    transform: scaleY(1);
    transform-origin: top;
    transition: transform 0.7s cubic-bezier(0.76, 0, 0.24, 1);
}

/* =========================================================================
   1. GRAIN de film (cinématique)
   ========================================================================= */
.exe-grain {
    position: fixed;
    inset: -50%;
    z-index: 8000;
    pointer-events: none;
    opacity: 0.04;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    animation: exeGrain 0.6s steps(2) infinite;
    will-change: transform;
}
@keyframes exeGrain {
    0%   { transform: translate(0, 0); }
    25%  { transform: translate(-3%, 2%); }
    50%  { transform: translate(2%, -3%); }
    75%  { transform: translate(-2%, -2%); }
    100% { transform: translate(3%, 3%); }
}

/* =========================================================================
   2. CURSEUR personnalisé
   ========================================================================= */
.exe-has-cursor,
.exe-has-cursor a,
.exe-has-cursor button,
.exe-has-cursor .piece__cadre--clic { cursor: none !important; }

.exe-cursor-dot,
.exe-cursor-ring {
    position: fixed;
    top: 0; left: 0;
    z-index: 9500;
    pointer-events: none;
    border-radius: 50%;
    mix-blend-mode: difference;
    will-change: transform;
}
.exe-cursor-dot {
    width: 7px; height: 7px;
    margin: -3.5px 0 0 -3.5px;
    background: #fff;
}
.exe-cursor-ring {
    width: 38px; height: 38px;
    margin: -19px 0 0 -19px;
    border: 1px solid rgba(255, 255, 255, 0.8);
    display: grid;
    place-items: center;
    transition: width 0.3s ease, height 0.3s ease, margin 0.3s ease,
                background 0.3s ease, border-color 0.3s ease;
}
.exe-cursor-ring__label {
    font-family: var(--corps);
    font-size: 0.55rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #fff;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.3s ease, transform 0.3s ease;
    white-space: nowrap;
}
.exe-cursor-ring.is-hover {
    width: 56px; height: 56px;
    margin: -28px 0 0 -28px;
    background: rgba(255, 255, 255, 0.08);
}
.exe-cursor-ring.is-view {
    width: 92px; height: 92px;
    margin: -46px 0 0 -46px;
    border-color: var(--or);
}
.exe-cursor-ring.is-view .exe-cursor-ring__label { opacity: 1; transform: scale(1); }

/* =========================================================================
   3. Fil de progression
   ========================================================================= */
.scroll-progress {
    position: fixed;
    top: 0; left: 0;
    height: 2px;
    width: 100%;
    transform: scaleX(0);
    transform-origin: 0 50%;
    background: linear-gradient(90deg, var(--or-fonce), var(--or));
    z-index: 200;
    pointer-events: none;
    will-change: transform;
}

/* =========================================================================
   4. NAV vivante
   ========================================================================= */
.nav { transition: padding 0.4s ease, background 0.4s ease, box-shadow 0.4s ease; }
.nav--scrolled {
    padding-top: 1rem;
    padding-bottom: 1rem;
    background: rgba(242, 241, 238, 0.92);
    box-shadow: 0 1px 0 var(--ligne), 0 12px 34px rgba(22, 22, 26, 0.06);
}
.nav__links a { position: relative; }
.nav__links a::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    bottom: -6px;
    height: 1px;
    background: var(--or-fonce);
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav__links a:hover::after,
.nav__links a.is-active::after { transform: scaleX(1); }
.nav__links a.is-active { opacity: 1; color: var(--or-fonce); }

/* =========================================================================
   5. BANDEAU défilant (marquee)
   ========================================================================= */
.exe-marquee {
    overflow: hidden;
    padding: 2.6rem 0;
    border-top: 1px solid var(--ligne);
    border-bottom: 1px solid var(--ligne);
    background: var(--ivoire-2);
    white-space: nowrap;
    -webkit-user-select: none;
    user-select: none;
}
.exe-marquee__track {
    display: inline-flex;
    align-items: center;
    will-change: transform;
}
.exe-marquee__item {
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(1.8rem, 4vw, 3rem);
    letter-spacing: 0.06em;
    color: var(--encre);
    padding: 0 1.5rem;
}
.exe-marquee__item em {
    font-style: normal;
    color: var(--or-fonce);
    margin: 0 1.5rem;
}

/* =========================================================================
   6. BLOBS dorés flottants (injectés dans certaines sections)
   ========================================================================= */
.exe-blob-host { position: relative; overflow: hidden; }
.exe-blob {
    position: absolute;
    z-index: 0;
    width: 46vw;
    height: 46vw;
    max-width: 620px;
    max-height: 620px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%, rgba(194, 168, 107, 0.22), transparent 68%);
    filter: blur(36px);
    pointer-events: none;
    will-change: transform;
    animation: exeBlob 18s ease-in-out infinite alternate;
}
.exe-blob--2 { animation-duration: 24s; animation-direction: alternate-reverse; }
@keyframes exeBlob {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(6%, -8%) scale(1.15); }
    100% { transform: translate(-6%, 6%) scale(0.95); }
}
/* le contenu reste au-dessus des blobs (mais pas les détails ancrés .exe-sk) */
.exe-blob-host > *:not(.exe-blob):not(.exe-sk) { position: relative; z-index: 1; }

/* =========================================================================
   7. RÉVÉLATION de texte (mot par mot) + reveal enrichi
   ========================================================================= */
.exe-word {
    display: inline-block;
    opacity: 0;
    transform: translateY(0.5em);
    filter: blur(6px);
    transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.8s cubic-bezier(0.22, 1, 0.36, 1),
                filter 0.8s ease;
}
.exe-text.is-in .exe-word { opacity: 1; transform: none; filter: blur(0); }

/* trait or sous les titres */
.exe-js .section__title { position: relative; }
.exe-js .section__title::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -0.7rem;
    height: 1px;
    width: 0;
    background: var(--or);
    transform: translateX(-50%);
    transition: width 0.9s 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.exe-js .section__title.is-visible::after,
.exe-js .section__title.is-in::after { width: 64px; }

/* renforce les data-reveal existants d'un léger flou */
.exe-js [data-reveal] { filter: blur(4px); transition: opacity 1s cubic-bezier(0.22,1,0.36,1), transform 1s cubic-bezier(0.22,1,0.36,1), filter 1s ease; }
.exe-js [data-reveal].is-visible { filter: blur(0); }

/* =========================================================================
   8. Entrée du HERO échelonnée
   ========================================================================= */
.exe-js .hero__eyebrow,
.exe-js .hero__title,
.exe-js .hero__scroll { opacity: 0; transform: translateY(26px); }
.exe-js.exe-ready .hero__eyebrow { animation: exeHeroIn 0.9s 0.20s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.exe-js.exe-ready .hero__title   { animation: exeHeroIn 1.1s 0.35s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.exe-js.exe-ready .hero__scroll  { animation: exeHeroIn 0.9s 0.70s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
@keyframes exeHeroIn { to { opacity: 1; transform: none; } }

/* =========================================================================
   9. Boutons magnétiques + reflet · Tilt 3D · cascade
   ========================================================================= */
.exe-magnet {
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
                background 0.4s ease, color 0.4s ease;
    will-change: transform;
}
.exe-shine { position: relative; overflow: hidden; }
.exe-shine::before {
    content: '';
    position: absolute;
    top: 0;
    left: -130%;
    width: 60%;
    height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.5), transparent);
    transform: skewX(-20deg);
    pointer-events: none;
    z-index: 1;
}
.exe-shine:hover::before { left: 150%; transition: left 0.8s ease; }
.exe-shine > * { position: relative; z-index: 2; }

.exe-js .piece__visuel { perspective: 1100px; }
.exe-tilt {
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    transform-style: preserve-3d;
    will-change: transform;
}
.exe-tilt img,
.exe-tilt .piece__index,
.exe-tilt .piece__loupe { transform: translateZ(40px); }

.exe-stagger > * {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.exe-stagger.exe-in > * { opacity: 1; transform: none; }

/* =========================================================================
   10. Boutons : retour haptique visuel (ripple)
   ========================================================================= */
.exe-ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(194, 168, 107, 0.35);
    transform: scale(0);
    animation: exeRipple 0.6s ease-out forwards;
    pointer-events: none;
    z-index: 0;
}
@keyframes exeRipple { to { transform: scale(2.6); opacity: 0; } }

/* =========================================================================
   11. TRANSITIONS de page (rideau)
   ========================================================================= */
.exe-curtain {
    position: fixed;
    inset: 0;
    z-index: 9200;
    background: var(--encre);
    pointer-events: none;
    transform: scaleY(0);
    transform-origin: bottom;
    display: grid;
    place-items: center;
}
.exe-curtain__mark {
    font-family: var(--display);
    font-size: clamp(1.6rem, 5vw, 2.6rem);
    letter-spacing: 0.5em;
    text-indent: 0.5em;
    color: var(--or);
    opacity: 0;
    transition: opacity 0.4s ease;
}
/* entrée : démarre couvert, puis se retire vers le haut */
.exe-curtain--cover { transform: scaleY(1); }
.exe-curtain--reveal {
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.8s cubic-bezier(0.76, 0, 0.24, 1);
}
/* sortie : recouvre vers le haut avant la navigation */
.exe-curtain--cover-anim {
    transform: scaleY(1);
    transform-origin: bottom;
    transition: transform 0.6s cubic-bezier(0.76, 0, 0.24, 1);
    pointer-events: all;
}
.exe-curtain--cover-anim .exe-curtain__mark { opacity: 1; transition-delay: 0.2s; }

/* =========================================================================
   12. LENIS — défilement à inertie (styles requis)
   ========================================================================= */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* =========================================================================
   13. Respect du mouvement réduit
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
    .scroll-progress, .exe-grain, .exe-blob, .exe-marquee { display: none; }
    .exe-js .hero__eyebrow, .exe-js .hero__title, .exe-js .hero__scroll {
        opacity: 1 !important; transform: none !important; animation: none !important;
    }
    .exe-word { opacity: 1 !important; transform: none !important; filter: none !important; }
    .exe-stagger > * { opacity: 1 !important; transform: none !important; }
    .exe-js [data-reveal] { filter: none !important; }
    .exe-shine::before { display: none; }
    .exe-cursor-dot, .exe-cursor-ring { display: none; }
    .exe-has-cursor, .exe-has-cursor * { cursor: auto !important; }
}

/* ============================================================
   HERO — Montre 3D EXELAR (canvas Three.js, modèle maison)
   Le canvas custom est affiché ; l'iframe Sketchfab a été retirée.
   ============================================================ */
.hero__text { position: relative; z-index: 2; }

/* =========================================================================
   ÉDITION HORLOGÈRE — le « caractère montre »
   Rails latéraux vivants · texture guilloché « tapisserie » · cadre du hero.
   100 % additif : sans JS rien n'apparaît, masqué sous 1240px.
   ========================================================================= */

/* ---- 14-16. RAILS latéraux — mécanismes horlogers (aucune marque) ----
   Tourbillon (gauche) + train d'engrenages (droite), trait d'or fin.
   Animés en SMIL (rotation autour d'un centre exact) ; statiques sous
   prefers-reduced-motion (les <animateTransform> ne sont pas injectés).
   --------------------------------------------------------------------- */
.exe-rail {
    position: fixed;
    top: 0; bottom: 0;
    width: 6rem;
    z-index: 40;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
    opacity: 0.62;
}
.exe-rail--left  { left: 0; }
.exe-rail--right { right: 0; }
.exe-rail svg { display: block; width: 100%; height: auto; overflow: visible; }

.exe-mech-line      { fill: none; stroke: var(--or-fonce); stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; }
.exe-mech-line--fine{ stroke-width: 0.55; opacity: 0.6; }
.exe-mech-line--bold{ stroke-width: 1.6; }
.exe-mech-fill      { fill: var(--or-fonce); stroke: none; }
.exe-mech-plate     { fill: rgba(194, 168, 107, 0.06); stroke: var(--or-fonce); stroke-width: 0.8; }
.exe-mech-jewel     { fill: #9a3b46; opacity: 0.85; }

@media (max-width: 1365px) { .exe-rail { display: none; } }

/* ---- 16b. MÉCANISMES PAR SECTION — grands filigranes hors-cadre ------
   Posés DANS une section (tourbillon dans « La Manufacture », rouage dans
   « La Maison »), surdimensionnés et à faible opacité : ils débordent du
   bloc de contenu (gouttière + léger hors-cadre) tout en restant derrière
   le texte. body { overflow-x:hidden } absorbe le débordement latéral —
   aucune scrollbar horizontale. Réutilise les classes .exe-mech-*.
   --------------------------------------------------------------------- */
.exe-has-mech { position: relative; }
.exe-has-mech > :not(.exe-sectmech) { position: relative; z-index: 1; }

.exe-sectmech {
    position: absolute;
    z-index: 0;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
}
.exe-sectmech svg { display: block; width: 100%; height: auto; overflow: visible; }

/* Tourbillon — « La Manufacture » (qui sommes-nous) : déborde à droite + haut */
.exe-sectmech--tourbillon {
    width: 31rem;
    right: -8rem;
    top: -7rem;
    opacity: 0.14;
}
/* Rouage — « La Maison » : déborde à gauche + bas, plus discret encore */
.exe-sectmech--rouage {
    width: 26rem;
    left: -8rem;
    bottom: -7rem;
    opacity: 0.11;
}

/* écrans modestes : on retire le filigrane (taille/positionnement pensés desktop) */
@media (max-width: 1180px) { .exe-sectmech { display: none; } }

/* ---- 16e. DÉTAILS HORLOGERS ANCRÉS DANS LES SECTIONS -----------------
   Chaque détail (pièce animée + libellé) est posé EN ABSOLU dans une
   section (hero, Maison, Manufacture, Récit) : il DÉFILE AVEC sa section,
   il NE SUIT PAS le viewport. Calé dans la gouttière (gauche/droite),
   centré verticalement, gros et nommé. Caché sous 1200px.
   --------------------------------------------------------------------- */
.exe-sk {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 13rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
    opacity: 0.9;
}
/* XXL : la pièce déborde ~4rem hors de l'écran, coupée net par
   l'overflow:hidden de la section (qui occupe toute la largeur). */
.exe-sk--left  { left: -4rem; }
.exe-sk--right { right: -4rem; }
.exe-sk__part {
    width: 100%;
    pointer-events: auto;   /* la pièce redevient cliquable (le libellé non) */
    cursor: grab;
    touch-action: none;
    transition: transform 0.35s ease;
}
.exe-sk__part:hover { transform: scale(1.05); }
.exe-sk__part.is-grabbing { cursor: grabbing; }
.exe-sk__part svg { display: block; width: 100%; height: auto; overflow: visible; transform-origin: 50% 50%; }
.exe-sk__cap {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-size: 0.7rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--or-fonce);
    white-space: nowrap;
    margin: 0;
}
.exe-sk--left .exe-sk__cap { transform: rotate(180deg); }
@media (max-width: 1300px) { .exe-sk { display: none; } }

/* ---- 16f. AMBIANCE — zones claires/sombres, profondeur (« moins plat ») --
   Calque fixe en mix-blend-mode soft-light : coins éclairés / assombris +
   léger vignettage. Centres transparents → le texte (centré) reste net ;
   seuls les bords « respirent ». Le contenu déjà surélevé (z-index>0) n'est
   pas teinté. Statique (aucune animation), sûr en perfs.
   --------------------------------------------------------------------- */
.exe-ambience {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    mix-blend-mode: soft-light;
    opacity: 0.9;
    background:
        radial-gradient(58% 42% at 16% 10%, rgba(255, 255, 255, 0.95), transparent 60%),
        radial-gradient(52% 46% at 90% 24%, rgba(255, 246, 224, 0.70), transparent 62%),
        radial-gradient(66% 54% at 82% 94%, rgba(34, 28, 18, 0.85),   transparent 60%),
        radial-gradient(58% 58% at 6% 88%,  rgba(26, 22, 14, 0.70),   transparent 62%);
}
.exe-ambience::after {
    content: "";
    position: absolute;
    inset: 0;
    mix-blend-mode: multiply;
    background: radial-gradient(125% 115% at 50% 42%, transparent 60%, rgba(20, 17, 11, 0.22));
}

/* ---- 17. Cadre de présentation du HERO (équerres + repères) ---------- */
.exe-hero-frame {
    position: absolute;
    inset: 1.6rem;
    z-index: 2;
    pointer-events: none;
}
.exe-hero-frame__corner {
    position: absolute;
    width: 40px; height: 40px;
    border: 1px solid rgba(154, 128, 56, 0.5);
}
.exe-hero-frame__corner--tl { top: 0; left: 0;  border-right: 0; border-bottom: 0; }
.exe-hero-frame__corner--tr { top: 0; right: 0; border-left: 0;  border-bottom: 0; }
.exe-hero-frame__corner--bl { bottom: 0; left: 0;  border-right: 0; border-top: 0; }
.exe-hero-frame__corner--br { bottom: 0; right: 0; border-left: 0;  border-top: 0; }
@media (max-width: 600px) {
    .exe-hero-frame { inset: 0.9rem; }
    .exe-hero-frame__corner { width: 26px; height: 26px; }
}

/* ---- 18. MENU MOBILE — hamburger + plein écran (mobile-first) -------- */
.nav__toggle {
    display: none;
    width: 42px; height: 42px;
    margin: -0.4rem -0.4rem -0.4rem 0;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    z-index: 120;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 6px;
}
.nav__toggle span {
    display: block;
    height: 1.5px;
    width: 26px;
    background: var(--encre);
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease, width 0.35s ease;
}
.nav__toggle span:nth-child(2) { width: 18px; }
.nav--open .nav__toggle span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); width: 26px; }
.nav--open .nav__toggle span:nth-child(2) { opacity: 0; }
.nav--open .nav__toggle span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); width: 26px; }

@media (max-width: 760px) {
    .nav--has-toggle .nav__toggle { display: flex; }
    .nav--has-toggle .nav__brand { position: relative; z-index: 120; }
    .nav--has-toggle .nav__links {
        position: fixed;
        inset: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 1.7rem;
        background: var(--ivoire);
        transform: translateY(-100%);
        transition: transform 0.55s cubic-bezier(0.76, 0, 0.24, 1);
        z-index: 110;
    }
    .nav--has-toggle.nav--open .nav__links { transform: translateY(0); }
    .nav--has-toggle .nav__links a {
        font-family: var(--display);
        font-size: 1.7rem;
        letter-spacing: 0.06em;
        text-transform: none;
        opacity: 0;
        transform: translateY(14px);
        transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), color 0.3s ease;
    }
    .nav--has-toggle.nav--open .nav__links a { opacity: 0.92; transform: none; }
    .nav--has-toggle.nav--open .nav__links a:nth-child(1) { transition-delay: 0.14s; }
    .nav--has-toggle.nav--open .nav__links a:nth-child(2) { transition-delay: 0.20s; }
    .nav--has-toggle.nav--open .nav__links a:nth-child(3) { transition-delay: 0.26s; }
    .nav--has-toggle.nav--open .nav__links a:nth-child(4) { transition-delay: 0.32s; }
    .nav--has-toggle.nav--open .nav__links a:nth-child(5) { transition-delay: 0.38s; }
    .nav--has-toggle.nav--open .nav__links a:nth-child(6) { transition-delay: 0.44s; }
}

/* ---- 19. HERO plus court sur mobile (scroll moins long) -------------- */
@media (max-width: 760px) {
    .hero { height: 180vh; }
}
@media (prefers-reduced-motion: reduce) {
    .nav--has-toggle .nav__links,
    .nav--has-toggle .nav__links a { transition: none; }
}

/* ============================================================
   PHASE 1 — Bloc Réservation / Liste d'attente (fiche produit)
   ============================================================ */
.reserve {
    margin-top: 2.2rem;
    padding-top: 1.8rem;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.reserve__statut {
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin: 0 0 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
}
.reserve__statut::before {
    content: "";
    width: 7px; height: 7px;
    border-radius: 50%;
    display: inline-block;
}
.reserve__statut--dispo { color: #1f7a4d; }
.reserve__statut--dispo::before { background: #1f9d57; box-shadow: 0 0 0 3px rgba(31,157,87,0.18); }
.reserve__statut--indispo { color: #9a6a1f; }
.reserve__statut--indispo::before { background: #c9962f; box-shadow: 0 0 0 3px rgba(201,150,47,0.18); }

.reserve__accroche {
    font-size: 0.95rem;
    line-height: 1.55;
    opacity: 0.8;
    margin: 0 0 1.2rem;
    max-width: 38ch;
}

.produit__cta--or {
    background: linear-gradient(135deg, #d4af37, #b8902a);
    color: #1a1a1a;
    border: none;
}
.produit__cta--or:hover { filter: brightness(1.07); }

.reserve__lien {
    display: block;
    margin-top: 0.9rem;
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-size: 0.85rem;
    color: rgba(0, 0, 0, 0.55);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
.reserve__lien:hover { color: #b8902a; }

/* Honeypot : invisible pour l'humain, présent pour les bots */
.reserve__hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px; height: 1px;
    opacity: 0;
}

.reserve__form {
    margin-top: 1.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    max-width: 420px;
    animation: reserveIn 0.45s ease both;
}
.reserve__form.is-hidden { display: none; }
@keyframes reserveIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.reserve__label {
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    opacity: 0.6;
}
.reserve__input {
    width: 100%;
    padding: 0.85rem 1rem;
    border: 1px solid rgba(0, 0, 0, 0.18);
    border-radius: 2px;
    background: #fff;
    font: inherit;
    font-size: 0.95rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.reserve__input:focus {
    outline: none;
    border-color: #c9962f;
    box-shadow: 0 0 0 3px rgba(201, 150, 47, 0.15);
}
.reserve__submit {
    margin-top: 0.3rem;
    padding: 0.95rem 1.4rem;
    border: none;
    border-radius: 2px;
    background: #1a1a1a;
    color: #fff;
    font: inherit;
    font-size: 0.8rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease;
}
.reserve__submit:hover { background: #000; transform: translateY(-1px); }
.reserve__mention {
    font-size: 0.72rem;
    opacity: 0.5;
    margin: 0.2rem 0 0;
    line-height: 1.4;
}

.reserve__flash {
    margin: 1rem 0 0;
    padding: 0.85rem 1.1rem;
    border-radius: 2px;
    font-size: 0.88rem;
    line-height: 1.45;
    border-left: 3px solid;
}
.reserve__flash--ok   { background: rgba(31, 157, 87, 0.1);  border-color: #1f9d57; color: #145c34; }
.reserve__flash--info { background: rgba(201, 150, 47, 0.12); border-color: #c9962f; color: #7a5a18; }
.reserve__flash--err  { background: rgba(200, 50, 50, 0.1);  border-color: #c83232; color: #8a2222; }

.reserve__retour {
    margin-top: 1.6rem;
    font-size: 0.85rem;
}
.reserve__retour a { color: rgba(0, 0, 0, 0.55); text-decoration: underline; text-underline-offset: 3px; }
.reserve__retour a:hover { color: #b8902a; }