/* ── TOKENS ───────────────────────────────────────────── */
    :root {
      --font-sans: 'DM Sans', sans-serif;
      --font-mono: 'DM Mono', monospace;

      --bg:          #f5f4f1;
      --surface:     #ffffff;
      --surface-2:   #fafaf8;
      --border:      #e8e6e0;
      --border-soft: #f0ede8;

      --ink:         #1a1916;
      --ink-2:       #5a5750;
      --ink-3:       #9a9690;

      --accent:      #2563eb;
      --accent-soft: #eff4ff;
      --accent-text: #1d4ed8;

      --green:       #16a34a;
      --green-soft:  #f0fdf4;
      --amber:       #d97706;
      --amber-soft:  #fffbeb;
      --red:         #dc2626;
      --red-soft:    #fef2f2;

      --radius-sm:   6px;
      --radius:      10px;
      --radius-lg:   16px;
      --radius-xl:   22px;

      --shadow-sm:   0 1px 2px rgba(26,25,22,.06);
      --shadow:      0 2px 8px rgba(26,25,22,.08), 0 0 0 1px rgba(26,25,22,.04);
      --shadow-lg:   0 8px 32px rgba(26,25,22,.12), 0 0 0 1px rgba(26,25,22,.05);

      --header-h:    64px;
    }
    [data-theme="dark"] {
      --bg:          #0e0e0c;
      --surface:     #171714;
      --surface-2:   #1e1e1a;
      --border:      #2a2a26;
      --border-soft: #222220;

      --ink:         #f0ede8;
      --ink-2:       #a8a49e;
      --ink-3:       #5a5750;

      --accent:      #3b82f6;
      --accent-soft: #1a2540;
      --accent-text: #93c5fd;

      --green:       #22c55e;
      --green-soft:  #0f2a1a;
      --amber:       #f59e0b;
      --amber-soft:  #2a1f06;
      --red:         #f87171;
      --red-soft:    #2a1010;

      --shadow-sm:   0 1px 2px rgba(0,0,0,.3);
      --shadow:      0 2px 8px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.04);
      --shadow-lg:   0 8px 32px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.06);
    }

/* ── Link colors — lisible en thème sombre ──────────────────────────────── */
a { color: var(--accent-text); }
[data-theme="dark"] a { color: var(--accent-text); }
/* Exceptions : liens de navigation, footer, chips — gardent leur couleur */
[data-theme="dark"] .chip,
[data-theme="dark"] .page-btn,
[data-theme="dark"] .btn,
[data-theme="dark"] .sync-meta a,
[data-theme="dark"] footer a,
[data-theme="dark"] .auth-footer a { color: inherit; }

