/* ════════════════════════════════════════════════════════════════════ BIB-QA-FIX — Feuille DÉDIÉE bibliothèque coach : portage VERBATIM de design-ref/bibliotheque/biblio.css (règle cardinale : polices, variables de couleurs et valeurs de la maquette À L'IDENTIQUE, AUCUN remappage Marx). Adaptations MÉCANIQUES seules : :root → .bx-scope ; html.mx-dark → body.dark-mode .bx-scope ; base (body/*/h/button/a) scopée .bx-scope ; chrome de planche retiré (.bx-bar, .bx-seg, .bx-dark-btn, .bx-view, .bx-phone). La section « GLUE APP » en fin de fichier est la seule écriture nouvelle. ════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════ BIBLIOTHÈQUE MARX — langage ESPACE COACH (cards, DM Sans + Saira, rouge #E8170A). Écrans 1 (gestion), 2 (fiche exercice), 4 (note picker). L'écran 3 vit dans biblio-live.css (langage INSTRUMENT de la séance live). Tokens --bx-* : mêmes valeurs que les --fc-* de la fiche client coach (même DA). Mode sombre : html.mx-dark (convention de l'espace coach). ════════════════════════════════════════════════════════════════════ */ .bx-scope { --bx-bg:#F4F2ED; --bx-bg2:#EEEBE3; --bx-card:#FFFFFF; --bx-ink:#0F0E0C; --bx-ink2:#3D3A33; --bx-muted:#8C877C; --bx-faint:#B4AFA3; --bx-line:#E4E0D5; --bx-line2:#D3CEC1; --bx-red:#E8170A; --bx-red-d:#C2120A; --bx-red-soft:#FCEAE7; --bx-green:#1B6B35; --bx-green-soft:#E4F0E7; --bx-amber:#C98A12; --bx-amber-soft:#F8EFD8; --bx-t-title:'Saira', system-ui, sans-serif; --bx-t-body:'DM Sans', system-ui, sans-serif; --bx-t-mono:'JetBrains Mono', ui-monospace, monospace; --bx-r:10px; --bx-r-lg:14px; --bx-ease:cubic-bezier(.4,0,.2,1); --bx-shadow:0 1px 2px rgba(20,19,15,.05), 0 4px 14px rgba(20,19,15,.03); } body.dark-mode .bx-scope { --bx-bg:#121212; --bx-bg2:#181715; --bx-card:#1E1E1E; --bx-ink:#F0EDE8; --bx-ink2:#CFCABC; --bx-muted:#8C877C; --bx-faint:#5C5848; --bx-line:#2A2824; --bx-line2:#36332C; --bx-red:#FF3B2E; --bx-red-soft:#2E120E; --bx-green:#38A05C; --bx-green-soft:#14271B; --bx-amber:#D9A33A; --bx-amber-soft:#2A2110; --bx-shadow:0 1px 2px rgba(0,0,0,.3), 0 6px 18px rgba(0,0,0,.25); } .bx-scope *, .bx-scope *::before, .bx-scope *::after { box-sizing: border-box; } .bx-scope { background:var(--bx-bg); color:var(--bx-ink); font-family:var(--bx-t-body); -webkit-font-smoothing:antialiased; line-height:1.5; letter-spacing:-.003em; } .bx-scope h1, .bx-scope h2, .bx-scope h3, .bx-scope p { margin:0; } .bx-scope button { font:inherit; cursor:pointer; } .bx-mono { font-family:var(--bx-t-mono); font-variant-numeric:tabular-nums; } .bx-ic { width:18px; height:18px; flex-shrink:0; } .bx-ic-sm { width:15px; height:15px; } .bx-scope a { color:var(--bx-red); } .bx-scope a:hover { color:var(--bx-red-d); } /* ───────── Barre de planche ───────── */ /* ───────── Page ───────── */ .bx-page { max-width:1180px; margin:0 auto; padding:26px 28px 80px; } /* ───────── Boutons ───────── */ .bx-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; font-weight:600; font-size:14px; white-space:nowrap; padding:11px 18px; border-radius:var(--bx-r); border:1.5px solid var(--bx-line2); background:var(--bx-card); color:var(--bx-ink); transition:all .15s var(--bx-ease); } .bx-btn:hover { border-color:var(--bx-ink); } .bx-btn-red { background:var(--bx-red); border-color:var(--bx-red); color:#fff; } .bx-btn-red:hover { background:var(--bx-red-d); border-color:var(--bx-red-d); } .bx-btn-sm { padding:8px 13px; font-size:13px; } .bx-btn-ghost { background:transparent; border-color:transparent; color:var(--bx-muted); } .bx-btn-ghost:hover { border-color:var(--bx-line2); color:var(--bx-ink); } .bx-btn[disabled] { opacity:.42; cursor:not-allowed; } .bx-btn[disabled]:hover { border-color:var(--bx-line2); } /* ───────── ÉCRAN 1 · en-tête de bibliothèque ───────── */ .bx-hd { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; padding-bottom:20px; border-bottom:2px solid var(--bx-ink); flex-wrap:wrap; } .bx-hd-l { min-width:0; } .bx-hd-k { font-family:var(--bx-t-title); font-weight:700; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--bx-muted); } .bx-hd-t { font-family:var(--bx-t-title); font-weight:800; font-size:38px; line-height:1; letter-spacing:-.025em; margin-top:7px; } .bx-hd-s { font-size:14px; color:var(--bx-ink2); margin-top:10px; } .bx-hd-s b { font-family:var(--bx-t-mono); font-variant-numeric:tabular-nums; font-weight:700; color:var(--bx-ink); } .bx-hd-r { display:flex; align-items:center; gap:8px; } /* ───────── ÉCRAN 1 · barre d'outils ───────── */ .bx-tools { display:flex; align-items:center; gap:10px; margin:20px 0 0; flex-wrap:wrap; } .bx-search { flex:1 1 260px; min-width:200px; display:flex; align-items:center; gap:10px; background:var(--bx-card); border:1.5px solid var(--bx-line2); border-radius:var(--bx-r); padding:0 13px; height:44px; transition:border-color .15s; } .bx-search:focus-within { border-color:var(--bx-red); } .bx-search svg { width:17px; height:17px; color:var(--bx-muted); flex:0 0 auto; } .bx-search input { flex:1; min-width:0; border:0; outline:none; background:none; font:inherit; font-size:14.5px; color:var(--bx-ink); } .bx-search input::placeholder { color:var(--bx-faint); } .bx-search .clr { width:22px; height:22px; border:0; background:var(--bx-bg2); border-radius:50%; color:var(--bx-muted); display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; } .bx-search .clr svg { width:12px; height:12px; } .bx-search .clr:hover { background:var(--bx-red); color:#fff; } .bx-sel { position:relative; display:inline-flex; align-items:center; } .bx-sel select { appearance:none; font:inherit; font-size:13.5px; font-weight:600; color:var(--bx-ink); background:var(--bx-card); border:1.5px solid var(--bx-line2); border-radius:var(--bx-r); height:44px; padding:0 34px 0 13px; outline:none; } .bx-sel select:hover { border-color:var(--bx-ink); } .bx-sel svg { position:absolute; right:11px; width:14px; height:14px; color:var(--bx-muted); pointer-events:none; } .bx-vseg { display:flex; background:var(--bx-card); border:1.5px solid var(--bx-line2); border-radius:var(--bx-r); padding:3px; height:44px; } .bx-vseg button { border:0; background:transparent; border-radius:7px; padding:0 12px; font-size:13px; font-weight:600; color:var(--bx-muted); display:inline-flex; align-items:center; gap:6px; } .bx-vseg button:hover { color:var(--bx-ink); } .bx-vseg button.on { background:var(--bx-ink); color:var(--bx-card); } .bx-vseg .n { font-family:var(--bx-t-mono); font-size:11px; font-weight:700; opacity:.7; } /* bascule d'affichage lignes / blocs */ .bx-modes { display:flex; background:var(--bx-card); border:1.5px solid var(--bx-line2); border-radius:var(--bx-r); padding:3px; height:44px; flex:0 0 auto; } .bx-modes button { border:0; background:transparent; border-radius:7px; width:36px; display:inline-flex; align-items:center; justify-content:center; color:var(--bx-muted); } .bx-modes button:hover { color:var(--bx-ink); } .bx-modes button.on { background:var(--bx-ink); color:var(--bx-card); } /* filtres actifs */ .bx-chips { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:14px; } .bx-chip { display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600; padding:6px 8px 6px 12px; border-radius:999px; background:var(--bx-red-soft); color:var(--bx-red); } .bx-chip button { border:0; background:none; color:inherit; display:inline-flex; padding:0; } .bx-chip svg { width:13px; height:13px; } .bx-chip-clr { font-size:12.5px; font-weight:600; color:var(--bx-muted); background:none; border:0; text-decoration:underline; text-underline-offset:2px; } .bx-chip-clr:hover { color:var(--bx-ink); } .bx-res { font-size:13px; color:var(--bx-muted); margin:16px 0 10px; display:flex; align-items:baseline; gap:8px; } .bx-res b { font-family:var(--bx-t-mono); font-variant-numeric:tabular-nums; font-weight:700; color:var(--bx-ink); font-size:14px; } /* ───────── ÉCRAN 1 · table ───────── */ .bx-tbl { background:var(--bx-card); border:1px solid var(--bx-line); border-radius:var(--bx-r-lg); box-shadow:var(--bx-shadow); overflow:hidden; } .bx-tr { display:grid; grid-template-columns:minmax(0,1fr) 128px 132px 168px 34px; gap:14px; align-items:center; padding:0 18px; } .bx-thead { border-bottom:1px solid var(--bx-line); background:var(--bx-bg2); } .bx-thead .bx-tr { padding:11px 18px; } .bx-th { font-family:var(--bx-t-title); font-weight:700; font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:var(--bx-muted); } .bx-th.srt { display:inline-flex; align-items:center; gap:5px; background:none; border:0; color:var(--bx-muted); padding:0; } .bx-th.srt:hover { color:var(--bx-ink); } .bx-th.srt svg { width:11px; height:11px; } .bx-th.srt.on { color:var(--bx-red); } .bx-body { max-height:none; } .bx-row { width:100%; text-align:left; border:0; border-bottom:1px solid var(--bx-line); background:transparent; color:inherit; transition:background .12s; } .bx-row:last-child { border-bottom:0; } .bx-row:hover { background:var(--bx-bg2); } .bx-row .bx-tr { padding:13px 18px; } .bx-row-nm { min-width:0; } .bx-row-fr, .bx-row-en { display:block; } .bx-row-fr { font-size:14.5px; font-weight:600; color:var(--bx-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .bx-row:hover .bx-row-fr { color:var(--bx-red); } .bx-row-en { font-size:12px; color:var(--bx-muted); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .bx-row-g { font-family:var(--bx-t-title); font-weight:700; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--bx-muted); } .bx-row-eq { font-size:13px; color:var(--bx-ink2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .bx-row-cr { color:var(--bx-faint); display:flex; justify-content:flex-end; } .bx-row:hover .bx-row-cr { color:var(--bx-red); } /* badge vidéo — 3 états */ .bx-vcell { display:flex; align-items:center; gap:9px; min-width:0; } .bx-vb { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700; letter-spacing:.04em; padding:4px 9px; border-radius:6px; white-space:nowrap; } .bx-vb svg { width:12px; height:12px; } .bx-vb.is-marx { background:var(--bx-bg2); color:var(--bx-ink2); } .bx-vb.is-mine { background:var(--bx-green-soft); color:var(--bx-green); } .bx-vb.is-none { background:transparent; color:var(--bx-muted); border:1px dashed var(--bx-line2); } .bx-vdur { font-family:var(--bx-t-mono); font-variant-numeric:tabular-nums; font-size:12px; font-weight:500; color:var(--bx-muted); } /* état vide */ .bx-empty { padding:56px 24px; text-align:center; } .bx-empty-ic { width:46px; height:46px; margin:0 auto; border-radius:12px; background:var(--bx-bg2); color:var(--bx-muted); display:flex; align-items:center; justify-content:center; } .bx-empty-ic svg { width:22px; height:22px; } .bx-empty-t { font-family:var(--bx-t-title); font-weight:700; font-size:19px; margin-top:16px; letter-spacing:-.01em; } .bx-empty-s { font-size:13.5px; color:var(--bx-muted); margin-top:8px; line-height:1.55; max-width:380px; margin-left:auto; margin-right:auto; } .bx-empty-a { display:flex; align-items:center; justify-content:center; gap:9px; margin-top:20px; flex-wrap:wrap; } /* ───────── ÉCRAN 1 · affichage en BLOCS ───────── */ .bx-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(228px, 1fr)); gap:14px; } .bx-gcard { display:flex; flex-direction:column; text-align:left; padding:0; overflow:hidden; background:var(--bx-card); border:1px solid var(--bx-line); border-radius:var(--bx-r-lg); box-shadow:var(--bx-shadow); color:inherit; transition:border-color .15s var(--bx-ease), transform .15s var(--bx-ease); } .bx-gcard:hover { border-color:var(--bx-ink); transform:translateY(-2px); } .bx-gthumb { position:relative; display:flex; align-items:center; justify-content:center; width:100%; aspect-ratio:16/9; background:#0F0E0C; overflow:hidden; } .bx-gthumb::after { content:''; position:absolute; inset:0; background:repeating-linear-gradient(118deg, transparent 0 13px, rgba(255,255,255,.03) 13px 14px); } .bx-gthumb .in { position:relative; z-index:1; display:flex; align-items:center; justify-content:center; } .bx-gthumb.is-land .in { width:100%; height:100%; } .bx-gthumb.is-port .in { height:100%; aspect-ratio:9/16; background:#1A1815; border-left:1px solid rgba(255,255,255,.1); border-right:1px solid rgba(255,255,255,.1); } .bx-gplay { width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.12); border:1.5px solid rgba(255,255,255,.34); display:flex; align-items:center; justify-content:center; } .bx-gplay svg { width:14px; height:14px; fill:#fff; margin-left:2px; } .bx-gcard:hover .bx-gplay { background:var(--bx-red); border-color:var(--bx-red); } .bx-gdur { position:absolute; z-index:2; right:8px; bottom:8px; font-family:var(--bx-t-mono); font-variant-numeric:tabular-nums; font-size:11px; font-weight:700; color:#fff; background:rgba(0,0,0,.66); padding:2px 6px; border-radius:5px; } .bx-gmine { position:absolute; z-index:2; left:8px; top:8px; display:inline-flex; align-items:center; gap:5px; font-size:9.5px; font-weight:700; letter-spacing:.06em; color:#fff; background:var(--bx-green); padding:3px 7px; border-radius:5px; } .bx-gmine svg { width:11px; height:11px; } .bx-gthumb.is-empty { flex-direction:column; gap:7px; background:var(--bx-bg2); color:var(--bx-ink2); border-bottom:1px dashed var(--bx-line2); } .bx-gthumb.is-empty::after { display:none; } .bx-gthumb.is-empty svg { width:20px; height:20px; } .bx-gthumb.is-empty span { font-size:11px; font-weight:600; letter-spacing:.04em; } .bx-gbody { display:block; padding:12px 14px 13px; } .bx-gfr { display:block; font-size:14px; font-weight:600; line-height:1.3; color:var(--bx-ink); } .bx-gcard:hover .bx-gfr { color:var(--bx-red); } .bx-gen { display:block; font-size:11.5px; color:var(--bx-muted); margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .bx-gfoot { display:flex; align-items:center; gap:8px; margin-top:10px; padding-top:9px; border-top:1px solid var(--bx-line); } .bx-gg { font-family:var(--bx-t-title); font-weight:700; font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--bx-muted); flex:0 0 auto; } .bx-geq { font-size:11.5px; color:var(--bx-muted); margin-left:auto; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .bx-grid-m { grid-template-columns:1fr 1fr; gap:11px; padding:14px 16px 0; } .bx-grid-m .bx-gbody { padding:10px 11px 11px; } .bx-grid-m .bx-gfr { font-size:13px; } /* ───────── MODALE (ajout d'exercice) ───────── */ .bx-modal { position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:28px 20px; } .bx-modal-bg { position:absolute; inset:0; background:rgba(20,19,15,.52); opacity:0; transition:opacity .2s var(--bx-ease); } .bx-modal.on .bx-modal-bg { opacity:1; } body.dark-mode .bx-scope .bx-modal-bg { background:rgba(0,0,0,.68); } .bx-modal-card { position:relative; z-index:1; width:560px; max-width:100%; max-height:100%; display:flex; flex-direction:column; background:var(--bx-card); border:1px solid var(--bx-line2); border-radius:var(--bx-r-lg); box-shadow:0 12px 44px rgba(20,19,15,.22); transform:translateY(10px); opacity:0; transition:transform .2s var(--bx-ease), opacity .2s var(--bx-ease); } .bx-modal.on .bx-modal-card { transform:none; opacity:1; } .bx-modal-hd { flex:0 0 auto; display:flex; align-items:flex-start; justify-content:space-between; gap:14px; padding:18px 20px 15px; border-bottom:1px solid var(--bx-line); } .bx-modal-t { font-family:var(--bx-t-title); font-weight:800; font-size:23px; line-height:1.05; letter-spacing:-.02em; margin-top:5px; } .bx-modal-x { width:34px; height:34px; flex:0 0 auto; border:1.5px solid var(--bx-line2); border-radius:9px; background:transparent; color:var(--bx-ink); display:inline-flex; align-items:center; justify-content:center; } .bx-modal-x svg { width:15px; height:15px; } .bx-modal-x:hover { border-color:var(--bx-red); color:var(--bx-red); } .bx-modal-body { flex:1 1 auto; min-height:0; overflow-y:auto; padding:18px 20px 6px; } .bx-modal-foot { flex:0 0 auto; display:flex; align-items:center; justify-content:flex-end; gap:9px; padding:15px 20px; border-top:1px solid var(--bx-line); background:var(--bx-bg2); border-radius:0 0 var(--bx-r-lg) var(--bx-r-lg); } .bx-modal-sep { display:flex; align-items:center; gap:12px; margin:20px 0 16px; } .bx-modal-sep span { font-family:var(--bx-t-title); font-weight:700; font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--bx-muted); flex:0 0 auto; } .bx-modal-sep::after { content:''; flex:1; height:1px; background:var(--bx-line); } .bx-form2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; } .bx-sel-full { display:flex; width:100%; } .bx-sel-full select { width:100%; height:42px; } .bx-ta { resize:vertical; min-height:74px; line-height:1.5; font-family:var(--bx-t-body); } .bx-lbl .req { font-size:9.5px; font-weight:700; letter-spacing:.06em; color:var(--bx-red); margin-left:6px; } .bx-lbl .opt { font-size:9.5px; font-weight:600; letter-spacing:.06em; color:var(--bx-faint); margin-left:6px; text-transform:none; } .bx-in-err { font-size:12px; color:var(--bx-red); margin-top:7px; font-weight:600; } .bx-diffseg { display:flex; gap:8px; } .bx-diffseg button { flex:1; padding:10px 8px; font-size:13px; font-weight:600; border:1.5px solid var(--bx-line2); border-radius:var(--bx-r); background:var(--bx-card); color:var(--bx-ink2); transition:all .15s var(--bx-ease); } .bx-diffseg button:hover { border-color:var(--bx-ink); } .bx-diffseg button.on { background:var(--bx-ink); border-color:var(--bx-ink); color:var(--bx-card); } /* ───────── ÉCRAN 1 · mobile 360 ───────── */ .bx-mtop { padding:20px 16px 0; } .bx-mtop .bx-hd-t { font-size:27px; } .bx-mtools { padding:14px 16px 0; display:flex; flex-direction:column; gap:9px; } .bx-mtools .bx-search { height:42px; flex:1 1 auto; } .bx-mfilters { display:flex; gap:8px; overflow-x:auto; padding-bottom:2px; } .bx-mfilters::-webkit-scrollbar { display:none; } .bx-fbtn { display:inline-flex; align-items:center; gap:6px; flex:0 0 auto; font-size:12.5px; font-weight:600; padding:8px 12px; border-radius:999px; border:1.5px solid var(--bx-line2); background:var(--bx-card); color:var(--bx-ink2); } .bx-fbtn svg { width:13px; height:13px; color:var(--bx-muted); } .bx-fbtn.on { background:var(--bx-ink); border-color:var(--bx-ink); color:var(--bx-card); } .bx-fbtn.on svg { color:rgba(255,255,255,.7); } .bx-fbtn .n { font-family:var(--bx-t-mono); font-size:11px; font-weight:700; opacity:.65; } .bx-mlist { margin:14px 0 0; background:var(--bx-card); border-top:1px solid var(--bx-line); border-bottom:1px solid var(--bx-line); } .bx-mrow { width:100%; text-align:left; display:flex; align-items:center; gap:12px; padding:13px 16px; border:0; border-bottom:1px solid var(--bx-line); background:transparent; color:inherit; } .bx-mrow:last-child { border-bottom:0; } .bx-mrow-b { flex:1; min-width:0; } .bx-mrow-fr, .bx-mrow-meta { display:block; } .bx-mrow-fr { font-size:14.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .bx-mrow-meta { display:flex; align-items:center; gap:7px; margin-top:5px; flex-wrap:wrap; } .bx-mrow-eq { font-size:11.5px; color:var(--bx-muted); } .bx-mrow-g { font-family:var(--bx-t-title); font-weight:700; font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--bx-muted); } .bx-mrow-r { display:flex; flex-direction:column; align-items:flex-end; gap:5px; flex:0 0 auto; } .bx-mres { padding:14px 16px 0; display:flex; align-items:center; justify-content:space-between; gap:10px; } .bx-mres .bx-modes { height:34px; padding:2px; } .bx-mres .bx-modes button { width:30px; } .bx-mres .bx-modes svg { width:15px; height:15px; } /* feuille de filtres mobile — groupe musculaire + équipement */ .bx-msheet { position:absolute; inset:0; z-index:40; display:flex; align-items:flex-end; } .bx-msheet-bg { position:absolute; inset:0; background:rgba(20,19,15,.5); opacity:0; transition:opacity .2s var(--bx-ease); } .bx-msheet.on .bx-msheet-bg { opacity:1; } body.dark-mode .bx-scope .bx-msheet-bg { background:rgba(0,0,0,.62); } .bx-msheet-card { position:relative; z-index:1; width:100%; max-height:84%; display:flex; flex-direction:column; background:var(--bx-card); border-radius:var(--bx-r-lg) var(--bx-r-lg) 0 0; transform:translateY(100%); transition:transform .24s var(--bx-ease); } .bx-msheet.on .bx-msheet-card { transform:none; } .bx-msheet-grip { width:38px; height:4px; border-radius:99px; background:var(--bx-line2); margin:9px auto 0; flex:0 0 auto; } .bx-msheet-hd { flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 16px 12px; border-bottom:1px solid var(--bx-line); } .bx-msheet-hd .t { font-family:var(--bx-t-title); font-weight:800; font-size:19px; letter-spacing:-.015em; } .bx-msheet-x { width:30px; height:30px; flex:0 0 auto; border:1.5px solid var(--bx-line2); border-radius:8px; background:transparent; color:var(--bx-ink); display:inline-flex; align-items:center; justify-content:center; } .bx-msheet-x svg { width:14px; height:14px; } .bx-msheet-body { flex:1 1 auto; min-height:0; overflow-y:auto; padding:16px; } .bx-msheet-sec + .bx-msheet-sec { margin-top:19px; } .bx-mchips { display:flex; flex-wrap:wrap; gap:8px; } .bx-mchip { font-size:12.5px; font-weight:600; padding:8px 12px; border-radius:999px; border:1.5px solid var(--bx-line2); background:var(--bx-card); color:var(--bx-ink2); transition:all .15s var(--bx-ease); } .bx-mchip:hover { border-color:var(--bx-ink); color:var(--bx-ink); } .bx-mchip.on { background:var(--bx-ink); border-color:var(--bx-ink); color:var(--bx-card); } .bx-msheet-foot { flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:9px; padding:13px 16px; border-top:1px solid var(--bx-line); background:var(--bx-bg2); } /* ───────── ÉCRAN 2 · fiche exercice ───────── */ .bx-back { display:inline-flex; align-items:center; gap:7px; font-size:13.5px; font-weight:600; color:var(--bx-muted); background:none; border:0; padding:0; margin-bottom:18px; } .bx-back:hover { color:var(--bx-ink); } .bx-fx-hero { padding-bottom:20px; border-bottom:2px solid var(--bx-ink); } .bx-fx-nm { font-family:var(--bx-t-title); font-weight:800; font-size:42px; line-height:1; letter-spacing:-.028em; } .bx-fx-en { font-size:15px; color:var(--bx-muted); margin-top:9px; font-weight:500; } .bx-fx-tags { display:flex; align-items:center; gap:8px; margin-top:15px; flex-wrap:wrap; } .bx-tag { font-size:12.5px; font-weight:600; padding:6px 12px; border-radius:999px; background:var(--bx-bg2); color:var(--bx-ink2); } .bx-tag-eq { display:inline-flex; align-items:center; gap:6px; } .bx-tag-eq svg { width:13px; height:13px; color:var(--bx-muted); } .bx-tag-diff { background:var(--bx-amber-soft); color:var(--bx-amber); } .bx-fx-cols { display:grid; grid-template-columns:minmax(0,1fr) 400px; gap:20px; align-items:start; margin-top:22px; } .bx-card { background:var(--bx-card); border:1px solid var(--bx-line); border-radius:var(--bx-r-lg); padding:18px 20px; box-shadow:var(--bx-shadow); } .bx-card + .bx-card { margin-top:16px; } .bx-card-h { font-family:var(--bx-t-title); font-weight:700; font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--bx-muted); margin-bottom:14px; display:flex; align-items:center; gap:10px; } .bx-card-h::after { content:''; flex:1; height:1px; background:var(--bx-line); } .bx-card-h svg { width:18px; height:18px; flex:0 0 auto; } .bx-card-h .bx-ic { color:var(--bx-muted); } .bx-desc { font-size:14px; line-height:1.62; color:var(--bx-ink2); } .bx-cues { font-size:13px; color:var(--bx-muted); margin-top:13px; padding-top:13px; border-top:1px solid var(--bx-line); line-height:1.55; } .bx-mus { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; } /* préview vidéo (16:9 ou 9:16) */ .bx-vp-top { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; } .bx-vp-src { display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:700; letter-spacing:.04em; padding:4px 10px; border-radius:6px; } .bx-vb, .bx-vp-src { white-space:nowrap; } .bx-vp-src.is-marx { background:var(--bx-bg2); color:var(--bx-ink2); } .bx-vp-src.is-mine { background:var(--bx-green-soft); color:var(--bx-green); } .bx-vp-src svg { width:12px; height:12px; } .bx-vp-meta { font-family:var(--bx-t-mono); font-variant-numeric:tabular-nums; font-size:12px; color:var(--bx-muted); } .bx-vp { position:relative; background:#0F0E0C; border-radius:var(--bx-r); overflow:hidden; display:flex; align-items:center; justify-content:center; margin:0 auto; } .bx-vp.is-land { width:100%; aspect-ratio:16/9; } .bx-vp.is-port { width:100%; max-width:250px; aspect-ratio:9/16; } .bx-vp::after { content:''; position:absolute; inset:0; background:repeating-linear-gradient(118deg, transparent 0 14px, rgba(255,255,255,.028) 14px 15px); } .bx-vp-play { position:relative; z-index:1; width:56px; height:56px; border-radius:50%; background:rgba(255,255,255,.1); border:1.5px solid rgba(255,255,255,.3); display:flex; align-items:center; justify-content:center; } .bx-vp-v { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .bx-vp-play svg { width:20px; height:20px; fill:#fff; margin-left:2px; } .bx-vp:hover .bx-vp-play { background:var(--bx-red); border-color:var(--bx-red); } .bx-vp-ratio { position:absolute; z-index:1; left:10px; top:10px; font-family:var(--bx-t-mono); font-size:10.5px; font-weight:700; letter-spacing:.06em; color:rgba(255,255,255,.72); background:rgba(0,0,0,.5); padding:3px 7px; border-radius:5px; } .bx-vp-dur { position:absolute; z-index:1; right:10px; bottom:10px; font-family:var(--bx-t-mono); font-variant-numeric:tabular-nums; font-size:11px; font-weight:700; color:#fff; background:rgba(0,0,0,.62); padding:3px 7px; border-radius:5px; } .bx-vp-empty { width:100%; aspect-ratio:16/9; border:1.5px dashed var(--bx-line2); border-radius:var(--bx-r); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; color:var(--bx-ink2); background:var(--bx-bg2); } .bx-vp-empty svg { width:24px; height:24px; } .bx-vp-empty span { font-size:13px; font-weight:600; } /* section « Ma vidéo » */ .bx-my-lead { font-size:13.5px; line-height:1.58; color:var(--bx-ink2); margin-bottom:16px; } .bx-fld { margin-bottom:15px; } .bx-lbl { display:block; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--bx-muted); margin-bottom:7px; } .bx-in { width:100%; font:inherit; font-size:14px; color:var(--bx-ink); background:var(--bx-bg); border:1.5px solid var(--bx-line2); border-radius:var(--bx-r); padding:11px 13px; outline:none; transition:border-color .15s; } .bx-in::placeholder { color:var(--bx-faint); } .bx-in:focus { border-color:var(--bx-red); background:var(--bx-card); } .bx-in.err { border-color:var(--bx-red); background:var(--bx-red-soft); } .bx-in-hint { font-size:12px; color:var(--bx-muted); margin-top:7px; line-height:1.5; } .bx-ori { display:grid; grid-template-columns:1fr 1fr; gap:9px; } .bx-ori button { display:flex; align-items:center; gap:11px; text-align:left; padding:11px 13px; border:1.5px solid var(--bx-line2); border-radius:var(--bx-r); background:var(--bx-card); color:var(--bx-ink); transition:all .15s var(--bx-ease); } .bx-ori button:hover { border-color:var(--bx-ink); } .bx-ori button.on { border-color:var(--bx-red); background:var(--bx-red-soft); } .bx-ori .fig { flex:0 0 auto; border:2px solid currentColor; border-radius:3px; color:var(--bx-muted); } .bx-ori button.on .fig { color:var(--bx-red); } .bx-ori .fig.land { width:26px; height:15px; } .bx-ori .fig.port { width:15px; height:26px; } .bx-ori .t { display:block; font-size:13.5px; font-weight:600; } .bx-ori .s { display:block; font-family:var(--bx-t-mono); font-size:11px; color:var(--bx-muted); margin-top:2px; } .bx-my-acts { display:flex; align-items:center; gap:9px; margin-top:18px; padding-top:16px; border-top:1px solid var(--bx-line); flex-wrap:wrap; } .bx-my-acts .sp { flex:1; } /* bandeaux d'état */ .bx-alert { display:flex; align-items:flex-start; gap:11px; padding:12px 14px; border-radius:var(--bx-r); font-size:13px; line-height:1.5; margin-bottom:15px; } .bx-alert svg { width:16px; height:16px; flex:0 0 auto; margin-top:1px; } .bx-alert b { font-weight:700; } .bx-alert.is-err { background:var(--bx-red-soft); color:var(--bx-red); } .bx-alert.is-warn { background:var(--bx-amber-soft); color:var(--bx-amber); } .bx-alert.is-ok { background:var(--bx-green-soft); color:var(--bx-green); } .bx-active { display:flex; align-items:center; gap:12px; padding:13px 15px; border-radius:var(--bx-r); background:var(--bx-green-soft); margin-bottom:16px; } .bx-active-ic { width:32px; height:32px; border-radius:8px; background:var(--bx-green); color:#fff; display:flex; align-items:center; justify-content:center; flex:0 0 auto; } .bx-active-ic svg { width:16px; height:16px; } .bx-active-b { flex:1; min-width:0; display:block; } .bx-active-t { display:block; font-size:13.5px; font-weight:700; color:var(--bx-green); } .bx-active-s { display:block; font-size:12px; color:var(--bx-ink2); margin-top:3px; } .bx-info { display:flex; align-items:flex-start; gap:10px; padding:13px 15px; border-radius:var(--bx-r); background:var(--bx-bg2); font-size:12.5px; line-height:1.55; color:var(--bx-ink2); } .bx-info svg { width:15px; height:15px; flex:0 0 auto; margin-top:2px; color:var(--bx-muted); } .bx-info b { font-weight:700; color:var(--bx-ink); } /* source de la vidéo : fichier importé ou lien */ .bx-srcseg { display:grid; grid-template-columns:1fr 1fr; gap:8px; } .bx-srcseg button { display:flex; align-items:center; justify-content:center; gap:8px; padding:11px 10px; font-size:13px; font-weight:600; border:1.5px solid var(--bx-line2); border-radius:var(--bx-r); background:var(--bx-card); color:var(--bx-ink2); transition:all .15s var(--bx-ease); } .bx-srcseg button svg { width:16px; height:16px; flex:0 0 auto; color:var(--bx-muted); } .bx-srcseg button:hover { border-color:var(--bx-ink); color:var(--bx-ink); } .bx-srcseg button.on { border-color:var(--bx-red); background:var(--bx-red-soft); color:var(--bx-ink); } .bx-srcseg button.on svg { color:var(--bx-red); } /* zone de dépôt */ .bx-drop { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; padding:26px 18px; text-align:center; cursor:pointer; border:1.5px dashed var(--bx-line2); border-radius:var(--bx-r); background:var(--bx-bg2); transition:border-color .15s var(--bx-ease), background .15s var(--bx-ease); } .bx-drop:hover, .bx-drop.over { border-color:var(--bx-red); background:var(--bx-red-soft); } .bx-drop-ic { display:flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:10px; background:var(--bx-card); color:var(--bx-ink2); border:1px solid var(--bx-line); margin-bottom:4px; } .bx-drop.over .bx-drop-ic, .bx-drop:hover .bx-drop-ic { color:var(--bx-red); border-color:var(--bx-red); } .bx-drop-t { font-size:14px; font-weight:600; color:var(--bx-ink); } .bx-drop-s { font-size:12.5px; color:var(--bx-ink2); } .bx-drop-s b { color:var(--bx-red); font-weight:600; } .bx-drop-f { font-family:var(--bx-t-mono); font-size:10.5px; letter-spacing:.02em; color:var(--bx-ink2); margin-top:3px; } /* fichier retenu : vignette + nom + poids/durée + progression */ .bx-file { display:flex; align-items:flex-start; gap:12px; padding:12px 13px; border:1px solid var(--bx-line); border-radius:var(--bx-r); background:var(--bx-bg2); } .bx-file-th { flex:0 0 auto; width:58px; height:40px; border-radius:6px; overflow:hidden; background:#0F0E0C; color:rgba(255,255,255,.6); display:flex; align-items:center; justify-content:center; } .bx-file-th svg { width:17px; height:17px; } .bx-file-th video { width:100%; height:100%; object-fit:cover; } .bx-file-b { flex:1; min-width:0; display:block; } .bx-file-nm { display:block; font-size:13.5px; font-weight:600; color:var(--bx-ink); word-break:break-all; } .bx-file-mt { display:block; font-family:var(--bx-t-mono); font-variant-numeric:tabular-nums; font-size:11px; color:var(--bx-ink2); margin-top:3px; } .bx-file-ok { display:flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:var(--bx-green); margin-top:6px; } .bx-file-ok svg { width:14px; height:14px; } .bx-file-x { flex:0 0 auto; width:30px; height:30px; border:1.5px solid var(--bx-line2); border-radius:8px; background:transparent; color:var(--bx-muted); display:inline-flex; align-items:center; justify-content:center; } .bx-file-x:hover { border-color:var(--bx-red); color:var(--bx-red); } .bx-prog { display:block; height:4px; border-radius:99px; background:var(--bx-line2); overflow:hidden; margin-top:8px; } .bx-prog i { display:block; height:100%; background:var(--bx-red); transition:width .22s linear; } /* source de la vidéo active (lecture seule) — le nom de fichier passe avant le libellé : bloc empilé comme .bx-file-nm / .bx-file-mt, jamais tronqué */ .bx-srcline { display:flex; align-items:flex-start; gap:10px; padding:11px 13px; border:1px solid var(--bx-line); border-radius:var(--bx-r); background:var(--bx-bg2); } .bx-srcline svg { width:16px; height:16px; flex:0 0 auto; margin-top:2px; color:var(--bx-muted); } .bx-srcline .b { flex:1; min-width:0; display:block; } .bx-srcline .nm { display:block; font-size:13.5px; font-weight:600; color:var(--bx-ink); word-break:break-all; } .bx-srcline .mt { display:block; font-family:var(--bx-t-mono); font-size:10.5px; letter-spacing:.02em; color:var(--bx-ink2); margin-top:3px; } /* ───────── Mobile / responsive ───────── */ @media (max-width: 900px) { .bx-fx-cols { grid-template-columns:minmax(0,1fr); } .bx-tr { grid-template-columns:minmax(0,1fr) 150px 30px; } .bx-tr > .bx-hide-sm { display:none; } .bx-form2 { grid-template-columns:1fr; } .bx-srcseg { grid-template-columns:1fr; } } @media (prefers-reduced-motion: reduce) { .bx-scope *, .bx-scope *::before, .bx-scope *::after { transition:none !important; animation:none !important; } } /* ════════ GLUE APP (hors maquette — le strict nécessaire, consigné) ════════ */ /* players réels : la planche posait des vignettes, l'app pose l'iframe/le