/* styles.css ou login-register.css */
/* Styles pour les pages de connexion et d'inscription */

/* Style général pour centrer le formulaire */
.login-register-page {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 150px); /* Ajuste selon header+footer */
    padding: 40px 15px;
    background-color: #f4f4f4;
    box-sizing: border-box;
}

/* Conteneur du formulaire */
.form-container {
    background-color: #000000;
    color: #ffffff;
    padding: 30px 35px;
    border-radius: 6px; /* Coins arrondis */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    width: 100%;
    max-width: 400px;
    box-sizing: border-box;
    text-align: left;
    position: relative; /* Pour positionner le message d'erreur */
}

/* Style pour le message d'erreur */
.error-message {
    background-color: #dc3545; /* Rouge */
    color: #ffffff;
    padding: 10px 15px;
    border-radius: 4px;
    margin-bottom: 20px;
    font-family: 'Inter', sans-serif;
    font-size: 0.9em;
    text-align: center;
}

/* Style pour le message de succès/attente (Register) */
.success-message {
    background-color: #198754; /* Vert */
    color: #ffffff;
    padding: 10px 15px;
    border-radius: 4px;
    margin-bottom: 20px;
    font-family: 'Inter', sans-serif;
    font-size: 0.9em;
    text-align: center;
}
/* Style pour cacher le formulaire si message affiché (Register - optionnel) */
.register-form-wrapper.hide-on-success > *:not(h1) {
    display: none;
}
.register-form-wrapper.hide-on-success > h1 {
     margin-bottom: 0;
}


.form-container h1 {
    margin-bottom: 25px;
    font-size: 2.5em;
    text-transform: uppercase;
    font-weight: normal;
    font-family: 'Bebas Neue', sans-serif;
    letter-spacing: 1px;
    text-align: left; /* Titre aligné à gauche */
}

/* Style pour les lignes de formulaire (Register) */
.form-row {
    display: flex;
    align-items: flex-end; /* Aligne par le bas */
    gap: 20px;
    margin-bottom: 20px;
}
.form-row .input-group {
    flex: 1;
    margin-bottom: 0;
}


/* Groupe d'input (label + input) */
.input-group {
    margin-bottom: 20px;
    text-align: left;
    position: relative; /* Important pour l'icône et le label flottant */
}

.tfa-instructions {
    color: #a0a0a0;
    font-family: 'Inter', sans-serif;
    font-size: 1em;
    line-height: 1.5;
    margin-bottom: 25px;
    text-align: left;
}

.tfa-options {
    margin-top: 25px;
    text-align: center;
}

.tfa-logout-link {
    color: #cccccc;
    font-family: 'Inter', sans-serif;
    font-size: 0.9em;
    text-decoration: underline;
}

.tfa-logout-link:hover {
    color: #ffffff;
    text-decoration: none;
}

