:root {
    --nixie-glow: #ff7700;
}

body, html {
    margin: 0; padding: 0; width: 100%; height: 100%;
    overflow: hidden; background: #000;
}

/* --- CIEL (Confiné dans le viewport) --- */
.sky-background {
    position: absolute;
    top: -15px; left: -15px; 
    width: calc(100% + 30px); height: calc(100% + 30px);
    background: #a4c8e1 url('img/background-sky.jpg') no-repeat center 100%;
    background-size: cover;
    z-index: 1;
}

.sky-container { 
    position: absolute; 
    top: -25px; left: -25px; 
    width: calc(100% + 50px); height: calc(100% + 50px); 
    z-index: 2; 
    pointer-events: none; 
}

#window-video-container {
    position: absolute;
    top: 0px;
    left: 320px;
    width: 1100px;
    height: 618px;
    z-index: 2;
    pointer-events: none;
    overflow: hidden;
    will-change: transform;
    transform: translateZ(0);
    contain: strict;
}

.zep-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    display: none;
    user-select: none;
    -webkit-user-drag: none;
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.zep-bg { z-index: 1; opacity: 0.92; }
.zep-mid { z-index: 2; opacity: 0.96; }
.zep-fg { z-index: 3; opacity: 1; }

/* --- EASTER EGG SECRET : VOL DE STIVEN SUR TAPIS VOLANT --- */
#stiven-secret {
    position: absolute;
    top: 130px;
    left: 0;
    width: 420px;
    height: auto;
    z-index: 2;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
    display: none;
    transform: translate(-450px, 0px);
    will-change: transform;
    filter: blur(0.25px);
}

#stiven-secret.flying {
    display: block !important;
    animation: stivenFlight 10s linear forwards;
}

@keyframes stivenFlight {
    0% {
        transform: translate(-450px, 0px);
    }
    20% {
        transform: translate(-130px, -8px);
    }
    40% {
        transform: translate(190px, 4px);
    }
    60% {
        transform: translate(510px, -6px);
    }
    80% {
        transform: translate(830px, 3px);
    }
    100% {
        transform: translate(1150px, 0px);
    }
}




/* --- VIEWPORT RESPONSIVE --- */
#main-viewport {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1920px;
    height: 1072px;
    z-index: 5;
    background: #000;
    transform-origin: center center;
    transform: translate(-50%, -50%);
    overflow: hidden;
}

/* --- BUREAU --- */
.desk-foreground {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: url('img/desk-foreground.png') no-repeat center;
    background-size: 100% 100%; 
    z-index: 5;
    pointer-events: none;
}

/* --- FIGURINES GOTHIQUES (Sur le parchemin bas-gauche) --- */
#gothic-figurines {
    position: absolute;
    top: 523.33px;
    left: 305.21px;
    width: 170px;
    transform: perspective(1000px) rotateY(18deg) rotate(-2deg) scale(0.81);
    transform-origin: bottom center;
    z-index: 10;
    pointer-events: auto;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
    will-change: transform;
}

#gothic-figurines::before {
    content: '';
    position: absolute;
    top: -20px;
    left: -20px;
    right: -20px;
    bottom: -20px;
    background: radial-gradient(circle at 50% 60%, rgba(255, 185, 50, 0.35) 0%, rgba(255, 140, 20, 0.15) 45%, transparent 70%);
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease;
    z-index: -1;
}

#gothic-figurines:hover::before {
    opacity: 1;
}

#gothic-figurines::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 2%;
    width: 96%;
    height: 24px;
    background: radial-gradient(ellipse at center, rgba(12, 6, 2, 0.85) 0%, rgba(15, 8, 3, 0.5) 45%, transparent 75%);
    border-radius: 50%;
    z-index: -1;
    pointer-events: none;
    transition: opacity 0.28s ease;
}

#gothic-figurines:hover::after {
    opacity: 0.65;
}

#gothic-figurines img {
    display: block;
    width: 100%;
    height: auto;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    filter: blur(0.25px);
    transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
    transform-origin: bottom center;
}

/* Survol relatif : élévation et léger grossissement relatif sans écraser la taille choisie */
#gothic-figurines:hover img {
    transform: translateY(-8px) scale(1.04);
}

/* Badge indicatif au survol des figurines */
.figurines-badge {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 18px;
    background: linear-gradient(135deg, rgba(35, 22, 14, 0.96), rgba(18, 10, 6, 0.96));
    border: 1.5px solid #d4a04d;
    border-radius: 24px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.85), 0 0 16px rgba(212, 160, 77, 0.5);
    color: #ffda94;
    font-family: 'Fondamento', cursive;
    font-size: 1.55rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
    z-index: 15;
}

