:root {
    --primary-light: #FFFCF0; /* Crème/blanc cassé */
    --gold: #D4AF37;
    --sand: #847160;
    --dark-papyrus: #5A4A3F;
    --shadow: rgba(0, 0, 0, 0.7);
    --moss-green: #4a5d23;
    --fern-green: #3a5a40;
    --light-moss: #6d8c45;
    --dark-moss: #2c3a14;
}

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

body {
    font-family: 'EB Garamond', serif;
    background-color: #0a0805;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    color: var(--primary-light);
    cursor: default;
}

/* Vignettage pour renforcer l'effet d'éclairage dramatique */
body::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at center, transparent 50%, rgba(0, 0, 0, 0.7) 100%);
    pointer-events: none;
    z-index: 10;
    mix-blend-mode: multiply;
}

/* Effet de poussière de parchemin */
.dust-particle {
    position: absolute;
    background-color: rgba(219, 198, 165, 0.4);
    border-radius: 50%;
    width: 4px;
    height: 4px;
    animation: float 15s infinite linear;
    opacity: 0;
    z-index: 5;
}

@keyframes float {
    0% {
        transform: translateY(100vh) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 0.7;
    }
    90% {
        opacity: 0.7;
    }
    100% {
        transform: translateY(-20vh) rotate(360deg);
        opacity: 0;
    }
}

/* Torches améliorées avec support mural */
.torch {
    position: absolute;
    width: 10px;
    height: 60px;
    background-color: #3A2A15;
    z-index: 5;
    transform: rotate(-5deg);
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.7);
}

/* Support mural décoratif */
.torch::after {
    content: "";
    position: absolute;
    bottom: -12px;
    left: -10px;
    width: 30px;
    height: 25px;
    background-color: #1A1410;
    border-radius: 6px;
    box-shadow: 
        inset 0 1px 3px rgba(255, 200, 50, 0.1), 
        0 2px 5px rgba(0, 0, 0, 0.6);
    z-index: -1;
    transform: perspective(40px) rotateX(30deg);
    background-image: radial-gradient(circle at center, #32281E 10%, #1A1410 90%);
}

/* Flamme améliorée */
.torch-flame {
    position: absolute;
    top: -30px;
    left: -15px;
    width: 35px;
    height: 45px;
    background: 
        radial-gradient(
            ellipse at center bottom, 
            rgba(255, 230, 0, 0.8) 0%, 
            rgba(255, 160, 0, 0.7) 30%, 
            rgba(255, 120, 0, 0.5) 60%, 
            transparent 100%
        );
    box-shadow: 
        0 0 15px 8px rgba(255, 140, 0, 0.5),
        0 0 30px 15px rgba(255, 100, 0, 0.3),
        0 0 45px 20px rgba(255, 50, 0, 0.1);
    border-radius: 50% 50% 30% 30% / 40% 40% 60% 60%;
    filter: blur(2px);
    animation: flame-flicker 5s infinite;
    transform-origin: center bottom;
    z-index: 6;
    mix-blend-mode: screen;
}

/* Lueur interne de la flamme */
.torch-inner-glow {
    position: absolute;
    top: -24px;
    left: -9px;
    width: 22px;
    height: 35px;
    background: rgba(255, 250, 220, 0.8);
    border-radius: 40% 40% 20% 20% / 40% 40% 60% 60%;
    filter: blur(4px);
    opacity: 0.8;
    animation: inner-flame 3s infinite ease-in-out;
    transform-origin: center bottom;
    z-index: 7;
    mix-blend-mode: screen;
}

/* Animation de flamme améliorée */
@keyframes flame-flicker {
    0% { 
        transform: scaleY(1) scaleX(1) rotate(2deg); 
        opacity: 1;
        filter: blur(2px);
    }
    20% { 
        transform: scaleY(1.08) scaleX(0.95) rotate(-1.5deg); 
        opacity: 0.92;
        filter: blur(2.5px);
    }
    40% { 
        transform: scaleY(0.96) scaleX(1.04) rotate(2.5deg); 
        opacity: 0.97;
        filter: blur(2px);
    }
    60% { 
        transform: scaleY(1.05) scaleX(0.98) rotate(-1deg); 
        opacity: 0.95;
        filter: blur(2.2px);
    }
    80% { 
        transform: scaleY(0.97) scaleX(1.02) rotate(1.5deg); 
        opacity: 0.9;
        filter: blur(2.8px);
    }
    100% { 
        transform: scaleY(1) scaleX(1) rotate(2deg); 
        opacity: 1;
        filter: blur(2px);
    }
}

@keyframes inner-flame {
    0%, 100% { 
        transform: scaleY(0.9) scaleX(0.9); 
        opacity: 0.9; 
        filter: blur(4px);
    }
    25% { 
        transform: scaleY(1.1) scaleX(0.85); 
        opacity: 1; 
        filter: blur(3.5px);
    }
    50% { 
        transform: scaleY(0.95) scaleX(1); 
        opacity: 0.95; 
        filter: blur(4.5px);
    }
    75% { 
        transform: scaleY(1.05) scaleX(0.9); 
        opacity: 0.85; 
        filter: blur(4px);
    }
}

/* Lumière de torche projetée sur le mur */
.torch-glow {
    position: absolute;
    width: 270px;
    height: 270px;
    border-radius: 50%;
    background: radial-gradient(
        circle at center,
        rgba(255, 200, 0, 0.55) 0%,
        rgba(255, 160, 0, 0.4) 20%,
        rgba(255, 120, 0, 0.25) 40%,
        rgba(255, 80, 0, 0.15) 60%,
        rgba(255, 50, 0, 0.05) 80%,
        transparent 100%
    );
    z-index: 3;
    animation: glow-pulse 6s infinite alternate ease-in-out;
    pointer-events: none;
    mix-blend-mode: screen;
    filter: blur(5px);
}

/* Ombre portée dynamique */
.torch-shadow {
    position: absolute;
    width: 150px;
    height: 60px;
    background: radial-gradient(ellipse at center, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 70%);
    transform-origin: center center;
    transform: translateY(20px) rotateX(80deg) scale(1, 0.2);
    filter: blur(8px);
    opacity: 0.5;
    animation: shadow-flicker 5s infinite alternate ease-in-out;
    z-index: 2;
}

@keyframes glow-pulse {
    0% { opacity: 0.8; transform: scale(1); filter: blur(5px); }
    20% { opacity: 0.75; transform: scale(1.02); filter: blur(5.5px); }
    40% { opacity: 0.85; transform: scale(0.98); filter: blur(4.5px); }
    60% { opacity: 0.8; transform: scale(1.01); filter: blur(5.2px); }
    80% { opacity: 0.7; transform: scale(0.99); filter: blur(6px); }
    100% { opacity: 0.85; transform: scale(1); filter: blur(5px); }
}

@keyframes shadow-flicker {
    0%, 100% { opacity: 0.5; transform: translateY(20px) rotateX(80deg) scale(1, 0.2); }
    25% { opacity: 0.45; transform: translateY(22px) rotateX(80deg) scale(1.02, 0.19); }
    50% { opacity: 0.55; transform: translateY(18px) rotateX(80deg) scale(0.98, 0.21); }
    75% { opacity: 0.4; transform: translateY(23px) rotateX(80deg) scale(1.01, 0.18); }
}

.torch-left {
    left: 15%;
    top: 30%;
}

.torch-glow-left {
    left: 10%;
    top: 20%;
}

.torch-shadow-left {
    left: 12%;
    bottom: 35%;
}

.torch-right {
    right: 15%;
    top: 30%;
    transform: rotate(5deg);
}

.torch-glow-right {
    right: 10%;
    top: 20%;
}

.torch-shadow-right {
    right: 12%;
    bottom: 35%;
}

/* Effet de texture de mur de temple antique */
.temple-walls {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    background-color: #1a1712;
    overflow: hidden;
}

/* Fond de base pour mur de pierre */
.stone-base {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(to right, 
            rgba(60, 50, 35, 0.8), 
            rgba(75, 65, 45, 0.85) 25%, 
            rgba(65, 55, 40, 0.8) 50%, 
            rgba(80, 70, 50, 0.85) 75%, 
            rgba(60, 50, 35, 0.8) 100%);
    opacity: 0.9;
}

/* Création d'un motif de grosses pierres irrégulières */
.stone-pattern {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='450' height='450' viewBox='0 0 450 450'%3E%3Cpath d='M0,0 L150,0 L170,60 L140,130 L180,200 L120,220 L140,300 L70,320 L50,350 L0,380 Z' fill='rgba(85,75,55,0.4)' stroke='rgba(40,30,20,0.3)' stroke-width='3'/%3E%3Cpath d='M150,0 L300,0 L320,50 L280,100 L310,170 L350,190 L340,270 L280,300 L250,350 L190,370 L140,300 L120,220 L180,200 L140,130 L170,60 Z' fill='rgba(95,85,65,0.4)' stroke='rgba(40,30,20,0.3)' stroke-width='3'/%3E%3Cpath d='M300,0 L450,0 L450,120 L400,150 L420,200 L380,230 L400,290 L350,320 L320,290 L340,270 L350,190 L310,170 L280,100 L320,50 Z' fill='rgba(75,65,45,0.4)' stroke='rgba(40,30,20,0.3)' stroke-width='3'/%3E%3Cpath d='M0,380 L50,350 L70,320 L140,300 L190,370 L250,350 L280,300 L340,270 L320,290 L350,320 L290,380 L240,400 L180,410 L130,450 L50,450 L0,450 Z' fill='rgba(80,70,50,0.4)' stroke='rgba(40,30,20,0.3)' stroke-width='3'/%3E%3Cpath d='M350,320 L400,290 L420,350 L380,420 L450,450 L290,450 L280,420 L350,380 L330,350 Z' fill='rgba(90,80,60,0.4)' stroke='rgba(40,30,20,0.3)' stroke-width='3'/%3E%3Cpath d='M130,450 L180,410 L240,400 L290,380 L280,420 L290,450 Z' fill='rgba(85,75,55,0.4)' stroke='rgba(40,30,20,0.3)' stroke-width='3'/%3E%3C/svg%3E");
    background-size: 450px 450px;
    background-repeat: repeat;
    opacity: 1;
}

/* Surcouche de texture */
.stone-texture {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250' viewBox='0 0 250 250'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.8'/%3E%3C/svg%3E");
    opacity: 0.35;
    mix-blend-mode: multiply;
}

/* Couche de détails */
.stone-details {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600' viewBox='0 0 600 600'%3E%3Cfilter id='roughpaper'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.04' numOctaves='5' result='noise'/%3E%3CfeDiffuseLighting in='noise' lighting-color='white' surfaceScale='4' result='diffLight'%3E%3CfeDistantLight azimuth='45' elevation='35'/%3E%3C/feDiffuseLighting%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23roughpaper)' opacity='0.3'/%3E%3C/svg%3E");
    opacity: 0.6;
    mix-blend-mode: overlay;
}