/* ── Lucide icons ────────────────────────────────────────────────────────── */
/* Les SVG sont injectés inline via la macro Jinja icon() dans macros.html.  */
/* Le style display/vertical-align est défini directement dans la macro SVG. */


    /* ── RESET & BASE ─────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { font-size: 15px; }
    body {
      font-family: var(--font-sans);
      background: var(--bg);
      color: var(--ink);
      min-height: 100vh;
      /* overflow-x:clip bloque le scroll horizontal sans créer de
         contexte de scroll — position:sticky reste fonctionnel */
      overflow-x: clip;
      -webkit-font-smoothing: antialiased;
      transition: background .25s, color .25s;
    }

    /* ── TOP HEADER ───────────────────────────────────────── */
    .app-header {
      position: sticky;
      top: 0;
      z-index: 100;
      height: var(--header-h);
      background: var(--surface);
      border-bottom: 1px solid var(--border);
      box-shadow: var(--shadow-sm);
      display: flex;
      align-items: center;
      padding: 0 28px;
      gap: 16px;
    }
    .app-header-brand {
      display: flex;
      align-items: center;
      gap: 10px;
      flex: 1;
    }
    .app-header-icon {
      width: 34px; height: 34px;
      background: var(--accent);
      border-radius: var(--radius-sm);
      display: flex; align-items: center; justify-content: center;
      font-size: 16px;
      flex-shrink: 0;
    }
    .app-header-title {
      font-size: 1rem;
      font-weight: 600;
      letter-spacing: -.01em;
      color: var(--ink);
    }
    .app-header-sub {
      font-size: .75rem;
      color: var(--ink-3);
      font-weight: 400;
    }
    .app-header-actions { display: flex; align-items: center; gap: 10px; }

    /* ── THEME TOGGLE ─────────────────────────────────────── */
    #themeToggle {
      width: 36px; height: 36px;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      background: var(--surface-2);
      color: var(--ink-2);
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      font-size: 15px;
      transition: border-color .15s, background .15s;
    }
    #themeToggle:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

    /* ── BUTTONS ──────────────────────────────────────────── */
    .btn {
      display: inline-flex; align-items: center; gap: 6px;
      font-family: var(--font-sans);
      font-size: .8rem; font-weight: 500;
      padding: 0 14px; height: 34px;
      border-radius: var(--radius-sm);
      border: 1px solid transparent;
      cursor: pointer;
      transition: all .15s;
      white-space: nowrap;
      text-decoration: none;
    }
    .btn-primary {
      background: var(--accent); color: #fff; border-color: var(--accent);
    }
    .btn-primary:hover { background: var(--accent-text); border-color: var(--accent-text); }
    .btn-primary:disabled { opacity: .45; cursor: not-allowed; }
    .btn-ghost {
      background: transparent; color: var(--ink-2); border-color: var(--border);
    }
    .btn-ghost:hover { background: var(--surface-2); color: var(--ink); border-color: var(--ink-3); }
    .btn-active {
      background: var(--accent-soft); color: var(--accent-text); border-color: var(--accent);
      font-weight: 600;
    }
    .btn-active:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
    .btn-active {
      background: var(--accent-soft); color: var(--accent-text); border-color: var(--accent);
      font-weight: 600;
    }
    .btn-active:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

    /* ── MAIN LAYOUT ──────────────────────────────────────── */
    .app-body { padding: 28px; max-width: 1400px; margin: 0 auto; }

    /* ── SYNC BAR ─────────────────────────────────────────── */
    .sync-bar {
      display: flex; align-items: center; gap: 12px;
      margin-bottom: 20px; flex-wrap: wrap;
    }
    .sync-meta {
      display: flex; align-items: center; gap: 8px;
      font-size: .78rem; color: var(--ink-3);
    }
    .sync-dot {
      width: 6px; height: 6px; border-radius: 50%;
      background: var(--green); flex-shrink: 0;
      box-shadow: 0 0 0 2px var(--green-soft);
    }
    .cooldown-pill {
      display: inline-flex; align-items: center; gap: 5px;
      background: var(--surface-2); border: 1px solid var(--border);
      border-radius: 99px; padding: 2px 10px;
      font-size: .72rem; color: var(--ink-2); font-family: var(--font-mono);
    }

    /* ── FLASH ALERTS ─────────────────────────────────────── */
    .flash {
      display: flex; align-items: flex-start; gap: 10px;
      padding: 12px 16px; border-radius: var(--radius);
      border: 1px solid; font-size: .82rem;
      margin-bottom: 16px;
    }
    .flash-success { background: var(--green-soft); border-color: var(--green); color: var(--green); }
    .flash-warning { background: var(--amber-soft); border-color: var(--amber); color: var(--amber); }
    .flash-danger  { background: var(--red-soft);   border-color: var(--red);   color: var(--red); }
    .flash-close { margin-left: auto; background: none; border: none; cursor: pointer; color: inherit; font-size: 14px; opacity: .6; padding: 0 2px; }
    .flash-close:hover { opacity: 1; }

    /* ── FILTER PANEL ─────────────────────────────────────── */
    .filter-sticky-wrap {
      position: sticky;
      top: var(--header-h);
      z-index: 90;
      margin-bottom: 16px;
    }
    /* Mobile toggle bar — hidden on desktop */
    .filter-mobile-bar {
      display: none;
      align-items: center; justify-content: space-between;
      padding: 8px 0; gap: 8px;
    }
    .filter-mobile-btn {
      display: inline-flex; align-items: center; gap: 7px;
      font-family: var(--font-sans); font-size: .82rem; font-weight: 600;
      color: var(--ink); background: var(--surface);
      border: 1px solid var(--border); border-radius: var(--radius-sm);
      padding: 0 14px; height: 36px; cursor: pointer;
      transition: all .15s;
    }
    .filter-mobile-btn:hover, .filter-mobile-btn[aria-expanded="true"] {
      border-color: var(--accent); color: var(--accent); background: var(--accent-soft);
    }
    .filter-active-count {
      display: inline-flex; align-items: center; justify-content: center;
      background: var(--accent); color: #fff;
      font-size: .65rem; font-weight: 700;
      width: 18px; height: 18px; border-radius: 50%;
      line-height: 1;
    }
    .filter-mobile-reset {
      font-family: var(--font-sans); font-size: .78rem; font-weight: 500;
      color: var(--ink-3); background: none;
      border: 1px solid var(--border); border-radius: var(--radius-sm);
      padding: 0 12px; height: 36px; cursor: pointer;
      transition: all .15s;
    }
    .filter-mobile-reset:hover { border-color: var(--red); color: var(--red); background: var(--red-soft); }

    /* Quick filter pills dans la barre mobile */
    .filter-mobile-quick {
      display: flex;
      align-items: center;
      gap: 5px;
      height: 30px;
      padding: 0 10px;
      font-size: .72rem;
      font-weight: 500;
      color: var(--ink-2);
      background: var(--surface-2);
      border: 1px solid var(--border);
      border-radius: 99px;
      cursor: pointer;
      white-space: nowrap;
      flex-shrink: 0;
      transition: border-color .12s, background .12s, color .12s;
    }
    .filter-mobile-quick.active,
    .filter-mobile-quick[aria-pressed="true"] {
      background: var(--accent-soft);
      border-color: var(--accent);
      color: var(--accent-text);
      font-weight: 600;
    }
    /* Backdrop */
    .filter-backdrop {
      display: none; position: fixed; inset: 0;
      background: rgba(10,10,8,.45); backdrop-filter: blur(2px);
      z-index: 88;
    }
    .filter-backdrop.active { display: block; }
    /* Mobile sheet header — hidden on desktop */
    .filter-sheet-header {
      display: none;
      align-items: center; justify-content: space-between;
      padding: 14px 16px 10px;
      border-bottom: 1px solid var(--border-soft);
      flex-shrink: 0;
    }
    .filter-sheet-title { font-size: .9rem; font-weight: 700; color: var(--ink); }
    .filter-sheet-close {
      width: 30px; height: 30px;
      border: 1px solid var(--border); border-radius: var(--radius-sm);
      background: transparent; color: var(--ink-3);
      cursor: pointer; display: flex; align-items: center; justify-content: center;
      font-size: 16px; transition: all .12s;
    }
    .filter-sheet-close:hover { background: var(--red-soft); color: var(--red); border-color: var(--red); }
    .filter-panel {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow);
      display: flex; flex-direction: column; gap: 0;
    }
    /* always-visible top strip */
    .filter-panel-main {
      padding: 12px 16px;
      display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end;
    }
    /* advanced section — collapsed by default */
    .filter-panel-advanced {
      max-height: 0;
      overflow: hidden;
      transition: max-height .28s ease, padding .28s ease;
      padding: 0 16px;
      border-top: 0px solid var(--border-soft);
    }
    .filter-panel-advanced.open {
      max-height: 300px;
      padding: 12px 16px;
      border-top-width: 1px;
    }
    .filter-row {
      display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end;
    }
    .filter-row + .filter-row {
      margin-top: 10px;
      padding-top: 10px;
      border-top: 1px solid var(--border-soft);
    }
    /* advanced toggle bar */
    .filter-panel-toggle {
      display: flex; align-items: center; justify-content: center;
      gap: 6px;
      padding: 5px 16px;
      width: 100%; box-sizing: border-box;
      border-top: 1px solid var(--border-soft);
      border-left: none; border-right: none; border-bottom: none;
      background: var(--surface-2);
      cursor: pointer;
      font-size: .72rem; font-weight: 600; color: var(--ink-2);
      transition: background .15s, color .15s;
      user-select: none;
    }
    .filter-panel-toggle:last-child {
      border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    }
    .filter-panel-toggle:hover { background: var(--accent-soft); color: var(--accent-text); }
    .filter-panel-toggle .toggle-arrow {
      font-size: .6rem;
      transition: transform .28s ease;
    }
    .filter-panel-toggle.open .toggle-arrow { transform: rotate(180deg); }
    /* active-dot on toggle when advanced filters are set */
    .filter-panel-toggle .toggle-dot {
      width: 5px; height: 5px; border-radius: 50%;
      background: var(--accent);
      display: none;
      flex-shrink: 0;
    }
    .filter-panel-toggle .toggle-dot.visible { display: inline-block; }
    /* Transparent sur desktop — sticky fonctionne car pas d'overflow:hidden ancêtre */
    .filter-scroll-body { display: contents; }
    .filter-group { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 140px; }
    /* ── DATE RANGE PICKER ────────────────────────────────── */
    .filter-date-pair {
      display: flex; gap: 10px;
      flex-basis: 100%;
      flex-shrink: 0;
      position: relative;
    }
    .filter-date-pair .filter-group { flex: 1; min-width: 200px; }

    /* Trigger button */
    .date-range-btn {
      display: flex; align-items: center; justify-content: space-between;
      cursor: pointer; text-align: left; gap: 6px;
      padding: 0 10px;
    }
    .date-range-btn:hover { border-color: var(--accent); }
    .date-range-display { display: flex; align-items: center; gap: 7px; flex: 1; min-width: 0; overflow: hidden; }
    .date-range-placeholder { color: var(--ink-3); font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .date-range-value { color: var(--ink); font-size: .8rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .date-range-clear {
      flex-shrink: 0; font-size: .7rem; color: var(--ink-3);
      width: 18px; height: 18px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      background: var(--border); transition: all .12s;
    }
    .date-range-clear:hover { background: var(--red-soft); color: var(--red); }
    .date-range-btn.has-value { border-color: var(--accent); background: var(--accent-soft); }
    .date-range-btn.has-value .date-range-value { color: var(--accent-text); }

    /* Floating panel */
    .drp-panel {
      position: fixed;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-lg);
      z-index: 300;
      padding: 16px;
      width: 560px;
      animation: drpIn .15s ease;
    }
    /* ── Tablet (≤900px) ── */
    @media (max-width: 900px) {
      .app-header { padding: 0 16px; }
      .app-header-title { font-size: .9rem; }
      .app-body { padding: 20px 16px; }
      .sync-bar { gap: 8px; }
    }
    /* ── Small laptop / large tablet (≤860px) ── */
    @media (max-width: 860px) {
      .filter-group { min-width: calc(50% - 5px); flex-basis: calc(50% - 5px); }
      .filter-group[style*="flex:2"] { min-width: 100% !important; flex-basis: 100%; }
      .filter-date-pair { flex-direction: row; }
    }
    /* ── Mobile (≤640px): bottom sheet filter panel ── */
    @media (max-width: 640px) {
      .drp-panel { width: calc(100vw - 32px); }
      .drp-calendars { grid-template-columns: 1fr !important; }
      .app-body { padding: 12px 12px; }
      .table-toolbar { gap: 6px; }
      .table-title { font-size: .85rem; }
      .filter-mobile-bar { display: flex; }
      .filter-sticky-wrap { position: static; margin-bottom: 12px; }

      /* Panel : flex-column, header figé, corps scrollable */
      .filter-panel {
        position: fixed;
        bottom: 0; left: 0; right: 0;
        z-index: 89;
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
        max-height: 88vh;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        transform: translateY(100%);
        transition: transform .3s cubic-bezier(.32,.72,0,1);
      }
      .filter-panel.mobile-open { transform: translateY(0); }

      /* Header toujours visible */
      .filter-sheet-header {
        display: flex;
        flex-shrink: 0;
        background: var(--surface);
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
        box-shadow: 0 2px 6px rgba(0,0,0,.1);
        z-index: 1;
      }

      /* Corps scrollable — annule display:contents desktop */
      .filter-scroll-body {
        display: flex !important;
        flex-direction: column;
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior: contain;
        padding-bottom: env(safe-area-inset-bottom, 16px);
      }

      .filter-panel-main { padding: 12px 16px 8px; flex-shrink: 0; }
      .filter-group { min-width: 100% !important; flex-basis: 100%; }
      .filter-date-pair { flex-direction: column; }
      .filter-date-pair .filter-group { min-width: 100% !important; }

      /* Toggle : dans le flux du scroll */
      .filter-panel-toggle { border-radius: 0; width: 100%; position: static; flex-shrink: 0; }

      /* Advanced : display:none par défaut sur mobile (évite overflow:visible bug)
         display:block quand .open — transition gérée par JS */
      .filter-panel-advanced {
        display: none;
        overflow-y: visible;
        flex-shrink: 0;
        padding: 0 16px;
      }
      .filter-panel-advanced.open {
        display: block;
        padding: 12px 16px;
        border-top: 1px solid var(--border-soft);
      }
    }

    @keyframes drpIn { from { opacity:0; transform: translateY(6px) scale(.98); } to { opacity:1; transform:none; } }

    /* Header nav */
    .drp-header {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 12px;
    }
    .drp-months {
      display: flex; gap: 0; flex: 1; justify-content: space-around;
    }
    .drp-month-label {
      font-size: .82rem; font-weight: 700; color: var(--ink);
      text-align: center; flex: 1;
    }
    .drp-nav {
      width: 28px; height: 28px; border-radius: var(--radius-sm);
      border: 1px solid var(--border); background: var(--surface-2);
      color: var(--ink-2); font-size: 14px; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      transition: all .12s; flex-shrink: 0;
    }
    .drp-nav:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

    /* Calendar grid */
    .drp-calendars {
      display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
    }
    .drp-cal { display: flex; flex-direction: column; gap: 4px; }
    .drp-weekdays {
      display: grid; grid-template-columns: repeat(7, 1fr);
      margin-bottom: 2px;
    }
    .drp-wd {
      font-size: .62rem; font-weight: 700; color: var(--ink-3);
      text-align: center; padding: 3px 0;
      text-transform: uppercase; letter-spacing: .04em;
    }
    .drp-days {
      display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px;
    }
    .drp-day {
      aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
      font-size: .76rem; font-weight: 500; color: var(--ink-2);
      border-radius: var(--radius-sm); cursor: pointer;
      border: none; background: transparent;
      transition: background .1s, color .1s;
      font-family: var(--font-mono);
    }
    .drp-day:hover:not(.drp-day-empty):not(.drp-day-start):not(.drp-day-end) {
      background: var(--surface-2); color: var(--ink);
    }
    .drp-day-empty { pointer-events: none; }
    .drp-day-other  { color: var(--ink-3); opacity: .4; }
    /* In-range highlight */
    .drp-day-in-range {
      background: var(--accent-soft); color: var(--accent-text);
      border-radius: 0;
    }
    /* Start / end caps */
    .drp-day-start, .drp-day-end {
      background: var(--accent) !important; color: #fff !important;
      border-radius: var(--radius-sm) !important;
      font-weight: 700;
    }
    .drp-day-start.drp-day-in-range { border-radius: var(--radius-sm) 0 0 var(--radius-sm) !important; }
    .drp-day-end.drp-day-in-range   { border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important; }
    .drp-day-start.drp-day-end      { border-radius: var(--radius-sm) !important; }
    /* Today marker */
    .drp-day-today:not(.drp-day-start):not(.drp-day-end) {
      color: var(--accent); font-weight: 700;
      box-shadow: inset 0 0 0 1px var(--accent);
    }

    /* Footer */
    .drp-footer {
      display: flex; align-items: center; justify-content: space-between;
      margin-top: 12px; padding-top: 10px;
      border-top: 1px solid var(--border-soft);
    }
    .drp-selected-label { font-size: .75rem; color: var(--ink-2); font-weight: 500; }
    .drp-clear {
      font-size: .74rem; font-weight: 500; color: var(--ink-3);
      background: none; border: 1px solid var(--border);
      border-radius: var(--radius-sm); padding: 3px 10px; cursor: pointer;
      transition: all .12s; font-family: var(--font-sans);
    }
    .drp-clear:hover { border-color: var(--red); color: var(--red); background: var(--red-soft); }
    .filter-group label { font-size: .7rem; font-weight: 700; color: var(--ink-2); text-transform: uppercase; letter-spacing: .05em; }
    .filter-input {
      font-family: var(--font-sans); font-size: .82rem;
      background: var(--bg); color: var(--ink);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      padding: 0 10px; height: 34px;
      outline: none; width: 100%;
      transition: border-color .15s, box-shadow .15s;
    }
    .filter-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
    .filter-input.has-value {
      border-color: var(--accent);
      background: var(--accent-soft);
      color: var(--accent-text);
      font-weight: 500;
    }
    .filter-input.has-value:focus {
      box-shadow: 0 0 0 3px rgba(37,99,235,.18);
    }
    /* Also highlight the label above an active filter */
    .filter-group:has(.filter-input.has-value) > label,
    .filter-group:has(.filter-tags-button.has-value) > label {
      color: var(--accent-text);
    }
    .filter-tags-button.has-value {
      border-color: var(--accent);
      background: var(--accent-soft);
    }
    .filter-input::placeholder { color: var(--ink-3); }
    .filter-input option { background: var(--surface); color: var(--ink); }
    /* Fix date picker in dark mode */
    [data-theme="dark"] input[type="date"].filter-input { color-scheme: dark; }
    input[type="date"].filter-input::-webkit-calendar-picker-indicator {
      cursor: pointer; opacity: .55; transition: opacity .15s;
    }
    input[type="date"].filter-input::-webkit-calendar-picker-indicator:hover { opacity: 1; }

    /* ── TABLE TOOLBAR ────────────────────────────────────── */
    .table-toolbar {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 10px; flex-wrap: wrap; gap: 10px;
    }
    .table-toolbar-left { display: flex; align-items: center; gap: 12px; }
    .table-title { font-size: .95rem; font-weight: 600; color: var(--ink); }
    .status-text { font-size: .78rem; color: var(--ink-3); }
    .status-pct {
      font-size: .7rem; font-weight: 500;
      background: var(--accent-soft); color: var(--accent-text);
      border-radius: 99px; padding: 1px 8px;
    }
    .table-toolbar-right { display: flex; align-items: center; gap: 8px; }
    .page-size-wrap { display: flex; align-items: center; gap: 6px; }
    .page-size-label { font-size: .75rem; color: var(--ink-3); }

    /* ── TABLE CARD ───────────────────────────────────────── */
    .table-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow);
      overflow: hidden;
      margin-bottom: 16px;
    }
    .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* Fixed column widths — stable across filter changes */
    table {
      width: 100%; border-collapse: collapse;
      table-layout: fixed;
    }
    .col-id       { width: 96px; }
    .col-title    { width: auto; }   /* takes remaining space */
    .col-services { width: 180px; }
    .col-category { width: 130px; }
    .col-severity { width: 90px; }
    .col-start    { width: 94px; }
    .col-modified { width: 126px; }
    .col-action   { width: 94px; }

    thead tr {
      background: var(--surface-2);
      border-bottom: 1px solid var(--border);
    }
    thead th {
      padding: 10px 10px;
      font-size: .62rem; font-weight: 700;
      text-transform: uppercase; letter-spacing: .03em;
      color: var(--ink); white-space: nowrap;
      text-align: left; overflow: hidden; text-overflow: ellipsis;
    }
    tbody tr {
      border-bottom: 1px solid var(--border-soft);
      transition: background .1s;
      cursor: pointer;
    }
    tbody tr:last-child { border-bottom: none; }
    tbody tr:hover { background: var(--surface-2); }
    tbody td {
      padding: 11px 14px;
      font-size: .82rem; color: var(--ink);
      vertical-align: top;
      overflow: visible;
    }
    @media (max-width: 600px) {
      tbody td { overflow: visible; }
    }
    /* Truncate title on smaller screens */
    td[data-label="Title"] .ticket-title {
      display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
      overflow: hidden;
    }

    /* ── Tablet (≤1024px): hide Last Modified + Action by, compress services ── */
    @media (max-width: 1024px) {
      .col-modified { width: 0; }
      .col-action   { width: 0; }
      thead th:nth-child(7),
      thead th:nth-child(8),
      tbody td:nth-child(7),
      tbody td:nth-child(8) { display: none; }
      .col-services { width: 140px; }
    }

    /* ── Small laptop (≤860px): also hide Category ── */
    @media (max-width: 860px) {
      .col-category { width: 0; }
      thead th:nth-child(4),
      tbody td:nth-child(4) { display: none; }
      .col-services { width: 120px; }
      .col-severity { width: 80px; }
    }

    /* ── Mobile (≤600px): card layout — each row becomes a stacked card ── */
    @media (max-width: 600px) {
      .table-wrap { overflow-x: visible; }
      table, thead, tbody, tr, th, td { display: block; width: 100% !important; }
      thead { display: none; } /* hide headers — labels shown via ::before */
      tbody tr {
        border: 1px solid var(--border);
        border-radius: var(--radius);
        margin: 8px 0;
        padding: 10px 12px;
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-rows: auto;
        gap: 6px 10px;
        background: var(--surface);
        box-shadow: var(--shadow-sm);
      }
      tbody tr:hover { background: var(--surface-2); }
      tbody td {
        padding: 0; border: none; overflow: visible;
        display: flex; align-items: flex-start; gap: 6px;
        font-size: .8rem;
      }
      /* ID spans full width at top */
      tbody td[data-label="ID"] {
        grid-column: 1 / -1;
        border-bottom: 1px solid var(--border-soft);
        padding-bottom: 6px; margin-bottom: 2px;
      }
      /* Title spans full width */
      tbody td[data-label="Title"] {
        grid-column: 1 / -1;
        font-size: .84rem;
      }
      td[data-label="Title"] .ticket-title {
        -webkit-line-clamp: 3;
      }
      /* Label prefix via ::before */
      tbody td[data-label="Services"]::before,
      tbody td[data-label="Category"]::before,
      tbody td[data-label="Severity"]::before,
      tbody td[data-label="Start"]::before,
      tbody td[data-label="Last modified"]::before,
      tbody td[data-label="Action by"]::before {
        content: attr(data-label);
        font-size: .62rem; font-weight: 700; text-transform: uppercase;
        letter-spacing: .05em; color: var(--ink-3);
        white-space: nowrap; flex-shrink: 0; padding-top: 2px;
        min-width: 64px;
      }
      /* Hide empty date cells on mobile */
      tbody td[data-label="Last modified"],
      tbody td[data-label="Action by"],
      tbody td[data-label="Start"] { display: flex; }
      /* Services and chips fully visible in card mode */
      tbody td[data-label="Services"] .chip-wrap { flex-wrap: wrap; max-height: none; overflow: visible; }
      tbody td[data-label="Services"] { align-items: flex-start; }
      /* Category and Severity: let badges flow onto multiple lines */
      tbody td[data-label="Category"],
      tbody td[data-label="Severity"] { flex-wrap: wrap; align-items: flex-start; }
      tbody td[data-label="Category"] .badge,
      tbody td[data-label="Severity"] .badge { flex-shrink: 0; }
      /* label ::before aligns to top in flex-wrap context */
      tbody td[data-label="Category"]::before,
      tbody td[data-label="Severity"]::before { align-self: flex-start; padding-top: 3px; }
    }

    /* ── TICKET ID ────────────────────────────────────────── */
    .ticket-id {
      font-family: var(--font-mono);
      font-size: .74rem;
      color: var(--ink);
      background: var(--surface-2);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      padding: 2px 7px;
      white-space: nowrap;
      font-weight: 500;
    }

    /* ── TITLE CELL ───────────────────────────────────────── */
    .ticket-title { font-weight: 500; color: var(--ink); line-height: 1.35; }

    /* ── BADGES ───────────────────────────────────────────── */
    .badge {
      display: inline-flex; align-items: center;
      font-size: .68rem; font-weight: 600; letter-spacing: .02em;
      padding: 2px 8px; border-radius: 99px;
      white-space: nowrap;
    }
    .badge-critical { background: var(--red);        color: #fff;         }
    .badge-high    { background: var(--red-soft);   color: var(--red);   }
    .badge-normal  { background: var(--amber-soft);  color: var(--amber); }
    .badge-low     { background: var(--surface-2);   color: var(--ink-3); }
    .badge-major   { background: var(--red-soft);    color: var(--red);   }
    .badge-category { background: var(--accent-soft); color: var(--accent-text); }

    /* Tag chips inside title cell */
    /* Tag chips — matches badge-low colors */
    /* Severity chips — match exact badge colors, darken on hover/active */
    }
    }
    }
    .major-prefix {
      font-size: .72rem; font-weight: 700;
      color: var(--red);
      letter-spacing: .01em;
      white-space: nowrap;
      flex-shrink: 0;
    }
    .new-prefix {
      font-size: .72rem; font-weight: 700;
      color: var(--green);
      letter-spacing: .01em;
      white-space: nowrap;
      flex-shrink: 0;
    }
    .updated-prefix {
      font-size: .72rem; font-weight: 700;
      color: var(--accent-text);
      letter-spacing: .01em;
      white-space: nowrap;
      flex-shrink: 0;
    }

    /* ── SERVICE CHIPS ────────────────────────────────────── */
    .chip-wrap { display: flex; flex-wrap: wrap; gap: 4px; max-width: 100%; }
    /* In table cells, cap height to avoid row explosion — disabled on mobile card layout */
    /* No height cap — let chips wrap naturally, row grows with content */
    td .chip-wrap { overflow: visible; }
    .chip {
      font-size: .68rem; font-weight: 600;
      padding: 2px 8px; border-radius: 99px;
      background: var(--surface-2); color: var(--ink);
      border: 1px solid var(--ink-3);
      cursor: pointer; transition: all .12s;
      white-space: nowrap;
      max-width: 100%;
    }
    /* In table cells, long chips wrap their text instead of overflowing */
    td .chip {
      white-space: normal;
      word-break: break-word;
      line-height: 1.3;
      padding: 2px 7px;
    }
    /* Preserve prefix colours inside td */
    td .major-prefix { color: var(--red); }
    td .new-prefix   { color: var(--green); }
    /* Hover/active for service chips */
    .chip:hover { background: var(--accent-soft); color: var(--accent-text); border-color: var(--accent); }
    .chip.active { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 600; }
    .chip.active:hover { background: var(--accent-text); border-color: var(--accent-text); }

    /* ── DATE CELLS ───────────────────────────────────────── */
    .date-cell {
      font-family: var(--font-mono);
      font-size: .78rem; color: var(--ink); font-weight: 500;
      white-space: nowrap;
    }
    .date-cell.past { color: var(--ink-2); }
    .date-cell.soon { color: var(--amber); font-weight: 500; }

    /* ── PAGINATION ───────────────────────────────────────── */
    .pagination {
      display: flex; align-items: center; justify-content: center; gap: 4px;
      padding: 12px; flex-wrap: wrap;
    }
    .page-btn {
      font-family: var(--font-sans); font-size: .78rem; font-weight: 500;
      min-width: 32px; height: 32px; padding: 0 8px;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      background: var(--surface); color: var(--ink-2);
      cursor: pointer; transition: all .12s;
      display: flex; align-items: center; justify-content: center;
    }
    .page-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
    .page-btn:disabled { opacity: .35; cursor: not-allowed; }
    .page-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
    .page-dots { font-size: .78rem; color: var(--ink-3); padding: 0 4px; }

    /* ── SKELETON ─────────────────────────────────────────── */
    .skeleton {
      display: inline-block; border-radius: var(--radius-sm);
      background: linear-gradient(90deg, var(--border) 25%, var(--border-soft) 50%, var(--border) 75%);
      background-size: 200% 100%;
      animation: shimmer 1.4s infinite;
    }
    @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

    /* ── MODAL ────────────────────────────────────────────── */
    .modal-backdrop {
      display: none; position: fixed; inset: 0;
      background: rgba(10,10,8,.55); backdrop-filter: blur(4px);
      z-index: 200; align-items: center; justify-content: center; padding: 24px;
    }
    .modal-backdrop.active { display: flex; }
    .modal-box {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-xl);
      box-shadow: var(--shadow-lg);
      width: 100%; max-width: 1060px;
      height: 88vh;
      display: flex; flex-direction: column;
      animation: modalIn .2s ease;
      transition: max-width .22s ease;
    }
    @keyframes modalIn { from { opacity:0; transform: translateY(12px) scale(.98); } to { opacity:1; transform: none; } }
    .modal-head {
      padding: 20px 24px 16px;
      border-bottom: 1px solid var(--border-soft);
      display: flex; align-items: flex-start; gap: 12px;
    }
    .modal-head-content { flex: 1; min-width: 0; }
    .modal-head-title { font-size: 1rem; font-weight: 600; color: var(--ink); line-height: 1.35; }
    .modal-head-id { font-family: var(--font-mono); font-size: .72rem; color: var(--ink-3); margin-top: 2px; }
    .modal-close {
      width: 30px; height: 30px; flex-shrink: 0;
      border: 1px solid var(--border); border-radius: var(--radius-sm);
      background: transparent; color: var(--ink-3);
      cursor: pointer; display: flex; align-items: center; justify-content: center;
      font-size: 16px; transition: all .12s;
    }
    .modal-close:hover { background: var(--red-soft); color: var(--red); border-color: var(--red); }
    .modal-meta {
      padding: 14px 24px;
      border-bottom: 1px solid var(--border-soft);
      display: flex; flex-wrap: wrap; gap: 16px;
    }
    .modal-meta-item { display: flex; flex-direction: column; gap: 2px; }
    .modal-meta-label { font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); }
    .modal-meta-value { font-size: .8rem; color: var(--ink-2); }
    .modal-badges { padding: 12px 24px; border-bottom: 1px solid var(--border-soft); display: flex; flex-wrap: wrap; gap: 6px; }
    .modal-body-content {
      padding: 20px 24px;
      overflow-y: auto; flex: 1;
      font-size: .85rem; line-height: 1.65; color: var(--ink-2);
    }
    .modal-body-content a { color: var(--accent); }
    .modal-body-content img { max-width: 100%; border-radius: var(--radius); cursor: zoom-in; transition: opacity .15s; margin: 8px 0; }
    .modal-body-content img:hover { opacity: .85; }
    .modal-body-content p { margin-bottom: .85em; }
    .modal-body-content p:last-child { margin-bottom: 0; }
    .modal-body-content ul, .modal-body-content ol { margin: .5em 0 .85em 1.4em; }
    .modal-body-content li { margin-bottom: .25em; }
    .modal-body-content h1, .modal-body-content h2, .modal-body-content h3,
    .modal-body-content h4, .modal-body-content h5 {
      font-weight: 600; color: var(--ink); margin: 1em 0 .4em;
      line-height: 1.3;
    }
    .modal-body-content h1 { font-size: 1.1em; }
    .modal-body-content h2 { font-size: 1em; }
    .modal-body-content h3, .modal-body-content h4 { font-size: .95em; }
    .modal-body-content strong, .modal-body-content b { font-weight: 600; color: var(--ink); }
    .modal-body-content table { width: 100%; border-collapse: collapse; margin: .75em 0; font-size: .82rem; }
    .modal-body-content table th, .modal-body-content table td { padding: 6px 10px; border: 1px solid var(--border); text-align: left; }
    .modal-body-content table th { background: var(--surface-2); font-weight: 600; color: var(--ink); }
    .modal-body-content hr { border: none; border-top: 1px solid var(--border); margin: 1em 0; }
    .modal-body-content pre, .modal-body-content code { font-family: var(--font-mono); font-size: .82em; background: var(--surface-2); border-radius: var(--radius-sm); padding: .1em .35em; }
    .modal-body-content pre { padding: .75em 1em; overflow-x: auto; }
    .modal-error { background: var(--red-soft); border: 1px solid var(--red); border-radius: var(--radius); padding: 10px 14px; color: var(--red); font-size: .82rem; margin: 0 24px 16px; }
    .modal-foot {
      padding: 10px 24px;
      border-top: 1px solid var(--border-soft);
      display: flex; align-items: center;
      justify-content: space-between;
      flex-shrink: 0;
      gap: 12px;
    }
    .modal-foot-left  { display: flex; align-items: center; gap: 8px; }
    .modal-foot-right { display: flex; align-items: center; gap: 8px; }

    /* Share button */
    .modal-share-btn {
      display: inline-flex; align-items: center; justify-content: center; gap: 5px;
      height: 26px; padding: 0 10px;
      font-family: var(--font-sans);
      font-size: .72rem; font-weight: 600;
      line-height: 1;
      color: #fff;
      background: var(--accent);
      border: 1px solid var(--accent);
      border-radius: var(--radius-sm);
      cursor: pointer;
      transition: background .12s, border-color .12s, opacity .12s;
      white-space: nowrap;
      vertical-align: middle;
    }
    .modal-share-btn:hover { opacity: .88; }
    .modal-share-label {
      display: inline;
      line-height: 1;
      vertical-align: middle;
    }
    .modal-foot-shared {
      font-size: .72rem; color: var(--green);
      font-weight: 500;
      opacity: 0;
      visibility: hidden;
      transition: opacity .2s, visibility .2s;
      pointer-events: none;
      white-space: nowrap;
    }
    .modal-foot-shared.visible { opacity: 1; visibility: visible; }
    .modal-foot-id {
      font-family: var(--font-mono);
      font-size: .72rem; font-weight: 600;
      color: var(--ink);
      background: var(--surface-2);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      padding: 3px 10px;
      letter-spacing: .02em;
      cursor: pointer;
      transition: background .12s, border-color .12s, color .12s;
    }
    .modal-foot-id:hover {
      background: var(--accent-soft);
      border-color: var(--accent);
      color: var(--accent-text);
    }
    .modal-foot-copied {
      font-size: .72rem; color: var(--green);
      font-weight: 500;
      opacity: 0;
      transition: opacity .2s;
      pointer-events: none;
    }
    .modal-foot-copied.visible { opacity: 1; }

    /* ── LIGHTBOX ─────────────────────────────────────────── */
    #lightbox { display:none; position:fixed; inset:0; background:rgba(0,0,0,.9); z-index:500; align-items:center; justify-content:center; cursor:zoom-out; }
    #lightbox.active { display:flex; }
    #lightbox img { max-width:92vw; max-height:92vh; border-radius: var(--radius); box-shadow: var(--shadow-lg); }
    #lightboxClose { position:fixed; top:16px; right:20px; color:#fff; font-size:24px; cursor:pointer; opacity:.7; transition: opacity .12s; background: none; border: none; }
    #lightboxClose:hover { opacity: 1; }

    /* ── EMPTY STATE ──────────────────────────────────────── */
    .empty-state {
      text-align: center; padding: 60px 24px;
      color: var(--ink-3); font-size: .85rem;
    }
    .empty-state-icon { font-size: 2rem; margin-bottom: 10px; }

    /* ── FILTER TAGS DROPDOWN ──────────────────────────────── */
    #filterTagsContainer {
      position: relative;
      width: 100%;
    }
    .filter-tags-button {
      font-family: var(--font-sans); font-size: .82rem;
      background: var(--bg); color: var(--ink);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      padding: 0 8px 0 10px; height: 34px;
      outline: none; width: 100%;
      cursor: pointer; transition: border-color .15s, box-shadow .15s;
      display: flex; align-items: center; gap: 6px;
    }
    .filter-tags-button:hover { border-color: var(--accent); }
    .filter-tags-button:focus,
    .filter-tags-button.open { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }

    /* Preview area inside the button */
    .filter-tags-preview {
      flex: 1;
      min-width: 0;
      display: flex;
      align-items: center;
      gap: 3px;
      overflow: hidden;
    }
    .filter-tags-placeholder {
      color: var(--ink-3);
      font-size: .82rem;
      white-space: nowrap;
    }
    /* Individual tag badge inside the button */
    .filter-tags-badge {
      display: inline-flex;
      align-items: center;
      background: var(--accent-soft);
      color: var(--accent-text);
      border: 1px solid rgba(37,99,235,.2);
      padding: 1px 6px;
      border-radius: 99px;
      font-size: .67rem;
      font-weight: 600;
      white-space: nowrap;
      flex-shrink: 0;
    }
    /* +N overflow indicator */
    .filter-tags-overflow {
      display: inline-flex;
      align-items: center;
      background: var(--surface-2);
      color: var(--ink-2);
      border: 1px solid var(--border);
      padding: 1px 6px;
      border-radius: 99px;
      font-size: .67rem;
      font-weight: 600;
      white-space: nowrap;
      flex-shrink: 0;
    }
    .filter-tags-arrow {
      font-size: .62rem;
      color: var(--ink-3);
      flex-shrink: 0;
      transition: transform .15s;
    }
    .filter-tags-button.open .filter-tags-arrow { transform: rotate(180deg); }

    /* Dropdown list */
    .filter-tags-list {
      display: none;
      position: fixed;
      /* top/left/width/bottom/maxHeight set dynamically by JS */
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      z-index: 200;
      max-height: 220px;
      overflow-y: auto;
      box-shadow: var(--shadow-lg);
      overscroll-behavior: contain;
    }
    .filter-tags-list.active { display: flex; flex-direction: column; }
    .filter-tags-list label {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: .82rem;
      font-weight: 400;
      margin: 0;
      cursor: pointer;
      padding: 8px 12px;
      border-bottom: 1px solid var(--border-soft);
      transition: background .1s;
      color: var(--ink);
    }
    .filter-tags-list label:last-child { border-bottom: none; }
    .filter-tags-list label:hover { background: var(--surface-2); }
    .filter-tags-list label input[type="checkbox"] { cursor: pointer; accent-color: var(--accent); }
    /* "All types" separator row */
    .filter-tags-list label.all-option {
      font-weight: 500;
      color: var(--ink-2);
      border-bottom: 1px solid var(--border);
      background: var(--surface-2);
    }
    .filter-tags-list label.all-option:hover { background: var(--bg); }
    /* AND hint */
    .filter-tags-hint {
      padding: 5px 12px 6px;
      font-size: .68rem;
      color: var(--ink-3);
      border-bottom: 1px solid var(--border-soft);
      background: var(--bg);
      font-style: italic;
    }
    /* Screen-reader only utility */
    .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;
    }

    /* ── ACCESSIBILITY ───────────────────────────────────── */
    /* Skip-to-content link */
    .skip-link {
      position: absolute;
      top: -9999px; left: 50%;
      transform: translateX(-50%);
      background: var(--accent); color: #fff;
      padding: 8px 20px;
      border-radius: 0 0 var(--radius) var(--radius);
      font-size: .85rem; font-weight: 600;
      text-decoration: none;
      z-index: 9999;
      white-space: nowrap;
    }
    .skip-link:focus { top: 0; }
    /* Focus-visible ring — consistent across browsers */
    :focus-visible {
      outline: 3px solid var(--accent);
      outline-offset: 2px;
    }
    /* Remove default outline only when :focus-visible is supported */
    :focus:not(:focus-visible) { outline: none; }

