/* --- Styles de base et Overlays --- */
body {
    background-image: url('images/fond_mission3.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;
}
.feedback-message { margin-top: 1rem; font-style: italic; min-height: 24px; }
.feedback-message.error { color: #dc3545; }
.feedback-message.success { color: #28a745; }
form { margin-top: 1rem; display: flex; justify-content: center; gap: 1rem; }
input[type="text"] {
    background: transparent; border: 1px solid #4a3f35; color: #e0dacc;
    padding: 0.5rem; font-family: 'Lora', serif;
}
form button { background: #d4af37; border: none; padding: 0.5rem 1rem; cursor: pointer; }

/* --- Écran de départ --- */
#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; }
.trial-image { max-width: 100%; max-height: 300px; margin: 1rem 0; border: 1px solid #4a3f35; }

/* --- Épreuve 1 : Anatomie (Méthode SVG) --- */
.anatomy-puzzle {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
    margin-top: 1.5rem;
}
#anatomy-image-container {
    width: 100%;
    max-width: 450px;
    flex-shrink: 0;
}
#anatomy-image-container svg {
    width: 100%;
    height: auto;
    display: block;
}
.drop-zone {
    fill: rgba(212, 175, 55, 0.0);
    stroke: rgba(212, 175, 55, 0.7);
    stroke-width: 1px;
    stroke-dasharray: 2 2;
    transition: fill 0.3s;
}
.drop-zone.drag-over { fill: rgba(212, 175, 55, 0.3); }
.drop-zone.correct { stroke: #28a745; stroke-dasharray: none; fill: rgba(40, 167, 69, 0.2); }
#label-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background: rgba(0,0,0,0.3);
    padding: 1rem;
    border-radius: 5px;
}
.label {
    background-color: #e0dacc; color: #1a120b; padding: 8px 20px;
    font-family: 'Cinzel', serif; font-size: 1rem; border-radius: 3px;
    cursor: grab; transition: opacity 0.2s, background-color 0.2s;
    text-align: center;
}
.label.dragging { opacity: 0.4; cursor: grabbing; }
.label.placed { display: none; }
.svg-label-text {
    font-family: 'Cinzel', serif;
    font-size: 10px;
    fill: #1a120b;
    font-weight: bold;
    text-anchor: middle;
    dominant-baseline: middle;
    pointer-events: none;
}
/* --- Épreuve 2 : Homme de Vitruve --- */
#vitruve-questions { max-width: 600px; margin: 1rem auto; text-align: left; }
.question-block {
    margin-bottom: 1rem; padding: 1rem;
    background: rgba(0,0,0,0.2); border-left: 2px solid #4a3f35;
}
.question-block.correct { border-left-color: #28a745; }
.question-block input { width: 200px; text-align: center; margin: 0 10px; background: #333; border: 1px solid #4a3f35; color: #e0dacc; padding: 4px;}

/* --- Épreuve 3 : Fibonacci --- */
#fibonacci-input { letter-spacing: 5px; text-align: center; }

/* --- Écran de succès --- */
.rewards { display: flex; justify-content: center; gap: 2rem; margin: 2rem 0; }
.rewards img { max-width: 150px; height: auto; }
.proceed-button {
    display: inline-block; text-decoration: none; margin-top: 1rem; background-color: #d4af37;
    color: #1a120b; padding: 10px 25px; font-family: 'Cinzel', serif;
}