/* Lignes de mortier */
.mortar-lines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='450' height='450' viewBox='0 0 450 450'%3E%3Cpath d='M0,0 L150,0 L170,60 L140,130 L180,200 L120,220 L140,300 L70,320 L50,350 L0,380 Z' fill='none' stroke='rgba(40,30,20,0.6)' stroke-width='3' stroke-dasharray='5,2'/%3E%3Cpath d='M150,0 L300,0 L320,50 L280,100 L310,170 L350,190 L340,270 L280,300 L250,350 L190,370 L140,300 L120,220 L180,200 L140,130 L170,60 Z' fill='none' stroke='rgba(40,30,20,0.6)' stroke-width='3' stroke-dasharray='4,3'/%3E%3Cpath d='M300,0 L450,0 L450,120 L400,150 L420,200 L380,230 L400,290 L350,320 L320,290 L340,270 L350,190 L310,170 L280,100 L320,50 Z' fill='none' stroke='rgba(40,30,20,0.6)' stroke-width='3' stroke-dasharray='6,2'/%3E%3Cpath d='M0,380 L50,350 L70,320 L140,300 L190,370 L250,350 L280,300 L340,270 L320,290 L350,320 L290,380 L240,400 L180,410 L130,450 L50,450 L0,450 Z' fill='none' stroke='rgba(40,30,20,0.6)' stroke-width='3' stroke-dasharray='4,3'/%3E%3Cpath d='M350,320 L400,290 L420,350 L380,420 L450,450 L290,450 L280,420 L350,380 L330,350 Z' fill='none' stroke='rgba(40,30,20,0.6)' stroke-width='3' stroke-dasharray='5,3'/%3E%3Cpath d='M130,450 L180,410 L240,400 L290,380 L280,420 L290,450 Z' fill='none' stroke='rgba(40,30,20,0.6)' stroke-width='3' stroke-dasharray='3,2'/%3E%3C/svg%3E");
    background-size: 450px 450px;
    background-repeat: repeat;
    opacity: 0.7;
}

/* Pierres individuelles */
.individual-stones {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 1;
}

/* Effet d'ombre et de lumière */
.light-shadow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        linear-gradient(45deg, rgba(0,0,0,0.4) 0%, transparent 40%), 
        linear-gradient(135deg, rgba(0,0,0,0.35) 0%, transparent 40%), 
        linear-gradient(225deg, rgba(0,0,0,0.3) 0%, transparent 40%), 
        linear-gradient(315deg, rgba(0,0,0,0.25) 0%, transparent 40%);
    pointer-events: none;
    opacity: 0.7;
}

