/* ============================================
   RESET & BASE
   ============================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --dark-bg: #0a0a0f;
    --dark-purple: #1a0d2e;
    --purple: #6b3fa0;
    --light-purple: #9b6fc4;
    --pink: #d890c7;
    --gold: #d4af37;
    --teal: #4ecdc4;
    --text-light: #f0e6f7;
    --text-dim: #b8a5c9;
}

body {
    font-family: 'Playfair Display', serif;
    background: transparent;
    color: var(--text-light);
    overflow: hidden;
    height: 100vh;
    position: relative;
    margin: 0;
    padding: 0;
}


/* ============================================
   LE TERRIER - Minimal (3 objets, intuition)
   ============================================ */
.terrier-minimal {
    background: radial-gradient(1200px circle at 30% 20%, rgba(107, 63, 160, 0.18) 0%, transparent 55%),
                radial-gradient(900px circle at 80% 70%, rgba(78, 205, 196, 0.12) 0%, transparent 60%),
                linear-gradient(135deg, rgba(10, 10, 15, 1) 0%, rgba(20, 10, 30, 1) 45%, rgba(10, 10, 15, 1) 100%);
    position: relative;
    overflow: hidden;
}

.terrier-with-video {
    background: transparent;
}

.terrier-with-video .terrier-bg-video {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    z-index: 0;
    opacity: 0.55;
    pointer-events: none;
    filter: contrast(1.05) saturate(1.05);
}

.terrier-with-video::before {
    /* voile sombre par-dessus la vidéo */
    z-index: 1;
}

.terrier-with-video::after {
    z-index: 2;
}

.terrier-intro {
    max-width: 760px;
    text-align: center;
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.25rem, 2.8vw, 1.9rem);
    line-height: 1.9;
    color: rgba(240, 230, 247, 0.92);
    text-shadow: 0 2px 18px rgba(0,0,0,0.7);
    min-height: 160px;
    opacity: 1;
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.terrier-intro.is-faded {
    opacity: 0;
    transform: translateY(-8px);
}

.terrier-objects.is-hidden {
    opacity: 0;
    transform: translateY(12px);
}

.terrier-objects.is-visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.terrier-minimal::before {
    content: '';
    position: fixed;
    inset: 0;
    background: radial-gradient(circle at 50% 40%, rgba(240, 230, 247, 0.06) 0%, transparent 55%);
    opacity: 0.8;
    animation: terrierMist 10s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}

.terrier-minimal::after {
    content: '';
    position: fixed;
    inset: 0;
    background-image:
        linear-gradient(0deg, rgba(255,255,255,0.025) 0%, rgba(255,255,255,0) 40%, rgba(255,255,255,0.025) 100%),
        radial-gradient(circle at 20% 30%, rgba(255,255,255,0.02) 0%, transparent 35%),
        radial-gradient(circle at 70% 80%, rgba(255,255,255,0.018) 0%, transparent 40%);
    mix-blend-mode: overlay;
    opacity: 0.6;
    animation: terrierGrain 6s steps(10) infinite;
    pointer-events: none;
    z-index: 2;
}

@keyframes terrierMist {
    0%, 100% { transform: translate3d(0,0,0); filter: blur(0px); }
    50% { transform: translate3d(0,-14px,0); filter: blur(1px); }
}

@keyframes terrierGrain {
    0%, 100% { transform: translate3d(0,0,0); }
    10% { transform: translate3d(-1%, 1%, 0); }
    20% { transform: translate3d(1%, -1%, 0); }
    30% { transform: translate3d(-1.5%, -0.5%, 0); }
    40% { transform: translate3d(0.5%, 1.5%, 0); }
    50% { transform: translate3d(1.5%, 0.5%, 0); }
    60% { transform: translate3d(-0.5%, -1.5%, 0); }
    70% { transform: translate3d(1%, 1%, 0); }
    80% { transform: translate3d(-1%, -1%, 0); }
    90% { transform: translate3d(0.5%, -0.5%, 0); }
}

.terrier-minimal .scene {
    z-index: 5;
}

.terrier-minimal-container {
    position: relative;
    z-index: 10;
    width: min(95%, 95vw);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 2.25rem;
    padding-top: clamp(1rem, 3vh, 2rem);
    box-sizing: border-box;
}

.terrier-minimal-container.has-selection {
    justify-content: flex-start;
    padding-top: clamp(4rem, 8vh, 6rem);
    gap: 0.5rem;
}

.terrier-objects {
    display: flex;
    gap: clamp(1.2rem, 4vw, 3rem);
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    position: relative;
    transition: all 0.8s ease;
    margin: 2rem auto;
}

.terrier-objects.moved-up {
    position: fixed;
    top: clamp(0.5rem, 2vh, 1rem);
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    margin: 0;
    gap: clamp(0.6rem, 1.5vw, 1.2rem);
}

.terrier-object {
    width: clamp(90px, 12vw, 140px);
    height: clamp(90px, 12vw, 140px);
    border-radius: 999px;
    border: 1.5px solid rgba(212, 175, 55, 0.22);
    background: rgba(26, 13, 46, 0.25);
    backdrop-filter: blur(10px);
    color: var(--text-light);
    cursor: pointer;
    transition: transform 0.35s ease, opacity 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease, background 0.35s ease;
    box-shadow: 0 0 30px rgba(107, 63, 160, 0.18);
    position: relative;
    overflow: hidden;
    touch-action: manipulation;
}

.terrier-object::before {
    content: '';
    position: absolute;
    inset: -40%;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.10) 0%, transparent 55%);
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
}

.terrier-object:hover {
    transform: translateY(-8px) scale(1.03);
    border-color: rgba(212, 175, 55, 0.5);
    box-shadow: 0 0 40px rgba(212, 175, 55, 0.22), 0 0 70px rgba(107, 63, 160, 0.22);
    background: rgba(26, 13, 46, 0.32);
}

.terrier-object:hover::before {
    opacity: 1;
}

.terrier-object-emoji {
    font-size: clamp(2.2rem, 5vw, 3.2rem);
    display: inline-block;
    filter: drop-shadow(0 0 18px rgba(212, 175, 55, 0.25));
    animation: terrierFloat 5.5s ease-in-out infinite;
}

.terrier-object:nth-child(2) .terrier-object-emoji { animation-delay: -1.6s; }
.terrier-object:nth-child(3) .terrier-object-emoji { animation-delay: -3.2s; }

@keyframes terrierFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-14px) rotate(2deg); }
}

.terrier-object.is-faded {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
    pointer-events: none;
}

.terrier-object.is-chosen {
    transform: translateY(-6px) scale(0.7);
    border-color: rgba(240, 230, 247, 0.35);
    box-shadow: 0 0 60px rgba(240, 230, 247, 0.12), 0 0 80px rgba(107, 63, 160, 0.25);
}

.terrier-objects.moved-up .terrier-object {
    width: clamp(60px, 8vw, 90px);
    height: clamp(60px, 8vw, 90px);
}

.terrier-objects.moved-up .terrier-object-emoji {
    font-size: clamp(1.5rem, 3vw, 2rem);
}

.terrier-reveal {
    min-height: 56px;
    max-width: 95%;
    width: 95%;
    text-align: center;
    color: rgba(240, 230, 247, 0.92);
    font-family: 'Playfair Display', serif;
    font-size: clamp(0.95rem, 2vw, 1.4rem);
    letter-spacing: 0.4px;
    line-height: 1.85;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.8s ease;
    text-shadow: 0 2px 18px rgba(0,0,0,0.7);
    padding: clamp(0.8rem, 1.5vw, 1.2rem) clamp(1rem, 3vw, 2rem);
    margin: clamp(5rem, 10vh, 7rem) auto 1rem;
    box-sizing: border-box;
    position: relative;
}

.terrier-reveal.scrolled-up {
    margin-top: clamp(4.5rem, 9vh, 6rem);
    transition: margin-top 0.6s ease;
}

.terrier-reveal.show {
    opacity: 1;
    transform: translateY(0);
}

.terrier-reveal-text {
    color: rgba(240, 230, 247, 0.88);
    font-style: italic;
}

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

.terrier-continue {
    position: fixed;
    left: 50%;
    bottom: max(20px, env(safe-area-inset-bottom));
    transform: translateX(-50%);
    color: rgba(240, 230, 247, 0.92);
    text-decoration: none;
    font-family: 'Playfair Display', serif;
    font-size: 1.05rem;
    letter-spacing: 1.2px;
    padding: 0.8rem 1.3rem;
    border: 1px solid rgba(240, 230, 247, 0.28);
    border-radius: 999px;
    background: rgba(10, 10, 15, 0.25);
    backdrop-filter: blur(10px);
    opacity: 0;
    transition: opacity 0.8s ease, border-color 0.35s ease, background 0.35s ease, transform 0.35s ease;
    z-index: 30;
}

.terrier-continue.show {
    opacity: 1;
}

.terrier-continue:hover {
    transform: translateX(-50%) translateY(-3px);
    border-color: rgba(212, 175, 55, 0.45);
    background: rgba(26, 13, 46, 0.25);
}

html {
    height: 100%;
    margin: 0;
    padding: 0;
    background: var(--dark-bg);
}

/* ============================================
   PARTICULES DE FOND
   ============================================ */
#particles {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    background: 
        radial-gradient(circle at 20% 50%, rgba(107, 63, 160, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(216, 144, 199, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 40% 20%, rgba(78, 205, 196, 0.08) 0%, transparent 50%);
    animation: particleMove 20s ease-in-out infinite;
    pointer-events: none;
}

/* Sur la page terrier, les particules doivent être derrière la vidéo */
.terrier-background ~ #particles,
.terrier-background #particles {
    z-index: -1;
}

@keyframes particleMove {
    0%, 100% { opacity: 0.8; transform: translateY(0); }
    50% { opacity: 1; transform: translateY(-20px); }
}

/* ============================================
   SCÈNES
   ============================================ */
.scene {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    opacity: 0;
    pointer-events: none;
    transition: opacity 1s ease-in-out, transform 1s ease-in-out;
    transform: translateY(20px);
}

.scene.active {
    opacity: 1;
    pointer-events: all;
    transform: translateY(0);
}

.scene-container {
    max-width: 95%;
    width: 95%;
    text-align: center;
    padding: clamp(1rem, 3vw, 2rem);
    position: relative;
    z-index: 20;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .scene-container {
        padding: clamp(0.8rem, 2vw, 1.5rem);
        width: 98%;
        max-width: 98%;
    }
}

.scene-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2rem, 4vw, 2.5rem);
    color: var(--gold);
    margin-bottom: 1.5rem;
    text-shadow: 0 0 20px rgba(212, 175, 55, 0.5);
    animation: titleGlow 3s ease-in-out infinite;
}

.intro-background[data-page="cle"] .scene-title {
    margin-top: 0;
    margin-bottom: clamp(0.3rem, 1vh, 0.6rem);
}

@keyframes titleGlow {
    0%, 100% { text-shadow: 0 0 20px rgba(212, 175, 55, 0.5); }
    50% { text-shadow: 0 0 30px rgba(212, 175, 55, 0.8), 0 0 40px rgba(212, 175, 55, 0.4); }
}

/* ============================================
   LANDING (Accueil) — minimal, mystère, temps cassé
   ============================================ */
.landing .scene-container,
.landing .welcome-container {
    display: none;
}

.landing-container {
    position: relative;
    z-index: 5;
    width: min(980px, 92vw);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: clamp(2rem, 5vw, 3.5rem);
    padding: 2rem 1.25rem;
}

.landing-top {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(1.25rem, 5vw, 3rem);
    flex-wrap: wrap;
    opacity: 0.9;
}

.landing-clock .clock-face {
    animation: clockPulse 2.4s ease-in-out infinite;
}

/* “Temps cassé” : aiguilles à l’envers sur la landing */
.landing .hour-hand,
.landing .minute-hand {
    animation-direction: reverse;
}

.landing-rabbit {
    transform: translateY(2px);
    animation: landingRabbitBreathe 5.5s ease-in-out infinite;
}

@keyframes landingRabbitBreathe {
    0%, 100% { transform: translateY(2px) scale(1); opacity: 0.95; }
    50% { transform: translateY(-6px) scale(1.01); opacity: 1; }
}

.landing-text {
    text-align: center;
    max-width: 780px;
    display: flex;
    flex-direction: column;
    gap: clamp(1.5rem, 4vw, 2.5rem);
}

.landing-option {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.1rem, 2.2vw, 1.4rem);
    font-weight: 600;
    color: rgba(212, 175, 55, 0.9);
    text-shadow: 0 2px 18px rgba(0,0,0,0.75);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 1.0s ease, transform 1.0s ease;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.landing-option.show {
    opacity: 1;
    transform: translateY(0);
}

.landing-subtitle {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.2rem, 2.5vw, 1.6rem);
    font-weight: 400;
    font-style: italic;
    color: rgba(240, 230, 247, 0.88);
    text-shadow: 0 2px 18px rgba(0,0,0,0.75);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 1.0s ease, transform 1.0s ease;
    line-height: 1.6;
    letter-spacing: 0.3px;
    margin-bottom: 1rem;
}