/* ── USER MENU ────────────────────────────────────────────── */
.user-menu { position: relative; }
.sb-mobile-btn { display: none; }  /* caché sur desktop, affiché via media query mobile */
/* Sur mobile, burger à gauche via order */
@media (max-width: 768px) {
  .app-header { padding: 0 14px; }
  .sb-mobile-btn { order: -1; margin-right: 4px; }
  .app-header-brand { order: 0; }
}

/* ── Bell notifications ──────────────────────────────────────────────────── */
.bell-wrap {
  position: relative;
}

.bell-btn {
  display: flex; align-items: center; justify-content: center;
  position: relative;
  width: 36px; height: 36px;
  background: transparent;        /* même base que .btn-ghost / RSS */
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--ink-2);
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
  flex-shrink: 0;
}
.bell-btn:hover,
.bell-btn[aria-expanded="true"] {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-text);
}

.bell-badge {
  position: absolute;
  top: 5px; right: 5px;
  min-width: 16px; height: 16px;
  padding: 0 3px;
  background: var(--red);
  color: #fff;
  border: 2px solid var(--surface);
  border-radius: 99px;
  font-size: .6rem; font-weight: 700;
  line-height: 12px;
  text-align: center;
  pointer-events: none;
}

.bell-dropdown {
  position: fixed;
  top: 52px;
  right: 8px;
  width: min(320px, calc(100vw - 16px));
  max-height: calc(100vh - 70px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  z-index: 550;
  overflow: hidden;
  display: none;
  flex-direction: column;
}
.bell-dropdown:not([hidden]) { display: flex; }
.bell-list { overflow-y: auto; flex: 1; min-height: 0; }

.bell-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-soft);
}
.bell-head-title {
  font-size: .78rem; font-weight: 600; color: var(--ink);
}
.bell-head-actions {
  display: flex; align-items: center; gap: 10px;
}
.bell-mark-all {
  font-size: .7rem; color: var(--accent-text);
  background: none; border: none; cursor: pointer; padding: 0;
  font-family: var(--font-sans);
  white-space: nowrap;
}
.bell-mark-all:hover { text-decoration: underline; }
.bell-delete-all {
  font-size: .7rem; color: var(--red, #dc2626);
  background: none; border: none; cursor: pointer; padding: 0;
  font-family: var(--font-sans);
  white-space: nowrap;
}
.bell-delete-all:hover { text-decoration: underline; }
.bell-mark-all:hover { text-decoration: underline; }

.bell-list {
  max-height: 340px;
  overflow-y: auto;
}

.bell-empty,
.bell-loading {
  padding: 24px 14px;
  text-align: center;
  font-size: .78rem;
  color: var(--ink-3);
}

.bell-item {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-soft);
  text-decoration: none;
  color: var(--ink);
  cursor: default;
  transition: background .1s;
}
a.bell-item { cursor: pointer; }
.bell-item:last-child { border-bottom: none; }
.bell-item:hover { background: var(--surface-2); }