/* Fissures et érosion */
.cracks {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1000' height='1000' viewBox='0 0 1000 1000'%3E%3Cpath d='M200,100 C230,170 240,230 220,300 C200,370 220,440 250,500 C280,560 240,620 260,700 C280,780 250,850 220,900' stroke='rgba(0,0,0,0.3)' stroke-width='3' fill='none' stroke-dasharray='2,1'/%3E%3Cpath d='M500,50 C540,120 520,200 480,270 C440,340 460,400 520,450 C580,500 550,570 510,650 C470,730 500,800 550,850' stroke='rgba(0,0,0,0.25)' stroke-width='2.5' fill='none' stroke-dasharray='3,2'/%3E%3Cpath d='M800,200 C760,260 730,320 760,400 C790,480 750,560 700,620 C650,680 670,750 720,800' stroke='rgba(0,0,0,0.28)' stroke-width='2.8' fill='none' stroke-dasharray='3,1'/%3E%3Cpath d='M300,300 C320,350 310,400 340,450 C370,500 350,550 320,600' stroke='rgba(0,0,0,0.22)' stroke-width='1.8' fill='none' stroke-dasharray='2,2'/%3E%3Cpath d='M600,600 C580,650 590,700 620,750 C650,800 630,850 600,900' stroke='rgba(0,0,0,0.2)' stroke-width='1.5' fill='none' stroke-dasharray='1,1'/%3E%3C/svg%3E");
    opacity: 0.5;
    background-size: 1000px 1000px;
    background-repeat: repeat;
    mix-blend-mode: multiply;
}

/* Marques d'usure et érosion */
.weathering {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'%3E%3Cfilter id='distort'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.05' numOctaves='3' seed='10'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='15'/%3E%3C/filter%3E%3Cfilter id='erode'%3E%3CfeMorphology operator='erode' radius='1'/%3E%3C/filter%3E%3Crect x='20' y='20' width='360' height='360' fill='none' stroke='rgba(0,0,0,0.2)' stroke-width='1.5' filter='url(%23distort)'/%3E%3Crect x='100' y='100' width='200' height='200' fill='none' stroke='rgba(0,0,0,0.15)' stroke-width='1.2' filter='url(%23erode)'/%3E%3C/svg%3E");
    opacity: 0.4;
    background-size: 400px 400px;
    mix-blend-mode: multiply;
}

/* Hiéroglyphes */
.hieroglyphs {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0.1;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='20' viewBox='0 0 80 20'%3E%3Cpath d='M10,5 h5 M20,10 v5 M30,5 l5,5 l-5,5 M40,5 a5,5 0 1 0 5,5 M60,10 h10 M70,5 v10 M5,15 h5' stroke='%23D4AF37' stroke-width='0.5' fill='none'/%3E%3C/svg%3E");
    z-index: -1;
    pointer-events: none;
}

/* ======== VÉGÉTATION ======== */
.vegetation-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

