/* Reset basique */
* { margin:0; padding:0; box-sizing:border-box; font-family: 'Segoe UI', sans-serif; }

/* Body */
body { background: linear-gradient(135deg,#f0f4ff,#fff); color:#333; }

/* Container */
.container { max-width:600px;margin:50px auto;padding:25px;background:#fff;border-radius:15px;box-shadow:0 10px 25px rgba(0,0,0,0.1); text-align:center; }

/* Buttons */
button { background:#4CAF50;color:white;font-weight:bold;padding:12px 20px;margin-top:10px;border:none;border-radius:8px;cursor:pointer;transition:0.3s; }
button:hover { background:#45a049; transform: scale(1.05); }

/* Inputs */
input,textarea,select { width:100%;margin:8px 0;padding:10px;border-radius:8px;border:1px solid #ccc; transition:0.3s; }
input:focus,textarea:focus,select:focus { border-color:#4CAF50; outline:none; transform: scale(1.02); }

/* Quête card */
.quete-card { background:#e0f7fa; padding:15px; margin:12px 0; border-radius:12px; box-shadow:0 4px 10px rgba(0,0,0,0.05); transition:0.3s; animation:fadeInUp 0.6s ease forwards; }
.quete-card:hover { transform: translateY(-5px); }

/* Projector */
.projector-container { padding:30px; background:#1e1e2f; color:#fff; min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; }
.participant-list { display:flex; flex-wrap:wrap; justify-content:center; margin-bottom:20px; }
.participant-list img { border-radius:50%; margin:5px; width:60px; height:60px; object-fit:cover; transition:0.3s; animation:bounceIn 0.7s ease; }
.participant-list img:hover { transform: scale(1.3); }

/* Timer & total */
.timer, .quete-total { font-size:2.2em; margin:15px 0; font-weight:bold; color:#ffcc00; animation:pulse 1.5s infinite; text-shadow: 0 0 8px #fff; }

/* Reveal final */
.reveal-card { background:#444; padding:15px; margin:8px; border-radius:12px; width:80%; animation:slideInRight 0.6s forwards; text-align:center; font-size:1.1em; font-weight:bold; color:#fff; }

/* Animations */
@keyframes fadeInUp { 0% {opacity:0; transform:translateY(20px);} 100% {opacity:1; transform:translateY(0);} }
@keyframes slideInRight { 0% {opacity:0; transform:translateX(50px);} 100% {opacity:1; transform:translateX(0);} }
@keyframes bounceIn { 0% {transform:scale(0.5);} 50% {transform:scale(1.2);} 100% {transform:scale(1);} }
@keyframes pulse { 0%,100% {transform: scale(1);} 50% {transform: scale(1.1);} }

/* Responsive */
@media(max-width:768px){ .container{margin:20px;padding:15px;} .participant-list img{width:50px;height:50px;} }