body { 
    background:#0f172a; color:#e5e7eb; font-family:Roboto, "Helvetica Neue", Arial;
    margin:0;display:flex; flex-direction:column; align-items:center; gap:20px; 
}

#container{ position:relative; width:780px; max-width:95%; }
video, canvas{
    border-radius:12px;
    box-shadow:0 8px 32px rgba(0,0,0,0.45);
    display: block;       /* supprime l'effet inline par défaut */
    max-width: 100%;      /* pour ne jamais dépasser le container */
    height: auto;         /* garde le ratio */
}
#Allcontainer {
    display: flex;
    gap: 20px;               /* espace entre vidéo et miniatures */
    justify-content: center;
    align-items: flex-start; /* aligner le haut */
}

#overlay {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
}

#facesContainer {
    display: flex;
    flex-direction: column;  /* empile les miniatures verticalement */
    gap: 10px;
    max-height: 768px;       /* correspond à la hauteur de la vidéo */
    overflow-y: auto;        /* scroll si beaucoup de visages */
}
#controls {
    display: flex; gap: .75rem; align-items: center;
    background: #161b22;; border-radius: 12px;
    padding:12px; 
}