@import url('https://googleapis.com');

* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    font-family: 'Poppins', sans-serif;
    background: linear-gradient(135deg, #1e1e2f 0%, #2d2d44 100%);
    color: #ffffff;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.container { padding: 20px; max-width: 800px; text-align: center; }
h1 { font-size: 3.5rem; margin-bottom: 1rem; background: linear-gradient(to right, #00d2ff, #3a7bd5); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
p { color: #b0b0c0; margin-bottom: 2.5rem; }

/* Grille et Cartes */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 20px; }
.card-link { text-decoration: none; color: inherit; }
.card {
    background: rgba(255, 255, 255, 0.05);
    padding: 20px; border-radius: 15px; border: 1px solid rgba(255, 255, 255, 0.1);
    transition: 0.3s; cursor: pointer;
}
.card:hover { transform: translateY(-10px); background: rgba(255, 255, 255, 0.1); border-color: #00d2ff; }
.card span { font-size: 2rem; display: block; margin-bottom: 10px; }

/* Side Panel */
.side-panel {
    position: fixed; top: 0; right: -400px; width: 350px; height: 100%;
    background: #1e1e2f; box-shadow: -5px 0 15px rgba(0,0,0,0.5);
    transition: 0.4s ease; z-index: 1000; padding: 40px 20px;
}
.side-panel.active { right: 0; }
#overlay { position: fixed; display: none; width: 100%; height: 100%; top: 0; left: 0; background: rgba(0,0,0,0.7); z-index: 999; }

/* Formulaire */
.input-group { margin-bottom: 15px; text-align: left; }
.input-group input {
    width: 100%; padding: 12px; background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1); color: white; border-radius: 8px;
}
.btn-login { width: 100%; padding: 12px; background: #3a7bd5; border: none; color: white; border-radius: 8px; cursor: pointer; font-weight: 600; margin-top: 10px; }
.panel-footer { margin-top: 20px; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 20px; }
.panel-footer a { color: #00d2ff; text-decoration: none; font-size: 0.9rem; }
.panel-footer a:hover { color: white; }