/* Plantes grimpantes aux coins */
.climbing-plants {
    position: absolute;
    width: 250px;
    height: 400px;
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.75;
    z-index: 2;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.climbing-left {
    top: -20px;
    left: -20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='400' viewBox='0 0 250 400'%3E%3Cpath d='M20,0 Q40,100 80,180 Q90,200 70,220 Q60,240 80,260 Q100,280 90,300 Q80,320 100,340 Q120,360 110,400' stroke='%233a5a40' stroke-width='3' fill='none'/%3E%3Cpath d='M20,50 Q0,80 30,100 Q40,110 20,120' stroke='%233a5a40' stroke-width='2' fill='none'/%3E%3Cpath d='M40,120 Q20,140 45,155 Q60,165 40,175' stroke='%233a5a40' stroke-width='2' fill='none'/%3E%3Cpath d='M70,240 Q50,260 75,275 Q90,285 70,295' stroke='%233a5a40' stroke-width='2' fill='none'/%3E%3Cpath d='M90,320 Q70,340 95,355 Q110,365 90,375' stroke='%233a5a40' stroke-width='2' fill='none'/%3E%3Cpath d='M60,200 Q40,220 65,235 Q80,245 60,255' stroke='%233a5a40' stroke-width='2' fill='none'/%3E%3Cpath d='M45,155 L50,140 L40,130 L55,135 L45,155' fill='%234a5d23' stroke='%233a5a40' stroke-width='1'/%3E%3Cpath d='M65,235 L70,220 L60,210 L75,215 L65,235' fill='%234a5d23' stroke='%233a5a40' stroke-width='1'/%3E%3Cpath d='M75,275 L80,260 L70,250 L85,255 L75,275' fill='%234a5d23' stroke='%233a5a40' stroke-width='1'/%3E%3Cpath d='M95,355 L100,340 L90,330 L105,335 L95,355' fill='%234a5d23' stroke='%233a5a40' stroke-width='1'/%3E%3Cpath d='M30,100 L35,85 L25,75 L40,80 L30,100' fill='%234a5d23' stroke='%233a5a40' stroke-width='1'/%3E%3C/svg%3E");
    transform-origin: top left;
    animation: vine-movement-left 15s infinite alternate ease-in-out;
}

.climbing-right {
    top: -20px;
    right: -20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='400' viewBox='0 0 250 400'%3E%3Cpath d='M230,0 Q210,100 170,180 Q160,200 180,220 Q190,240 170,260 Q150,280 160,300 Q170,320 150,340 Q130,360 140,400' stroke='%233a5a40' stroke-width='3' fill='none'/%3E%3Cpath d='M230,50 Q250,80 220,100 Q210,110 230,120' stroke='%233a5a40' stroke-width='2' fill='none'/%3E%3Cpath d='M210,120 Q230,140 205,155 Q190,165 210,175' stroke='%233a5a40' stroke-width='2' fill='none'/%3E%3Cpath d='M180,240 Q200,260 175,275 Q160,285 180,295' stroke='%233a5a40' stroke-width='2' fill='none'/%3E%3Cpath d='M160,320 Q180,340 155,355 Q140,365 160,375' stroke='%233a5a40' stroke-width='2' fill='none'/%3E%3Cpath d='M190,200 Q210,220 185,235 Q170,245 190,255' stroke='%233a5a40' stroke-width='2' fill='none'/%3E%3Cpath d='M205,155 L200,140 L210,130 L195,135 L205,155' fill='%234a5d23' stroke='%233a5a40' stroke-width='1'/%3E%3Cpath d='M185,235 L180,220 L190,210 L175,215 L185,235' fill='%234a5d23' stroke='%233a5a40' stroke-width='1'/%3E%3Cpath d='M175,275 L170,260 L180,250 L165,255 L175,275' fill='%234a5d23' stroke='%233a5a40' stroke-width='1'/%3E%3Cpath d='M155,355 L150,340 L160,330 L145,335 L155,355' fill='%234a5d23' stroke='%233a5a40' stroke-width='1'/%3E%3Cpath d='M220,100 L215,85 L225,75 L210,80 L220,100' fill='%234a5d23' stroke='%233a5a40' stroke-width='1'/%3E%3C/svg%3E");
    transform-origin: top right;
    animation: vine-movement-right 17s infinite alternate ease-in-out;
}

@keyframes vine-movement-left {
    0%, 100% { transform: rotate(0deg) scale(1); }
    25% { transform: rotate(-0.5deg) scale(1.01); }
    50% { transform: rotate(0.25deg) scale(0.99); }
    75% { transform: rotate(-0.3deg) scale(1); }
}

@keyframes vine-movement-right {
    0%, 100% { transform: rotate(0deg) scale(1); }
    25% { transform: rotate(0.5deg) scale(1.01); }
    50% { transform: rotate(-0.25deg) scale(0.99); }
    75% { transform: rotate(0.3deg) scale(1); }
}

/* Mousses et lichens */
.moss-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.moss-patch {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(
        ellipse at center,
        rgba(74, 93, 35, 0.4) 0%,
        rgba(58, 90, 64, 0.25) 60%,
        transparent 100%
    );
    filter: blur(3px);
    opacity: 0.5;
    mix-blend-mode: multiply;
}

/* Conteneur pour les petites plantes émergentes */
.emerging-plants {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    overflow: hidden;
}

.plant {
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 2;
}

/* Petites fougères */
.small-ferns {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}

.fern {
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 2;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}

/* Gouttes d'eau */
.water-drop {
    position: absolute;
    width: 4px;
    height: 6px;
    background: radial-gradient(
        ellipse at center,
        rgba(255, 255, 255, 0.9) 0%,
        rgba(200, 230, 255, 0.7) 50%,
        transparent 100%
    );
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    filter: blur(0.5px);
    opacity: 0;
    animation: water-drip 15s infinite;
    z-index: 3;
}

@keyframes water-drip {
    0%, 95%, 100% { opacity: 0; transform: translateY(0); }
    96% { opacity: 0.8; transform: translateY(0); }
    99% { opacity: 0; transform: translateY(30px); }
}

.container {
    background-color: rgba(39, 36, 32, 0.85);
    max-width: 550px;
    width: 85%;
    padding: 3.5rem 3rem;
    border-radius: 8px;
    box-shadow: 
        0 10px 50px var(--shadow),
        0 0 100px rgba(255, 120, 30, 0.1),
        inset 0 0 15px 2px rgba(0, 0, 0, 0.5),
        inset 0 0 5px 1px rgba(212, 175, 55, 0.3);
    text-align: center;
    position: relative;
    z-index: 2;
    overflow: hidden;
    border: 1px solid rgba(90, 74, 63, 0.4);
    display: flex;
    flex-direction: column;
    min-height: 480px;
    transition: all 0.4s ease-in-out;
}

/* Effet de bordure ornementée */
.container::before {
    content: "";
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    border: 6px double var(--gold);
    border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cpath d='M0,0 L100,0 L100,100 L0,100 Z' fill='none' stroke='%23D4AF37' stroke-width='8' stroke-dasharray='15,10,30,10' /%3E%3C/svg%3E") 30 stretch;
    pointer-events: none;
    z-index: 0;
    opacity: 0.2;
}

/* Effet de parchemin ancien amélioré */
.container::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250' viewBox='0 0 250 250'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.15'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'%3E%3Cfilter id='paperTexture'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.04' numOctaves='5' stitchTiles='stitch' result='noise'/%3E%3CfeColorMatrix type='matrix' values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0.3 0' result='coloredNoise'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23paperTexture)' opacity='0.08'/%3E%3C/svg%3E"),
        radial-gradient(#5A4A3F 0.5px, transparent 0.5px),
        radial-gradient(#4A3A2F 0.5px, transparent 0.5px),
        linear-gradient(135deg, rgba(255, 170, 50, 0.1) 0%, transparent 100%),
        linear-gradient(225deg, rgba(255, 100, 30, 0.07) 0%, transparent 100%);
    background-size: 100px 100px, 400px 400px, 20px 20px, 20px 20px, 100% 100%, 100% 100%;
    background-position: 0 0, 0 0, 0 0, 10px 10px, 0 0, 0 0;
    background-blend-mode: overlay, multiply, normal, normal, overlay, overlay;
    border: 2px solid rgba(212, 175, 55, 0.2);
    border-radius: 12px;
    box-shadow: 
        inset 0 0 40px rgba(255, 147, 41, 0.05),
        0 0 20px rgba(255, 147, 41, 0.2);
    pointer-events: none;
    z-index: -1;
    opacity: 0.9;
    animation: containerGlow 10s infinite alternate;
}

/* Effet de lumière dynamique sur le container */
.container-light-effect {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(
        circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
        rgba(255, 200, 100, 0.15) 0%,
        rgba(255, 160, 60, 0.05) 40%,
        transparent 70%
    );
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.5s;
    mix-blend-mode: overlay;
}

.container:hover .container-light-effect {
    opacity: 1;
}

@keyframes containerGlow {
    0% { opacity: 0.9; box-shadow: inset 0 0 40px rgba(255, 147, 41, 0.05), 0 0 20px rgba(255, 147, 41, 0.2); }
    50% { opacity: 1; box-shadow: inset 0 0 50px rgba(255, 147, 41, 0.08), 0 0 30px rgba(255, 147, 41, 0.3); }
    100% { opacity: 0.9; box-shadow: inset 0 0 40px rgba(255, 147, 41, 0.05), 0 0 20px rgba(255, 147, 41, 0.2); }
}

/* Ombres intérieures */
.container-inner-shadow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: 
        inset 10px 10px 20px rgba(0, 0, 0, 0.4),
        inset -10px -10px 20px rgba(0, 0, 0, 0.4);
    pointer-events: none;
    border-radius: 12px;
    z-index: 3;
}

/* Sceaux mystiques dans les coins */
.mystic-seal {
    position: absolute;
    width: 40px;
    height: 40px;
    opacity: 0.3;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    mix-blend-mode: luminosity;
    pointer-events: none;
    z-index: 3;
    animation: sealGlow 8s infinite alternate ease-in-out;
}

.top-left {
    top: 15px;
    left: 15px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='40' fill='none' stroke='%23D4AF37' stroke-width='2'/%3E%3Cpath d='M50,10 L50,90 M10,50 L90,50 M25,25 L75,75 M25,75 L75,25' stroke='%23D4AF37' stroke-width='2'/%3E%3C/svg%3E");
}

.top-right {
    top: 15px;
    right: 15px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='40' fill='none' stroke='%23D4AF37' stroke-width='2'/%3E%3Cpath d='M30,30 L70,70 M30,70 L70,30' stroke='%23D4AF37' stroke-width='2'/%3E%3Ccircle cx='50' cy='50' r='15' fill='none' stroke='%23D4AF37' stroke-width='2'/%3E%3C/svg%3E");
}

.bottom-left {
    bottom: 15px;
    left: 15px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect x='15' y='15' width='70' height='70' fill='none' stroke='%23D4AF37' stroke-width='2'/%3E%3Cpath d='M15,50 L85,50 M50,15 L50,85' stroke='%23D4AF37' stroke-width='2'/%3E%3Ccircle cx='50' cy='50' r='25' fill='none' stroke='%23D4AF37' stroke-width='2'/%3E%3C/svg%3E");
}

.bottom-right {
    bottom: 15px;
    right: 15px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,10 90,50 50,90 10,50' fill='none' stroke='%23D4AF37' stroke-width='2'/%3E%3Ccircle cx='50' cy='50' r='10' fill='none' stroke='%23D4AF37' stroke-width='2'/%3E%3Ccircle cx='50' cy='50' r='30' fill='none' stroke='%23D4AF37' stroke-width='2' stroke-dasharray='5,5'/%3E%3C/svg%3E");
}

@keyframes sealGlow {
    0% { opacity: 0.2; }
    50% { opacity: 0.4; }
    100% { opacity: 0.2; }
}

h1 {
    font-family: 'Cinzel', serif;
    font-size: 3rem;
    color: var(--gold);
    margin-bottom: 1.5rem;
    letter-spacing: 6px;
    position: relative;
    text-align: center;
    text-shadow: 
        0 2px 8px rgba(0, 0, 0, 0.7),
        0 0 30px rgba(255, 150, 50, 0.15);
    padding-bottom: 0.5rem;
    font-weight: 700;
    animation: titleGlow 4s infinite alternate;
}

h1::after {
    content: "";
    display: block;
    width: 120px;
    height: 3px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(212, 175, 55, 0.3) 20%, 
        var(--gold) 50%, 
        rgba(212, 175, 55, 0.3) 80%, 
        transparent 100%);
    margin: 20px auto 0;
    box-shadow: 0 2px 10px rgba(255, 170, 50, 0.3);
}

