/* Variables de couleur pour les thèmes */
:root {
    --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

    /* Couleurs de base (utilisées par les deux thèmes ou comme fallback) */
    --primary-accent-color: #007bff; /* Bleu pour les accents primaires */
    --primary-accent-hover: #0056b3;
    --secondary-accent-color: #6c757d; /* Gris pour les accents secondaires */
    --secondary-accent-hover: #545b62;
    --text-on-primary: #ffffff;
    --text-on-secondary: #ffffff;

    /* Thème Clair */
    --bg-color-light: #f4f7fc;
    --text-color-light: #212529;
    --card-bg-light: #ffffff;
    --input-bg-light: #ffffff;
    --input-border-light: #ced4da;
    --input-text-light: #495057;
    --shadow-light: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    --logo-filter-light: none; /* Aucune inversion pour le logo en mode clair */

    /* Thème Sombre (utilisé par défaut via la classe sur body) */
    --bg-color-dark: #161b22; /* Fond GitHub sombre */
    --text-color-dark: #c9d1d9; /* Texte GitHub clair */
    --card-bg-dark: #0d1117;   /* Carte/Boîte GitHub sombre */
    --input-bg-dark: #010409;    /* Input GitHub très sombre */
    --input-border-dark: #30363d; /* Bordure input GitHub */
    --input-text-dark: #c9d1d9;
    --shadow-dark: 0 0.5rem 1rem rgba(0, 0, 0, 0.3);
    --logo-filter-dark: invert(95%) sepia(10%) saturate(150%) hue-rotate(180deg) brightness(100%) contrast(90%); /* Pour rendre un logo sombre visible sur fond sombre */
}

body {
    font-family: var(--font-family);
    margin: 0;
    transition: background-color 0.3s, color 0.3s;
    display: flex; /* Utilisé pour centrer .login-page-container si besoin */
    min-height: 100vh; /* Assure que le body prend toute la hauteur */
    align-items: center; /* Centre verticalement le contenu direct du body */
    justify-content: center; /* Centre horizontalement le contenu direct du body */
}

/* Application des thèmes */
body.light-mode {
    background-color: var(--bg-color-light);
    color: var(--text-color-light);
}
body.dark-mode {
    background-color: var(--bg-color-dark);
    color: var(--text-color-dark);
}

.login-page-container {
    width: 100%;
    display: flex;
    flex-direction: column; /* Pour placer le theme-switcher au-dessus du login-box */
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}

.theme-switcher-container {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 1001;
}
#theme-switcher {
    padding: 8px 15px;
    border-radius: 5px;
    border: 1px solid;
    cursor: pointer;
    font-weight: 500;
}
body.light-mode #theme-switcher {
    background-color: var(--card-bg-light);
    color: var(--text-color-light);
    border-color: var(--input-border-light);
}
body.dark-mode #theme-switcher {
    background-color: var(--card-bg-dark);
    color: var(--text-color-dark);
    border-color: var(--input-border-dark);
}


.login-box {
    width: 100%;
    max-width: 400px;
    padding: 30px;
    border-radius: 8px;
    text-align: center;
}
body.light-mode .login-box {
    background-color: var(--card-bg-light);
    box-shadow: var(--shadow-light);
}
body.dark-mode .login-box {
    background-color: var(--card-bg-dark);
    box-shadow: var(--shadow-dark);
}

.logo-container {
    margin-bottom: 30px;
}
.logo-container img {
    max-width: 150px;
    height: auto;
}
body.light-mode .logo-container img {
    filter: var(--logo-filter-light);
}
body.dark-mode .logo-container img {
    /* Si votre logo est sombre, cette règle peut aider à le rendre visible
       sur un fond sombre. Ajustez ou supprimez si votre logo est déjà clair. */
    /*filter: var(--logo-filter-dark);*/
}


.login-form h2 {
    margin-top: 0;
    margin-bottom: 25px;
    font-size: 1.8em;
    font-weight: 600;
}
body.light-mode .login-form h2 {color: var(--text-color-light);}
body.dark-mode .login-form h2 {color: var(--text-color-dark);}


.form-group {
    margin-bottom: 20px;
    text-align: left;
}
.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    font-size: 0.9em;
}
body.light-mode .form-group label {color: var(--label-color-light, var(--text-color-light));}
body.dark-mode .form-group label {color: var(--label-color-dark, var(--text-color-dark));}

.form-group input[type="email"],
.form-group input[type="password"] {
    width: 100%;
    padding: 12px;
    border-radius: 6px;
    border: 1px solid;
    box-sizing: border-box;
    font-size: 1em;
}
body.light-mode .form-group input {
    background-color: var(--input-bg-light);
    border-color: var(--input-border-light);
    color: var(--input-text-light);
}
body.dark-mode .form-group input {
    background-color: var(--input-bg-dark);
    border-color: var(--input-border-dark);
    color: var(--input-text-dark);
}
body.light-mode .form-group input:focus {
    border-color: var(--primary-accent-color);
    box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
}
body.dark-mode .form-group input:focus {
    border-color: var(--primary-accent-color);
    box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25); /* Peut nécessiter une couleur d'ombre différente pour le mode sombre */
}

.btn {
    width: 100%;
    padding: 12px;
    border-radius: 6px;
    border: none;
    font-size: 1.05em;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
    margin-bottom: 15px;
    text-decoration: none;
    
}
.btn:last-child {
    margin-bottom: 0;
}

.btn-login {
    background-color: var(--primary-accent-color);
    color: var(--text-on-primary);
    
}

.btn-login:hover {
    background-color: var(--primary-accent-hover);
}

.btn-signup {
    background-color: transparent;
    border: 2px solid;
}
.btn-signup-v{
    background-color: transparent;
    color: var(--primary-accent-color);
}
body.light-mode .btn-signup {
    color: var(--secondary-accent-color);
    border-color: var(--secondary-accent-color);
}
body.dark-mode .btn-signup {
    color: var(--secondary-accent-color); /* Peut être var(--text-color-dark) pour plus de contraste */
    border-color: var(--secondary-accent-color);
}

body.light-mode .btn-signup:hover {
    background-color: var(--secondary-accent-color);
    color: var(--text-on-secondary);
}
body.dark-mode .btn-signup:hover {
    background-color: var(--secondary-accent-color);
    color: var(--text-on-secondary); /* Ou var(--card-bg-dark) pour contraste */
}


/* --- Responsive Design --- */
@media (max-width: 480px) {
    .login-box {
        padding: 20px;
        margin: 15px; /* Pour éviter que ça colle aux bords */
    }
    .login-form h2 {
        font-size: 1.6em;
    }
    .btn {
        padding: 10px;
        font-size: 1em;
    }
    .theme-switcher-container {
        position: static; /* Remettre en flux normal */
        margin-bottom: 20px;
        width: 100%;
        text-align: center;
    }
}