/* style.css */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap');

body {
    font-family: 'Poppins', sans-serif;
    background: linear-gradient(135deg, #667eea 100%, #764ba2 0%);
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;

   /* background: var(--bg-gradient);*/
    color: var(--text-color);
    transition: all 0.3s ease; /* Transition douce pour le changement de mode */
}

.container {
    background: rgba(255, 255, 255, 0.9);
    padding: 2rem 3rem;
    border-radius: 15px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    width: 350px;
    text-align: center;
}

h2 { color: #333; margin-bottom: 1.5rem; }

input {
    width: 100%;
    padding: 12px;
    margin: 10px 0;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-sizing: border-box; /* Important pour le padding */
}

button {
    width: 100%;
    padding: 12px;
    background: #667eea;
    border: none;
    color: white;
    font-size: 1rem;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s;
}

button:hover { background: #764ba2; }

a { text-decoration: none; color: #667eea; font-size: 0.9rem; }
.message { margin-bottom: 15px; padding: 10px; border-radius: 5px; font-size: 0.9rem; }
.error { background: #ffdddd; color: #a00; }
.success { background: #ddffdd; color: #0a0; }

/* Ajout pour le profil */
.avatar-container {
    margin: 0 auto 20px auto;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden; /* Coupe l'image en rond */
    border: 4px solid white;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* L'image remplit le cercle sans être écrasée */
}

input[type="file"] {
    background: #f9f9f9;
    border: none;
}

.pagination {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    gap: 5px;
}

.pagination a, .pagination span {
    padding: 8px 12px;
    border: 1px solid #667eea;
    border-radius: 4px;
    text-decoration: none;
    color: #667eea;
    font-size: 0.9rem;
}

.pagination .active {
    background: #667eea;
    color: white;
}

.pagination a:hover {
    background: #f0f2ff;
}

/* Container pour l'input et l'icône */
.input-group {
    position: relative;
    margin-bottom: 15px;
    text-align: left;
}

/* Style de l'icône */
.input-group i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #667eea;
    font-size: 1rem;
}

/* Ajustement de l'input pour laisser de la place à l'icône à gauche */
.input-group input {
    padding-left: 40px !important;
    margin: 0; /* On gère l'espacement via .input-group */
}

Les notifications "Toast" sont beaucoup plus élégantes que les blocs de texte fixes en haut de page. Elles apparaissent dans un coin de l'écran, attirent l'attention par une petite animation, puis s'effacent toutes seules.

Pour cela, nous allons combiner un peu de CSS pour l'animation et un tout petit peu de JavaScript pour la disparition automatique.
1. Le CSS des Notifications (style.css)

Ajoutez ceci pour créer les bulles flottantes.
CSS

/* Conteneur des toasts */
#toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
}

.toast {
    min-width: 250px;
    padding: 15px 20px;
    margin-bottom: 10px;
    border-radius: 8px;
    color: white;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    animation: slideIn 0.5s ease-out forwards;
    transition: opacity 0.5s ease-out;
}

.toast.success { background-color: #2ecc71; border-left: 6px solid #27ae60; }
.toast.error { background-color: #e74c3c; border-left: 6px solid #c0392b; }

@keyframes slideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

.toast.fade-out { opacity: 0; }

:root {
    /* Mode Clair (Par défaut) */
    --bg-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --container-bg: rgba(255, 255, 255, 0.9);
    --text-color: #333;
    --input-bg: #fff;
    --input-border: #ddd;
}

[data-theme="dark"] {
    /* Mode Sombre */
    --bg-gradient: linear-gradient(180deg, #936FFD 0%, #D3C5FE 45%, #936FFD 60%);
    --container-bg: rgba(30, 31, 34, 0.95);
    --text-color: #FF0CC0;
    --input-bg: #2b2d31;
    --input-border: #BFC910;
}

.container {
    background: var(--container-bg);
    color: var(--text-color);
}

input {
    background: var(--input-bg);
    color: var(--text-color);
    border: 1px solid var(--input-border);
}

h2 { color: var(--text-color); }

/* --- HEADER & NAVBAR --- */
header {
    background: var(--container-bg); /* S'adapte au mode sombre */
    backdrop-filter: blur(10px); /* Effet de flou derrière */
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
    padding: 0 20px;
}

.navbar {
   /* max-width: 1200px;*/
	width: 1200px;
    margin: 0 auto;
    height: 70px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo a {
    font-size: 1.5rem;
    font-weight: bold;
    color: #667eea;
    text-decoration: none;
}

.nav-links {
    list-style: none;
    display: flex;
    gap: 20px;
    align-items: center;
    margin: 0;
    padding: 0;
}

.nav-links a {
    text-decoration: none;
    color: var(--text-color);
    font-weight: 500;
    transition: color 0.3s;
}

.nav-links a:hover {
    color: #667eea;
}

/* Boutons spéciaux dans le menu */
.btn-register {
    background: #667eea;
    color: white !important;
    padding: 8px 15px;
    border-radius: 20px;
}

.btn-logout {
    color: #ff4b5c !important;
}

.admin-link {
    color: #2ecc71 !important;
}

/* Bouton Thème */
.theme-btn {
	width:50px;
    background:#CC99FF;
    border: none;
    color: var(--text-color);
    font-size: 1.2rem;
    cursor: pointer;
    margin-left: 15px;
}

/* --- MAIN & FOOTER --- */

html, body {
    height: 110%;
    margin: 0;
}

body {
    display: flex;
    flex-direction: column;
}
/* Le contenu principal prend tout l'espace restant */
main {
    flex: 1; 
    width: 100%;
    max-width: 1200px; /* On garde le contenu centré au milieu */
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
}

/* Le Footer sur toute la largeur */
footer {
    width: 100%;
    background: var(--container-bg);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--input-border);
    padding: 30px 0;
    margin-top: auto; /* Force le footer en bas */
}

.footer-content {
    max-width: 1200px; /* Le texte reste aligné avec le reste du site */
    margin: 0 auto;
    padding: 0 20px;
    text-align: center;
}

.socials { margin-top: 10px; }
.socials a { margin: 0 10px; color: var(--text-color); font-size: 1.2rem; }

/* --- SECTION JEUX --- */
.games-section {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
}

.section-title {
    text-align: center;
    margin-bottom: 40px;
}

/* Grille flexible (Responsive) */
.games-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    padding: 20px;
}

/* Style de la Carte de Jeu */
.game-card {
    background: var(--container-bg);
    border-radius: 15px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid var(--input-border);
}

.game-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(102, 126, 234, 0.3);
}

.game-card img {
    width: 100%;
    height: 180px;
    object-fit: cover;
}

.game-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #667eea;
    color: white;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: bold;
}

.game-info {
    padding: 20px;
    text-align: center;
}

.game-info h3 {
    margin: 0 0 10px 0;
    font-size: 1.3rem;
    color: var(--text-color);
}

.game-info p {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 20px;
}

/* Bouton spécifique pour jouer */
.btn-play {
    display: inline-block;
    padding: 10px 25px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    text-decoration: none;
    border-radius: 25px;
    font-weight: bold;
    transition: opacity 0.3s;
}

.btn-play:hover {
    opacity: 0.9;
    color: white;
}

.hall-of-fame {
    background: var(--container-bg);
    padding: 30px;
    border-radius: 20px;
    margin-bottom: 40px;
    width: 100%;
    max-width: 900px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.podium {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 20px;
    flex-wrap: wrap;
}

.podium-item {
    background: var(--input-bg);
    padding: 20px;
    border-radius: 15px;
    text-align: center;
    border: 2px solid var(--input-border);
    transition: transform 0.3s;
    min-width: 150px;
}

.podium-item.large { 
    border-color: #f1c40f; /* Or */
    transform: scale(1.1);
    order: 2; /* Le premier est au centre */
}

.podium-item:nth-child(2) { order: 1; } /* Le deuxième à gauche */
.podium-item:nth-child(3) { order: 3; } /* Le troisième à droite */

.avatar-hof {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 10px;
    border: 3px solid #667eea;
}

.hof-info strong { display: block; font-size: 1.1rem; }
.hof-info span { color: #667eea; font-weight: bold; }
.rank-badge { font-size: 2rem; margin-bottom: 5px; }

/* Responsive mobile */
@media (max-width: 600px) {
    .podium { flex-direction: column; align-items: center; }
    .podium-item.large { transform: none; order: 1; }
    .podium-item:nth-child(2) { order: 2; }
    .podium-item:nth-child(3) { order: 3; }
}

.stats-bar {
    display: flex;
    justify-content: center;
    gap: 40px;
    padding: 10px 20px;
    flex-wrap: wrap;
}

.stat-item {
    font-size: 0.95rem;
    color: var(--text-color);
    display: flex;
    align-items: center;
    gap: 8px;
}

.stat-item i {
    color: #667eea;
    font-size: 1.1rem;
}

.stat-item strong {
    font-size: 1.2rem;
    color: #667eea;
}

/* Sur mobile, on réduit l'écart */
@media (max-width: 600px) {
    .stats-bar { gap: 15px; }
    .stat-item { font-size: 0.8rem; }
}

.notification-badge {
    background-color: #ff4b5c;
    color: white;
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 50%;
    position: relative;
    top: -10px;
    left: -5px;
    font-weight: bold;
    box-shadow: 0 0 5px rgba(255, 75, 92, 0.5);
}

@keyframes confetti-fall {
    0% { transform: translateY(-50px) rotate(0deg); opacity: 1; }
    100% { transform: translateY(100px) rotate(360deg); opacity: 0; }
}

.confetti {
    position: absolute;
    width: 10px;
    height: 10px;
    background: gold;
    border-radius: 2px;
    animation: confetti-fall 1s ease-out forwards;
    pointer-events: none;
}