@keyframes titleGlow {
    0%, 100% { text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7), 0 0 30px rgba(255, 150, 50, 0.15); }
    50% { text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7), 0 0 40px rgba(255, 150, 50, 0.25); }
}

.key-form {
    margin: 2.5rem 0;
    min-height: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.key-container {
    background-color: rgba(55, 45, 35, 0.7);
    border: 1px solid rgba(212, 175, 55, 0.3);
    padding: 0;
    border-radius: 6px;
    display: flex;
    align-items: center;
    margin-bottom: 2rem;
    box-shadow: 
        inset 0 1px 3px rgba(0, 0, 0, 0.4),
        0 2px 10px rgba(255, 140, 30, 0.05);
    transition: all 0.4s;
    position: relative;
    overflow: hidden;
    width: 80%;
}

/* Effet de lumière amélioré sur le champ de saisie */
.key-container::before {
    content: "";
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    background: radial-gradient(
        ellipse at 50% 50%,
        rgba(255, 140, 30, 0.1) 0%,
        rgba(255, 140, 30, 0.05) 40%,
        transparent 70%
    );
    opacity: 0;
    transition: opacity 0.5s;
    z-index: -1;
    pointer-events: none;
}

/* Animation améliorée pour le focus */
.key-container:focus-within {
    border-color: var(--gold);
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.4);
    transform: translateY(-2px);
}

.key-container:focus-within::before {
    opacity: 1;
}

/* Éclairage spécial sur focus */
.key-container:focus-within .key-icon::before {
    text-shadow: 0 0 15px rgba(255, 215, 0, 0.8);
    color: #FFFCF0;
}

.key-icon {
    padding: 0 15px;
    font-size: 1.3rem;
    color: var(--gold);
    border-right: 1px solid rgba(90, 74, 63, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}

.key-icon::before {
    content: "𓂧";
    font-family: serif;
    font-size: 1.5rem;
    text-shadow: 0 0 5px rgba(212, 175, 55, 0.5);
    animation: keyGlow 3s infinite alternate;
    transition: all 0.4s;
}

@keyframes keyGlow {
    0%, 100% { text-shadow: 0 0 5px rgba(212, 175, 55, 0.5); }
    50% { text-shadow: 0 0 8px rgba(255, 200, 100, 0.7); }
}

input[type="password"] {
    flex: 1;
    background-color: transparent;
    border: none;
    padding: 16px;
    font-family: 'EB Garamond', serif;
    font-size: 1.2rem;
    color: var(--primary-light);
    width: 100%;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    transition: all 0.3s;
    letter-spacing: 1px;
}

input[type="password"]::placeholder {
    color: rgba(230, 210, 168, 0.4);
    font-style: italic;
    transition: opacity 0.3s;
}

input[type="password"]:focus {
    outline: none;
}

input[type="password"]:focus::placeholder {
    opacity: 0.5;
}

button {
    background-color: rgba(39, 36, 32, 0.7);
    color: var(--gold);
    border: 1px solid rgba(212, 175, 55, 0.5);
    border-radius: 6px;
    padding: 14px 40px;
    font-family: 'Cinzel', serif;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.4s ease;
    letter-spacing: 2px;
    box-shadow: 
        0 4px 8px rgba(0, 0, 0, 0.2),
        0 0 15px rgba(212, 175, 55, 0.1),
        inset 0 1px 2px rgba(212, 175, 55, 0.1);
    position: relative;
    overflow: hidden;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    margin-top: 1rem;
}

/* Effet sur le bouton */
button::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        to bottom right,
        rgba(255, 255, 255, 0) 0%,
        rgba(212, 175, 55, 0.1) 40%,
        rgba(212, 175, 55, 0.12) 60%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: rotate(45deg);
    z-index: 1;
    transition: all 0.7s ease;
}

button:hover {
    background-color: rgba(45, 40, 35, 0.8);
    transform: translateY(-3px);
    box-shadow: 
        0 8px 16px rgba(0, 0, 0, 0.3),
        0 0 20px rgba(212, 175, 55, 0.2),
        inset 0 1px 4px rgba(212, 175, 55, 0.15);
    border-color: rgba(212, 175, 55, 0.7);
    color: #FFFCF0;
}

button:hover::before {
    left: 150%;
    transition: all 0.8s ease;
}

button:active {
    transform: translateY(1px);
    box-shadow: 
        0 3px 6px rgba(0, 0, 0, 0.3),
        0 0 8px rgba(212, 175, 55, 0.1);
    transition: all 0.1s ease;
}

/* Auréole de lumière autour du bouton */
button::after {
    content: "";
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    background: radial-gradient(
        ellipse at center,
        rgba(212, 175, 55, 0.1) 0%,
        rgba(212, 175, 55, 0.05) 60%,
        transparent 80%
    );
    border-radius: 12px;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.4s ease;
}

button:hover::after {
    opacity: 1;
}

.footer-container {
    color: var(--gold);
    margin-top: auto;
    padding-top: 2rem;
    font-size: 0.9rem;
    text-align: center;
    letter-spacing: 1.5px;
    padding-bottom: 0.5rem;
    border-top: 1px solid rgba(212, 175, 55, 0.15);
    position: relative;
    bottom: 0;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    opacity: 0.7;
    transition: opacity 0.3s;
}

.footer-container:hover {
    opacity: 1;
}

/* Animation de secousse pour erreur */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

.shake {
    animation: shake 0.5s;
}