.landing-subtitle.show {
    opacity: 1;
    transform: translateY(0);
}

.landing-line {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.6rem, 3.5vw, 2.4rem);
    line-height: 1.6;
    color: rgba(240, 230, 247, 0.92);
    text-shadow: 0 2px 18px rgba(0,0,0,0.75);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 1.2s ease, transform 1.2s ease;
    font-style: italic;
    letter-spacing: 0.4px;
    margin: 0;
    padding: 0;
}

.landing-line-1 {
    font-weight: 400;
    font-size: clamp(1.5rem, 3.2vw, 2.2rem);
}

.landing-line-2 {
    font-weight: 600;
    font-size: clamp(1.8rem, 4vw, 2.6rem);
}

.landing-line.show {
    opacity: 1;
    transform: translateY(0);
}

.landing-cta {
    display: inline-block;
    text-decoration: none;
    color: rgba(240, 230, 247, 0.92);
    font-family: 'Playfair Display', serif;
    font-size: clamp(1rem, 2vw, 1.2rem);
    letter-spacing: 1.6px;
    padding: 0.85rem 1.35rem;
    border: 1px solid rgba(240, 230, 247, 0.28);
    border-radius: 999px;
    background: rgba(10, 10, 15, 0.22);
    backdrop-filter: blur(12px);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 1.2s ease, transform 1.2s ease, border-color 0.35s ease, background 0.35s ease;
    position: relative;
    z-index: 15;
    margin-top: 0;
    cursor: pointer;
}

.landing-cta.show {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

.landing-cta:hover {
    border-color: rgba(212, 175, 55, 0.45);
    background: rgba(26, 13, 46, 0.22);
}

/* Vidéo TikTok et contenu wrapper */
.landing-content-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(2rem, 5vw, 4rem);
    flex-wrap: wrap;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .landing-content-wrapper {
        flex-direction: column;
        gap: 2rem;
    }
    
    .landing-video-container {
        width: clamp(200px, 70vw, 300px);
        height: clamp(280px, 100vw, 450px);
    }
}

.landing-video-container {
    flex: 0 0 auto;
    width: clamp(250px, 35vw, 400px);
    height: clamp(350px, 50vw, 600px);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 0 40px rgba(107, 63, 160, 0.4);
    border: 2px solid rgba(240, 230, 247, 0.2);
    backdrop-filter: blur(10px);
    background: rgba(26, 13, 46, 0.3);
}

.landing-tiktok-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.landing-choices {
    display: flex;
    gap: clamp(1.5rem, 4vw, 2.5rem);
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 2rem;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 1s ease, transform 1s ease;
}

.landing-choices.show {
    opacity: 1;
    transform: translateY(0);
    display: flex;
}

.landing-choice-btn {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1rem, 2vw, 1.2rem);
    letter-spacing: 1px;
    padding: 1rem 2rem;
    border: 2px solid rgba(240, 230, 247, 0.3);
    border-radius: 999px;
    background: rgba(10, 10, 15, 0.4);
    backdrop-filter: blur(12px);
    color: rgba(240, 230, 247, 0.92);
    cursor: pointer;
    transition: all 0.35s ease;
    text-decoration: none;
    display: inline-block;
    position: relative;
    z-index: 15;
}

.landing-choice-btn:hover {
    border-color: rgba(212, 175, 55, 0.6);
    background: rgba(26, 13, 46, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 0 30px rgba(212, 175, 55, 0.3);
}

.landing-final-message {
    text-align: center;
    margin-top: 2rem;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 1.5s ease, transform 1.5s ease;
}

.landing-final-message.show {
    opacity: 1;
    transform: translateY(0);
    display: block;
}

.final-message-text {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.3rem, 2.8vw, 1.8rem);
    font-style: italic;
    color: rgba(240, 230, 247, 0.9);
    text-shadow: 0 2px 18px rgba(0,0,0,0.75);
    letter-spacing: 0.5px;
}

/* ============================================
   PAGE DE CHOIX (après hchoumance)
   ============================================ */
.choix-container {
    position: relative;
    z-index: 5;
    width: min(980px, 92vw);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: clamp(2rem, 5vw, 3.5rem);
    padding: 2rem 1.25rem;
}

.choix-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2rem, 5vw, 3.5rem);
    color: rgba(240, 230, 247, 0.96);
    text-shadow: 0 2px 18px rgba(0,0,0,0.75);
    margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
    letter-spacing: 0.5px;
    opacity: 1;
    position: relative;
    z-index: 10;
}

.choix-content-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(2rem, 5vw, 4rem);
    flex-wrap: wrap;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
}

.choix-video-container {
    flex: 0 0 auto;
    width: clamp(250px, 35vw, 400px);
    height: clamp(350px, 50vw, 600px);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 0 40px rgba(107, 63, 160, 0.4);
    border: 2px solid rgba(240, 230, 247, 0.2);
    backdrop-filter: blur(10px);
    background: rgba(26, 13, 46, 0.3);
}

.choix-tiktok-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.choix-text {
    text-align: center;
    max-width: 780px;
    display: flex;
    flex-direction: column;
    gap: clamp(1.5rem, 4vw, 2.5rem);
}

.choix-subtitle {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.2rem, 2.5vw, 1.6rem);
    font-weight: 400;
    font-style: italic;
    color: rgba(240, 230, 247, 0.88);
    text-shadow: 0 2px 18px rgba(0,0,0,0.75);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 1.0s ease, transform 1.0s ease;
    line-height: 1.6;
    letter-spacing: 0.3px;
    margin-bottom: 1rem;
}

.choix-subtitle.show {
    opacity: 1;
    transform: translateY(0);
}

.choix-choices {
    display: flex;
    gap: clamp(1.5rem, 4vw, 2.5rem);
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 2rem;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 1s ease, transform 1s ease;
}

.choix-choices.show {
    opacity: 1;
    transform: translateY(0);
}

.choix-choice-btn {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1rem, 2vw, 1.2rem);
    letter-spacing: 1px;
    padding: 1rem 2rem;
    border: 2px solid rgba(240, 230, 247, 0.3);
    border-radius: 999px;
    background: rgba(10, 10, 15, 0.4);
    backdrop-filter: blur(12px);
    color: rgba(240, 230, 247, 0.92);
    cursor: pointer;
    transition: all 0.35s ease;
    text-decoration: none;
    display: inline-block;
    position: relative;
    z-index: 15;
}

.choix-choice-btn:hover {
    border-color: rgba(212, 175, 55, 0.6);
    background: rgba(26, 13, 46, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 0 30px rgba(212, 175, 55, 0.3);
}

.choix-final-message {
    text-align: center;
    margin-top: 2rem;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 1.5s ease, transform 1.5s ease;
}

.choix-final-message.show {
    opacity: 1;
    transform: translateY(0);
}

.choix-final-text {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.3rem, 2.8vw, 1.8rem);
    font-style: italic;
    color: rgba(240, 230, 247, 0.9);
    text-shadow: 0 2px 18px rgba(0,0,0,0.75);
    letter-spacing: 0.5px;
}

@media (max-width: 768px) {
    .choix-content-wrapper {
        flex-direction: column;
        gap: 2rem;
    }
    
    .choix-video-container {
        width: clamp(200px, 70vw, 300px);
        height: clamp(280px, 100vw, 450px);
    }
}

/* ============================================
   PAGE RAV (landing + choix combinés)
   ============================================ */
.rav-content-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(2rem, 5vw, 4rem);
    flex-wrap: wrap;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
}

.rav-video-container {
    flex: 0 0 auto;
    width: clamp(250px, 35vw, 400px);
    height: clamp(350px, 50vw, 600px);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 0 40px rgba(107, 63, 160, 0.4);
    border: 2px solid rgba(240, 230, 247, 0.2);
    backdrop-filter: blur(10px);
    background: rgba(26, 13, 46, 0.3);
    position: relative;
}

/* Overlay sur la vidéo (style YouTube Shorts) */
.rav-video-overlay {
    position: absolute;
    inset: 0;
    z-index: 10;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 20px;
}