.bell-item--unseen {
  background: var(--accent-soft);
}
.bell-item--unseen:hover { background: color-mix(in srgb, var(--accent-soft) 80%, var(--surface-2)); }

.bell-item-label {
  font-size: .78rem; font-weight: 600; color: var(--ink);
}
.bell-item-sub {
  font-size: .72rem; color: var(--ink-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bell-item-ts {
  font-size: .68rem; color: var(--ink-3);
}

.user-menu-btn {
  display: flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 10px;
  background: transparent;        /* même base que .btn-ghost / RSS */
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer; font-family: var(--font-sans);
  font-size: .8rem; color: var(--ink);
  transition: border-color .15s, background .15s;
}
.user-menu-btn:hover { border-color: var(--accent); background: var(--accent-soft); }
.user-menu-btn.open  { border-color: var(--accent); background: var(--accent-soft); }

.user-avatar {
  width: 22px; height: 22px;
  background: var(--accent); color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .72rem; font-weight: 700;
  flex-shrink: 0;
}
.user-name {
  max-width: 140px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: 500;
}
.user-menu-arrow {
  display: flex; align-items: center;
  color: var(--ink-3);
  opacity: .8;
  transition: opacity .15s, color .15s, transform .15s;
  flex-shrink: 0;
}
.user-menu-btn:hover .user-menu-arrow { opacity: 1; color: var(--ink-2); }
.user-menu-btn.open  .user-menu-arrow { opacity: 1; color: var(--ink); transform: rotate(180deg); }

.user-role-badge {
  font-size: .62rem; font-weight: 600;
  padding: 1px 6px; border-radius: 99px;
}
.user-role-admin     { background: var(--red-soft);    color: var(--red); }
.user-role-moderator { background: var(--amber-soft);  color: var(--amber); }
.user-role-user      { background: var(--accent-soft); color: var(--accent-text); }
.user-role-read-only { background: var(--surface-2);   color: var(--ink-3); }

.user-menu-dropdown {
  display: none;
  position: absolute; top: calc(100% + 6px); right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  min-width: 200px; z-index: 600;
  overflow: hidden;
  animation: menuIn .15s ease;
}
@keyframes menuIn { from { opacity:0; transform: translateY(-6px); } to { opacity:1; transform:none; } }
.user-menu-dropdown.open { display: block; }

.user-menu-header {
  padding: 10px 14px 8px;
  border-bottom: 1px solid var(--border-soft);
}
.user-menu-email {
  font-size: .75rem; color: var(--ink-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.user-menu-item {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 14px;
  font-size: .82rem; color: var(--ink-2);
  text-decoration: none;
  transition: background .1s;
  cursor: pointer;
}
.user-menu-item:hover { background: var(--surface-2); color: var(--ink); }
.user-menu-item-danger { color: var(--red); }
.user-menu-item-danger:hover { background: var(--red-soft); color: var(--red); }

.user-menu-divider {
  height: 1px; background: var(--border-soft); margin: 4px 0;
}

.user-menu-section-label {
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--ink-3);
  padding: 8px 14px 3px;
}

/* ── Sidebar icon nav — divider & grouping ───────────────── */
.sb-divider {
  width: 28px;
  height: 1px;
  background: var(--border);
  margin: 4px 0;
  flex-shrink: 0;
}

/* ── RESPONSIVE MOBILE ────────────────────────────────────── */
@media (max-width: 640px) {

  /* Header — empêcher le débordement horizontal */
  .app-header {
    padding: 0 12px;
    gap: 8px;
  }
  .app-header-sub { display: none; }
  .app-header-title { font-size: .9rem; }
  .app-header-icon { width: 28px; height: 28px; font-size: 14px; }

  /* Burger nav : visible seulement sur mobile */
  .sb-mobile-btn { display: flex !important; }

  /* Masquer le nom dans le menu user sur mobile, garder avatar + badge */
  .user-name { display: none; }
  .user-menu-btn { padding: 0 8px; gap: 5px; }

  /* RSS label masqué sur mobile */
  .btn-rss-label { display: none; }

  /* Bouton thème plus compact */
  #themeToggle { width: 32px; height: 32px; font-size: 13px; }

  /* Body padding réduit */
  .app-body { padding: 12px; }

  /* Sync bar empilée */
  .sync-bar { gap: 8px; }
  .sync-meta { font-size: .72rem; flex-wrap: wrap; }

  /* Filter panel en colonne unique */
  .filter-panel { padding: 12px; gap: 8px; }
  .filter-group { min-width: 100%; flex: none; }

  /* Advanced panel — le scroll est géré par filter-panel-main (bottom sheet) */
  /* Les règles de collapse (max-height transition) restent gérées par le bloc @768px */
  #filterCommentedWrap { min-width: 100% !important; }

  /* Table — scroll horizontal avec indicateur visuel */
  .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Colonnes moins prioritaires masquées sur mobile */
  table thead th:nth-child(7),  /* End */
  table thead th:nth-child(8),  /* Action by */
  table thead th:nth-child(9),  /* Major */
  table tbody td:nth-child(7),
  table tbody td:nth-child(8),
  table tbody td:nth-child(9) {
    display: none;
  }
  /* Titre ticket peut wrapper */
  .ticket-title { white-space: normal; }
  /* ID plus compact */
  .ticket-id { font-size: .68rem; padding: 1px 5px; }

  /* Toolbar empilée */
  .table-toolbar { flex-direction: column; align-items: flex-start; gap: 8px; }
  .table-toolbar-right { width: 100%; justify-content: space-between; }

  /* Pagination compacte */
  .page-btn { min-width: 28px; height: 28px; font-size: .72rem; }

  /* Modal plein écran sur mobile */
  .modal-backdrop { padding: 0; align-items: flex-end; }
  .modal-box {
    max-width: 100%;
    height: 95vh;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  }
  /* Share : icône seule sur petits écrans */
  .modal-share-btn { padding: 0 8px; gap: 4px; }
  .modal-share-label { font-size: .68rem; }

  /* Auth card sans padding excessif */
  .auth-card { padding: 24px 20px 20px; }
}

@media (max-width: 380px) {
  /* Très petits écrans — masquer aussi Severity */
  table thead th:nth-child(4),
  table tbody td:nth-child(4) { display: none; }
}

/* ── COOKIE CONSENT BANNER ────────────────────────────────── */
#cookieBanner {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 999;
  background: var(--surface);
  border-top: 1px solid var(--border);
  box-shadow: 0 -4px 24px rgba(0,0,0,.12);
  padding: 16px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: .82rem;
  color: var(--ink);
  animation: slideUp .25s ease;
}
#cookieBanner .btn-primary { background: var(--accent) !important; color: #fff !important; border-color: var(--accent) !important; }
#cookieBanner .btn-ghost   { color: var(--ink) !important; border-color: var(--border) !important; }

@keyframes slideUp {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
#cookieBanner.hidden { display: none; }
.cookie-text { flex: 1; min-width: 200px; line-height: 1.5; }
.cookie-text a { color: var(--accent); }
.cookie-actions { display: flex; gap: 8px; flex-shrink: 0; }

/* ════════════════════════════════════════════════════════════
   FORUM PANEL
   ════════════════════════════════════════════════════════════ */

/* ── Forum side panel ─────────────────────────────────────── */

/* The modal inner area: ticket content + forum tab + forum panel */
.modal-inner-wrap {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  position: relative;
}

/* Ticket side — untouched, just flex-grows */
.modal-ticket-side {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.modal-ticket-side .modal-body-content {
  flex: 1;
  overflow-y: auto;
}

/* Vertical tab — the slim "ourlet" always visible on the right edge */
.forum-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 28px;
  flex-shrink: 0;
  background: var(--surface-2);
  border-left: 1px solid var(--border);
  cursor: pointer;
  transition: background .15s, border-color .15s;
  position: relative;
  z-index: 1;
  gap: 6px;
}
.forum-tab:hover { background: var(--accent-soft); border-color: var(--accent); }
.forum-tab.active {
  background: var(--accent);
  border-color: var(--accent);
}
/* Pas de label texte — icône + compteur + chevron */
.forum-tab-label { display: none; }
.forum-tab-icon {
  font-size: .9rem;
  line-height: 1;
}
.forum-tab-count {
  font-size: .58rem;
  font-weight: 700;
  background: var(--accent);
  color: #fff;
  border-radius: 99px;
  padding: 1px 4px;
  min-width: 14px;
  text-align: center;
  transition: background .15s;
}
.forum-tab.active .forum-tab-count {
  background: rgba(255,255,255,.3);
}
/* Chevron — indique l'état ouvert/fermé */
.forum-tab-chevron {
  font-size: 1rem;
  font-weight: 300;
  color: var(--ink-3);
  line-height: 1;
  transition: transform .22s ease, color .15s;
  transform: rotate(0deg);
}
.forum-tab:hover .forum-tab-chevron { color: var(--accent-text); }
.forum-tab.active .forum-tab-chevron {
  transform: rotate(180deg);
  color: #fff;
}

/* Forum panel — slides in from the right, inside the modal */
.forum-side {
  width: 0;
  min-width: 0;
  flex-shrink: 0;
  overflow: hidden;
  transition: width .22s ease;
  border-left: 0px solid var(--border-soft);
  display: flex;
  flex-direction: column;
}
.forum-side.open {
  width: 340px;
  min-width: 340px;
  border-left-width: 1px;
  overflow: hidden;  /* keep layout stable */
}
/* Expand modal backdrop when panel open */
.modal-backdrop.forum-active { padding: 14px; }
.modal-backdrop.forum-active .modal-box { max-width: 1440px; }

/* Inner layout of forum panel */
.forum-side-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;  /* stable layout; dropdown uses position:absolute */opdown to escape */
}
.forum-panel-head {
  padding: 11px 14px 9px;
  border-bottom: 1px solid var(--border-soft);
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.forum-panel-title {
  font-size: .76rem;
  font-weight: 600;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 6px;
}
.forum-count-badge {
  background: var(--accent-soft);
  color: var(--accent-text);
  font-size: .63rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 99px;
}

/* Comments list */
.forum-comments {
  flex: 1;
  overflow-y: auto;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Comment items */
.comment-item { position: relative; }
.comment-item.is-reply { margin-left: 24px; }
.comment-item.is-reply::before {
  content: '';
  position: absolute;
  left: -12px; top: 0; bottom: 50%;
  border-left: 2px solid var(--border);
  border-bottom: 2px solid var(--border);
  border-radius: 0 0 0 5px;
  width: 8px;
}
.comment-bubble {
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 9px 11px;
  transition: border-color .12s;
}
.comment-bubble:hover { border-color: var(--border); }
.comment-bubble.is-deleted {
  background: transparent;
  border-style: dashed;
}
.comment-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 5px;
}
.comment-avatar {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: .6rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.comment-author { font-size: .74rem; font-weight: 600; color: var(--ink); }
.comment-role {
  font-size: .58rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em;
  padding: 1px 4px; border-radius: 99px;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--ink-3);
}
.comment-role.role-admin { background: var(--red-soft); color: var(--red); border-color: var(--red); }
.comment-role.role-moderator { background: var(--amber-soft); color: var(--amber); border-color: var(--amber); }
.comment-time { font-size: .66rem; color: var(--ink-3); margin-left: auto; white-space: nowrap; }
.comment-body {
  font-size: .78rem; line-height: 1.5; color: var(--ink-2);
  word-break: break-word; white-space: pre-wrap;
}
.comment-body .mention { color: var(--accent); font-weight: 600; }
.comment-deleted-label { font-size: .74rem; color: var(--ink-3); font-style: italic; }
.comment-edited-label { font-size: .63rem; color: var(--ink-3); margin-top: 3px; }

/* Reactions */
.comment-reactions {
  display: flex; flex-wrap: wrap; gap: 3px; margin-top: 6px;
}
.reaction-btn {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: .7rem; padding: 2px 6px;
  border-radius: 99px; border: 1px solid var(--border);
  background: var(--surface); cursor: pointer;
  transition: all .12s; color: var(--ink-2);
}
.reaction-btn:hover, .reaction-btn.reacted {
  background: var(--accent-soft); border-color: var(--accent); color: var(--accent-text);
}
.reaction-add-btn {
  font-size: .7rem; padding: 2px 7px;
  border-radius: 99px; border: 1px dashed var(--border);
  background: transparent; cursor: pointer; color: var(--ink-3);
  transition: all .12s;
}
.reaction-add-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

/* Emoji picker */
.emoji-picker {
  position: absolute; z-index: 50;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 5px 7px; display: flex; gap: 3px; flex-wrap: wrap; max-width: 150px;
}
.emoji-picker button {
  font-size: .95rem; border: none; background: none; cursor: pointer;
  padding: 3px; border-radius: 4px; transition: background .1s;
}
.emoji-picker button:hover { background: var(--surface-2); }

/* Comment actions */
.comment-actions { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.comment-action-btn {
  font-size: .72rem; color: var(--ink-3);
  background: none; border: none; cursor: pointer;
  padding: 2px 5px; border-radius: 3px;
  transition: color .1s, background .1s;
}
.comment-action-btn:hover { color: var(--ink); background: var(--surface-2); }
.comment-action-btn.danger:hover { color: var(--red); }

/* Inline edit */
.comment-edit-area {
  width: 100%; font-family: var(--font-sans); font-size: .78rem;
  background: var(--bg); border: 1px solid var(--accent);
  border-radius: var(--radius-sm); padding: 6px 8px; color: var(--ink);
  resize: vertical; outline: none; margin-top: 5px; min-height: 56px;
  box-shadow: 0 0 0 3px rgba(37,99,235,.1);
}

/* Compose box */
.forum-compose {
  border-top: 1px solid var(--border-soft);
  padding: 10px 12px; flex-shrink: 0;
  background: var(--surface);
  position: relative;
}
.forum-compose-label {
  font-size: .68rem; color: var(--ink-3); margin-bottom: 5px; font-weight: 500;
}
.forum-compose-label .reply-to { color: var(--accent); font-weight: 600; }
.forum-compose-label .cancel-reply {
  color: var(--ink-3); cursor: pointer; margin-left: 5px; font-size: .63rem;
}
.forum-compose-label .cancel-reply:hover { color: var(--red); }
.forum-textarea {
  width: 100%; font-family: var(--font-sans); font-size: .78rem;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 7px 9px; color: var(--ink);
  resize: none; outline: none; min-height: 62px;
  transition: border-color .15s, box-shadow .15s; line-height: 1.5;
}
.forum-textarea:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px rgba(37,99,235,.1);
}
.forum-compose-actions {
  display: flex; align-items: center; justify-content: space-between; margin-top: 6px;
}
.forum-char-count { font-size: .66rem; color: var(--ink-3); }
.forum-char-count.warn { color: var(--amber); }
.forum-char-count.over { color: var(--red); }

/* Login prompt (old full-panel style, kept for compat) */
.forum-login-prompt {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 10px; padding: 20px 12px;
  text-align: center; color: var(--ink-3); font-size: .78rem;
}

/* Guest bar at the bottom — compact strip */
.forum-guest-bar {
  border-top: 1px solid var(--border-soft);
  padding: 10px 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--surface-2);
  font-size: .76rem; color: var(--ink-3);
  flex-shrink: 0;
}

/* @mention dropdown */
.mention-dropdown {
  position: absolute; z-index: 200;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  min-width: 200px; max-height: 160px; overflow-y: auto;
  /* anchored to forum-compose (position:relative parent) */
  bottom: calc(100% + 2px); left: 12px;
}
.mention-item {
  padding: 6px 10px; cursor: pointer; font-size: .76rem;
  transition: background .1s;
}
.mention-item:hover, .mention-item.active { background: var(--accent-soft); }
.mention-item-name { font-weight: 600; color: var(--ink); }

/* Skeleton */
.forum-skeleton { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; }
.forum-skeleton-item {
  background: var(--surface-2); border-radius: var(--radius); padding: 9px 11px;
}

/* Mobile */
@media (max-width: 820px) {
  /* Layout vertical sur mobile */
  .modal-inner-wrap { flex-direction: column; overflow: visible; }

  /* forum-tab mobile : bande horizontale, chevron tourne à 90° */
  .forum-tab {
    width: 100%;
    align-self: stretch;
    height: 38px; flex-direction: row;
    border-left: none; border-top: 1px solid var(--border);
    justify-content: center; gap: 8px;
    flex-shrink: 0;
  }
  .forum-tab-chevron {
    transform: rotate(90deg);    /* pointe vers le bas sur mobile */
  }
  .forum-tab.active .forum-tab-chevron {
    transform: rotate(270deg);   /* pointe vers le haut quand ouvert */
  }

  /* forum-side ouvert : prend 45vh, ticket prend le reste */
  .forum-side {
    transition: max-height .22s ease, opacity .22s ease;
    max-height: 0;
    opacity: 0;
    width: 100% !important;
    min-width: 0 !important;
    border-left: none;
  }
  .forum-side.open {
    max-height: 45vh;
    opacity: 1;
    border-top: 1px solid var(--border-soft);
  }

  /* Ticket side : hauteur fixe pour que le contenu reste accessible */
  .modal-ticket-side { flex-shrink: 0; }
  .modal-ticket-side .modal-body-content {
    height: 28vh;
    max-height: 28vh;
    overflow-y: auto;
  }

  /* Quand forum fermé, ticket récupère tout l'espace */
  .modal-inner-wrap:not(.forum-open) .modal-ticket-side .modal-body-content {
    height: auto;
    max-height: calc(95vh - 160px);
  }
}

/* ════════════════════════════════════════════════════════════
   SITE FOOTER — identique sur toutes les pages
   ════════════════════════════════════════════════════════════ */
.site-footer {
  flex-shrink: 0;            /* never compress — app-body above takes the space */
  padding: 24px 28px;
  border-top: 1px solid var(--border);
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
.site-footer-links {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.site-footer-links a {
  font-size: .74rem; color: var(--ink-2); text-decoration: none;
  font-weight: 500; transition: color .12s;
}
.site-footer-links a:hover { color: var(--accent); }
.site-footer-links .sep { color: var(--border); font-size: .74rem; }
.site-footer-copy { font-size: .7rem; color: var(--ink-3); }


/* ── Filter toggle switch (My discussions) ──────────────────────────────── */
/* ── Filter toggle switch (My discussions) ──────────────────────────────── */
/* Conteneur : ne pas s'étirer, aligner en bas comme les autres filter-groups */
#filterCommentedWrap {
  flex: 0 0 auto !important;
  min-width: 0 !important;
  align-self: flex-end;
}
/* Le label cliquable ne prend que la place de son contenu */
/* ── Quick filter row (pleine largeur, 50/50) ─────────────── */
.filter-quick-row {
  display: flex;
  width: 100%;
  gap: 8px;
  /* flex-basis 100% force le row sur sa propre ligne dans filter-panel-main */
  flex-basis: 100%;
}

.filter-quick-fullbtn {
  flex: 1;                    /* chacun prend la moitié exacte */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 34px;
  font-family: var(--font-sans);
  font-size: .75rem;
  font-weight: 500;
  color: var(--ink-2);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .14s, background .14s, color .14s;
  user-select: none;
}
.filter-quick-fullbtn:hover {
  border-color: var(--accent);
  color: var(--ink);
  background: var(--surface-3, var(--surface-2));
}
.filter-quick-fullbtn.active,
.filter-quick-fullbtn[aria-pressed="true"] {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-text);
  font-weight: 600;
}

.fqb-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.fqb-dot--new     { background: var(--green); }
.fqb-dot--updated { background: var(--accent-text); }

/* Anciens styles pill (conservés pour compatibilité) */
.filter-quick-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.filter-quick-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  font-family: var(--font-sans);
  font-size: .73rem;
  font-weight: 500;
  color: var(--ink-2);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 99px;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .12s, background .12s, color .12s;
  user-select: none;
}
.filter-quick-btn:hover { border-color: var(--accent); color: var(--ink); }
.filter-quick-btn.active,
.filter-quick-btn[aria-pressed="true"] {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-text);
  font-weight: 600;
}