/* Effet de vieillissement */
.aging-spots {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

.spot {
    position: absolute;
    background-color: rgba(165, 132, 105, 0.15);
    border-radius: 50%;
    z-index: 3;
}

/* Effet de lumière de torche */
.light-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(
            circle at 15% 35%, 
            rgba(255, 147, 41, 0.4) 0%, 
            rgba(255, 120, 30, 0.15) 20%, 
            rgba(100, 50, 10, 0.05) 50%,
            rgba(0, 0, 0, 0) 70%
        ),
        radial-gradient(
            circle at 85% 35%, 
            rgba(255, 147, 41, 0.4) 0%, 
            rgba(255, 120, 30, 0.15) 20%, 
            rgba(100, 50, 10, 0.05) 50%,
            rgba(0, 0, 0, 0) 70%
        ),
        radial-gradient(
            circle at center, 
            rgba(50, 30, 10, 0.3) 0%,
            rgba(20, 10, 5, 0.6) 70%,
            rgba(5, 2, 0, 0.8) 100%
        );
    pointer-events: none;
    z-index: 2;
    mix-blend-mode: multiply;
    animation: torchLight 8s infinite alternate;
}

@keyframes torchLight {
    0% { opacity: 0.95; }
    50% { opacity: 0.9; }
    100% { opacity: 0.97; }
}

/* Nouvelles animations de succès pour l'authentification */
.auth-success {
    animation: success-glow 1.2s forwards;
}

.success-light {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at center, 
        rgba(255, 215, 0, 0.8) 0%,
        rgba(212, 175, 55, 0.6) 30%, 
        rgba(212, 175, 55, 0) 70%);
    z-index: 10;
    opacity: 0;
    animation: success-light 1.2s forwards;
    pointer-events: none;
    mix-blend-mode: screen;
}

@keyframes success-glow {
    0% { transform: scale(1); box-shadow: 0 10px 50px var(--shadow), 0 0 100px rgba(255, 120, 30, 0.1); }
    50% { transform: scale(1.03); box-shadow: 0 10px 50px var(--shadow), 0 0 150px rgba(255, 215, 0, 0.5); }
    100% { transform: scale(1.05); box-shadow: 0 10px 50px var(--shadow), 0 0 200px rgba(255, 215, 0, 0.8); opacity: 0; }
}

@keyframes success-light {
    0% { opacity: 0; }
    40% { opacity: 0.3; }
    80% { opacity: 0.8; }
    100% { opacity: 1; }
}

/* ======== STYLES POUR LA BIBLIOTHÈQUE ======== */

/* Styles spécifiques pour la bibliothèque qui s'ajoutent aux styles existants */
.bibliotheque-container {
    background-color: rgba(25, 22, 18, 0.95);
    max-width: 1400px;
    width: 98%;
    margin: 0 auto;
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 8px;
    padding: 25px;
    box-shadow: 
        0 10px 50px var(--shadow),
        0 0 100px rgba(255, 120, 30, 0.05),
        inset 0 0 15px 2px rgba(0, 0, 0, 0.5),
        inset 0 0 5px 1px rgba(212, 175, 55, 0.3);
    position: relative;
    z-index: 5;
    overflow: hidden;
    animation: fadeIn 0.8s ease-out;
}

/* Animation d'apparition pour le contenu */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Effet de texture pour le container */
.bibliotheque-container::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.05'/%3E%3C/svg%3E"),
        linear-gradient(135deg, rgba(40, 35, 25, 0.4) 0%, transparent 100%),
        linear-gradient(225deg, rgba(60, 50, 35, 0.2) 0%, transparent 70%);
    z-index: -1;
    opacity: 0.8;
    pointer-events: none;
}

/* Effet de mur de temple pour la bibliothèque */
.temple-walls-bibliotheque {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    background-color: #0a0805;
    overflow: hidden;
}

/* Fond de base plus sombre pour bibliothèque */
body {
    background-color: #0a0805;
    background-image: linear-gradient(to bottom, rgba(15, 10, 5, 0.9) 0%, rgba(5, 3, 0, 0.95) 100%);
}

/* Vignettage plus fort pour la bibliothèque */
body::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at center, transparent 50%, rgba(0, 0, 0, 0.7) 100%);
    pointer-events: none;
    z-index: 1;
    mix-blend-mode: multiply;
}

/* Effet de bordure élégante pour la bibliothèque */
.elegant-border {
    position: fixed;
    top: 20px;
    left: 20px;
    right: 20px;
    bottom: 20px;
    z-index: 0;
    pointer-events: none;
    border: 1px solid rgba(212, 175, 55, 0.1);
    box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.7);
    opacity: 0.4;
}

/* Styles pour le tableau de documents */
.documents-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
}

.documents-table th {
    text-align: left;
    padding: 15px 10px;
    border-bottom: 1px solid rgba(212, 175, 55, 0.3);
    color: var(--gold);
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s;
    letter-spacing: 1px;
    background: linear-gradient(to bottom, rgba(40, 35, 25, 0.5) 0%, rgba(30, 25, 20, 0) 100%);
}

.documents-table th:hover {
    background-color: rgba(50, 45, 35, 0.6);
}

.sort-arrow {
    display: inline-block;
    margin-left: 5px;
    opacity: 0.8;
    color: var(--gold);
}

.documents-table tr:nth-child(even) {
    background-color: rgba(40, 35, 25, 0.3);
}

.documents-table td {
    padding: 12px 10px;
    border-bottom: 1px solid rgba(70, 60, 40, 0.3);
}

.documents-table tr:hover {
    background-color: rgba(70, 60, 40, 0.3);
    box-shadow: inset 0 0 5px rgba(212, 175, 55, 0.1);
}

/* Barre d'en-tête avec recherche et bouton de déconnexion */
.header-bar {
    display: flex;
    justify-content: space-between;
    margin-bottom: 25px;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid rgba(212, 175, 55, 0.15);
    flex-wrap: wrap;
    gap: 15px;
}

.welcome-text {
    flex-grow: 1;
    padding: 10px 0;
    font-size: 1.2rem;
    cursor: pointer;
    transition: color 0.3s;
}

.welcome-text:hover {
    color: var(--gold);
}

.welcome-name {
    color: var(--gold);
    font-weight: 600;
    text-shadow: 0 0 5px rgba(212, 175, 55, 0.3);
}

/* Barre de recherche améliorée */
.search-bar {
    display: flex;
    align-items: center;
    position: relative;
    margin-right: 15px;
    min-width: 300px;
    max-width: 100%;
}

.search-input {
    background-color: rgba(30, 25, 20, 0.7);
    border: 1px solid rgba(212, 175, 55, 0.2);
    color: var(--primary-light);
    padding: 10px 15px;
    padding-left: 40px;
    border-radius: 6px;
    width: 100%;
    font-family: 'EB Garamond', serif;
    font-size: 1rem;
    transition: all 0.4s ease;
    outline: none;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.2);
}

.search-input:focus {
    border-color: var(--gold);
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.15), inset 0 2px 5px rgba(0, 0, 0, 0.2);
}

