/* --- Styles de base et Overlays --- */
body { background-image: url('images/fond_mission5.png'); background-size: cover; background-position: center; font-family: 'Lora', serif; color: #e0dacc; margin: 0; overflow: hidden; }
.mission-wrapper { width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; text-align: center; background: rgba(26, 18, 11, 0.8); }
h1, h2 { font-family: 'Cinzel', serif; color: #d4af37; }
.trial-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(8px); justify-content: center; align-items: center; animation: fadeIn 0.5s ease-in-out; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.trial-content { background: #1a120b; padding: 2rem; border-radius: 10px; border: 1px solid #4a3f35; max-width: 90vw; max-height: 90vh; overflow-y: auto; width: 800px; }
.feedback-message { margin-top: 1.5rem; font-style: italic; min-height: 24px; transition: color 0.3s; }
.feedback-message.error { color: #dc3545; }
.feedback-message.success { color: #28a745; }
#start-screen { padding: 2rem; }
#start-mission-btn { background-color: #d4af37; color: #1a120b; border: none; padding: 15px 30px; font-family: 'Cinzel', serif; font-size: 1.2rem; cursor: pointer; transition: all 0.3s; }
#start-mission-btn:hover { background-color: #e0dacc; }

/* --- Épreuve 1 : Le Regard de la Joconde --- */
#joconde-interactive-container { width: 100%; max-width: 600px; margin: 1.5rem auto; }
#joconde-interactive-container svg { width: 100%; height: auto; }
[id^="symbole-"] { cursor: pointer; fill: rgba(255, 255, 255, 0); transition: fill 0.3s; }
[id^="symbole-"].clicked { fill: rgba(212, 175, 55, 0.3); }
#oeil-gauche, #oeil-droit { fill: #FFFDE7; opacity: 0; pointer-events: none; }
.blink-animation { animation: blink 0.4s ease-in-out; }
@keyframes blink { 0% { opacity: 0; } 50% { opacity: 0.6; } 100% { opacity: 0; } }

/* --- Épreuve 2 : Le Verrou des Éléments --- */
.riddle-text { max-width: 600px; margin: 0 auto 2rem auto; background: rgba(0,0,0,0.2); padding: 1rem; border-left: 2px solid #4a3f35; text-align: left; }
.riddle-text ol { padding-left: 25px; }
.riddle-text li { margin-bottom: 0.5rem; }
#lock-mechanism { display: flex; justify-content: center; align-items: center; gap: 1.5rem; flex-wrap: wrap; background: rgba(0,0,0,0.3); padding: 2rem; border-radius: 10px; border: 1px solid #4a3f35; }
.lock-assembly { position: relative; width: 120px; height: 120px; }
.lock-base, .lock-key { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.lock-key { cursor: pointer; transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); top: 25%; left: 25%; width: 50%; height: 50%; }
.lock-assembly.solved .lock-key { filter: drop-shadow(0 0 8px #d4af37); pointer-events: none; }

/* --- Épreuve 3 : Saper Vedere --- */
#saper-vedere-puzzle-container { width: 100%; max-width: 700px; margin: 1.5rem auto; border: 2px solid #4a3f35; }
#saper-vedere-puzzle-container svg { width: 100%; height: auto; display: block; }
[id^="lettre-"] { fill: rgba(212, 175, 55, 0); cursor: pointer; transition: fill 0.4s; }
[id^="lettre-"].found { fill: rgba(212, 175, 55, 0.5); pointer-events: none; }
#letters-found-area { margin-top: 1.5rem; padding: 1rem; background: rgba(0,0,0,0.3); border-radius: 5px; min-height: 80px; }
#letters-display { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; margin-top: 0.5rem; }
.found-letter { font-family: 'Cinzel', serif; font-size: 2rem; color: #d4af37; animation: fadeIn 0.5s; }
#saper-vedere-form.hidden { display: none; }
#saper-vedere-form { display: flex; justify-content: center; margin-top: 1.5rem; }
#saper-vedere-input { width: 300px; text-align: center; background: transparent; border: 1px solid #4a3f35; color: #e0dacc; padding: 0.5rem; font-family: 'Lora', serif; font-size: 1.1rem; }
#saper-vedere-form button { background: #d4af37; border: none; padding: 0.5rem 1rem; cursor: pointer; font-family: 'Cinzel', serif; }

/* --- Écran de succès --- */
#codex-animation-container {
    margin: 1.5rem auto;
    background: #000;
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid #4a3f35;
    max-width: 500px;
    width: 100%;
}
#final-video {
    width: 100%;
    height: auto;
    display: block;
}
.final-message { font-style: italic; font-size: 1.2rem; color: #c7bda2; max-width: 600px; margin: 2rem auto; border-left: 3px solid #d4af37; padding-left: 1.5rem; text-align: left; }
.proceed-button { display: inline-block; text-decoration: none; margin-top: 1rem; background-color: #d4af37; color: #1a120b; padding: 10px 25px; font-family: 'Cinzel', serif; }