/* Police Inter (variable, hébergée : disponible hors ligne) */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/inter-latin-ext-wght-normal.woff2") format("woff2-variations"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2-variations"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Système de design (D59) : jetons par thème, inspiré de Supabase. Clair par défaut ; foncé via <html data-theme="dark"> (js/theme-init.js). */
:root,
:root[data-theme="light"] {
  --accent: #12805a;
  --accent-strong: #0d6647;
  --accent-soft: #e8f7ef;
  --accent-line: #8fd5b4;
  --brand: #3ecf8e;
  --bg: #fcfcfc;
  --surface: #ffffff;
  --surface-soft: #f5f5f5;
  --ink: #171717;
  --muted: #5f5f5f;
  --line: #e4e4e4;
  --side: #fafafa;
  --side-ink: #404040;
  --side-hover: #efefef;
  --side-active-bg: #e8f7ef;
  --side-active-ink: #0d6647;
  --danger: #b42318;
  --danger-bg: #fff0ee;
  --danger-line: #e6a29c;
  --warning: #a16207;
  --warn-bg: #fff7df;
  --warn-line: #e7c46e;
  --warn-ink: #4a3600;
  --success: #15803d;
  --shadow: 0 6px 24px rgba(0, 0, 0, .08);
  --radius: 6px;
  --side-width: 264px;
  --side-width-collapsed: 64px;
  --topbar-height: 56px;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --accent: #3ecf8e;
  --accent-strong: #6ee7b0;
  --accent-soft: #12261d;
  --accent-line: #1f6b4a;
  --bg: #121212;
  --surface: #1c1c1c;
  --surface-soft: #262626;
  --ink: #ededed;
  --muted: #a3a3a3;
  --line: #2e2e2e;
  --side: #171717;
  --side-ink: #b4b4b4;
  --side-hover: #232323;
  --side-active-bg: #1b2d25;
  --side-active-ink: #3ecf8e;
  --danger: #ff8a80;
  --danger-bg: #2d1715;
  --danger-line: #6e2f2a;
  --warning: #f5c451;
  --warn-bg: #2a2410;
  --warn-line: #6b5a1e;
  --warn-ink: #f3d98a;
  --success: #4ade80;
  --shadow: 0 6px 24px rgba(0, 0, 0, .5);
  color-scheme: dark;
}

* { box-sizing: border-box; }

html { min-height: 100%; background: var(--bg); }

body {
  margin: 0;
  font-family: "Inter", "Segoe UI", Roboto, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  color: var(--ink);
  background: var(--bg);
}