.rav-video-controls {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    width: 100%;
    pointer-events: auto;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.rav-controls-left,
.rav-controls-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.rav-control-btn {
    background: rgba(0, 0, 0, 0.6);
    border: none;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    padding: 0;
}

.rav-control-btn:hover {
    background: rgba(0, 0, 0, 0.8);
    transform: scale(1.1);
}

.rav-icon {
    font-size: 1.4rem;
    line-height: 1;
}

.rav-mute-btn.muted .rav-icon {
    opacity: 0.5;
}

.rav-volume-wrapper {
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 20px;
    padding: 8px 12px;
    backdrop-filter: blur(10px);
    opacity: 1;
    width: 120px;
    transition: all 0.3s ease;
}

.rav-volume-slider {
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.rav-volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    background: white;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
}

.rav-volume-slider::-webkit-slider-thumb:hover {
    transform: scale(1.3);
}

.rav-volume-slider::-moz-range-thumb {
    width: 12px;
    height: 12px;
    background: white;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.rav-volume-slider::-moz-range-thumb:hover {
    transform: scale(1.3);
}

.rav-volume-slider::-moz-range-track {
    background: rgba(255, 255, 255, 0.3);
    height: 4px;
    border-radius: 2px;
}

.rav-quality-menu {
    position: absolute;
    bottom: 60px;
    right: 0;
    background: rgba(0, 0, 0, 0.9);
    border-radius: 8px;
    padding: 8px 0;
    min-width: 150px;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.rav-quality-option {
    display: block;
    width: 100%;
    padding: 10px 16px;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.9);
    text-align: left;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'Playfair Display', serif;
    font-size: 0.9rem;
}

.rav-quality-option:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

.rav-quality-option.active {
    background: rgba(107, 63, 160, 0.3);
    color: var(--light-purple);
}

.rav-tiktok-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.rav-choices {
    display: flex;
    gap: clamp(1.5rem, 4vw, 2.5rem);
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 2rem;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 1s ease, transform 1s ease;
}

.rav-choices.show {
    opacity: 1;
    transform: translateY(0);
}

.rav-choice-btn {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1rem, 2vw, 1.2rem);
    letter-spacing: 1px;
    padding: 1rem 2rem;
    border: 2px solid rgba(240, 230, 247, 0.3);
    border-radius: 999px;
    background: rgba(10, 10, 15, 0.4);
    backdrop-filter: blur(12px);
    color: rgba(240, 230, 247, 0.92);
    cursor: pointer;
    transition: all 0.35s ease;
    text-decoration: none;
    display: inline-block;
    position: relative;
    z-index: 15;
}

.rav-choice-btn:hover {
    border-color: rgba(212, 175, 55, 0.6);
    background: rgba(26, 13, 46, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 0 30px rgba(212, 175, 55, 0.3);
}

.rav-final-message {
    text-align: center;
    margin-top: 2rem;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 1.5s ease, transform 1.5s ease;
}

.rav-final-message.show {
    opacity: 1;
    transform: translateY(0);
}

.rav-final-text {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.3rem, 2.8vw, 1.8rem);
    font-style: italic;
    color: rgba(240, 230, 247, 0.9);
    text-shadow: 0 2px 18px rgba(0,0,0,0.75);
    letter-spacing: 0.5px;
    margin-bottom: 1.5rem;
}

.rav-back-btn {
    font-family: 'Playfair Display', serif;
    font-size: clamp(0.9rem, 1.5vw, 1.1rem);
    letter-spacing: 1px;
    padding: 0.8rem 1.8rem;
    border: 2px solid rgba(240, 230, 247, 0.3);
    border-radius: 999px;
    background: rgba(10, 10, 15, 0.4);
    backdrop-filter: blur(12px);
    color: rgba(240, 230, 247, 0.92);
    cursor: pointer;
    transition: all 0.35s ease;
    opacity: 0;
    transform: translateY(10px);
    margin-top: 1rem;
}

.rav-back-btn.show {
    opacity: 1;
    transform: translateY(0);
}

.rav-back-btn:hover {
    border-color: rgba(212, 175, 55, 0.6);
    background: rgba(26, 13, 46, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 0 30px rgba(212, 175, 55, 0.3);
}

@media (max-width: 768px) {
    .rav-content-wrapper {
        flex-direction: column;
        gap: 2rem;
    }
    
    .rav-video-container {
        width: clamp(200px, 70vw, 300px);
        height: clamp(280px, 100vw, 450px);
    }
}

/* ============================================
   BACKGROUND VIOLET POUR PAGE RAV
   ============================================ */
.rav-background {
    background: 
        radial-gradient(ellipse at 20% 30%, rgba(107, 63, 160, 0.4) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 70%, rgba(155, 111, 196, 0.3) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 50%, rgba(107, 63, 160, 0.2) 0%, transparent 70%),
        linear-gradient(135deg, #1a0d2e 0%, #2d1b4e 25%, #1a0d2e 50%, #3d2a5e 75%, #1a0d2e 100%);
    background-size: 100% 100%;
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.rav-background::before {
    content: '';
    position: fixed;
    inset: 0;
    background: 
        radial-gradient(circle at 30% 40%, rgba(107, 63, 160, 0.15) 0%, transparent 40%),
        radial-gradient(circle at 70% 60%, rgba(155, 111, 196, 0.12) 0%, transparent 40%);
    animation: ravPulse 8s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}

.rav-background::after {
    content: '';
    position: fixed;
    inset: 0;
    background-image:
        linear-gradient(0deg, rgba(107, 63, 160, 0.03) 0%, rgba(107, 63, 160, 0) 40%, rgba(107, 63, 160, 0.03) 100%),
        radial-gradient(circle at 20% 30%, rgba(155, 111, 196, 0.04) 0%, transparent 35%),
        radial-gradient(circle at 70% 80%, rgba(107, 63, 160, 0.03) 0%, transparent 40%);
    mix-blend-mode: overlay;
    opacity: 0.6;
    animation: ravGrain 6s steps(10) infinite;
    pointer-events: none;
    z-index: 2;
}

@keyframes ravPulse {
    0%, 100% { 
        transform: translate3d(0, 0, 0) scale(1); 
        opacity: 0.8; 
    }
    50% { 
        transform: translate3d(0, -10px, 0) scale(1.05); 
        opacity: 1; 
    }
}

@keyframes ravGrain {
    0%, 100% { transform: translate3d(0, 0, 0); }
    10% { transform: translate3d(-1%, 1%, 0); }
    20% { transform: translate3d(1%, -1%, 0); }
    30% { transform: translate3d(-1.5%, -0.5%, 0); }
    40% { transform: translate3d(0.5%, 1.5%, 0); }
    50% { transform: translate3d(1.5%, 0.5%, 0); }
    60% { transform: translate3d(-0.5%, -1.5%, 0); }
    70% { transform: translate3d(1%, 1%, 0); }
    80% { transform: translate3d(-1%, -1%, 0); }
    90% { transform: translate3d(0.5%, -0.5%, 0); }
}

.rav-background > * {
    position: relative;
    z-index: 3;
}

.landing-signature {
    position: fixed;
    left: 50%;
    bottom: max(16px, env(safe-area-inset-bottom));
    transform: translateX(-50%);
    font-family: 'Playfair Display', serif;
    font-size: 0.9rem;
    letter-spacing: 4px;
    color: rgba(184, 165, 201, 0.55);
    text-shadow: 0 2px 12px rgba(0,0,0,0.65);
    user-select: none;
    pointer-events: none;
    z-index: 10;
}

/* Chat Cheshire en bas à droite pour couvrir les logos */
.landing-cheshire-cat {
    position: fixed;
    bottom: -20px;
    right: -70px;
    z-index: 100;
    pointer-events: none;
    width: clamp(180px, 26vw, 280px);
    height: auto;
    opacity: 0.98;
    filter: drop-shadow(0 -6px 25px rgba(0,0,0,0.7)) brightness(0.95) contrast(1.05);
    transform-origin: bottom right;
}

.cheshire-cat-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    object-position: bottom right;
    transform: translateY(0);
    animation: cheshireFloat 7s ease-in-out infinite;
}

@keyframes cheshireFloat {
    0%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
    50% { transform: translateY(-6px) rotate(-0.5deg) scale(1.01); }
}

/* ============================================
   PAGE D'ACCUEIL PERSONNALISÉE
   ============================================ */
.welcome-background {
    /* Fond principal */
    background-image: url('Alice_in_Londerland.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    background-color: var(--dark-bg);
    animation: landingBreathe 10s ease-in-out infinite;
}

.welcome-background::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* voile sombre */
    background: rgba(10, 10, 15, 0.45);
    z-index: 1;
}

.welcome-background::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Image overlay (celle que tu m'as donnée) */
    background-image: url('assets/images/accueil.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.35;
    filter: saturate(1.05) contrast(1.05);
    z-index: 3;
    pointer-events: none;
}

.welcome-background > * {
    position: relative;
    z-index: 4;
}

@keyframes landingBreathe {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.015); }
}

/* Landing: keep the original image background (no GIF) */
.welcome-background.landing {
    background-image: url('Alice_in_Londerland.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Landing: image.png overlay revealed by cursor (spotlight) */
.landing-overlay-img {
    position: fixed;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background-image: url('image.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    filter: saturate(1.05) contrast(1.05) brightness(0.92);
    mix-blend-mode: screen;
    transition: opacity 0.6s ease;
    clip-path: circle(0px at var(--mx, 50%) var(--my, 50%));
}

.landing-overlay-img.on {
    opacity: 0.22;
    clip-path: circle(140px at var(--mx, 50%) var(--my, 50%));
    transition: opacity 0.6s ease, clip-path 0.35s ease;
}

.landing-overlay-img.locked {
    opacity: 0.28;
    clip-path: circle(220px at var(--mx, 50%) var(--my, 50%));
}

.landing-overlay-img::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(240,230,247,0.14) 0%, rgba(240,230,247,0) 58%);
    mix-blend-mode: screen;
    opacity: 0.6;
}

/* Landing: interactive map reveal */
.landing-map {
    position: fixed;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background-image: url('phl9pskti1c21.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    filter: sepia(0.92) contrast(1.06) brightness(0.82);
    mix-blend-mode: multiply;
    transition: opacity 0.6s ease;

    /* reveal mask around cursor (default: hidden) */
    clip-path: circle(0px at var(--mx, 50%) var(--my, 50%));
}

.landing-map.on {
    opacity: 0.22;
    clip-path: circle(120px at var(--mx, 50%) var(--my, 50%));
    transition: opacity 0.6s ease, clip-path 0.35s ease;
}

.landing-map.locked {
    opacity: 0.28;
    clip-path: circle(200px at var(--mx, 50%) var(--my, 50%));
    transition: opacity 0.6s ease, clip-path 0.35s ease;
}

.landing-map::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(240,230,247,0.10) 0%, rgba(240,230,247,0) 55%);
    mix-blend-mode: screen;
    opacity: 0.55;
}

/* Big background clock (subtle, animated) */
.landing-bg-clock {
    position: fixed;
    inset: -20vmax;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 140vmax;
    height: 140vmax;
    z-index: 2;
    /* Retro / paper vibe */
    opacity: 0.16;
    filter: blur(0.9px) sepia(0.65) saturate(0.75) contrast(1.08) brightness(0.92);
    pointer-events: none;
    mix-blend-mode: screen;

    animation: landingClockDrift 10s ease-in-out infinite;
}

/* Re-enable the CSS clock (styled retro) */
.landing-bg-clock .clock-face,
.landing-bg-clock .clock-hand {
    display: block;
}

.landing-bg-clock::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(closest-side at 50% 50%, rgba(10,10,15,0) 55%, rgba(10,10,15,0.55) 100%),
        radial-gradient(circle at 45% 55%, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 45%);
    opacity: 0.85;
    pointer-events: none;
}

.landing-bg-clock::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(0deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0) 45%, rgba(255,255,255,0.03) 100%),
        radial-gradient(circle at 30% 35%, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0) 55%);
    mix-blend-mode: overlay;
    opacity: 0.35;
    pointer-events: none;
}

.landing-bg-clock .clock-face {
    width: 100%;
    height: 100%;
    border-width: 2px;
    box-shadow:
        0 0 70px rgba(107, 63, 160, 0.35),
        inset 0 0 70px rgba(107, 63, 160, 0.18);
}

.landing-bg-clock .clock-face {
    width: 100%;
    height: 100%;
    border: 2px solid rgba(212, 175, 55, 0.18);
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 50%, rgba(240,230,247,0.04) 0%, rgba(10,10,15,0) 60%),
        radial-gradient(circle at 50% 50%, rgba(212,175,55,0.06) 0%, rgba(10,10,15,0) 70%);
    box-shadow:
        0 0 80px rgba(10,10,15,0.35),
        inset 0 0 90px rgba(10,10,15,0.35);
}

.landing-bg-clock .clock-hand {
    background: rgba(240, 230, 247, 0.55);
    box-shadow: 0 0 18px rgba(212,175,55,0.10);
}

.landing-bg-clock .hour-hand {
    height: 32%;
    margin-top: -32%;
    width: 3px;
    /* slower + reverse via .landing selector */
    animation-duration: 28s;
}

.landing-bg-clock .minute-hand {
    height: 44%;
    margin-top: -44%;
    width: 2px;
    /* slower + reverse via .landing selector */
    animation-duration: 4.5s;
}

@keyframes landingClockDrift {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(1.02); }
}

/* Mirror layer */
.landing-mirror {
    position: fixed;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.8s ease;
    background:
        radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgba(240,230,247,0.12) 0%, rgba(240,230,247,0.04) 30%, rgba(10,10,15,0) 60%),
        radial-gradient(900px circle at 50% 55%, rgba(240,230,247,0.05) 0%, rgba(10,10,15,0) 70%);
    mix-blend-mode: screen;
    filter: blur(0.2px);
}

.landing-mirror.on {
    opacity: 1;
}

.landing-mirror::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(240,230,247,0.05) 0%, rgba(240,230,247,0.0) 55%, rgba(240,230,247,0.03) 100%);
    opacity: 0.45;
}

.landing-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2rem, 5vw, 3.5rem);
    color: rgba(240, 230, 247, 0.96);
    text-shadow: 0 2px 18px rgba(0,0,0,0.75);
    margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
    letter-spacing: 0.5px;
    opacity: 1;
    position: relative;
    z-index: 10;
}

.landing-mirror-text {
    margin-top: clamp(1rem, 3vw, 2rem);
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: clamp(1.3rem, 2.8vw, 1.9rem);
    color: rgba(240, 230, 247, 0.85);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.9s ease, transform 0.9s ease;
    text-shadow: 0 2px 18px rgba(0,0,0,0.75);
    line-height: 1.7;
    letter-spacing: 0.3px;
}

.landing-mirror-text.show {
    opacity: 1;
    transform: translateY(0);
}

.welcome-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    gap: 3rem;
    padding: 2rem;
    max-width: 900px;
    margin: 0 auto;
    position: relative;
}

.welcome-intro-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    position: relative;
    z-index: 10;
}

.welcome-intro-top {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

/* Éléments Alice in Wonderland flottants */
.alice-elements {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.alice-icon {
    position: absolute;
    font-size: clamp(2rem, 4vw, 3rem);
    opacity: 0.7;
    animation: floatIcons 5s ease-in-out infinite;
    filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.4));
}

.alice-icon:nth-child(1) { /* 🍄 */
    top: 15%;
    left: 5%;
    animation-delay: 0s;
}

.alice-icon:nth-child(2) { /* 🃏 */
    top: 25%;
    right: 15%;
    animation-delay: 1s;
}

.alice-icon:nth-child(3) { /* ♠️ */
    bottom: 30%;
    left: 8%;
    animation-delay: 2s;
}

.alice-icon:nth-child(4) { /* ☕ */
    top: 50%;
    right: 5%;
    animation-delay: 1.5s;
}

.alice-icon:nth-child(5) { /* 🔑 */
    bottom: 25%;
    right: 20%;
    animation-delay: 0.5s;
}

.alice-icon:nth-child(6) { /* 🎩 */
    top: 60%;
    left: 15%;
    animation-delay: 2.5s;
}

@keyframes floatIcons {
    0%, 100% { 
        transform: translateY(0) scale(1);
        opacity: 0.7;
    }
    50% { 
        transform: translateY(-15px) scale(1.1);
        opacity: 0.9;
    }
}


/* ============================================
   PAGE MESSAGE PERSONNALISÉ
   ============================================ */
.message-background {
    background-image: url('eagez.gif');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    position: relative;
}

.message-background::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 10, 15, 0.6);
    z-index: 1;
}

.message-background > * {
    position: relative;
    z-index: 2;
}

.message-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    gap: 3rem;
    padding: 2rem;
    max-width: 800px;
    margin: 0 auto;
}

.message-text {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.1rem, 3vw, 1.5rem);
    color: var(--text-light);
    text-align: center;
    line-height: 1.8;
    padding: 2rem;
    background: rgba(26, 13, 46, 0.6);
    border: 2px solid var(--purple);
    border-radius: 15px;
    backdrop-filter: blur(15px);
    box-shadow: 0 0 40px rgba(107, 63, 160, 0.5);
    animation: fadeInUp 1.5s ease-out;
    max-width: 100%;
    max-height: min(62vh, 560px);
    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

.message-text .narrative-line {
    display: block;
    margin: 0.35rem 0;
    max-width: 100%;
}

.message-text .message-spacer {
    height: 1.1rem;
}

.message-text p {
    margin: 0.35rem 0;
}

/* Subtle scrollbars */
.message-text::-webkit-scrollbar {
    width: 10px;
}
.message-text::-webkit-scrollbar-track {
    background: rgba(10, 10, 15, 0.2);
}
.message-text::-webkit-scrollbar-thumb {
    background: rgba(155, 111, 196, 0.25);
    border: 2px solid rgba(10, 10, 15, 0.2);
    border-radius: 10px;
}
.message-text::-webkit-scrollbar-thumb:hover {
    background: rgba(155, 111, 196, 0.35);
}

