/* Bravura : police de référence SMuFL, pour les altérations musicales (dièses, bémols, quarts de ton...) dans les annotations. */ @font-face { font-family: 'Bravura'; src: url('https://cdn.jsdelivr.net/npm/@vexflow-fonts/bravura/bravura.woff2') format('woff2'); font-display: swap; } /* ================================================================ Design : doux et chaleureux -- fond beige/crème, texte quasi noir, surfaces en aplats gris/beige (jamais de bordure : les surfaces se distinguent par l'espace et la couleur, pas par un trait), coins arrondis. Une seule couleur d'accent. Police unique pour toute l'interface (Inter) -- la monospace ne sert plus qu'aux valeurs numériques techniques (chronomètre, métriques de synchro) où l'alignement des chiffres compte. Les panneaux qui flottent PAR-DESSUS la vidéo (outils, infos, saisie de texte) restent sombres et translucides (même famille chaude, juste inversée) -- ils doivent surtout rester lisibles sur une image vidéo quelconque, comme les contrôles de n'importe quel lecteur vidéo. ================================================================ */ :root { --bg: #F2EBDC; --surface: #ECE3D3; --surface-strong: #DFD2B9; --text: #211D17; --text-muted: #6E6355; --text-faint: #A79C88; --accent: #E3001B; --accent-text: #FFFFFF; --good: #1C8A4B; --warn: #B26A00; --bad: #D0021B; /* Onglets/panneaux flottants : entièrement opaques désormais (plus de transparence sur la vidéo), donc même thème clair que le reste de l'appli plutôt qu'un thème sombre séparé. */ --overlay-bg: var(--bg); --overlay-bg-strong: var(--surface-strong); --overlay-text: var(--text); --overlay-text-muted: var(--text-muted); --overlay-fill: rgba(33, 29, 23, 0.08); --overlay-fill-hover: rgba(33, 29, 23, 0.15); --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, monospace; --radius: 10px; --radius-lg: 18px; /* Largeur des panneaux (outils/infos) -- une seule source, utilisée par .overlay-panel.open et par le contenu (header/body) qui doit rester à largeur fixe pendant l'animation d'ouverture (voir .overlay-panel en CSS plus bas). Réduite ~60% par rapport à l'ancienne largeur (300px). */ --panel-w: 180px; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; background: var(--bg); color: var(--text); font-family: var(--font-display); } /* Compte admin : fond très légèrement grisé sur toute l'appli (bascule sur , voir isAdmin en JS), pour qu'on distingue au premier coup d'oeil un compte qui peut éditer les repères/la couche publique d'un compte qui ne peut pas -- discret exprès, pas un bandeau ou une bordure. */ body.is-admin { --bg: #E9E2D5; --surface: #E2D9C8; --surface-strong: #D5C7AC; } .hidden { display: none !important; } .icon { width: 16px; height: 16px; flex-shrink: 0; display: inline-block; vertical-align: middle; } .icon-letter { width: 16px; height: 16px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 13px; line-height: 1; } .icon-xl { width: 34px; height: 34px; } /* Glyphe Bravura utilisé comme icône (ex : bouton "Symboles") plutôt qu'un SVG -- même principe que .icon-letter (un caractère à la place d'un tracé), juste avec la police à molette. */ .icon-glyph { width: 16px; height: 16px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-family: 'Bravura', sans-serif; font-size: 15px; line-height: 1; } /* ---------- Écrans plein page (connexion, bibliothèque) ---------- */ .screen { min-height: 100%; display: flex; flex-direction: column; } .login-card { max-width: 380px; margin: 10vh auto; padding: 32px; background: var(--surface); border-radius: var(--radius-lg); display: flex; flex-direction: column; gap: 4px; } .login-brand { justify-content: center; margin-bottom: 12px; } .login-submit { width: 100%; margin-top: 6px; } .login-forgot { width: 100%; margin-top: 10px; font-size: 11.5px; color: var(--text-faint); } .field-label { font-family: var(--font-display); font-size: 10px; font-weight: 600; letter-spacing: 0.6px; text-transform: uppercase; color: var(--text-faint); margin: 10px 0 4px; } .text-input { width: 100%; background: var(--surface-strong); border: none; border-radius: var(--radius); color: var(--text); font-family: var(--font-display); font-size: 13px; padding: 10px 10px; caret-color: var(--accent); } .text-input:focus { outline: none; background: var(--surface-strong); box-shadow: inset 0 -2px 0 0 var(--accent); } .library-main { max-width: 900px; margin: 0 auto; padding: 32px 24px; width: 100%; display: flex; flex-direction: column; gap: 24px; } .library-list { display: flex; flex-direction: column; gap: 8px; } .library-item { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--surface); border-radius: var(--radius-lg); } .library-item-info { flex: 1; min-width: 0; } .library-item-title { font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .library-item-meta { font-size: 11px; color: var(--text-faint); margin-top: 2px; } .library-item-buttons { display: flex; gap: 8px; flex-shrink: 0; } .library-empty { color: var(--text-faint); font-size: 13px; padding: 10px 0; } /* Indique si la vidéo est déjà en cache local (voir isVideoCached en JS) -- surtout utile sur tablette, où on veut savoir avant de partir en répétition si "Ouvrir" va nécessiter du réseau ou pas. */ .library-cache-badge { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; font-size: 11px; color: var(--text-faint); } .library-cache-badge .dot { width: 6px; height: 6px; } .library-cache-badge.is-cached { color: var(--good); } .library-cache-badge.is-cached .dot { background: var(--good); } /* ---------- Topbar ---------- */ .topbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; row-gap: 10px; padding: 20px 24px 18px; } .brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: 0.5px; } .brand-mark { color: var(--accent); font-size: 20px; } .brand-name { color: var(--text); } .brand-name .accent { color: var(--accent); font-weight: 500; } .topbar-right { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; } .topbar-actions { display: flex; gap: 4px; } .topbar-status { display: flex; gap: 16px; } .status-item { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-muted); } .status-item#roleChip.is-master { color: var(--accent); font-weight: 600; } .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-faint); flex-shrink: 0; } .dot-off { background: var(--bad); } .dot-on { background: var(--good); } /* ---------- Boutons texte (chrome de page, pas de fond ni de bordure) --- */ .text-btn { font-family: var(--font-display); font-size: 13px; font-weight: 500; color: var(--text); background: none; border: none; padding: 8px 10px; cursor: pointer; } .text-btn:hover { background: var(--surface); } .text-btn-accent { color: var(--accent); font-weight: 600; } /* Raccourci maître/esclave dans la barre du haut -- même bascule que Devenir maître/Redevenir esclave (voir #quickRoleToggleBtn en JS), en un clic. Deux traitements de couleur opposés plutôt qu'un seul état neutre : plein/accent quand on EST déjà maître (état actif), fond clair/icône noire sinon (invite à cliquer pour le devenir) -- demande explicite de l'inversion des couleurs entre les deux. */ .role-toggle-btn { display: flex; align-items: center; justify-content: center; width: 42px; height: 28px; padding: 4px; margin: 0 2px; border: none; border-radius: var(--radius); background: var(--surface); color: var(--text); cursor: pointer; } .role-toggle-btn:hover:not(:disabled) { background: var(--surface-strong); } .role-toggle-btn:disabled { opacity: 0.35; cursor: not-allowed; } .role-toggle-btn.is-master { background: var(--accent); color: var(--accent-text); } .icon-role { width: 30px; height: 18px; flex-shrink: 0; } /* ---------- Video pane ---------- */ .video-pane { /* Bord à bord horizontalement -- comme en plein écran (voir .fake-fullscreen), aucune marge ni largeur max ne doit empêcher la vidéo d'atteindre les bords gauche/droit de la fenêtre. */ padding: 0 0 40px; /* Budget de hauteur réel pour la vidéo (voir --video-max-h ci-dessous) : mesuré, pas deviné -- barre du haut (~70px) + titre (~24px) + barre de lecture en dessous (~64px) + marge basse de video-pane (40px) = ~198px, avec un peu de marge. Un pourcentage fixe de vh (ex: 82vh) ne colle qu'à UNE hauteur d'écran précise -- ailleurs, soit ça déborde (barre de lecture coupée), soit ça laisse un vide en dessous. Ce calc() s'adapte à n'importe quelle fenêtre. */ --video-max-h: calc(100vh - 200px); } .video-frame { position: relative; display: flex; background: var(--bg); /* Hauteur fixe = tout le budget dispo (voir --video-max-h sur .video-pane) ; largeur = bord à bord. Le cadre n'épouse plus le ratio de la vidéo -- c'est la vidéo elle-même (object-fit:contain, voir plus bas) qui s'adapte à l'intérieur de ce cadre sans le déborder, pile comme en plein écran (.fake-fullscreen), juste avec une hauteur limitée au budget dispo plutôt que tout l'écran. */ height: var(--video-max-h); width: 100%; /* Pas de overflow:hidden ici : la vidéo (object-fit:contain) et le canevas ne débordent jamais de toute façon, mais les panneaux flottants (outils/infos) doivent parfois dépasser ce cadre -- typiquement en mobile portrait, où un cadre 16/9 est bas et n'offrirait sinon presque aucune place pour leur contenu. */ } /* Plein écran SIMULÉ en CSS plutôt que via l'API Fullscreen du navigateur -- Safari iOS ne permet le vrai plein écran que sur