a { color: inherit; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.ico { width: 20px; height: 20px; flex: 0 0 20px; fill: currentColor; }

/* ---- Mise en page ---- */
.shell { display: flex; min-height: 100dvh; }

.main { display: flex; flex: 1; flex-direction: column; min-width: 0; }

.sidebar {
  position: sticky;
  top: 0;
  z-index: 20;
  width: var(--side-width);
  height: 100dvh;
  flex: 0 0 var(--side-width);
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  color: var(--side-ink);
  background: var(--side);
  border-right: 1px solid var(--line);
  transition: width .18s ease, flex-basis .18s ease;
}

:root[data-side="collapsed"] .sidebar { width: var(--side-width-collapsed); flex-basis: var(--side-width-collapsed); }

.brand { min-height: var(--topbar-height); display: flex; align-items: center; padding: 0 4px; }

.brand-link {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: var(--ink);
  font-size: 1.1rem;
  font-weight: 700;
  text-decoration: none;
}

.brand-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.brand-mark {
  display: none;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  color: #07130d;
  background: var(--brand);
  border-radius: var(--radius);
  font-weight: 800;
}

.logo { display: none; max-width: 100%; max-height: 36px; width: auto; height: auto; }
:root[data-theme="light"] .logo-clair,
:root[data-theme="dark"] .logo-sombre,
.logo:only-of-type { display: block; }
.brand-link:has(.logo) .brand-text { display: none; }
.brand-link:not(:has(.logo)) .brand-mark { display: grid; }
:root[data-side="collapsed"] .logo { display: none; }
:root[data-side="collapsed"] .brand-mark { display: grid; }
:root[data-side="collapsed"] .brand-text { display: none; }

.sidenav {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.sidenav .nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 40px;
  padding: 8px 12px;
  border-radius: var(--radius);
  color: var(--side-ink);
  font-size: .95rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .15s ease, color .15s ease;
}

.sidenav .nav-link:hover { color: var(--ink); background: var(--side-hover); }
.sidenav .nav-link.is-active { color: var(--side-active-ink); background: var(--side-active-bg); font-weight: 600; }
.sidenav .nav-link:focus-visible,
.icon-btn:focus-visible,
.profile-btn:focus-visible,
.profile-menu a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

:root[data-side="collapsed"] .nav-label { display: none; }
:root[data-side="collapsed"] .sidenav .nav-link { justify-content: center; padding: 8px; }

/* ---- Bande du haut ---- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 15;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--topbar-height);
  padding: 0 clamp(16px, 3vw, 32px);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  color: var(--muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}

.icon-btn:hover { color: var(--ink); background: var(--surface-soft); }

.ico-unfold,
.ico-moon { display: none; }
:root[data-side="collapsed"] .ico-fold { display: none; }
:root[data-side="collapsed"] .ico-unfold { display: block; }
:root[data-theme="light"] .ico-sun { display: none; }
:root[data-theme="light"] .ico-moon { display: block; }

.breadcrumb { min-width: 0; flex: 1; }
.breadcrumb ol { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; color: var(--muted); font-size: .9rem; }
.breadcrumb li { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.breadcrumb li + li::before { content: "/"; color: var(--line); }
.breadcrumb a { display: inline-flex; align-items: center; color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--ink); }
.breadcrumb [aria-current="page"] { color: var(--ink); font-weight: 600; }

.topbar-right { display: flex; align-items: center; gap: 8px; margin-left: auto; }

.clock { color: var(--muted); font-size: .85rem; font-variant-numeric: tabular-nums; white-space: nowrap; text-transform: capitalize; }

/* ---- Menu profil ---- */
.profile { position: relative; }

.profile-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 3px 8px 3px 4px;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  font: inherit;
  font-size: .9rem;
}

.profile-btn:hover { background: var(--surface-soft); }

.avatar {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  color: #07130d;
  background: var(--brand);
  border-radius: 50%;
  font-size: .8rem;
  font-weight: 700;
}

.profile-name { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.profile-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 40;
  min-width: 220px;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow);
}

.profile-menu[hidden] { display: none; }
.profile-menu-head { margin: 0; padding: 8px 10px; color: var(--muted); font-size: .85rem; border-bottom: 1px solid var(--line); }

.profile-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  padding: 8px 10px;
  border-radius: var(--radius);
  color: var(--ink);
  font-size: .92rem;
  text-decoration: none;
}

.profile-menu a:hover { background: var(--surface-soft); }

/* ---- Centre de notifications (js/notifications/center.js) ---- */
#notification-center { position: relative; }
.notification-center__toggle {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  color: var(--muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
}
.notification-center__toggle:hover { color: var(--ink); background: var(--surface-soft); }
.notification-center__badge {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 18px;
  padding: 0 5px;
  color: #07130d;
  background: var(--brand);
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}
.notification-center__panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 40;
  width: min(92vw, 380px);
  max-height: 70vh;
  overflow-y: auto;
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow);
}
.notification-center__panel[hidden] { display: none; }
.notification-item { padding: 10px; border-radius: var(--radius); }
.notification-item--unread { background: var(--accent-soft); }

.content {
  flex: 1;
  min-width: 0;
  max-width: 1480px;
  padding: 34px clamp(24px, 4vw, 56px) 72px;
}

.content > h1 {
  margin: 0 0 22px;
  color: var(--ink);
  font-size: clamp(1.5rem, 2.2vw, 1.85rem);
  line-height: 1.08;
  letter-spacing: 0;
}

.content h2 {
  margin: 28px 0 12px;
  font-size: 1.45rem;
  line-height: 1.2;
}

.content h3 {
  margin: 24px 0 10px;
  font-size: 1.15rem;
  line-height: 1.25;
}

.content p { margin: 0 0 14px; }