/* ============================================
   JEU — LE REGARD
   ============================================ */
.regard-instruction {
    font-size: clamp(1.1rem, 2.5vw, 1.5rem);
    color: var(--gold);
    margin: 2rem 0 1.5rem;
    font-family: 'Playfair Display', serif;
    text-align: center;
    font-weight: 500;
    line-height: 1.8;
    opacity: 0;
    animation: fadeIn 1s ease 0.5s forwards;
}

@keyframes fadeIn {
    to { opacity: 1; }
}

.regard-stage {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(1rem, 3vw, 2rem);
    margin: 2.5rem auto 1.75rem;
    flex-wrap: wrap;
}

.regard-figure {
    width: clamp(120px, 16vw, 180px);
    height: clamp(180px, 24vw, 260px);
    border-radius: 18px;
    background:
        radial-gradient(circle at 50% 25%, rgba(240,230,247,0.12) 0%, rgba(10,10,15,0) 55%),
        linear-gradient(180deg, rgba(26,13,46,0.55) 0%, rgba(10,10,15,0.65) 100%);
    border: 1px solid rgba(240,230,247,0.25);
    box-shadow: 0 0 30px rgba(0,0,0,0.35);
    backdrop-filter: blur(10px);
    opacity: 0.65;
    filter: blur(1.2px);
    transition: transform 0.35s ease, opacity 0.35s ease, filter 0.35s ease;
    cursor: pointer;
    touch-action: manipulation;
    pointer-events: auto;
    position: relative;
    z-index: 5;
}

.regard-figure:hover {
    opacity: 0.75;
    filter: blur(0.6px);
    transform: translateY(-6px);
}

.regard-figure.calm-hovering {
    opacity: 0.9 !important;
    filter: blur(0.3px) !important;
    border-color: rgba(212, 175, 55, 0.4) !important;
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.3) !important;
    transition: all 0.3s ease !important;
}

.regard-figure.agit {
    opacity: 0.85;
    filter: blur(0.5px);
    animation: regardAgit 0.55s ease-in-out infinite;
}

.regard-figure.vanished {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
}

@keyframes regardAgit {
    0%, 100% { transform: translateY(-6px) rotate(0deg); }
    50% { transform: translateY(-6px) rotate(1.2deg); }
}

.regard-reveal {
    min-height: 56px;
    text-align: center;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: clamp(1.15rem, 2.4vw, 1.6rem);
    color: rgba(240, 230, 247, 0.9);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.8s ease, transform 0.8s ease;
    text-shadow: 0 2px 18px rgba(0,0,0,0.75);
}

.regard-reveal.show {
    opacity: 1;
    transform: translateY(0);
}

/* Indice avec le lapin */
.regard-hint {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 100;
    display: flex;
    align-items: flex-end;
    gap: 1rem;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
    pointer-events: none;
}

.regard-hint.show {
    opacity: 1;
    transform: translateY(0);
}

.regard-hint-rabbit {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
}

.regard-rabbit-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.4));
    animation: rabbitBounce 2s ease-in-out infinite;
}

@keyframes rabbitBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

.regard-hint-bubble {
    background: rgba(26, 13, 46, 0.95);
    border: 2px solid rgba(212, 175, 55, 0.5);
    border-radius: 20px;
    padding: 1rem 1.5rem;
    backdrop-filter: blur(15px);
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
    position: relative;
    max-width: 250px;
}

.regard-hint-bubble::before {
    content: '';
    position: absolute;
    bottom: -10px;
    right: 30px;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid rgba(212, 175, 55, 0.5);
}

.regard-hint-bubble p {
    margin: 0;
    font-family: 'Playfair Display', serif;
    font-size: clamp(0.9rem, 1.8vw, 1.1rem);
    color: rgba(240, 230, 247, 0.9);
    font-style: italic;
    line-height: 1.5;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

@media (max-width: 768px) {
    .regard-hint {
        bottom: 15px;
        right: 15px;
        gap: 0.8rem;
    }
    
    .regard-hint-rabbit {
        width: 60px;
        height: 60px;
    }
    
    .regard-hint-bubble {
        max-width: 200px;
        padding: 0.8rem 1.2rem;
    }
    
    .regard-hint-bubble::before {
        right: 25px;
    }
}

/* ============================================
   JEU — ATTENTE
   ============================================ */
.attente-text {
    margin-top: 10vh;
    text-align: center;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: clamp(1.35rem, 3.2vw, 2.2rem);
    color: rgba(240, 230, 247, 0.92);
    text-shadow: 0 2px 18px rgba(0,0,0,0.75);
    opacity: 0.8;
    transition: filter 1.0s ease, opacity 1.0s ease, transform 1.0s ease;
}

.attente-text.blurred {
    filter: blur(6px);
    opacity: 0.25;
}

.attente-text.show {
    filter: blur(0px);
    opacity: 1;
    transform: translateY(0);
}

/* ============================================
   CHAPITRE — LA LETTRE
   ============================================ */
.letter-wrap {
    display: flex;
    justify-content: center;
    margin-top: 1.5rem;
}

.letter-paper {
    width: min(860px, 95vw);
    padding: clamp(1.2rem, 3vw, 2.2rem);
    border-radius: 16px;
    background:
        radial-gradient(circle at 30% 20%, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 45%),
        linear-gradient(180deg, rgba(26, 13, 46, 0.72) 0%, rgba(10, 10, 15, 0.72) 100%);
    border: 1px solid rgba(212, 175, 55, 0.22);
    box-shadow: 0 0 60px rgba(0,0,0,0.45);
    backdrop-filter: blur(14px);
}

.letter-to {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.3rem, 2.6vw, 1.9rem);
    color: rgba(212, 175, 55, 0.9);
    margin-bottom: 0.75rem;
    text-shadow: 0 2px 18px rgba(0,0,0,0.65);
}

.letter-body {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.05rem, 2.2vw, 1.35rem);
    line-height: 1.9;
    color: rgba(240, 230, 247, 0.92);
    text-shadow: 0 2px 18px rgba(0,0,0,0.7);
    min-height: 220px;
}

.letter-body .narrative-line {
    display: block;
    margin: 0.4rem 0;
}

.letter-sign {
    margin-top: 1rem;
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.2rem, 2.4vw, 1.8rem);
    color: rgba(184, 165, 201, 0.9);
    text-align: right;
    opacity: 0.85;
}

#message-start-btn {
    text-decoration: none;
    color: inherit;
}

@media (max-width: 768px) {
    .welcome-container {
        gap: 2rem;
        padding: 1rem;
    }
    
    .welcome-intro-top {
        gap: 1.5rem;
        margin-bottom: 1rem;
        flex-direction: column;
    }
    
    .alice-icon {
        font-size: 1.5rem;
    }
    
    .message-container {
        gap: 2rem;
        padding: 1rem;
    }
    
    .message-text {
        font-size: clamp(1rem, 4vw, 1.3rem);
        padding: 1.5rem;
        line-height: 1.6;
    }
}

@media (max-width: 480px) {
    .alice-icon {
        font-size: 1.2rem;
    }
    
    .message-text {
        font-size: 0.95rem;
        padding: 1rem;
        line-height: 1.5;
    }
    
    .mirror-card {
        min-height: 340px;
        padding: 1.4rem 1rem 1.7rem;
        justify-content: flex-start;
    }
    
    .mirror-image {
        width: 60px;
        height: 60px;
        margin-bottom: 0.6rem;
    }
    
    .mirror-text {
        font-size: 0.85rem;
        line-height: 1.4;
    }
    
    .mirror-title {
        font-size: 1.1rem;
        margin-bottom: 0.6rem;
    }
}

/* ============================================
   ÉCRAN D'INTRO
   ============================================ */
.intro-background {
    background-image: url('original.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

.intro-background::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 10, 15, 0.6);
    z-index: 1;
}

.intro-background > * {
    position: relative;
    z-index: 2;
}

.intro-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    gap: 3rem;
}

.intro-top {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.clock-container {
    width: 200px;
    height: 200px;
    position: relative;
}

.rabbit-container {
    width: 200px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.rabbit-image {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 0 20px rgba(212, 175, 55, 0.5));
    animation: rabbitFloat 3s ease-in-out infinite;
}

.rabbit-icon {
    font-size: 120px;
    filter: drop-shadow(0 0 30px rgba(212, 175, 55, 0.8));
    animation: rabbitFloat 3s ease-in-out infinite;
    text-shadow: 0 0 20px rgba(212, 175, 55, 0.6);
    transform-origin: center;
}


@keyframes rabbitFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-15px) rotate(5deg); }
}

.clock-face {
    width: 100%;
    height: 100%;
    border: 3px solid var(--purple);
    border-radius: 50%;
    position: relative;
    box-shadow: 
        0 0 30px rgba(107, 63, 160, 0.5),
        inset 0 0 30px rgba(107, 63, 160, 0.2);
    animation: clockPulse 2s ease-in-out infinite;
}

@keyframes clockPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.clock-hand {
    position: absolute;
    background: var(--gold);
    transform-origin: bottom center;
    left: 50%;
    top: 50%;
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.8);
}

.hour-hand {
    width: 4px;
    height: 60px;
    margin-left: -2px;
    margin-top: -60px;
    animation: rotateHour 12s linear infinite;
}

.minute-hand {
    width: 2px;
    height: 80px;
    margin-left: -1px;
    margin-top: -80px;
    animation: rotateMinute 2s linear infinite;
}

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

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

/* Effet GLITCH sur le texte */
.intro-text {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.8rem, 5vw, 3.5rem);
    color: var(--text-light);
    text-align: center;
    position: relative;
    animation: fadeInUp 2s ease-out, textShimmer 3s ease-in-out infinite;
    padding: 1rem;
    line-height: 1.4;
}

.glitch {
    position: relative;
}

.glitch::before,
.glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.glitch::before {
    left: 2px;
    text-shadow: -2px 0 var(--purple);
    clip: rect(0, 900px, 0, 0);
    animation: glitch-1 3s infinite linear alternate-reverse;
}

.glitch::after {
    left: -2px;
    text-shadow: 2px 0 var(--teal);
    clip: rect(0, 900px, 0, 0);
    animation: glitch-2 3s infinite linear alternate-reverse;
}

@keyframes glitch-1 {
    0% { clip: rect(42px, 9999px, 44px, 0); }
    5% { clip: rect(12px, 9999px, 59px, 0); }
    10% { clip: rect(33px, 9999px, 29px, 0); }
    15% { clip: rect(87px, 9999px, 97px, 0); }
    20% { clip: rect(23px, 9999px, 99px, 0); }
    25% { clip: rect(7px, 9999px, 85px, 0); }
    30% { clip: rect(75px, 9999px, 5px, 0); }
    35% { clip: rect(51px, 9999px, 64px, 0); }
    40% { clip: rect(94px, 9999px, 42px, 0); }
    45% { clip: rect(19px, 9999px, 77px, 0); }
    50% { clip: rect(60px, 9999px, 28px, 0); }
    55% { clip: rect(34px, 9999px, 90px, 0); }
    60% { clip: rect(78px, 9999px, 13px, 0); }
    65% { clip: rect(3px, 9999px, 56px, 0); }
    70% { clip: rect(88px, 9999px, 31px, 0); }
    75% { clip: rect(26px, 9999px, 82px, 0); }
    80% { clip: rect(61px, 9999px, 18px, 0); }
    85% { clip: rect(15px, 9999px, 93px, 0); }
    90% { clip: rect(47px, 9999px, 8px, 0); }
    95% { clip: rect(72px, 9999px, 39px, 0); }
    100% { clip: rect(1px, 9999px, 66px, 0); }
}

@keyframes glitch-2 {
    0% { clip: rect(65px, 9999px, 100px, 0); }
    5% { clip: rect(31px, 9999px, 14px, 0); }
    10% { clip: rect(89px, 9999px, 46px, 0); }
    15% { clip: rect(22px, 9999px, 73px, 0); }
    20% { clip: rect(58px, 9999px, 9px, 0); }
    25% { clip: rect(96px, 9999px, 35px, 0); }
    30% { clip: rect(11px, 9999px, 68px, 0); }
    35% { clip: rect(44px, 9999px, 27px, 0); }
    40% { clip: rect(79px, 9999px, 52px, 0); }
    45% { clip: rect(6px, 9999px, 84px, 0); }
    50% { clip: rect(38px, 9999px, 20px, 0); }
    55% { clip: rect(71px, 9999px, 57px, 0); }
    60% { clip: rect(17px, 9999px, 91px, 0); }
    65% { clip: rect(54px, 9999px, 4px, 0); }
    70% { clip: rect(83px, 9999px, 41px, 0); }
    75% { clip: rect(29px, 9999px, 76px, 0); }
    80% { clip: rect(63px, 9999px, 13px, 0); }
    85% { clip: rect(2px, 9999px, 95px, 0); }
    90% { clip: rect(48px, 9999px, 30px, 0); }
    95% { clip: rect(86px, 9999px, 62px, 0); }
    100% { clip: rect(25px, 9999px, 7px, 0); }
}

