/* Réintégration de ta police */
@font-face {
    font-family: 'Netflix Sans';
    src: url('/static/assets/fonts/netflix-sans.ttf');
}

/* CSS Reset */
* { box-sizing: border-box; margin: 0; padding: 0; }

/* =============================================
   HTML : fond noir de secours
   =============================================
   Le vrai background est porté par des <img> position:fixed
   dans le body. html n'a qu'un fond noir en cas de chargement lent.
   ============================================= */
html {
    background: #000;
    height: 100%;
    overscroll-behavior: none;
}

/* =============================================
   IMAGES DE FOND – PLEIN ÉCRAN PHYSIQUE
   =============================================
   Sur desktop : <img> position:fixed + width/height:100% suffit.
   Sur iPhone (iOS 15+) : position:fixed + 100% ne couvre PAS derrière
   la notch / Dynamic Island. Un script JS bascule l'image en
   position:static à 150dvh + scroll de 130px pour contourner ça.

   z-index: -1 dans le contexte d'empilement de body :
   Ordre de peinture dans body (position:relative = nouveau contexte) :
     1. Le background de body (transparent → html noir visible)
     2. z-index négatifs → nos <img> ici
     3. Contenu normal (login-container, etc.) → AU-DESSUS
   ============================================= */
.bg-fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
    pointer-events: none;
    user-select: none;
}

.bg-fullscreen { display: block; }

/* =============================================
   BODY : conteneur de mise en page
   =============================================
   PAS de position:fixed ! Sinon le contenu est clippé au viewport visible
   et ne peut pas profiter du canvas html derrière les barres.
   ============================================= */
body {
    background: transparent; /* Laisse le canvas html visible */
    color: white;
    font-family: 'Netflix Sans', Arial, sans-serif;
    margin: 0;
    /* Flex centré : le contenu (.login-container) est au milieu du viewport */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    overflow: hidden;
    position: relative;
}

/* =============================================
   CONTENEUR PRINCIPAL : centré dans la zone TOUCHABLE
   ============================================= */
.login-container {
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    overflow-x: hidden;
}

/* =============================================
   LOGO
   ============================================= */
.brand-logo {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 120px;
    z-index: 10;
    filter: invert(1) brightness(2);
    transition: filter 0.3s;
    pointer-events: none;
    user-select: none;
}
.brand-logo:hover {
    filter: invert(1) drop-shadow(0 0 15px rgba(255,255,255,0.6));
}

/* =============================================
   TITRE
   ============================================= */
h1 {
    font-size: 2.5rem;
    font-weight: 500;
    margin-top: 20vh;
    margin-bottom: 30px;
    letter-spacing: 1px;
    flex-shrink: 0;
    text-align: center;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
}

/* =============================================
   GRILLE UTILISATEURS
   ============================================= */
.user-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    align-items: center;
    gap: 30px;
    
    overflow-y: auto;
    max-height: calc(100vh - 250px);
    width: 100%;
    max-width: 1200px;
    padding: 20px 40px;
    box-sizing: border-box;
    
    scrollbar-width: none;
}
.user-grid::-webkit-scrollbar { display: none; }

/* =============================================
   CARTES UTILISATEUR
   ============================================= */
.user-card {
    text-align: center;
    cursor: pointer;
    width: 18vw;
    max-width: 150px;
    min-width: 70px;
    opacity: 1;
    transition: transform 0.3s, opacity 0.3s;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.user-card:hover { opacity: 1; transform: scale(1.08); }

/* =============================================
   AVATARS
   ============================================= */
.avatar {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    max-width: 100%;
    border-radius: 4px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin-bottom: 15px;
    border: 4px solid transparent;
    transition: border 0.3s;
}
.user-card:hover .avatar { border-color: #e5e5e5; }

/* =============================================
   NOMS
   ============================================= */
.username {
    color: #ffffff;
    font-size: 1.4rem;
    transition: color 0.3s;
    text-shadow: 0 1px 2px rgba(123, 123, 123, 0.8);
}
.user-card:hover .username { color: white; text-shadow: 0 2px 4px rgba(0,0,0,0.8); }

/* =============================================
   ASTUCE CENTRAGE VERTICAL
   ============================================= */
/*
 * body::after crée un "fantôme" de la même taille que le H1 en bas du flux flex.
 * Cela pousse la grille vers le centre visuel parfait.
 */
.login-container::after {
    content: '';
    display: block;
    height: calc(2.5rem + 30px + 20px);
    width: 1px;
    flex-shrink: 0;
}

/* =============================================
   PIN OVERLAY
   ============================================= */
#pin-overlay {
    display: none; 
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(20, 20, 20, 0.7);
    flex-direction: column; align-items: center; justify-content: center;
    z-index: 10;

    /* Etat initial (fermé) */
    opacity: 0;
    transition: opacity 0.5s ease;
}

#pin-overlay.active {
    opacity: 1;
}

.error-msg { color: #e50914; font-size: 1.1rem; margin-bottom: 20px; height: 24px; font-weight: bold; }

.pin-container { position: relative; width: 240px; height: 70px; margin-bottom: 40px; }


.pin-display { display: flex; justify-content: space-between; width: 100%; height: 100%; }

.pin-digit {
    width: 50px; height: 100%;
    border-bottom: 3px solid #808080;
    display: flex; align-items: center; justify-content: center;
    font-size: 45px; font-weight: bold; color: white;
}

#real-pin-input {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    opacity: 0; font-size: 32px; border: none; outline: none;
    caret-color: transparent;
}

.button-wrapper { display: flex; justify-content: center; width: 100%; }

#submit-btn {
    background-color: white; color: black;
    border: none; padding: 12px 40px;
    font-size: 1.1rem; font-weight: bold; letter-spacing: 2px;
    cursor: pointer; opacity: 0; pointer-events: none;
    transition: all 0.3s;
}

#submit-btn:hover { background-color: #e50914; color: white; }

.cancel-btn {
    margin-top: 40px; background: none; border: none;
    color: #808080; cursor: pointer; font-size: 1rem; text-decoration: none;
}
.cancel-btn:hover { color: white; }



/* ANIMATIONS */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-10px); }
    40% { transform: translateX(10px); }
    60% { transform: translateX(-10px); }
    80% { transform: translateX(10px); }
}

/* Application des animations */
.pin-digit.error {
    border-color: #e50914 !important; /* Force RED */
    animation: shake 0.5s ease-in-out;
}

/* On enveloppe le contenu du pin overlay pour l'animer proprement */
.pin-content-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;

    /* Etat initial (fermé) : décalé vers le bas */
    transform: translateY(30px);
    transition: transform 0.5s ease;
}

/* Quand Overlay actif : le contenu remonte à sa place */
#pin-overlay.active .pin-content-wrapper {
    transform: translateY(0);
}