#gothic-figurines:hover .figurines-badge {
    opacity: 1;
    transform: translateX(-50%) translateY(-18px);
}

.figurines-badge .badge-gem {
    color: #ff9900;
    font-size: 1.2rem;
    animation: badgePulse 2s infinite ease-in-out;
}

@keyframes badgePulse {
    0%, 100% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.3); opacity: 1; text-shadow: 0 0 8px #ffaa00; }
}

body.triptych-active #audio-control {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: scale(0.8);
}

/* Optimisation GPU/CPU : mise en pause des animations lourdes en arrière-plan quand le triptyque est ouvert */
body.triptych-active .row-gears .gear-animated {
    animation-play-state: paused !important;
}

body.triptych-active .nixie-digit {
    animation-play-state: paused !important;
}

body.design-mode #gothic-figurines,
body.design-mode #gothic-figurines img {
    pointer-events: auto !important;
    cursor: grab !important;
    filter: blur(0.35px);
}

body.design-mode #gothic-figurines:hover {
    outline: 2px dashed rgba(255, 60, 0, 0.8) !important;
}

/* --- TEXTE PARCHEMIN (V13) --- */
.invitation-text {
    position: absolute;
    top: 44.20%;
    left: 6.40%;
    width: 16%;
    font-family: 'Fondamento', cursive;
    color: #2b1d0e; 
    text-align: center;
    z-index: 6;
    perspective: 1000px;
}

.invitation-text p, .invitation-text h2 { margin: 0; position: relative; }

#invit-title { font-size: 1.64rem; transform: perspective(1000px) rotateY(20deg) rotate(-5deg); top: 15.14px; left: -85.57px; font-weight: bold; }
#invit-label { font-size: 1.00rem; transform: perspective(1000px) rotateY(20deg) rotate(-5deg); top: 35.10px; left: -85.00px; }
#invit-date { font-size: 1.70rem; transform: perspective(1000px) rotateY(20deg) rotate(-5deg); top: 59.75px; left: -72.15px; font-weight: bold; }
#invit-time { font-size: 1.20rem; transform: perspective(1000px) rotateY(20deg) rotate(-5deg); top: 60.00px; left: -60.00px; }
#invit-loc { font-size: 1.27rem; transform: perspective(1000px) rotateY(20deg) rotate(-5deg); top: 70.28px; left: -38.33px; line-height: 1.2; }

/* --- MACHINE DISPLAY --- */
.machine-display {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 6;
    pointer-events: none;
    perspective: 1500px;
    contain: layout style;
}

.nixie-digit {
    font-family: 'VT323', monospace;
    color: #ffaa00;
    text-shadow: 0 0 10px #ff9900, 0 0 22px #ff5e00;
    animation: flicker 5s infinite;
    position: relative;
    filter: blur(0.7px);
    display: inline-block;
    will-change: opacity;
    transform: translateZ(0);
}

/* 3 JOURS */
.row-days {
    position: absolute;
    top: 14.10%;
    left: 59.10%;
    transform: perspective(1000px) rotateY(-32deg);
    transform-origin: left center;
}
.row-days .nixie-digit { font-size: 7.35rem; }
#days-1 { top: 0.00px; left: 79.65px; transform: rotateY(-32deg); animation-delay: 0.2s; }
#days-2 { top: 0.00px; left: 126.70px; transform: rotateY(-22deg); animation-delay: 0.5s; }
#days-3 { top: 0.00px; left: 164.60px; transform: rotateY(0deg); animation-delay: 0.1s; }

/* HEURES/MINUTES */
.row-time-hours {
    position: absolute;
    top: 60.95%; 
    left: 60.35%;
    transform: perspective(1000px) rotateY(-30deg);
    transform-origin: left center;
}
.row-time-hours .nixie-digit { font-size: 3.70rem; }
#hours-1 { top: -1.70px; left: -4.00px; transform: rotateY(-49deg); animation-delay: 0.8s; }
#hours-2 { top: -0.25px; left: 14.75px; transform: rotateY(-40deg); animation-delay: 0.3s; }
#minutes-1 { top: 0.30px; left: 30.45px; transform: rotateY(-41deg); animation-delay: 0.6s; }
#minutes-2 { top: 0.80px; left: 46.65px; transform: rotateY(-36deg); animation-delay: 0.4s; font-size: 3.70rem; }