.content ul { margin: 10px 0 18px; }

.content button,
.content input,
.content select,
.content textarea {
  max-width: 100%;
  font: inherit;
}

.content input,
.content select,
.content textarea {
  min-height: 38px;
  padding: 7px 10px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
}

.content textarea {
  min-height: 108px;
  resize: vertical;
}

.content button {
  min-height: 34px;
  padding: 7px 12px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease;
}

.content button:hover:not(:disabled) {
  color: var(--accent-strong);
  background: var(--accent-soft);
  border-color: var(--accent-line);
}

.content button:disabled {
  cursor: not-allowed;
  opacity: .55;
}

.content input:focus,
.content select:focus,
.content textarea:focus,
.content button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.content fieldset {
  margin: 12px 0 16px;
  padding: 14px 16px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.content legend {
  padding: 0 6px;
  color: var(--muted);
  font-weight: 700;
}

.content label { font-weight: 600; }

#grid-root { max-width: min(100%, 1180px); }

.toasts {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.toast {
  padding: 10px 14px;
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.toast-danger,
.toast-error { border-left-color: var(--danger); }
.toast-warning { border-left-color: var(--warning); }
.toast-success { border-left-color: var(--success); }

.module-soon { color: var(--muted); }

.annonce {
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding: 12px 14px;
  margin-bottom: 16px;
  color: var(--ink);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius);
}

.annonce[hidden] { display: none; }
.annonce-avertissement { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn-ink); }

.annonce .annonce-close {
  margin-left: auto;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 1.1rem;
  cursor: pointer;
}

.account-form input { min-width: 260px; }
.account-info dt { margin-top: 8px; font-weight: 700; }
.account-info dd { margin: 0 0 4px; }

/* Page de connexion et de maintenance (aucun style en ligne : CSP style-src-attr) */
.login-card {
  max-width: 420px;
  margin: 10vh auto;
  padding: 28px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* Pastille d'état de la synchronisation (js/offline/pill.js) */
#sync-pill {
  position: fixed;
  right: 12px;
  bottom: 12px;
  z-index: 40;
  padding: 7px 14px;
  color: var(--ink);
  text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: var(--shadow);
  font-size: .86rem;
}

#sync-pill[data-state="offline"],
#sync-pill[data-state="auth_required"] { background: var(--warn-bg); border-color: var(--warn-line); }
#sync-pill[data-state="error"] { background: var(--danger-bg); border-color: var(--danger-line); }
#sync-pill[data-state="idle"] { border-color: var(--brand); }

/* Écran PIN (js/offline/lock-ui.js) : affichage piloté par l'attribut hidden, aucun style en ligne */
#regulatis-lock {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background: rgba(23, 23, 23, .96);
  font-family: system-ui, sans-serif;
}

#regulatis-lock[hidden] { display: none; }

#regulatis-lock .lock-form {
  width: min(92vw, 360px);
  padding: 26px;
  color: var(--ink);
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

#regulatis-lock .lock-title { margin-top: 0; }
#regulatis-lock .lock-help { font-size: .9rem; }
#regulatis-lock .lock-pin { width: 100%; padding: 10px; font-size: 1.2rem; }
#regulatis-lock .lock-error { min-height: 1.2em; color: var(--danger); font-size: .9rem; }
#regulatis-lock .lock-btn { padding: 10px 16px; }
#regulatis-lock .lock-btn-forgot { margin-left: 8px; }
#regulatis-lock .lock-btn[hidden] { display: none; }

/* Écran Synchronisation (js/offline/console.js) : conflits de champs protégés */
.conflict-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  margin-bottom: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.conflict-version {
  padding: 8px 12px;
  background: var(--surface-soft);
  border-radius: 6px;
}

.conflict-version h4 { margin: 0 0 4px; }
.conflict-version p { margin: 2px 0; font-size: .9rem; }

@media (max-width: 900px) {
  .sidebar,
  :root[data-side="collapsed"] .sidebar { width: var(--side-width-collapsed); flex-basis: var(--side-width-collapsed); }
  .nav-label,
  .brand-text,
  .logo { display: none; }
  .brand-mark { display: grid; }
  .sidenav .nav-link { justify-content: center; padding: 8px; }
  #side-toggle { display: none; }
  .profile-name { display: none; }
  .content { padding: 24px 16px 64px; }
}