.search-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
    font-style: italic;
}

.search-icon {
    position: absolute;
    left: 12px;
    color: var(--gold);
    opacity: 0.7;
    font-size: 1.2rem;
    pointer-events: none;
}

/* Bouton de déconnexion amélioré */
.logout-btn {
    background-color: rgba(39, 36, 32, 0.7);
    color: var(--gold);
    border: 1px solid rgba(212, 175, 55, 0.5);
    border-radius: 6px;
    padding: 10px 20px;
    text-decoration: none;
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.4s ease;
    letter-spacing: 2px;
    box-shadow: 
        0 4px 8px rgba(0, 0, 0, 0.2),
        0 0 15px rgba(212, 175, 55, 0.1),
        inset 0 1px 2px rgba(212, 175, 55, 0.1);
    position: relative;
    overflow: hidden;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.logout-btn:hover {
    background-color: rgba(45, 40, 35, 0.8);
    transform: translateY(-2px);
    box-shadow: 
        0 8px 16px rgba(0, 0, 0, 0.3),
        0 0 20px rgba(212, 175, 55, 0.2),
        inset 0 1px 4px rgba(212, 175, 55, 0.15);
    border-color: rgba(212, 175, 55, 0.7);
    color: #FFFCF0;
}

.logout-btn:before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        to bottom right,
        rgba(255, 255, 255, 0) 0%,
        rgba(212, 175, 55, 0.1) 40%,
        rgba(212, 175, 55, 0.12) 60%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: rotate(45deg);
    z-index: 1;
    transition: all 0.7s ease;
    opacity: 0.5;
}

.logout-btn:hover:before {
    left: 150%;
    transition: all 0.8s ease;
}

/* Liens de fichier et icônes */
.file-name {
    color: var(--primary-light);
    text-decoration: none;
    padding: 5px 0;
    display: inline-block;
    width: 100%;
    transition: color 0.3s;
}

.file-name:hover {
    color: var(--gold);
}

.file-icon {
    display: inline-block;
    margin-right: 10px;
    width: 24px;
    height: 24px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle;
    opacity: 0.9;
}

/* Icônes des types de fichiers */
.file-pdf {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23D4AF37' d='M12,16L12,16a1,1,0,0,1-1-1V11a1,1,0,0,1,1-1h0a1,1,0,0,1,1,1v4A1,1,0,0,1,12,16Z'/%3E%3Cpath fill='%23D4AF37' d='M12,8a1,1,0,1,0-1-1A1,1,0,0,0,12,8Z'/%3E%3Cpath fill='%23D4AF37' d='M21,4H17.9A4.87,4.87,0,0,0,13.31,2H10.69A4.87,4.87,0,0,0,6.1,4H3A1,1,0,0,0,2,5V19a1,1,0,0,0,1,1H21a1,1,0,0,0,1-1V5A1,1,0,0,0,21,4Z'/%3E%3C/svg%3E");
}

.file-doc, .file-docx {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23D4AF37' d='M21,7H17V4c0-1.7-1.3-3-3-3H10C8.3,1,7,2.3,7,4v3H3C1.9,7,1,7.9,1,9v10c0,1.1,0.9,2,2,2h18c1.1,0,2-0.9,2-2V9C23,7.9,22.1,7,21,7z M9,4c0-0.6,0.4-1,1-1h4c0.6,0,1,0.4,1,1v3H9V4z M21,19H3V9h18V19z'/%3E%3Cpath fill='%23D4AF37' d='M16,12H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,12,16,12z'/%3E%3Cpath fill='%23D4AF37' d='M16,15H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,15,16,15z'/%3E%3C/svg%3E");
}

.file-xls, .file-xlsx {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23D4AF37' d='M21,5c0-1.1-0.9-2-2-2H5C3.9,3,3,3.9,3,5v14c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2V5z M9.5,15H7.9l2.1-3L8,9h1.5l1,2.2l1-2.2H12L9.9,12l2.1,3h-1.5l-1-2.2L9.5,15z M17,13h-4v-1h4V13z M17,10h-4V9h4V10z M17,16h-4v-1h4V16z'/%3E%3C/svg%3E");
}

.file-ppt, .file-pptx {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23D4AF37' d='M19,3H5C3.9,3,3,3.9,3,5v14c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2V5C21,3.9,20.1,3,19,3z M16,13h-3v5h-2v-5H8v-2h8V13z M10.4,7.2C10.4,6.4,11,6,12,6s1.6,0.4,1.6,1.2c0,0.8-0.6,1.2-1.6,1.2S10.4,8,10.4,7.2z'/%3E%3C/svg%3E");
}

.file-txt {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23D4AF37' d='M20,2H4C2.9,2,2,2.9,2,4l0,16c0,1.1,0.9,2,2,2h16c1.1,0,2-0.9,2-2V4C22,2.9,21.1,2,20,2z M15,14H9v-2h6V14z M18,10H6V8h12V10z M18,6H6V4h12V6z'/%3E%3C/svg%3E");
}

/* Styles pour les titres et auteurs */
.document-title {
    font-weight: 600;
    color: var(--primary-light);
}

.document-author {
    color: #cccccc;
    display: block;
    font-style: italic;
}

.document-year {
    color: #999999;
    display: block;
    text-align: center;
    white-space: nowrap;
}

/* Pied de page */
.footer {
    text-align: center;
    margin-top: 30px;
    font-family: 'Cinzel', serif;
    font-size: 0.8rem;
    color: var(--gold);
    letter-spacing: 1px;
    opacity: 0.6;
    padding: 15px 0 5px;
    border-top: 1px solid rgba(212, 175, 55, 0.15);
    transition: opacity 0.3s;
    font-weight: 300;
}

.footer:hover {
    opacity: 0.9;
}

/* Popup de contact */
.contact-popup {
    display: none;
    position: absolute;
    z-index: 100;
    background-color: rgba(20, 18, 15, 0.95);
    border: 1px solid var(--gold);
    border-radius: 6px;
    padding: 20px;
    box-shadow: 
        0 5px 15px rgba(0, 0, 0, 0.5),
        0 0 30px rgba(212, 175, 55, 0.2),
        inset 0 1px 3px rgba(212, 175, 55, 0.1);
    max-width: 320px;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    animation: fadeIn 0.3s ease-out;
}

.popup-title {
    font-size: 1.4rem;
    color: var(--gold);
    margin-bottom: 15px;
    font-family: 'Cinzel', serif;
    letter-spacing: 1px;
}

