/* ======================================================
       VARIABLES & RESET
       ====================================================== */
    :root {
      --c-bg:          #F7F6F3;
      --c-surface:     #FFFFFF;
      --c-surface-2:   #F0EEE9;
      --c-border:      rgba(0,0,0,0.08);
      --c-border-med:  rgba(0,0,0,0.14);
      --c-text:        #1A1917;
      --c-text-2:      #6B6860;
      --c-text-3:      #9E9C96;

      --c-purple:      #534AB7;
      --c-purple-l:    #EEEDFE;
      --c-teal:        #0F6E56;
      --c-teal-l:      #E1F5EE;
      --c-blue:        #185FA5;
      --c-blue-l:      #E6F1FB;
      --c-amber:       #BA7517;
      --c-amber-l:     #FAEEDA;
      --c-coral:       #993C1D;
      --c-coral-l:     #FAECE7;

      --c-ok:          #3B6D11;
      --c-ok-l:        #EAF3DE;
      --c-warn:        #854F0B;
      --c-warn-l:      #FEF3E2;
      --c-danger:      #A32D2D;
      --c-danger-l:    #FCEBEB;

      --radius-sm:     6px;
      --radius-md:     10px;
      --radius-lg:     14px;
      --shadow:        0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);

      --font:          'DM Sans', system-ui, sans-serif;
      --font-mono:     'DM Mono', monospace;
    }

    /* ── Thème Gris foncé (défaut) ── */
    body.theme-grey {
      --c-bg:        #2C2C2E;
      --c-surface:   #3A3A3C;
      --c-surface-2: #48484A;
      --c-border:    rgba(255,255,255,0.10);
      --c-border-med:rgba(255,255,255,0.18);
      --c-text:      #F2F2F7;
      --c-text-2:    #AEAEB2;
      --c-text-3:    #6C6C70;
      --c-purple-l:  #2A2757;
      --c-teal-l:    #0D3528;
      --c-blue-l:    #0E2E4D;
      --c-amber-l:   #3D2A06;
      --c-coral-l:   #3D1508;
      --c-ok-l:      #1A2E0A;
      --c-warn-l:    #3A2005;
      --c-danger-l:  #3A0E0E;
    }

    /* ── Thème Blanc ── */
    body.theme-white {
      --c-bg:        #FFFFFF;
      --c-surface:   #FFFFFF;
      --c-surface-2: #F5F5F5;
      --c-border:    rgba(0,0,0,0.10);
      --c-border-med:rgba(0,0,0,0.18);
      --c-text:      #111111;
      --c-text-2:    #555555;
      --c-text-3:    #888888;
    }

    /* ── Thème Sombre ── */
    body.theme-dark {
      --c-bg:        #111214;
      --c-surface:   #1C1E22;
      --c-surface-2: #26292F;
      --c-border:    rgba(255,255,255,0.08);
      --c-border-med:rgba(255,255,255,0.14);
      --c-text:      #E8E8E6;
      --c-text-2:    #A8A6A0;
      --c-text-3:    #6A6864;
      --c-purple-l:  #2A2757;
      --c-teal-l:    #0D3528;
      --c-blue-l:    #0E2E4D;
      --c-amber-l:   #3D2A06;
      --c-coral-l:   #3D1508;
      --c-ok-l:      #1A2E0A;
      --c-warn-l:    #3A2005;
      --c-danger-l:  #3A0E0E;
    }

    /* Sélecteur de thème */
    .theme-picker { display: flex; gap: 10px; margin: 8px 0 4px; }
    .theme-btn {
      flex: 1; padding: 10px 6px; border-radius: 10px; border: 2px solid var(--c-border);
      cursor: pointer; font-size: 12px; font-weight: 500; text-align: center;
      background: var(--c-surface-2); color: var(--c-text-2); transition: border-color .15s, color .15s;
    }
    .theme-btn:hover { border-color: var(--c-purple); color: var(--c-text); }
    .theme-btn.active { border-color: var(--c-purple); color: var(--c-purple); background: var(--c-purple-l); }
    .theme-swatch { width: 28px; height: 28px; border-radius: 50%; margin: 0 auto 6px; border: 2px solid var(--c-border-med); }
    .theme-btn.active .theme-swatch { border-color: var(--c-purple); }

    * { box-sizing: border-box; margin: 0; padding: 0; }
    body { font-family: var(--font); background: var(--c-bg); color: var(--c-text); font-size: 14px; line-height: 1.6; min-height: 100vh; }

    /* ======================================================
       LAYOUT
       ====================================================== */
    .app { display: flex; min-height: 100vh; }

    /* Sidebar */
    .sidebar {
      width: 260px;
      flex-shrink: 0;
      background: var(--c-surface);
      border-right: 1px solid var(--c-border);
      display: flex;
      flex-direction: column;
      padding: 1.5rem 0;
      position: sticky;
      top: 0;
      height: 100vh;
      overflow-y: auto;
    }
    .sidebar-logo {
      padding: 0 1.25rem 1.5rem;
      border-bottom: 1px solid var(--c-border);
      margin-bottom: 1rem;
    }
    .sidebar-logo h2 { font-size: 13px; font-weight: 600; color: var(--c-text); letter-spacing: 0.02em; }
    .sidebar-logo p  { font-size: 11px; color: var(--c-text-3); margin-top: 2px; }

    .nav-section { padding: 0.25rem 0.75rem; font-size: 10px; font-weight: 600; color: var(--c-text-3); letter-spacing: 0.08em; text-transform: uppercase; margin: 0.5rem 0 0.25rem; }
    .nav-item {
      display: flex; align-items: center; gap: 10px;
      padding: 8px 1.25rem;
      font-size: 13px; color: var(--c-text-2);
      cursor: pointer; border: none; background: none; width: 100%; text-align: left; font-family: var(--font);
      border-radius: 0;
      transition: background 0.15s, color 0.15s;
    }
    .nav-item:hover { background: var(--c-surface-2); color: var(--c-text); }
    .nav-item.active { background: var(--c-purple-l); color: var(--c-purple); font-weight: 500; }
    .nav-item .nav-icon { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.7; }
    .nav-item.active .nav-icon { opacity: 1; }

    .sidebar-bottom {
      margin-top: auto;
      padding: 1rem 1.25rem;
      border-top: 1px solid var(--c-border);
    }
    .user-chip {
      display: flex; align-items: center; gap: 8px;
    }
    .user-avatar {
      width: 28px; height: 28px; border-radius: 50%;
      background: var(--c-purple-l);
      color: var(--c-purple);
      font-size: 11px; font-weight: 600;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .user-name { font-size: 12px; font-weight: 500; color: var(--c-text); }
    .user-role { font-size: 11px; color: var(--c-text-3); }

    /* Main content */
    .main { flex: 1; overflow-x: hidden; }

    .topbar {
      background: var(--c-surface);
      border-bottom: 1px solid var(--c-border);
      padding: 0.875rem 2rem;
      display: flex; align-items: center; justify-content: space-between;
      position: sticky; top: 0; z-index: 50;
    }
    .topbar-title { font-size: 16px; font-weight: 500; }
    .topbar-meta { font-size: 12px; color: var(--c-text-3); }
    .topbar-actions { display: flex; gap: 8px; align-items: center; }

    .btn {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 6px 12px; border-radius: var(--radius-sm);
      font-size: 12px; font-weight: 500; font-family: var(--font);
      cursor: pointer; border: 1px solid var(--c-border-med);
      background: var(--c-surface); color: var(--c-text);
      transition: background 0.15s;
    }
    .btn:hover { background: var(--c-surface-2); }
    .btn-primary { background: var(--c-purple); color: #fff; border-color: var(--c-purple); }
    .btn-primary:hover { background: #4540A0; }
    .btn svg { width: 13px; height: 13px; }

    .content { padding: 2rem; max-width: 1400px; }

    /* ======================================================
       KPI CARDS
       ====================================================== */
    .kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 2rem; }
    .kpi-card { background: var(--c-surface); border-radius: var(--radius-lg); border: 1px solid var(--c-border); padding: 1.125rem 1.25rem; }
    .kpi-label { font-size: 11px; color: var(--c-text-3); font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 8px; }
    .kpi-value { font-size: 28px; font-weight: 300; color: var(--c-text); line-height: 1; font-family: var(--font-mono); }
    .kpi-value sup { font-size: 14px; vertical-align: super; }
    .kpi-delta { font-size: 11px; margin-top: 6px; display: flex; align-items: center; gap: 3px; }
    .kpi-up    { color: var(--c-ok); }
    .kpi-down  { color: var(--c-danger); }
    .kpi-neutral { color: var(--c-text-3); }

    /* ======================================================
       GRID LAYOUTS
       ====================================================== */
    .grid-2  { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 1.5rem; }
    .grid-3  { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; margin-bottom: 1.5rem; }
    @media (max-width: 900px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

    .card { background: var(--c-surface); border-radius: var(--radius-lg); border: 1px solid var(--c-border); padding: 1.25rem; }
    .card-title { font-size: 13px; font-weight: 600; color: var(--c-text); margin-bottom: 1rem; display: flex; align-items: center; justify-content: space-between; }
    .card-title span { font-size: 11px; font-weight: 400; color: var(--c-text-3); }

    /* ======================================================
       PROGRESS BARS
       ====================================================== */
    .progress-wrap { background: var(--c-surface-2); border-radius: 99px; height: 7px; overflow: hidden; margin: 5px 0 3px; }
    .progress-fill { height: 100%; border-radius: 99px; transition: width 0.7s cubic-bezier(.4,0,.2,1); }

    .axe-row { display: flex; align-items: center; gap: 10px; margin-bottom: 13px; }
    .axe-dot  { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
    .axe-name { font-size: 12px; color: var(--c-text); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .axe-bar  { flex: 1.2; }
    .axe-pct  { font-size: 12px; font-family: var(--font-mono); font-weight: 500; color: var(--c-text); min-width: 34px; text-align: right; }

    /* ======================================================
       TABLE
       ====================================================== */
    .table-wrap { overflow-x: auto; }
    table { width: 100%; border-collapse: collapse; font-size: 13px; }
    th { text-align: left; padding: 9px 12px; font-size: 11px; font-weight: 600; color: var(--c-text-3); letter-spacing: 0.04em; text-transform: uppercase; border-bottom: 1px solid var(--c-border); white-space: nowrap; }
    td { padding: 11px 12px; border-bottom: 1px solid var(--c-border); color: var(--c-text); vertical-align: middle; }
    tr:last-child td { border-bottom: none; }
    tr:hover td { background: var(--c-surface-2); }
    tr { cursor: pointer; }

    .pill { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; padding: 3px 9px; border-radius: 99px; font-weight: 500; white-space: nowrap; }
    .p-done    { background: var(--c-ok-l);     color: var(--c-ok); }
    .p-prog    { background: var(--c-blue-l);   color: var(--c-blue); }
    .p-late    { background: var(--c-danger-l); color: var(--c-danger); }
    .p-hold    { background: var(--c-warn-l);   color: var(--c-warn); }
    .p-todo    { background: var(--c-surface-2); color: var(--c-text-3); }

    .prio-badge { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
    .pr-h { background: #E24B4A; }
    .pr-m { background: #EF9F27; }
    .pr-l { background: #639922; }

    .mini-bar-wrap { display: flex; align-items: center; gap: 6px; }
    .mini-bar { flex: 1; background: var(--c-surface-2); border-radius: 99px; height: 4px; overflow: hidden; min-width: 50px; }
    .mini-fill { height: 100%; border-radius: 99px; }
    .mini-pct  { font-size: 11px; font-family: var(--font-mono); color: var(--c-text-3); min-width: 28px; text-align: right; }

    /* ======================================================
       FILTERS
       ====================================================== */
    .filter-bar { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; align-items: center; }
    .filter-chip {
      font-size: 12px; padding: 4px 11px; border-radius: 99px;
      border: 1px solid var(--c-border-med); background: none; color: var(--c-text-2);
      cursor: pointer; font-family: var(--font); transition: all 0.12s;
    }
    .filter-chip:hover { background: var(--c-surface-2); }
    .filter-chip.on { background: var(--c-purple-l); color: var(--c-purple); border-color: transparent; font-weight: 500; }

    /* Filtres combinés (selects) */
    .filter-select {
      font-size: 12px; padding: 5px 26px 5px 10px; border-radius: 6px;
      border: 1px solid var(--c-border-med); background: var(--c-surface);
      color: var(--c-text); cursor: pointer; font-family: var(--font);
      appearance: none; -webkit-appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E");
      background-repeat: no-repeat; background-position: right 8px center;
      background-size: 8px; max-width: 200px; transition: border-color .12s;
    }
    .filter-select:focus { outline: none; border-color: var(--c-purple); box-shadow: 0 0 0 2px var(--c-purple-l); }
    .filter-select.active { border-color: var(--c-purple); background-color: var(--c-purple-l); color: var(--c-purple); font-weight: 500; }
    .filter-reset {
      font-size: 11px; padding: 5px 11px; border-radius: 99px;
      border: 1px solid var(--c-border-med); background: none;
      color: var(--c-text-3); cursor: pointer; font-family: var(--font);
      white-space: nowrap; transition: all .12s;
    }
    .filter-reset:hover { background: #FCEBEB; color: var(--c-danger); border-color: var(--c-danger); }
    .filter-count { font-size: 11px; color: var(--c-text-3); margin-left: auto; white-space: nowrap; }

    /* ======================================================
       TIMELINE
       ====================================================== */
    .tl-item { display: flex; gap: 14px; }
    .tl-left { display: flex; flex-direction: column; align-items: center; }
    .tl-dot  { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; margin-top: 3px; }
    .tl-line { width: 1px; background: var(--c-border); flex: 1; min-height: 22px; }
    .tl-body { flex: 1; padding-bottom: 18px; }
    .tl-title { font-size: 13px; font-weight: 500; color: var(--c-text); }
    .tl-meta  { font-size: 12px; color: var(--c-text-3); margin-top: 2px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

    /* ======================================================
       AXES CARDS PAGE
       ====================================================== */
    .axe-card { background: var(--c-surface); border-radius: var(--radius-lg); border: 1px solid var(--c-border); padding: 1.25rem; }
    .axe-card-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
    .axe-card-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
    .axe-card-name { font-size: 14px; font-weight: 600; color: var(--c-text); flex: 1; }
    .axe-card-pct { font-size: 20px; font-family: var(--font-mono); font-weight: 500; }
    .tag-list { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 12px; }
    .tag { font-size: 11px; padding: 3px 9px; border-radius: 99px; border: 1px solid var(--c-border); color: var(--c-text-3); }

    /* ======================================================
       MODAL
       ====================================================== */
    .modal-bg { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.35); z-index: 200; align-items: center; justify-content: center; padding: 1rem; }
    .modal-bg.open { display: flex; }
    .modal-box { background: var(--c-surface); border-radius: var(--radius-lg); padding: 1.75rem; max-width: 480px; width: 100%; border: 1px solid var(--c-border); max-height: 88vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,0.15); }
    .modal-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 1.25rem; gap: 12px; }
    .modal-close { border: none; background: none; font-size: 20px; cursor: pointer; color: var(--c-text-3); line-height: 1; padding: 0; }
    .modal-close:hover { color: var(--c-text); }
    .field-row { display: flex; gap: 8px; margin-bottom: 12px; align-items: flex-start; }
    .field-label { font-size: 11px; color: var(--c-text-3); min-width: 100px; padding-top: 1px; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }
    .field-value { font-size: 13px; color: var(--c-text); }
    .modal-desc { background: var(--c-surface-2); border-radius: var(--radius-sm); padding: 10px 12px; font-size: 13px; color: var(--c-text-2); margin-top: 4px; line-height: 1.7; }

    /* ======================================================
       AUTH / LOADING STATES
       ====================================================== */
    .auth-screen {
      display: flex; align-items: center; justify-content: center;
      min-height: 100vh; flex-direction: column; gap: 1.5rem;
      text-align: center; padding: 2rem;
    }
    .auth-logo { width: 56px; height: 56px; background: var(--c-purple-l); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; margin: 0 auto; }
    .auth-title { font-size: 20px; font-weight: 500; }
    .auth-sub { font-size: 13px; color: var(--c-text-3); max-width: 320px; }
    .spinner { width: 24px; height: 24px; border: 2px solid var(--c-border-med); border-top-color: var(--c-purple); border-radius: 50%; animation: spin 0.7s linear infinite; }
    @keyframes spin { to { transform: rotate(360deg); } }

    .loading-bar { width: 100%; max-width: 240px; height: 3px; background: var(--c-surface-2); border-radius: 99px; overflow: hidden; }
    .loading-fill { height: 100%; background: var(--c-purple); border-radius: 99px; animation: load 1.5s ease-in-out infinite; }
    @keyframes load { 0%{width:0;margin-left:0} 50%{width:70%;margin-left:0} 100%{width:0;margin-left:100%} }

    .error-card { background: var(--c-danger-l); border: 1px solid rgba(163,45,45,0.2); border-radius: var(--radius-md); padding: 1rem 1.25rem; font-size: 13px; color: var(--c-danger); max-width: 500px; }

    /* ======================================================
       CHART CONTAINERS
       ====================================================== */
    .chart-box { position: relative; width: 100%; height: 200px; }
    .chart-box-lg { position: relative; width: 100%; height: 240px; }

    /* ======================================================
       CHARTS SIDE BY SIDE (donut gauche, ligne droite)
       ====================================================== */
    .charts-row { display: flex; gap: 1.5rem; align-items: flex-start; margin-top: 1.25rem; }
    .chart-card { flex: 1 1 0; min-width: 0; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-md); padding: 1rem; }

    /* ======================================================
       STATUS INDICATOR (connexion SP)
       ====================================================== */
    .sp-status { display: flex; align-items: center; gap: 5px; font-size: 11px; }
    .sp-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c-border-med); }
    .sp-live    { background: #3B6D11; }
    .sp-offline { background: #EF9F27; animation: pulse-dot 2s infinite; }
    @keyframes pulse-dot { 0%,100%{opacity:1} 50%{opacity:.4} }
    .sp-demo { background: #EF9F27; }

    /* ======================================================
       PANES
       ====================================================== */
    .pane { display: none; }
    .pane.active { display: block; }

    /* ======================================================
       RESPONSIVE
       ====================================================== */
    @media (max-width: 700px) {
      .sidebar { display: none; }
      .content { padding: .75rem; }
      .kpi-grid { grid-template-columns: 1fr 1fr; gap: .5rem; }
      .charts-row { flex-direction: column; }
      .topbar { padding: 0 .75rem; gap: .5rem; }
      .topbar-actions { gap: .25rem; }
      .topbar-actions button { font-size: .75rem; padding: .4rem .6rem; }
      .section-title { font-size: 14px; }
      table { font-size: 11px; }
      table td, table th { padding: 6px 6px; }
      .modal-box, .settings-modal, .form-modal { padding: 1rem; margin: .5rem; }
      .form-grid { grid-template-columns: 1fr; }
      .filter-bar { flex-wrap: wrap; gap: 4px; }
      .filter-chip { font-size: 11px; padding: 4px 10px; }
      .axe-cards { grid-template-columns: 1fr; }
      .kpi-val { font-size: 1.6rem; }
      .alert-banner { margin: 0 .75rem .75rem; }
    }

    /* Barre d'outils Actions */
    .actions-toolbar { display: flex; flex-direction: column; gap: .5rem; margin-bottom: .75rem; }
    .search-wrap { position: relative; display: flex; align-items: center; max-width: 420px; }
    .search-icon { position: absolute; left: 10px; width: 15px; height: 15px; color: var(--c-text-3); pointer-events: none; flex-shrink: 0; }
    .search-input { width: 100%; padding: 7px 32px 7px 34px; border: 1px solid var(--c-border-med); border-radius: var(--radius-sm); background: var(--c-surface); color: var(--c-text); font-family: var(--font); font-size: 13px; transition: border-color .15s; }
    .search-input:focus { outline: none; border-color: var(--c-purple); }
    .search-input::placeholder { color: var(--c-text-3); }
    .search-clear { position: absolute; right: 8px; border: none; background: none; cursor: pointer; color: var(--c-text-3); font-size: 16px; line-height: 1; padding: 2px 4px; border-radius: 4px; align-items: center; justify-content: center; }
    .search-clear:hover { color: var(--c-text); background: var(--c-surface-2); }

    /* Pagination */
    .pagination { display: flex; align-items: center; justify-content: center; gap: 12px; padding: .75rem 0; }
    .pg-btn { padding: 5px 14px; border: 1px solid var(--c-border-med); border-radius: var(--radius-sm); background: var(--c-surface); color: var(--c-text); cursor: pointer; font-family: var(--font); font-size: 13px; transition: background .15s; }
    .pg-btn:hover:not(:disabled) { background: var(--c-surface-2); }
    .pg-btn:disabled { opacity: .4; cursor: default; }
    .pg-info { font-size: 12px; color: var(--c-text-2); }

    /* ======================================================
       FORMULAIRE DE SAISIE
       ====================================================== */
    .form-modal-bg { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 300; align-items: flex-start; justify-content: center; padding: 1.5rem 1rem; overflow-y: auto; overflow-x: hidden; }
    .form-modal-bg.open { display: flex; }
    .form-modal { background: var(--c-surface); border-radius: var(--radius-lg); padding: 1.5rem; max-width: min(760px, calc(100vw - 2rem)); width: 100%; border: 1px solid var(--c-border); box-shadow: 0 20px 60px rgba(0,0,0,0.25); margin: auto; max-height: 95vh; overflow-y: auto; overflow-x: hidden; box-sizing: border-box; }
    .form-title { font-size: 16px; font-weight: 500; color: var(--c-text); margin-bottom: 1.25rem; display: flex; align-items: center; justify-content: space-between; }
    .form-close { border: none; background: none; font-size: 20px; cursor: pointer; color: var(--c-text-2); line-height: 1; }
    .form-close:hover { color: var(--c-text); }
    .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .form-group { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
    .form-group.full { grid-column: 1 / -1; }
    .form-label { font-size: 11px; font-weight: 600; color: var(--c-text-2); text-transform: uppercase; letter-spacing: 0.05em; }
    .form-input, .form-select, .form-textarea {
        padding: 8px 10px; border-radius: var(--radius-sm);
        border: 1px solid var(--c-border-med); background: var(--c-surface);
        color: var(--c-text); font-family: var(--font); font-size: 13px;
        transition: border-color 0.15s; width: 100%; box-sizing: border-box;
        min-width: 0; max-width: 100%;
    }
    .form-input:focus, .form-select:focus, .form-textarea:focus {
        outline: none; border-color: var(--c-purple);
    }
    .form-textarea { resize: vertical; min-height: 80px; }
    .form-range-wrap { display: flex; align-items: center; gap: 10px; }
    .form-range-wrap input[type=range] { flex: 1; }
    .form-range-val { font-size: 13px; font-weight: 500; color: var(--c-text); min-width: 36px; text-align: right; font-family: var(--font-mono); }
    .form-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--c-border); }
    .form-btn-cancel { background: none; border: 1px solid var(--c-border-med); color: var(--c-text-2); }
    .form-btn-save { background: var(--c-purple); border-color: var(--c-purple); color: #fff; }
    .form-btn-save:hover { background: #4540A0; }
    .form-btn-delete { background: none; border: 1px solid rgba(163,45,45,0.3); color: var(--c-danger); margin-right: auto; }
    .form-btn-delete:hover { background: var(--c-danger-l); }
    .form-saving { display: none; align-items: center; gap: 8px; font-size: 13px; color: var(--c-text-2); }
    .form-saving.show { display: flex; }
    .form-spinner { width: 16px; height: 16px; border: 2px solid var(--c-border-med); border-top-color: var(--c-purple); border-radius: 50%; animation: spin 0.7s linear infinite; }
    .form-error { background: var(--c-danger-l); border: 1px solid rgba(163,45,45,0.2); border-radius: var(--radius-sm); padding: 8px 12px; font-size: 12px; color: var(--c-danger); margin-top: 8px; display: none; }
    .form-error.show { display: block; }
    .form-success { background: var(--c-ok-l); border: 1px solid rgba(59,109,17,0.2); border-radius: var(--radius-sm); padding: 8px 12px; font-size: 12px; color: var(--c-ok); margin-top: 8px; display: none; }
    .form-success.show { display: block; }
    .btn-add { background: var(--c-purple); color: #fff; border-color: var(--c-purple); }
    .btn-add:hover { background: #4540A0; }
    .btn-add svg { width: 13px; height: 13px; }


    /* ======================================================
       PANNEAU PARAMÈTRES
       ====================================================== */
    .settings-modal-bg { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 400; align-items: center; justify-content: center; padding: 1rem; overflow-y: auto; }
    .settings-modal-bg.open { display: flex; }
    .settings-modal { background: var(--c-surface); border-radius: var(--radius-lg); padding: 1.75rem; max-width: 680px; width: 100%; border: 1px solid var(--c-border); box-shadow: 0 20px 60px rgba(0,0,0,0.2); margin: auto; max-height: 85vh; display: flex; flex-direction: column; }
    .settings-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--c-border); margin-bottom: 1.25rem; }
    .settings-tab { padding: 7px 14px; font-size: 13px; border: none; background: none; color: var(--c-text-2); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; font-family: var(--font); transition: all 0.15s; }
    .settings-tab.active { color: var(--c-purple); border-bottom-color: var(--c-purple); font-weight: 500; }
    .settings-tab:hover:not(.active) { color: var(--c-text); }
    .settings-pane { display: none; }
    .settings-pane.active { display: block; overflow-y: auto; max-height: calc(85vh - 160px); padding-right: 4px; }
    .settings-section { font-size: 11px; font-weight: 600; color: var(--c-text-2); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 10px; margin-top: 1.25rem; }
    .settings-section:first-child { margin-top: 0; }
    .item-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; max-height: 280px; overflow-y: auto; padding-right: 4px; }
    .item-row { display: flex; align-items: center; gap: 8px; background: var(--c-surface-2); border-radius: var(--radius-sm); padding: 8px 10px; }
    .item-row-color { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; }
    .item-row-name { flex: 1; font-size: 13px; color: var(--c-text); }
    .item-row-sub { font-size: 11px; color: var(--c-text-2); }
    .item-btn-del { border: none; background: none; cursor: pointer; color: var(--c-text-3); padding: 2px 4px; border-radius: 4px; font-size: 14px; line-height: 1; }
    .item-btn-del:hover { color: var(--c-danger); background: var(--c-danger-l); }
    .item-btn-edit { border: none; background: none; cursor: pointer; color: var(--c-text-3); padding: 2px 4px; border-radius: 4px; font-size: 12px; line-height: 1; }
    .item-btn-edit:hover { color: var(--c-purple); background: var(--c-purple-l); }
    .add-item-form { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; background: var(--c-surface); border: 1px dashed var(--c-border-med); border-radius: var(--radius-sm); padding: 10px 12px; margin-top: 4px; }
    .add-item-field { display: flex; flex-direction: column; gap: 4px; }
    .add-item-field label { font-size: 11px; font-weight: 600; color: var(--c-text-2); text-transform: uppercase; letter-spacing: 0.04em; }
    .add-item-field input, .add-item-field select { padding: 6px 8px; border-radius: var(--radius-sm); border: 1px solid var(--c-border-med); background: var(--c-surface); color: var(--c-text); font-family: var(--font); font-size: 12px; }
    .pill-preview { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; padding: 3px 9px; border-radius: 99px; font-weight: 500; }
    .color-swatch { width: 16px; height: 16px; border-radius: 50%; display: inline-block; border: 1px solid rgba(0,0,0,0.1); }
    .resp-avatar { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; flex-shrink: 0; background: var(--c-purple-l); color: var(--c-purple); }


    /* ======================================================
       PIED DE PAGE — MUNI-CONSUL
       ====================================================== */
    .footer {
        background: var(--c-surface);
        border-top: 1px solid var(--c-border);
        padding: 12px 2rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 8px;
    }
    .footer-brand {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .footer-name {
        font-size: 13px;
        font-weight: 600;
        color: var(--c-text);
        letter-spacing: 0.02em;
    }
    .footer-tm {
        font-size: 9px;
        vertical-align: super;
        color: var(--c-text-2);
        margin-left: 1px;
    }
    .footer-copy {
        font-size: 11px;
        color: var(--c-text-3);
    }
    .footer-tagline {
        font-size: 11px;
        color: var(--c-text-3);
        font-style: italic;
    }




    .alert-banner { display:none; background:#FCEBEB; border-left:4px solid #A32D2D; border-radius:var(--radius-md); padding:10px 16px; margin:0 2rem 1rem; align-items:flex-start; gap:12px; flex-wrap:wrap; }
    .alert-banner.show { display:flex; }
    .alert-banner svg { width:16px; height:16px; flex-shrink:0; color:#A32D2D; margin-top:2px; }
    .alert-banner-text { font-size:13px; color:#791F1F; flex:1; line-height:1.6; }
    .alert-banner-close { border:none; background:none; cursor:pointer; color:#A32D2D; font-size:18px; line-height:1; flex-shrink:0; }
    .alert-item { cursor:pointer; text-decoration:underline; text-decoration-style:dotted; font-weight:500; }
    .alert-item:hover { color:#5c1111; }
    .alert-link { border:none; background:none; cursor:pointer; color:#A32D2D; font-size:12px; font-weight:600; text-decoration:underline; font-family:var(--font); padding:0; }
    .nav-badge { background:#ef4444; color:#fff; font-size:10px; font-weight:700; border-radius:99px; padding:1px 5px; margin-left:4px; min-width:16px; align-items:center; justify-content:center; vertical-align:middle; }

    /* ======================================================
       TOAST NOTIFICATIONS
       ====================================================== */
    @keyframes toast-in  { from { transform:translateX(110%); opacity:0; } to { transform:translateX(0); opacity:1; } }
    @keyframes toast-out { from { opacity:1; transform:translateX(0); } to { opacity:0; transform:translateX(110%); } }
    #toast-container { position:fixed; top:16px; right:16px; z-index:99999; display:flex; flex-direction:column; gap:8px; pointer-events:none; }
    .toast {
      display:flex; align-items:center; gap:10px;
      padding:11px 16px; border-radius:10px; min-width:220px; max-width:380px;
      font-size:13px; font-weight:500; color:#fff;
      box-shadow:0 4px 24px rgba(0,0,0,0.18);
      animation:toast-in 0.35s cubic-bezier(.2,.8,.3,1) forwards;
      pointer-events:auto; cursor:pointer;
    }
    .toast.leaving { animation:toast-out 0.28s ease forwards; }
    .toast-icon { font-size:17px; flex-shrink:0; }
    .toast-success { background:linear-gradient(135deg,#166534,#15803d); }
    .toast-error   { background:linear-gradient(135deg,#991B1B,#b91c1c); }
    .toast-info    { background:linear-gradient(135deg,#1e40af,#2563eb); }

    /* ======================================================
       BOUTON ENREGISTRER — ANIMATION SUCCÈS
       ====================================================== */
    @keyframes btn-pop { 0%{transform:scale(1)} 40%{transform:scale(1.13)} 70%{transform:scale(.97)} 100%{transform:scale(1)} }
    .form-btn-save.btn-saved {
      background:#166534 !important; border-color:#166534 !important;
      animation:btn-pop 0.4s ease forwards;
    }

    /* ======================================================
       PANNEAU NOTIFICATIONS (Power Automate)
       ====================================================== */
    .pa-card { background:var(--c-surface-2); border:1px solid var(--c-border); border-radius:var(--radius-md); padding:16px 18px; margin-bottom:14px; }
    .pa-label { font-size:11px; font-weight:600; color:var(--c-text-2); text-transform:uppercase; letter-spacing:.05em; margin-bottom:6px; }
    .pa-url-input { width:100%; font-size:12px; padding:8px 10px; border:1px solid var(--c-border-med); border-radius:var(--radius-sm); background:var(--c-surface); color:var(--c-text); font-family:var(--font-mono); }
    .pa-url-input:focus { outline:2px solid var(--c-purple); border-color:transparent; }
    .pa-btn-row { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
    .pa-result { margin-top:10px; font-size:12px; min-height:20px; line-height:1.5; }
    .pa-setup details { margin-top:14px; }
    .pa-setup summary { cursor:pointer; font-size:13px; font-weight:500; color:var(--c-purple); padding:4px 0; }
    .pa-setup ol { font-size:12px; color:var(--c-text-2); margin:10px 0 0 1.1rem; line-height:2; }
    .pa-setup code { font-family:var(--font-mono); background:var(--c-surface-2); padding:1px 5px; border-radius:4px; font-size:11px; }


    .presentation-mode .sidebar { display:none !important; }
    .presentation-mode .topbar-actions .btn:not(#btn-presentation) { display:none; }
    .presentation-mode .kpi-value { font-size:42px !important; }
    .presentation-mode .kpi-card { padding:1.5rem !important; }
    .presentation-mode .content { padding:1.5rem !important; }
    @media print {
      .sidebar, .topbar-actions, .filter-bar, .tabs { display:none !important; }
      .main { width:100% !important; }
      .card { break-inside:avoid; }
      .content { padding:0 !important; }
    }


    .action-btns { display:flex; gap:4px; justify-content:flex-end; }
    .btn-action { border:none; background:none; cursor:pointer; padding:5px 7px; border-radius:6px; line-height:1; transition:background 0.15s; }
    .btn-action svg { width:13px; height:13px; display:block; }
    .btn-edit { color:var(--c-blue); }
    .btn-edit:hover { background:var(--c-blue-l); }
    .btn-del { color:var(--c-danger); }
    .btn-del:hover { background:var(--c-danger-l); }