@keyframes textShimmer {
    0%, 100% { text-shadow: 0 0 10px rgba(240, 230, 247, 0.3); }
    50% { text-shadow: 0 0 20px rgba(240, 230, 247, 0.6), 0 0 30px rgba(107, 63, 160, 0.4); }
}

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

/* Bouton principal */
.main-btn {
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem;
    background: transparent;
    color: var(--gold);
    border: 2px solid var(--gold);
    position: relative;
    z-index: 10;
    padding: 1rem 3rem;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    text-transform: none;
    letter-spacing: 2px;
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.3);
    display: inline-block;
    text-decoration: none;
}

.main-btn:hover {
    color: var(--dark-bg);
    box-shadow: 0 0 30px rgba(212, 175, 55, 0.6);
    transform: scale(1.05);
}

.main-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: var(--gold);
    transition: left 0.3s ease;
    z-index: -1;
}

.main-btn:hover::before {
    left: 0;
}

.btn-shimmer {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: shimmer 3s infinite;
}

@keyframes shimmer {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* ============================================
   LE TERRIER - Choix narratifs
   ============================================ */
.terrier-background {
    position: relative;
    overflow: hidden;
}

.terrier-background.no-video {
    background: radial-gradient(circle at center, rgba(107, 63, 160, 0.2) 0%, rgba(10, 10, 15, 0.9) 100%);
}

.terrier-background.no-video .terrier-bg-video {
    display: none;
}

.terrier-bg-video {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
    z-index: 0;
    opacity: 0.75;
    pointer-events: none;
    display: block;
    background: #000;
}

/* Si la vidéo n'existe pas, on utilise un fond de secours */
.terrier-background:not(:has(video[src])) {
    background: radial-gradient(circle at center, rgba(107, 63, 160, 0.2) 0%, rgba(10, 10, 15, 0.9) 100%);
}

.terrier-bg-audio {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
}

.terrier-background::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 10, 15, 0.15);
    z-index: 1;
    pointer-events: none;
}

.terrier-background > .scene-container {
    position: relative;
    z-index: 2;
    background: transparent;
}

/* S'assurer que le contenu est visible même sans vidéo */
.terrier-background .scene-title,
.terrier-background .narrative-text,
.terrier-background .terrier-instruction {
    color: var(--text-light);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}

.narrative-text {
    font-size: clamp(1rem, 2.2vw, 1.3rem);
    line-height: 1.6;
    color: var(--text-light);
    margin-bottom: 1rem;
    font-style: italic;
    min-height: 80px;
}

.narrative-line {
    opacity: 0;
    animation: fadeInChar 0.3s ease forwards;
}

@keyframes fadeInChar {
    to {
        opacity: 1;
    }
}

.terrier-instruction {
    font-size: clamp(1.1rem, 2.5vw, 1.5rem);
    color: var(--gold);
    margin: 2rem 0;
    font-family: 'Playfair Display', serif;
    text-align: center;
    font-weight: 500;
    line-height: 1.8;
}

.figures-container {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin: 3rem 0;
    flex-wrap: wrap;
    position: relative;
    z-index: 10;
    pointer-events: auto;
}

.figure-card {
    background: rgba(26, 13, 46, 0.6);
    border: 3px solid var(--purple);
    border-radius: 15px;
    padding: 2rem;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    max-width: 280px;
    width: 100%;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    z-index: 10;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    touch-action: manipulation;
}

.figure-card.visited {
    outline: 2px solid rgba(212, 175, 55, 0.35);
    box-shadow: 0 0 25px rgba(212, 175, 55, 0.25);
}

/* Bordures colorées pour chaque carte */
.figure-card-purple {
    border-color: var(--purple) !important;
    box-shadow: 0 0 20px rgba(107, 63, 160, 0.4);
}

.figure-card-gold {
    border-color: var(--gold) !important;
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.4);
}

.figure-card-teal {
    border-color: var(--teal) !important;
    box-shadow: 0 0 20px rgba(78, 205, 196, 0.4);
}

.figure-card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 0 40px rgba(212, 175, 55, 0.6);
    background: rgba(26, 13, 46, 0.8);
}

.figure-card-purple:hover {
    border-color: var(--purple);
    box-shadow: 0 0 40px rgba(107, 63, 160, 0.6);
}

.figure-card-gold:hover {
    border-color: var(--gold);
    box-shadow: 0 0 40px rgba(212, 175, 55, 0.6);
}

.figure-card-teal:hover {
    border-color: var(--teal);
    box-shadow: 0 0 40px rgba(78, 205, 196, 0.6);
}

.figure-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem;
    color: var(--gold);
    margin-bottom: 1.5rem;
    text-align: center;
    font-weight: 600;
}

.figure-description {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--text-light);
    font-style: italic;
    text-align: center;
}

.figure-description p {
    margin: 0.5rem 0;
}

.terrier-response {
    font-size: clamp(1.2rem, 3vw, 1.6rem);
    line-height: 2;
    color: var(--text-light);
    margin: 2rem 0;
    font-style: italic;
    text-align: center;
    min-height: 120px;
}

.retry-btn {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1rem, 2vw, 1.2rem);
    background: rgba(107, 63, 160, 0.9);
    color: rgba(240, 230, 247, 1);
    border: 2px solid var(--purple);
    padding: 1rem 2.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 10px;
    margin: 0 auto;
    display: inline-block;
    font-weight: 600;
    text-decoration: none;
    opacity: 1 !important;
    box-shadow: 0 0 20px rgba(107, 63, 160, 0.6);
    position: relative;
    z-index: 20;
}

.retry-btn:hover {
    background: rgba(107, 63, 160, 0.95);
    border-color: var(--gold);
    transform: scale(1.05);
    box-shadow: 0 0 25px rgba(212, 175, 55, 0.6);
    color: var(--gold);
}

.back-btn {
    font-family: 'Playfair Display', serif;
    font-size: 1rem;
    background: rgba(107, 63, 160, 0.3);
    color: var(--text-light);
    border: 1.5px solid var(--purple);
    padding: 0.7rem 1.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 8px;
    margin-top: 2rem;
    text-decoration: none;
    display: inline-block;
}

.back-btn:hover {
    background: rgba(107, 63, 160, 0.5);
    border-color: var(--gold);
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.3);
    color: var(--gold);
}

/* ============================================
   LE JARDIN DES ILLUSIONS - Version Rework
   ============================================ */
.jardin-background {
    background: linear-gradient(135deg, #1a0d2e 0%, #2d1b3d 50%, #1a0d2e 100%);
    position: relative;
    overflow: hidden;
}

.jardin-background[data-page="jardin"] {
    background-image: url('oaz.gif');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.jardin-background[data-page="jardin"]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 10, 15, 0.5);
    z-index: 1;
    pointer-events: none;
}

.jardin-background[data-page="jardin"] > * {
    position: relative;
    z-index: 2;
}

.jardin-background[data-page="regard"] {
    background-image: url('bold.gif');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.hchoumance-bg-video {
    position: relative;
    width: 300px;
    height: auto;
    max-width: 80%;
    margin: 2rem auto 0;
    display: none;
    z-index: 10;
    opacity: 0;
    filter: contrast(1.05) saturate(1.05);
    border-radius: 8px;
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.3);
}

.jardin-background[data-page="hchoumance"] {
    background-image: url('télécharger (1).jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    position: relative;
    overflow: hidden;
}

.jardin-background[data-page="hchoumance"]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 10, 15, 0.4);
    z-index: 1;
    pointer-events: none;
}

.jardin-background[data-page="hchoumance"] > * {
    position: relative;
    z-index: 2;
}

.jardin-background .scene-container {
    transform: scale(0.75);
    transform-origin: top center;
    margin-bottom: -25%;
}

.jardin-background[data-page="hchoumance"] .scene-container {
    transform: scale(0.65);
    transform-origin: center center;
    margin-bottom: 0;
}

.intro-background[data-page="cle"] {
    background-image: url('télécharger.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.intro-background[data-page="fleur"] {
    background-image: url('images.steamusercontent.gif');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* Fleur: intro plus “vivante” (flou -> net, respiration) */
.intro-background[data-page="fleur"]::before {
    background: rgba(8, 8, 12, 0.55);
    backdrop-filter: blur(14px) saturate(1.1);
    animation: fleurBgClear 2400ms ease forwards;
}

@keyframes fleurBgClear {
    0% {
        background: rgba(8, 8, 12, 0.45);
        backdrop-filter: blur(18px) saturate(1.15);
    }
    100% {
        background: rgba(10, 10, 15, 0.62);
        backdrop-filter: blur(0px) saturate(1);
    }
}

.intro-background[data-page="fleur"] .scene-container {
    animation: fleurSceneIn 1000ms ease both;
}

@keyframes fleurSceneIn {
    0% { opacity: 0; transform: translateY(18px); }
    100% { opacity: 1; transform: translateY(0); }
}

.intro-background[data-page="cle"] .scene-container {
    padding-top: 0;
    padding-bottom: clamp(1rem, 3vw, 2rem);
}

.intro-background[data-page="cle"] .scene-title {
    margin-top: 0;
    margin-bottom: clamp(0.3rem, 1vh, 0.6rem);
}

.intro-background[data-page="cle"] .narrative-text {
    margin-top: 0 !important;
    margin-bottom: clamp(0.3rem, 1.5vh, 0.8rem) !important;
    padding-top: 0 !important;
}

.intro-background[data-page="salle-the"] {
    background-image: url('images.steamusercontent.jpeg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.intro-background[data-page="salle-the"] .scene {
    align-items: center;
    justify-content: center;
}

.intro-background[data-page="salle-the"] .scene-container {
    transform: scale(0.7);
    transform-origin: center center;
    padding: 1rem;
    margin: 0 auto;
}

.intro-background[data-page="salle-the"] .scene-title {
    font-size: clamp(1.5rem, 2.8vw, 1.8rem);
    margin-bottom: 0.8rem;
}

.intro-background[data-page="salle-the"] .back-btn {
    position: relative;
    z-index: 100;
    margin-top: 1rem;
    transform: scale(1);
}

.intro-background[data-page="attente"] {
    background-image: url('oaz.gif');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.jardin-background[data-page="verite"] .scene-container {
    transform: scale(0.75);
    transform-origin: top center;
    margin-bottom: -25%;
    padding: 1rem;
}

.jardin-background::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 50% 50%, rgba(107, 63, 160, 0.1) 0%, transparent 70%);
    z-index: 0;
}

.jardin-mirrors {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin: 1.5rem 0;
    flex-wrap: wrap;
    position: relative;
    z-index: 10;
}

.mirror-card {
    background: rgba(26, 13, 46, 0.7);
    border: 2px solid var(--purple);
    border-radius: 20px;
    padding: 1.5rem 1.3rem 1.8rem;
    cursor: pointer;
    transition: all 0.15s ease;
    backdrop-filter: blur(15px);
    max-width: 220px;
    width: 100%;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    overflow: visible;
    z-index: 10;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.mirror-glow {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.1) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.mirror-card:hover .mirror-glow {
    opacity: 1;
}

.mirror-card:hover {
    border-color: var(--gold);
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 0 40px rgba(212, 175, 55, 0.5);
    background: rgba(26, 13, 46, 0.9);
}

.mirror-card.selected {
    border-color: var(--gold);
    box-shadow: 0 0 50px rgba(212, 175, 55, 0.6);
    background: rgba(26, 13, 46, 0.95);
}

.mirror-card.wrong {
    border-color: rgba(240, 100, 100, 0.6);
    box-shadow: 0 0 30px rgba(240, 100, 100, 0.3);
    background: rgba(46, 13, 26, 0.7);
    opacity: 0.6;
    animation: shakeWrong 0.5s ease;
}

@keyframes shakeWrong {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

.mirror-image {
    width: 80px;
    height: 80px;
    object-fit: contain;
    margin-bottom: 0.8rem;
    opacity: 0.7;
    filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.3));
    z-index: 1;
}

.mirror-content {
    position: relative;
    z-index: 2;
    text-align: center;
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.mirror-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.4rem;
    color: var(--gold);
    margin-bottom: 0.8rem;
    font-weight: 600;
}

.mirror-text {
    font-family: 'Playfair Display', serif;
    font-size: 1.05rem;
    color: var(--text-light);
    font-style: italic;
    line-height: 1.4;
    word-wrap: break-word;
    overflow-wrap: break-word;
    margin: 0;
    padding: 0;
}

.jardin-instruction {
    font-size: clamp(1rem, 2.2vw, 1.3rem);
    color: var(--gold);
    margin: 1rem 0;
    font-family: 'Playfair Display', serif;
    text-align: center;
    font-weight: 500;
    position: relative;
    z-index: 10;
}

.jardin-response {
    font-size: clamp(1.1rem, 2.5vw, 1.4rem);
    line-height: 1.6;
    color: var(--text-light);
    margin: 0.5rem 0 0.5rem;
    font-style: italic;
    text-align: center;
    min-height: auto;
    position: relative;
    z-index: 10;
    padding: 1rem 0.5rem;
    max-width: 100%;
    overflow: visible;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.choices-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.choice-btn {
    font-family: 'Playfair Display', serif;
    font-size: 1.4rem;
    background: rgba(107, 63, 160, 0.15);
    color: var(--text-light);
    border: 1.5px solid var(--purple);
    padding: 1.4rem 2.5rem;
    cursor: pointer;
    transition: all 0.4s ease;
    text-align: center;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
    font-weight: 500;
    letter-spacing: 0.5px;
}

.choice-btn:nth-child(1) { animation-delay: 0.1s; }
.choice-btn:nth-child(2) { animation-delay: 0.2s; }
.choice-btn:nth-child(3) { animation-delay: 0.3s; }

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.choice-btn:hover {
    background: rgba(107, 63, 160, 0.3);
    border-color: var(--gold);
    transform: scale(1.02);
    box-shadow: 0 0 25px rgba(212, 175, 55, 0.4);
    color: var(--gold);
}

/* Stats display */
.stats-display {
    margin-top: 2rem;
    padding: 1rem;
    background: rgba(26, 13, 46, 0.3);
    border-radius: 10px;
    backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
}

.stat-item {
    margin-bottom: 0;
}

.stat-bar {
    width: 100%;
    height: 8px;
    background: rgba(107, 63, 160, 0.2);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.stat-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--purple), var(--light-purple));
    border-radius: 4px;
    transition: width 0.8s ease-out;
    box-shadow: 0 0 10px rgba(107, 63, 160, 0.6);
}

/* ============================================
   LE JARDIN DES ILLUSIONS - Puzzle
   ============================================ */
.puzzle-container {
    margin-top: 2rem;
}

.puzzle-doors {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}

.door {
    width: 200px;
    height: 300px;
    background: rgba(26, 13, 46, 0.6);
    border: 3px solid var(--purple);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
}

.door::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, rgba(107, 63, 160, 0.3) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.door:hover {
    transform: scale(1.1) translateY(-10px);
    border-color: var(--gold);
    box-shadow: 0 0 30px rgba(212, 175, 55, 0.6);
}

.door:hover::before {
    opacity: 1;
}

.door.selected {
    border-color: var(--teal);
    box-shadow: 0 0 40px rgba(78, 205, 196, 0.8);
    animation: doorPulse 1s ease-in-out infinite;
}

@keyframes doorPulse {
    0%, 100% { transform: scale(1.1); }
    50% { transform: scale(1.15); }
}

.door-symbol {
    font-size: 4rem;
    margin-bottom: 1rem;
    filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.5));
}

