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

body, html {
    width: 100%; height: 100%;
    background: linear-gradient(135deg, #0d0d1a, #2c2c3d);
    color: #fff; overflow-x: hidden;
}

.app { display: flex; flex-direction: column; height: 100vh; }

/* Navigation */
.nav-bar { display: flex; justify-content: center; background: rgba(0,0,0,0.3); padding: 10px 0; }
.nav-btn {
    background: transparent; border: none; color: #fff;
    margin: 0 15px; font-size: 18px; cursor: pointer; transition: all 0.4s ease;
}
.nav-btn:hover { color: #00ffff; transform: scale(1.3) rotate(10deg); }

/* Pages */
.page { display: none; flex: 1; padding: 20px; position: relative; }
.page.active { display: flex; flex-direction: column; align-items: center; justify-content: center; animation: fadeIn 1s ease; }

/* Clock */
.clock-container { margin-bottom: 20px; text-align: center; }
#clock { font-size: 3rem; font-weight: bold; text-shadow: 0 0 15px #ff00ff, 0 0 30px #00ffff; }

/* Canvas */
#canvas { width: 100%; height: 300px; border-radius: 15px; box-shadow: 0 0 40px rgba(0,255,255,0.5); animation: float 4s infinite ease-in-out; }

/* Projets */
.project-list { list-style: none; font-size: 1.2rem; width: 100%; margin-top: 20px; }
.project-list li {
    margin-bottom: 10px; padding: 15px;
    background: rgba(0,255,255,0.1); border-radius: 10px;
    transition: all 0.5s ease;
}
.project-list li:hover { transform: scale(1.1) rotate(-2deg); box-shadow: 0 0 20px rgba(0,255,255,0.7); }

/* Animations CSS réutilisables */
.animated { animation-duration: 2s; animation-iteration-count: infinite; }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.fadeIn { animation-name: fadeIn; }

@keyframes bounce { 0%,20%,50%,80%,100% { transform: translateY(0); } 40% { transform: translateY(-20px); } 60% { transform: translateY(-10px); } }
.bounce { animation-name: bounce; }

@keyframes rotate { 0% { transform: rotate(0deg); } 50% { transform: rotate(15deg); } 100% { transform: rotate(0deg); } }
.rotate { animation-name: rotate; }

@keyframes slide { 0% { transform: translateX(-50px); opacity:0; } 100% { transform: translateX(0); opacity:1; } }
.slide { animation-name: slide; }

@keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } }
.pulse { animation-name: pulse; }

@keyframes glow { 0% { text-shadow: 0 0 10px #ff00ff; } 50% { text-shadow: 0 0 20px #00ffff; } 100% { text-shadow: 0 0 10px #ff00ff; } }
.glow { animation-name: glow; }

/* Page float */
@keyframes float { 0% { transform: translateY(0); } 50% { transform: translateY(-15px); } 100% { transform: translateY(0); } }

/* Responsive */
@media (max-width: 768px) {
    #clock { font-size: 2rem; }
    #canvas { height: 200px; }
    .project-list li { font-size: 1rem; padding: 10px; }
}