.filter-toggle-label {
  display: inline-flex; align-items: center; gap: 8px;
  cursor: pointer; user-select: none;
  height: 34px; padding: 0 2px;
  width: fit-content;
}
.filter-toggle-cb { position: absolute; opacity: 0; width: 0; height: 0; }
.filter-toggle-track {
  position: relative;
  width: 34px; height: 18px; flex-shrink: 0;
  background: var(--border);
  border-radius: 99px;
  transition: background .18s;
}
.filter-toggle-thumb {
  position: absolute;
  top: 2px; left: 2px;
  width: 14px; height: 14px;
  background: #fff;
  border-radius: 50%;
  transition: transform .18s, box-shadow .18s;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.filter-toggle-cb:checked + .filter-toggle-track { background: var(--accent); }
.filter-toggle-cb:checked + .filter-toggle-track .filter-toggle-thumb { transform: translateX(16px); }
.filter-toggle-cb:focus-visible + .filter-toggle-track { box-shadow: 0 0 0 3px rgba(37,99,235,.2); }
/* Texte : annuler explicitement l'uppercase/letterspacing hérité de .filter-group label */
.filter-toggle-text {
  font-size: .82rem; color: var(--ink-2);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  white-space: nowrap;
}
[data-theme="dark"] .filter-toggle-thumb { background: var(--surface-2); }

/* ═══════════════════════════════════════════════════════════════
   WORKSPACE
   ═══════════════════════════════════════════════════════════════ */

/* ── Layout ─────────────────────────────────────────────────── */
/* The outer flex wrapper needs min-height:0 so children can scroll */
.app-layout { display: flex; min-height: 100vh; }
.app-layout > div { min-height: 0; }

.ws-sidebar {
  width: 220px;
  flex: 0 0 220px;         /* fixed width, never shrink or grow */
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: 20px 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  scrollbar-gutter: stable;
}
.ws-content {
  flex: 1;
  min-width: 0;
  overflow: hidden;          /* content never pushes width */
  overflow-y: auto;
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  scrollbar-gutter: stable;
}

/* ── Sidebar nav ────────────────────────────────────────────── */
.ws-sidebar-section {
  padding: 0 0 16px;
}
.ws-sidebar-label {
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--ink-3);
  padding: 0 16px 6px;
}
.ws-nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  font-size: .82rem;
  color: var(--ink-2);
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: background .1s, color .1s, border-color .1s;
  cursor: pointer;
}
.ws-nav-item:hover {
  background: var(--surface-2);
  color: var(--ink);
}
.ws-nav-item.active {
  background: var(--accent-soft);
  color: var(--accent-text);
  border-left-color: var(--accent);
  font-weight: 500;
}
.ws-nav-icon { font-size: .85rem; flex-shrink: 0; }
.ws-nav-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ws-create-btn {
  margin: 4px 12px 0;
  width: calc(100% - 24px);
  padding: 7px 12px;
  font-size: .78rem;
  color: var(--accent-text);
  background: var(--accent-soft);
  border: 1px dashed var(--accent);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background .12s;
  text-align: left;
}
.ws-create-btn:hover { background: var(--accent); color: #fff; }

/* ── Content header ─────────────────────────────────────────── */
.ws-content-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 16px;
  gap: 12px;
  flex-shrink: 0;
}
.ws-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -.01em;
  margin-bottom: 2px;
}
.ws-meta-line {
  font-size: .78rem;
  color: var(--ink-3);
}
.ws-head-actions { display: flex; gap: 8px; flex-shrink: 0; }