.door-hint {
    font-family: 'Playfair Display', serif;
    font-size: 1.2rem;
    color: var(--text-dim);
    text-align: center;
}

.puzzle-instruction {
    margin: 2rem 0;
    font-style: italic;
    color: var(--text-dim);
    font-size: 1.1rem;
}

.puzzle-feedback {
    min-height: 60px;
    font-size: 1.3rem;
    color: var(--teal);
    font-family: 'Playfair Display', serif;
    animation: fadeIn 0.5s ease-out;
}

/* ============================================
   LA SALLE DU THÉ - Visual Novel
   ============================================ */
.visual-novel-container {
    max-width: 800px;
    margin: 0 auto;
}

.vn-character {
    height: 140px;
    margin-bottom: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.character-silhouette {
    width: 140px;
    height: 140px;
    background: radial-gradient(circle, rgba(107, 63, 160, 0.4) 0%, transparent 70%);
    border-radius: 50%;
    position: relative;
    animation: characterFloat 3s ease-in-out infinite;
}

.character-silhouette::before {
    content: '🎩';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3rem;
    filter: drop-shadow(0 0 20px rgba(212, 175, 55, 0.6));
}

@keyframes characterFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}

.vn-dialogue-box {
    background: rgba(26, 13, 46, 0.8);
    border: 2px solid var(--gold);
    border-radius: 15px;
    padding: 1.3rem;
    margin-bottom: 1rem;
    backdrop-filter: blur(10px);
    box-shadow: 0 0 30px rgba(212, 175, 55, 0.3);
    animation: fadeInUp 0.5s ease-out;
}

.vn-speaker {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.1rem, 2.2vw, 1.3rem);
    color: var(--gold);
    margin-bottom: 0.7rem;
}

.vn-text {
    font-size: clamp(1rem, 2vw, 1.15rem);
    line-height: 1.6;
    color: var(--text-light);
    min-height: 80px;
    white-space: pre-line;
}

.vn-choices {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.vn-choice-btn {
    font-family: 'Playfair Display', serif;
    font-size: clamp(0.95rem, 1.9vw, 1.1rem);
    background: rgba(107, 63, 160, 0.3);
    color: var(--text-light);
    border: 2px solid var(--purple);
    padding: 0.85rem 1.2rem;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: left;
    border-radius: 8px;
    animation: slideInRight 0.5s ease-out;
    animation-fill-mode: both;
}

.vn-choice-btn:nth-child(1) { animation-delay: 0.1s; }
.vn-choice-btn:nth-child(2) { animation-delay: 0.2s; }
.vn-choice-btn:nth-child(3) { animation-delay: 0.3s; }

.vn-choice-btn:hover {
    background: rgba(107, 63, 160, 0.5);
    border-color: var(--light-purple);
    transform: translateX(10px);
    box-shadow: 0 0 20px rgba(107, 63, 160, 0.5);
}

/* ============================================
   FINAL PERSONNALISÉ
   ============================================ */
.final-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

.final-content {
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    line-height: 1.8;
    color: var(--text-light);
    text-align: center;
    max-width: 800px;
    font-family: 'Playfair Display', serif;
    animation: fadeInUp 2s ease-out;
    padding: 2rem;
}

.final-content p {
    margin-bottom: 2rem;
    opacity: 0;
    animation: fadeInUp 1s ease-out forwards;
}

.final-content p:nth-child(1) { animation-delay: 0.5s; }
.final-content p:nth-child(2) { animation-delay: 1s; }
.final-content p:nth-child(3) { animation-delay: 1.5s; }
.final-content p:nth-child(4) { animation-delay: 2s; }

.final-highlight {
    color: var(--gold);
    text-shadow: 0 0 20px rgba(212, 175, 55, 0.6);
}

/* ============================================
   RESPONSIVE - MOBILE FIRST
   ============================================ */
@media (max-width: 768px) {
    body {
        font-size: 16px;
        -webkit-text-size-adjust: 100%;
    }

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

    .scene-title {
        font-size: 1.8rem;
        margin-bottom: 1.5rem;
    }

    .intro-text {
        font-size: 1.5rem;
        padding: 0.5rem;
        line-height: 1.4;
    }

    .intro-top {
        gap: 1.5rem;
        margin-bottom: 1rem;
        flex-direction: column;
    }

    .clock-container {
        width: 120px;
        height: 120px;
    }

    .rabbit-container {
        width: 120px;
        height: 120px;
    }

    .rabbit-image {
        max-width: 100%;
        max-height: 100%;
    }

    .hour-hand {
        height: 35px;
        margin-top: -35px;
        width: 3px;
    }

    .minute-hand {
        height: 50px;
        margin-top: -50px;
        width: 2px;
    }

    .main-btn {
        font-size: 1.4rem;
        padding: 0.8rem 2rem;
        letter-spacing: 1px;
    }

    .narrative-text {
        font-size: 1.1rem;
        line-height: 1.8;
        margin-bottom: 2rem;
        min-height: 150px;
    }

    .terrier-minimal-container {
        padding-top: clamp(0.3rem, 1.5vh, 0.8rem);
        gap: 0.8rem;
    }

    .terrier-minimal-container.has-selection {
        padding-top: clamp(3rem, 7vh, 5rem);
        gap: 0.3rem;
    }

    .terrier-objects.moved-up {
        top: clamp(0.3rem, 1.5vh, 0.8rem);
        gap: clamp(0.4rem, 1vw, 0.8rem);
    }

    .terrier-reveal {
        margin: clamp(3.5rem, 8vh, 5rem) auto 0.5rem;
        padding: clamp(0.6rem, 1.2vw, 1rem) clamp(0.8rem, 2vw, 1.5rem);
        font-size: clamp(0.9rem, 1.8vw, 1.3rem);
        line-height: 1.75;
    }

    .terrier-reveal.scrolled-up {
        margin-top: clamp(3rem, 7vh, 4.5rem);
    }

    .temps-clock-container {
        margin: clamp(0.5rem, 2vh, 1rem) auto;
    }

    .temps-moments {
        margin: clamp(0.5rem, 2vh, 1rem) auto;
    }

    .temps-reveal {
        margin: clamp(1rem, 2.5vh, 2rem) auto 0.5rem;
        padding: clamp(0.6rem, 1.2vw, 1rem) clamp(0.8rem, 2vw, 1.5rem);
        font-size: clamp(0.9rem, 1.8vw, 1.3rem);
    }

    .temps-reveal.scrolled-up {
        margin-top: clamp(0.8rem, 2vh, 1.5rem) !important;
    }

    .terrier-instruction {
        font-size: 1rem;
        margin: 1.5rem 0;
        line-height: 1.6;
    }

    .figures-container {
        flex-direction: column;
        align-items: center;
        gap: 1.2rem;
        margin: 2rem 0;
    }

    .figure-card {
        max-width: 100%;
        min-height: 200px;
        padding: 1.5rem;
        width: 100%;
    }
    
    .jardin-mirrors {
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
        margin: 2rem 0;
    }
    
    .mirror-card {
        max-width: 100%;
        min-height: 320px;
        padding: 1.5rem 1.2rem 1.8rem;
        justify-content: flex-start;
    }
    
    .mirror-image {
        width: 70px;
        height: 70px;
        margin-bottom: 0.7rem;
    }
    
    .mirror-title {
        font-size: 1.3rem;
        margin-bottom: 0.8rem;
    }
    
    .mirror-text {
        font-size: 0.95rem;
        line-height: 1.4;
    }

    .figure-title {
        font-size: 1.5rem;
        margin-bottom: 1rem;
    }

    .figure-description {
        font-size: 1rem;
        line-height: 1.6;
    }

    .terrier-response {
        font-size: 1.1rem;
        line-height: 1.8;
        margin: 1.5rem 0;
        min-height: 100px;
    }

    .retry-btn {
        font-size: 1rem;
        padding: 0.7rem 1.5rem;
    }

    .puzzle-doors {
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
    }

    .door {
        width: 100%;
        max-width: 200px;
        height: 250px;
    }

    .door-symbol {
        font-size: 3rem;
    }

    .door-hint {
        font-size: 1rem;
    }

    .puzzle-instruction {
        font-size: 1rem;
        margin: 1.5rem 0;
    }

    .puzzle-feedback {
        font-size: 1.1rem;
        min-height: 50px;
    }

    .vn-character {
        height: 150px;
        margin-bottom: 1.5rem;
    }

    .character-silhouette {
        width: 120px;
        height: 120px;
    }

    .vn-dialogue-box {
        padding: 1.5rem;
        margin-bottom: 1.5rem;
    }

    .vn-speaker {
        font-size: 1.3rem;
        margin-bottom: 0.8rem;
    }

    .vn-text {
        font-size: 1.1rem;
        line-height: 1.6;
        min-height: 80px;
    }

    .vn-choices {
        gap: 0.8rem;
    }

    .choice-btn, .vn-choice-btn {
        font-size: 1rem;
        padding: 0.9rem 1.2rem;
        line-height: 1.4;
    }

    .final-content {
        font-size: 1.3rem;
        padding: 1.5rem;
        line-height: 1.6;
    }

    .final-content p {
        margin-bottom: 1.5rem;
    }

    /* Optimisation vidéo mobile */
    .terrier-bg-video {
        opacity: 0.6;
    }

    .terrier-background::before {
        background: rgba(10, 10, 15, 0.5);
    }
}

/* Très petits écrans */
@media (max-width: 480px) {
    .scene-title {
        font-size: 1.5rem;
    }

    .intro-text {
        font-size: 1.3rem;
    }

    .clock-container, .rabbit-container {
        width: 100px;
        height: 100px;
    }

    .main-btn {
        font-size: 1.2rem;
        padding: 0.7rem 1.5rem;
    }

    .figure-card {
        padding: 1.2rem;
        min-height: 180px;
    }

    .figure-title {
        font-size: 1.3rem;
    }

    .narrative-text {
        font-size: 1rem;
    }

    .choice-btn, .vn-choice-btn {
        font-size: 0.95rem;
        padding: 0.8rem 1rem;
    }
}

/* ============================================
   LA VÉRITÉ - 4 Lettres
   ============================================ */
.verite-letters {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin: 1.5rem 0;
    flex-wrap: wrap;
    position: relative;
    z-index: 10;
}

.letter-card {
    background: rgba(26, 13, 46, 0.7);
    border: 2px solid var(--purple);
    border-radius: 20px;
    padding: 1.2rem 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(15px);
    max-width: 150px;
    width: 100%;
    min-height: 160px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: visible;
    z-index: 10;
    pointer-events: auto;
}

/* Enveloppe 3D */
.letter-envelope-3d {
    width: 200px;
    height: 140px;
    position: relative;
    cursor: pointer;
    transform-style: preserve-3d;
    perspective: 1000px;
    margin: 0 auto;
    transition: transform 0.3s ease;
}

.letter-envelope-3d:hover {
    transform: translateY(-5px) scale(1.05);
}

.letter-envelope-3d.opening {
    pointer-events: none;
}

.envelope-back,
.envelope-front,
.envelope-flap {
    position: absolute;
    width: 200px;
    height: 140px;
    background: rgba(26, 13, 46, 0.9);
    border: 2px solid var(--purple);
    border-radius: 5px;
    transform-origin: bottom center;
}

.envelope-back {
    background: rgba(20, 10, 35, 0.95);
    z-index: 1;
}

.envelope-front {
    background: rgba(26, 13, 46, 0.95);
    z-index: 2;
    border-color: var(--gold);
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.3);
}