/* Style des inputs */
.input-group input[type="email"],
.input-group input[type="password"],
.input-group input[type="text"],
.input-group input[type="date"],
.input-group select.country-select { /* Inclure le select */
    width: 100%;
    padding: 10px 30px 8px 0; /* Espace droite pour icône */
    border: none;
    border-bottom: 1px solid #ffffff; /* Bordure par défaut */
    background-color: transparent;
    color: #ffffff;
    border-radius: 0; /* Pas d'arrondi sur l'input */
    box-sizing: border-box;
    font-size: 1.1em;
    font-family: 'Inter', sans-serif;
    outline: none;
    box-shadow: none;
    position: relative;
    z-index: 1;
    transition: border-color 0.2s ease-in-out; /* Transition pour couleur bordure */
}
/* Ajustements spécifiques */
.input-group input[type="date"] { color-scheme: dark; }
.input-group select.country-select { padding: 8px 30px 8px 0; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.5rem center; background-size: 1em; padding-right: 2.5em; cursor: pointer; }
.input-group select.country-select:invalid { color: #a0a0a0; }
.input-group select.country-select option { background-color: #1a1a1a; color: #ffffff; }
.input-group input[type="text"][onfocus*="date"]::-webkit-input-placeholder{ color:transparent; }
.input-group input[type="text"][onfocus*="date"]::-moz-placeholder { color:transparent; }
.input-group input[type="text"][onfocus*="date"]:-ms-input-placeholder { color:transparent; }
.input-group input[type="text"][onfocus*="date"]:-moz-placeholder { color:transparent; }


/* Style et animation pour Floating Label */
.input-group.floating-label label { position: absolute; top: 10px; left: 0; font-size: 1.1em; color: #a0a0a0; font-family: 'Inter', sans-serif; pointer-events: none; transition: all 0.2s ease-out; z-index: 0; }
.input-group.floating-label input:not([type="date"]):focus + label,
.input-group.floating-label input:not([type="date"]):not(:placeholder-shown) + label,
.input-group.floating-label input[type="date"]:focus + label,
.input-group.floating-label input[type="date"]:valid + label { transform: translateY(-18px); font-size: 0.8em; color: #ffffff; z-index: 2; }
/* Label classique pour Select (non flottant) */
.input-group label.select-label { display: block; margin-bottom: 2px; font-size: 0.8em; color: #ffffff; font-family: 'Inter', sans-serif; transition: color 0.2s ease-in-out; /* Transition couleur label */ }

/* Focus sur l'input */
.input-group input:focus { border-bottom-color: #a0a0a0; box-shadow: none; }
.input-group select.country-select:focus { border-bottom-color: #a0a0a0; }


/* Style pour l'icône de validation */
.validation-icon {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1em;
    z-index: 2;
    line-height: 1;
    opacity: 0; /* Caché par défaut */
    transition: opacity 0.2s ease-in-out, color 0.2s ease-in-out;
}
/* Afficher l'icône quand le groupe a une classe success, error ou loading */
.input-group.success .validation-icon,
.input-group.error .validation-icon,
.input-group.loading .validation-icon {
    opacity: 1;
}
/* Ajustement position icône pour select */
.input-group select.country-select + .validation-icon { right: 2.2em; }

/* Couleurs des icônes */
.input-group.success .validation-icon { color: #198754; } /* Vert */
.input-group.error .validation-icon { color: #dc3545; } /* Rouge */
.input-group.loading .validation-icon { color: #ffffff; } /* Blanc pour spinner */


/* Style pour les champs en erreur */
.input-group.error input[type="email"],
.input-group.error input[type="password"],
.input-group.error input[type="text"],
.input-group.error input[type="date"],
.input-group.error select.country-select {
    border-bottom-color: #dc3545; /* Ligne rouge */
}
/* Style pour les champs valides */
.input-group.success input[type="email"],
.input-group.success input[type="password"],
.input-group.success input[type="text"],
.input-group.success input[type="date"],
.input-group.success select.country-select {
    border-bottom-color: #198754; /* Ligne verte */
}

/* Couleur label flottant en erreur/succès */
.input-group.floating-label.error input:focus + label,
.input-group.floating-label.error input:not(:placeholder-shown) + label,
.input-group.floating-label.error input[type="date"]:focus + label,
.input-group.floating-label.error input[type="date"]:valid + label { color: #dc3545; }
.input-group.floating-label.success input:focus + label,
.input-group.floating-label.success input:not(:placeholder-shown) + label,
.input-group.floating-label.success input[type="date"]:focus + label,
.input-group.floating-label.success input[type="date"]:valid + label { color: #198754; }
/* Couleur label select en erreur/succès */
.input-group.error label.select-label { color: #dc3545; }
.input-group.success label.select-label { color: #198754; }

/* Critères mot de passe */
.password-criteria {
    font-size: 0.75em;
    color: #a0a0a0;
    margin-top: 5px;
    font-family: 'Inter', sans-serif;
    line-height: 1.3;
}


/* Groupe pour "Rester connecté" et "Mot de passe oublié" (Login) */
.options-group { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; font-size: 0.9em; font-family: 'Inter', sans-serif; }
.remember-me { display: flex; align-items: center; }
.remember-me input[type="checkbox"] { margin-right: 8px; accent-color: #ffffff; width: 15px; height: 15px; cursor: pointer; border-radius: 3px; }
.remember-me label { margin-bottom: 0; color: #cccccc; cursor: pointer; font-size: 1em; }
.forgot-password { color: #cccccc; text-decoration: none; font-size: 1em; }
.forgot-password:hover { color: #ffffff; text-decoration: underline; }

/* Style pour les groupes de checkboxes (Register) */
.checkbox-group { margin-bottom: 15px; text-align: left; display: flex; align-items: flex-start; }
.checkbox-group input[type="checkbox"] { margin-right: 10px; margin-top: 0.2em; flex-shrink: 0; accent-color: #ffffff; width: 15px; height: 15px; cursor: pointer; border-radius: 3px; }
.checkbox-group label { font-size: 0.85em; color: #cccccc; line-height: 1.4; font-family: 'Inter', sans-serif; cursor: pointer; }
.checkbox-group label a { color: #ffffff; text-decoration: underline; }
.checkbox-group label a:hover { text-decoration: none; }
.checkbox-group label .required-star { color: #ff6666; font-weight: bold; margin-left: 2px; }
/* Style pour checkbox en erreur */
.checkbox-group.error label { color: #dc3545; }
.checkbox-group.error label a { color: #ff8a96; }


/* Style des boutons */
.form-container .btn { display: block; width: 100%; padding: 10px 20px; border: 1px solid #ffffff; border-radius: 4px; font-size: 1.2em; font-weight: normal; text-align: center; text-decoration: none; cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; box-sizing: border-box; font-family: 'Bebas Neue', sans-serif; letter-spacing: 0.5px; }
/* Espace entre les boutons du formulaire */
.form-container form .btn + .btn {
    margin-top: 15px; /* Espace entre les boutons */
}
/* Espace après le formulaire (avant section sociale si présente) */
.form-container form + .social-login {
    margin-top: 30px;
}
.form-container form .btn:last-of-type {
    margin-bottom: 0; /* Annule marge du dernier bouton */
}

/* Style spécifique pour le bouton Register */
.form-container .btn-register { margin-top: 15px; }

.form-container .btn-primary { background-color: #ffffff; color: #000000; }
.form-container .btn-primary:hover { background-color: #e0e0e0; border-color: #e0e0e0; }
.form-container .btn-secondary { background-color: transparent; color: #ffffff; }
.form-container .btn-secondary:hover { background-color: rgba(255, 255, 255, 0.1); }

/* Section Connexion Sociale */
.social-login { margin-top: 0; padding-top: 0; border-top: none; }
.social-login .divider { margin-top: 30px; }

.divider { display: flex; align-items: center; text-align: center; color: #ccc; font-size: 0.9em; margin-bottom: 20px; font-family: 'Inter', sans-serif; }
.divider::before, .divider::after { content: ''; flex: 1; border-bottom: 1px solid #444; }
.divider::before { margin-right: .7em; }
.divider::after { margin-left: .7em; }

.social-buttons { display: flex; justify-content: center; gap: 15px; }

/* Style boutons sociaux */
.social-btn { display: inline-flex; justify-content: center; align-items: center; width: 45px; height: 45px; background-color: #ffffff; color: #000000; border-radius: 6px; text-decoration: none; font-size: 1.4em; transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; border: none; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.social-btn:hover { transform: translateY(-2px); box-shadow: 0 3px 6px rgba(0,0,0,0.15); }


/* Responsivité simple */
@media (max-width: 480px) {
    .form-container { padding: 25px 20px; }
    .form-container h1 { font-size: 2em; }
    /* Empiler les champs sur la même ligne */
    .form-row { flex-direction: column; gap: 0; margin-bottom: 0; align-items: stretch; }
    .form-row .input-group { margin-bottom: 20px; }
    .input-group label.select-label { margin-bottom: 8px; font-size: 0.8em; }
    .options-group { flex-direction: column; align-items: flex-start; gap: 10px; }
    .forgot-password { align-self: flex-end; }
    .checkbox-group label { font-size: 0.8em; }
    .social-btn { width: 40px; height: 40px; font-size: 1.3em; }
    /* Ajuster position icône sur mobile */
    .validation-icon { right: 2px; }
    .input-group select.country-select + .validation-icon { right: 1.8em; }
}