body { margin: 0; font-family: Arial, sans-serif; text-align: center; }

#regle { background: #222; color: white; padding: 10px; font-size: 14px; }
#regle a { color: #7fd; display: block; margin-bottom: 4px; }

#message { display: none; color: #c0392b; font-weight: bold; }
progress { width: 300px; }

#jeu { display: flex; gap: 15px; padding: 15px; }
aside { width: 20%; font-size: 14px; text-align: left; }
aside p { background: #fff3cd; padding: 10px; border-radius: 8px; }

#ocean { flex: 1; height: 450px; position: relative; overflow: hidden; background: linear-gradient(#4fc3f7, #01579b); border-radius: 10px; }

.dechet { position: absolute; font-size: 32px; cursor: pointer; transition: top 2s linear; }
.pose { pointer-events: none; }

.popup { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); justify-content: center; align-items: center; }
.popup div { background: white; padding: 30px; border-radius: 10px; max-width: 400px; }
button { padding: 10px 25px; font-size: 16px; cursor: pointer; }

@media (max-width: 700px) {
    #jeu { flex-direction: column; }
    aside { width: auto; }
    #ocean { order: -1; }
}