/* ── Tabs ───────────────────────────────────────────────────── */
.ws-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
  flex-shrink: 0;
}
.ws-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: .82rem;
  font-weight: 500;
  color: var(--ink-3);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color .12s, border-color .12s;
  margin-bottom: -1px;
}
.ws-tab:hover { color: var(--ink); }
.ws-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.ws-tab-count {
  font-size: .65rem;
  font-weight: 700;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 99px;
  padding: 0 5px;
  min-width: 18px;
  text-align: center;
  color: var(--ink-3);
}
.ws-tab.active .ws-tab-count {
  background: var(--accent-soft);
  border-color: transparent;
  color: var(--accent-text);
}

/* ── Tab panels ─────────────────────────────────────────────── */
.ws-tab-panel { display: none; }
.ws-tab-panel.active {
  display: flex;
  flex-direction: column;
  flex: 1;           /* fill remaining height in ws-content */
  min-height: 0;
}

/* ── Ticket cards ───────────────────────────────────────────── */
.ws-ticket-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* Don't grow beyond available space */
  flex: 1;
  min-height: 0;
}
.ws-ticket-card {
  width: 100%;               /* always fill ws-content — never size to content */
  box-sizing: border-box;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  box-shadow: var(--shadow-sm);
  transition: border-color .12s, box-shadow .12s;
}
.ws-ticket-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow);
}
.ws-ticket-main { flex: 1; min-width: 0; }
.ws-ticket-id {
  font-family: var(--font-mono);
  font-size: .7rem;
  color: var(--ink-3);
  margin-bottom: 3px;
}
.ws-ticket-title {
  font-size: .88rem;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.35;
  margin-bottom: 6px;
}
.ws-ticket-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 8px;
}
.ws-ticket-note {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  background: var(--amber-soft);
  border: 1px solid var(--amber);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  font-size: .78rem;
  color: var(--ink-2);
  margin-top: 6px;
}
.ws-note-icon { flex-shrink: 0; font-size: .8rem; }
.ws-note-text { flex: 1; line-height: 1.4; }
.ws-note-edit-btn {
  flex-shrink: 0;
  background: none;
  border: none;
  font-size: .72rem;
  color: var(--amber);
  cursor: pointer;
  padding: 0 2px;
  font-weight: 500;
}
.ws-note-edit-btn:hover { text-decoration: underline; }
.ws-add-note-btn {
  margin-top: 6px;
  height: 26px;
  font-size: .72rem;
  color: var(--ink-3);
}
.ws-ticket-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
  align-items: flex-end;
}