/* SECONDES/CENTIÈMES */
.row-time-seconds {
    position: absolute;
    top: 62.55%; 
    left: 71.80%;
    transform: perspective(1000px) rotateY(-30deg);
    transform-origin: left center;
}
.row-time-seconds .nixie-digit { font-size: 3.70rem; }
#seconds-1 { top: -0.65px; left: -18.60px; transform: rotateY(-35deg); animation-delay: 0.9s; }
#seconds-2 { top: 0.00px; left: 23.25px; transform: rotateY(-36deg); animation-delay: 0.2s; }
#centi-1 { top: 1.20px; left: 47.35px; transform: rotateY(-32deg); animation-delay: 0.7s; }
#centi-2 { top: 0.70px; left: 67.70px; transform: rotateY(-23deg); animation-delay: 0.5s; }

/* SCINTILLEMENT NIXIE ULTRA-FLUIDE (OPACITÉ COMPOSITEUR GPU SANS REPAINT NI BLUR) */
@keyframes flicker {
    0%   { opacity: 0.95; }
    2%   { opacity: 0.78; }
    40%  { opacity: 0.98; }
    50%  { opacity: 1.00; }
    82%  { opacity: 0.82; }
    100% { opacity: 0.95; }
}



/* --- AUDIO --- */
#audio-control { position: fixed; top: 20px; left: 20px; z-index: 100; cursor: pointer; opacity: 0.6; transition: opacity 0.3s, transform 0.3s; }
#audio-control:hover { opacity: 1; transform: scale(1.1); }
.audio-btn-small {
    width: 80px; height: 80px; background: rgba(43, 29, 14, 0.6);
    border: 2px solid #ffaa00; border-radius: 50%;
    display: flex; justify-content: center; align-items: center; font-size: 2.4rem; color: #ffaa00;
}

.overlay-vignette {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(circle, transparent 60%, rgba(0,0,0,0.3) 100%);
    z-index: 8; pointer-events: none;
}

/* ==========================================
   TRIPTYQUE DRESS CODE & RETABLE HORLOGER (Option C)
   ========================================== */

/* Conteneur Plein Écran (dans le viewport) */
.triptych-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.triptych-overlay.open {
    opacity: 1;
    pointer-events: auto;
}

/* Fond obscurci théâtral : sombre mais laisse voir le reste du site en arrière-plan */
.triptych-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at center, rgba(14, 10, 8, 0.62) 0%, rgba(3, 2, 2, 0.78) 100%);
    cursor: pointer;
    transition: background 0.4s ease;
}

/* Scène 3D ultra fluide avec perspective et accélération matérielle */
.triptych-stage {
    position: relative;
    z-index: 10;
    width: 1540px;
    height: 870px;
    perspective: 2000px;
    transform: scale(0.95) translateZ(0);
    opacity: 0;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
    will-change: transform, opacity;
    pointer-events: none;
}

.triptych-overlay.open .triptych-stage {
    transform: scale(1) translateZ(0);
    opacity: 1;
    pointer-events: auto;
}

/* Boîtier du Retable */
.triptych-box {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: stretch;
    transform-style: preserve-3d;
}

/* --- BOUTON FERMETURE : SCEAU DE CIRE VICTORIEN --- */
.triptych-wax-seal {
    position: absolute;
    top: -55px;
    right: -55px;
    z-index: 100;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #b92b27 0%, #831313 65%, #460606 100%);
    border: 2px solid #e0a34b;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.85), inset 0 2px 5px rgba(255, 255, 255, 0.4), inset 0 -4px 8px rgba(0, 0, 0, 0.7);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    outline: none;
    transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.25s ease;
}

.triptych-wax-seal:hover {
    transform: scale(1.15) rotate(90deg);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.9), 0 0 16px rgba(255, 140, 50, 0.6);
}

.wax-seal-inner {
    display: flex;
    align-items: center;
    justify-content: center;
}

.wax-seal-symbol {
    color: #ffd68a;
    font-size: 1.5rem;
    font-family: 'Fondamento', cursive;
    font-weight: bold;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 8px rgba(255, 170, 0, 0.5);
    line-height: 1;
    pointer-events: none;
}