.envelope-flap {
    background: rgba(30, 15, 50, 0.95);
    border-bottom: none;
    border-radius: 5px 5px 0 0;
    z-index: 3;
    transform-origin: top center;
    transform: rotateX(0deg);
    transition: transform 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    border-color: var(--gold);
    box-shadow: 0 -5px 20px rgba(212, 175, 55, 0.4);
}

.letter-envelope-3d.opening .envelope-flap {
    transform: rotateX(-180deg);
}

.letter-envelope-3d.opening .envelope-front {
    animation: letterSlideOut 0.8s ease-out 0.3s forwards;
}

@keyframes letterSlideOut {
    0% {
        transform: translateZ(0);
        opacity: 1;
    }
    100% {
        transform: translateZ(-50px) translateY(-20px);
        opacity: 0;
    }
}

.letter-seal {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3rem;
    z-index: 4;
    opacity: 0.9;
    filter: drop-shadow(0 0 15px rgba(212, 175, 55, 0.6));
    transition: opacity 0.5s ease, transform 0.5s ease;
    pointer-events: none;
}

.letter-envelope-3d.opening .letter-seal {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5);
}

.letter-card-title {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Playfair Display', serif;
    font-size: clamp(0.9rem, 2vw, 1.1rem);
    color: var(--gold);
    font-weight: 500;
    text-align: center;
    z-index: 4;
    pointer-events: none;
    transition: opacity 0.5s ease;
}

.letter-envelope-3d.opening .letter-card-title {
    opacity: 0;
}

.verite-content {
    font-size: clamp(1rem, 2.2vw, 1.2rem);
    line-height: 1.6;
    color: var(--text-light);
    margin: 1rem 0 0.5rem;
    font-style: italic;
    text-align: center;
    min-height: auto;
    position: relative;
    z-index: 10;
    padding: 1.2rem 1rem;
    background: rgba(26, 13, 46, 0.6);
    border-radius: 15px;
    border: 1px solid rgba(212, 175, 55, 0.3);
    max-height: 400px;
    overflow-y: auto;
}

/* ============================================
   LA HCHOUMANCE
   ============================================ */
.hchoumance-content {
    font-size: clamp(1.1rem, 2.5vw, 1.4rem);
    line-height: 1.8;
    color: var(--text-light);
    margin: 2rem 0;
    font-style: italic;
    text-align: center;
    min-height: 150px;
    position: relative;
    z-index: 10;
    padding: 1.5rem;
    background: rgba(26, 13, 46, 0.7);
    border-radius: 15px;
    border: 1px solid rgba(216, 144, 199, 0.4);
    box-shadow: 0 0 30px rgba(216, 144, 199, 0.2);
}

/* ============================================
   LA FOLIE
   ============================================ */
.folie-content {
    font-size: clamp(1.1rem, 2.5vw, 1.4rem);
    line-height: 1.8;
    color: var(--text-light);
    margin: 2rem 0;
    font-style: italic;
    text-align: center;
    min-height: 150px;
    position: relative;
    z-index: 10;
    padding: 1.5rem;
    background: rgba(26, 13, 46, 0.7);
    border-radius: 15px;
    border: 1px solid rgba(216, 144, 199, 0.4);
    box-shadow: 0 0 30px rgba(216, 144, 199, 0.2);
}

@media (max-width: 768px) {
    .verite-letters {
        flex-direction: row;
        gap: 1rem;
        margin: 1.5rem 0;
    }
    
    .letter-card {
        max-width: 150px;
        min-height: 180px;
        padding: 1.2rem 1rem;
    }
    
    .letter-envelope-3d {
        width: 160px;
        height: 112px;
    }
    
    .envelope-back,
    .envelope-front,
    .envelope-flap {
        width: 160px;
        height: 112px;
    }
    
    .letter-seal {
        font-size: 2.5rem;
    }
    
    .verite-content {
        font-size: 1rem;
        padding: 1.2rem;
        margin: 1rem 0;
    }
}

@media (max-width: 480px) {
    .verite-letters {
        flex-direction: column;
        gap: 1rem;
    }
    
    .letter-card {
        max-width: 100%;
        min-height: 160px;
    }
}

/* ============================================
   LES LETTRES QUI TOMBENT
   ============================================ */
.lettres-tombantes-background {
    background: linear-gradient(135deg, #0a0a0f 0%, #1a0d2e 50%, #0a0a0f 100%);
    position: relative;
    overflow: hidden;
}

.lettres-tombantes-background::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 10, 15, 0.4);
    z-index: 1;
    pointer-events: none;
}

.lettres-tombantes-background > * {
    position: relative;
    z-index: 2;
}

.lettres-instruction {
    position: fixed;
    top: 2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    text-align: center;
    max-width: 600px;
    padding: 1.5rem 2rem;
    background: rgba(10, 10, 15, 0.7);
    border: 1px solid rgba(212, 175, 55, 0.4);
    border-radius: 12px;
    box-shadow: 0 0 30px rgba(212, 175, 55, 0.2);
    animation: fadeIn 0.8s ease-in;
}

.lettres-instruction .narrative-text {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1rem, 2vw, 1.3rem);
    color: var(--text-light);
    line-height: 1.6;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}

.lettres-tombantes-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
}

.lettre-tombante {
    position: absolute;
    width: 80px;
    height: 100px;
    background: linear-gradient(135deg, rgba(240, 230, 247, 0.15) 0%, rgba(216, 144, 199, 0.2) 100%);
    border: 1.5px solid rgba(212, 175, 55, 0.4);
    border-radius: 8px;
    box-shadow: 
        0 0 20px rgba(212, 175, 55, 0.3),
        0 0 40px rgba(216, 144, 199, 0.2),
        inset 0 0 20px rgba(240, 230, 247, 0.1);
    cursor: pointer;
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: rgba(212, 175, 55, 0.8);
    transition: all 0.3s ease;
    animation: lettreFloat 8s ease-in-out infinite;
    transform-origin: center;
}

.lettre-tombante:hover {
    transform: scale(1.1);
    box-shadow: 
        0 0 30px rgba(212, 175, 55, 0.5),
        0 0 60px rgba(216, 144, 199, 0.3),
        inset 0 0 30px rgba(240, 230, 247, 0.2);
    border-color: rgba(212, 175, 55, 0.7);
}

.lettre-tombante.falling {
    animation: lettreFall 15s linear forwards;
}

.lettre-tombante.disappearing {
    animation: lettreDisappear 0.5s ease-out forwards;
    pointer-events: none;
}

.lettre-tombante.opening {
    animation: lettreOpen 1s ease-out forwards;
    pointer-events: none;
}

@keyframes lettreFloat {
    0%, 100% {
        transform: translateX(0) rotate(0deg);
    }
    25% {
        transform: translateX(-10px) rotate(-2deg);
    }
    50% {
        transform: translateX(10px) rotate(2deg);
    }
    75% {
        transform: translateX(-5px) rotate(-1deg);
    }
}

@keyframes lettreFall {
    0% {
        top: -120px;
        opacity: 0;
        transform: translateX(0) rotate(0deg);
    }
    5% {
        opacity: 1;
    }
    20% {
        transform: translateX(-15px) rotate(-3deg);
    }
    40% {
        transform: translateX(15px) rotate(3deg);
    }
    60% {
        transform: translateX(-10px) rotate(-2deg);
    }
    80% {
        transform: translateX(10px) rotate(2deg);
    }
    95% {
        opacity: 1;
        top: calc(100vh - 150px);
    }
    100% {
        top: calc(100vh - 150px);
        opacity: 1;
        transform: translateX(0) rotate(0deg);
    }
}

@keyframes lettreDisappear {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(0.3) translateY(20px);
    }
}

@keyframes lettreOpen {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2) rotate(5deg);
    }
    100% {
        transform: scale(1.5) translateY(-50vh) rotate(10deg);
        opacity: 0;
    }
}

.lettre-ouverte-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    background: rgba(10, 10, 15, 0.7);
    animation: fadeIn 0.5s ease-in;
}

.lettre-ouverte-paper {
    max-width: 600px;
    width: 90%;
    min-height: 300px;
    background: linear-gradient(135deg, rgba(240, 230, 247, 0.95) 0%, rgba(255, 255, 255, 0.98) 100%);
    border: 2px solid rgba(212, 175, 55, 0.6);
    border-radius: 12px;
    padding: 3rem 2.5rem;
    box-shadow: 
        0 0 50px rgba(212, 175, 55, 0.4),
        0 0 100px rgba(216, 144, 199, 0.3);
    color: #1a0d2e;
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.2rem, 2.5vw, 1.6rem);
    line-height: 1.8;
    text-align: center;
    animation: lettreReveal 0.8s ease-out;
    position: relative;
}

.lettre-ouverte-paper::before {
    content: '';
    position: absolute;
    top: 20px;
    left: 20px;
    right: 20px;
    bottom: 20px;
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 8px;
    pointer-events: none;
}

