/* --- Styles de base et Overlays --- */
body { background-image: url('images/fond_mission4.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; }
h4 { font-family: 'Cinzel', serif; color: #c7bda2; margin-bottom: 0.5rem; font-weight: normal; }
em { color: #d4af37; font-style: italic; }
.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; }

/* --- É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; }

/* --- Épreuve 1 : Machine à Chiffres --- */
#cipher-machine { text-align: center; padding: 1rem 0; }
.gear-set { display: flex; justify-content: center; flex-wrap: wrap; gap: 1rem; margin-bottom: 2.5rem; background: rgba(0,0,0,0.2); padding: 2rem 1rem; border-radius: 10px; border: 1px solid #4a3f35; }
.gear-assembly { position: relative; display: flex; flex-direction: column; align-items: center; }
.marker { width: 25px; height: auto; margin-bottom: -10px; z-index: 10; }
.gear { width: 100px; height: 100px; cursor: pointer; transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
#validate-cipher-btn { background: #d4af37; color: #1a120b; border: none; padding: 10px 25px; font-family: 'Cinzel', serif; font-size: 1.1rem; cursor: pointer; }
.gear-set.shake { animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes shake { 10%, 90% { transform: translate3d(-1px, 0, 0); } 20%, 80% { transform: translate3d(2px, 0, 0); } 30%, 50%, 70% { transform: translate3d(-4px, 0, 0); } 40%, 60% { transform: translate3d(4px, 0, 0); } }

/* --- Épreuve 2 : Machine Volante ("Souffle") --- */
.trial-2-content { display: grid; grid-template-columns: 1fr 300px; gap: 1.5rem; width: 960px; max-width: 95%; }
.stage { display: flex; flex-direction: column; align-items: center; }
.machine { width: 100%; height: 300px; position: relative; display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; }
.breath-zone { width: 100%; height: 100%; border-radius: 8px; border: 2px dashed rgba(212, 175, 55, 0.2); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; background: radial-gradient(circle at 50% 90%, rgba(255,255,255,0.05), transparent 60%); cursor: grab; }
.breath-zone:active { cursor: grabbing; }
.flying-machine { width: 250px; height: auto; pointer-events: none; user-select: none; will-change: transform; transition: transform 0.1s linear, filter .2s; filter: drop-shadow(0 10px 15px rgba(0,0,0,0.2)); position: absolute; bottom: 20px; }
.hud { width: 100%; margin-top: 1rem; }
.meter { width: 100%; height: 18px; background: rgba(0,0,0,0.3); border-radius: 12px; overflow: hidden; position: relative; }
.meter .fill { height: 100%; width: 0%; background: linear-gradient(90deg, #87CEEB, #4682B4); transition: width 0.08s linear; }
.zone-ideal { position: absolute; top: 0; bottom: 0; left: 40%; width: 20%; border-left: 2px dashed rgba(40, 167, 69, 0.7); border-right: 2px dashed rgba(40, 167, 69, 0.7); pointer-events: none; }
.log { margin-top: 1rem; font-size: 14px; color: #c7bda2; min-height: 80px; background: rgba(0,0,0,0.2); padding: 12px; border-radius: 8px; border-top: 1px solid #4a3f35; }
.side { padding: 8px 12px; }
.status { padding: 10px; border-radius: 8px; background: rgba(0,0,0,0.2); min-height: 56px; display: flex; align-items: center; justify-content: center; font-weight: 600; color: #d4af37; margin-bottom: 1rem; }
.status.success { background: rgba(40, 167, 69, 0.2); color: #28a745; }
.status.failure { background: rgba(220, 53, 69, 0.2); color: #dc3545; }
.label-small { font-size: 13px; color: #c7bda2; margin-bottom: 6px; }
.mini-meter-container { display: flex; gap: 8px; align-items: center; }
.mini-meter { flex: 1; height: 10px; background: rgba(0,0,0,0.3); border-radius: 6px; overflow: hidden; }
.mini-meter-fill { height: 100%; width: 0%; background: linear-gradient(90deg, #ffd58b, #ff8a6b); }
.mini-meter-fill-good { height: 100%; width: 0%; background: linear-gradient(90deg, #b6f2c9, #5be06b); }
.mini-meter-value { width: 40px; text-align: right; font-weight: 700; color: #e0dacc; }
.controls { display: flex; gap: 8px; margin-top: 1rem; }
button.ghost { background: transparent; color: #d4af37; border: 1px solid #4a3f35; box-shadow: none; }
.hint { font-size: 13px; color: #c7bda2; margin-top: 1rem; }
.sky { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.1), transparent 40%), linear-gradient(180deg, rgba(180,210,240,0.1), transparent); mix-blend-mode: screen; opacity: 0; transition: opacity .6s ease; }
.sky.show { opacity: 1; }
.flying-machine.lift { transform: translateY(-220px) scale(1.05); transition: transform 1.2s cubic-bezier(.2,.9,.3,1); }
.flying-machine.crash { transform: translateY(0px) rotate(15deg) scale(.95); transition: transform 0.6s cubic-bezier(.4,.1,.6,1); }
@media (max-width: 960px) { .trial-2-content { grid-template-columns: 1fr; } .side { order: 2; } }

/* --- Épreuve 3 : Pont Rythmique --- */
#bridge-game-area { width: 600px; height: 400px; background-image: url('images/pont_pieces_fond.png'); background-size: cover; position: relative; margin: 1.5rem auto 1rem auto; border: 1px solid #4a3f35; overflow: hidden; cursor: pointer; transition: background-image 0.8s ease-in-out; }
.falling-beam { position: absolute; width: 30px; height: 150px; background-image: url('images/poutre.png'); background-size: contain; background-repeat: no-repeat; }
#timing-gate { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; height: 50px; background: rgba(212, 175, 55, 0.15); border-top: 2px dashed #d4af37; border-bottom: 2px dashed #d4af37; }
#bridge-ui { display: flex; justify-content: space-around; max-width: 600px; margin: 0 auto; }
.ui-box { background: rgba(0,0,0,0.3); padding: 0.5rem 1rem; border-radius: 5px; font-family: 'Cinzel', serif; }
#error-display { display: flex; gap: 5px; }
.life { width: 20px; height: 20px; background: #28a745; border-radius: 50%; transition: background-color 0.3s; }
.life.lost { background: #dc3545; }

/* --- É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; }