/* --- PANNEAU CENTRAL (PALETTE & PROLOGUE) --- */
.triptych-center {
    position: relative;
    width: 760px;
    height: 100%;
    z-index: 5;
    background: linear-gradient(180deg, #1f140e 0%, #150d09 45%, #0d0805 100%);
    border: 3px solid #c9933b;
    box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.92), inset 0 0 12px rgba(201, 147, 59, 0.4), 0 20px 40px rgba(0, 0, 0, 0.85);
    border-radius: 8px;
    overflow: hidden;
}

.center-inner {
    height: 100%;
    box-sizing: border-box;
    padding: 24px 32px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: center;
    font-family: 'Fondamento', cursive;
}

/* Coins ornementaux */
.center-corner, .corner-ornament {
    position: absolute;
    width: 22px;
    height: 22px;
    border: 2px solid #d4a04d;
    pointer-events: none;
    z-index: 6;
}
.corner-tl { top: 8px; left: 8px; border-right: none; border-bottom: none; }
.corner-tr { top: 8px; right: 8px; border-left: none; border-bottom: none; }
.corner-bl { bottom: 8px; left: 8px; border-right: none; border-top: none; }
.corner-br { bottom: 8px; right: 8px; border-left: none; border-top: none; }

/* Prologue */
.prologue-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 6px;
}
.banner-fleuron {
    color: #e5a74e;
    font-size: 1.3rem;
    opacity: 0.8;
}
.prologue-text {
    margin: 0;
    color: #ffda94;
    font-size: 1.25rem;
    font-style: italic;
    line-height: 1.45;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}

.center-main-title {
    margin: 6px 0 8px;
    color: #f7cb78;
    font-size: 2.25rem;
    letter-spacing: 1px;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9), 0 0 16px rgba(247, 203, 120, 0.45);
}

.center-brass-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 12px;
}
.center-brass-bar .bar-line {
    flex: 1;
    max-width: 140px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #c9933b, transparent);
}
.center-brass-bar .bar-gear {
    color: #e0a34b;
    font-size: 1.2rem;
    animation: gearSpinSlow 24s linear infinite;
}

@keyframes gearSpinSlow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes gearSpinSlowRev {
    from { transform: rotate(0deg); }
    to { transform: rotate(-360deg); }
}

/* Vitrine Palette */
.palette-showcase {
    position: relative;
    margin: 4px auto;
    width: 100%;
    max-width: 680px;
    display: flex;
    justify-content: center;
}

.palette-frame {
    position: relative;
    padding: 10px;
    background: radial-gradient(circle at center, rgba(30, 18, 10, 0.95), rgba(12, 7, 4, 0.98));
    border: 2px solid #a37233;
    border-radius: 8px;
    box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.9), 0 10px 30px rgba(0, 0, 0, 0.75);
}

.palette-img {
    display: block;
    max-width: 100%;
    max-height: 400px;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.85);
}

.brass-bracket {
    position: absolute;
    width: 18px;
    height: 18px;
    border: 3px solid #e0a34b;
    pointer-events: none;
}
.bracket-tl { top: -2px; left: -2px; border-right: none; border-bottom: none; }
.bracket-tr { top: -2px; right: -2px; border-left: none; border-bottom: none; }
.bracket-bl { bottom: -2px; left: -2px; border-right: none; border-top: none; }
.bracket-br { bottom: -2px; right: -2px; border-left: none; border-top: none; }

/* Épilogue */
.center-footer {
    margin-top: 8px;
}
.epilogue-guidance {
    margin: 0 0 8px;
    color: #dfcaa8;
    font-size: 1.22rem;
    line-height: 1.4;
}
.epilogue-guidance strong {
    color: #ffdfa0;
    font-weight: normal;
    text-shadow: 0 0 8px rgba(255, 200, 100, 0.3);
}
.epilogue-ball-container {
    padding: 8px 16px;
    background: rgba(35, 20, 12, 0.45);
    border: 1px dashed rgba(201, 147, 59, 0.4);
    border-radius: 8px;
}
.epilogue-ball {
    margin: 0;
    color: #ffcb73;
    font-size: 1.3rem;
    font-style: italic;
    line-height: 1.45;
    text-shadow: 0 0 12px rgba(255, 180, 50, 0.4);
}

/* --- VANTAUX DU TRIPTYQUE (3D WINGS) --- */
.triptych-wing {
    position: relative;
    width: 385px;
    height: 96%;
    align-self: center;
    transform-style: preserve-3d;
    will-change: transform;
    z-index: 10;
}

