/* =============================================================================
   CONNEXION.CSS
   Écran de connexion (#ecran-connexion, index.php) : affiché seulement si
   body n'a PAS la classe .authentifie (posée par index.php selon la session
   PHP). Reste sous #intro (z-index inférieur) : visible seulement une fois
   l'intro terminée.

   TOUJOURS en thème clair pour le moment, peu importe le thème choisi dans
   l'appli (data-theme sur <html>) : les variables de theme.css utilisées
   ici sont figées à leur valeur "clair" directement sur #ecran-connexion,
   qui prime sur la valeur globale héritée — même logique que l'intro,
   volontairement indépendante du thème.
   ============================================================================= */

#ecran-connexion {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9998;
    align-items: flex-start;   /* au lieu de center */
    padding-top: 12vh;         /* ajuste cette valeur pour monter/descendre */
    justify-content: center;
    background: var(--fond-page) url('assets/img/intro-fond.jpg') center / cover no-repeat;
    /* Valeurs "clair" de theme.css, figées ici (voir note plus haut). */
    --fond-page: #eef1f5;
    --fond-select: #ffffff;
    --texte-select: #1a1a1a;
    --bordure-select: #bbbbbb;
}
body:not(.authentifie) #ecran-connexion {
    display: flex;
}

/* Même dégradé blanc que sur l'intro (#intro::before, intro.css) : léger au
   centre, de plus en plus marqué vers les bords gauche/droite. */
#ecran-connexion::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.95;
    background: linear-gradient(to right,
        rgba(255, 255, 255, 1) 0%,
        rgba(255, 255, 255, 0.4) 50%,
        rgba(255, 255, 255, 1) 100%);
}

#connexion-carte {
    position: relative;   /* passe au-dessus de #ecran-connexion::before */
    z-index: 1;
    width: min(90vw, 340px);
    padding: 32px 28px;
    box-sizing: border-box;
    text-align: center;
    /* Couleur FIXE (pas var(--texte-panneau)) : la carte n'a pas de fond
       opaque à elle, elle repose directement sur la photo + le dégradé
       blanc — qui restent toujours clairs, peu importe le thème actif. Un
       texte qui suivrait le thème (blanc en sombre) deviendrait illisible
       sur ce fond toujours clair. Même logique que l'intro (intro.css). */
    color: #1a1a1a;
    font-family: 'Plus Jakarta Sans', Arial, sans-serif;
}

/* Police/couleurs de "BaseBook" (.titre-basebook) viennent d'intro.css,
   partagées avec l'intro — seule la taille/marge est propre à cet écran. */
#connexion-titre {
    margin: 0 0 4px;
    font-size: 5.2rem;
}

#connexion-sous-titre {
    margin: 0 0 24px;
    font-size: 0.95rem;
    font-weight: bold;
    opacity: 0.7;
}

#connexion-formulaire {
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: left;
}

#connexion-formulaire label {
    font-family: 'Barlow Condensed', 'Plus Jakarta Sans', Arial, sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

#connexion-mdp-enrobage {
    position: relative;
}

#connexion-mdp {
    width: 100%;
    padding: 10px 40px 10px 12px; /* espace à droite pour l'œil */
    font-size: 1rem;
    border-radius: 6px;
    border: 1.5px solid var(--bordure-select);
    background: var(--fond-select);
    color: var(--texte-select);
    box-sizing: border-box;
}

#connexion-oeil {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    padding: 3px;
    box-sizing: border-box;
    color: var(--texte-select);
    opacity: 0.7;
}
#connexion-oeil:hover {
    opacity: 1;
}
#connexion-oeil svg {
    width: 100%;
    height: 100%;
    display: block;
}
/* Bascule d'icône : œil ouvert par défaut (mot de passe masqué), œil barré
   une fois le mot de passe affiché (voir connexion.js). */
#connexion-oeil .oeil-ouvert {
    display: none;
}
#connexion-mdp-enrobage.mdp-visible #connexion-oeil .oeil-ferme {
    display: none;
}
#connexion-mdp-enrobage.mdp-visible #connexion-oeil .oeil-ouvert {
    display: block;
}

#connexion-erreur {
    margin: 0;
    color: #e53935;
    font-size: 0.82rem;
}

#connexion-formulaire button {
    font-family: 'Barlow Condensed', 'Plus Jakarta Sans', Arial, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.95rem;
}

/* Tant que non connecté : l'appli reste masquée (ses fichiers JS de contenu
   ne sont de toute façon jamais servis par protege.php, mais ça évite aussi
   d'afficher une interface vide/cassée derrière l'écran de connexion). */
body:not(.authentifie) #affichage-coordonnees,
body:not(.authentifie) #zone-jeu,
body:not(.authentifie) #controls {
    display: none;
}