/* =============================================
   LOGIN.CSS — Mobile First
   Page de connexion uniquement (login.php)
   =============================================

   TABLE DES MATIÈRES
   ------------------
    1.  Reset
    2.  Body (centrage de la carte)
    3.  Carte de connexion (.login-container)
    4.  Titre
    5.  Champs email et mot de passe
    6.  Wrapper mot de passe + bouton afficher/masquer
    7.  Case "Se souvenir de mon email"
    8.  Bouton de connexion
    9.  Transition de page (overlay + spinner)
   10.  Messages (erreur, info, warning)
   11.  Media query tablette (≥ 480px)

   ============================================= */


/* =============================================
   1. RESET
   — Normalise box-sizing et supprime marges/paddings
     natifs sur tous les éléments
   ============================================= */

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


/* =============================================
   2. BODY
   — Fond gris clair, centrage vertical + horizontal
     de la carte via flexbox
   — padding: 16px évite que la carte touche les bords
     sur très petits écrans
   ============================================= */

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: #f2f2f2;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px;
}


/* =============================================
   3. CARTE DE CONNEXION
   — Fond blanc, ombre légère, coins arrondis
   — max-width: 380px pour rester compact sur desktop
   — width: 100% pour s'adapter aux petits écrans
   ============================================= */

.login-container {
    background: #fff;
    padding: 24px 20px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    width: 100%;
    max-width: 380px;
}


/* =============================================
   4. TITRE
   ============================================= */

h2 {
    text-align: center;
    margin-bottom: 20px;
    font-size: 20px;
}


/* =============================================
   5. CHAMPS EMAIL ET MOT DE PASSE
   — font-size: 16px obligatoire pour éviter
     le zoom automatique sur iOS (< 16px = zoom)
   — Le champ mot de passe dans .password-wrapper
     a ses propres règles (section 6)
   ============================================= */

input[type="email"],
input[type="password"] {
    width: 100%;
    padding: 12px;
    margin: 8px 0 16px 0;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
    box-sizing: border-box;
}


/* =============================================
   6. WRAPPER MOT DE PASSE + BOUTON ŒIL
   — .password-wrapper : position relative pour
     ancrer le bouton ŒIL en absolu à l'intérieur
   — padding-right: 44px sur l'input évite que le
     texte saisi passe sous le bouton ŒIL
   — .toggle-password : centré verticalement via
     top: calc(50% + 4px) + translateY(-50%)
     Le +4px compense le margin-top: 8px de l'input
   ============================================= */

.password-wrapper {
    position: relative;
    width: 100%;
}

.password-wrapper input {
    width: 100% !important;
    padding: 12px;
    padding-right: 44px;  /* réserve la place pour le bouton ŒIL */
    margin: 8px 0 16px 0;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
    box-sizing: border-box;
    display: block;
}

.toggle-password {
    position: absolute;
    right: 14px;
    /* +4px compense le margin-top: 8px de l'input divisé par 2 */
    top: calc(40% + 4px);
    transform: translateY(-50%);
    cursor: pointer;
    user-select: none;
    font-size: 1.1em;
    z-index: 2;
    color: #666;
    padding: 4px; /* zone de touch plus large sur mobile */
}

.toggle-password:hover {
    color: #333;
}


/* =============================================
   7. CASE "SE SOUVENIR DE MON EMAIL"
   — Affichée entre le champ mot de passe et le bouton
   — La case est cochée automatiquement si un cookie
     d'email existe (géré par JS dans login.php)
   — On ne sauvegarde jamais le mot de passe, uniquement
     l'email (cookie 30 jours, SameSite=Lax)
   ============================================= */

.remember-me {
    margin: -4px 0 16px 0; /* réduit l'espace avec l'input au-dessus */
}

.remember-me label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #555;
    cursor: pointer;
    user-select: none;
}

.remember-me input[type="checkbox"] {
    width: 16px;
    height: 16px;
    min-width: 16px; /* évite que la case soit écrasée */
    margin: 0;
    cursor: pointer;
    accent-color: #689094; /* colorie la coche avec la couleur principale */
}

.remember-me label:hover {
    color: #333;
}


/* =============================================
   7. BOUTON DE CONNEXION
   — Pleine largeur, couleur principale de l'intranet
   — touch-action: manipulation supprime le délai
     de 300ms sur mobile (double-tap zoom)
   ============================================= */

button {
    width: 100%;
    padding: 14px;
    background-color: #689094;
    border: none;
    color: white;
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer;
    touch-action: manipulation;
}

button:hover  { background-color: #45a049; }
button:active { opacity: 0.85; }


/* =============================================
   9. TRANSITION DE PAGE
   — Overlay plein écran qui s'opacifie lors du submit
   — Donne un effet de transition fluide vers dashboard.php
   — Activé par JS dans login.php (classe .active)
   ============================================= */

#page-transition {
    position: fixed;
    inset: 0;
    background: #689094;
    opacity: 0;
    pointer-events: none;
    transition: .4s ease;
    z-index: 9999;
}

#page-transition.active {
    opacity: 1;
}


/* =============================================
  10. MESSAGES
   — Trois variantes selon le contexte :
     .error   → identifiants incorrects, erreur CSRF
     .info-message → session expirée (timeout)
     .warning → compte temporairement bloqué (anti brute force)
   ============================================= */

/* Erreur — fond rouge clair */
.error {
    background: #f8d7da;
    color: #721c24;
    padding: 12px;
    border-radius: 6px;
    margin-bottom: 15px;
    border: 1px solid #f5c6cb;
    font-size: 14px;
}

/* Info — fond bleu clair (ex: session expirée) */
.info-message {
    background: #d1ecf1;
    color: #0c5460;
    padding: 12px;
    border-radius: 6px;
    margin-bottom: 15px;
    border: 1px solid #bee5eb;
    font-size: 14px;
}

/* Avertissement — fond jaune (ex: tentatives restantes) */
.warning {
    background: #fff3cd;
    color: #856404;
    padding: 12px;
    border-radius: 6px;
    margin-bottom: 15px;
    border: 1px solid #ffeaa7;
    font-size: 14px;
}


/* =============================================
   11. MEDIA QUERY TABLETTE (≥ 480px)
   — Légèrement plus de padding et titre un peu plus grand
     sur les écrans plus larges
   ============================================= */

@media (min-width: 480px) {
    .login-container {
        padding: 30px;
    }
    h2 {
        font-size: 22px;
    }
}