.lettre-ouverte-text {
    position: relative;
    z-index: 1;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes lettreReveal {
    from {
        opacity: 0;
        transform: scale(0.8) translateY(20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Système d'onglets pour les lettres */
.lettres-tabs-container {
    position: fixed;
    bottom: 5rem;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 800px;
    z-index: 100;
    background: rgba(10, 10, 15, 0.9);
    border: 1px solid rgba(212, 175, 55, 0.4);
    border-radius: 12px;
    box-shadow: 0 0 40px rgba(212, 175, 55, 0.3);
    animation: fadeIn 0.5s ease-in;
}

.lettres-tabs-header {
    display: flex;
    gap: 0.5rem;
    padding: 0.5rem;
    border-bottom: 1px solid rgba(212, 175, 55, 0.2);
    overflow-x: auto;
}

.lettre-tab-wrapper {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    position: relative;
}

.lettre-tab-btn {
    padding: 0.7rem 1.5rem;
    background: rgba(107, 63, 160, 0.2);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 8px;
    color: var(--text-light);
    font-family: 'Playfair Display', serif;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.lettre-tab-btn:hover {
    background: rgba(107, 63, 160, 0.4);
    border-color: rgba(212, 175, 55, 0.5);
}

.lettre-tab-btn.active {
    background: rgba(212, 175, 55, 0.3);
    border-color: rgba(212, 175, 55, 0.7);
    color: var(--gold);
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.3);
}

.lettre-tab-close {
    width: 20px;
    height: 20px;
    padding: 0;
    background: rgba(216, 144, 199, 0.2);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 50%;
    color: var(--text-light);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.lettre-tab-close:hover {
    background: rgba(216, 144, 199, 0.4);
    border-color: rgba(212, 175, 55, 0.6);
    color: var(--gold);
    transform: scale(1.1);
}

.lettres-tabs-content {
    padding: 2rem;
    min-height: 150px;
    max-height: 300px;
    overflow-y: auto;
}

.lettre-tab-content {
    display: none;
}

.lettre-tab-content:first-child {
    display: block;
}

.lettre-tab-text {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.1rem, 2vw, 1.4rem);
    color: var(--text-light);
    line-height: 1.8;
    text-align: center;
}

.lettres-continue-wrapper {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 200;
    animation: fadeIn 0.5s ease-in;
}

@media (max-width: 768px) {
    .lettre-tombante {
        width: 60px;
        height: 80px;
        font-size: 1.5rem;
    }

    .lettre-ouverte-paper {
        padding: 2rem 1.5rem;
        font-size: 1.1rem;
    }

    .lettres-tabs-container {
        width: 95%;
        bottom: 6rem;
    }

    .lettres-tabs-header {
        padding: 0.3rem;
    }

    .lettre-tab-btn {
        padding: 0.5rem 1rem;
        font-size: 0.8rem;
    }

    .lettres-tabs-content {
        padding: 1.5rem;
        max-height: 250px;
    }
}

/* ============================================
   PAGE LA CLÉ
   ============================================ */
.cle-doors {
    display: flex;
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin: 3rem auto;
    max-width: 900px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.cle-doors.show {
    opacity: 1;
    transform: translateY(0);
}

.cle-door {
    width: clamp(120px, 15vw, 180px);
    height: clamp(120px, 15vw, 180px);
    border-radius: 12px;
    border: 2px solid rgba(212, 175, 55, 0.3);
    background: rgba(26, 13, 46, 0.4);
    backdrop-filter: blur(10px);
    cursor: pointer;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    box-shadow: 0 0 40px rgba(107, 63, 160, 0.2);
}

.cle-door-glow {
    position: absolute;
    inset: -50%;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.15) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.cle-door:hover {
    transform: translateY(-10px) scale(1.05);
    border-color: rgba(212, 175, 55, 0.6);
    box-shadow: 0 0 60px rgba(212, 175, 55, 0.3);
}

.cle-door:hover .cle-door-glow {
    opacity: 1;
}

.cle-door-icon {
    font-size: clamp(2.5rem, 6vw, 4rem);
    filter: drop-shadow(0 0 20px rgba(212, 175, 55, 0.4));
}

.cle-door-label {
    font-size: clamp(0.9rem, 2vw, 1.2rem);
    color: rgba(240, 230, 247, 0.9);
    font-weight: 500;
    text-align: center;
}

.cle-door.chosen {
    transform: scale(1.1);
    border-color: rgba(240, 230, 247, 0.5);
    box-shadow: 0 0 80px rgba(240, 230, 247, 0.2);
}

.cle-door.fade-out {
    opacity: 0;
    transform: scale(0.9);
    pointer-events: none;
}

.cle-reveal {
    max-width: 90%;
    width: 100%;
    margin: 0 auto 2rem;
    text-align: center;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease, transform 0.8s ease;
    padding: clamp(0.8rem, 2vw, 1.2rem) clamp(1rem, 3vw, 2rem);
    box-sizing: border-box;
}

.cle-reveal.show {
    opacity: 1;
    transform: translateY(0);
}

.cle-reveal-text {
    color: rgba(240, 230, 247, 0.88);
    font-style: italic;
    line-height: 1.8;
}

/* ============================================
   PAGE LE TEMPS
   ============================================ */
.temps-clock-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 3rem auto;
    opacity: 1;
    transition: opacity 0.6s ease;
}

.temps-clock {
    width: clamp(200px, 30vw, 300px);
    height: clamp(200px, 30vw, 300px);
    position: relative;
}

.temps-clock-face {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 3px solid rgba(212, 175, 55, 0.4);
    background: rgba(26, 13, 46, 0.3);
    backdrop-filter: blur(10px);
    position: relative;
    box-shadow: 0 0 60px rgba(107, 63, 160, 0.3), inset 0 0 40px rgba(212, 175, 55, 0.1);
}

.temps-clock-hand {
    position: absolute;
    background: rgba(212, 175, 55, 0.9);
    transform-origin: bottom center;
    border-radius: 2px;
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
}

#temps-hour-hand {
    width: 4px;
    height: 35%;
    top: 15%;
    left: 50%;
    transform: translateX(-50%);
}

#temps-minute-hand {
    width: 3px;
    height: 45%;
    top: 5%;
    left: 50%;
    transform: translateX(-50%);
}

.temps-clock-center {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(212, 175, 55, 0.9);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.6);
}

.temps-moments {
    display: flex;
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin: 3rem auto;
    max-width: 900px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.temps-moments.show {
    opacity: 1;
    transform: translateY(0);
}

.temps-moment {
    width: clamp(120px, 15vw, 180px);
    height: clamp(120px, 15vw, 180px);
    border-radius: 12px;
    border: 2px solid rgba(212, 175, 55, 0.3);
    background: rgba(26, 13, 46, 0.4);
    backdrop-filter: blur(10px);
    cursor: pointer;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    box-shadow: 0 0 40px rgba(107, 63, 160, 0.2);
}

.temps-moment:hover {
    transform: translateY(-10px) scale(1.05);
    border-color: rgba(212, 175, 55, 0.6);
    box-shadow: 0 0 60px rgba(212, 175, 55, 0.3);
}

.temps-moment-icon {
    font-size: clamp(2.5rem, 6vw, 4rem);
    filter: drop-shadow(0 0 20px rgba(212, 175, 55, 0.4));
}

.temps-moment-label {
    font-size: clamp(0.9rem, 2vw, 1.2rem);
    color: rgba(240, 230, 247, 0.9);
    font-weight: 500;
}

.temps-moment.chosen {
    transform: scale(1.1);
    border-color: rgba(240, 230, 247, 0.5);
    box-shadow: 0 0 80px rgba(240, 230, 247, 0.2);
}

.temps-moment.fade-out {
    opacity: 0;
    transform: scale(0.9);
    pointer-events: none;
}

.temps-reveal {
    max-width: 95%;
    width: 95%;
    margin: clamp(1.5rem, 3vh, 2.5rem) auto 1rem;
    text-align: center;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease;
    padding: clamp(0.8rem, 1.5vw, 1.2rem) clamp(1rem, 3vw, 2rem);
    box-sizing: border-box;
    position: relative;
}

.temps-reveal.scrolled-up {
    margin-top: clamp(1rem, 2.5vh, 2rem) !important;
    transition: margin-top 0.4s ease;
}

.temps-reveal.show {
    opacity: 1;
    transform: translateY(0);
}

.temps-reveal-text {
    color: rgba(240, 230, 247, 0.88);
    font-style: italic;
    line-height: 1.8;
}

/* ============================================
   PAGE LA FLEUR
   ============================================ */
.fleur-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: clamp(1.2rem, 3vh, 2.2rem) auto 0.8rem;
    min-height: 200px;
}

.fleur-main {
    width: clamp(150px, 25vw, 250px);
    height: clamp(150px, 25vw, 250px);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 0 28px rgba(212, 175, 55, 0.25));
    animation: fleurOpen 1400ms ease both, fleurBreath 4600ms ease-in-out infinite 1400ms;
}

@keyframes fleurOpen {
    0% {
        transform: scale(0.7) rotate(-8deg);
        opacity: 0;
    }
    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

@keyframes fleurBreath {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50% { transform: scale(1.04) rotate(0.8deg); }
}

.fleur-petal {
    position: absolute;
    font-size: clamp(3rem, 8vw, 5rem);
    filter: drop-shadow(0 0 20px rgba(212, 175, 55, 0.4));
    opacity: 0;
}

.fleur-petal-1 {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    animation: petalBloomTop 1100ms cubic-bezier(.2,.9,.2,1) 250ms both,
               fleurFloat 5200ms ease-in-out 1350ms infinite;
}

.fleur-petal-2 {
    bottom: 0;
    left: 0;
    animation: petalBloomLeft 1100ms cubic-bezier(.2,.9,.2,1) 450ms both,
               fleurFloat 5600ms ease-in-out 1550ms infinite;
}

.fleur-petal-3 {
    bottom: 0;
    right: 0;
    animation: petalBloomRight 1100ms cubic-bezier(.2,.9,.2,1) 650ms both,
               fleurFloat 6000ms ease-in-out 1750ms infinite;
}

@keyframes fleurFloat {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-14px) rotate(8deg);
    }
}

@keyframes petalBloomTop {
    0% { opacity: 0; transform: translateX(-50%) translateY(14px) scale(0.65) rotate(-18deg); }
    100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1) rotate(0deg); }
}

@keyframes petalBloomLeft {
    0% { opacity: 0; transform: translateY(10px) scale(0.65) rotate(14deg); }
    100% { opacity: 1; transform: translateY(0) scale(1) rotate(0deg); }
}

@keyframes petalBloomRight {
    0% { opacity: 0; transform: translateY(10px) scale(0.65) rotate(-14deg); }
    100% { opacity: 1; transform: translateY(0) scale(1) rotate(0deg); }
}

.fleur-center {
    position: absolute;
    font-size: clamp(2rem, 5vw, 3rem);
    z-index: 1;
    filter: drop-shadow(0 0 15px rgba(212, 175, 55, 0.5));
    animation: fleurPulse 2000ms ease-in-out infinite;
}

@keyframes fleurPulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

.fleur-memories {
    display: flex;
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin: clamp(1.2rem, 3vh, 2.2rem) auto 0.8rem;
    max-width: 980px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.fleur-memories.show {
    opacity: 1;
    transform: translateY(0);
}

.fleur-memory {
    width: clamp(130px, 16vw, 190px);
    height: clamp(130px, 16vw, 190px);
    border-radius: 999px;
    border: 2px solid rgba(212, 175, 55, 0.28);
    background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.08) 0%, rgba(26, 13, 46, 0.42) 45%, rgba(12, 8, 18, 0.55) 100%);
    backdrop-filter: blur(10px);
    cursor: pointer;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    box-shadow: 0 0 40px rgba(107, 63, 160, 0.2);
}

.fleur-memory::before {
    content: '';
    position: absolute;
    inset: 6%;
    border-radius: 999px;
    background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.14), transparent 55%);
    opacity: 0.8;
    pointer-events: none;
}

.fleur-memory::after {
    /* petite “queue” de bulle */
    content: '';
    position: absolute;
    width: 18%;
    height: 18%;
    border-radius: 999px;
    left: 16%;
    bottom: 10%;
    background: rgba(255, 255, 255, 0.05);
    filter: blur(0.2px);
    opacity: 0.65;
}

.fleur-memory-glow {
    position: absolute;
    inset: -50%;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.16) 0%, transparent 65%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.fleur-memory:hover {
    transform: translateY(-10px) scale(1.05);
    border-color: rgba(212, 175, 55, 0.6);
    box-shadow: 0 0 60px rgba(212, 175, 55, 0.3);
}

.fleur-memory:active {
    transform: translateY(-6px) scale(1.03);
}

.fleur-memory:hover .fleur-memory-glow {
    opacity: 1;
}

.fleur-memory-icon {
    font-size: clamp(2.5rem, 6vw, 4rem);
    filter: drop-shadow(0 0 20px rgba(212, 175, 55, 0.4));
}

.fleur-memory-label {
    font-size: clamp(0.9rem, 2vw, 1.2rem);
    color: rgba(240, 230, 247, 0.9);
    font-weight: 500;
}

.fleur-memory.chosen {
    transform: scale(1.1);
    border-color: rgba(240, 230, 247, 0.5);
    box-shadow: 0 0 80px rgba(240, 230, 247, 0.2);
}

.fleur-memory.fade-out {
    opacity: 0;
    transform: scale(0.9);
    pointer-events: none;
}

.fleur-reveal {
    max-width: 90%;
    width: 100%;
    margin: 2rem auto;
    text-align: center;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease, transform 0.8s ease;
    padding: 1.5rem clamp(1rem, 3vw, 2rem);
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    background: rgba(18, 10, 26, 0.35);
    border: 1px solid rgba(212, 175, 55, 0.18);
    backdrop-filter: blur(14px);
}

.fleur-reveal.show {
    opacity: 1;
    transform: translateY(0);
}

.fleur-reveal-text {
    color: rgba(240, 230, 247, 0.88);
    font-style: italic;
    line-height: 1.8;
}

/* Échos visuels (lignes fantômes) */
.fleur-echo {
    position: absolute;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -50%) translate(var(--dx, 0px), var(--dy, 0px)) rotate(var(--rot, 0deg));
    font-family: 'Playfair Display', serif;
    font-size: clamp(0.95rem, 1.7vw, 1.2rem);
    color: rgba(240, 230, 247, 0.22);
    filter: blur(0.6px);
    opacity: 0;
    pointer-events: none;
    white-space: nowrap;
    animation: fleurEcho 2400ms ease forwards;
}

@keyframes fleurEcho {
    0% { opacity: 0; transform: translate(-50%, -50%) translate(var(--dx, 0px), var(--dy, 0px)) rotate(var(--rot, 0deg)) scale(0.98); }
    15% { opacity: 0.8; }
    100% { opacity: 0; transform: translate(-50%, -50%) translate(calc(var(--dx, 0px) * 1.05), calc(var(--dy, 0px) - 22px)) rotate(var(--rot, 0deg)) scale(1.02); }
}

/* Pollen */
.fleur-pollen {
    position: fixed;
    left: 0;
    top: 0;
    width: var(--size, 3px);
    height: var(--size, 3px);
    border-radius: 999px;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.9) 0%, rgba(212, 175, 55, 0.15) 70%, transparent 100%);
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.35);
    pointer-events: none;
    opacity: 0;
    transform: translate(0, 0);
    animation: fleurPollenRise var(--dur, 1600ms) ease-out forwards;
    z-index: 15;
}

@keyframes fleurPollenRise {
    0% { opacity: 0; transform: translate(0, 0) scale(0.9); }
    10% { opacity: 0.85; }
    100% { opacity: 0; transform: translate(var(--dx, 0px), calc(-1 * var(--rise, 180px))) scale(1.15); }
}

/* ============================================
   TRANSITIONS ENTRE SCÈNES
   ============================================ */
.scene.transition-out {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
}

.scene.transition-in {
    opacity: 1;
    transform: translateY(0) scale(1);
}