/* STREAMING_CHUNK: Configuration des Polices Locales */
@font-face {
font-family: 'Elms Sans';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../fonts/elms-sans-v7-latin-regular.woff2') format('woff2');
}

@font-face {
font-family: 'Source Code Pro';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../fonts/source-code-pro-v31-latin-regular.woff2') format('woff2');
}

/* STREAMING_CHUNK: Reset CSS et Variables de Couleurs (Thème Elyvate) */
:root {
--brand-500: #22c55e;
--brand-600: #16a34a;
--brand-dark: #0f172a;
--slate-50: #f8fafc;
--slate-100: #f1f5f9;
--slate-200: #e2e8f0;
--slate-300: #cbd5e1;
--slate-400: #94a3b8;
--slate-500: #64748b;
--slate-600: #475569;
--slate-700: #334155;
--slate-800: #1e293b;
--slate-900: #0f172a;
--red-50: #fef2f2;
--red-200: #fecaca;
--red-600: #dc2626;
--bg-color: #F5F5F5;
}

*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}

/* STREAMING_CHUNK: Style Global de la Page (Body) */
body {
font-family: 'Elms Sans', system-ui, -apple-system, sans-serif;
background-color: var(--bg-color);
color: var(--slate-800);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
height: 100vh;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
}

/* STREAMING_CHUNK: Personnalisation de la Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--slate-300); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--slate-400); }

/* STREAMING_CHUNK: Carte Principale */
.login-card {
width: 100%;
max-width: 28rem;
background-color: #ffffff;
border-radius: 1.5rem;
overflow: hidden;
border: 1px solid var(--slate-100);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.02);
transition: box-shadow 0.3s ease;
display: flex;
flex-direction: column;
}

.login-card:hover {
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04);
}

.login-card-inner {
padding: 2.5rem;
}

@media (max-width: 640px) {
.login-card-inner { padding: 1.25rem; }
}

/* STREAMING_CHUNK: En-tête et Logo */
.header-section {
text-align: center;
margin-bottom: 2.5rem;
}

@media (max-width: 640px) {
.header-section { margin-bottom: 1.5rem; }
}

.logo-wrapper {
display: inline-flex;
align-items: center;
justify-content: center;
width: 4rem;
height: 4rem;
border-radius: 1rem;
background-color: #ffffff;
margin-bottom: 1.5rem;
border: 1px solid var(--slate-100);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
}

@media (max-width: 640px) {
.logo-wrapper { width: 3rem; height: 3rem; margin-bottom: 0.75rem; }
}

.logo-wrapper img {
width: 2.5rem;
height: 2.5rem;
object-fit: contain;
}

@media (max-width: 640px) {
.logo-wrapper img { width: 1.75rem; height: 1.75rem; }
}

.title {
font-size: 1.5rem;
font-weight: 700;
letter-spacing: -0.025em;
color: var(--slate-900);
margin-bottom: 0.5rem;
}

@media (max-width: 640px) {
.title { font-size: 1.125rem; margin-bottom: 0.25rem; }
}

.subtitle {
font-size: 0.875rem;
color: var(--slate-500);
font-weight: 500;
}

@media (max-width: 640px) {
.subtitle { font-size: 0.75rem; }
}

/* STREAMING_CHUNK: Formulaire et Champs */
.login-form {
display: flex;
flex-direction: column;
gap: 1.5rem;
}

@media (max-width: 640px) {
.login-form { gap: 1rem; }
}

.form-group {
display: flex;
flex-direction: column;
}

.form-label {
font-size: 0.875rem;
font-weight: 600;
color: var(--slate-700);
margin-bottom: 0.5rem;
}

@media (max-width: 640px) {
.form-label { font-size: 0.75rem; margin-bottom: 0.375rem; }
}

.form-input-container {
position: relative;
}

.form-input-icon {
position: absolute;
top: 0;
bottom: 0;
left: 0;
padding-left: 1rem;
display: flex;
align-items: center;
pointer-events: none;
color: var(--slate-400);
}

@media (max-width: 640px) {
.form-input-icon { padding-left: 0.75rem; }
}

.form-input-icon svg {
width: 1.25rem;
height: 1.25rem;
}

@media (max-width: 640px) {
.form-input-icon svg { width: 1rem; height: 1rem; }
}

.form-input {
width: 100%;
background-color: rgba(248, 250, 252, 0.5); /* Equivalent de slate-50/50 */
border: 1px solid var(--slate-200);
border-radius: 0.75rem;
font-size: 0.875rem;
color: var(--slate-800);
transition: all 0.2s;
outline: none;
font-family: inherit;
}

@media (max-width: 640px) {
.form-input { font-size: 0.75rem; }
}

.form-input:focus {
background-color: #ffffff;
border-color: var(--brand-500);
box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2);
}

