diff --git a/app/public/assets/css/admin.css b/app/public/assets/css/admin.css index cfa1f5f..36bad56 100644 --- a/app/public/assets/css/admin.css +++ b/app/public/assets/css/admin.css @@ -4,66 +4,66 @@ /* ── Layout ────────────────────────────────────────────────────────────── */ .admin-body { - display: flex; - flex-direction: column; - height: 100%; - overflow: hidden; + display: flex; + flex-direction: column; + height: 100%; + overflow: hidden; } /* Keep admin header single-row like public header */ .admin-body header nav { - overflow-x: auto; - white-space: nowrap; + overflow-x: auto; + white-space: nowrap; } .admin-body header nav .nav-right-links { - flex-shrink: 0; + flex-shrink: 0; } .admin-body header nav ul [data-nav-logout] a { - opacity: 0.6; - display: flex; - align-items: center; + opacity: 0.6; + display: flex; + align-items: center; } .admin-body header nav ul [data-nav-logout] a:hover { - opacity: 1; + opacity: 1; } .admin-body header nav ul [data-nav-logout] a svg { - display: block; - width: 20px; - height: 20px; + display: block; + width: 20px; + height: 20px; } /* Public-site link icon in admin nav */ .admin-body header nav .nav-logo { - display: grid; - grid-auto-flow: column; - align-items: center; - column-gap: 0.4em; + display: grid; + grid-auto-flow: column; + align-items: center; + column-gap: 0.4em; } .admin-body header nav .nav-logo svg { - width: 16px; - height: 16px; + width: 16px; + height: 16px; } .admin-body main { - flex: 1; - min-height: 0; - overflow-y: auto; - width: 100%; - background: linear-gradient( - 180deg, - rgba(149, 87, 181, 0.18) 0%, - rgba(0, 0, 0, 0) 6% - ); + flex: 1; + min-height: 0; + overflow-y: auto; + width: 100%; + background: linear-gradient( + 180deg, + rgba(149, 87, 181, 0.18) 0%, + rgba(0, 0, 0, 0) 6% + ); } .admin-body main:not(:has(.admin-table--sticky)) { - padding: 2ch; + padding: 2ch; } .admin-main--list { - padding: 0; + padding: 0; } .admin-main--list > form, @@ -71,263 +71,263 @@ .admin-main--list > .flash-success, .admin-main--list > .flash-error, .admin-main--list > .admin-empty { - margin-left: var(--space-m); - margin-right: var(--space-m); + margin-left: var(--space-m); + margin-right: var(--space-m); } #admin-table-wrap { - padding: 0 0 var(--space-2xl); + padding: 0 0 var(--space-2xl); } .admin-body main > table tbody tr:nth-child(even) { - background: var(--bg-secondary); + background: var(--bg-secondary); } .admin-table-row:hover { - background: var(--blue-muted-bg); + background: var(--blue-muted-bg); } .admin-body main > h1, .admin-list-header > h1 { - text-transform: uppercase; - letter-spacing: 0.08em; - margin: 0 0 var(--space-l) 0; - display: flex; - align-items: center; - gap: var(--space-2xs); + text-transform: uppercase; + letter-spacing: 0.08em; + margin: 0 0 var(--space-l) 0; + display: flex; + align-items: center; + gap: var(--space-2xs); } .admin-back-btn { - display: inline-flex; - align-items: center; - justify-content: center; - width: 40px; - height: 40px; - border-radius: var(--radius); - color: var(--text-secondary); - text-decoration: none; - transition: - background 0.15s, - color 0.15s; - flex-shrink: 0; - vertical-align: middle; - margin-right: var(--space-2xs); + display: inline-flex; + align-items: center; + justify-content: center; + width: 40px; + height: 40px; + border-radius: var(--radius); + color: var(--text-secondary); + text-decoration: none; + transition: + background 0.15s, + color 0.15s; + flex-shrink: 0; + vertical-align: middle; + margin-right: var(--space-2xs); } .admin-back-btn:hover { - background: var(--bg-secondary); - color: var(--accent-primary); + background: var(--bg-secondary); + color: var(--accent-primary); } .admin-back-btn svg { - width: 28px; - height: 28px; - fill: currentColor; + width: 28px; + height: 28px; + fill: currentColor; } /* ── Form styles → see form-base.css + form-admin.css ───────────────────── */ /* ── Buttons ────────────────────────────────────────────────────────────── */ .admin-form-footer { - margin-top: var(--space-l); + margin-top: var(--space-l); } /* ── Admin button aliases — see components/buttons.css .btn base class ─── */ .admin-btn { - /* deprecated alias for .btn--primary; kept for backward-compat */ + /* deprecated alias for .btn--primary; kept for backward-compat */ } .admin-btn-secondary { - /* deprecated alias for .btn--secondary; kept for backward-compat */ + /* deprecated alias for .btn--secondary; kept for backward-compat */ } .admin-btn--sm { - /* deprecated alias for .btn--sm; kept for backward-compat */ + /* deprecated alias for .btn--sm; kept for backward-compat */ } .admin-btn--warning { - /* deprecated alias for .btn--warning; kept for backward-compat */ + /* deprecated alias for .btn--warning; kept for backward-compat */ } .admin-btn--danger { - /* deprecated alias for .btn--danger; kept for backward-compat */ + /* deprecated alias for .btn--danger; kept for backward-compat */ } /* ── Toast messages — styles in components/toast.css ───────────────── */ /* ── Stats cards ────────────────────────────────────────────────────────── */ .admin-stats { - display: flex; - gap: var(--space-2xs); - flex-wrap: wrap; - margin: 0; + display: flex; + gap: var(--space-2xs); + flex-wrap: wrap; + margin: 0; } .admin-stat { - background: var(--bg-secondary); - border: 1px solid var(--border-primary); - border-radius: var(--radius); - padding: var(--space-2xs) var(--space-xs); - min-width: 0; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - margin: 0; - gap: var(--space-3xs); + background: var(--bg-secondary); + border: 1px solid var(--border-primary); + border-radius: var(--radius); + padding: var(--space-2xs) var(--space-xs); + min-width: 0; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + margin: 0; + gap: var(--space-3xs); } .admin-stat--pub .admin-stat__number { - color: var(--accent-green); + color: var(--accent-green); } .admin-stat--pub .admin-stat__number:empty::after, .admin-stat--pub .admin-stat__number[data-empty] { - color: var(--text-tertiary); + color: var(--text-tertiary); } .admin-stat--pend .admin-stat__number { - color: var(--accent-yellow); + color: var(--accent-yellow); } .admin-stat--pend .admin-stat__number:empty::after, .admin-stat--pend .admin-stat__number[data-empty] { - color: var(--text-tertiary); + color: var(--text-tertiary); } .admin-stat legend { - font-size: var(--step--2); - font-weight: 400; - text-transform: none; - letter-spacing: normal; - color: var(--text-secondary); - padding: 0; - float: none; - margin: 0; - width: auto; + font-size: var(--step--2); + font-weight: 400; + text-transform: none; + letter-spacing: normal; + color: var(--text-secondary); + padding: 0; + float: none; + margin: 0; + width: auto; } .admin-stat__number { - font-size: var(--step-1); - font-weight: 700; - color: var(--accent-primary); - line-height: 1; + font-size: var(--step-1); + font-weight: 700; + color: var(--accent-primary); + line-height: 1; } /* ── Stats (inline badge-like counters) ────────────────────────────── */ /* ── Maintenance bar ────────────────────────────────────────────────────── */ .admin-maintenance-bar { - display: flex; - align-items: center; - justify-content: space-between; - gap: var(--space-s); - background: var(--bg-secondary); - border: 1px solid var(--border-primary); - border-radius: var(--radius); - padding: var(--space-2xs) var(--space-s); - margin-bottom: var(--space-m); - font-size: var(--step--1); + display: flex; + align-items: center; + justify-content: space-between; + gap: var(--space-s); + background: var(--bg-secondary); + border: 1px solid var(--border-primary); + border-radius: var(--radius); + padding: var(--space-2xs) var(--space-s); + margin-bottom: var(--space-m); + font-size: var(--step--1); } .admin-maintenance-bar--active { - background: var(--warning-muted-bg); - border-color: var(--warning); - color: var(--text-primary); + background: var(--warning-muted-bg); + border-color: var(--warning); + color: var(--text-primary); } .admin-maintenance-bar form { - display: inline; + display: inline; } /* Result-count line above the thesis table */ .admin-list-meta { - color: var(--text-secondary); - font-size: var(--step--1); - margin-bottom: var(--space-2xs); + color: var(--text-secondary); + font-size: var(--step--1); + margin-bottom: var(--space-2xs); } /* Empty-state message below the thesis table */ .admin-empty { - color: var(--text-secondary); - padding: var(--space-s) var(--space-2xs); - text-align: center; + color: var(--text-secondary); + padding: var(--space-s) var(--space-2xs); + text-align: center; } /* "Load more" sentinel row for infinite-scroll admin tables (contenus). Sits at the bottom of the ; htmx replaces it with the next page of rows when it scrolls into the table's viewport. */ .admin-load-more__cell { - color: var(--text-tertiary); - padding: var(--space-s) var(--space-2xs); - text-align: center; - font-size: var(--step--1); + color: var(--text-tertiary); + padding: var(--space-s) var(--space-2xs); + text-align: center; + font-size: var(--step--1); } /* Fade the sentinel out once its request is in flight so it does not visually "stick" while the next page is fetched. */ .admin-load-more.htmx-request .admin-load-more__cell { - opacity: 0.4; + opacity: 0.4; } /* Identifier column in the thesis table */ .admin-table-id { - color: var(--text-secondary); - font-size: var(--step--2); - white-space: nowrap; + color: var(--text-secondary); + font-size: var(--step--2); + white-space: nowrap; } /* ── Filters bar ────────────────────────────────────────────────────────── */ .admin-filters { - display: flex; - gap: var(--space-xs); - margin-bottom: var(--space-m); - flex-wrap: wrap; - align-items: center; + display: flex; + gap: var(--space-xs); + margin-bottom: var(--space-m); + flex-wrap: wrap; + align-items: center; } .admin-filters-btn { - /* deprecated alias for .btn--primary; kept for backward-compat */ + /* deprecated alias for .btn--primary; kept for backward-compat */ } .admin-filters-reset { - /* deprecated alias for .btn--secondary; kept for backward-compat */ + /* deprecated alias for .btn--secondary; kept for backward-compat */ } /* ── Bulk actions bar ───────────────────────────────────────────────────── */ .admin-bulk-actions { - display: none; - align-items: center; - gap: var(--space-s); - padding: var(--space-2xs) var(--space-s); - background: var(--bg-secondary); - border: 1px solid var(--border-primary); - border-radius: var(--radius); - margin-bottom: var(--space-s); - font-size: var(--step--1); - position: sticky; - top: 0; - z-index: 10; + display: none; + align-items: center; + gap: var(--space-s); + padding: var(--space-2xs) var(--space-s); + background: var(--bg-secondary); + border: 1px solid var(--border-primary); + border-radius: var(--radius); + margin-bottom: var(--space-s); + font-size: var(--step--1); + position: sticky; + top: 0; + z-index: 10; } .admin-bulk-btns { - display: flex; - gap: var(--space-2xs); + display: flex; + gap: var(--space-2xs); } .admin-stat--inline { - font-size: var(--step--1); - color: var(--text-secondary); - font-weight: 500; - white-space: nowrap; + font-size: var(--step--1); + color: var(--text-secondary); + font-weight: 500; + white-space: nowrap; } /* ── Table ──────────────────────────────────────────────────────────────── */ /* Base table/th/td styles live in components/tables.css */ .admin-body main > table, #admin-table-wrap > table { - margin-top: var(--space-3xs); + margin-top: var(--space-3xs); } /* Tight horizontal padding: the table lives inside #admin-table-wrap, so the @@ -335,50 +335,50 @@ --space-xs (~15px) sideways padding from components/tables.css. */ .admin-body #admin-table-wrap th, .admin-body #admin-table-wrap td { - padding: var(--space-3xs) var(--space-2xs); + padding: var(--space-3xs) var(--space-2xs); } td.admin-ap-col, th.admin-ap-col { - white-space: nowrap; + white-space: nowrap; } .admin-na { - color: var(--text-tertiary); - font-style: italic; + color: var(--text-tertiary); + font-style: italic; } /* Sortable column headers */ .admin-sort-link { - color: inherit; - text-decoration: none; - display: inline-flex; - align-items: center; - gap: 2px; - transition: color 0.15s; + color: inherit; + text-decoration: none; + display: inline-flex; + align-items: center; + gap: 2px; + transition: color 0.15s; } .admin-sort-link:hover { - color: var(--accent-primary); + color: var(--accent-primary); } .admin-body table tr:hover td { - background: var(--bg-secondary); + background: var(--bg-secondary); } .admin-body table .thesis-title { - font-weight: 500; - display: -webkit-box; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; - overflow: hidden; - word-break: break-word; + font-weight: 500; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; + word-break: break-word; } .admin-body table .thesis-subtitle { - font-size: var(--step--1); - color: var(--text-secondary); - font-style: italic; + font-size: var(--step--1); + color: var(--text-secondary); + font-style: italic; } /* ── Status badges ──────────────────────────────────────────────────────── */ @@ -386,395 +386,395 @@ th.admin-ap-col { /* ── Compact table badges (admin-only override) ──────────────────── */ .admin-body .status-badge { - font-size: 0.7rem; - padding: 2px var(--space-3xs); + font-size: 0.7rem; + padding: 2px var(--space-3xs); } /* ── Compact icon buttons for table rows ──────────────────────────── */ .admin-icon-btn { - display: inline-flex; - align-items: center; - justify-content: center; - width: 28px; - height: 28px; - padding: 3px; - border-radius: var(--radius); - border: 1px solid transparent; - background: transparent; - color: var(--text-secondary); - cursor: pointer; - text-decoration: none; - transition: - background 0.15s, - color 0.15s, - border-color 0.15s; - line-height: 1; + display: inline-flex; + align-items: center; + justify-content: center; + width: 28px; + height: 28px; + padding: 3px; + border-radius: var(--radius); + border: 1px solid transparent; + background: transparent; + color: var(--text-secondary); + cursor: pointer; + text-decoration: none; + transition: + background 0.15s, + color 0.15s, + border-color 0.15s; + line-height: 1; } .admin-icon-btn svg { - width: 16px; - height: 16px; - fill: currentColor; - flex-shrink: 0; + width: 16px; + height: 16px; + fill: currentColor; + flex-shrink: 0; } .admin-icon-btn:hover { - background: var(--bg-secondary); - color: var(--text-primary); - border-color: var(--border-primary); + background: var(--bg-secondary); + color: var(--text-primary); + border-color: var(--border-primary); } .admin-icon-btn--view:hover { - background: var(--blue-muted-bg); - color: var(--accent-blue); - border-color: var(--blue-muted-border); + background: var(--blue-muted-bg); + color: var(--accent-blue); + border-color: var(--blue-muted-border); } .admin-icon-btn--edit:hover { - background: var(--yellow-muted-bg); - color: var(--accent-yellow); - border-color: var(--yellow-muted-border); + background: var(--yellow-muted-bg); + color: var(--accent-yellow); + border-color: var(--yellow-muted-border); } .admin-icon-btn--publish:hover { - background: var(--green-muted-bg); - color: var(--accent-green); - border-color: var(--green-muted-border); + background: var(--green-muted-bg); + color: var(--accent-green); + border-color: var(--green-muted-border); } .admin-icon-btn--unpublish:hover { - background: var(--bg-secondary); - color: var(--text-secondary); - border-color: var(--border-primary); + background: var(--bg-secondary); + color: var(--text-secondary); + border-color: var(--border-primary); } .admin-icon-btn--delete:hover { - background: var(--error-muted-bg); - color: var(--error); - border-color: var(--danger-border-muted); + background: var(--error-muted-bg); + color: var(--error); + border-color: var(--danger-border-muted); } .admin-icon-btn--copy:hover { - background: var(--blue-muted-bg); - color: var(--accent-blue); - border-color: var(--blue-muted-border); + background: var(--blue-muted-bg); + color: var(--accent-blue); + border-color: var(--blue-muted-border); } .admin-icon-btn--key:hover { - background: var(--yellow-muted-bg); - color: var(--accent-yellow); - border-color: var(--yellow-muted-border); + background: var(--yellow-muted-bg); + color: var(--accent-yellow); + border-color: var(--yellow-muted-border); } .admin-icon-btn--archive:hover { - background: var(--bg-secondary); - color: var(--text-secondary); - border-color: var(--border-primary); + background: var(--bg-secondary); + color: var(--text-secondary); + border-color: var(--border-primary); } .admin-icon-btn--merge:hover { - background: var(--yellow-muted-bg); - color: var(--accent-yellow); - border-color: var(--yellow-muted-border); + background: var(--yellow-muted-bg); + color: var(--accent-yellow); + border-color: var(--yellow-muted-border); } /* ── Action buttons in table — see components/buttons.css .btn base class ─ */ .admin-actions { - display: flex; - gap: var(--space-3xs); - flex-wrap: nowrap; - white-space: nowrap; + display: flex; + gap: var(--space-3xs); + flex-wrap: nowrap; + white-space: nowrap; } .admin-actions-col { - white-space: nowrap; + white-space: nowrap; } /* Legacy table-action size — now just an alias */ .admin-btn-sm { - /* deprecated alias for .btn--sm; kept for backward-compat */ + /* deprecated alias for .btn--sm; kept for backward-compat */ } .admin-btn-view { - /* deprecated alias for .btn--sm .btn--blue */ + /* deprecated alias for .btn--sm .btn--blue */ } .admin-btn-visit { - /* deprecated alias for .btn--sm .btn--green */ + /* deprecated alias for .btn--sm .btn--green */ } .admin-btn-edit { - /* deprecated alias for .btn--sm .btn--yellow */ + /* deprecated alias for .btn--sm .btn--yellow */ } .admin-btn-publish { - /* deprecated alias for .btn--sm .btn--green */ + /* deprecated alias for .btn--sm .btn--green */ } .admin-btn-unpublish { - /* deprecated alias for .btn--sm .btn--muted */ + /* deprecated alias for .btn--sm .btn--muted */ } .admin-btn-delete { - /* deprecated alias for .btn--sm .btn--red */ + /* deprecated alias for .btn--sm .btn--red */ } .publish-form { - display: inline; - margin: 0; + display: inline; + margin: 0; } /* ── Thesis info sections (thanks page) ─────────────────────────────────── */ .admin-body main > section:not([aria-labelledby^="settings-"]) { - border: 1px solid var(--border-primary); - border-radius: var(--radius); - padding: var(--space-m); - margin-bottom: var(--space-m); + border: 1px solid var(--border-primary); + border-radius: var(--radius); + padding: var(--space-m); + margin-bottom: var(--space-m); } .admin-body main > section:not([aria-labelledby^="settings-"]) h2 { - margin: 0 0 var(--space-s); - border-bottom: 1px solid var(--border-primary); - padding-bottom: var(--space-2xs); + margin: 0 0 var(--space-s); + border-bottom: 1px solid var(--border-primary); + padding-bottom: var(--space-2xs); } .admin-body main > section:not([aria-labelledby^="settings-"]) dl { - display: grid; - grid-template-columns: 180px 1fr; - gap: var(--space-3xs) var(--space-s); + display: grid; + grid-template-columns: 180px 1fr; + gap: var(--space-3xs) var(--space-s); } .admin-body main > section:not([aria-labelledby^="settings-"]) dt { - font-weight: 600; - font-size: var(--step--1); - color: var(--text-secondary); + font-weight: 600; + font-size: var(--step--1); + color: var(--text-secondary); } .admin-body main > section:not([aria-labelledby^="settings-"]) dd { - margin: 0; - font-size: var(--step--1); + margin: 0; + font-size: var(--step--1); } /* ── Flat sections (no border card) — parametres + contenus ─────────────── */ .admin-body main > section[aria-labelledby^="settings-"], .admin-body main > section[aria-labelledby^="static-pages-"], .admin-body main > section[aria-labelledby^="form-settings-"] { - border: none; - border-radius: 0; - padding: 0; - margin-bottom: var(--space-xl); + border: none; + border-radius: 0; + padding: 0; + margin-bottom: var(--space-xl); } /* Fieldsets inside flat settings sections: no card border */ .admin-body main > section[aria-labelledby^="settings-"] fieldset { - border: none; - border-radius: 0; - padding: var(--space-m) 0; + border: none; + border-radius: 0; + padding: var(--space-m) 0; } .admin-body main > section[aria-labelledby^="settings-"] fieldset legend { - padding: 0; - font-weight: 400; - letter-spacing: 0.04em; - text-transform: uppercase; - color: var(--text-secondary); + padding: 0; + font-weight: 400; + letter-spacing: 0.04em; + text-transform: uppercase; + color: var(--text-secondary); } .admin-body main > section[aria-labelledby^="settings-"] > h2, .admin-body main > section[aria-labelledby^="static-pages-"] > h2 { - font-weight: 600; - letter-spacing: 0.06em; - text-transform: uppercase; - color: var(--text-secondary); - margin: 0 0 var(--space-m); - padding-bottom: var(--space-2xs); - border-bottom: 1px solid var(--border-primary); + font-weight: 600; + letter-spacing: 0.06em; + text-transform: uppercase; + color: var(--text-secondary); + margin: 0 0 var(--space-m); + padding-bottom: var(--space-2xs); + border-bottom: 1px solid var(--border-primary); } .admin-action-bar { - margin-top: var(--space-m); - display: flex; - gap: var(--space-xs); - flex-wrap: wrap; + margin-top: var(--space-m); + display: flex; + gap: var(--space-xs); + flex-wrap: wrap; } .admin-muted { - color: var(--text-secondary); + color: var(--text-secondary); } /* ── Section titles (account, etc.) ─────────────────────────────────────── */ .admin-section-title { - font-size: var(--step-0); - font-weight: 600; - letter-spacing: 0.07em; - text-transform: uppercase; - color: var(--text-secondary); - margin: var(--space-l) 0 var(--space-s); - padding-bottom: var(--space-2xs); - border-bottom: 1px solid var(--border-primary); + font-size: var(--step-0); + font-weight: 600; + letter-spacing: 0.07em; + text-transform: uppercase; + color: var(--text-secondary); + margin: var(--space-l) 0 var(--space-s); + padding-bottom: var(--space-2xs); + border-bottom: 1px solid var(--border-primary); } .admin-section-title--danger { - color: var(--error); - border-color: var(--error); + color: var(--error); + border-color: var(--error); } /* ── Account status block ───────────────────────────────────────────────── */ .admin-account-status { - border: 1px solid var(--border-primary); - border-radius: var(--radius); - padding: var(--space-s) var(--space-m); - margin-bottom: var(--space-l); - display: flex; - flex-direction: column; - gap: var(--space-xs); + border: 1px solid var(--border-primary); + border-radius: var(--radius); + padding: var(--space-s) var(--space-m); + margin-bottom: var(--space-l); + display: flex; + flex-direction: column; + gap: var(--space-xs); } .admin-account-status__row { - display: flex; - align-items: center; - gap: var(--space-xs); - font-size: var(--step--1); + display: flex; + align-items: center; + gap: var(--space-xs); + font-size: var(--step--1); } .admin-account-status__label { - color: var(--text-secondary); - min-width: 220px; + color: var(--text-secondary); + min-width: 220px; } .admin-account-status__code { - font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; - font-size: var(--step--2); - border: 1px solid var(--border-primary); - border-radius: var(--radius); - padding: var(--space-3xs) var(--space-3xs); - color: var(--text-secondary); - background: var(--bg-secondary); + font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; + font-size: var(--step--2); + border: 1px solid var(--border-primary); + border-radius: var(--radius); + padding: var(--space-3xs) var(--space-3xs); + color: var(--text-secondary); + background: var(--bg-secondary); } .admin-account-status__note { - font-size: var(--step--1); - color: var(--text-secondary); - margin: 0; + font-size: var(--step--1); + color: var(--text-secondary); + margin: 0; } /* ── Danger zone (account page) ─────────────────────────────────────────── */ .admin-danger-zone { - border: 1px solid var(--danger-border-muted); - border-radius: var(--radius); - padding: var(--space-m) var(--space-m); - display: flex; - align-items: center; - gap: var(--space-m); - flex-wrap: wrap; + border: 1px solid var(--danger-border-muted); + border-radius: var(--radius); + padding: var(--space-m) var(--space-m); + display: flex; + align-items: center; + gap: var(--space-m); + flex-wrap: wrap; } .admin-danger-zone__description { - flex: 1; - font-size: var(--step--1); + flex: 1; + font-size: var(--step--1); } /* ── Login page ─────────────────────────────────────────────────────────── */ .admin-login-wrap { - display: flex; - align-items: center; - justify-content: center; - min-height: calc(100vh - 60px); + display: flex; + align-items: center; + justify-content: center; + min-height: calc(100vh - 60px); } .admin-login-box { - background: var(--bg-secondary); - border: 1px solid var(--border-primary); - border-radius: var(--radius); - padding: var(--space-l); - width: 100%; - max-width: 420px; + background: var(--bg-secondary); + border: 1px solid var(--border-primary); + border-radius: var(--radius); + padding: var(--space-l); + width: 100%; + max-width: 420px; } .admin-login-box h2 { - margin: 0 0 var(--space-m); - font-weight: 500; - text-align: center; - hyphens: none; - overflow-wrap: normal; - word-break: normal; + margin: 0 0 var(--space-m); + font-weight: 500; + text-align: center; + hyphens: none; + overflow-wrap: normal; + word-break: normal; } .admin-login-box .admin-form > div:not(.admin-form-footer) { - grid-template-columns: 1fr; - border: none; - padding: var(--space-3xs) 0; + grid-template-columns: 1fr; + border: none; + padding: var(--space-3xs) 0; } .admin-login-box .admin-form > div:not(.admin-form-footer) > label { - font-size: var(--step--1); - color: var(--text-secondary); - margin-bottom: var(--space-3xs); + font-size: var(--step--1); + color: var(--text-secondary); + margin-bottom: var(--space-3xs); } .admin-login-box .admin-form-footer { - margin-top: var(--space-s); - padding-top: var(--space-2xs); + margin-top: var(--space-s); + padding-top: var(--space-2xs); } .admin-login-box .btn { - width: 100%; + width: 100%; } /* ════ Import status card (dialog) ═══════════════════════════════════════ */ .admin-import-status-card { - margin: 0; - padding: var(--space-m) var(--space-l); + margin: 0; + padding: var(--space-m) var(--space-l); } .admin-import-status-card__success { - background: var(--success-muted-bg); - border: 1px solid var(--success); - border-left: 3px solid var(--success); - border-radius: var(--radius); - padding: var(--space-xs) var(--space-s); - font-size: var(--step--1); - margin: 0; + background: var(--success-muted-bg); + border: 1px solid var(--success); + border-left: 3px solid var(--success); + border-radius: var(--radius); + padding: var(--space-xs) var(--space-s); + font-size: var(--step--1); + margin: 0; } .admin-import-status-card__errors { - background: var(--accent-muted); - border: 1px solid var(--error); - border-left: 3px solid var(--error); - border-radius: var(--radius); - padding: var(--space-xs) var(--space-s); - font-size: var(--step--1); - margin-bottom: var(--space-s); + background: var(--accent-muted); + border: 1px solid var(--error); + border-left: 3px solid var(--error); + border-radius: var(--radius); + padding: var(--space-xs) var(--space-s); + font-size: var(--step--1); + margin-bottom: var(--space-s); } .admin-import-status-card__errors .admin-error-list { - margin: var(--space-2xs) 0 0; - padding-left: var(--space-s); + margin: var(--space-2xs) 0 0; + padding-left: var(--space-s); } /* Import log details/summary */ .admin-import-log-details { - margin: 0; - padding: 0 var(--space-l) var(--space-m); + margin: 0; + padding: 0 var(--space-l) var(--space-m); } .admin-import-log-details summary { - cursor: pointer; - font-size: var(--step--1); - font-weight: 600; - color: var(--text-secondary); - padding: var(--space-2xs) 0; - border-top: 1px solid var(--border-primary); + cursor: pointer; + font-size: var(--step--1); + font-weight: 600; + color: var(--text-secondary); + padding: var(--space-2xs) 0; + border-top: 1px solid var(--border-primary); } .admin-import-log-details summary:hover { - color: var(--text-primary); + color: var(--text-primary); } /* Hint text under the file input */ .admin-file-hint { - display: block; - margin-top: var(--space-2xs); + display: block; + margin-top: var(--space-2xs); } /* Import dialog: Fichier CSV heading + empty-CSV-template button on one line (button on the right) */ @@ -788,614 +788,614 @@ th.admin-ap-col { /* Error list inside role="alert" */ .admin-error-list { - margin: var(--space-2xs) 0 0; - padding-left: var(--space-s); + margin: var(--space-2xs) 0 0; + padding-left: var(--space-s); } /* Import results panel (legacy, kept for backward compat) */ .admin-import-results { - margin-top: var(--space-l); + margin-top: var(--space-l); } .admin-import-results__title { - font-size: var(--step-0); - font-weight: 600; - margin-bottom: var(--space-xs); - color: var(--text-secondary); - text-transform: uppercase; - letter-spacing: 0.06em; - border: none; - padding: 0; + font-size: var(--step-0); + font-weight: 600; + margin-bottom: var(--space-xs); + color: var(--text-secondary); + text-transform: uppercase; + letter-spacing: 0.06em; + border: none; + padding: 0; } /* ── Jury fieldset → see form-base.css ──────────────────────────────────── */ /* ── Inline form (tags page) ────────────────────────────────────────────── */ .admin-inline-form { - display: flex; - align-items: center; - gap: var(--space-3xs); - flex-wrap: wrap; + display: flex; + align-items: center; + gap: var(--space-3xs); + flex-wrap: wrap; } .admin-input--inline, .admin-inline-form input[type="text"] { - width: 160px; + width: 160px; } .admin-select--inline, .admin-inline-form select { - width: 160px; + width: 160px; } /* Stack secondary forms (merge, delete) below the rename form */ .admin-inline-form + .admin-inline-form { - margin-top: var(--space-3xs); + margin-top: var(--space-3xs); } /* Tags table column sizing */ .admin-body table:has(.admin-tags-count) th:nth-child(1) { - width: 40%; + width: 40%; } .admin-body table:has(.admin-tags-count) th:nth-child(2) { - width: 12%; + width: 12%; } .admin-body table:has(.admin-tags-count) th:nth-child(3) { - width: 48%; + width: 48%; } .admin-tags-count { - text-align: center; + text-align: center; } /* ── Banner preview ─────────────────────────────────────────────────────── */ .admin-banner-preview img { - max-width: 320px; - max-height: 100px; - object-fit: cover; - border: 1px solid var(--border-primary); - border-radius: var(--radius); - display: block; - margin-top: var(--space-2xs); + max-width: 320px; + max-height: 100px; + object-fit: cover; + border: 1px solid var(--border-primary); + border-radius: var(--radius); + display: block; + margin-top: var(--space-2xs); } /* ── List page toolbar (generic grid header + right slot) ──────────────── */ .admin-list-toolbar { - display: grid; - grid-template-columns: 1fr auto; - gap: var(--space-m) var(--space-l); - margin-bottom: var(--space-m); - align-items: center; - padding: var(--space-m) 0 0; + display: grid; + grid-template-columns: 1fr auto; + gap: var(--space-m) var(--space-l); + margin-bottom: var(--space-m); + align-items: center; + padding: var(--space-m) 0 0; } .admin-list-toolbar h1 { - margin: 0; - white-space: nowrap; + margin: 0; + white-space: nowrap; } .admin-list-toolbar .admin-stats { - justify-self: end; + justify-self: end; } .admin-list-toolbar .admin-filters { - display: flex; - flex-direction: column; - gap: var(--space-xs); - margin-bottom: 0; - min-width: 0; + display: flex; + flex-direction: column; + gap: var(--space-xs); + margin-bottom: 0; + min-width: 0; } .admin-list-toolbar .admin-filters__search { - display: flex; - gap: var(--space-xs); - align-items: center; + display: flex; + gap: var(--space-xs); + align-items: center; } .admin-list-toolbar .admin-filters__search input[type="text"] { - min-width: 10rem; - flex: 1 1 10rem; + min-width: 10rem; + flex: 1 1 10rem; } .admin-list-toolbar .admin-filters__dropdowns { - display: flex; - gap: var(--space-xs); - flex-wrap: wrap; + display: flex; + gap: var(--space-xs); + flex-wrap: wrap; } .admin-list-toolbar .admin-filters__dropdowns select { - min-width: 7rem; - flex: 1 1 7rem; + min-width: 7rem; + flex: 1 1 7rem; } .admin-list-toolbar .admin-filters .btn { - flex-shrink: 0; + flex-shrink: 0; } .admin-list-toolbar__right { - display: flex; - flex-direction: column; - gap: var(--space-xs); + display: flex; + flex-direction: column; + gap: var(--space-xs); } /* ── List page toolbar (theses index — single-line search) ─────────────── */ .admin-list-toolbar--list { - gap: var(--space-s); - padding: 2ch 2ch 0; - display: grid; - grid-template-columns: 1fr; - grid-template-rows: 1fr 1fr; - grid-template-areas: - "header" - "filters"; + gap: var(--space-s); + padding: 2ch 2ch 0; + display: grid; + grid-template-columns: 1fr; + grid-template-rows: 1fr 1fr; + grid-template-areas: + "header" + "filters"; } .admin-list-toolbar--list .admin-toolbar-top { - grid-area: header; - display: grid; - grid-template-columns: 1fr 1fr; - grid-template-rows: 1fr; - gap: 0px 0px; - grid-template-areas: "header edit"; + grid-area: header; + display: grid; + grid-template-columns: 1fr 1fr; + grid-template-rows: 1fr; + gap: 0px 0px; + grid-template-areas: "header edit"; } .admin-toolbar-top h1 { - grid-area: header; - margin: 0; - white-space: nowrap; + grid-area: header; + margin: 0; + white-space: nowrap; } .admin-btn-group { - grid-area: edit; - display: flex; - gap: var(--space-2xs); - flex-wrap: wrap; + grid-area: edit; + display: flex; + gap: var(--space-2xs); + flex-wrap: wrap; } .admin-list-toolbar--list .admin-filters { - grid-area: filters; - display: flex; - flex-direction: row; - gap: var(--space-xs); - margin-bottom: 0; + grid-area: filters; + display: flex; + flex-direction: row; + gap: var(--space-xs); + margin-bottom: 0; } .admin-list-toolbar--list .admin-filters input[type="text"] { - flex: 1 1 auto; - min-width: 8rem; + flex: 1 1 auto; + min-width: 8rem; } .admin-list-toolbar--list .admin-filters select { - min-width: 6rem; - flex-shrink: 0; + min-width: 6rem; + flex-shrink: 0; } .admin-list-toolbar--list .admin-filters .btn { - flex-shrink: 0; + flex-shrink: 0; } .admin-btn-group { - display: flex; - gap: var(--space-xs); - flex-wrap: wrap; + display: flex; + gap: var(--space-xs); + flex-wrap: wrap; } /* ── Dialog ───────────────────────────────────────────────────────────── */ /* Base dialog/::backdrop styles live in components/dialog.css */ .admin-dialog { - max-width: 680px; - width: 100%; + max-width: 680px; + width: 100%; } .admin-dialog__header { - display: flex; - align-items: center; - justify-content: space-between; - padding: var(--space-m) var(--space-l); - border-bottom: 1px solid var(--border-primary); + display: flex; + align-items: center; + justify-content: space-between; + padding: var(--space-m) var(--space-l); + border-bottom: 1px solid var(--border-primary); } .admin-dialog__header h3 { - font-weight: 600; - letter-spacing: 0.06em; - text-transform: uppercase; - margin: 0; - color: var(--text-secondary); + font-weight: 600; + letter-spacing: 0.06em; + text-transform: uppercase; + margin: 0; + color: var(--text-secondary); } .admin-dialog__close { - background: none; - border: none; - cursor: pointer; - font-size: var(--step-0); - color: var(--text-tertiary); - padding: var(--space-3xs); - line-height: 1; - border-radius: var(--radius); - transition: color 0.15s; + background: none; + border: none; + cursor: pointer; + font-size: var(--step-0); + color: var(--text-tertiary); + padding: var(--space-3xs); + line-height: 1; + border-radius: var(--radius); + transition: color 0.15s; } .admin-dialog__close:hover { - color: var(--text-primary); + color: var(--text-primary); } .admin-dialog .admin-form, .admin-dialog .admin-import-results, .admin-dialog .toast, .admin-dialog__alert { - margin: 0; - padding: var(--space-m) var(--space-l); + margin: 0; + padding: var(--space-m) var(--space-l); } .admin-dialog .admin-form { - padding-top: var(--space-m); - padding-bottom: 0; + padding-top: var(--space-m); + padding-bottom: 0; } .admin-dialog .admin-form-footer { - display: flex; - gap: var(--space-xs); - padding: 0 var(--space-l) var(--space-m); + display: flex; + gap: var(--space-xs); + padding: 0 var(--space-l) var(--space-m); } /* Small/confirmation dialog variant */ .admin-dialog--sm { - max-width: 420px; + max-width: 420px; } .admin-dialog__alert { - padding: var(--space-m) var(--space-l); - font-size: var(--step--1); - line-height: 1.6; + padding: var(--space-m) var(--space-l); + font-size: var(--step--1); + line-height: 1.6; } .admin-dialog__alert p:not(:last-child) { - margin: 0 0 var(--space-xs) 0; + margin: 0 0 var(--space-xs) 0; } .admin-dialog__alert p:last-child { - margin: 0; + margin: 0; } .admin-dialog__body { - padding: var(--space-m) var(--space-l); - font-size: var(--step--1); - line-height: 1.6; - overflow-y: auto; - flex: 1; - min-height: 0; + padding: var(--space-m) var(--space-l); + font-size: var(--step--1); + line-height: 1.6; + overflow-y: auto; + flex: 1; + min-height: 0; } .admin-dialog__body > *:first-child { - margin-top: 0; + margin-top: 0; } .admin-dialog__body > *:last-child { - margin-bottom: 0; + margin-bottom: 0; } .admin-dialog__stats { - margin: var(--space-sm) 0; - padding: var(--space-sm); - background: var(--bg-secondary); - border-radius: 8px; - font-size: var(--step--1); - line-height: 1.6; + margin: var(--space-sm) 0; + padding: var(--space-sm); + background: var(--bg-secondary); + border-radius: 8px; + font-size: var(--step--1); + line-height: 1.6; } .admin-dialog__hint { - font-size: var(--step--2); - color: var(--text-secondary); - margin: var(--space-xs) 0 0 0; + font-size: var(--step--2); + color: var(--text-secondary); + margin: var(--space-xs) 0 0 0; } .admin-dialog__footer { - display: flex; - gap: var(--space-xs); - padding: 0 var(--space-l) var(--space-m); + display: flex; + gap: var(--space-xs); + padding: 0 var(--space-l) var(--space-m); } /* Side-panel variant: pinned to right, full height */ .admin-dialog--sheet { - max-width: 720px; - max-height: 100vh; - height: 100vh; - margin: 0 0 0 auto; - border-radius: 16px 0 0 16px; - animation: adminSheetIn 0.3s ease-out; - overflow: hidden; + max-width: 720px; + max-height: 100vh; + height: 100vh; + margin: 0 0 0 auto; + border-radius: 16px 0 0 16px; + animation: adminSheetIn 0.3s ease-out; + overflow: hidden; } .admin-dialog--sheet[open] { - display: flex; - flex-direction: column; + display: flex; + flex-direction: column; } @keyframes adminSheetIn { - from { - transform: translateX(100%); - } - to { - transform: translateX(0); - } + from { + transform: translateX(100%); + } + to { + transform: translateX(0); + } } .admin-dialog--sheet::backdrop { - background: rgba(0, 0, 0, 0.5); + background: rgba(0, 0, 0, 0.5); } /* Dialog table: replaces grey background box with flat table + heading */ .n-table { - width: 100%; - border-collapse: collapse; - font-size: 0.85em; + width: 100%; + border-collapse: collapse; + font-size: 0.85em; } .n-table thead th { - text-align: left; - padding: var(--space-3xs) var(--space-xs); - border-bottom: 1px solid var(--border-primary); - font-weight: 600; - color: var(--text-secondary); - font-size: 0.9em; + text-align: left; + padding: var(--space-3xs) var(--space-xs); + border-bottom: 1px solid var(--border-primary); + font-weight: 600; + color: var(--text-secondary); + font-size: 0.9em; } .n-table tbody td { - padding: var(--space-3xs) var(--space-xs); - border-bottom: 1px solid var(--border-secondary); - vertical-align: top; + padding: var(--space-3xs) var(--space-xs); + border-bottom: 1px solid var(--border-secondary); + vertical-align: top; } .n-table .n-table__info { - color: var(--text-tertiary); - font-size: 0.9em; + color: var(--text-tertiary); + font-size: 0.9em; } .n-heading { - display: inline-flex; - align-items: center; - gap: var(--space-2xs); - margin: 0 0 var(--space-xs) 0; - font-size: var(--step--1); - font-weight: 600; - color: var(--text-primary); - line-height: 1.4; + display: inline-flex; + align-items: center; + gap: var(--space-2xs); + margin: 0 0 var(--space-xs) 0; + font-size: var(--step--1); + font-weight: 600; + color: var(--text-primary); + line-height: 1.4; } .n-meta { - font-weight: 400; - font-size: 0.9em; - color: var(--text-secondary); - margin-left: var(--space-2xs); + font-weight: 400; + font-size: 0.9em; + color: var(--text-secondary); + margin-left: var(--space-2xs); } /* Stat line rendered as a card under a cleanup-section heading. */ .cleanup-stat-card { - margin: 0 0 var(--space-m); - padding: var(--space-s) var(--space-l); - background: var(--bg-secondary); - border: 1px solid var(--border-primary); - border-radius: var(--radius); - font-size: var(--step-1); - font-weight: 700; - color: var(--accent-primary); - display: flex; - flex-wrap: wrap; - gap: var(--space-2xs) var(--space-m); - align-items: baseline; + margin: 0 0 var(--space-m); + padding: var(--space-s) var(--space-l); + background: var(--bg-secondary); + border: 1px solid var(--border-primary); + border-radius: var(--radius); + font-size: var(--step-1); + font-weight: 700; + color: var(--accent-primary); + display: flex; + flex-wrap: wrap; + gap: var(--space-2xs) var(--space-m); + align-items: baseline; } /* Short French explanation shown under a cleanup-section heading. */ .cleanup-section-desc { - margin: 0 0 var(--space-m); - font-size: var(--step--1); - line-height: 1.5; - color: var(--text-secondary); - max-width: 70ch; + margin: 0 0 var(--space-m); + font-size: var(--step--1); + line-height: 1.5; + color: var(--text-secondary); + max-width: 70ch; } .n-grid { - display: block; + display: block; } .n-section, .n-grid > section, .n-grid > details { - margin: 2ch 0; - border: none; - border-radius: 0; - background: transparent; - overflow: visible; + margin: 2ch 0; + border: none; + border-radius: 0; + background: transparent; + overflow: visible; } .n-section:first-child, .n-grid > section:first-child, .n-grid > details:first-child { - margin-top: 0; + margin-top: 0; } .n-section:last-child, .n-grid > section:last-child, .n-grid > details:last-child { - margin-bottom: 0; + margin-bottom: 0; } .n-grid .n-heading { - margin-top: 0; + margin-top: 0; } /*
/ inside cleanup sections */ .n-grid > details > summary, .n-section > summary, .admin-archived-links > summary { - cursor: pointer; - font-weight: 600; - font-size: var(--step--1); - color: var(--text-primary); - padding: var(--space-xs); - list-style: none; - font-family: var(--font-body); - display: flex; - align-items: center; - gap: var(--space-2xs); + cursor: pointer; + font-weight: 600; + font-size: var(--step--1); + color: var(--text-primary); + padding: var(--space-xs); + list-style: none; + font-family: var(--font-body); + display: flex; + align-items: center; + gap: var(--space-2xs); } .n-grid > details > summary::-webkit-details-marker, .n-section > summary::-webkit-details-marker, .admin-archived-links > summary::-webkit-details-marker { - display: none; + display: none; } .n-section[open], .n-grid > details[open] { - padding-bottom: 0; + padding-bottom: 0; } .n-grid > details > summary:hover, .n-section > summary:hover { - background: transparent; + background: transparent; } .n-grid > details > summary::before, .n-section > summary::before, .admin-archived-links > summary::before { - content: ""; - display: inline-block; - width: 16px; - height: 16px; - flex-shrink: 0; - background: currentColor; - mask-image: url("/assets/icons/caret-right.svg"); - mask-size: contain; - mask-repeat: no-repeat; - mask-position: center; - transition: transform 0.15s; + content: ""; + display: inline-block; + width: 16px; + height: 16px; + flex-shrink: 0; + background: currentColor; + mask-image: url("/assets/icons/caret-right.svg"); + mask-size: contain; + mask-repeat: no-repeat; + mask-position: center; + transition: transform 0.15s; } .n-grid > details[open] > summary::before, .n-section[open] > summary::before, .admin-archived-links[open] > summary::before { - transform: rotate(90deg); + transform: rotate(90deg); } .n-grid > details > :not(summary), .n-section > :not(summary) { - padding: 0 var(--space-s) var(--space-xs) var(--space-s); + padding: 0 var(--space-s) var(--space-xs) var(--space-s); } /* ── Import results log ─────────────────────────────────────────────── */ .admin-import-log { - list-style: none; - margin: 0; - display: flex; - flex-direction: column; - gap: var(--space-3xs); - max-height: 260px; - overflow-y: auto; - font-size: var(--step--2); - font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; - border: 1px solid var(--border-primary); - border-radius: var(--radius); - padding: var(--space-xs); - background: var(--bg-secondary); + list-style: none; + margin: 0; + display: flex; + flex-direction: column; + gap: var(--space-3xs); + max-height: 260px; + overflow-y: auto; + font-size: var(--step--2); + font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; + border: 1px solid var(--border-primary); + border-radius: var(--radius); + padding: var(--space-xs); + background: var(--bg-secondary); } .admin-import-log__item::before { - margin-right: var(--space-3xs); + margin-right: var(--space-3xs); } .admin-import-log__item--ok::before { - content: "✓"; - color: var(--accent-green); + content: "✓"; + color: var(--accent-green); } .admin-import-log__item--skip::before { - content: "⚠"; - color: var(--warning); + content: "⚠"; + color: var(--warning); } .admin-import-log__item--error::before { - content: "✗"; - color: var(--error); + content: "✗"; + color: var(--error); } /* ── Paramètres page (flat, semantic) ──────────────────────────────────── */ .param-access-table { - width: 100%; - border-collapse: separate; - border-spacing: 0; - margin-bottom: var(--space-m); - font-size: var(--step--1); - border: 1px solid var(--border-primary); - border-radius: var(--radius); - overflow: hidden; + width: 100%; + border-collapse: separate; + border-spacing: 0; + margin-bottom: var(--space-m); + font-size: var(--step--1); + border: 1px solid var(--border-primary); + border-radius: var(--radius); + overflow: hidden; } .param-access-table caption { - caption-side: top; - font-weight: 600; - margin-bottom: var(--space-2xs); - text-align: left; + caption-side: top; + font-weight: 600; + margin-bottom: var(--space-2xs); + text-align: left; } .param-access-table th, .param-access-table td { - padding: var(--space-2xs) var(--space-s); - text-align: left; - border-bottom: 1px solid var(--border-primary); + padding: var(--space-2xs) var(--space-s); + text-align: left; + border-bottom: 1px solid var(--border-primary); } .param-access-table th:not(:last-child), .param-access-table td:not(:last-child) { - border-right: 1px solid var(--border-primary); + border-right: 1px solid var(--border-primary); } .param-access-table thead th { - background: var(--bg-secondary); - font-weight: 600; + background: var(--bg-secondary); + font-weight: 600; } .param-access-table thead tr:first-child th:first-child { - border-top-left-radius: var(--radius); + border-top-left-radius: var(--radius); } .param-access-table thead tr:first-child th:last-child { - border-top-right-radius: var(--radius); + border-top-right-radius: var(--radius); } .param-access-table tbody tr:last-child td:first-child { - border-bottom-left-radius: var(--radius); + border-bottom-left-radius: var(--radius); } .param-access-table tbody tr:last-child td:last-child { - border-bottom-right-radius: var(--radius); + border-bottom-right-radius: var(--radius); } .param-access-table tbody tr:last-child td { - border-bottom: none; + border-bottom: none; } .param-access-yes { - color: var(--accent-green); + color: var(--accent-green); } .param-access-no { - color: var(--text-secondary); + color: var(--text-secondary); } .param-maintenance-row { - display: flex; - align-items: center; - justify-content: space-between; - gap: var(--space-s); - padding: var(--space-xs) var(--space-m); - margin-bottom: var(--space-m); - font-size: var(--step--1); - border: 1px solid var(--border-primary); - border-radius: var(--radius); - background: var(--bg-secondary); + display: flex; + align-items: center; + justify-content: space-between; + gap: var(--space-s); + padding: var(--space-xs) var(--space-m); + margin-bottom: var(--space-m); + font-size: var(--step--1); + border: 1px solid var(--border-primary); + border-radius: var(--radius); + background: var(--bg-secondary); } .param-maintenance-row:has(.btn--warning) { - background: var(--warning-muted-bg); - border-color: var(--warning); + background: var(--warning-muted-bg); + border-color: var(--warning); } .param-maintenance-row p { - margin: 0; + margin: 0; } .param-maintenance-row form { - flex-shrink: 0; + flex-shrink: 0; } .param-form { - display: flex; - flex-direction: column; - gap: var(--space-m); + display: flex; + flex-direction: column; + gap: var(--space-m); } .param-form > .param-form-actions { @@ -1422,518 +1422,518 @@ th.admin-ap-col { } .param-form fieldset { - display: flex; - flex-direction: column; - gap: var(--space-xs); - padding-top: var(--space-s); + display: flex; + flex-direction: column; + gap: var(--space-xs); + padding-top: var(--space-s); } .param-form fieldset > * { - margin-bottom: 0; + margin-bottom: 0; } .param-checkbox { - display: flex; - align-items: flex-start; - gap: var(--space-xs); - cursor: pointer; + display: flex; + align-items: flex-start; + gap: var(--space-xs); + cursor: pointer; } .param-checkbox--disabled { - opacity: 0.6; - cursor: not-allowed; + opacity: 0.6; + cursor: not-allowed; } .param-checkbox input[type="checkbox"] { - margin-top: 2px; + margin-top: 2px; } .param-checkbox--disabled input[type="checkbox"] { - cursor: not-allowed; + cursor: not-allowed; } .param-note { - color: var(--text-secondary); - margin: 0; + color: var(--text-secondary); + margin: 0; } .param-account-status { - display: flex; - flex-direction: column; - gap: var(--space-xs); - margin-bottom: var(--space-m); + display: flex; + flex-direction: column; + gap: var(--space-xs); + margin-bottom: var(--space-m); } .param-account-status > div { - display: flex; - align-items: center; - gap: var(--space-xs); + display: flex; + align-items: center; + gap: var(--space-xs); } .param-account-status dt { - color: var(--text-secondary); - min-width: 200px; + color: var(--text-secondary); + min-width: 200px; } .param-account-status dd { - margin: 0; - display: flex; - align-items: center; - gap: var(--space-xs); + margin: 0; + display: flex; + align-items: center; + gap: var(--space-xs); } .param-account-status code { - font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; - font-size: var(--step--2); - border: 1px solid var(--border-primary); - border-radius: var(--radius); - padding: var(--space-3xs); - color: var(--text-secondary); - background: var(--bg-secondary); + font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; + font-size: var(--step--2); + border: 1px solid var(--border-primary); + border-radius: var(--radius); + padding: var(--space-3xs); + color: var(--text-secondary); + background: var(--bg-secondary); } .param-form > div { - display: grid; - grid-template-columns: 1fr; - gap: var(--space-3xs); - border-top: 1px solid var(--border-primary); - padding: var(--space-xs) 0; + display: grid; + grid-template-columns: 1fr; + gap: var(--space-3xs); + border-top: 1px solid var(--border-primary); + padding: var(--space-xs) 0; } .param-form > div:first-of-type { - border-top: none; - padding-top: 0; + border-top: none; + padding-top: 0; } .param-form input[type="password"] { - width: 100%; - max-width: 380px; + width: 100%; + max-width: 380px; } .param-danger-zone { - border-color: var(--danger-border-muted); - margin-bottom: var(--space-m); + border-color: var(--danger-border-muted); + margin-bottom: var(--space-m); } .param-danger-zone legend { - color: var(--error); - font-size: var(--step-0); + color: var(--error); + font-size: var(--step-0); } .param-danger-zone p { - color: var(--text-secondary); - margin-bottom: var(--space-xs); + color: var(--text-secondary); + margin-bottom: var(--space-xs); } .param-danger-zone form { - margin-top: var(--space-xs); + margin-top: var(--space-xs); } /* ── Export zone (maintenance section) ───────────────────────────────── */ .param-export-zone { - margin-bottom: var(--space-m); + margin-bottom: var(--space-m); } .param-export-zone legend { - font-size: var(--step-0); + font-size: var(--step-0); } .param-export-zone p { - color: var(--text-secondary); - margin-bottom: var(--space-xs); + color: var(--text-secondary); + margin-bottom: var(--space-xs); } /* ── SMTP section ─────────────────────────────────────────────────────── */ .param-smtp-test { - margin-top: var(--space-m); + margin-top: var(--space-m); } .param-smtp-test-row { - display: flex; - align-items: flex-end; - gap: var(--space-s); - flex-wrap: wrap; + display: flex; + align-items: flex-end; + gap: var(--space-s); + flex-wrap: wrap; } .param-smtp-test-row > div { - flex: 1 1 260px; + flex: 1 1 260px; } .param-smtp-test-row label { - font-weight: 400; - margin-bottom: var(--space-2xs); - color: var(--text-secondary); + font-weight: 400; + margin-bottom: var(--space-2xs); + color: var(--text-secondary); } .param-smtp-test-row input[type="email"] { - width: 100%; - padding: var(--space-xs) var(--space-s); + width: 100%; + padding: var(--space-xs) var(--space-s); } .param-smtp-test-row input[type="email"]:focus { - outline: 2px solid var(--accent-primary); - outline-offset: 1px; + outline: 2px solid var(--accent-primary); + outline-offset: 1px; } .param-smtp-test-row > button { - white-space: nowrap; - flex-shrink: 0; + white-space: nowrap; + flex-shrink: 0; } .param-smtp-status { - display: flex; - align-items: center; - gap: var(--space-s); - margin: var(--space-xs) 0 var(--space-s); - color: var(--text-secondary); + display: flex; + align-items: center; + gap: var(--space-s); + margin: var(--space-xs) 0 var(--space-s); + color: var(--text-secondary); } .param-badge-ok { - color: var(--accent-green); - font-weight: 600; + color: var(--accent-green); + font-weight: 600; } .param-badge-warn { - color: var(--warning); - font-weight: 600; + color: var(--warning); + font-weight: 600; } .param-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); - gap: var(--space-s); + display: grid; + grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); + gap: var(--space-s); } .param-grid > .param-checkbox, .param-grid > .param-note { grid-column: 1 / -1; } .param-grid label { - display: flex; - flex-direction: column; - gap: var(--space-3xs); - color: var(--text-secondary); + display: flex; + flex-direction: column; + gap: var(--space-3xs); + color: var(--text-secondary); } .param-grid input[type="text"], .param-grid input[type="number"], .param-grid input[type="email"], .param-grid select { - width: 100%; + width: 100%; } /* SMTP field validation error state */ .param-grid input[aria-invalid="true"], .param-grid select[aria-invalid="true"] { - border-color: var(--search-error-border, #c0392b); + border-color: var(--search-error-border, #c0392b); } .param-field-error { - display: block; - font-size: var(--step--2); - color: var(--search-error-border, #c0392b); - margin-top: var(--space-3xs); - line-height: 1.3; + display: block; + font-size: var(--step--2); + color: var(--search-error-border, #c0392b); + margin-top: var(--space-3xs); + line-height: 1.3; } /* ── Settings page sections — legacy aliases (kept for any remaining use) ─ */ .admin-settings-section { - border: 1px solid var(--border-primary); - border-radius: var(--radius); - padding: var(--space-m) var(--space-l); - margin-bottom: var(--space-l); + border: 1px solid var(--border-primary); + border-radius: var(--radius); + padding: var(--space-m) var(--space-l); + margin-bottom: var(--space-l); } .admin-settings-section__title { - font-size: var(--step-0); - font-weight: 600; - letter-spacing: 0.07em; - text-transform: uppercase; - color: var(--text-secondary); - margin: 0 0 var(--space-m); - padding-bottom: var(--space-2xs); - border-bottom: 1px solid var(--border-primary); + font-size: var(--step-0); + font-weight: 600; + letter-spacing: 0.07em; + text-transform: uppercase; + color: var(--text-secondary); + margin: 0 0 var(--space-m); + padding-bottom: var(--space-2xs); + border-bottom: 1px solid var(--border-primary); } .admin-maintenance-status { - display: flex; - align-items: center; - justify-content: space-between; - gap: var(--space-s); - background: var(--bg-secondary); - border: 1px solid var(--border-primary); - border-radius: var(--radius); - padding: var(--space-xs) var(--space-m); - font-size: var(--step--1); + display: flex; + align-items: center; + justify-content: space-between; + gap: var(--space-s); + background: var(--bg-secondary); + border: 1px solid var(--border-primary); + border-radius: var(--radius); + padding: var(--space-xs) var(--space-m); + font-size: var(--step--1); } .admin-maintenance-status--active { - background: var(--warning-muted-bg); - border-color: var(--warning); + background: var(--warning-muted-bg); + border-color: var(--warning); } .admin-maintenance-status__msg { - margin: 0; + margin: 0; } .admin-maintenance-status form { - display: inline; - flex-shrink: 0; + display: inline; + flex-shrink: 0; } .admin-account-status { - border: 1px solid var(--border-primary); - border-radius: var(--radius); - padding: var(--space-s) var(--space-m); - margin-bottom: var(--space-l); - display: flex; - flex-direction: column; - gap: var(--space-xs); + border: 1px solid var(--border-primary); + border-radius: var(--radius); + padding: var(--space-s) var(--space-m); + margin-bottom: var(--space-l); + display: flex; + flex-direction: column; + gap: var(--space-xs); } .admin-account-status__row { - display: flex; - align-items: center; - gap: var(--space-xs); - font-size: var(--step--1); + display: flex; + align-items: center; + gap: var(--space-xs); + font-size: var(--step--1); } .admin-account-status__label { - color: var(--text-secondary); - min-width: 220px; + color: var(--text-secondary); + min-width: 220px; } .admin-account-status__code { - font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; - font-size: var(--step--2); - border: 1px solid var(--border-primary); - border-radius: var(--radius); - padding: var(--space-3xs) var(--space-3xs); - color: var(--text-secondary); - background: var(--bg-secondary); + font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; + font-size: var(--step--2); + border: 1px solid var(--border-primary); + border-radius: var(--radius); + padding: var(--space-3xs) var(--space-3xs); + color: var(--text-secondary); + background: var(--bg-secondary); } .admin-account-status__note { - font-size: var(--step--1); - color: var(--text-secondary); - margin: 0; + font-size: var(--step--1); + color: var(--text-secondary); + margin: 0; } .admin-danger-zone { - border: 1px solid var(--danger-border-muted); - border-radius: var(--radius); - padding: var(--space-m) var(--space-m); - display: flex; - align-items: center; - gap: var(--space-m); - flex-wrap: wrap; + border: 1px solid var(--danger-border-muted); + border-radius: var(--radius); + padding: var(--space-m) var(--space-m); + display: flex; + align-items: center; + gap: var(--space-m); + flex-wrap: wrap; } .admin-danger-zone__description { - flex: 1; - font-size: var(--step--1); + flex: 1; + font-size: var(--step--1); } .admin-settings-toggles { - display: flex; - flex-direction: column; - gap: var(--space-xs); - margin-bottom: var(--space-m); + display: flex; + flex-direction: column; + gap: var(--space-xs); + margin-bottom: var(--space-m); } .admin-toggle-row { - display: flex; - align-items: center; - justify-content: space-between; - gap: var(--space-m); - background: var(--bg-secondary); - border: 1px solid var(--border-primary); - border-radius: var(--radius); - padding: var(--space-xs) var(--space-m); - cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + gap: var(--space-m); + background: var(--bg-secondary); + border: 1px solid var(--border-primary); + border-radius: var(--radius); + padding: var(--space-xs) var(--space-m); + cursor: pointer; } .admin-toggle-row--disabled { - opacity: 0.6; + opacity: 0.6; } .admin-toggle-label { - display: flex; - flex-direction: column; - gap: 2px; + display: flex; + flex-direction: column; + gap: 2px; } .admin-toggle-label strong { - font-size: var(--step-0); + font-size: var(--step-0); } .admin-toggle-label small { - color: var(--text-secondary); - font-size: var(--step--2); + color: var(--text-secondary); + font-size: var(--step--2); } .admin-toggle { - appearance: none; - -webkit-appearance: none; - width: 40px; - height: 22px; - background: var(--border-primary); - border-radius: 11px; - position: relative; - cursor: pointer; - flex-shrink: 0; - transition: background 0.2s; + appearance: none; + -webkit-appearance: none; + width: 40px; + height: 22px; + background: var(--border-primary); + border-radius: 11px; + position: relative; + cursor: pointer; + flex-shrink: 0; + transition: background 0.2s; } .admin-toggle::after { - content: ""; - position: absolute; - top: 3px; - left: 3px; - width: 16px; - height: 16px; - border-radius: 50%; - background: #fff; - transition: transform 0.2s; + content: ""; + position: absolute; + top: 3px; + left: 3px; + width: 16px; + height: 16px; + border-radius: 50%; + background: #fff; + transition: transform 0.2s; } .admin-toggle:checked { - background: var(--accent-primary); + background: var(--accent-primary); } .admin-toggle:checked::after { - transform: translateX(18px); + transform: translateX(18px); } /* ── Cancel link ────────────────────────────────────────────────────────── */ .admin-cancel-link { - font-size: var(--step--1); - color: var(--text-secondary); - text-decoration: none; - font-weight: 400; + font-size: var(--step--1); + color: var(--text-secondary); + text-decoration: none; + font-weight: 400; } .admin-cancel-link:hover { - color: var(--accent-primary); + color: var(--accent-primary); } /* ── Pagination (admin list) ─────────────────────────────────────────────── */ .admin-body .pagination-wrap { - display: flex; - justify-content: center; - align-items: center; - gap: var(--space-2xs); - padding: var(--space-m) 0 var(--space-2xs); + display: flex; + justify-content: center; + align-items: center; + gap: var(--space-2xs); + padding: var(--space-m) 0 var(--space-2xs); } .admin-body .pagination-wrap ul { - display: flex; - gap: var(--space-3xs); - list-style: none; - margin: 0; - padding: 0; + display: flex; + gap: var(--space-3xs); + list-style: none; + margin: 0; + padding: 0; } .admin-body .pagination-btn { - display: inline-flex; - align-items: center; - justify-content: center; - min-width: 2.75rem; - min-height: 2.75rem; - padding: 0 var(--space-2xs); - border: 1px solid var(--border-secondary); - border-radius: var(--radius); - color: var(--text-primary); - font-size: var(--step--1); - font-weight: 400; - text-decoration: none; - transition: - border-color 0.15s, - color 0.15s; + display: inline-flex; + align-items: center; + justify-content: center; + min-width: 2.75rem; + min-height: 2.75rem; + padding: 0 var(--space-2xs); + border: 1px solid var(--border-secondary); + border-radius: var(--radius); + color: var(--text-primary); + font-size: var(--step--1); + font-weight: 400; + text-decoration: none; + transition: + border-color 0.15s, + color 0.15s; } .admin-body .pagination-btn:hover:not(.disabled) { - border-color: var(--accent-primary); - color: var(--accent-primary); + border-color: var(--accent-primary); + color: var(--accent-primary); } .admin-body .pagination-btn.disabled { - opacity: 0.3; - cursor: not-allowed; - pointer-events: none; + opacity: 0.3; + cursor: not-allowed; + pointer-events: none; } .admin-body .pagination-info { - font-size: var(--step--1); - color: var(--text-secondary); - padding: 0 var(--space-2xs); + font-size: var(--step--1); + color: var(--text-secondary); + padding: 0 var(--space-2xs); } .admin-body #editor { - height: 50vh; - border: 1px solid var(--border-primary); + height: 50vh; + border: 1px solid var(--border-primary); } /* ── Settings: formulaire toggles ──────────────────────────────────────────── */ .admin-settings-toggles { - display: flex; - flex-direction: column; - gap: var(--space-xs); - margin-bottom: var(--space-m); + display: flex; + flex-direction: column; + gap: var(--space-xs); + margin-bottom: var(--space-m); } .admin-toggle-row { - display: flex; - align-items: center; - justify-content: space-between; - gap: var(--space-m); - background: var(--bg-secondary); - border: 1px solid var(--border-primary); - border-radius: var(--radius); - padding: var(--space-xs) var(--space-m); - cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + gap: var(--space-m); + background: var(--bg-secondary); + border: 1px solid var(--border-primary); + border-radius: var(--radius); + padding: var(--space-xs) var(--space-m); + cursor: pointer; } .admin-toggle-row--disabled { - opacity: 0.6; + opacity: 0.6; } .admin-toggle-label { - display: flex; - flex-direction: column; - gap: 2px; + display: flex; + flex-direction: column; + gap: 2px; } .admin-toggle-label strong { - font-size: var(--step-0); + font-size: var(--step-0); } .admin-toggle-label small { - color: var(--text-secondary); - font-size: var(--step--2); + color: var(--text-secondary); + font-size: var(--step--2); } /* Native checkbox styled as toggle pill */ .admin-toggle { - appearance: none; - -webkit-appearance: none; - width: 40px; - height: 22px; - background: var(--border-primary); - border-radius: 11px; - position: relative; - cursor: pointer; - flex-shrink: 0; - transition: background 0.2s; + appearance: none; + -webkit-appearance: none; + width: 40px; + height: 22px; + background: var(--border-primary); + border-radius: 11px; + position: relative; + cursor: pointer; + flex-shrink: 0; + transition: background 0.2s; } .admin-toggle::after { - content: ""; - position: absolute; - top: 3px; - left: 3px; - width: 16px; - height: 16px; - border-radius: 50%; - background: #fff; - transition: transform 0.2s; + content: ""; + position: absolute; + top: 3px; + left: 3px; + width: 16px; + height: 16px; + border-radius: 50%; + background: #fff; + transition: transform 0.2s; } .admin-toggle:checked { - background: var(--accent-primary); + background: var(--accent-primary); } .admin-toggle:checked::after { - transform: translateX(18px); + transform: translateX(18px); } /* ── Form group, student mode, thanks page → see form-base.css ──────────── */ @@ -1941,8 +1941,8 @@ th.admin-ap-col { /* ── Utility ─────────────────────────────────────────────────────────────── */ .muted { - color: var(--text-secondary); - font-style: italic; + color: var(--text-secondary); + font-style: italic; } /* ═══════════════════════════════════════════════════════════════════════════ @@ -1950,674 +1950,674 @@ th.admin-ap-col { ═══════════════════════════════════════════════════════════════════════════ */ .fhb-hint { - color: var(--text-secondary); - font-size: var(--step--1); - margin-bottom: var(--space-m); + color: var(--text-secondary); + font-size: var(--step--1); + margin-bottom: var(--space-m); } /* ── Structure container ───────────────────────────────────────────────────── */ .fhb-structure { - display: grid; - grid-template-columns: 1fr; - gap: var(--space-xs); - max-width: 100%; - margin-top: var(--space-m); + display: grid; + grid-template-columns: 1fr; + gap: var(--space-xs); + max-width: 100%; + margin-top: var(--space-m); } /* ── Fieldset cards (static reference) ─────────────────────────────────────── */ .fhb-fieldset-card { - border: 1px solid var(--border-primary); - border-radius: var(--radius); - padding: var(--space-xs) var(--space-s); - background: var(--bg-secondary); + border: 1px solid var(--border-primary); + border-radius: var(--radius); + padding: var(--space-xs) var(--space-s); + background: var(--bg-secondary); } .fhb-fieldset-card-legend { - font-size: var(--step-0); - font-weight: 600; - color: var(--text-primary); - margin-bottom: var(--space-3xs); - padding-bottom: var(--space-3xs); - border-bottom: 1px solid var(--border-primary); + font-size: var(--step-0); + font-weight: 600; + color: var(--text-primary); + margin-bottom: var(--space-3xs); + padding-bottom: var(--space-3xs); + border-bottom: 1px solid var(--border-primary); } .fhb-fieldset-card-inputs { - margin: 0; - padding: 0 0 0 var(--space-s); - list-style: none; - display: flex; - flex-wrap: wrap; - gap: var(--space-3xs) var(--space-m); + margin: 0; + padding: 0 0 0 var(--space-s); + list-style: none; + display: flex; + flex-wrap: wrap; + gap: var(--space-3xs) var(--space-m); } .fhb-fieldset-card-inputs li { - font-size: var(--step--2); - color: var(--text-secondary); - line-height: 1.6; + font-size: var(--step--2); + color: var(--text-secondary); + line-height: 1.6; } .fhb-fieldset-card-inputs li::before { - content: "· "; - color: var(--text-tertiary); + content: "· "; + color: var(--text-tertiary); } /* ── Help block wrapper ────────────────────────────────────────────────────── */ .fhb-block-wrapper { - /* container for the fhb-inline, one per help block */ + /* container for the fhb-inline, one per help block */ } /* ── Inline help block (collapsed state) ───────────────────────────────────── */ .fhb-inline { - display: grid; - grid-template-columns: 1fr auto; - gap: var(--space-s); - align-items: center; - border: 1px solid var(--border-primary); - border-left: 4px solid var(--accent-primary); - border-radius: var(--radius); - padding: var(--space-xs) var(--space-s); - background: var(--bg-primary); - transition: opacity 0.15s; + display: grid; + grid-template-columns: 1fr auto; + gap: var(--space-s); + align-items: center; + border: 1px solid var(--border-primary); + border-left: 4px solid var(--accent-primary); + border-radius: var(--radius); + padding: var(--space-xs) var(--space-s); + background: var(--bg-primary); + transition: opacity 0.15s; } .fhb-inline:hover { - opacity: 0.85; + opacity: 0.85; } /* Disabled state — one line only, content hidden */ .fhb-inline--disabled { - border-left-color: var(--text-tertiary); - opacity: 0.55; + border-left-color: var(--text-tertiary); + opacity: 0.55; } .fhb-inline--disabled:hover { - opacity: 0.75; + opacity: 0.75; } .fhb-inline--disabled .fhb-md-preview, .fhb-inline--disabled .fhb-inline-empty { - display: none; + display: none; } /* Editing state */ .fhb-inline--editing { - display: grid; - grid-template-columns: 1fr; - grid-template-rows: auto 1fr auto; - border-color: var(--accent-primary); - box-shadow: 0 4px 16px rgba(149, 87, 181, 0.15); - padding: var(--space-s); - min-height: 50vh; + display: grid; + grid-template-columns: 1fr; + grid-template-rows: auto 1fr auto; + border-color: var(--accent-primary); + box-shadow: 0 4px 16px rgba(149, 87, 181, 0.15); + padding: var(--space-s); + min-height: 50vh; } .fhb-inline--editing .fhb-inline-form { - display: grid; - grid-template-columns: 1fr; - grid-template-rows: auto auto 1fr auto; - height: 100%; + display: grid; + grid-template-columns: 1fr; + grid-template-rows: auto auto 1fr auto; + height: 100%; } /* ── Left side: name + content ─────────────────────────────────────────────── */ .fhb-inline-body { - min-width: 0; + min-width: 0; } .fhb-inline-name { - font-size: var(--step--1); - font-weight: 600; - color: var(--accent-secondary); - margin-bottom: var(--space-3xs); + font-size: var(--step--1); + font-weight: 600; + color: var(--accent-secondary); + margin-bottom: var(--space-3xs); } /* ── Small rendered Markdown preview ──────────────────────────────────────── */ .fhb-md-preview { - font-size: var(--step--2); - color: var(--text-secondary); - line-height: 1.45; - max-height: 6em; - overflow: hidden; + font-size: var(--step--2); + color: var(--text-secondary); + line-height: 1.45; + max-height: 6em; + overflow: hidden; } .fhb-md-preview p { - margin: 0; + margin: 0; } .fhb-md-preview p + p { - margin-top: var(--space-3xs); + margin-top: var(--space-3xs); } .fhb-md-preview ul, .fhb-md-preview ol { - margin: var(--space-3xs) 0; - padding-left: var(--space-s); + margin: var(--space-3xs) 0; + padding-left: var(--space-s); } .fhb-md-preview li { - margin-bottom: 0; + margin-bottom: 0; } .fhb-md-preview strong { - font-weight: 600; + font-weight: 600; } .fhb-md-preview em { - font-style: italic; + font-style: italic; } .fhb-md-preview code { - font-size: 0.9em; - background: var(--bg-secondary); - padding: 0 var(--space-4xs); - border-radius: 3px; + font-size: 0.9em; + background: var(--bg-secondary); + padding: 0 var(--space-4xs); + border-radius: 3px; } .fhb-inline-empty { - font-size: var(--step--2); - color: var(--text-tertiary); - font-style: italic; + font-size: var(--step--2); + color: var(--text-tertiary); + font-style: italic; } /* ── Right side: edit button + live dot ───────────────────────────────────── */ .fhb-inline-actions { - display: flex; - flex-direction: column; - align-items: flex-end; - gap: var(--space-2xs); - flex-shrink: 0; + display: flex; + flex-direction: column; + align-items: flex-end; + gap: var(--space-2xs); + flex-shrink: 0; } .fhb-toggle-form { - margin: 0; - line-height: 0; + margin: 0; + line-height: 0; } /* Live dot — green when on, red when off */ .fhb-dot { - display: block; - width: 18px; - height: 18px; - border-radius: 50%; - border: none; - cursor: pointer; - padding: 0; - transition: opacity 0.15s; + display: block; + width: 18px; + height: 18px; + border-radius: 50%; + border: none; + cursor: pointer; + padding: 0; + transition: opacity 0.15s; } .fhb-dot:hover { - opacity: 0.7; + opacity: 0.7; } .fhb-dot--on { - background: #2d6a4f; + background: #2d6a4f; } .fhb-dot--off { - background: #c0392b; + background: #c0392b; } /* ── Editor form ──────────────────────────────────────────────────────────── */ .fhb-edit-name-row { - margin-bottom: var(--space-xs); + margin-bottom: var(--space-xs); } .fhb-edit-label { - display: block; - font-size: var(--step--2); - font-weight: 400; - color: var(--text-primary); - margin-bottom: var(--space-3xs); + display: block; + font-size: var(--step--2); + font-weight: 400; + color: var(--text-primary); + margin-bottom: var(--space-3xs); } .fhb-name-input { - width: 100%; - max-width: 400px; + width: 100%; + max-width: 400px; } .fhb-name-input:focus { - outline: none; - border-color: var(--accent-primary); - box-shadow: 0 0 0 2px var(--accent-muted); + outline: none; + border-color: var(--accent-primary); + box-shadow: 0 0 0 2px var(--accent-muted); } .fhb-overtype-editor .--type-container { - border-radius: var(--radius); + border-radius: var(--radius); } .fhb-edit-buttons { - display: grid; - grid-auto-flow: column; - grid-auto-columns: max-content; - gap: var(--space-xs); - margin-top: var(--space-xs); + display: grid; + grid-auto-flow: column; + grid-auto-columns: max-content; + gap: var(--space-xs); + margin-top: var(--space-xs); } .fhb-inline-form { - margin-top: var(--space-xs); + margin-top: var(--space-xs); } /* ── Mobile: admin unavailable ─────────────────────────────────────────── */ .admin-mobile-block { - display: none; + display: none; } @media screen and (max-width: 640px) { - .admin-body header { - display: none; - } + .admin-body header { + display: none; + } - .admin-body main { - display: none; - } + .admin-body main { + display: none; + } - .admin-mobile-block { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - height: 100vh; - padding: var(--space-l); - text-align: center; - color: var(--text-secondary); - } + .admin-mobile-block { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 100vh; + padding: var(--space-l); + text-align: center; + color: var(--text-secondary); + } - .admin-mobile-block svg { - width: 48px; - height: 48px; - fill: var(--text-tertiary); - margin-bottom: var(--space-m); - } + .admin-mobile-block svg { + width: 48px; + height: 48px; + fill: var(--text-tertiary); + margin-bottom: var(--space-m); + } - .admin-mobile-block h2 { - font-size: var(--step-0); - font-weight: 600; - color: var(--text-primary); - margin: 0 0 var(--space-xs); - } + .admin-mobile-block h2 { + font-size: var(--step-0); + font-weight: 600; + color: var(--text-primary); + margin: 0 0 var(--space-xs); + } - .admin-mobile-block p { - font-size: var(--step--1); - margin: 0; - } + .admin-mobile-block p { + font-size: var(--step--1); + margin: 0; + } } /* ── Active search loading indicator ───────────────────────────────────── */ .admin-search-indicator { - display: block; - height: 2px; - background: var(--accent-primary); - opacity: 0; - transition: opacity 0.15s; - pointer-events: none; - margin-top: 0; + display: block; + height: 2px; + background: var(--accent-primary); + opacity: 0; + transition: opacity 0.15s; + pointer-events: none; + margin-top: 0; } .admin-search-indicator.htmx-request { - opacity: 1; - animation: admin-search-progress 1.2s ease-in-out infinite; + opacity: 1; + animation: admin-search-progress 1.2s ease-in-out infinite; } @keyframes admin-search-progress { - 0% { - transform: scaleX(0); - transform-origin: left; - } - 50% { - transform: scaleX(1); - transform-origin: left; - } - 50.01% { - transform: scaleX(1); - transform-origin: right; - } - 100% { - transform: scaleX(0); - transform-origin: right; - } + 0% { + transform: scaleX(0); + transform-origin: left; + } + 50% { + transform: scaleX(1); + transform-origin: left; + } + 50.01% { + transform: scaleX(1); + transform-origin: right; + } + 100% { + transform: scaleX(0); + transform-origin: right; + } } /* ── Sidebar TOC (matches public .page-content grid layout) ────────────── */ .admin-main--toc { - display: grid; - grid-template-columns: 180px 1fr; - gap: var(--space-2xl); - align-items: start; - padding: var(--space-xl) var(--space-m) var(--space-2xl); + display: grid; + grid-template-columns: 180px 1fr; + gap: var(--space-2xl); + align-items: start; + padding: var(--space-xl) var(--space-m) var(--space-2xl); } /* Desktop: article in second column */ @media (min-width: 768px) { - .admin-main--toc > article { - grid-column: 2; - min-width: 0; - max-width: 100%; - } + .admin-main--toc > article { + grid-column: 2; + min-width: 0; + max-width: 100%; + } } /* Mobile: single column */ @media (max-width: 767px) { - .admin-main--toc { - grid-template-columns: 1fr; - gap: var(--space-l); - padding: var(--space-m) var(--space-s) var(--space-xl); - } + .admin-main--toc { + grid-template-columns: 1fr; + gap: var(--space-l); + padding: var(--space-m) var(--space-s) var(--space-xl); + } - .admin-main--toc > article { - grid-column: 1; - } + .admin-main--toc > article { + grid-column: 1; + } } /* Align first child of article with TOC heading (same as public) */ .admin-main--toc > article > :first-child { - margin-top: 2.2rem; + margin-top: 2.2rem; } .admin-main--toc > article > section { - margin-bottom: var(--space-xl); - border: none; - border-radius: 0; - padding: 0; + margin-bottom: var(--space-xl); + border: none; + border-radius: 0; + padding: 0; } .admin-main--toc > article > section > fieldset { - margin-bottom: var(--space-m); + margin-bottom: var(--space-m); } /* Cleanup page: sections are loaded asynchronously into a wrapper div, so give them the same top-level spacing as direct article sections. */ #tmp-cleanup-stats-wrapper > section[aria-labelledby] { - margin-bottom: var(--space-xl); - border: none; - border-radius: 0; - padding: 0; + margin-bottom: var(--space-xl); + border: none; + border-radius: 0; + padding: 0; } /* Admin TOC: same
as public pages, positioned sticky */ #admin-toc .toc-list { - padding-top: var(--space-2xs); + padding-top: var(--space-2xs); } #admin-toc .toc-list a { - font-size: var(--step--1); + font-size: var(--step--1); } /* ── Lazy-load transition ─────────────────────────────────────────────────── */ .htmx-settling img { - opacity: 0; + opacity: 0; } .htmx-indicator img { - transition: opacity 300ms ease-in; + transition: opacity 300ms ease-in; } /* ── Récapitulatif sections ───────────────────────────────── */ .admin-main--recap > fieldset { - margin-bottom: var(--space-l); + margin-bottom: var(--space-l); } .admin-main--recap > fieldset:last-of-type { - margin-bottom: 0; + margin-bottom: 0; } .recap-synopsis, .recap-long-text { - max-width: 70ch; - line-height: 1.6; + max-width: 70ch; + line-height: 1.6; } /* Two-column definition lists */ .recap-dl { - display: grid; - grid-template-columns: auto 1fr; - gap: var(--space-2xs) var(--space-m); - margin: 0; + display: grid; + grid-template-columns: auto 1fr; + gap: var(--space-2xs) var(--space-m); + margin: 0; } .recap-dl dt { - font-weight: 600; - color: var(--text-secondary); - font-size: var(--step--1); - white-space: nowrap; + font-weight: 600; + color: var(--text-secondary); + font-size: var(--step--1); + white-space: nowrap; } .recap-dl dd { - margin: 0 0 var(--space-xs) 0; - color: var(--text-primary); - font-size: var(--step--1); + margin: 0 0 var(--space-xs) 0; + color: var(--text-primary); + font-size: var(--step--1); } .recap-dl dd:last-of-type { - margin-bottom: 0; + margin-bottom: 0; } /* ── Apropos contacts grid ──────────────────────────────────────────────── */ .apropos-entry { - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: var(--space-s); - margin-bottom: var(--space-xs); + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: var(--space-s); + margin-bottom: var(--space-xs); } .apropos-entry > div { - display: flex; - flex-direction: column; + display: flex; + flex-direction: column; } .apropos-entry label { - font-size: var(--step--1); - margin-bottom: var(--space-3xs); + font-size: var(--step--1); + margin-bottom: var(--space-3xs); } .apropos-entry input { - width: 100%; - box-sizing: border-box; + width: 100%; + box-sizing: border-box; } /* ── Sidebar links editor ──────────────────────────────────────────────── */ .sidebar-link-row { - display: flex; - align-items: flex-start; - gap: var(--space-xs); - margin-bottom: var(--space-s); + display: flex; + align-items: flex-start; + gap: var(--space-xs); + margin-bottom: var(--space-s); } .sidebar-link-fields { - display: grid; - grid-template-columns: 1fr 2fr; - gap: var(--space-s); - flex: 1; + display: grid; + grid-template-columns: 1fr 2fr; + gap: var(--space-s); + flex: 1; } .sidebar-link-fields > div { - display: flex; - flex-direction: column; + display: flex; + flex-direction: column; } .sidebar-link-fields label { - font-size: var(--step--1); - margin-bottom: var(--space-3xs); + font-size: var(--step--1); + margin-bottom: var(--space-3xs); } .sidebar-link-fields input { - width: 100%; - box-sizing: border-box; + width: 100%; + box-sizing: border-box; } .sidebar-link-row .admin-icon-btn--delete { - margin-top: calc(var(--step--1) + var(--space-3xs) + 0.3em); - flex-shrink: 0; + margin-top: calc(var(--step--1) + var(--space-3xs) + 0.3em); + flex-shrink: 0; } /* ── Auto-save status indicator ────────────────────────────────────────── */ .autosave-status { - font-size: var(--step--2); - min-height: 1.5em; - margin-top: var(--space-2xs); - color: var(--text-tertiary); - transition: color 0.2s; + font-size: var(--step--2); + min-height: 1.5em; + margin-top: var(--space-2xs); + color: var(--text-tertiary); + transition: color 0.2s; } .autosave-status--saving { - color: var(--accent-yellow); - font-style: italic; + color: var(--accent-yellow); + font-style: italic; } .autosave-status--saved { - color: var(--accent-green); + color: var(--accent-green); } .autosave-status--error { - color: var(--error); - font-weight: 500; + color: var(--error); + font-weight: 500; } /* ── Markdown Cheatsheet Dialog ──────────────────────────────────────── */ .md-cheatsheet-dialog { - border: 1px solid var(--border); - border-radius: var(--radius-m, 8px); - padding: 0 0 var(--space-m); - max-width: 640px; - width: 90vw; - box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18); + border: 1px solid var(--border); + border-radius: var(--radius-m, 8px); + padding: 0 0 var(--space-m); + max-width: 640px; + width: 90vw; + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18); } .md-cheatsheet-dialog::backdrop { - background: rgba(0, 0, 0, 0.35); + background: rgba(0, 0, 0, 0.35); } .md-cheatsheet-header { - display: flex; - justify-content: space-between; - align-items: center; - padding: var(--space-s) var(--space-m); - border-bottom: 1px solid var(--border); + display: flex; + justify-content: space-between; + align-items: center; + padding: var(--space-s) var(--space-m); + border-bottom: 1px solid var(--border); } .md-cheatsheet-header h2 { - margin: 0; - font-size: var(--step-0); + margin: 0; + font-size: var(--step-0); } .md-cheatsheet-table { - width: 100%; - border-collapse: collapse; - font-size: var(--step--1); + width: 100%; + border-collapse: collapse; + font-size: var(--step--1); } .md-cheatsheet-table th { - text-align: left; - padding: var(--space-2xs) var(--space-s); - background: var(--surface2); - font-weight: 600; - border-bottom: 2px solid var(--border); + text-align: left; + padding: var(--space-2xs) var(--space-s); + background: var(--surface2); + font-weight: 600; + border-bottom: 2px solid var(--border); } .md-cheatsheet-table td { - padding: var(--space-2xs) var(--space-s); - border-bottom: 1px solid var(--border); - vertical-align: top; + padding: var(--space-2xs) var(--space-s); + border-bottom: 1px solid var(--border); + vertical-align: top; } .md-cheatsheet-syntax { - font-family: var(--font-mono, monospace); - white-space: nowrap; + font-family: var(--font-mono, monospace); + white-space: nowrap; } .md-cheatsheet-syntax code { - background: var(--surface2); - padding: 0.1em 0.35em; - border-radius: 3px; - font-size: inherit; + background: var(--surface2); + padding: 0.1em 0.35em; + border-radius: 3px; + font-size: inherit; } .md-cheatsheet-render { - min-width: 140px; + min-width: 140px; } .md-cheatsheet-render h1, .md-cheatsheet-render h2, .md-cheatsheet-render h3 { - margin: 0; - line-height: 1.3; + margin: 0; + line-height: 1.3; } .md-cheatsheet-render h1 { - font-size: var(--step-2); + font-size: var(--step-2); } .md-cheatsheet-render h2 { - font-size: var(--step-1); + font-size: var(--step-1); } .md-cheatsheet-render h3 { - font-size: var(--step-0); + font-size: var(--step-0); } .md-cheatsheet-render blockquote { - margin: 0; - padding-left: var(--space-2xs); - border-left: 3px solid var(--border); - color: var(--text-secondary); + margin: 0; + padding-left: var(--space-2xs); + border-left: 3px solid var(--border); + color: var(--text-secondary); } .md-cheatsheet-render ul, .md-cheatsheet-render ol { - margin: 0; - padding-left: var(--space-m); + margin: 0; + padding-left: var(--space-m); } .md-cheatsheet-render hr { - margin: var(--space-3xs) 0; - border: 0; - border-top: 1px solid var(--border); + margin: var(--space-3xs) 0; + border: 0; + border-top: 1px solid var(--border); } .md-cheatsheet-link { - color: var(--accent-blue, var(--link)); + color: var(--accent-blue, var(--link)); } .md-cheatsheet-img { - opacity: 0.7; + opacity: 0.7; } .md-cheatsheet-note { - color: var(--text-tertiary); - font-size: var(--step--2); + color: var(--text-tertiary); + font-size: var(--step--2); } .md-cheatsheet-separator td { - padding: var(--space-3xs) 0; - border: 0; + padding: var(--space-3xs) 0; + border: 0; } /* ── CSV import file input (admin list page) ──────────────────────────── */ .admin-file-input { - display: flex; - flex-direction: column; - gap: var(--space-3xs); + display: flex; + flex-direction: column; + gap: var(--space-3xs); } /* FilePond drop-zone border (replaces the raw input border from form-base.css) */ .admin-file-input .filepond--root { - border: 1px dashed var(--border-primary, #ccc); - border-radius: var(--radius, 8px); - background: var(--bg-elevated, #fafafa); + border: 1px dashed var(--border-primary, #ccc); + border-radius: var(--radius, 8px); + background: var(--bg-elevated, #fafafa); } .admin-file-input .filepond--root:hover { - border-color: var(--accent-primary, #5b2d8e); + border-color: var(--accent-primary, #5b2d8e); } .admin-file-hint { - display: block; - margin-top: var(--space-2xs); + display: block; + margin-top: var(--space-2xs); } diff --git a/app/public/assets/css/base.css b/app/public/assets/css/base.css index 641acf7..0fb444d 100644 --- a/app/public/assets/css/base.css +++ b/app/public/assets/css/base.css @@ -7,75 +7,84 @@ /* Full-height flex layout: header → main → (optional footer) */ html, body { - height: 100%; - overflow: hidden; + height: 100%; + overflow: hidden; } /* ── Discreet scrollbars (WebKit / Blink / Firefox) ──────────────── */ /* CSS custom properties defined in colors.css: --scrollbar-thumb, --scrollbar-thumb-hover, --scrollbar-track, --scrollbar-corner */ ::-webkit-scrollbar { - width: var(--scrollbar-width, 5px); - height: var(--scrollbar-width, 5px); + width: var(--scrollbar-width, 5px); + height: var(--scrollbar-width, 5px); +} +::-webkit-scrollbar-track { + background: var(--scrollbar-track); +} +::-webkit-scrollbar-thumb { + background: var(--scrollbar-thumb); + border-radius: 3px; +} +::-webkit-scrollbar-thumb:hover { + background: var(--scrollbar-thumb-hover); +} +::-webkit-scrollbar-corner { + background: var(--scrollbar-corner); } -::-webkit-scrollbar-track { background: var(--scrollbar-track); } -::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; } -::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); } -::-webkit-scrollbar-corner { background: var(--scrollbar-corner); } html { - scrollbar-width: thin; - scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); - scrollbar-gutter: stable; + scrollbar-width: thin; + scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); + scrollbar-gutter: stable; } body { - font-family: var(--font-body); - font-weight: 300; - color: var(--text-primary); - background: linear-gradient( - 180deg, - rgba(0, 0, 0, 0) 85%, - rgba(149, 87, 181, 0.8) 100% - ); - display: flex; - flex-direction: column; + font-family: var(--font-body); + font-weight: 300; + color: var(--text-primary); + background: linear-gradient( + 180deg, + rgba(0, 0, 0, 0) 85%, + rgba(149, 87, 181, 0.8) 100% + ); + display: flex; + flex-direction: column; } main { - flex: 1; - min-height: 0; - overflow-wrap: anywhere; + flex: 1; + min-height: 0; + overflow-wrap: anywhere; } main * { - overflow-wrap: anywhere; - word-break: break-word; + overflow-wrap: anywhere; + word-break: break-word; } /* Global heading scale — used by admin + public pages */ h1 { - font-size: var(--step-4); + font-size: var(--step-4); } h2 { - font-size: var(--step-3); + font-size: var(--step-3); } h3 { - font-size: var(--step-2); + font-size: var(--step-2); } h4 { - font-size: var(--step-1); + font-size: var(--step-1); } h5 { - font-size: var(--step--1); + font-size: var(--step--1); } h6 { - font-size: var(--step--2); + font-size: var(--step--2); } :where(h1, h2, h3, h4, h5, h6) { - font-family: var(--font-display); - font-weight: 400; - margin: 0 0 var(--space-m) 0; - line-height: 1.15; + font-family: var(--font-display); + font-weight: 400; + margin: 0 0 var(--space-m) 0; + line-height: 1.15; } diff --git a/app/public/assets/css/components/buttons.css b/app/public/assets/css/components/buttons.css index 33cc8bc..b5e5ca4 100644 --- a/app/public/assets/css/components/buttons.css +++ b/app/public/assets/css/components/buttons.css @@ -205,7 +205,7 @@ /* Small arrow below the bubble pointing at the button */ .btn[data-tip]::before { - content: ''; + content: ""; position: absolute; left: 50%; bottom: calc(100% + 4px); diff --git a/app/public/assets/css/components/header.css b/app/public/assets/css/components/header.css index e401f3b..ec80437 100644 --- a/app/public/assets/css/components/header.css +++ b/app/public/assets/css/components/header.css @@ -6,82 +6,82 @@ /* ── Header bar ─────────────────────────────────────────────────────── */ header { - vertical-align: center; - flex-shrink: 0; - background: linear-gradient( - 0deg, - rgba(192, 93, 225, 1) 0%, - rgba(51, 191, 135, 1) 66%, - rgba(60, 133, 108, 1) 100% - ); + vertical-align: center; + flex-shrink: 0; + background: linear-gradient( + 0deg, + rgba(192, 93, 225, 1) 0%, + rgba(51, 191, 135, 1) 66%, + rgba(60, 133, 108, 1) 100% + ); } /* ── Navigation ────────────────────────────────────────────────────── */ header nav { - padding: var(--space-s) var(--space-s); - display: flex; - align-items: center; - justify-content: space-between; - font-size: var(--step-0); + padding: var(--space-s) var(--space-s); + display: flex; + align-items: center; + justify-content: space-between; + font-size: var(--step-0); } header nav ul { - display: flex; - gap: var(--space-l); - align-items: center; - list-style: none; - margin: 0; - padding: 0; + display: flex; + gap: var(--space-l); + align-items: center; + list-style: none; + margin: 0; + padding: 0; } header nav ul a { - font-family: var(--font-display); - font-size: var(--step--1); - letter-spacing: 0.12em; - text-transform: uppercase; - color: var(--accent-foreground); - text-decoration: none; - padding: var(--space-3xs) var(--space-xs); - text-shadow: - 0 0 16px var(--header-shadow-strong), - 0 0 32px var(--header-shadow-soft); - transition: opacity 0.15s; + font-family: var(--font-display); + font-size: var(--step--1); + letter-spacing: 0.12em; + text-transform: uppercase; + color: var(--accent-foreground); + text-decoration: none; + padding: var(--space-3xs) var(--space-xs); + text-shadow: + 0 0 16px var(--header-shadow-strong), + 0 0 32px var(--header-shadow-soft); + transition: opacity 0.15s; } header nav ul a:hover { - color: var(--accent-primary); + color: var(--accent-primary); } header nav ul a[aria-current="page"] { - color: var(--accent-primary); - border-radius: 0; - border-bottom: 2px solid currentColor; - padding-bottom: 1px; + color: var(--accent-primary); + border-radius: 0; + border-bottom: 2px solid currentColor; + padding-bottom: 1px; } /* ── Logo ───────────────────────────────────────────────────────────── */ .nav-logo { - text-decoration: none; + text-decoration: none; } .nav-left-links, .nav-right-links { - display: flex; - gap: var(--space-l); - align-items: center; - list-style: none; - margin: 0; - padding: 0; + display: flex; + gap: var(--space-l); + align-items: center; + list-style: none; + margin: 0; + padding: 0; } .nav-top-row { - display: contents; + display: contents; } .nav-mobile-links { - display: none; + display: none; } /* ── Hamburger menu (pure CSS, checkbox trick) ──────────────────────── */ @@ -95,119 +95,132 @@ header nav ul a[aria-current="page"] { ul.nav-mobile-links ← full dropdown (hidden by default) */ .menu-btn { - position: absolute; - top: -9999px; - left: -9999px; + position: absolute; + top: -9999px; + left: -9999px; } .menu-icon { - display: none; - cursor: pointer; - padding: var(--space-2xs) var(--space-s); - align-items: center; - justify-content: center; + display: none; + cursor: pointer; + padding: var(--space-2xs) var(--space-s); + align-items: center; + justify-content: center; } /* Middle bar of the burger icon */ .navicon { - background: var(--accent-foreground); - display: block; - height: 2px; - width: 24px; - position: relative; - transition: all 0.3s ease-out; + background: var(--accent-foreground); + display: block; + height: 2px; + width: 24px; + position: relative; + transition: all 0.3s ease-out; } .navicon::before, .navicon::after { - content: ""; - background: var(--accent-foreground); - display: block; - height: 2px; - width: 100%; - position: absolute; - transition: all 0.3s ease-out; + content: ""; + background: var(--accent-foreground); + display: block; + height: 2px; + width: 100%; + position: absolute; + transition: all 0.3s ease-out; } .navicon::before { - top: -7px; + top: -7px; } .navicon::after { - bottom: -7px; + bottom: -7px; } /* ── Mobile (≤ 640px) ───────────────────────────────────────────────── */ @media screen and (max-width: 640px) { - header nav[aria-label="Navigation principale"] { - display: flex; - flex-direction: column; - align-items: stretch; - padding: 0; - } + header nav[aria-label="Navigation principale"] { + display: flex; + flex-direction: column; + align-items: stretch; + padding: 0; + } - header nav[aria-label="Navigation principale"] .nav-top-row { - display: flex; - align-items: center; - justify-content: space-between; - padding: var(--space-s); - } + header nav[aria-label="Navigation principale"] .nav-top-row { + display: flex; + align-items: center; + justify-content: space-between; + padding: var(--space-s); + } - header nav[aria-label="Navigation principale"] .nav-right-links { - display: none; - } + header nav[aria-label="Navigation principale"] .nav-right-links { + display: none; + } - header nav[aria-label="Navigation principale"] .nav-left-links { - display: flex; - gap: 0; - } + header nav[aria-label="Navigation principale"] .nav-left-links { + display: flex; + gap: 0; + } - header nav[aria-label="Navigation principale"] .nav-left-links li:not(:first-child) { - display: none; - } + header + nav[aria-label="Navigation principale"] + .nav-left-links + li:not(:first-child) { + display: none; + } - .menu-icon { - display: flex; - } + .menu-icon { + display: flex; + } - header nav[aria-label="Navigation principale"] .nav-mobile-links { - display: block; - list-style: none; - margin: 0; - padding: 0; - max-height: 0; - overflow: hidden; - transition: max-height 0.2s ease-out; - } + header nav[aria-label="Navigation principale"] .nav-mobile-links { + display: block; + list-style: none; + margin: 0; + padding: 0; + max-height: 0; + overflow: hidden; + transition: max-height 0.2s ease-out; + } - .menu-btn:checked ~ nav[aria-label="Navigation principale"] .nav-mobile-links { - max-height: 300px; - } + .menu-btn:checked + ~ nav[aria-label="Navigation principale"] + .nav-mobile-links { + max-height: 300px; + } - header nav[aria-label="Navigation principale"] .nav-mobile-links li { - border-top: 1px solid var(--header-nav-active-border); - text-align: left; - } + header nav[aria-label="Navigation principale"] .nav-mobile-links li { + border-top: 1px solid var(--header-nav-active-border); + text-align: left; + } - header nav[aria-label="Navigation principale"] .nav-mobile-links li a { - display: block; - width: 100%; - padding: var(--space-s) var(--space-s); - text-align: left; - } + header nav[aria-label="Navigation principale"] .nav-mobile-links li a { + display: block; + width: 100%; + padding: var(--space-s) var(--space-s); + text-align: left; + } - /* Animate burger → X */ - .menu-btn:checked ~ nav[aria-label="Navigation principale"] .menu-icon .navicon { - background: transparent; - } + /* Animate burger → X */ + .menu-btn:checked ~ nav[aria-label="Navigation principale"] + .menu-icon + .navicon { + background: transparent; + } - .menu-btn:checked ~ nav[aria-label="Navigation principale"] .menu-icon .navicon::before { - transform: rotate(-45deg); - top: 0; - } + .menu-btn:checked + ~ nav[aria-label="Navigation principale"] + .menu-icon + .navicon::before { + transform: rotate(-45deg); + top: 0; + } - .menu-btn:checked ~ nav[aria-label="Navigation principale"] .menu-icon .navicon::after { - transform: rotate(45deg); - bottom: 0; - } + .menu-btn:checked + ~ nav[aria-label="Navigation principale"] + .menu-icon + .navicon::after { + transform: rotate(45deg); + bottom: 0; + } } diff --git a/app/public/assets/css/components/toc.css b/app/public/assets/css/components/toc.css index afbb770..0982ca6 100644 --- a/app/public/assets/css/components/toc.css +++ b/app/public/assets/css/components/toc.css @@ -39,11 +39,19 @@ } /* Indent sub-headings in TOC */ -.toc-list .toc-level-2 { padding-left: var(--space-s); } -.toc-list .toc-level-3 { padding-left: var(--space-m); } +.toc-list .toc-level-2 { + padding-left: var(--space-s); +} +.toc-list .toc-level-3 { + padding-left: var(--space-m); +} -.toc-list .toc-level-2 a { font-size: var(--step--1); } -.toc-list .toc-level-3 a { font-size: var(--step--2); } +.toc-list .toc-level-2 a { + font-size: var(--step--1); +} +.toc-list .toc-level-3 a { + font-size: var(--step--2); +} /* ── Public TOC (details/summary block) ─────────────────────────────────── */ .toc { diff --git a/app/public/assets/css/content-page.css b/app/public/assets/css/content-page.css index 6af482b..109bc66 100644 --- a/app/public/assets/css/content-page.css +++ b/app/public/assets/css/content-page.css @@ -5,56 +5,56 @@ /* Override inherited padding on main-content */ #main-content { - padding-top: 0; + padding-top: 0; } .page-content { - flex: 1; - min-height: 0; - overflow-y: auto; - overflow-x: hidden; - scroll-behavior: smooth; - /* Bottom spacing lives on .page-content > article::after (below): Firefox + flex: 1; + min-height: 0; + overflow-y: auto; + overflow-x: hidden; + scroll-behavior: smooth; + /* Bottom spacing lives on .page-content > article::after (below): Firefox drops/clips the scroll container's own padding-bottom in this nested flex layout, while Chromium honours it — moving the pad into a block pseudo element keeps both browsers consistent. */ - padding: var(--space-xl) var(--space-l) 0; - display: grid; - grid-template-columns: 180px 1fr; - gap: var(--space-2xl); - align-items: start; + padding: var(--space-xl) var(--space-l) 0; + display: grid; + grid-template-columns: 180px 1fr; + gap: var(--space-2xl); + align-items: start; } /* ── TOC styles → components/toc.css (shared with admin) ───────────────── */ /* Grid column positioning for content pages with sidebar TOC */ @media (min-width: 768px) { - .page-content > article { - grid-column: 2; - min-width: 0; - max-width: 100%; - } + .page-content > article { + grid-column: 2; + min-width: 0; + max-width: 100%; + } } @media (max-width: 767px) { - .page-content { - grid-template-columns: 1fr; - gap: var(--space-l); - padding: var(--space-m) var(--space-s) 0; - } + .page-content { + grid-template-columns: 1fr; + gap: var(--space-l); + padding: var(--space-m) var(--space-s) 0; + } - .page-content > article { - grid-column: 1; - } + .page-content > article { + grid-column: 1; + } - .toc { - margin-top: var(--space-s); - } + .toc { + margin-top: var(--space-s); + } } /* ── First content child aligns with TOC heading top ───────────────────── */ .page-content > article > :first-child { - margin-top: 2.2rem; + margin-top: 2.2rem; } /* ------------------------------------------------------------------ */ @@ -62,127 +62,133 @@ /* ------------------------------------------------------------------ */ .page-content > article { - display: block; - max-width: 100%; - font-family: var(--font-body); - font-size: var(--step-0); - line-height: 1.6; - color: var(--text-primary); - font-weight: 300; + display: block; + max-width: 100%; + font-family: var(--font-body); + font-size: var(--step-0); + line-height: 1.6; + color: var(--text-primary); + font-weight: 300; } /* Trailing bottom spacing. Pseudo-element (real content in the scroll area) rather than the container's padding-bottom, which Firefox clips. */ .page-content > article::after { - content: ""; - display: block; - height: var(--space-2xl); + content: ""; + display: block; + height: var(--space-2xl); } @media (max-width: 767px) { - .page-content > article::after { - height: var(--space-xl); - } + .page-content > article::after { + height: var(--space-xl); + } } .page-content > article * { - max-width: 100%; - overflow-wrap: anywhere; - word-break: break-word; + max-width: 100%; + overflow-wrap: anywhere; + word-break: break-word; } .page-content > article p { - margin: 0 0 1em 0; + margin: 0 0 1em 0; } .page-content > article p:last-child { - margin-bottom: 0; + margin-bottom: 0; } .page-content > article a { - color: inherit; - text-decoration: underline; - text-decoration-thickness: 0.08em; - text-underline-offset: 0.15em; - font-weight: 700; + color: inherit; + text-decoration: underline; + text-decoration-thickness: 0.08em; + text-underline-offset: 0.15em; + font-weight: 700; } .page-content > article a:hover { - color: var(--accent-primary); - text-decoration-thickness: 0.12em; + color: var(--accent-primary); + text-decoration-thickness: 0.12em; } .page-content > article ul, .page-content > article ol { - padding-left: var(--space-m); - margin-bottom: var(--space-s); + padding-left: var(--space-m); + margin-bottom: var(--space-s); } .page-content > article li { - margin-bottom: 0.3em; + margin-bottom: 0.3em; } .page-content > article strong { - font-weight: 700; + font-weight: 700; } .page-content > article em { - font-style: italic; + font-style: italic; } .page-content > article :where(pre, pre code, code) { - display: block; - max-width: 100%; - overflow-x: auto; - overflow-wrap: normal; - word-break: normal; - font-family: "Courier New", Courier, monospace; - font-size: 0.88em; - background: color-mix(in srgb, var(--bg-tertiary) 50%, transparent); - padding: 0.5em 0.75em; - border-radius: var(--radius); - white-space: pre-wrap; - word-wrap: break-word; + display: block; + max-width: 100%; + overflow-x: auto; + overflow-wrap: normal; + word-break: normal; + font-family: "Courier New", Courier, monospace; + font-size: 0.88em; + background: color-mix(in srgb, var(--bg-tertiary) 50%, transparent); + padding: 0.5em 0.75em; + border-radius: var(--radius); + white-space: pre-wrap; + word-wrap: break-word; } #apropos-intro *, #apropos-contacts *, #apropos-credits * { - overflow-wrap: anywhere; - word-break: break-word; - max-width: 100%; + overflow-wrap: anywhere; + word-break: break-word; + max-width: 100%; } #apropos-contacts, #apropos-intro { - border-bottom: none; + border-bottom: none; } /* Section separators (about page only) */ .page-content > article > section { - /* padding-bottom: var(--space-xl); */ - border-bottom: 1px solid var(--border-primary); - margin-bottom: var(--space-xl); + /* padding-bottom: var(--space-xl); */ + border-bottom: 1px solid var(--border-primary); + margin-bottom: var(--space-xl); } .page-content > article > section:last-child { - border-bottom: none; - margin-bottom: 0; - padding-bottom: var(--space-xl); + border-bottom: none; + margin-bottom: 0; + padding-bottom: var(--space-xl); } /* Scroll margin so anchor links account for the sticky header */ .page-content > article :where(h1, h2, h3) { - scroll-margin-top: var(--space-l); + scroll-margin-top: var(--space-l); } /* Content-page heading scale — smaller, distinct, no step-system dependency */ -.page-content > article h1 { font-size: clamp(1.7rem, 1.55rem + 0.68vw, 2.1rem); } -.page-content > article h2 { font-size: clamp(1.35rem, 1.23rem + 0.55vw, 1.65rem); } -.page-content > article h3 { font-size: clamp(1.1rem, 1.03rem + 0.34vw, 1.3rem); } +.page-content > article h1 { + font-size: clamp(1.7rem, 1.55rem + 0.68vw, 2.1rem); +} +.page-content > article h2 { + font-size: clamp(1.35rem, 1.23rem + 0.55vw, 1.65rem); +} +.page-content > article h3 { + font-size: clamp(1.1rem, 1.03rem + 0.34vw, 1.3rem); +} /* Hide CommonMark heading permalink anchors */ .heading-permalink { - display: none; + display: none; } /* ------------------------------------------------------------------ */ @@ -190,12 +196,12 @@ /* ------------------------------------------------------------------ */ .content-section-title { - font-family: var(--font-display); - font-size: clamp(1.35rem, 1.23rem + 0.55vw, 1.65rem); - font-weight: 400; - color: var(--text-primary); - margin: 0 0 var(--space-m) 0; - line-height: 1.1; + font-family: var(--font-display); + font-size: clamp(1.35rem, 1.23rem + 0.55vw, 1.65rem); + font-weight: 400; + color: var(--text-primary); + margin: 0 0 var(--space-m) 0; + line-height: 1.1; } /* ------------------------------------------------------------------ */ @@ -203,28 +209,28 @@ /* ------------------------------------------------------------------ */ .apropos-contacts-grid { - display: flex; - flex-direction: column; - gap: 0; + display: flex; + flex-direction: column; + gap: 0; } .apropos-contact-card { - font-style: normal; - padding: var(--space-s) 0; + font-style: normal; + padding: var(--space-s) 0; } .apropos-contact-card strong { - display: block; - font-weight: 600; - color: var(--text-primary); - margin-bottom: var(--space-3xs); + display: block; + font-weight: 600; + color: var(--text-primary); + margin-bottom: var(--space-3xs); } .apropos-contact-card span { - display: block; - color: var(--text-secondary); - line-height: 1.4; - margin-bottom: var(--space-3xs); + display: block; + color: var(--text-secondary); + line-height: 1.4; + margin-bottom: var(--space-3xs); } /* ------------------------------------------------------------------ */ @@ -232,33 +238,33 @@ /* ------------------------------------------------------------------ */ .apropos-credits-list { - margin: 0; - padding: 0; - display: flex; - flex-direction: column; - gap: 0; + margin: 0; + padding: 0; + display: flex; + flex-direction: column; + gap: 0; } .apropos-credit-row { - display: grid; - grid-template-columns: 1fr 1.6fr; - gap: var(--space-s); - padding: var(--space-s) 0; - align-items: baseline; + display: grid; + grid-template-columns: 1fr 1.6fr; + gap: var(--space-s); + padding: var(--space-s) 0; + align-items: baseline; } .apropos-credits-list dt { - /* font-size: var(--step--1); */ - font-weight: 300; - letter-spacing: 0.04em; - text-transform: uppercase; + /* font-size: var(--step--1); */ + font-weight: 300; + letter-spacing: 0.04em; + text-transform: uppercase; } .apropos-credits-list dd { - /* font-size: var(--step-; */ - color: var(--text-primary); - margin: 0; - line-height: 1.5; + /* font-size: var(--step-; */ + color: var(--text-primary); + margin: 0; + line-height: 1.5; } /* ------------------------------------------------------------------ */ @@ -266,7 +272,7 @@ /* ------------------------------------------------------------------ */ .apropos-single { - max-width: 720px; + max-width: 720px; } /* ------------------------------------------------------------------ */ @@ -274,20 +280,20 @@ /* ------------------------------------------------------------------ */ @media (max-width: 600px) { - .page-content { - padding: var(--space-m) var(--space-s) 0; - } + .page-content { + padding: var(--space-m) var(--space-s) 0; + } - .page-content > article { - font-size: var(--step-0); - } + .page-content > article { + font-size: var(--step-0); + } - .content-section-title { - font-size: clamp(1.2rem, 1.1rem + 0.45vw, 1.45rem); - } + .content-section-title { + font-size: clamp(1.2rem, 1.1rem + 0.45vw, 1.45rem); + } - .apropos-credit-row { - grid-template-columns: 1fr; - gap: var(--space-3xs); - } + .apropos-credit-row { + grid-template-columns: 1fr; + gap: var(--space-3xs); + } } diff --git a/app/public/assets/css/public.css b/app/public/assets/css/public.css index 09d394d..e8f79f2 100644 --- a/app/public/assets/css/public.css +++ b/app/public/assets/css/public.css @@ -5,293 +5,295 @@ /* Cards grid — scrollable main area */ .home-main { - flex: 1; - min-height: 0; - overflow-y: auto; - overflow-x: hidden; - padding: 0; + flex: 1; + min-height: 0; + overflow-y: auto; + overflow-x: hidden; + padding: 0; } .cards-container { - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: var(--space-s); - list-style: none; - margin: 0; - padding: var(--space-xs) var(--space-s) var(--space-m); + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: var(--space-s); + list-style: none; + margin: 0; + padding: var(--space-xs) var(--space-s) var(--space-m); } @media (max-width: 768px) { - .cards-container { - grid-template-columns: repeat(2, 1fr); - } + .cards-container { + grid-template-columns: repeat(2, 1fr); + } } @media (max-width: 480px) { - .cards-container { - grid-template-columns: 1fr; - } + .cards-container { + grid-template-columns: 1fr; + } } /* Each card = list item containing a block link */ .card { - display: flex; - flex-direction: column; - cursor: pointer; - border-radius: var(--radius); - background: var(--bg-primary); - overflow: hidden; - transition: - border-color 0.2s ease, - box-shadow 0.2s ease; + display: flex; + flex-direction: column; + cursor: pointer; + border-radius: var(--radius); + background: var(--bg-primary); + overflow: hidden; + transition: + border-color 0.2s ease, + box-shadow 0.2s ease; } .card:hover { - box-shadow: 0 4px 16px var(--accent-secondary); - /* border-color: var(--accent-primary); */ + box-shadow: 0 4px 16px var(--accent-secondary); + /* border-color: var(--accent-primary); */ } .card > a { - text-decoration: none; - color: inherit; - display: flex; - flex-direction: column; - flex: 1; - border-radius: inherit; + text-decoration: none; + color: inherit; + display: flex; + flex-direction: column; + flex: 1; + border-radius: inherit; } /* Media wrapper:
for real images/video,
for placeholders */ .home-body figure { - width: 100%; - aspect-ratio: 4 / 3; - overflow: hidden; - background: var(--bg-tertiary); - position: relative; - margin: 0; /* reset
default margin */ - /* border-radius: 7px 7px 0 0; */ - border-radius: var(--radius); + width: 100%; + aspect-ratio: 4 / 3; + overflow: hidden; + background: var(--bg-tertiary); + position: relative; + margin: 0; /* reset
default margin */ + /* border-radius: 7px 7px 0 0; */ + border-radius: var(--radius); } .home-body figure img, .home-body figure video { - width: 100%; - height: 100%; - object-fit: cover; - display: block; - transition: transform 0.3s ease, opacity 300ms ease-in; + width: 100%; + height: 100%; + object-fit: cover; + display: block; + transition: + transform 0.3s ease, + opacity 300ms ease-in; } /* Cover thumbnails are served as a (WebP + fallback); keep the wrapper block-level so the fills the 4:3 figure. */ .home-body figure picture { - display: block; - width: 100%; - height: 100%; + display: block; + width: 100%; + height: 100%; } .card:hover figure img, .card:hover figure video { - transform: scale(1.02); + transform: scale(1.02); } .card__media--placeholder { - width: 100%; - height: 100%; - background: linear-gradient(135deg, var(--bg-tertiary), var(--bg-active)); - display: flex; - align-items: center; - justify-content: center; - color: var(--text-tertiary); - font-size: var(--step-3); + width: 100%; + height: 100%; + background: linear-gradient(135deg, var(--bg-tertiary), var(--bg-active)); + display: flex; + align-items: center; + justify-content: center; + color: var(--text-tertiary); + font-size: var(--step-3); } /* HTMX lazy-loaded cover: spinner + settle fade-in (mirrors htmx docs' `htmx-settling img` transition pattern). */ .card__cover-loading { - animation: card-cover-pulse 1.1s ease-in-out infinite; + animation: card-cover-pulse 1.1s ease-in-out infinite; } @keyframes card-cover-pulse { - 0%, - 100% { - opacity: 0.3; - } - 50% { - opacity: 1; - } + 0%, + 100% { + opacity: 0.3; + } + 50% { + opacity: 1; + } } .home-body figure.htmx-settling img { - opacity: 0; + opacity: 0; } .card__media--gradient { - width: 100%; - aspect-ratio: 4 / 3; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - padding: var(--space-s); - text-align: center; - box-sizing: border-box; - border-radius: 0 0 var(--radius) var(--radius); - background: linear-gradient( - 0deg, - rgba(192, 93, 225, 1) 0%, - rgba(51, 191, 135, 1) 66%, - rgba(60, 133, 108, 1) 100% - ); + width: 100%; + aspect-ratio: 4 / 3; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: var(--space-s); + text-align: center; + box-sizing: border-box; + border-radius: 0 0 var(--radius) var(--radius); + background: linear-gradient( + 0deg, + rgba(192, 93, 225, 1) 0%, + rgba(51, 191, 135, 1) 66%, + rgba(60, 133, 108, 1) 100% + ); } .card__gradient-author { - color: var(--accent-foreground); - font-size: var(--step--2); - opacity: 0.85; - margin-bottom: 0.25rem; - display: block; + color: var(--accent-foreground); + font-size: var(--step--2); + opacity: 0.85; + margin-bottom: 0.25rem; + display: block; } .card__gradient-title { - color: var(--accent-foreground); - font-size: var(--step--1); - font-weight: 600; - display: -webkit-box; - -webkit-line-clamp: 3; - -webkit-box-orient: vertical; - overflow: hidden; + color: var(--accent-foreground); + font-size: var(--step--1); + font-weight: 600; + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + overflow: hidden; } /* Section label */ .home-section-label { - font-style: normal; - background: transparent; - color: var(--text-primary); - font-size: var(--step--2); - font-weight: 600; - letter-spacing: 0.1em; - text-transform: uppercase; - padding: var(--space-s) var(--space-s) var(--space-xs); - border-bottom: 1px solid var(--border-primary); - margin: 0; + font-style: normal; + background: transparent; + color: var(--text-primary); + font-size: var(--step--2); + font-weight: 600; + letter-spacing: 0.1em; + text-transform: uppercase; + padding: var(--space-s) var(--space-s) var(--space-xs); + border-bottom: 1px solid var(--border-primary); + margin: 0; } /* Card caption —

directly inside the card link, below the media */ .home-body li > a > p { - padding: var(--space-2xs) var(--space-xs) var(--space-xs); - font-size: var(--step--1); - line-height: 1.35; - color: var(--text-primary); - margin: 0; - font-weight: 400; + padding: var(--space-2xs) var(--space-xs) var(--space-xs); + font-size: var(--step--1); + line-height: 1.35; + color: var(--text-primary); + margin: 0; + font-weight: 400; } /* Empty-state message shown when no cards exist */ .cards-empty { - padding: var(--space-l); - color: var(--text-tertiary); - font-size: var(--step--1); - list-style: none; + padding: var(--space-l); + color: var(--text-tertiary); + font-size: var(--step--1); + list-style: none; } /* Filter info */ .filter-info { - background: var(--accent-muted); - color: var(--accent-secondary); - padding: var(--space-3xs) var(--space-s); - font-size: var(--step--1); - display: flex; - align-items: center; - gap: var(--space-s); - flex-shrink: 0; + background: var(--accent-muted); + color: var(--accent-secondary); + padding: var(--space-3xs) var(--space-s); + font-size: var(--step--1); + display: flex; + align-items: center; + gap: var(--space-s); + flex-shrink: 0; } .clear-filter { - color: var(--accent-secondary); - text-decoration: none; - padding: var(--space-3xs) var(--space-2xs); - background: var(--accent-muted); - border-radius: var(--radius); - font-size: var(--step--1); + color: var(--accent-secondary); + text-decoration: none; + padding: var(--space-3xs) var(--space-2xs); + background: var(--accent-muted); + border-radius: var(--radius); + font-size: var(--step--1); } .clear-filter:hover { - background: var(--accent-secondary); - color: var(--accent-foreground); + background: var(--accent-secondary); + color: var(--accent-foreground); } /* Pagination */ .pagination-wrap { - border-top: 1px solid var(--border-secondary); - background: var(--bg-primary); - flex-shrink: 0; + border-top: 1px solid var(--border-secondary); + background: var(--bg-primary); + flex-shrink: 0; } .pagination-wrap ul { - display: flex; - justify-content: center; - align-items: center; - gap: var(--space-2xs); - padding: var(--space-s); - list-style: none; - margin: 0; + display: flex; + justify-content: center; + align-items: center; + gap: var(--space-2xs); + padding: var(--space-s); + list-style: none; + margin: 0; } .pagination-btn { - display: inline-flex; - align-items: center; - justify-content: center; - min-width: 2.75rem; - min-height: 2.75rem; - padding: 0 var(--space-2xs); - border: 1px solid var(--border-secondary); - border-radius: var(--radius); - color: var(--text-primary); - font-size: var(--step--1); - text-decoration: none; - font-weight: 400; - transition: all 0.15s; + display: inline-flex; + align-items: center; + justify-content: center; + min-width: 2.75rem; + min-height: 2.75rem; + padding: 0 var(--space-2xs); + border: 1px solid var(--border-secondary); + border-radius: var(--radius); + color: var(--text-primary); + font-size: var(--step--1); + text-decoration: none; + font-weight: 400; + transition: all 0.15s; } .pagination-btn:hover:not(.disabled) { - border-color: var(--accent-primary); - color: var(--accent-primary); + border-color: var(--accent-primary); + color: var(--accent-primary); } .pagination-btn.disabled { - opacity: 0.3; - cursor: not-allowed; - pointer-events: none; + opacity: 0.3; + cursor: not-allowed; + pointer-events: none; } .pagination-info { - font-size: var(--step--1); - color: var(--text-secondary); - padding: 0 var(--space-2xs); + font-size: var(--step--1); + color: var(--text-secondary); + padding: 0 var(--space-2xs); } .page-current { - font-weight: 600; - color: var(--text-primary); + font-weight: 600; + color: var(--text-primary); } /* Suppress card hover scale for users who prefer reduced motion */ @media (prefers-reduced-motion: reduce) { - .home-body figure img, - .home-body figure video { - transition: none; - } - .card:hover figure img, - .card:hover figure video { - transform: none; - } - .card__media--gradient { - transition: none; - } - .card { - transition: none; - } - .card:hover { - transform: none; - } + .home-body figure img, + .home-body figure video { + transition: none; + } + .card:hover figure img, + .card:hover figure video { + transform: none; + } + .card__media--gradient { + transition: none; + } + .card { + transition: none; + } + .card:hover { + transform: none; + } } diff --git a/app/public/assets/css/repertoire.css b/app/public/assets/css/repertoire.css index c1afaef..c9dc4f1 100644 --- a/app/public/assets/css/repertoire.css +++ b/app/public/assets/css/repertoire.css @@ -4,894 +4,894 @@ ============================================================ */ .search-main { - flex: 1; - min-height: 0; - overflow: hidden; - padding: 0; - display: flex; - flex-direction: column; + flex: 1; + min-height: 0; + overflow: hidden; + padding: 0; + display: flex; + flex-direction: column; } /* ── Scrollable results area with sticky pagination ──────────────── */ #search-results { - flex: 1; - min-height: 0; - overflow-y: auto; - display: flex; - flex-direction: column; + flex: 1; + min-height: 0; + overflow-y: auto; + display: flex; + flex-direction: column; } .search-results-header { - flex-shrink: 0; + flex-shrink: 0; } .search-results-range--compact { - display: none; + display: none; } .search-empty { - flex: 1; - display: flex; - align-items: center; - justify-content: center; - padding: var(--space-xl) var(--space-m); - color: var(--text-secondary); - font-size: var(--step-0); - text-align: center; + flex: 1; + display: flex; + align-items: center; + justify-content: center; + padding: var(--space-xl) var(--space-m); + color: var(--text-secondary); + font-size: var(--step-0); + text-align: center; } /* ---- 6-column index layout ---- */ /* Equal-width columns except Années (years) = narrower */ .repertoire-index { - display: grid; - grid-template-columns: - minmax(3rem, 0.45fr) - minmax(16rem, 1.2fr) - minmax(9rem, 1fr) - minmax(7rem, 1fr) - minmax(8rem, 1fr) - minmax(5rem, 0.55fr); - grid-template-rows: auto minmax(0, 1fr); - gap: var(--space-s); - justify-content: space-between; - padding: 0; - margin: 0 var(--space-s); - height: 100%; + display: grid; + grid-template-columns: + minmax(3rem, 0.45fr) + minmax(16rem, 1.2fr) + minmax(9rem, 1fr) + minmax(7rem, 1fr) + minmax(8rem, 1fr) + minmax(5rem, 0.55fr); + grid-template-rows: auto minmax(0, 1fr); + gap: var(--space-s); + justify-content: space-between; + padding: 0; + margin: 0 var(--space-s); + height: 100%; } /* ---- Accordion: visible only on mobile (≤ 640px) ---- */ /* Desktop: heading-text visible, toggle hidden */ .rep-accordion__heading-text { - /* visible — inherits the h2 styling above */ + /* visible — inherits the h2 styling above */ } .rep-accordion__toggle, .rep-accordion__chevron, .rep-accordion__badge { - display: none; + display: none; } .rep-accordion__panel { - display: contents; + display: contents; } /* Each section becomes transparent to the grid so h2+ul sit in the 2-row layout */ .repertoire-col { - display: contents; + display: contents; } .repertoire-col > h2 { - grid-row: 1; - font-family: var(--font-display); - font-size: var(--step--1); - letter-spacing: 0.08em; - text-transform: uppercase; - color: var(--text-primary); - font-weight: 398; - line-height: 1.3; - margin: 0; - padding: var(--space-xs) 0 var(--space-3xs) 0; - border-bottom: 1px solid var(--text-primary); - align-self: end; - hyphens: auto; - word-break: normal; - overflow-wrap: break-word; + grid-row: 1; + font-family: var(--font-display); + font-size: var(--step--1); + letter-spacing: 0.08em; + text-transform: uppercase; + color: var(--text-primary); + font-weight: 398; + line-height: 1.3; + margin: 0; + padding: var(--space-xs) 0 var(--space-3xs) 0; + border-bottom: 1px solid var(--text-primary); + align-self: end; + hyphens: auto; + word-break: normal; + overflow-wrap: break-word; } .repertoire-col .rep-accordion__panel > ul { - grid-row: 2; - overflow-y: auto; - overflow-x: hidden; - min-height: 0; - padding-top: var(--space-2xs); - padding-bottom: var(--space-l); - padding-left: 0; - padding-right: 0; + grid-row: 2; + overflow-y: auto; + overflow-x: hidden; + min-height: 0; + padding-top: var(--space-2xs); + padding-bottom: var(--space-l); + padding-left: 0; + padding-right: 0; } /* Strip list chrome inside repertoire columns */ .repertoire-col ul { - list-style: none; - margin: 0; - padding: 0; + list-style: none; + margin: 0; + padding: 0; } .repertoire-col a, .repertoire-col button { - line-height: 22px; + line-height: 22px; } .repertoire-col[data-col="kw"] button { - font-size: var(--step--1); - line-height: 1.15; - hyphens: none; - overflow-wrap: break-word; - word-break: normal; + font-size: var(--step--1); + line-height: 1.15; + hyphens: none; + overflow-wrap: break-word; + word-break: normal; } /* ---- Responsive (≤ 1025px): accordion mode, students as results ---- */ @media (max-width: 1025px) { - .repertoire-index { - display: flex; - flex-direction: column; - min-height: 0; - height: 100%; - overflow-y: hidden; - gap: 0; - margin: 0; - } + .repertoire-index { + display: flex; + flex-direction: column; + min-height: 0; + height: 100%; + overflow-y: hidden; + gap: 0; + margin: 0; + } - /* Each column becomes a block-level accordion section */ - .repertoire-col { - display: block; - border-bottom: 1px solid var(--text-primary); - } + /* Each column becomes a block-level accordion section */ + .repertoire-col { + display: block; + border-bottom: 1px solid var(--text-primary); + } - .repertoire-col[data-col="students"] { - border-bottom: none; - } + .repertoire-col[data-col="students"] { + border-bottom: none; + } - /* Flex order: years/ap/or/fi first, then keywords, students last */ - .repertoire-col[data-col="years"] { - order: 0; - } - .repertoire-col[data-col="ap"] { - order: 1; - } - .repertoire-col[data-col="or"] { - order: 2; - } - .repertoire-col[data-col="fi"] { - order: 3; - } - .repertoire-col[data-col="kw"] { - order: 4; - } - .repertoire-col[data-col="students"] { - order: 5; - } + /* Flex order: years/ap/or/fi first, then keywords, students last */ + .repertoire-col[data-col="years"] { + order: 0; + } + .repertoire-col[data-col="ap"] { + order: 1; + } + .repertoire-col[data-col="or"] { + order: 2; + } + .repertoire-col[data-col="fi"] { + order: 3; + } + .repertoire-col[data-col="kw"] { + order: 4; + } + .repertoire-col[data-col="students"] { + order: 5; + } - /* Students column: not an accordion — open results list below filters */ - .repertoire-col[data-col="students"] { - border-bottom: none; - border-top: none; - margin-top: 0; - padding-top: 0; - flex: 1; - min-height: 0; - display: flex; - flex-direction: column; - } + /* Students column: not an accordion — open results list below filters */ + .repertoire-col[data-col="students"] { + border-bottom: none; + border-top: none; + margin-top: 0; + padding-top: 0; + flex: 1; + min-height: 0; + display: flex; + flex-direction: column; + } - .repertoire-col[data-col="students"] .rep-accordion__toggle { - display: none; - } + .repertoire-col[data-col="students"] .rep-accordion__toggle { + display: none; + } - .repertoire-col[data-col="students"] .rep-accordion__heading-text { - display: none; - } + .repertoire-col[data-col="students"] .rep-accordion__heading-text { + display: none; + } - .repertoire-col[data-col="students"] .rep-accordion__panel { - display: block; - max-height: none; - overflow-y: auto; - flex: 1; - } + .repertoire-col[data-col="students"] .rep-accordion__panel { + display: block; + max-height: none; + overflow-y: auto; + flex: 1; + } - /* Hide the plain h2 — the toggle button replaces it */ - .repertoire-col > h2 { - display: block; - grid-row: unset; - align-self: unset; - border-bottom: none; - padding: 0; - margin: 0; - font-size: inherit; - line-height: inherit; - } + /* Hide the plain h2 — the toggle button replaces it */ + .repertoire-col > h2 { + display: block; + grid-row: unset; + align-self: unset; + border-bottom: none; + padding: 0; + margin: 0; + font-size: inherit; + line-height: inherit; + } - /* Hide heading text on mobile (toggle button replaces it) */ - .rep-accordion__heading-text { - display: none; - } + /* Hide heading text on mobile (toggle button replaces it) */ + .rep-accordion__heading-text { + display: none; + } - /* Accordion toggle: full-width touch target */ - .rep-accordion__toggle { - display: flex; - align-items: center; - justify-content: space-between; - width: 100%; - min-height: 48px; - padding: var(--space-xs) var(--space-s); - background: none; - border: none; - font-family: var(--font-display); - font-size: var(--step--2); - letter-spacing: 0.08em; - text-transform: uppercase; - color: var(--text-primary); - font-weight: 398; - text-align: left; - cursor: pointer; - } + /* Accordion toggle: full-width touch target */ + .rep-accordion__toggle { + display: flex; + align-items: center; + justify-content: space-between; + width: 100%; + min-height: 48px; + padding: var(--space-xs) var(--space-s); + background: none; + border: none; + font-family: var(--font-display); + font-size: var(--step--2); + letter-spacing: 0.08em; + text-transform: uppercase; + color: var(--text-primary); + font-weight: 398; + text-align: left; + cursor: pointer; + } - .rep-accordion__toggle:active { - background: var(--bg-secondary); - } + .rep-accordion__toggle:active { + background: var(--bg-secondary); + } - /* Badge: active filter count */ - .rep-accordion__badge { - display: inline-flex; - align-items: center; - justify-content: center; - min-width: 1.4em; - height: 1.4em; - padding: 0 0.35em; - margin-left: var(--space-2xs); - background: var(--accent-primary); - color: var(--accent-foreground); - border-radius: 99px; - font-family: var(--font-body); - font-size: var(--step--2); - font-weight: 500; - letter-spacing: 0; - text-transform: none; - } + /* Badge: active filter count */ + .rep-accordion__badge { + display: inline-flex; + align-items: center; + justify-content: center; + min-width: 1.4em; + height: 1.4em; + padding: 0 0.35em; + margin-left: var(--space-2xs); + background: var(--accent-primary); + color: var(--accent-foreground); + border-radius: 99px; + font-family: var(--font-body); + font-size: var(--step--2); + font-weight: 500; + letter-spacing: 0; + text-transform: none; + } - /* Chevron: CSS triangle */ - .rep-accordion__chevron { - display: inline-block; - width: 10px; - height: 10px; - flex-shrink: 0; - margin-left: var(--space-2xs); - border-right: 2px solid var(--text-secondary); - border-bottom: 2px solid var(--text-secondary); - transform: rotate(45deg); - transition: transform 0.2s; - } + /* Chevron: CSS triangle */ + .rep-accordion__chevron { + display: inline-block; + width: 10px; + height: 10px; + flex-shrink: 0; + margin-left: var(--space-2xs); + border-right: 2px solid var(--text-secondary); + border-bottom: 2px solid var(--text-secondary); + transform: rotate(45deg); + transition: transform 0.2s; + } - .rep-accordion__toggle[aria-expanded="true"] .rep-accordion__chevron { - transform: rotate(-135deg); - } + .rep-accordion__toggle[aria-expanded="true"] .rep-accordion__chevron { + transform: rotate(-135deg); + } - /* Panel: collapsed by default */ - .rep-accordion__panel { - display: block; - max-height: 0; - overflow: hidden; - transition: max-height 0.3s ease; - } + /* Panel: collapsed by default */ + .rep-accordion__panel { + display: block; + max-height: 0; + overflow: hidden; + transition: max-height 0.3s ease; + } - .rep-accordion__panel.is-open { - max-height: 60vh; - overflow-y: auto; - } + .rep-accordion__panel.is-open { + max-height: 60vh; + overflow-y: auto; + } - /* Reposition the