/* ── Empty state ────────────────────────────────────────────── */
.ws-empty {
  flex: 1;           /* fill tab-panel height so it stays vertically centered */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  color: var(--ink-3);
}
.ws-empty-icon { font-size: 2.5rem; margin-bottom: 12px; }
.ws-empty-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink-2);
  margin-bottom: 8px;
}
.ws-empty-text {
  font-size: .85rem;
  line-height: 1.6;
  max-width: 380px;
  margin: 0 auto;
}
.ws-empty-text a { color: var(--accent); }

/* ── Invite form ────────────────────────────────────────────── */
.ws-invite-form {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 16px;
}
.ws-invite-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.ws-invite-row .filter-input { flex: 1; }

/* ── Member list ────────────────────────────────────────────── */
.ws-member-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ws-member-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  transition: background .1s;
}
.ws-member-row:hover { background: var(--surface-2); }
.ws-member-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-text);
  display: flex; align-items: center; justify-content: center;
  font-size: .8rem; font-weight: 700;
  flex-shrink: 0;
}
.ws-member-info { flex: 1; min-width: 0; }
.ws-member-name {
  font-size: .85rem;
  font-weight: 500;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 6px;
}
.ws-member-email { font-size: .75rem; color: var(--ink-3); }
.ws-member-role-wrap { flex-shrink: 0; }
.ws-pending-badge {
  font-size: .65rem;
  font-weight: 600;
  background: var(--amber-soft);
  color: var(--amber);
  border-radius: 99px;
  padding: 1px 6px;
}

