:root {
  --theme-color-scheme: dark;
  --brand-logo-filter: brightness(0) invert(1);
  --theme-body-background:
    radial-gradient(circle at 77% 3%, rgba(77, 183, 255, .13), transparent 30%),
    radial-gradient(circle at 12% 38%, rgba(95, 97, 255, .08), transparent 32%),
    linear-gradient(145deg, #081321 0%, #0a1727 45%, #07101d 100%);
  --theme-topbar-background: rgba(7, 17, 31, .78);
  --theme-topbar-border: rgba(122, 166, 220, .16);
  --theme-hero-background:
    linear-gradient(90deg, rgba(8, 24, 42, .92) 0%, rgba(10, 28, 49, .82) 42%, rgba(17, 37, 63, .48) 100%),
    radial-gradient(circle at 86% 24%, rgba(255, 197, 112, .22), transparent 16%),
    linear-gradient(155deg, #0b1d33 0%, #132a46 62%, #0b182b 100%);
  --theme-card-background: linear-gradient(145deg, rgba(21, 40, 66, .94), rgba(11, 25, 44, .94));
  --theme-soft-surface: rgba(17, 34, 57, .9);
  --theme-menu-background: #0d1d32;
  --theme-input-background: #0c1c31;
  --theme-modal-background: linear-gradient(180deg, #0e1e34 0%, #0b192b 100%);
  --theme-modal-header: rgba(13, 29, 51, .95);
  --theme-tabs-background: #142640;
  --theme-workspace-summary: linear-gradient(180deg, rgba(23, 48, 78, .76), rgba(15, 34, 58, .72));
  --theme-workspace-summary-hover: linear-gradient(180deg, rgba(27, 57, 92, .86), rgba(17, 39, 65, .82));
  --theme-workspace-menu: linear-gradient(180deg, rgba(15, 31, 53, .99), rgba(9, 22, 39, .99));
  --theme-module-copy: #aebdd0;
  --theme-strong-copy: #d7e4f3;
  --theme-dialog-copy: #b3c3d7;
  --theme-muted-copy: #9fb1c8;
  --theme-outline: rgba(139, 174, 219, .24);
  --theme-table-line: rgba(255,255,255,.07);
  --theme-section-line: rgba(255,255,255,.08);
  --theme-primary-button-background: #f9fbff;
  --theme-primary-button-color: #07111f;
  --theme-shadow: rgba(0,0,0,.22);
  --theme-eyebrow: #8fb8e6;
  --theme-status-neutral-background: rgba(108, 135, 171, .15);
  --theme-status-neutral-color: #d2dcea;
  --theme-status-neutral-border: rgba(145, 178, 220, .18);
  --theme-success-background: rgba(32, 164, 107, .25);
  --theme-success-color: #d8ffed;
  --theme-success-border: rgba(56, 211, 143, .28);
  --theme-info-background: rgba(56, 135, 224, .28);
  --theme-info-color: #d8eaff;
  --theme-info-border: rgba(84, 169, 255, .24);
  --theme-error-background: rgba(145,53,53,.28);
  --theme-error-color: #ffd0d0;
  --theme-warning-background: rgba(145,109,25,.3);
  --theme-warning-color: #ffe2a1;
  --theme-risk-color: #ff9b8f;
  --theme-success-accent: #48d492;
  --theme-on-dark-text: #f7fbff;
  --theme-on-dark-muted: #d7e1ee;
  --theme-on-dark-accent: #9bd5ff;
  --theme-workspace-icon: #9ed7ff;
  --theme-platform-icon: #ffd17d;
  --theme-user-summary: rgba(18, 37, 62, .46);
  --theme-user-summary-hover: rgba(25, 51, 82, .68);
  --theme-user-summary-border: rgba(129, 175, 226, .16);
  --theme-focus-ring: rgba(99, 198, 255, .72);
}

html[data-theme="light"] {
  color-scheme: light;
  --theme-color-scheme: light;
  --brand-logo-filter: none;
  --bg: #f4f7fb;
  --panel: rgba(255, 255, 255, .84);
  --panel-strong: rgba(255, 255, 255, .96);
  --panel-soft: rgba(244, 248, 253, .98);
  --line: rgba(39, 74, 116, .14);
  --line-strong: rgba(42, 126, 195, .38);
  --text: #102238;
  --muted: #62758c;
  --muted-strong: #3e536c;
  --blue: #1975bd;
  --blue-soft: #2d8dcf;
  --green: #19845d;
  --amber: #ae6d16;
  --theme-body-background:
    radial-gradient(circle at 82% 4%, rgba(60, 151, 219, .11), transparent 28%),
    radial-gradient(circle at 14% 42%, rgba(117, 112, 220, .07), transparent 30%),
    linear-gradient(145deg, #f7f9fc 0%, #eef4f9 55%, #f9fbfd 100%);
  --theme-topbar-background: rgba(250, 252, 255, .94);
  --theme-topbar-border: rgba(39, 75, 119, .14);
  --theme-hero-background:
    linear-gradient(90deg, rgba(255,255,255,.98) 0%, rgba(247,251,255,.95) 50%, rgba(237,246,254,.88) 100%),
    radial-gradient(circle at 86% 24%, rgba(231, 168, 77, .15), transparent 17%),
    linear-gradient(155deg, #ffffff 0%, #eef6fc 62%, #f5f9fc 100%);
  --theme-card-background: linear-gradient(145deg, rgba(255,255,255,.99), rgba(244,248,252,.98));
  --theme-soft-surface: rgba(255,255,255,.96);
  --theme-menu-background: #ffffff;
  --theme-input-background: #ffffff;
  --theme-modal-background: linear-gradient(180deg, #ffffff 0%, #f5f8fc 100%);
  --theme-modal-header: rgba(255,255,255,.97);
  --theme-tabs-background: #eef4f9;
  --theme-workspace-summary: linear-gradient(180deg, #ffffff, #f2f7fb);
  --theme-workspace-summary-hover: linear-gradient(180deg, #ffffff, #eaf3fa);
  --theme-workspace-menu: linear-gradient(180deg, #ffffff, #f5f8fb);
  --theme-module-copy: #62758a;
  --theme-strong-copy: #314a66;
  --theme-dialog-copy: #5b7088;
  --theme-muted-copy: #6e8094;
  --theme-outline: rgba(55, 91, 133, .17);
  --theme-table-line: rgba(25, 55, 88, .1);
  --theme-section-line: rgba(25, 55, 88, .1);
  --theme-primary-button-background: #123b62;
  --theme-primary-button-color: #ffffff;
  --theme-shadow: rgba(34, 61, 91, .12);
  --theme-eyebrow: #3c73a6;
  --theme-status-neutral-background: #edf2f7;
  --theme-status-neutral-color: #344c65;
  --theme-status-neutral-border: #cfd9e4;
  --theme-success-background: #e3f3ea;
  --theme-success-color: #0f694a;
  --theme-success-border: #a8dfc5;
  --theme-info-background: #e5f0fb;
  --theme-info-color: #155a91;
  --theme-info-border: #b8d6ef;
  --theme-error-background: #fdeaea;
  --theme-error-color: #8a2626;
  --theme-warning-background: #fff3dc;
  --theme-warning-color: #7a4b08;
  --theme-risk-color: #8a2626;
  --theme-success-accent: #167c59;
  --theme-on-dark-text: #f7fbff;
  --theme-on-dark-muted: #d7e1ee;
  --theme-on-dark-accent: #9bd5ff;
  --theme-workspace-icon: #276d9e;
  --theme-platform-icon: #80530e;
  --theme-user-summary: #f3f7fb;
  --theme-user-summary-hover: #eaf2f9;
  --theme-user-summary-border: #cbd8e5;
  --theme-focus-ring: #1975bd;
}

@media (prefers-color-scheme: light) {
  html[data-theme="system"] {
    color-scheme: light;
    --theme-color-scheme: light;
    --brand-logo-filter: none;
    --bg: #f4f7fb;
    --panel: rgba(255, 255, 255, .84);
    --panel-strong: rgba(255, 255, 255, .96);
    --panel-soft: rgba(244, 248, 253, .98);
    --line: rgba(39, 74, 116, .14);
    --line-strong: rgba(42, 126, 195, .38);
    --text: #102238;
    --muted: #62758c;
    --muted-strong: #3e536c;
    --blue: #1975bd;
    --blue-soft: #2d8dcf;
    --green: #19845d;
    --amber: #ae6d16;
    --theme-body-background:
      radial-gradient(circle at 82% 4%, rgba(60, 151, 219, .11), transparent 28%),
      radial-gradient(circle at 14% 42%, rgba(117, 112, 220, .07), transparent 30%),
      linear-gradient(145deg, #f7f9fc 0%, #eef4f9 55%, #f9fbfd 100%);
    --theme-topbar-background: rgba(250, 252, 255, .94);
    --theme-topbar-border: rgba(39, 75, 119, .14);
    --theme-hero-background:
      linear-gradient(90deg, rgba(255,255,255,.98) 0%, rgba(247,251,255,.95) 50%, rgba(237,246,254,.88) 100%),
      radial-gradient(circle at 86% 24%, rgba(231, 168, 77, .15), transparent 17%),
      linear-gradient(155deg, #ffffff 0%, #eef6fc 62%, #f5f9fc 100%);
    --theme-card-background: linear-gradient(145deg, rgba(255,255,255,.99), rgba(244,248,252,.98));
    --theme-soft-surface: rgba(255,255,255,.96);
    --theme-menu-background: #ffffff;
    --theme-input-background: #ffffff;
    --theme-modal-background: linear-gradient(180deg, #ffffff 0%, #f5f8fc 100%);
    --theme-modal-header: rgba(255,255,255,.97);
    --theme-tabs-background: #eef4f9;
    --theme-workspace-summary: linear-gradient(180deg, #ffffff, #f2f7fb);
    --theme-workspace-summary-hover: linear-gradient(180deg, #ffffff, #eaf3fa);
    --theme-workspace-menu: linear-gradient(180deg, #ffffff, #f5f8fb);
    --theme-module-copy: #62758a;
    --theme-strong-copy: #314a66;
    --theme-dialog-copy: #5b7088;
    --theme-muted-copy: #6e8094;
    --theme-outline: rgba(55, 91, 133, .17);
    --theme-table-line: rgba(25, 55, 88, .1);
    --theme-section-line: rgba(25, 55, 88, .1);
    --theme-primary-button-background: #123b62;
    --theme-primary-button-color: #ffffff;
    --theme-shadow: rgba(34, 61, 91, .12);
    --theme-eyebrow: #3c73a6;
    --theme-status-neutral-background: #edf2f7;
    --theme-status-neutral-color: #344c65;
    --theme-status-neutral-border: #cfd9e4;
    --theme-success-background: #e3f3ea;
    --theme-success-color: #0f694a;
    --theme-success-border: #a8dfc5;
    --theme-info-background: #e5f0fb;
    --theme-info-color: #155a91;
    --theme-info-border: #b8d6ef;
    --theme-error-background: #fdeaea;
    --theme-error-color: #8a2626;
    --theme-warning-background: #fff3dc;
    --theme-warning-color: #7a4b08;
    --theme-risk-color: #8a2626;
    --theme-success-accent: #167c59;
    --theme-on-dark-text: #f7fbff;
    --theme-on-dark-muted: #d7e1ee;
    --theme-on-dark-accent: #9bd5ff;
    --theme-workspace-icon: #276d9e;
    --theme-platform-icon: #80530e;
    --theme-user-summary: #f3f7fb;
    --theme-user-summary-hover: #eaf2f9;
    --theme-user-summary-border: #cbd8e5;
    --theme-focus-ring: #1975bd;
  }
}

html {
  color-scheme: var(--theme-color-scheme);
  background: var(--bg);
}

body {
  background: var(--theme-body-background);
}

.brand-logo {
  filter: var(--brand-logo-filter);
  transition: filter .16s ease;
}

.topbar {
  background: var(--theme-topbar-background);
  border-bottom-color: var(--theme-topbar-border);
}

.eyebrow {
  color: var(--theme-eyebrow);
}

.brand-section,
.user-chevron,
.workspace-chevron {
  color: var(--muted-strong);
}

.brand-divider {
  background: var(--line-strong);
}

.topbar-link {
  color: var(--text);
}

.button.primary,
.admin-tab.active,
.module-dialog-tabs .active {
  color: var(--theme-primary-button-color);
  background: var(--theme-primary-button-background);
}

.bureau-hero {
  background: var(--theme-hero-background);
  border-color: var(--line);
  box-shadow: 0 24px 60px var(--theme-shadow);
}

.environment-note,
.hero-values,
.module-card-content p,
.admin-shortcut p,
.module-dialog-identity p,
.module-benefits span,
.module-detail-grid p,
.feature-list,
.admin-summary span,
.form-grid label,
.access-note span,
.table-secondary,
.journal-agent,
.user-menu-panel span {
  color: var(--theme-module-copy);
}

.module-card,
.admin-shortcut,
.admin-summary > div,
.admin-card,
.admin-tabs {
  background: var(--theme-card-background);
  border-color: var(--theme-outline);
  box-shadow: 0 14px 36px var(--theme-shadow);
}

.module-visual {
  background:
    radial-gradient(circle at 50% 50%, rgba(68, 154, 255, .1), transparent 34%),
    color-mix(in srgb, var(--theme-soft-surface) 72%, transparent);
}

.status {
  color: var(--theme-status-neutral-color);
  background: var(--theme-status-neutral-background);
  border: 1px solid var(--theme-status-neutral-border);
}

.status-available {
  color: var(--theme-success-color);
  background: var(--theme-success-background);
  border-color: var(--theme-success-border);
}

.status-discover {
  color: var(--theme-info-color);
  background: var(--theme-info-background);
  border-color: var(--theme-info-border);
}

.module-discover {
  color: var(--text);
  border-color: var(--line-strong);
}

.notice.success {
  color: var(--theme-success-color);
  background: var(--theme-success-background);
  border: 1px solid var(--theme-success-border);
}

.notice.error {
  color: var(--theme-error-color);
  background: var(--theme-error-background);
  border: 1px solid color-mix(in srgb, var(--theme-error-color) 26%, transparent);
}

.notice.warning {
  color: var(--theme-warning-color);
  background: var(--theme-warning-background);
  border: 1px solid color-mix(in srgb, var(--theme-warning-color) 24%, transparent);
}

.risk-text {
  color: var(--theme-risk-color);
}

.feature-list li::before {
  color: var(--theme-success-accent);
}

.module-dialog-backdrop {
  background: color-mix(in srgb, var(--bg) 72%, transparent);
}

.module-dialog {
  background: var(--theme-modal-background);
  border-color: var(--line-strong);
  box-shadow: 0 32px 90px var(--theme-shadow);
}

.module-dialog-header {
  background: var(--theme-modal-header);
  border-bottom-color: var(--line);
}

.dialog-close {
  color: var(--text);
}

.dialog-close:hover,
.user-menu-panel a:hover,
.admin-tab:hover {
  background: color-mix(in srgb, var(--text) 6%, transparent);
}

.module-dialog-tabs {
  background: var(--theme-tabs-background);
  border-bottom-color: var(--line);
}

.module-dialog-tabs span {
  color: var(--muted-strong);
}

.module-benefits > div,
.access-note,
.module-update-card,
.module-generic-detail {
  background: var(--panel-soft);
  border-color: var(--line);
}

/* Le showcase eForms reste volontairement sombre dans tous les thèmes. */
.module-showcase-copy h3 {
  color: var(--theme-on-dark-text);
}

.module-showcase-copy p {
  color: var(--theme-on-dark-muted);
}

.showcase-kicker {
  color: var(--theme-on-dark-accent);
}

.user-menu {
  display: flex;
  align-items: center;
}

.user-menu > summary {
  min-height: 44px;
  display: grid;
  grid-template-columns: auto minmax(0, auto) 20px;
  align-items: center;
  gap: 9px;
  padding: 5px 9px 5px 5px;
  border: 1px solid var(--theme-user-summary-border);
  border-radius: 12px;
  background: var(--theme-user-summary);
  box-shadow: 0 6px 18px var(--theme-shadow);
  transition: background .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.user-menu > summary:hover,
.user-menu[open] > summary {
  background: var(--theme-user-summary-hover);
  border-color: var(--line-strong);
  box-shadow: 0 9px 24px var(--theme-shadow);
}

.user-menu > summary:focus-visible {
  outline: 2px solid var(--theme-focus-ring);
  outline-offset: 3px;
}

.user-name {
  display: block;
  line-height: 1.2;
}

.user-chevron {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  line-height: 1;
  transition: transform .16s ease;
}

.user-menu[open] .user-chevron {
  transform: rotate(180deg);
}

.user-avatar {
  background: color-mix(in srgb, var(--blue) 14%, var(--panel-strong));
  color: var(--text);
}

.user-menu-panel {
  background: var(--theme-menu-background);
  border-color: var(--line);
  box-shadow: 0 20px 50px var(--theme-shadow);
}

.user-menu-separator,
.admin-section {
  border-color: var(--theme-section-line);
  background-color: var(--theme-section-line);
}

.user-menu-panel a {
  color: var(--text);
}

.workspace-switcher > summary {
  background: var(--theme-workspace-summary);
  border-color: var(--line-strong);
  box-shadow: 0 8px 22px var(--theme-shadow);
}

.workspace-switcher > summary:hover,
.workspace-switcher[open] > summary {
  background: var(--theme-workspace-summary-hover);
  border-color: var(--line-strong);
}

.workspace-icon {
  color: var(--theme-workspace-icon);
}

.workspace-label,
.workspace-menu-title {
  color: var(--muted);
}

.workspace-summary-copy strong,
.workspace-option {
  color: var(--text);
}

.workspace-menu-panel {
  background: var(--theme-workspace-menu);
  border-color: var(--line);
  box-shadow: 0 20px 50px var(--theme-shadow);
}

.workspace-option:hover,
.workspace-option.is-active {
  background: color-mix(in srgb, var(--blue) 10%, transparent);
}

.workspace-option-check {
  background: color-mix(in srgb, var(--text) 4%, transparent);
  border-color: var(--line);
}

.workspace-option.is-active .workspace-option-check {
  color: var(--blue);
  background: color-mix(in srgb, var(--blue) 12%, transparent);
  border-color: var(--line-strong);
}

.admin-shortcut-platform .admin-shortcut-icon {
  color: var(--theme-platform-icon);
}

.preference-card,
.appearance-option-card {
  box-shadow: 0 14px 36px var(--theme-shadow);
}

.appearance-option input:checked + .appearance-option-card {
  border-color: var(--line-strong);
  background: color-mix(in srgb, var(--blue) 12%, var(--panel-soft));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blue) 18%, transparent), 0 10px 28px var(--theme-shadow);
}

.preference-field select,
.form-grid input,
.form-grid select,
.inline-form select {
  background: var(--theme-input-background);
  color: var(--text);
  border-color: var(--line-strong);
}

.admin-tabs {
  background: var(--theme-soft-surface);
}

.admin-tab {
  color: var(--muted-strong);
}

.admin-shortcut-state,
.admin-table th,
.table-secondary {
  color: var(--muted);
}

.admin-table th,
.admin-table td {
  border-bottom-color: var(--theme-table-line);
}

.session-timeout-dialog {
  background: var(--theme-modal-background);
  color: var(--text);
  border-color: var(--line-strong);
}

.session-timeout-backdrop {
  background: color-mix(in srgb, var(--bg) 70%, transparent);
}

@media (max-width: 760px) {
  .user-name {
    display: none;
  }

  .user-menu > summary {
    grid-template-columns: auto 20px;
    gap: 6px;
    padding-right: 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}