.contact-info {
    margin: 12px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.info-label {
    color: #aaa;
    margin-right: 10px;
    font-size: 0.95rem;
}

.info-value {
    color: var(--primary-light);
    font-weight: 600;
}

.popup-close {
    position: absolute;
    top: 10px;
    right: 10px;
    color: #999;
    cursor: pointer;
    font-size: 1.2rem;
    line-height: 1;
    transition: color 0.3s;
}

.popup-close:hover {
    color: var(--gold);
}

/* Titre principal embelli */
.bibliotheque-container h1 {
    margin-bottom: 1.5rem;
    position: relative;
    text-shadow: 
        0 2px 8px rgba(0, 0, 0, 0.7),
        0 0 30px rgba(255, 150, 50, 0.15);
    animation: titleGlow 4s infinite alternate;
}

/* Animation d'or scintillant pour le titre */
@keyframes titleGlow {
    0%, 100% { 
        color: var(--gold);
        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
    }
    50% { 
        color: #ffdc73;
        text-shadow: 0 0 15px rgba(255, 215, 0, 0.5), 0 0 30px rgba(255, 215, 0, 0.2);
    }
}

/* Effet de ligne dorée sous le titre */
.bibliotheque-container h1::after {
    content: "";
    display: block;
    width: 120px;
    height: 3px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(212, 175, 55, 0.3) 20%, 
        var(--gold) 50%, 
        rgba(212, 175, 55, 0.3) 80%, 
        transparent 100%);
    margin: 20px auto 0;
    box-shadow: 0 2px 10px rgba(255, 170, 50, 0.3);
}

/* ===================================== */
/*          MEDIA QUERIES             */
/* ===================================== */

/* -------- Tablettes (<= 768px) -------- */
@media (max-width: 768px) {
    body {
        align-items: flex-start; /* Aligner le contenu en haut sur tablette/mobile */
        padding-top: 5vh;
        height: auto;
        min-height: 100vh;
    }

    .container {
        width: 90%;
        padding: 2.5rem 2rem;
        min-height: auto;
        max-width: 600px;
    }

    h1 {
        font-size: 2.2rem;
        letter-spacing: 4px;
        margin-bottom: 1rem;
    }

    h1::after {
        width: 100px;
        margin-top: 15px;
    }

    .key-form {
        margin: 1.5rem 0;
        min-height: auto;
    }

    .key-container {
        width: 90%;
        margin-bottom: 1.5rem;
    }

    input[type="password"] {
        font-size: 1.1rem;
        padding: 14px;
    }

    button {
        font-size: 1rem;
        padding: 12px 30px;
        letter-spacing: 1.5px;
    }

    .footer-container {
        font-size: 0.8rem;
        padding-top: 1.5rem;
    }

    /* Réduire les effets coûteux */
    .torch-glow, .torch-shadow, .light-overlay {
        /* Désactiver le suivi curseur (JS gère déjà) mais aussi l'animation */
        animation: none;
        opacity: 0.7; /* Opacité fixe */
    }

    .torch {
        /* Simplifier les torches */
        left: 5%; 
        right: 5%;
        top: 15%;
        width: 8px;
        height: 50px;
    }
    .torch-left { right: auto; }
    .torch-right { left: auto; }

    .torch-flame {
        width: 30px;
        height: 40px;
        left: -12px;
        top: -25px;
        animation: flame-flicker 7s infinite; /* Ralentir l'animation */
        filter: blur(1.5px); 
    }
    .torch-inner-glow {
        width: 18px;
        height: 30px;
        left: -7px;
        top: -20px;
        animation: inner-flame 4s infinite ease-in-out;
        filter: blur(3px);
    }

    .temple-walls .stone-texture, 
    .temple-walls .stone-details,
    .temple-walls .mortar-lines,
    .temple-walls .cracks,
    .temple-walls .weathering,
    .temple-walls .hieroglyphs {
        opacity: 0.3; /* Réduire l'intensité des textures murales */
    }
    
    .vegetation-container .climbing-plants, 
    .vegetation-container .moss-patch {
        opacity: 0.5; /* Réduire la visibilité de la végétation */
        animation: none; /* Désactiver les animations de végétation */
    }

    /* Styles bibliothèque spécifiques tablette */
    .bibliotheque-container {
        width: 95%;
        padding: 20px;
    }

    .header-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .search-bar {
        width: 100%;
        margin-right: 0;
        min-width: auto;
    }

    .logout-btn {
        align-self: flex-end;
    }

    .documents-table th, .documents-table td {
        padding: 10px 8px;
        font-size: 0.9rem;
    }
}

/* -------- Mobiles (<= 480px) -------- */
@media (max-width: 480px) {
    body {
        padding-top: 3vh;
    }

    .container {
        width: 95%;
        padding: 1.5rem 1rem;
    }

    h1 {
        font-size: 1.8rem;
        letter-spacing: 3px;
    }
    
    h1::after {
        width: 80px;
        height: 2px;
        margin-top: 10px;
    }

    .key-container {
        width: 100%;
    }

    .key-icon {
        padding: 0 12px;
        font-size: 1.1rem;
    }
     .key-icon::before {
        font-size: 1.3rem;
        animation: none; /* Désactiver lueur clé */
        text-shadow: none;
    }

    input[type="password"] {
        font-size: 1rem;
        padding: 12px;
    }

    button {
        width: 100%;
        padding: 12px 20px;
        font-size: 0.9rem;
    }

    .footer-container {
        font-size: 0.7rem;
        letter-spacing: 1px;
    }

    /* Désactiver/Simplifier plus d'effets */
    .torch, .torch-flame, .torch-inner-glow, .torch-glow, .torch-shadow {
        display: none; /* Cacher les torches complètement */
    }

    .dust-particle {
        display: none; /* Cacher les particules de poussière */
    }

    .aging-spots, .mystic-seal {
        display: none; /* Cacher taches et sceaux */
    }
    
    .temple-walls * { /* Simplifier mur au maximum */
        background-image: none !important; /* !important pour surcharger les SVG inline */
        opacity: 0.6;
    }
    .temple-walls .stone-base {
        background: #1a1712;
    }
    
    .vegetation-container { 
        display: none; /* Cacher toute la végétation */
    }

    .container::before, .container::after {
        opacity: 0.1; /* Réduire bordure et texture container */
    }
    .container {
        box-shadow: 0 5px 20px var(--shadow); /* Ombre simple */
        border: 1px solid rgba(90, 74, 63, 0.2);
    }
    .container-inner-shadow {
        display: none;
    }

    /* Styles bibliothèque mobile */
    .bibliotheque-container {
        padding: 15px 10px;
    }
    
    .bibliotheque-container h1 {
        font-size: 1.5rem;
    }
    .bibliotheque-container h1::after {
        display: none;
    }

    .header-bar {
        padding: 10px 0;
        margin-bottom: 15px;
    }

    .welcome-text {
        font-size: 1rem;
    }
    .logout-btn {
        font-size: 0.9rem;
        padding: 8px 15px;
    }
    .search-input {
        font-size: 0.9rem;
        padding: 8px 12px;
        padding-left: 30px;
    }
    .search-icon {
        font-size: 1rem;
        left: 10px;
    }
    
    .documents-table th, .documents-table td {
        font-size: 0.8rem;
        padding: 8px 5px;
    }
    .file-icon {
        width: 18px;
        height: 18px;
        margin-right: 5px;
    }
}