.form-input-text {
padding: 0.75rem 1rem 0.75rem 2.75rem;
}

@media (max-width: 640px) {
.form-input-text { padding: 0.625rem 1rem 0.625rem 2.25rem; }
}

.form-input-password {
padding: 0.75rem 3rem 0.75rem 2.75rem;
}

@media (max-width: 640px) {
.form-input-password { padding: 0.625rem 2.5rem 0.625rem 2.25rem; }
}

/* STREAMING_CHUNK: Bouton Voir Mot de passe */
.btn-toggle-password {
position: absolute;
top: 0;
bottom: 0;
right: 0;
padding-right: 1rem;
display: flex;
align-items: center;
background: none;
border: none;
color: var(--slate-400);
cursor: pointer;
transition: color 0.2s;
}

@media (max-width: 640px) {
.btn-toggle-password { padding-right: 0.75rem; }
}

.btn-toggle-password:hover {
color: var(--brand-500);
}

.btn-toggle-password svg {
width: 1.25rem;
height: 1.25rem;
}

@media (max-width: 640px) {
.btn-toggle-password svg { width: 1rem; height: 1rem; }
}

/* STREAMING_CHUNK: Case à cocher (Se souvenir de moi) */
.remember-container {
display: flex;
align-items: center;
margin-top: 0.25rem;
}

.remember-checkbox {
width: 1rem;
height: 1rem;
border: 1px solid var(--slate-300);
border-radius: 0.25rem;
cursor: pointer;
accent-color: var(--brand-600);
}

@media (max-width: 640px) {
.remember-checkbox { width: 0.875rem; height: 0.875rem; }
}

.remember-label {
margin-left: 0.5rem;
font-size: 0.875rem;
color: var(--slate-600);
cursor: pointer;
user-select: none;
}

@media (max-width: 640px) {
.remember-label { font-size: 0.75rem; }
}

/* STREAMING_CHUNK: Bouton de Soumission Principal */
.submit-container {
padding-top: 0.5rem;
}

.btn-primary {
position: relative;
display: flex;
width: 100%;
justify-content: center;
align-items: center;
border-radius: 0.75rem;
background-color: var(--brand-dark);
padding: 0.875rem 1rem;
font-size: 0.875rem;
font-weight: 600;
color: #ffffff;
border: none;
cursor: pointer;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
transition: all 0.2s;
font-family: inherit;
}

@media (max-width: 640px) {
.btn-primary { padding: 0.625rem 1rem; font-size: 0.75rem; }
}

.btn-primary:hover {
background-color: var(--slate-800);
}

.btn-primary:active {
transform: scale(0.98);
}

.btn-primary:disabled {
opacity: 0.9;
cursor: not-allowed;
}

.spinner {
position: absolute;
right: 1rem;
width: 1.25rem;
height: 1.25rem;
color: #ffffff;
animation: spin 1s linear infinite;
}

@media (max-width: 640px) {
.spinner { right: 0.75rem; width: 1rem; height: 1rem; }
}

@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}

.opacity-25 { opacity: 0.25; }
.opacity-75 { opacity: 0.75; }

/* STREAMING_CHUNK: Alertes et Erreurs */
.alert-error {
background-color: var(--red-50);
border: 1px solid var(--red-200);
color: var(--red-600);
font-size: 0.875rem;
border-radius: 0.75rem;
padding: 1rem;
display: flex;
align-items: flex-start;
gap: 0.75rem;
}

@media (max-width: 640px) {
.alert-error { font-size: 0.75rem; padding: 0.75rem; gap: 0.5rem; }
}

.alert-error svg {
width: 1.25rem;
height: 1.25rem;
flex-shrink: 0;
margin-top: 0.125rem;
}

@media (max-width: 640px) {
.alert-error svg { width: 1rem; height: 1rem; margin-top: 0; }
}

.login-card .hidden {
display: none !important;
}

/* STREAMING_CHUNK: Footer de la Carte */
.card-footer {
background-color: rgba(248, 250, 252, 0.5);
padding: 1.25rem 2rem;
border-top: 1px solid var(--slate-100);
text-align: center;
}

@media (max-width: 640px) {
.card-footer { padding: 0.875rem 1.25rem; }
}

.footer-text {
font-size: 0.75rem;
color: var(--slate-500);
font-family: 'Source Code Pro', monospace;
}

@media (max-width: 640px) {
.footer-text { font-size: 0.625rem; }
}
/* Disposition commune aux tableaux de bord, indépendante du formulaire de connexion. */
body.dashboard-body {
  height: auto;
  min-height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  padding: 0;
}
.forgot-password-container { margin: 15px 0 5px; padding: 0; text-align: center; }
.forgot-password { font-size: 0.875rem; text-decoration: underline; color: inherit; }