/* ── ⭐ Add-to-workspace button in ticket modal ─────────────── */
.ws-star-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-sans);
  font-size: .78rem;
  font-weight: 500;
  height: 30px;
  padding: 0 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--ink-2);
  cursor: pointer;
  transition: all .12s;
  white-space: nowrap;
}
.ws-star-btn:hover { background: var(--amber-soft); border-color: var(--amber); color: var(--amber); }
.ws-star-btn.tracked { background: var(--amber-soft); border-color: var(--amber); color: var(--amber); }
.ws-star-btn.tracked:hover { background: var(--red-soft); border-color: var(--red); color: var(--red); }

/* ── Add-to-workspace popover ───────────────────────────────── */
.ws-popover {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 300;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  min-width: 280px;
  max-width: 340px;
  padding: 0;
  overflow: hidden;
}
.ws-popover-head {
  padding: 10px 14px 8px;
  font-size: .78rem;
  font-weight: 600;
  color: var(--ink);
  border-bottom: 1px solid var(--border-soft);
}
.ws-popover-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  transition: background .1s;
}
.ws-popover-row:hover { background: var(--surface-2); }
.ws-popover-ws-name {
  flex: 1;
  font-size: .82rem;
  color: var(--ink);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ws-popover-ws-type {
  font-size: .65rem;
  color: var(--ink-3);
  flex-shrink: 0;
}
.ws-popover-toggle {
  flex-shrink: 0;
  font-size: .75rem;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 99px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--ink-2);
  cursor: pointer;
  transition: all .12s;
  white-space: nowrap;
}
.ws-popover-toggle:hover { background: var(--accent-soft); color: var(--accent-text); }
.ws-popover-toggle.tracked { background: var(--amber-soft); border-color: var(--amber); color: var(--amber); }
.ws-popover-toggle.tracked:hover { background: var(--red-soft); border-color: var(--red); color: var(--red); }
.ws-popover-note-wrap {
  padding: 0 14px 10px;
  border-top: 1px solid var(--border-soft);
}
.ws-popover-note-input {
  width: 100%;
  font-family: var(--font-sans);
  font-size: .78rem;
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px 8px;
  outline: none;
  resize: none;
  margin-top: 8px;
  transition: border-color .12s;
}
.ws-popover-note-input:focus { border-color: var(--accent); }
.ws-popover-note-save {
  margin-top: 6px;
  float: right;
}
.ws-popover-footer {
  padding: 8px 14px;
  border-top: 1px solid var(--border-soft);
  text-align: center;
}
.ws-popover-footer a {
  font-size: .75rem;
  color: var(--accent);
  text-decoration: none;
}
.ws-popover-footer a:hover { text-decoration: underline; }

/* ── Nav badge ──────────────────────────────────────────────── */
.sb-badge {
  position: absolute;
  top: 4px; right: 4px;
  width: 8px; height: 8px;
  background: var(--red);
  border-radius: 50%;
  border: 2px solid var(--surface);
  pointer-events: none;
}

/* ── Mobile workspace ───────────────────────────────────────── */
@media (max-width: 768px) {
  .ws-sidebar {
    width: 100%;
    height: auto;
    flex-direction: row;
    overflow-x: auto;
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: 8px 12px;
    gap: 4px;
  }
  .ws-sidebar-section {
    display: flex;
    gap: 4px;
    padding: 0;
    flex-shrink: 0;
  }
  .ws-sidebar-label { display: none; }
  .ws-nav-item {
    white-space: nowrap;
    border-left: none;
    border-bottom: 2px solid transparent;
    border-radius: var(--radius-sm);
    padding: 6px 10px;
  }
  .ws-nav-item.active {
    border-bottom-color: var(--accent);
    border-left: none;
  }
  .ws-create-btn { margin: 0; width: auto; }
  .ws-content { padding: 16px; }
  .ws-ticket-card { flex-direction: column; }
  .ws-ticket-actions { flex-direction: row; align-items: center; flex-wrap: wrap; }
}



/* ══════════════════════════════════════════════════════════════════
   LANGUAGE SWITCHER
   ══════════════════════════════════════════════════════════════════ */
.lang-switcher {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  flex-shrink: 0;
}
.lang-switcher-label {
  color: var(--ink-3);
  display: flex;
  align-items: center;
  margin-right: 2px;
}
/* Groupe de boutons soudés */
.lang-btn-group {
  display: flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 4px);
  overflow: hidden;
  background: var(--surface-2);
}
.lang-btn {
  padding: 4px 9px;
  border: none;
  border-right: 1px solid var(--border);
  background: transparent;
  color: var(--ink-2);
  font-size: .71rem;
  font-weight: 600;
  letter-spacing: .05em;
  cursor: pointer;
  transition: background .12s, color .12s;
  line-height: 1.5;
  white-space: nowrap;
}
.lang-btn:last-child { border-right: none; }
.lang-btn:hover {
  background: var(--accent-soft);
  color: var(--accent-text);
}
.lang-btn--active {
  background: var(--accent);
  color: #fff;
}
.lang-btn--active:hover {
  background: var(--accent);
  color: #fff;
}
/* Badge de progression */
.lang-progress {
  font-size: .68rem;
  color: var(--ink-3);
  white-space: nowrap;
  padding: 2px 7px;
  border-radius: 10px;
  background: transparent;
  transition: background .2s, color .2s;
}
.lang-progress--active {
  color: var(--accent-text);
  background: var(--accent-soft);
}
.lang-progress--warn {
  color: #f97316;
  background: rgba(249,115,22,.08);
}
/* Badge admin bypass cooldown */
.admin-cooldown-badge {
  font-size: .68rem;
  font-weight: 600;
  color: var(--amber, #f59e0b);
  background: rgba(245,158,11,.1);
  border: 1px solid rgba(245,158,11,.25);
  border-radius: 10px;
  padding: 1px 7px;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .lang-switcher {
    margin-left: 0;
    order: 10;
    width: 100%;
    padding-top: 8px;
    border-top: 1px solid var(--border-soft);
    flex-wrap: wrap;
    gap: 6px;
  }
}

/* layout-utilities */
#_nt_ov {
  display: none;
  position: fixed; inset: 0;
  z-index: 9998;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(3px);
  align-items: center;
  justify-content: center;
  padding: 24px;
}
#_nt_wr {
  width: min(900px, 96vw);
  height: min(600px, 82vh);
  background: #0d1117;
  border: 1px solid #30363d;
  border-radius: 10px;
  box-shadow: 0 24px 80px rgba(0,0,0,.7);
  display: flex;
  flex-direction: column;
  font-family: 'DM Mono','Fira Mono','Cascadia Code','Consolas',monospace;
  overflow: hidden;
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
}
._nt_hd {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: #161b22;
  border-bottom: 1px solid #21262d;
  user-select: none; cursor: grab; flex-shrink: 0;
}
._nt_hd:active { cursor: grabbing; }
._nt_dt { display: flex; gap: 6px; flex-shrink: 0; }
._nt_d {
  width: 12px; height: 12px; border-radius: 50%;
  cursor: pointer; flex-shrink: 0;
  transition: filter .15s, transform .1s;
}
._nt_d:hover { filter: brightness(1.3); transform: scale(1.1); }
._nt_dr { background: #ff5f57; }
._nt_dy { background: #febc2e; }
._nt_dg { background: #28c840; }
._nt_ti {
  flex: 1; text-align: center;
  font-size: .72rem; color: #8b949e; letter-spacing: .05em;
}
._nt_cl {
  background: none; border: none; color: #8b949e;
  cursor: pointer; font-size: 18px; line-height: 1; padding: 0 2px;
}
._nt_cl:hover { color: #ff5f57; }
._nt_ou {
  flex: 1; overflow-y: auto;
  padding: 12px 16px 6px; scroll-behavior: smooth;
}
._nt_ou::-webkit-scrollbar { width: 6px; }
._nt_ou::-webkit-scrollbar-track { background: #0d1117; }
._nt_ou::-webkit-scrollbar-thumb { background: #21262d; border-radius: 3px; }
._nt_li {
  font-size: .78rem; line-height: 1.55;
  white-space: pre-wrap; word-break: break-all;
  color: #c9d1d9; min-height: 1.55em;
}
._nt_mo { color: #58a6ff; }
._nt_er { color: #ff7b72; }
._nt_if { color: #8b949e; font-style: italic; }
._nt_di { color: #79c0ff; }
._nt_fi { color: #a5d6ff; }
._nt_me { color: #8b949e; }
._nt_ke { color: #d2a8ff; }
._nt_se { color: #30363d; }
._nt_pe { color: #3fb950; }
._nt_ce { color: #e6edf3; }
._nt_ir {
  display: flex; align-items: center;
  padding: 8px 16px 12px;
  border-top: 1px solid #21262d;
  flex-shrink: 0;
}
._nt_pr {
  font-size: .78rem; color: #3fb950;
  white-space: nowrap; flex-shrink: 0; user-select: none;
}
._nt_in {
  flex: 1; background: transparent; border: none; outline: none;
  color: #e6edf3; font-family: inherit; font-size: .78rem;
  caret-color: #3fb950; padding: 0;
}
/* Images dans le terminal */
._nt_ig {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 6px 0;
}
._nt_it {
  width: 80px; height: 60px;
  object-fit: cover; border-radius: 4px;
  border: 1px solid #30363d; cursor: zoom-in;
  transition: border-color .15s, transform .15s;
}
._nt_it:hover { border-color: #3fb950; transform: scale(1.05); }
/* Mobile */
@media (max-width: 640px) {
  #_nt_wr { width: 100%; height: 100%; border-radius: 0; top: 0; left: 0; transform: none; }
}