.wing-left {
    transform-origin: right center;
    transform: rotateY(180deg) translateZ(0);
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.wing-right {
    transform-origin: left center;
    transform: rotateY(-180deg) translateZ(0);
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* À l'ouverture : les battants s'ouvrent avec un mouvement noble et progressif */
.triptych-overlay.doors-open .wing-left {
    animation: doorOpenLeft 1.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.triptych-overlay.doors-open .wing-right {
    animation: doorOpenRight 1.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* À la fermeture : les battants se rabattent EN PREMIER vers le centre pour fermer le meuble */
.triptych-overlay.closing {
    pointer-events: none;
}

.triptych-overlay.closing .wing-left {
    animation: doorCloseLeft 1.35s cubic-bezier(0.35, 0.05, 0.25, 1) forwards !important;
}

.triptych-overlay.closing .wing-right {
    animation: doorCloseRight 1.35s cubic-bezier(0.35, 0.05, 0.25, 1) forwards !important;
}

.triptych-overlay.closing #triptych-close {
    opacity: 0 !important;
    transform: scale(0.7) rotate(-90deg) !important;
    pointer-events: none !important;
    transition: opacity 0.2s ease, transform 0.25s ease !important;
}

/* Faces des volets (Avant & Arrière) */
.wing-face {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border-radius: 8px;
    overflow: hidden;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.wing-front {
    transform: rotateY(0deg) translateZ(1px);
    padding: 24px 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: center;
    font-family: 'Fondamento', cursive;
}

/* Portes extérieures visibles quand le coffret est fermé */
.wing-back {
    transform: rotateY(180deg) translateZ(1px);
    background: linear-gradient(145deg, #2b170c 0%, #150b06 50%, #201108 100%);
    border: 3px solid #8e5f24;
    box-shadow: inset 0 0 45px rgba(0, 0, 0, 0.95), 0 15px 35px rgba(0, 0, 0, 0.85);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: visible;
}

.exterior-iron-strap {
    position: absolute;
    width: 88%;
    height: 14px;
    background: linear-gradient(180deg, #442a15, #1f1208 60%, #3e2613);
    border: 1px solid #c9933b;
    border-radius: 3px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.75), inset 0 1px 2px rgba(255, 255, 255, 0.2);
}
.strap-top { top: 80px; }
.strap-bottom { bottom: 80px; }

.exterior-lock-plate {
    width: 72px;
    height: 72px;
    background: radial-gradient(circle, #3d2310 0%, #150b05 70%);
    border: 2px solid #e0a34b;
    border-radius: 50%;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.9), inset 0 2px 4px rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
}
.plate-left { margin-left: auto; margin-right: 18px; }
.plate-right { margin-right: auto; margin-left: 18px; }

.exterior-lock-crest {
    font-size: 2.3rem;
    color: #ffd68a;
    text-shadow: 0 0 10px rgba(255, 170, 0, 0.6);
}

/* Volet Gothique */
.gothic-panel {
    background: linear-gradient(145deg, #180d14 0%, #0d060b 55%, #160a12 100%);
    border: 3px solid #a8793b;
    box-shadow: inset -15px 0 25px -5px rgba(0, 0, 0, 0.8), inset 0 0 45px rgba(0, 0, 0, 0.95), inset 0 0 10px rgba(168, 121, 59, 0.3), 0 15px 35px rgba(0, 0, 0, 0.85);
}

/* Volet Steampunk */
.steampunk-panel {
    background: linear-gradient(145deg, #1e1208 0%, #100a04 55%, #1a0f06 100%);
    border: 3px solid #b87b32;
    box-shadow: inset 15px 0 25px -5px rgba(0, 0, 0, 0.8), inset 0 0 45px rgba(0, 0, 0, 0.95), inset 0 0 10px rgba(184, 123, 50, 0.3), 0 15px 35px rgba(0, 0, 0, 0.85);
}

/* En-tête des volets */
.wing-crest {
    font-size: 2.3rem;
    line-height: 1;
    margin-bottom: 6px;
}
.gothic-crest {
    color: #e5a74e;
    text-shadow: 0 0 12px rgba(229, 167, 78, 0.5);
}
.steampunk-crest {
    color: #e5933a;
    display: inline-block;
    animation: gearSpinSlow 20s linear infinite;
    text-shadow: 0 0 12px rgba(229, 147, 58, 0.5);
}

.panel-title {
    margin: 4px 0 8px;
    font-size: 2.1rem;
    line-height: 1.15;
    letter-spacing: 0.5px;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.9);
}
.gothic-title { color: #f5c87a; }
.steampunk-title { color: #f5b967; }

/* Séparateurs enluminés */
.ornate-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 6px 0 12px;
}
.ornate-divider .divider-line {
    flex: 1;
    max-width: 70px;
    height: 1px;
    background: linear-gradient(90deg, transparent, #c9933b, transparent);
}
.ornate-divider .divider-symbol {
    color: #d4a04d;
    font-size: 1.1rem;
}

/* Corps de texte */
.poetic-lead {
    margin: 0 0 10px;
    color: #ffdfa0;
    font-size: 1.25rem;
    font-style: italic;
    line-height: 1.4;
}

.poetic-sub {
    margin: 10px 0 0;
    color: #d8c2aa;
    font-size: 1.15rem;
    line-height: 1.35;
    font-style: italic;
}

/* Pastilles des détails / accessoires */
.details-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 7px;
    list-style: none;
    padding: 0;
    margin: 8px 0;
}

.details-tags li {
    margin: 0;
    padding: 0;
}

.details-tags li span {
    display: inline-block;
    padding: 5px 12px;
    background: rgba(32, 19, 12, 0.78);
    border: 1px solid rgba(212, 160, 77, 0.5);
    border-radius: 14px;
    color: #ffe6ba;
    font-size: 1.16rem;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.6);
    transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.details-tags li span:hover {
    transform: translateY(-2px) scale(1.05);
    background: rgba(212, 160, 77, 0.25);
    border-color: #ffaa00;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.8), 0 0 10px rgba(255, 170, 0, 0.5);
    color: #ffffff;
}

.footer-filigree {
    color: #c9933b;
    font-size: 1.4rem;
    letter-spacing: 4px;
    opacity: 0.85;
}

/* --- CHARNIÈRES MÉCANIQUES D'HORLOGERIE --- */
.mechanical-hinge {
    position: absolute;
    width: 14px;
    height: 48px;
    background: linear-gradient(90deg, #593b16, #b8863b, #593b16);
    border: 1px solid #d4a04d;
    border-radius: 4px;
    z-index: 20;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
}

.hinge-left-top { top: 70px; right: -7px; }
.hinge-left-bottom { bottom: 70px; right: -7px; }
.hinge-right-top { top: 70px; left: -7px; }
.hinge-right-bottom { bottom: 70px; left: -7px; }

.hinge-pin {
    width: 6px;
    height: 100%;
    background: #e8c37d;
    border-radius: 2px;
}

.hinge-gear {
    position: absolute;
    width: 24px;
    height: 24px;
    background: radial-gradient(circle, #ffe6a3 30%, #a8793b 70%);
    border: 1px solid #4a2c0c;
    border-radius: 50%;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
}
.gear-anim-slow { animation: gearSpinSlow 16s linear infinite; }
.gear-anim-rev { animation: gearSpinSlowRev 16s linear infinite; }

/* ==========================================
   DISPOSITIF DE DÉVERROUILLAGE MÉCANIQUE (SERRURE & ROUAGES STEAMPUNK)
   ========================================== */
/* Les deux moitiés du mécanisme steampunk solidaires des vantaux */
.vault-half {
    position: absolute;
    top: 50%;
    margin-top: -160px;
    width: 320px;
    height: 320px;
    pointer-events: none;
    transform-style: preserve-3d;
    z-index: 20;
}

.vault-half-left {
    right: -160px;
    clip-path: polygon(-200px -100px, 160px -100px, 160px 420px, -200px 420px);
}

.vault-half-right {
    left: -160px;
    clip-path: polygon(160px -100px, 520px -100px, 520px 420px, 160px 420px);
}

/* COUCHE 1 : PLAQUE CENTRALE EN FONTE RIVETÉE (Z = 6px) */
.photo-vault-plate {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 190px;
    height: 190px;
    margin-top: -95px;
    margin-left: -95px;
    transform: translateZ(6px);
    filter: drop-shadow(0 8px 22px rgba(0, 0, 0, 0.95));
    pointer-events: none;
}

/* COUCHE 2 : PÊNES MASSIFS CRÉMAILLÈRE EN ACIER & LAITON (Z = 14px) */
.photo-vault-bolt {
    position: absolute;
    top: 50%;
    height: 44px;
    width: 190px;
    margin-top: -22px;
    pointer-events: none;
    object-fit: cover;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.9));
    z-index: 2;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.bolt-left {
    right: 160px;
    transform: translateZ(14px);
}

.bolt-right {
    left: 160px;
    transform: translateZ(14px) scaleX(-1);
}

/* COUCHE 3 : FOURREAUX DE GUIDAGE EN FONTE À RIVETS D'OR (Z = 20px) */
.photo-vault-sleeve {
    position: absolute;
    top: 50%;
    height: 76px;
    width: 38px;
    margin-top: -38px;
    pointer-events: none;
    object-fit: cover;
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.95));
    z-index: 3;
}

.sleeve-left {
    left: 15px;
    transform: translateZ(20px);
}

.sleeve-right {
    right: 15px;
    transform: translateZ(20px) scaleX(-1);
}

/* COUCHE 4 : CLUSTER D'ENGRENAGES EN PROFONDEUR 3D (Z = 24px à 44px) */
.vault-gears-cluster {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    pointer-events: none;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
}

.photo-gear {
    position: absolute;
    pointer-events: none;
    transform-origin: center center;
    will-change: transform;
}

.gear-pinion-1 {
    width: 86px;
    height: 86px;
    top: 50px;
    left: 52px;
    transform: translateZ(24px);
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.9));
    z-index: 5;
}

.gear-escapement {
    width: 76px;
    height: 76px;
    top: 48px;
    right: 52px;
    transform: translateZ(24px);
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.9));
    z-index: 5;
}

/* Roue maîtresse en relief avec ombre portée de découpe */
.gear-master {
    width: 148px;
    height: 148px;
    top: 50%;
    left: 50%;
    margin-top: -74px;
    margin-left: -74px;
    transform: translateZ(32px);
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.95));
    z-index: 6;
}

