/* Les jetons, et rien d'autre. * * Quatre blocs disent la même chose et doivent le dire à l'identique : le * défaut, la préférence du système, et les deux réglages explicites du * bascule. Un jeton ajouté ici sans l'être dans les trois autres se voit à * l'œil dans un seul thème, ce qui est la pire façon de le découvrir. * * --surface est la surface ordinaire, posée sur --bg. --panel est la seconde * élévation, pour ce qui encadre plutôt que ce qui contient : barres * latérales, panneaux, chrome. Elle monte dans le sombre et descend dans le * clair — « distincte de la surface », pas « plus claire ». * * --accent-soft est *dérivée* et non écrite : layout.html laisse un site * remplacer --accent par sa propre couleur, et une teinte douce codée en dur * cessait alors de lui correspondre. --accent-contrast ne peut pas l'être : * choisir entre texte clair et texte sombre demande de comparer des * luminances, ce que CSS ne sait pas faire (color-contrast() n'est pas * déployé). Elle reste donc écrite par thème, en accord avec la clarté de * l'accent de ce thème — un site dont l'accent s'écarte beaucoup du nôtre * devra la revoir, et c'est la limite honnête de ce mécanisme. */ :root { color-scheme: light dark; --bg: #f5f5f7; --surface: #ffffff; --panel: #edeef1; --fg: #15161a; --muted: #6e7079; --border: #e3e4e9; --border-strong: #d0d1d9; --accent: #b4530b; --accent-hover: #8f4109; --accent-soft: color-mix(in srgb, var(--accent) 10%, var(--surface)); --accent-contrast: #ffffff; --error-bg: #fdecec; --error-fg: #b3261e; --error-border: #f6c9c7; --ok-fg: #1a7f4b; --code-bg: #f0f0f4; --shadow-sm: 0 1px 2px rgba(20, 20, 30, 0.05); --shadow-md: 0 6px 20px rgba(20, 20, 30, 0.08); --radius: 10px; --radius-sm: 6px; } @media (prefers-color-scheme: dark) { :root { --bg: #101114; --surface: #191b1f; --panel: #212328; --fg: #f3f4f6; --muted: #a2a4ad; --border: #2c2e35; --border-strong: #3a3d45; --accent: #f08a3c; --accent-hover: #f7a663; --accent-soft: color-mix(in srgb, var(--accent) 16%, var(--surface)); --accent-contrast: #150d05; --error-bg: #2a1618; --error-fg: #f2a3a1; --error-border: #4a2224; --ok-fg: #74d3a0; --code-bg: #1d1f25; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.45); } } /* Explicit overrides driven by the theme toggle (data-theme attribute on ). These use a higher-specificity attribute selector so they always win over the prefers-color-scheme defaults above, in either direction. */ :root[data-theme="light"] { /* Le bascule doit emporter les contrôles natifs avec lui. Sans cette ligne, color-scheme reste « light dark » et le navigateur habille boutons, listes et champs selon la préférence du système — si bien qu'un thème clair choisi sur une machine réglée en sombre donnait des boutons gris foncé portant du texte gris clair, illisibles. La page obéissait au réglage, les contrôles non. */ color-scheme: light; --bg: #f5f5f7; --surface: #ffffff; --panel: #edeef1; --fg: #15161a; --muted: #6e7079; --border: #e3e4e9; --border-strong: #d0d1d9; --accent: #b4530b; --accent-hover: #8f4109; --accent-soft: color-mix(in srgb, var(--accent) 10%, var(--surface)); --accent-contrast: #ffffff; --error-bg: #fdecec; --error-fg: #b3261e; --error-border: #f6c9c7; --ok-fg: #1a7f4b; --code-bg: #f0f0f4; --shadow-sm: 0 1px 2px rgba(20, 20, 30, 0.05); --shadow-md: 0 6px 20px rgba(20, 20, 30, 0.08); } :root[data-theme="dark"] { color-scheme: dark; --bg: #101114; --surface: #191b1f; --panel: #212328; --fg: #f3f4f6; --muted: #a2a4ad; --border: #2c2e35; --border-strong: #3a3d45; --accent: #f08a3c; --accent-hover: #f7a663; --accent-soft: color-mix(in srgb, var(--accent) 16%, var(--surface)); --accent-contrast: #150d05; --error-bg: #2a1618; --error-fg: #f2a3a1; --error-border: #4a2224; --ok-fg: #74d3a0; --code-bg: #1d1f25; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.45); } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", Roboto, Helvetica, Arial, sans-serif; background: var(--bg); color: var(--fg); line-height: 1.55; -webkit-font-smoothing: antialiased; } a { color: var(--accent); text-decoration: none; text-underline-offset: 3px; } a:hover { text-decoration: underline; } /* Un titre de page se lit d'un coup d'œil : plus grand, plus serré, posé sur sa ligne plutôt qu'aéré. Le resserrement (letter-spacing négatif) est ce qui fait qu'une grande taille reste un titre et ne devient pas une bannière. */ h1 { font-size: 1.65rem; font-weight: 700; letter-spacing: -0.022em; line-height: 1.15; margin: 0 0 0.25rem; } .subtitle { color: var(--muted); font-size: 0.92rem; margin: 0; max-width: 68ch; text-wrap: pretty; } /* L'étiquette de section : petite, capitales, très espacée. C'est le seul endroit où espacer les lettres aide à lire — un mot court en capitales a besoin d'air pour ne pas se tasser — et c'est ce qui donne le rythme d'une page sans y ajouter une seule couleur. */ .eyebrow { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); } /* Une étiquette de section suivie d'un filet qui va jusqu'au bout, et éventuellement d'un compte à droite. */ .section-rule { display: flex; align-items: baseline; gap: 0.7rem; margin: 0 0 0.9rem; } .section-rule::after { content: ""; flex: 1; height: 1px; background: var(--border); } .section-rule > .count { order: 1; font-size: 0.75rem; color: var(--muted); font-variant-numeric: tabular-nums; } .subtitle-inline { color: var(--muted); font-size: 0.85rem; font-weight: 400; margin-left: 0.5rem; } /* ---------- Topbar ---------- */ .topbar { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: saturate(180%) blur(10px); border-bottom: 1px solid var(--border); } .topbar-inner { max-width: 860px; margin: 0 auto; padding: 0.7rem 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .brand { display: flex; align-items: center; gap: 0.55rem; font-weight: 700; font-size: 1.02rem; letter-spacing: -0.01em; color: var(--fg); } .brand:hover { text-decoration: none; } /* Le dégradé se déduit de l'accent au lieu de nommer une seconde couleur : il tenait un violet clair, choisi pour l'indigo d'alors, qui jurait dès que l'accent changeait — et l'accent change, chaque site pouvant poser le sien. */ .brand-mark { width: 20px; height: 20px; border-radius: 6px; background: linear-gradient( 135deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #ffffff) ); box-shadow: var(--shadow-sm); flex-shrink: 0; } .topbar-nav, .topbar-anon { display: flex; align-items: center; gap: 0.4rem; } .topbar-nav { margin-right: auto; margin-left: 1.5rem; } .topbar-nav > a, .topbar-anon > a { color: var(--muted); font-size: 0.9rem; font-weight: 500; padding: 0.4rem 0.7rem; border-radius: var(--radius-sm); } .topbar-nav > a:hover, .topbar-anon > a:hover { color: var(--fg); background: var(--accent-soft); text-decoration: none; } /* Everything that isn't a destination — administration, preferences, signing out — behind one control, so the bar stays three items wide whatever the account can do. Built on
so it opens without JavaScript. */ .menu { position: relative; } .menu > summary { cursor: pointer; list-style: none; user-select: none; } .menu > summary::-webkit-details-marker { display: none; } .menu > summary::after { content: ""; display: inline-block; margin-left: 0.4rem; border: 4px solid transparent; border-top-color: currentColor; vertical-align: middle; transform: translateY(2px); } .menu[open] > summary { color: var(--fg); border-color: var(--border-strong); } .menu-panel { position: absolute; right: 0; top: calc(100% + 0.5rem); z-index: 20; min-width: 15rem; padding: 0.4rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-md); } .menu-panel a, .menu-logout button { display: block; width: 100%; padding: 0.4rem 0.6rem; border: none; border-radius: var(--radius-sm); background: none; color: var(--fg); font: inherit; font-size: 0.9rem; text-align: left; cursor: pointer; } .menu-panel a:hover, .menu-logout button:hover { background: var(--accent-soft); color: var(--accent); text-decoration: none; } .menu-group { margin-top: 0.3rem; padding-top: 0.3rem; border-top: 1px solid var(--border); } .menu-row { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.3rem 0.6rem; color: var(--muted); font-size: 0.85rem; } .menu-row select { font-size: 0.85rem; } .menu-logout { margin-top: 0.3rem; padding-top: 0.3rem; border-top: 1px solid var(--border); } .user-chip { color: var(--muted); font-size: 0.85rem; padding: 0.35rem 0.7rem; border: 1px solid var(--border); border-radius: 999px; } form.inline { display: inline; } .topbar-right { display: flex; align-items: center; gap: 1rem; } .prefs { display: flex; align-items: center; } .font-controls { display: flex; align-items: center; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); overflow: hidden; } .font-controls button { background: var(--surface); color: var(--muted); border: none; padding: 0.4rem 0.6rem; font-size: 0.78rem; font-weight: 700; cursor: pointer; line-height: 1; transition: background-color 0.12s ease, color 0.12s ease; } .font-controls button:not(:last-child) { border-right: 1px solid var(--border); } .font-controls button:hover { color: var(--fg); background: var(--accent-soft); } .btn-icon { width: 34px; height: 34px; padding: 0; justify-content: center; } .icon-moon { display: none; } :root[data-theme="dark"] .icon-sun { display: none; } :root[data-theme="dark"] .icon-moon { display: inline-block; } /* ---------- Layout ---------- */ .container { max-width: 860px; margin: 0 auto; /* La marge basse dégage la barre de lecture, qui est fixée par-dessus la page. Sa hauteur est mesurée par queue.js et publiée ici : elle vaut zéro quand la file est vide, et davantage quand la barre se replie ou que le texte est agrandi. Écrite en rem, elle était juste sur un écran et fausse sur le suivant — les derniers résultats passaient sous la barre. */ padding: 2.5rem 1.5rem 1.5rem; } /* 860 px est une largeur de lecture : c'est ce qu'il faut pour une colonne de texte, et c'est pour cela que tout le site s'y tient. Une page qui montre une image n'a pas cette contrainte — au contraire, elle l'étouffe : trois colonnes dans 860 px laissaient 260 px à la vidéo. */ .container-wide { max-width: 1500px; /* Chaque rem repris en haut est une ligne de résultats de plus. La marge basse reste : c'est elle qui dégage la barre de lecture. */ padding-top: 1.25rem; } .page-header { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.75rem; } .page-header .actions { display: flex; gap: 0.5rem; margin-left: auto; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 0.4rem; font: inherit; font-weight: 600; font-size: 0.9rem; padding: 0.55rem 1.1rem; border-radius: var(--radius-sm); border: 1px solid transparent; cursor: pointer; transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease, border-color 0.12s ease; } .btn:hover { text-decoration: none; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--accent); color: var(--accent-contrast); box-shadow: var(--shadow-sm); } .btn-primary:hover { background: var(--accent-hover); box-shadow: var(--shadow-md); } .btn-secondary { background: var(--surface); color: var(--fg); border-color: var(--border-strong); } .btn-secondary:hover { border-color: var(--accent); color: var(--accent); } .btn-ghost { background: transparent; color: var(--muted); border-color: var(--border); } .btn-ghost:hover { color: var(--fg); border-color: var(--border-strong); } .btn-sm { padding: 0.4rem 0.8rem; font-size: 0.85rem; } .btn-block { width: 100%; justify-content: center; } .icon { width: 1em; height: 1em; font-size: 1.1em; flex-shrink: 0; } /* ---------- Forms ---------- */ .form { display: flex; flex-direction: column; gap: 1.1rem; max-width: 420px; } .form.form-wide { max-width: 720px; } .form label { display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.85rem; font-weight: 600; color: var(--muted); } input, textarea, button { font: inherit; } input[type="text"], input[type="email"], input[type="password"], input[type="search"], textarea { padding: 0.6rem 0.75rem; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--fg); transition: border-color 0.12s ease, box-shadow 0.12s ease; } input:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } textarea { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; font-size: 0.88rem; resize: vertical; line-height: 1.6; } .form button[type="submit"] { align-self: flex-start; } /* ---------- Markdown editor toolbar ---------- */ .editor-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 0.25rem; padding: 0.4rem; background: var(--code-bg); border: 1px solid var(--border-strong); border-bottom: none; border-radius: var(--radius-sm) var(--radius-sm) 0 0; } #editor { border-radius: 0 0 var(--radius-sm) var(--radius-sm); } .toolbar-sep { width: 1px; align-self: stretch; margin: 0.2rem 0.15rem; background: var(--border-strong); } .ed-btn { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.35rem 0.5rem; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--fg); font-size: 0.85rem; cursor: pointer; line-height: 1; } .ed-btn:hover { background: var(--surface); border-color: var(--border-strong); } .ed-btn-wide { font-size: 0.8rem; font-weight: 600; } .ed-select { padding: 0.35rem 0.5rem; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--fg); font-size: 0.82rem; } .ed-select:hover { border-color: var(--border-strong); } /* ---------- Auth screens ---------- */ .auth-screen { display: flex; justify-content: center; padding-top: 1.5rem; } .auth-card { width: 100%; max-width: 380px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 2rem; box-shadow: var(--shadow-sm); } .auth-card .form { max-width: none; margin-top: 1.5rem; } .auth-switch { margin: 1.5rem 0 0; font-size: 0.88rem; color: var(--muted); text-align: center; } /* ---------- Search ---------- */ .search { display: flex; align-items: center; gap: 0.5rem; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 0 0.75rem; height: 40px; } .search .icon { color: var(--muted); } .search input { border: none; padding: 0; height: 100%; background: transparent; box-shadow: none !important; } /* ---------- Page list ---------- */ .page-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.6rem; } .page-card { display: flex; align-items: center; gap: 0.9rem; padding: 0.9rem 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); color: var(--fg); transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease; } .page-card:hover { text-decoration: none; border-color: var(--border-strong); box-shadow: var(--shadow-md); transform: translateY(-1px); } .page-card-icon { width: 34px; height: 34px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent); } .page-card-icon svg { width: 17px; height: 17px; } .page-card-body { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; } .page-card-title { font-weight: 600; font-size: 0.98rem; } .meta { color: var(--muted); font-size: 0.82rem; } /* ---------- Empty state ---------- */ .empty-state { display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center; padding: 3.5rem 1.5rem; border: 1px dashed var(--border-strong); border-radius: var(--radius); color: var(--muted); } /* ---------- Timeline (revision history) ---------- */ .timeline { list-style: none; padding: 0; margin: 0 0 1.5rem; display: flex; flex-direction: column; } .timeline-item { display: flex; align-items: center; gap: 0.85rem; padding: 0.7rem 0.5rem; border-radius: var(--radius-sm); color: var(--fg); } .timeline-item:hover { background: var(--accent-soft); text-decoration: none; } .timeline-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex-shrink: 0; } .timeline-body { display: flex; align-items: baseline; gap: 0.6rem; min-width: 0; } .timeline-title { font-weight: 500; } .back-link { color: var(--muted); font-size: 0.9rem; } .history-link { margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--border); } .history-link a { color: var(--muted); font-size: 0.8rem; } /* ---------- Flash messages ---------- */ .flash { display: flex; align-items: center; gap: 0.5rem; padding: 0.7rem 1rem; border-radius: var(--radius-sm); margin-bottom: 1.25rem; font-size: 0.9rem; } .flash-error { background: var(--error-bg); color: var(--error-fg); border: 1px solid var(--error-border); } /* ---------- Markdown content ---------- */ .markdown-body { font-size: 1rem; } .markdown-body :is(h1, h2, h3, h4) { font-weight: 700; letter-spacing: -0.01em; margin-top: 1.8em; margin-bottom: 0.6em; } .markdown-body h1 { font-size: 1.5rem; } .markdown-body h2 { font-size: 1.25rem; } .markdown-body h3 { font-size: 1.05rem; } .markdown-body p { margin: 0.9em 0; } .markdown-body a { text-decoration: underline; } .markdown-body ul, .markdown-body ol { padding-left: 1.4em; } .markdown-body blockquote { margin: 1em 0; padding: 0.3rem 1rem; border-left: 3px solid var(--accent); background: var(--accent-soft); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; color: var(--muted); } .markdown-body pre { background: var(--code-bg); padding: 0.9rem 1.1rem; border-radius: var(--radius-sm); overflow-x: auto; border: 1px solid var(--border); } .markdown-body code { background: var(--code-bg); padding: 0.15em 0.4em; border-radius: 5px; font-size: 0.88em; font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; } .markdown-body pre code { background: none; padding: 0; } .markdown-body table { border-collapse: collapse; width: 100%; margin: 1em 0; font-size: 0.92rem; } .markdown-body th, .markdown-body td { border: 1px solid var(--border); padding: 0.5rem 0.75rem; text-align: left; } .markdown-body th { background: var(--code-bg); font-weight: 600; } .markdown-body hr { border: none; border-top: 1px solid var(--border); margin: 2em 0; } .markdown-body img { max-width: 100%; border-radius: var(--radius-sm); } .markdown-body video, .markdown-body audio { max-width: 100%; border-radius: var(--radius-sm); } .markdown-body audio { width: 100%; } /* ---------- Media library ---------- */ .upload-form { display: flex; align-items: center; gap: 0.75rem; padding: 1rem; margin-bottom: 1.75rem; background: var(--surface); border: 1px dashed var(--border-strong); border-radius: var(--radius); } .upload-form input[type="file"] { flex: 1; min-width: 0; font-size: 0.85rem; color: var(--muted); } .media-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; } .media-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: box-shadow 0.12s ease, border-color 0.12s ease; } .media-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); } .media-preview { display: flex; align-items: center; justify-content: center; height: 140px; background: var(--code-bg); overflow: hidden; } .media-preview img, .media-preview video { width: 100%; height: 100%; object-fit: cover; } .media-preview-audio { padding: 0 1rem; } .media-preview-audio audio { width: 100%; } .media-info { display: flex; flex-direction: column; gap: 0.35rem; padding: 0.85rem 1rem; } .media-name { font-weight: 600; font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .media-delete { display: flex; align-items: center; gap: 0.5rem; padding: 0 1rem 0.85rem; } .form-hint { font-size: 0.85rem; color: var(--muted); max-width: 720px; margin: -0.75rem 0 1.5rem; } .form-hint code { background: var(--code-bg); padding: 0.1em 0.4em; border-radius: 5px; font-size: 0.9em; } /* ---------- Super-admin "switched site" banner ---------- */ .switched-banner { display: flex; align-items: center; justify-content: center; gap: 0.75rem; flex-wrap: wrap; padding: 0.5rem 1rem; background: var(--accent-soft); color: var(--accent); font-size: 0.85rem; text-align: center; } .link-button { background: none; border: none; padding: 0; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; font: inherit; font-size: 0.85rem; cursor: pointer; } /* ---------- Forms: select ---------- */ select { padding: 0.55rem 0.7rem; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--fg); } select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } /* ---------- Permissions (pages & media) ---------- */ .badge { display: inline-flex; align-items: center; padding: 0.2rem 0.55rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; color: var(--muted); background: var(--code-bg); } .badge-group { color: var(--accent); background: var(--accent-soft); } .permission-list { list-style: none; padding: 0; margin: 0 0 1.5rem; display: flex; flex-direction: column; gap: 0.5rem; } .permission-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0.9rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); } .permission-principal { font-weight: 600; flex: 1; } .permission-level { color: var(--muted); font-size: 0.85rem; } .permission-remove { margin: 0; } /* The "grant access" form lays its fields out in a row on wide screens and stacks them on narrow ones, the submit button aligning with the inputs rather than with the labels above them. */ .permission-add { max-width: none; flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem 1rem; padding: 1rem; margin-bottom: 1.5rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); } .permission-add label:first-of-type { flex: 1 1 18rem; } .permission-add button[type="submit"] { align-self: flex-end; } /* Text field + "Parcourir…" button sharing one line. */ .principal-field { display: flex; gap: 0.4rem; } .principal-field input[type="text"] { flex: 1; min-width: 0; } .principal-field button { white-space: nowrap; } .delete-form { margin: 1.5rem 0; } h2 { font-size: 1.1rem; font-weight: 700; letter-spacing: -0.01em; margin: 2rem 0 1rem; } /* ---------- Link/media picker modal ---------- */ .modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); display: flex; align-items: flex-start; justify-content: center; padding: 10vh 1rem; z-index: 100; } .modal-overlay[hidden] { display: none; } .modal { width: 100%; max-width: 480px; max-height: 70vh; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-md); overflow: hidden; } .modal-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); } .modal-header h2 { margin: 0; font-size: 1rem; } .modal-close { background: none; border: none; color: var(--muted); font-size: 1.3rem; line-height: 1; cursor: pointer; padding: 0.2rem 0.4rem; } .modal-close:hover { color: var(--fg); } .modal-controls { display: flex; gap: 0.5rem; padding: 0.75rem 1.25rem; border-bottom: 1px solid var(--border); } .modal-controls input[type="search"] { flex: 1; } .modal-controls select { flex-shrink: 0; } .picker-results { list-style: none; margin: 0; padding: 0.5rem; overflow-y: auto; } .picker-item { display: flex; align-items: center; gap: 0.6rem; width: 100%; padding: 0.55rem 0.75rem; border: none; border-radius: var(--radius-sm); background: transparent; color: var(--fg); text-align: left; cursor: pointer; font: inherit; } .picker-item:hover { background: var(--accent-soft); } .picker-item-body { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; } .picker-item-title { font-weight: 600; font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .picker-item-meta { font-size: 0.78rem; color: var(--muted); } #picker-empty { padding: 1rem 1.25rem; } /* ---------- Media library: collections, imports, transcoding ---------- */ /* Same role as .page-header .actions, under the name the newer templates use. */ .page-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-left: auto; } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .quality-form select { padding: 0.3rem 0.5rem; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--fg); font-size: 0.8rem; } .checkbox-label { flex-direction: row !important; align-items: center; gap: 0.5rem !important; } /* Collections list: a poster wall that reflows from 2 columns on a phone to as many as fit on a wide screen. */ /* ---------- Médiathèque ---------- */ /* One grid for the whole library: a film, an album and a lone file are the same kind of thing to whoever is browsing, so they get the same card. */ .library-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 1.25rem; } .library-card { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; } .library-cover { position: relative; display: block; aspect-ratio: 2 / 3; overflow: hidden; border-radius: var(--radius); border: 1px solid var(--border); background: var(--code-bg); } .library-cover img { width: 100%; height: 100%; object-fit: cover; } /* A file that isn't a picture gets its play button filling the same frame, so the grid keeps one rhythm whatever the entry is. */ .library-cover-empty, .library-cover-audio, .library-cover-video, .library-cover-subtitle, .library-cover-playlist { display: flex; align-items: center; justify-content: center; } .library-cover-empty { width: 100%; height: 100%; font-size: 2.5rem; opacity: 0.4; } .library-body { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; } .library-title { font-weight: 600; color: inherit; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } a.library-title:hover { color: var(--accent); } .library-actions { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.2rem; } /* Le cadre appartient au groupe et non au champ : la loupe est ainsi dedans plutôt qu'à côté, et les deux ne forment qu'une commande. Le champ perd son bord et son fond au profit du groupe, qui reprend aussi son état de focus — sans quoi taper dans le champ n'allumerait que la moitié de ce qu'on voit. */ .library-search { display: flex; align-items: center; margin-bottom: 1rem; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); transition: border-color 0.12s ease, box-shadow 0.12s ease; } .library-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .library-search input[type="search"] { flex: 1; min-width: 0; border: 0; background: none; border-radius: inherit; } /* Le halo du champ ferait double emploi avec celui du groupe, et se dessinerait à l'intérieur du cadre. */ .library-search input[type="search"]:focus { box-shadow: none; } .library-search .icon-button { flex: none; margin-right: 0.3rem; } /* While a search is in flight the list stays readable but says it is stale. */ #library-results[aria-busy="true"] { opacity: 0.55; transition: opacity 0.15s ease; } .player video { width: 100%; max-height: 75vh; background: #000; border-radius: var(--radius); } /* Sits under a player fed by a live conversion, where the native timeline only covers what has already been received. */ .live-seek { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.5rem; } .live-seek input[type="range"] { flex: 1; accent-color: var(--accent); } .live-seek-time { white-space: nowrap; font-variant-numeric: tabular-nums; } /* La liste des titres occupe sa section entière : la pochette est montée dans l'en-tête commun, et l'album n'a plus deux colonnes à composer. */ .track-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.6rem; } .track { display: flex; gap: 0.75rem; padding: 0.6rem 0.9rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); } .track-no { min-width: 1.5rem; color: var(--muted); font-variant-numeric: tabular-nums; } .track-body { flex: 1; display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; } .track-title { font-weight: 600; color: inherit; } a.track-title:hover { color: var(--accent); } .track audio { width: 100%; } /* Une sortie. Les séquences se lisent comme des pistes — même ligne, même bouton — mais avec l'image en tête : quarante clips nommés GX010399, GX010400, GX010401 ne se distinguent que par ce qu'on y voit. */ .clip-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.6rem; } .clip { align-items: center; } .clip-thumb { flex: 0 0 auto; width: 96px; aspect-ratio: 16 / 9; border-radius: var(--radius-sm); overflow: hidden; background: var(--panel2, var(--surface)); } .clip-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .photo-grid { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.5rem; } .photo-grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; border-radius: var(--radius-sm); border: 1px solid var(--border); } .trace-list { margin: 0 0 1.5rem 1.2rem; } /* Import roots. */ .import-list { list-style: none; padding: 0; margin: 0 0 1.5rem; display: flex; flex-direction: column; gap: 0.6rem; } .import-item { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; padding: 0.75rem 0.9rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); } .import-main { flex: 1 1 260px; display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; } .import-path { word-break: break-all; } .import-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; } .scan-result { padding: 1rem 1.25rem; margin-bottom: 1.5rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); } .scan-list { margin: 0.5rem 0 0; padding-left: 1.25rem; max-height: 18rem; overflow-y: auto; font-size: 0.85rem; } /* Transcode status. */ .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; margin: 0 0 1.5rem; } .stat-grid > div { padding: 0.75rem 0.9rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); } .stat-grid dt { font-size: 0.75rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; } .stat-grid dd { margin: 0.25rem 0 0; font-size: 1.05rem; } /* Une proposition de série : un titre modifiable, un bouton, et la liste des fichiers repliée en dessous — on l'ouvre pour vérifier avant d'accepter. */ /* Un formulaire replié derrière son bouton. La classe is-foldable est posée par le script : sans lui rien n'est caché, et la page reste utilisable. */ .is-foldable > .editable-form { display: none; } .is-foldable.is-editing > .editable-form { display: block; } .is-foldable.is-editing > [data-edit-toggle] { display: none; } .cell-actions { white-space: nowrap; } .cell-forms { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; } /* Le titre de la section et son bouton sur une seule ligne. */ .identify-head { display: flex; align-items: baseline; gap: 0.6rem; } .identify-head h2 { margin-bottom: 0.4rem; } .identify-block { margin-bottom: 1.5rem; } /* Les liens vers les fiches externes, séparés d'eux-mêmes. */ .identify-links a + a::before { content: " · "; color: var(--muted); } .proposal { border: 1px solid var(--border); border-radius: var(--radius); padding: 0.9rem 1rem; margin-bottom: 0.75rem; } .proposal-head { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; } .proposal-head input[type="text"] { flex: 1 1 16rem; } .proposal-files { margin: 0.5rem 0 0; padding-left: 1.2rem; max-height: 18rem; overflow-y: auto; } .proposal-files li { margin-bottom: 0.2rem; } .identify-list { list-style: none; margin: 0.75rem 0 0; padding: 0; } .transcode-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; } /* Wide tables scroll inside their own box rather than making the page scroll sideways. */ .table-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); } .data-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; } .data-table th, .data-table td { padding: 0.55rem 0.8rem; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; } .data-table th { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); background: var(--code-bg); } .data-table tr:last-child td { border-bottom: none; } /* Figures line up on the right and share a digit width: a column of numbers is read by comparing them, which needs the digits to sit above one another. */ .data-table th.num, .data-table td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .cell-error { max-width: 28rem; color: var(--muted); word-break: break-word; } /* ---------- Pagination ---------- */ .pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin: 1.25rem 0; } .pager-count { color: var(--muted); font-size: 0.85rem; } .pager-links { display: flex; flex-wrap: wrap; gap: 0.25rem; } .pager-link { display: inline-flex; align-items: center; justify-content: center; min-width: 2rem; padding: 0.3rem 0.5rem; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--muted); font-size: 0.85rem; font-variant-numeric: tabular-nums; } .pager-link:hover { color: var(--fg); border-color: var(--border-strong); text-decoration: none; } .pager-link.is-current { color: var(--accent-contrast); background: var(--accent); border-color: var(--accent); font-weight: 600; } .pager-link.is-disabled { opacity: 0.35; } .pager-gap { padding: 0.3rem 0.2rem; color: var(--muted); } /* ---------- Media library rows ---------- */ /* The stand-in for a player that hasn't been created yet. */ .media-play { width: 100%; height: 100%; border: none; background: transparent; color: var(--muted); font-size: 1.4rem; cursor: pointer; transition: background-color 0.12s ease, color 0.12s ease; } .media-play:hover { background: var(--accent-soft); color: var(--accent); } .media-player-slot:empty { display: none; } .media-player-slot audio, .media-player-slot video { width: 100%; margin-top: 0.4rem; } .media-player-slot video { max-height: 60vh; background: #000; border-radius: var(--radius-sm); } /* ---------- Task manager ---------- */ .progress-card { padding: 1rem 1.25rem; margin-bottom: 1.25rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); } .progress-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.5rem; } .progress-track { height: 8px; border-radius: 999px; background: var(--code-bg); overflow: hidden; } .progress-fill { display: block; height: 100%; background: var(--accent); transition: width 0.3s ease; } .progress-legend { display: flex; flex-wrap: wrap; gap: 0.25rem 1.1rem; margin-top: 0.6rem; color: var(--muted); font-size: 0.85rem; } .progress-legend b { color: var(--fg); font-variant-numeric: tabular-nums; } .filter-bar { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.5rem; } /* Fond déclaré et non hérité : ces puces sont des