@media (max-width: 700px) {
  .clock { display: none; }
}

/* Pages publiques (connexion, maintenance) : ni menu, ni bouton de repli */
.shell-public .sidebar,
.shell-public #side-toggle { display: none; }

/* ---- Composants partagés (D59) ---- */
.clock::first-letter { text-transform: uppercase; }
.clock { text-transform: none; }

.sidenav { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }

.content label {
  display: grid;
  gap: 4px;
  max-width: 34rem;
  margin: 0 0 12px;
  color: var(--ink);
  font-size: .92rem;
  font-weight: 600;
}

.content label:has(> input[type="checkbox"]),
.content label:has(> input[type="radio"]) { display: flex; align-items: center; gap: 8px; font-weight: 500; }

.content input[type="checkbox"],
.content input[type="radio"] { min-height: 0; accent-color: var(--accent); }

.content input,
.content select,
.content textarea { width: 100%; max-width: 34rem; }

.content input:focus,
.content select:focus,
.content textarea:focus { border-color: var(--accent); }

.content input::placeholder { color: var(--muted); }

.content button.btn-primary {
  color: #07130d;
  background: var(--brand);
  border-color: var(--brand);
  font-weight: 600;
}

.content button.btn-primary:hover:not(:disabled) { color: #07130d; background: var(--accent-strong); border-color: var(--accent-strong); }
:root[data-theme="light"] .content button.btn-primary:hover:not(:disabled) { color: #ffffff; background: var(--accent-strong); }

.content button.btn-danger { color: var(--danger); border-color: var(--danger-line); }
.content button.btn-danger:hover:not(:disabled) { color: var(--danger); background: var(--danger-bg); border-color: var(--danger); }

/* Onglets (js/admin/tabs.js) */
.wg-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 18px; border-bottom: 1px solid var(--line); }

.content .wg-tab {
  min-height: 40px;
  padding: 8px 14px;
  margin-bottom: -1px;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  font-weight: 500;
}

.content .wg-tab:hover:not(:disabled) { color: var(--ink); background: transparent; border-color: var(--line); }
.content .wg-tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--brand); font-weight: 600; }

/* Tableaux et listes */
.content table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); font-size: .92rem; }
.content th { padding: 10px 12px; color: var(--muted); background: var(--surface-soft); border-bottom: 1px solid var(--line); font-size: .8rem; font-weight: 600; letter-spacing: .02em; text-align: left; text-transform: uppercase; }
.content td { padding: 10px 12px; border-bottom: 1px solid var(--line); }
.content tr:last-child td { border-bottom: 0; }

.content ul:not([class]) { padding-left: 0; list-style: none; }
.content ul:not([class]) > li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 10px 12px; margin-bottom: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }

.content a { color: var(--accent); }
.content a:hover { color: var(--accent-strong); }

/* Page de connexion */
.login-page { display: grid; place-items: center; min-height: 100dvh; padding: 16px; }
.login-page .login-card { width: 100%; margin: 0; padding: 32px; }
.login-brand { justify-content: center; margin-bottom: 8px; }
.login-card h1 { margin: 0 0 4px; font-size: 1.4rem; text-align: center; }
.login-sub { margin: 0 0 20px; color: var(--muted); font-size: .92rem; text-align: center; }
.login-card input { max-width: none; }
.login-submit { width: 100%; margin-top: 4px; }
.login-brand .logo { max-height: 56px; }

/* Administration : logos par thème */
.logo-carte { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px; margin-bottom: 10px; border: 1px solid var(--line); border-radius: var(--radius); }
.logo-carte img { max-width: 160px; max-height: 48px; padding: 8px; border-radius: var(--radius); }
.logo-carte img[hidden] { display: none; }
.logo-carte-clair img { background: #ffffff; }
.logo-carte-sombre img { background: #171717; }
.logo-carte label { margin: 0; }
.login-brand .brand-mark { display: grid; width: 44px; height: 44px; flex-basis: 44px; font-size: 1.3rem; }