/* COUCHE 5 : CABOCHON D'AMBRE POLI AU PREMIER PLAN (Z = 44px) */
.vault-core-gem {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 22px;
    height: 22px;
    margin-top: -11px;
    margin-left: -11px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #ffffff 0%, #ffecb0 25%, #ff8c00 65%, #4a1500 100%);
    border: 1.5px solid #ffd485;
    box-shadow: 0 0 14px rgba(255, 170, 0, 0.95), inset 0 1px 3px #fff;
    transform: translateZ(44px);
    z-index: 10;
    transition: box-shadow 0.4s ease, filter 0.4s ease;
}

.vault-unlock-flash {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 160px;
    height: 160px;
    margin-top: -80px;
    margin-left: -80px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 235, 140, 0.95) 0%, rgba(255, 150, 0, 0.5) 45%, transparent 70%);
    opacity: 0;
    transform: scale(0.5);
    pointer-events: none;
    z-index: 10;
}

/* --- ANIMATION DE DÉVERROUILLAGE (ENGRENAGES EN ROTATION & RETRAIT DES PÊNES) --- */
.triptych-overlay.unlocking .gear-master {
    animation: gearUnlockMaster 1.6s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

.triptych-overlay.unlocking .gear-pinion-1 {
    animation: gearUnlockPinion1 1.6s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

.triptych-overlay.unlocking .gear-escapement {
    animation: gearUnlockEscapement 1.6s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

.triptych-overlay.unlocking .bolt-left {
    animation: boltRetractLeft 1.6s cubic-bezier(0.3, 0.05, 0.2, 1) forwards;
}

.triptych-overlay.unlocking .bolt-right {
    animation: boltRetractRight 1.6s cubic-bezier(0.3, 0.05, 0.2, 1) forwards;
}

.triptych-overlay.unlocking .vault-core-gem {
    filter: drop-shadow(0 0 24px #ffaa00) brightness(1.8);
}

.triptych-overlay.unlocking .vault-unlock-flash {
    animation: flashUnlock 0.45s ease 1.45s forwards;
}

/* Position maintenue tant que le coffret est ouvert */
.triptych-overlay.doors-open .bolt-left {
    transform: translateZ(14px) translateX(-105px) !important;
}
.triptych-overlay.doors-open .bolt-right {
    transform: translateZ(14px) scaleX(-1) translateX(-105px) !important;
}
.triptych-overlay.doors-open .gear-master {
    transform: translateZ(32px) rotate(450deg) !important;
}
.triptych-overlay.doors-open .gear-pinion-1 {
    transform: translateZ(24px) rotate(-720deg) !important;
}
.triptych-overlay.doors-open .gear-escapement {
    transform: translateZ(24px) rotate(640deg) !important;
}

/* Fermeture : les portes se rabattent en maintenant le verrou ouvert, puis les rouages s'enclenchent pour reverrouiller */
.triptych-overlay.closing .bolt-left {
    animation: boltLockLeft 2.8s cubic-bezier(0.3, 0.05, 0.2, 1) forwards !important;
}

.triptych-overlay.closing .bolt-right {
    animation: boltLockRight 2.8s cubic-bezier(0.3, 0.05, 0.2, 1) forwards !important;
}

.triptych-overlay.closing .gear-master {
    animation: gearLockMaster 2.8s cubic-bezier(0.25, 0.8, 0.25, 1) forwards !important;
}

.triptych-overlay.closing .gear-pinion-1 {
    animation: gearLockPinion1 2.8s cubic-bezier(0.25, 0.8, 0.25, 1) forwards !important;
}

.triptych-overlay.closing .gear-escapement {
    animation: gearLockEscapement 2.8s cubic-bezier(0.25, 0.8, 0.25, 1) forwards !important;
}

@keyframes boltRetractLeft {
    0% { transform: translateZ(14px) translateX(0); }
    18% { transform: translateZ(14px) translateX(4px); }
    45% { transform: translateZ(14px) translateX(-42px); }
    100% { transform: translateZ(14px) translateX(-105px); }
}

@keyframes boltRetractRight {
    0% { transform: translateZ(14px) scaleX(-1) translateX(0); }
    18% { transform: translateZ(14px) scaleX(-1) translateX(4px); }
    45% { transform: translateZ(14px) scaleX(-1) translateX(-42px); }
    100% { transform: translateZ(14px) scaleX(-1) translateX(-105px); }
}

@keyframes boltLockLeft {
    0%, 48% { transform: translateZ(14px) translateX(-105px); }
    100% { transform: translateZ(14px) translateX(0); }
}

@keyframes boltLockRight {
    0%, 48% { transform: translateZ(14px) scaleX(-1) translateX(-105px); }
    100% { transform: translateZ(14px) scaleX(-1) translateX(0); }
}

@keyframes gearUnlockMaster {
    0% { transform: translateZ(32px) rotate(0deg); }
    18% { transform: translateZ(32px) rotate(-24deg); }
    100% { transform: translateZ(32px) rotate(450deg); }
}

@keyframes gearUnlockPinion1 {
    0% { transform: translateZ(24px) rotate(0deg); }
    18% { transform: translateZ(24px) rotate(38deg); }
    100% { transform: translateZ(24px) rotate(-720deg); }
}

@keyframes gearUnlockEscapement {
    0% { transform: translateZ(24px) rotate(0deg); }
    18% { transform: translateZ(24px) rotate(-32deg); }
    100% { transform: translateZ(24px) rotate(640deg); }
}

@keyframes gearLockMaster {
    0%, 48% { transform: translateZ(32px) rotate(450deg); }
    100% { transform: translateZ(32px) rotate(0deg); }
}

@keyframes gearLockPinion1 {
    0%, 48% { transform: translateZ(24px) rotate(-720deg); }
    100% { transform: translateZ(24px) rotate(0deg); }
}

@keyframes gearLockEscapement {
    0%, 48% { transform: translateZ(24px) rotate(640deg); }
    100% { transform: translateZ(24px) rotate(0deg); }
}

@keyframes flashUnlock {
    0% { opacity: 0; transform: scale(0.6); }
    50% { opacity: 1; transform: scale(1.4); }
    100% { opacity: 0; transform: scale(2.0); }
}

@keyframes doorOpenLeft {
    0% { transform: rotateY(180deg); }
    35% { transform: rotateY(142deg); }
    65% { transform: rotateY(100deg); }
    85% { transform: rotateY(48deg); }
    100% { transform: rotateY(16deg); }
}

@keyframes doorOpenRight {
    0% { transform: rotateY(-180deg); }
    35% { transform: rotateY(-142deg); }
    65% { transform: rotateY(-100deg); }
    85% { transform: rotateY(-48deg); }
    100% { transform: rotateY(-16deg); }
}

@keyframes doorCloseLeft {
    0% { transform: rotateY(16deg); }
    15% { transform: rotateY(48deg); }
    35% { transform: rotateY(100deg); }
    65% { transform: rotateY(142deg); }
    100% { transform: rotateY(180deg); }
}

@keyframes doorCloseRight {
    0% { transform: rotateY(-16deg); }
    15% { transform: rotateY(-48deg); }
    35% { transform: rotateY(-100deg); }
    65% { transform: rotateY(-142deg); }
    100% { transform: rotateY(-180deg); }
}