/* Canelé Café Hub — Styles */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    :root {
      --cream: #F6EFE4; --cream-dark: #EDE3D4; --amber: #C4893A; --amber-light: #D9A85C; --amber-dark: #A3701F;
      --charcoal: #2C2422; --charcoal-mid: #4A3C38; --charcoal-light: #7A6A64;
      --white: #FDFAF6; --border: #DDD0BB;
      --sidebar-bg: #1E1916; --sidebar-w: 240px;
      --blue: #2980b9; --green: #27ae60; --red: #c0392b; --purple: #8e44ad; --orange: #e67e22;
      --font-serif: 'Playfair Display', Georgia, serif;
      --font-sans: 'Inter', system-ui, sans-serif;
      --shadow: 0 4px 20px rgba(0,0,0,.08); --shadow-lg: 0 12px 40px rgba(0,0,0,.15);
      --radius: 12px; --tr: .2s ease;
    }
    html, body { height: 100%; height: 100dvh; font-family: var(--font-sans); background: var(--cream); color: var(--charcoal); line-height: 1.6; overflow: hidden; }
    h1,h2,h3,h4 { font-family: var(--font-serif); font-weight: 500; }
    ::-webkit-scrollbar { width: 5px; height: 5px; }
    ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

    /* ══ LOGIN SCREEN ════════════════════════════════════════ */
    #loginScreen {
      position: fixed; inset: 0; z-index: 999;
      background: var(--charcoal);
      display: flex; align-items: center; justify-content: center;
    }
    #loginScreen.hidden { display: none; }
    .login-card {
      background: var(--white); border-radius: 20px; padding: 48px 40px;
      width: min(420px, 95vw); box-shadow: var(--shadow-lg);
    }
    .login-logo { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 32px; }
    .login-logo img { height: 90px; width: auto; object-fit: contain; mix-blend-mode: multiply; }
    .login-logo svg { width: 40px; height: 40px; }
    .login-logo span { font-family: var(--font-serif); font-size: 1.2rem; }
    .login-hub-tag { font-size: .65rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--amber); background: rgba(196,137,58,.1); border-radius: 50px; padding: 3px 10px; margin-left: 4px; }
    .login-card h2 { font-size: 1.6rem; margin-bottom: 6px; }
    .login-card .sub { font-size: .85rem; color: var(--charcoal-light); margin-bottom: 28px; }
    .lg { margin-bottom: 16px; }
    .lg label { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--charcoal-mid); margin-bottom: 7px; }
    .lg input { width: 100%; padding: 12px 15px; border: 1.5px solid var(--border); border-radius: 9px; background: var(--cream); font-family: var(--font-sans); font-size: .9rem; outline: none; transition: border-color var(--tr); }
    .lg input:focus { border-color: var(--amber); }
    .login-hint { font-size: .75rem; color: var(--charcoal-light); background: rgba(196,137,58,.07); border-radius: 8px; padding: 10px 14px; margin-bottom: 20px; line-height: 1.6; }
    .login-hint strong { color: var(--amber-dark); }
    .login-err { font-size: .82rem; color: var(--red); background: rgba(192,57,43,.07); border-radius: 8px; padding: 10px 14px; margin-bottom: 14px; display: none; }
    .login-err.show { display: block; }
    .btn-login { width: 100%; padding: 14px; background: var(--amber); color: white; border: none; border-radius: 50px; font-family: var(--font-sans); font-size: .88rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; transition: background var(--tr); }
    .btn-login:hover { background: var(--amber-dark); }

    /* ══ APP SHELL ═══════════════════════════════════════════ */
    #appShell { display: flex; height: 100vh; height: 100dvh; }
    #appShell.hidden { display: none; }
    /* ── Hub home : plein écran (cache sidebar + topbar) ── */
    #appShell.hub-mode #sidebar  { width:0!important; overflow:hidden!important; flex-shrink:0; }
    #appShell.hub-mode #topBar   { display:none!important; }
    #appShell.hub-mode #panelArea{ overflow:hidden!important; }
    #appShell.hub-mode #panel-hub.active { height:100dvh!important; max-height:100dvh!important; }

    /* ── Module mode : sidebar masquée + topbar sombre ── */
    #appShell.module-mode #sidebar { width:0!important; overflow:hidden!important; flex-shrink:0; transition:width .22s ease; }
    #appShell.module-mode #topBar {
      background: linear-gradient(90deg,#1E1916 0%,#2D1F14 100%)!important;
      border-bottom: 1px solid rgba(196,137,58,.18)!important;
      box-shadow: 0 2px 10px rgba(0,0,0,.28)!important;
      height: 46px!important;
      padding: 0 16px!important;
    }
    #appShell.module-mode .topbar-title {
      color: #F6EFE4!important;
      font-family: -apple-system,BlinkMacSystemFont,sans-serif!important;
      font-size: .82rem!important;
      font-weight: 700!important;
      letter-spacing: -.01em;
    }
    #appShell.module-mode .topbar-date { color:rgba(246,239,228,.32)!important; font-size:.68rem!important; }
    #appShell.module-mode .topbar-notif { color:rgba(246,239,228,.55)!important; }
    #appShell.module-mode .notif-dot { border-color:#1E1916!important; }
    #appShell.module-mode #topBarBack {
      background: rgba(255,255,255,.07)!important;
      border: 1px solid rgba(255,255,255,.13)!important;
      border-radius: 8px!important;
      color: rgba(246,239,228,.8)!important;
    }
    #appShell.module-mode #topBarBack:hover { background:rgba(255,255,255,.13)!important; color:#F6EFE4!important; border-color:rgba(255,255,255,.22)!important; }
    #appShell.module-mode #topBarBrand { display:inline!important; color:rgba(246,239,228,.38)!important; font-size:.75rem!important; font-weight:700!important; letter-spacing:-.01em; }
    #appShell.module-mode .tb-vsep { display:inline-block!important; width:1px; height:14px; background:rgba(255,255,255,.14); vertical-align:middle; margin:0 4px; }
    #appShell.module-mode #spotlightBtn {
      display: flex!important;
      background: rgba(255,255,255,.07)!important;
      border: 1px solid rgba(255,255,255,.1)!important;
      border-radius: 7px!important;
      color: rgba(246,239,228,.52)!important;
    }
    #appShell.module-mode #spotlightBtn kbd { background:rgba(255,255,255,.1)!important; color:rgba(246,239,228,.42)!important; }
    #appShell.module-mode #siteSelector > span { color:rgba(246,239,228,.38)!important; }
    #appShell.module-mode #siteSelectorSelect {
      background: rgba(255,255,255,.07)!important;
      border: 1px solid rgba(255,255,255,.12)!important;
      border-radius: 6px!important;
      color: rgba(246,239,228,.8)!important;
      font-size: .72rem!important;
    }
    #appShell.module-mode .notif-count { background:rgba(196,137,58,.9)!important; }
    /* Panels : layout inchangé, dark head sticky au scroll */
    #appShell.module-mode #panelArea { overflow-y:auto!important; }
    #appShell.module-mode .panel-dark-head { position:sticky; top:0; z-index:10; }
    /* Caisse module-mode : tabs bar sticky sous le dark head */
    #appShell.module-mode .caisse-tabs-bar   { position:sticky; top:68px; z-index:9; }
    /* Settings module-mode : tabs bar sticky sous le dark head */
    #appShell.module-mode .settings-tabs-bar { position:sticky; top:68px; z-index:9; }

    /* ── Sidebar ─────────────────────────── */
    #sidebar {
      width: var(--sidebar-w); background: var(--sidebar-bg);
      display: flex; flex-direction: column; flex-shrink: 0;
      overflow-y: auto; overflow-x: hidden;
    }
    .sb-logo { display: flex; align-items: center; gap: 10px; padding: 22px 18px 16px; border-bottom: 1px solid rgba(255,255,255,.06); }
    .sb-logo svg { width: 32px; height: 32px; flex-shrink: 0; }
    .sb-logo-text { line-height: 1.1; }
    .sb-logo-text strong { display: block; font-family: var(--font-serif); font-size: .95rem; color: white; }
    .sb-logo-text span { font-size: .58rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.35); }

    .sb-user { padding: 14px 16px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid rgba(255,255,255,.06); }
    .sb-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--amber); color: white; font-size: .72rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .sb-user-info strong { display: block; font-size: .82rem; color: white; }
    .sb-user-info span { font-size: .7rem; color: rgba(255,255,255,.4); }
    .sb-role-badge { font-size: .58rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; background: rgba(196,137,58,.25); color: var(--amber-light); border-radius: 50px; padding: 2px 7px; margin-top: 3px; display: inline-block; }

    .sb-section { font-size: .6rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.2); padding: 16px 18px 6px; }

    /* ── Caisse sous-navigation dans la sidebar ── */
    #caisseSubNav { border-bottom: 1px solid rgba(255,255,255,.06); }
    .cs-nav-label { font-size: .58rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.2); padding: 12px 18px 4px; }
    .cs-nav-item { display: flex; align-items: center; gap: 9px; padding: 8px 18px; font-size: .78rem; color: rgba(255,255,255,.45); cursor: pointer; border: none; border-left: 2px solid transparent; background: none; font-family: var(--font-sans); width: 100%; text-align: left; transition: all var(--tr); }
    .cs-nav-item:hover { color: rgba(255,255,255,.85); background: rgba(255,255,255,.04); }
    .cs-nav-item.active { color: white; background: rgba(196,137,58,.15); border-left-color: var(--amber); }
    .cs-nav-icon { font-size: .9rem; width: 18px; flex-shrink: 0; text-align: center; }

    .sb-item {
      display: flex; align-items: center; gap: 10px;
      padding: 9px 18px; font-size: .82rem; color: rgba(255,255,255,.55);
      cursor: pointer; border: none; background: none; width: 100%; text-align: left;
      font-family: var(--font-sans); transition: all var(--tr);
      border-left: 3px solid transparent;
    }
    .sb-item:hover { color: rgba(255,255,255,.9); background: rgba(255,255,255,.04); }
    .sb-item.active { color: white; background: rgba(196,137,58,.15); border-left-color: var(--amber); }
    .sb-item .sb-icon { font-size: 1rem; flex-shrink: 0; width: 20px; text-align: center; }
    .sb-item .sb-badge { margin-left: auto; background: var(--amber); color: white; border-radius: 50px; font-size: .62rem; font-weight: 700; padding: 1px 7px; }

    .sb-footer { margin-top: auto; padding: 14px 16px; border-top: 1px solid rgba(255,255,255,.06); }
    .sb-logout { display: flex; align-items: center; gap: 9px; font-size: .78rem; color: rgba(255,255,255,.35); cursor: pointer; background: none; border: none; font-family: var(--font-sans); transition: color var(--tr); padding: 6px 2px; width: 100%; }
    .sb-logout:hover { color: rgba(255,255,255,.7); }

    /* ── Main area ───────────────────────── */
    #mainArea { flex: 1; display: flex; flex-direction: column; overflow: hidden; }

    #topBar {
      height: 60px; background: var(--white); border-bottom: 1px solid var(--border);
      display: flex; align-items: center; justify-content: space-between;
      padding: 0 28px; flex-shrink: 0;
    }
    .topbar-title { font-family: var(--font-serif); font-size: 1.1rem; color: var(--charcoal); }
    .topbar-right { display: flex; align-items: center; gap: 14px; }
    .topbar-notif { position: relative; background: none; border: none; cursor: pointer; color: var(--charcoal-light); }
    .topbar-notif svg { display: block; }
    .notif-dot { position: absolute; top: -2px; right: -2px; width: 8px; height: 8px; background: var(--amber); border-radius: 50%; border: 2px solid var(--white); }
    .topbar-date { font-size: .78rem; color: var(--charcoal-light); }

    #panelArea { flex: 1; overflow-y: auto; }

    /* ── Panel shared ────────────────────── */
    .panel { display: none; padding: 28px; }
    .panel.active { display: block; }
    .panel-head { margin-bottom: 24px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
    .panel-head h2 { font-size: 1.5rem; }
    .panel-head p { font-size: .85rem; color: var(--charcoal-light); margin-top: 4px; }

    /* ── Dark Canelé brand header ────────── */
    .panel-dark-head { margin: -28px -28px 20px; }

    /* ── Cards / grid ────────────────────── */
    .card { background: var(--white); border: 1.5px solid var(--border); border-radius: var(--radius); padding: 22px; }
    .card-title { font-family: var(--font-serif); font-size: 1rem; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
    .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    .grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
    .grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }

    /* ── Buttons ─────────────────────────── */
    .btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 20px; border-radius: 50px; font-family: var(--font-sans); font-size: .8rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; cursor: pointer; border: none; transition: all var(--tr); text-decoration: none; }
    .btn-amber { background: var(--amber); color: white; }
    .btn-amber:hover { background: var(--amber-dark); }
    .btn-ghost { background: none; border: 1.5px solid var(--border); color: var(--charcoal-mid); }
    .btn-ghost:hover { border-color: var(--charcoal-mid); }
    .btn-sm { padding: 6px 14px; font-size: .72rem; }
    .btn-icon { width: 32px; height: 32px; padding: 0; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; }

    /* ── Badges ──────────────────────────── */
    .badge { display: inline-block; font-size: .65rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; border-radius: 50px; padding: 3px 10px; }
    .badge-amber  { background: rgba(196,137,58,.12); color: var(--amber-dark); }
    .badge-green  { background: rgba(39,174,96,.1);   color: #1e7e44; }
    .badge-red    { background: rgba(192,57,43,.1);   color: var(--red); }
    .badge-blue   { background: rgba(41,128,185,.1);  color: #1a6fa0; }
    .badge-purple { background: rgba(142,68,173,.1);  color: #6c3483; }
    .badge-grey   { background: rgba(44,36,34,.07);   color: var(--charcoal-light); }

    /* ── Form elements ───────────────────── */
    .fg { margin-bottom: 14px; }
    .fg label { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--charcoal-mid); margin-bottom: 6px; }
    .fg input, .fg select, .fg textarea {
      width: 100%; padding: 10px 13px; border: 1.5px solid var(--border); border-radius: 9px;
      background: var(--cream); color: var(--charcoal); font-family: var(--font-sans); font-size: .88rem; outline: none; transition: border-color var(--tr);
    }
    .fg input:focus, .fg select:focus, .fg textarea:focus { border-color: var(--amber); }
    .fg textarea { resize: vertical; min-height: 90px; }
    .fg-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

    /* ── Table ───────────────────────────── */
    .table-wrap { overflow-x: auto; }
    table { width: 100%; border-collapse: collapse; font-size: .84rem; }
    th { text-align: left; padding: 10px 14px; background: var(--cream-dark); color: var(--charcoal-mid); font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
    td { padding: 11px 14px; border-bottom: 1px solid var(--border); color: var(--charcoal-mid); vertical-align: middle; }
    tr:last-child td { border: none; }
    tr:hover td { background: rgba(196,137,58,.03); }

    /* ── Modal ───────────────────────────── */
    .modal-back { position: fixed; inset: 0; background: rgba(30,25,22,.55); backdrop-filter: blur(4px); z-index: 500; display: none; align-items: center; justify-content: center; padding: 20px; }
    .modal-back.open { display: flex; }
    .modal { background: var(--white); border-radius: 16px; width: min(500px,100%); max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow-lg); }
    .modal-head { padding: 22px 26px 16px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; background: var(--white); z-index: 1; }
    .modal-head h3 { font-family: var(--font-serif); font-size: 1.15rem; }
    .modal-close { background: none; border: none; font-size: 1.3rem; cursor: pointer; color: var(--charcoal-light); }
    .modal-body { padding: 22px 26px 26px; }
    .modal-foot { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }

    /* ── Toast ───────────────────────────── */
    #toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%) translateY(100px); background: var(--charcoal); color: white; padding: 11px 24px; border-radius: 50px; font-size: .83rem; font-weight: 500; box-shadow: var(--shadow-lg); transition: transform .28s cubic-bezier(.4,0,.2,1); z-index: 9999; white-space: nowrap; }
    #toast.show { transform: translateX(-50%) translateY(0); }

    /* ════════════════════════════════════
       DASHBOARD
    ════════════════════════════════════ */
    .dash-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; margin-bottom: 24px; }
    .stat-card { background: var(--white); border: 1.5px solid var(--border); border-radius: var(--radius); padding: 20px 22px; }
    .stat-label { font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--charcoal-light); margin-bottom: 8px; }
    .stat-value { font-family: var(--font-serif); font-size: 2rem; color: var(--charcoal); line-height: 1; margin-bottom: 4px; }
    .stat-sub { font-size: .75rem; color: var(--charcoal-light); }
    .stat-card.accent { background: var(--amber); border-color: var(--amber); }
    .stat-card.accent .stat-label, .stat-card.accent .stat-sub { color: rgba(255,255,255,.7); }
    .stat-card.accent .stat-value { color: white; }

    .dash-grid { display: grid; grid-template-columns: 1fr 320px; gap: 20px; }
    .activity-item { display: flex; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--border); align-items: flex-start; }
    .activity-item:last-child { border: none; }
    .activity-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: .9rem; flex-shrink: 0; margin-top: 2px; }
    .activity-icon.amber { background: rgba(196,137,58,.12); }
    .activity-icon.blue  { background: rgba(41,128,185,.1);  }
    .activity-icon.green { background: rgba(39,174,96,.1);   }
    .activity-text strong { font-size: .85rem; display: block; margin-bottom: 2px; }
    .activity-text span { font-size: .76rem; color: var(--charcoal-light); }
    .quick-action { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--cream); border-radius: 10px; cursor: pointer; border: 1.5px solid transparent; transition: all var(--tr); margin-bottom: 8px; font-size: .85rem; font-weight: 500; }
    .quick-action:hover { border-color: var(--amber); background: rgba(196,137,58,.05); color: var(--amber); }
    .quick-action .qa-icon { font-size: 1.2rem; }

    /* ════════════════════════════════════
       HUB (App grid)
    ════════════════════════════════════ */
    .app-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; }
    .app-tile {
      background: var(--white); border: 1.5px solid var(--border); border-radius: 14px;
      padding: 24px 18px; text-align: center; cursor: pointer;
      transition: all var(--tr); position: relative;
    }
    .app-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: rgba(196,137,58,.3); }
    .app-tile .app-icon { font-size: 2.2rem; margin-bottom: 12px; }
    .app-tile .app-name { font-size: .85rem; font-weight: 600; color: var(--charcoal); margin-bottom: 4px; }
    .app-tile .app-desc { font-size: .72rem; color: var(--charcoal-light); line-height: 1.4; }
    .app-tile .app-ext { position: absolute; top: 10px; right: 10px; font-size: .6rem; color: var(--charcoal-light); }
    .app-tile.external { border-style: dashed; }

    /* ════════════════════════════════════
       PROCÉDURES
    ════════════════════════════════════ */
    .proc-cats { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
    .proc-cat-btn { padding: 6px 16px; border-radius: 50px; border: 1.5px solid var(--border); background: none; font-family: var(--font-sans); font-size: .78rem; font-weight: 500; cursor: pointer; transition: all var(--tr); color: var(--charcoal-mid); }
    .proc-cat-btn.active, .proc-cat-btn:hover { background: var(--amber); border-color: var(--amber); color: white; }
    .proc-list { display: flex; flex-direction: column; gap: 10px; }
    .proc-item { background: var(--white); border: 1.5px solid var(--border); border-radius: var(--radius); padding: 16px 18px; display: flex; align-items: center; gap: 14px; cursor: pointer; transition: all var(--tr); }
    .proc-item:hover { border-color: var(--amber); box-shadow: var(--shadow); }
    .proc-cat-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
    .proc-info { flex: 1; }
    .proc-info strong { display: block; font-size: .9rem; margin-bottom: 2px; }
    .proc-info span { font-size: .75rem; color: var(--charcoal-light); }
    .proc-detail { background: var(--white); border: 1.5px solid var(--border); border-radius: var(--radius); padding: 24px; display: none; }
    .proc-detail.show { display: block; }
    .proc-detail-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
    .proc-detail h3 { font-size: 1.3rem; }
    .proc-content { font-size: .88rem; color: var(--charcoal-mid); line-height: 1.8; white-space: pre-wrap; }

    /* ════════════════════════════════════
       GED — Drive Style
    ════════════════════════════════════ */

    /* Barre de navigation */
    .ged-nav-bar { display: flex; align-items: center; gap: 12px; padding: 0 0 16px; flex-wrap: wrap; }
    .ged-nav-right { display: flex; align-items: center; gap: 8px; margin-left: auto; }

    /* Breadcrumb */
    .ged-breadcrumb { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; min-width: 0; }
    .ged-bc-item { font-size: .84rem; font-weight: 500; color: var(--charcoal-mid); cursor: pointer; padding: 5px 9px; border-radius: 7px; transition: all var(--tr); white-space: nowrap; max-width: 200px; overflow: hidden; text-overflow: ellipsis; }
    .ged-bc-item:hover { background: rgba(196,137,58,.09); color: var(--amber); }
    .ged-bc-item.active { color: var(--charcoal); font-weight: 600; }
    .ged-bc-sep { color: var(--charcoal-light); font-size: 1rem; opacity: .35; padding: 0 1px; user-select: none; }

    /* Search & toggle */
    .ged-search { padding: 8px 12px; border: 1.5px solid var(--border); border-radius: 8px; font-family: var(--font-sans); font-size: .84rem; outline: none; background: var(--cream); width: 200px; transition: border-color var(--tr), width var(--tr); }
    .ged-search:focus { border-color: var(--amber); width: 260px; }
    .ged-view-toggle { display: flex; gap: 2px; }
    .ged-vbtn { background: none; border: 1.5px solid var(--border); border-radius: 6px; width: 30px; height: 30px; font-size: .9rem; cursor: pointer; color: var(--charcoal-light); transition: all var(--tr); display: flex; align-items: center; justify-content: center; }
    .ged-vbtn:hover { border-color: var(--amber); color: var(--amber); }
    .ged-vbtn.active { background: var(--amber); color: #fff; border-color: var(--amber); }

    /* Section title + états vides */
    .ged-section-title { font-size: .67rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--charcoal-light); padding: 14px 2px 8px; }
    .ged-loading { padding: 48px; text-align: center; color: var(--charcoal-light); font-size: .85rem; }
    .ged-empty { padding: 48px 24px; text-align: center; color: var(--charcoal-light); font-size: .85rem; line-height: 1.8; }

    /* ── Grille de dossiers ── */
    .ged-folders-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin-bottom: 4px; }

    .ged-folder-card { display: flex; align-items: flex-start; gap: 10px; padding: 11px 10px 11px 14px; border: 1.5px solid var(--border); border-radius: 10px; background: var(--white); cursor: pointer; transition: all var(--tr); position: relative; min-width: 0; min-height: 54px; }
    .ged-folder-card:hover { border-color: rgba(196,137,58,.5); background: rgba(196,137,58,.04); box-shadow: 0 2px 14px rgba(196,137,58,.1); }
    .ged-folder-card.ged-folder-new { border-style: dashed; border-color: var(--border); align-items: center; }
    .ged-folder-card.ged-folder-new:hover { border-color: var(--amber); }

    .gfc-icon { font-size: 1.55rem; flex-shrink: 0; line-height: 1; padding-top: 1px; }
    .gfc-info { flex: 1; min-width: 0; }
    .gfc-name { font-size: .82rem; font-weight: 600; color: var(--charcoal); white-space: normal; word-break: break-word; line-height: 1.3; display: flex; align-items: flex-start; gap: 4px; }
    .gfc-sub { font-size: .68rem; color: var(--charcoal-light); margin-top: 3px; }
    /* Emoji picker dans modal dossier */
    .ged-emoji-pick { font-size: 1.4rem; cursor: pointer; padding: 5px 7px; border-radius: 8px; border: 1.5px solid transparent; transition: all .15s; display: inline-flex; align-items: center; justify-content: center; }
    .ged-emoji-pick:hover { background: rgba(196,137,58,.12); border-color: rgba(196,137,58,.3); }
    .ged-emoji-pick.selected { background: rgba(196,137,58,.18); border-color: var(--amber); }
    .gfc-actions { display: flex; gap: 2px; flex-shrink: 0; opacity: 0; transition: opacity var(--tr); }
    .ged-folder-card:hover .gfc-actions { opacity: 1; }
    .gfc-btn { background: none; border: none; cursor: pointer; font-size: .8rem; padding: 5px 6px; border-radius: 5px; color: var(--charcoal-light); transition: all var(--tr); line-height: 1; }
    .gfc-btn:hover { background: rgba(196,137,58,.14); color: var(--amber-dark); }
    .gfc-btn.danger:hover { background: rgba(192,57,43,.1); color: var(--red); }

    /* ── Vue liste fichiers (Drive table) ── */
    .ged-table-wrap { overflow-x: auto; border: 1.5px solid var(--border); border-radius: 10px; background: var(--white); }
    .ged-file-table { width: 100%; border-collapse: collapse; font-size: .83rem; }
    .gft-header { }
    .gft-header th { padding: 9px 14px; background: var(--cream); border-bottom: 1.5px solid var(--border); font-size: .67rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--charcoal-light); white-space: nowrap; text-align: left; }
    .gft-row { cursor: default; transition: background var(--tr); }
    .gft-row.gft-previewable { cursor: pointer; }
    .gft-row:hover { background: rgba(196,137,58,.04); }
    .gft-row td { padding: 10px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
    .ged-file-table tbody tr:last-child td { border-bottom: none; }
    .gft-name { display: flex; align-items: center; gap: 9px; min-width: 0; }
    .gft-icon { font-size: 1.2rem; flex-shrink: 0; }
    .gft-name > span { font-size: .84rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 280px; display: block; }
    .gft-cell { font-size: .79rem; color: var(--charcoal-mid); white-space: nowrap; }
    .gft-muted { color: var(--charcoal-light) !important; }
    .gft-actions { display: flex; gap: 3px; opacity: 0; transition: opacity var(--tr); white-space: nowrap; }
    .gft-row:hover .gft-actions { opacity: 1; }

    /* ── Vue grille fichiers ── */
    .ged-file-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 10px; }
    .ged-file-grid-card { border: 1.5px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--white); cursor: pointer; transition: all var(--tr); }
    .ged-file-grid-card:hover { border-color: rgba(196,137,58,.5); box-shadow: 0 2px 14px rgba(196,137,58,.1); }
    .gfg-thumb { height: 90px; background: var(--cream); display: flex; align-items: center; justify-content: center; font-size: 2.2rem; border-bottom: 1px solid var(--border); overflow: hidden; }
    .gfg-thumb img { width: 100%; height: 100%; object-fit: cover; }
    .gfg-info { padding: 8px 10px 10px; }
    .gfg-name { font-size: .78rem; font-weight: 600; color: var(--charcoal); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }
    .gfg-meta { font-size: .67rem; color: var(--charcoal-light); }
    .gfg-btns { display: flex; gap: 4px; margin-top: 7px; }

    /* ════════════════════════════════════
       CONGÉS
    ════════════════════════════════════ */
    .conges-layout { display: grid; grid-template-columns: 1fr 340px; gap: 20px; }
    .conge-row { display: flex; align-items: center; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--border); }
    .conge-row:last-child { border: none; }
    .conge-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--amber); color: white; font-size: .7rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .conge-info { flex: 1; }
    .conge-info strong { display: block; font-size: .86rem; margin-bottom: 2px; }
    .conge-info span { font-size: .76rem; color: var(--charcoal-light); }
    .conge-actions { display: flex; gap: 6px; }
    .btn-approve { background: rgba(39,174,96,.12); color: var(--green); border: 1px solid rgba(39,174,96,.25); border-radius: 6px; padding: 5px 12px; font-size: .72rem; font-weight: 600; cursor: pointer; transition: all var(--tr); }
    .btn-approve:hover { background: var(--green); color: white; }
    .btn-refuse  { background: rgba(192,57,43,.08); color: var(--red); border: 1px solid rgba(192,57,43,.2); border-radius: 6px; padding: 5px 12px; font-size: .72rem; font-weight: 600; cursor: pointer; transition: all var(--tr); }
    .btn-refuse:hover  { background: var(--red); color: white; }

    /* ════════════════════════════════════
       PLANNING
    ════════════════════════════════════ */
    .planning-grid { overflow-x: auto; }
    .planning-table { width: 100%; border-collapse: collapse; min-width: 700px; }
    .planning-table th { background: var(--cream-dark); padding: 10px 12px; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--charcoal-mid); border: 1px solid var(--border); text-align: center; }
    .planning-table td { border: 1px solid var(--border); padding: 8px; vertical-align: top; min-height: 80px; width: calc(100% / 7); }
    .planning-table td:first-child { font-size: .82rem; font-weight: 600; color: var(--charcoal-mid); background: var(--cream); padding: 10px 12px; white-space: nowrap; }
    .shift-block { border-radius: 7px; padding: 5px 9px; font-size: .72rem; margin-bottom: 4px; font-weight: 600; cursor: pointer; border-left: 3px solid; line-height: 1.4; }
    .shift-block .shift-hours { font-size:.68rem; opacity:.8; display:block; font-weight:400; }
    .shift-block .shift-net   { font-size:.65rem; opacity:.7; display:block; }
    /* Couleurs auto par index employé */
    .sc-0 { background:rgba(196,137,58,.12); border-color:#C4893A; color:#7a5520; }
    .sc-1 { background:rgba(41,128,185,.10); border-color:#2980B9; color:#1a6fa0; }
    .sc-2 { background:rgba(39,174,96,.10);  border-color:#27AE60; color:#1e7e44; }
    .sc-3 { background:rgba(142,68,173,.10); border-color:#8E44AD; color:#6c3483; }
    .sc-4 { background:rgba(192,57,43,.10);  border-color:#C0392B; color:#922b21; }
    .sc-5 { background:rgba(22,160,133,.10); border-color:#16A085; color:#117a65; }
    .planning-hours-total { font-size:.68rem; color:var(--charcoal-light); text-align:right; padding:4px 8px 2px; font-weight:600; }
    .export-emp-check { display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:8px;cursor:pointer; }
    .export-emp-check:hover { background:var(--cream-dark); }
    .export-emp-check input { width:16px;height:16px;cursor:pointer; }
    .today-col { background: rgba(196,137,58,.03); }

    /* ════════════════════════════════════
       ANNUAIRE
    ════════════════════════════════════ */
    .annuaire-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); gap: 16px; }
    .emp-card { background: var(--white); border: 1.5px solid var(--border); border-radius: var(--radius); padding: 22px; text-align: center; transition: all var(--tr); }
    .emp-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
    .emp-avatar-lg { width: 56px; height: 56px; border-radius: 50%; background: var(--amber); color: white; font-size: 1.1rem; font-weight: 700; display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; }
    .emp-name { font-family: var(--font-serif); font-size: 1.05rem; margin-bottom: 4px; }
    .emp-poste { font-size: .78rem; color: var(--charcoal-light); margin-bottom: 12px; }
    .emp-contacts { display: flex; flex-direction: column; gap: 5px; font-size: .78rem; color: var(--charcoal-mid); }
    .emp-contacts a { color: var(--amber); text-decoration: none; }

    /* ════════════════════════════════════
       MESSAGERIE
    ════════════════════════════════════ */
    .msg-list { display: flex; flex-direction: column; gap: 12px; }
    .msg-item { background: var(--white); border: 1.5px solid var(--border); border-radius: var(--radius); padding: 16px 18px; }
    .msg-item.pinned { border-color: var(--amber); background: rgba(196,137,58,.03); }
    .msg-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
    .msg-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--charcoal); color: white; font-size: .65rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .msg-author { font-size: .84rem; font-weight: 600; }
    .msg-time { font-size: .72rem; color: var(--charcoal-light); margin-left: auto; }
    .msg-body { font-size: .85rem; color: var(--charcoal-mid); line-height: 1.6; }
    .msg-pin { font-size: .65rem; font-weight: 700; background: rgba(196,137,58,.15); color: var(--amber-dark); border-radius: 50px; padding: 2px 8px; }

    /* ════════════════════════════════════
       FORMATION
    ════════════════════════════════════ */
    .formation-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap: 14px; margin-bottom: 24px; }
    .formation-cat { background: var(--white); border: 1.5px solid var(--border); border-radius: var(--radius); padding: 18px; cursor: pointer; transition: all var(--tr); }
    .formation-cat:hover { border-color: var(--amber); box-shadow: var(--shadow); }
    .formation-cat .fc-icon { font-size: 1.8rem; margin-bottom: 10px; }
    .formation-cat h4 { font-size: .9rem; margin-bottom: 4px; }
    .formation-cat span { font-size: .75rem; color: var(--charcoal-light); }
    .resource-item { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
    .resource-item:last-child { border: none; }
    .resource-icon { font-size: 1.3rem; flex-shrink: 0; }
    .resource-info { flex: 1; }
    .resource-info strong { display: block; font-size: .86rem; margin-bottom: 2px; }
    .resource-info span { font-size: .74rem; color: var(--charcoal-light); }

    /* ════════════════════════════════════
       CAISSE — Period tabs & nav
    ════════════════════════════════════ */
    /* Caisse — section tabs bar (module-mode) */
    .caisse-tabs-bar { display:flex; gap:0; border-bottom:1.5px solid var(--border); background:#fff; padding:0 20px; }
    .caisse-section-tab { background:none; border:none; border-bottom:2.5px solid transparent; padding:10px 18px; font-family:var(--font-sans); font-size:.8rem; font-weight:600; color:var(--charcoal-light); cursor:pointer; transition:all var(--tr); white-space:nowrap; margin-bottom:-1.5px; }
    .caisse-section-tab:hover { color:var(--charcoal-mid); }
    .caisse-section-tab.active { color:var(--amber); border-bottom-color:var(--amber); }

    /* Settings — section tabs bar (module-mode) */
    .settings-tabs-bar { display:flex; gap:0; border-bottom:1.5px solid var(--border); background:#fff; padding:0 20px; }
    .settings-tab { background:none; border:none; border-bottom:2.5px solid transparent; padding:10px 18px; font-family:var(--font-sans); font-size:.8rem; font-weight:600; color:var(--charcoal-light); cursor:pointer; transition:all var(--tr); white-space:nowrap; margin-bottom:-1.5px; }
    .settings-tab:hover { color:var(--charcoal-mid); }
    .settings-tab.active { color:var(--amber); border-bottom-color:var(--amber); }

    /* Settings — sections layout */
    .settings-section { padding: 20px 28px; }
    .settings-section-intro { margin-bottom:16px; }
    .settings-section-intro p { font-size:.86rem; color:var(--charcoal-mid); line-height:1.6; margin:0; }
    .settings-card-full { max-width:620px; }
    /* 2-col layout pour congés et notifications */
    .settings-conges-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; max-width:900px; }
    .settings-notifs-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; max-width:900px; }

    .cp-tabs { display:flex; border:1.5px solid var(--border); border-radius:10px; overflow:hidden; width:fit-content; }
    .cp-tab { padding:8px 20px; background:none; border:none; font-family:var(--font-sans); font-size:.8rem; font-weight:600; cursor:pointer; color:var(--charcoal-light); transition:all var(--tr); }
    .cp-tab.active { background:var(--amber); color:white; }
    .cp-nav { display:flex; align-items:center; gap:10px; }
    .cp-nav-label { font-size:.88rem; font-weight:600; color:var(--charcoal-mid); min-width:220px; text-align:center; }
    .cp-nav-btn { background:none; border:1.5px solid var(--border); border-radius:8px; width:32px; height:32px; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:1.1rem; color:var(--charcoal-mid); transition:all var(--tr); line-height:1; }
    .cp-nav-btn:hover:not(:disabled) { border-color:var(--amber); color:var(--amber); }
    .cp-nav-btn:disabled { opacity:.3; cursor:default; }

    /* ════════════════════════════════════
       CAISSE — KPI cards
    ════════════════════════════════════ */
    .kpi-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:20px; }
    .kpi-card { background:var(--white); border:1.5px solid var(--border); border-radius:var(--radius); padding:18px 20px; }
    .kpi-card.accent { background:var(--amber); border-color:var(--amber); }
    .kpi-label { font-size:.67rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--charcoal-light); margin-bottom:8px; }
    .kpi-card.accent .kpi-label { color:rgba(255,255,255,.75); }
    .kpi-value { font-family:var(--font-serif); font-size:2rem; color:var(--charcoal); line-height:1; margin-bottom:4px; }
    .kpi-card.accent .kpi-value { color:white; }
    .kpi-sub { font-size:.73rem; color:var(--charcoal-light); }
    .kpi-card.accent .kpi-sub { color:rgba(255,255,255,.7); }
    .kpi-progress { background:var(--cream-dark); border-radius:4px; height:5px; margin:8px 0 5px; }
    .kpi-card.accent .kpi-progress { background:rgba(255,255,255,.25); }
    .kpi-progress-bar { height:100%; border-radius:4px; background:var(--amber-dark); transition:width .45s ease; }
    .kpi-card.accent .kpi-progress-bar { background:white; }
    .kpi-trend { display:inline-flex; align-items:center; gap:4px; font-size:.72rem; font-weight:700; padding:2px 8px; border-radius:50px; margin-top:5px; }
    .kpi-trend.up { background:rgba(39,174,96,.1); color:#1e7e44; }
    .kpi-trend.down { background:rgba(192,57,43,.1); color:var(--red); }

    /* ════════════════════════════════════
       CAISSE — Chart
    ════════════════════════════════════ */
    .caisse-chart-wrap { background:var(--white); border:1.5px solid var(--border); border-radius:var(--radius); padding:20px 24px 14px; margin-bottom:20px; }
    .caisse-chart-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; flex-wrap:wrap; gap:6px; }
    .caisse-chart-head h4 { font-family:var(--font-serif); font-size:1rem; }

    /* ════════════════════════════════════
       CAISSE — Breakdown bars
    ════════════════════════════════════ */
    .breakdown-row { margin-bottom:11px; }
    .breakdown-label { display:flex; justify-content:space-between; font-size:.8rem; margin-bottom:4px; }
    .breakdown-label strong { color:var(--charcoal-mid); }
    .breakdown-pct { color:var(--charcoal-light); font-size:.72rem; }
    .breakdown-track { background:var(--cream-dark); border-radius:4px; height:7px; }
    .breakdown-fill { height:100%; border-radius:4px; transition:width .45s ease; }

    /* ════════════════════════════════════
       CAISSE — Entry list
    ════════════════════════════════════ */
    .entry-row { display:flex; align-items:center; gap:8px; padding:8px 0; border-bottom:1px solid var(--border); font-size:.82rem; }
    .entry-row:last-child { border:none; }
    .entry-cat { flex:1; color:var(--charcoal-mid); }
    .entry-pay { font-size:.73rem; color:var(--charcoal-light); white-space:nowrap; }
    .entry-amt { font-weight:700; color:var(--charcoal); white-space:nowrap; }
    .entry-del { background:none; border:none; cursor:pointer; color:var(--charcoal-light); padding:4px; border-radius:5px; font-size:.82rem; flex-shrink:0; }
    .entry-del:hover { color:var(--red); background:rgba(192,57,43,.08); }

    /* ════════════════════════════════════
       CAISSE — Objectifs modal
    ════════════════════════════════════ */
    .obj-section { margin-bottom:22px; }
    .obj-section-title { font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--charcoal-mid); margin-bottom:12px; padding-bottom:6px; border-bottom:1px solid var(--border); }
    .obj-day-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:8px; }
    .obj-day-input { text-align:center; }
    .obj-day-input label { font-size:.65rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--charcoal-light); display:block; margin-bottom:5px; }
    .obj-day-input input { width:100%; padding:8px 4px; text-align:center; border:1.5px solid var(--border); border-radius:8px; background:var(--cream); font-family:var(--font-sans); font-size:.84rem; outline:none; transition:border-color var(--tr); }
    .obj-day-input input:focus { border-color:var(--amber); }

    /* ════════════════════════════════════
       CLIENT — Drawer
    ════════════════════════════════════ */
    .client-drawer { position:fixed; top:0; right:0; bottom:0; width:min(480px,100vw); background:var(--white); box-shadow:-6px 0 40px rgba(0,0,0,.13); z-index:600; transform:translateX(100%); transition:transform .3s cubic-bezier(.4,0,.2,1); display:flex; flex-direction:column; }
    .client-drawer.open { transform:translateX(0); }
    .cd-head { padding:20px 24px 16px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:14px; flex-shrink:0; }
    .cd-avatar { width:50px; height:50px; border-radius:50%; background:var(--amber); color:white; font-size:1rem; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
    .cd-info strong { font-family:var(--font-serif); font-size:1.1rem; display:block; }
    .cd-info span { font-size:.78rem; color:var(--charcoal-light); }
    .cd-close { margin-left:auto; background:none; border:1.5px solid var(--border); border-radius:8px; width:34px; height:34px; cursor:pointer; font-size:.9rem; color:var(--charcoal-light); transition:all var(--tr); }
    .cd-close:hover { border-color:var(--charcoal-mid); color:var(--charcoal); }
    .cd-body { flex:1; overflow-y:auto; padding:20px 24px 32px; }
    .cd-kpis { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:20px; }
    .cd-kpi { background:var(--cream); border-radius:10px; padding:12px 14px; }
    .cd-kpi-label { font-size:.65rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--charcoal-light); margin-bottom:4px; }
    .cd-kpi-val { font-size:.95rem; font-weight:700; color:var(--charcoal); }
    .cd-kpi-val.amber { color:var(--amber-dark); }
    .cd-section-title { font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--charcoal-mid); margin:16px 0 10px; padding-bottom:6px; border-bottom:1px solid var(--border); }
    .cd-order { border:1.5px solid var(--border); border-radius:10px; padding:12px 14px; margin-bottom:8px; }
    .cd-order-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:5px; }
    .cd-addr { background:var(--cream); border-radius:8px; padding:10px 12px; font-size:.82rem; color:var(--charcoal-mid); margin-bottom:8px; line-height:1.6; }

    /* ════════════════════════════════════
       ANNUAIRE — edit overlay
    ════════════════════════════════════ */
    .emp-card { position: relative; }
    .emp-card-actions { display: none; position: absolute; top: 10px; right: 10px; gap: 5px; }
    .emp-card:hover .emp-card-actions { display: flex; }
    .btn-emp-action { width: 28px; height: 28px; border-radius: 7px; border: 1.5px solid var(--border); background: var(--white); font-size: .8rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all var(--tr); }
    .btn-emp-action:hover { border-color: var(--amber); background: rgba(196,137,58,.08); }

    /* ════════════════════════════════════
       ADMIN — commandes & clients
    ════════════════════════════════════ */
    .admin-tabs { display: flex; margin-bottom: 20px; border: 1.5px solid var(--border); border-radius: 10px; overflow: hidden; width: fit-content; }
    .admin-tab { padding: 9px 24px; background: none; border: none; font-family: var(--font-sans); font-size: .82rem; font-weight: 600; cursor: pointer; color: var(--charcoal-light); transition: all var(--tr); }
    .admin-tab.active { background: var(--amber); color: white; }
    .status-select { border: 1.5px solid var(--border); border-radius: 6px; padding: 4px 8px; font-size: .76rem; font-family: var(--font-sans); background: var(--cream); cursor: pointer; }

    /* ════════════════════════════════════
       STOCKS
    ════════════════════════════════════ */
    .stock-mvt-in  { background:rgba(39,174,96,.1);  color:#1e7e44; border-radius:4px; padding:2px 8px; font-size:.72rem; font-weight:700; }
    .stock-mvt-out { background:rgba(192,57,43,.1);  color:var(--red); border-radius:4px; padding:2px 8px; font-size:.72rem; font-weight:700; }

    /* ════════════════════════════════════
       PLANNING — edit
    ════════════════════════════════════ */
    .shift-block { transition: opacity var(--tr); }
    .shift-block:hover { opacity: .75; }

    /* ════════════════════════════════════
       HUB TILE — svg icon alignment
    ════════════════════════════════════ */
    .app-tile-svg { display:flex; align-items:center; justify-content:center; margin-bottom:12px; }

    /* ════════════════════════════════════
       NOTIFICATIONS
    ════════════════════════════════════ */
    .notif-wrap { position:relative; }
    .notif-panel { position:absolute; top:calc(100% + 10px); right:0; background:var(--white); border:1.5px solid var(--border); border-radius:14px; box-shadow:var(--shadow-lg); min-width:300px; max-height:420px; overflow-y:auto; z-index:800; opacity:0; pointer-events:none; transform:translateY(-8px) scale(.97); transform-origin:top right; transition:opacity .2s ease,transform .2s ease; }
    .notif-wrap.open .notif-panel { opacity:1; pointer-events:all; transform:translateY(0) scale(1); }
    .notif-head { padding:13px 16px 10px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; background:var(--white); z-index:1; }
    .notif-head strong { font-size:.88rem; font-family:var(--font-serif); }
    .notif-item { display:flex; align-items:flex-start; gap:10px; padding:11px 16px; border-bottom:1px solid var(--border); cursor:pointer; transition:background .15s; }
    .notif-item:last-child { border:none; }
    .notif-item:hover { background:rgba(196,137,58,.04); }
    .notif-icon { width:30px; height:30px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:.85rem; flex-shrink:0; }
    .notif-text strong { display:block; font-size:.82rem; margin-bottom:2px; }
    .notif-text span { font-size:.74rem; color:var(--charcoal-light); }
    .notif-empty { padding:28px; text-align:center; color:var(--charcoal-light); font-size:.83rem; }
    .notif-count { position:absolute; top:-4px; right:-4px; min-width:16px; height:16px; background:var(--red); border-radius:50px; font-size:.58rem; font-weight:700; color:white; display:none; align-items:center; justify-content:center; padding:0 3px; border:2px solid var(--white); }

    /* ════════════════════════════════════
       CHECKLIST
    ════════════════════════════════════ */
    .checklist-item { display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid var(--border); cursor:pointer; transition:color .15s; user-select:none; }
    .checklist-item:last-child { border:none; }
    .checklist-item span { font-size:.86rem; color:var(--charcoal-mid); transition:color .15s; }
    .checklist-item.done span { text-decoration:line-through; color:var(--charcoal-light); }
    .checklist-check { width:22px; height:22px; border-radius:6px; border:1.5px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:.72rem; font-weight:700; color:white; flex-shrink:0; transition:all .15s; }
    .checklist-item.done .checklist-check { background:var(--green); border-color:var(--green); }
    .checklist-item:not(.done):hover .checklist-check { border-color:var(--amber); }

    /* ════════════════════════════════════
       COMMANDES SPÉCIALES
    ════════════════════════════════════ */
    .commande-row { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:14px 0; border-bottom:1px solid var(--border); }
    .commande-row:last-child { border:none; }
    .commande-main { flex:1; min-width:0; }
    .commande-main strong { font-size:.9rem; }

    /* ════════════════════════════════════
       MODULE TOGGLE SWITCH
    ════════════════════════════════════ */
    .toggle-row { display:flex; align-items:center; justify-content:space-between; padding:13px 0; border-bottom:1px solid var(--border); }
    .toggle-row:last-child { border:none; }
    .toggle-label { font-size:.87rem; font-weight:500; color:var(--charcoal-mid); }
    .toggle-sub { font-size:.74rem; color:var(--charcoal-light); margin-top:2px; }
    .toggle-switch { position:relative; width:42px; height:24px; flex-shrink:0; }
    .toggle-switch input { opacity:0; width:0; height:0; position:absolute; }
    .toggle-slider { position:absolute; inset:0; background:var(--border); border-radius:24px; cursor:pointer; transition:background .2s; }
    .toggle-slider::before { content:''; position:absolute; height:18px; width:18px; left:3px; top:3px; background:white; border-radius:50%; transition:transform .2s; box-shadow:0 1px 3px rgba(0,0,0,.2); }
    .toggle-switch input:checked + .toggle-slider { background:var(--amber); }
    .toggle-switch input:checked + .toggle-slider::before { transform:translateX(18px); }

    /* ── Filtres paiement ───────────────────── */
    .pay-filter { background:none; border:1.5px solid var(--border); border-radius:50px; padding:6px 16px; font-size:.78rem; font-weight:600; font-family:var(--font-sans); color:var(--charcoal-mid); cursor:pointer; transition:all var(--tr); }
    .pay-filter:hover { border-color:var(--amber); color:var(--amber); }
    .pay-filter.active { background:var(--amber); border-color:var(--amber); color:#fff; }

    /* ── Actions commande ───────────────────── */
    .cmd-actions { display:flex; gap:6px; flex-wrap:wrap; }
    .cmd-btn { padding:4px 12px; border-radius:50px; font-size:.72rem; font-weight:600; font-family:var(--font-sans); cursor:pointer; border:1.5px solid; transition:all .15s; white-space:nowrap; }
    .cmd-btn-detail  { border-color:var(--border); color:var(--charcoal-mid); background:#fff; }
    .cmd-btn-detail:hover  { border-color:var(--amber); color:var(--amber); }
    .cmd-btn-facture { border-color:var(--charcoal-mid); color:var(--charcoal-mid); background:#fff; }
    .cmd-btn-facture:hover { border-color:var(--charcoal); color:var(--charcoal); background:var(--cream); }
    .cmd-btn-refund  { border-color:#dc3545; color:#dc3545; background:#fff; }
    .cmd-btn-refund:hover  { background:#dc3545; color:#fff; }

    /* ══ UTILISATEURS ════════════════════════════════════ */
    .users-table { width:100%; border-collapse:collapse; }
    .users-table th { background:var(--charcoal); color:rgba(253,250,246,.85); padding:10px 14px; font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; text-align:left; }
    .users-table td { padding:12px 14px; border-bottom:1px solid var(--border); font-size:.88rem; vertical-align:middle; }
    .users-table tr:last-child td { border-bottom:none; }
    .users-table tr:hover td { background:rgba(196,137,58,.04); }
    .role-badge { display:inline-block; border-radius:50px; padding:2px 10px; font-size:.68rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
    .role-admin       { background:rgba(196,137,58,.15); color:var(--amber-dark); }
    .role-collaborateur { background:rgba(39,174,96,.12); color:#1a7a3c; }
    .role-lecture_seule { background:rgba(41,128,185,.12); color:#1a5a80; }
    .status-badge { display:inline-block; border-radius:50px; padding:2px 9px; font-size:.68rem; font-weight:700; }
    .status-actif   { background:#d4edda; color:#155724; }
    .status-inactif { background:#e2e3e5; color:#383d41; }
    .user-actions { display:flex; gap:6px; }
    .user-btn { padding:4px 12px; border-radius:50px; font-size:.72rem; font-weight:600; font-family:var(--font-sans); cursor:pointer; border:1.5px solid; transition:all .15s; white-space:nowrap; }
    .user-btn-edit  { border-color:var(--border); color:var(--charcoal-mid); background:#fff; }
    .user-btn-edit:hover  { border-color:var(--amber); color:var(--amber); }
    .user-btn-pwd   { border-color:#2980b9; color:#2980b9; background:#fff; }
    .user-btn-pwd:hover   { background:#2980b9; color:#fff; }
    .user-btn-del   { border-color:#dc3545; color:#dc3545; background:#fff; }
    .user-btn-del:hover   { background:#dc3545; color:#fff; }
    .user-btn-toggle { border-color:#6c757d; color:#6c757d; background:#fff; }
    .user-btn-toggle:hover { background:#6c757d; color:#fff; }

    /* ════════════════════════════════════
       MODULE SIGNATURE
    ════════════════════════════════════ */

    /* Dark header */
    .sig-dark-head { display:flex; align-items:center; gap:14px; }
    .sig-head-icon { width:44px; height:44px; background:rgba(255,255,255,.12); border-radius:.65rem; display:flex; align-items:center; justify-content:center; font-size:1.4rem; flex-shrink:0; }
    .sig-head-text { flex:1; min-width:0; }
    .sig-head-title { font-family:var(--font-serif); font-size:1.15rem; color:#fff; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .sig-head-sub   { font-size:.75rem; color:rgba(255,255,255,.6); margin-top:1px; }
    .sig-head-btn   { flex-shrink:0; }

    /* Stats bar */
    .sig-stats-bar { display:flex; gap:12px; padding:16px 28px 0; }
    .sig-stat { flex:1; background:var(--white); border:1.5px solid var(--border); border-radius:.75rem; padding:12px 16px; cursor:pointer; transition:border-color .15s; text-align:center; }
    .sig-stat:hover { border-color:var(--amber); }
    .sig-stat-val { display:block; font-family:var(--font-serif); font-size:1.6rem; font-weight:700; color:var(--charcoal); line-height:1.1; }
    .sig-stat-lbl { display:block; font-size:.72rem; color:var(--charcoal-light); font-weight:600; text-transform:uppercase; letter-spacing:.04em; margin-top:2px; }
    .sig-stat-amber .sig-stat-val { color:#f59e0b; }
    .sig-stat-amber { border-color:#fde68a; }
    .sig-stat-amber:hover { border-color:#f59e0b; }
    .sig-stat-green .sig-stat-val { color:#22c55e; }
    .sig-stat-green { border-color:#bbf7d0; }
    .sig-stat-green:hover { border-color:#22c55e; }

    /* Filters bar */
    .sig-filters-bar { display:flex; gap:8px; padding:14px 28px 0; overflow-x:auto; scrollbar-width:none; }
    .sig-filters-bar::-webkit-scrollbar { display:none; }
    .sig-filter { padding:7px 16px; border-radius:50px; border:1.5px solid var(--border); background:#fff; font-size:.76rem; font-weight:600; font-family:var(--font-sans); cursor:pointer; white-space:nowrap; color:var(--charcoal-mid); transition:all .15s; flex-shrink:0; }
    .sig-filter:hover  { border-color:var(--amber); color:var(--amber); }
    .sig-filter.active { background:var(--amber); border-color:var(--amber); color:#fff; }

    /* List container */
    .sig-list-wrap { padding:14px 28px 28px; display:flex; flex-direction:column; gap:10px; }

    /* Row card */
    .sig-row { display:flex; align-items:center; gap:14px; background:#fff; border:1.5px solid var(--border); border-radius:.85rem; padding:14px 16px; transition:box-shadow .15s,border-color .15s; }
    .sig-row:hover { box-shadow:0 4px 16px rgba(0,0,0,.07); border-color:#d4c5ba; }

    /* Avatar initials */
    .sig-doc-icon { width:40px; height:40px; border-radius:.65rem; background:linear-gradient(135deg,#f59e0b,#d97706); color:#fff; font-weight:700; font-size:.88rem; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-family:var(--font-serif); }

    /* Body */
    .sig-body { flex:1; min-width:0; }
    .sig-nom { font-size:.9rem; font-weight:700; color:var(--charcoal); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
    .sig-sub { display:flex; align-items:center; gap:6px; margin-top:4px; font-size:.78rem; color:var(--charcoal-light); flex-wrap:wrap; }

    /* Badge */
    .sig-badge { padding:2px 8px; border-radius:99px; font-size:.72rem; font-weight:600; border:1px solid transparent; }
    .sig-badge-ged { background:#eff6ff; color:#1d4ed8; border-color:#bfdbfe !important; }

    /* Right side */
    .sig-right { display:flex; flex-direction:column; align-items:flex-end; gap:8px; flex-shrink:0; }
    .sig-statut { font-size:.75rem; font-weight:700; padding:3px 10px; border-radius:99px; }
    .sig-statut-en_attente { background:#fef3c7; color:#d97706; }
    .sig-statut-signe      { background:#dcfce7; color:#15803d; }
    .sig-statut-refuse     { background:#fee2e2; color:#dc2626; }
    .sig-actions { display:flex; gap:5px; align-items:center; }

    /* Empty state */
    .sig-empty { text-align:center; padding:4rem 2rem; color:var(--charcoal-light); }
    .sig-empty-icon { font-size:3rem; margin-bottom:1rem; opacity:.4; }
    .sig-empty p { font-size:.9rem; margin-bottom:1.2rem; }

    /* Mobile sticky offset */
    #appShell.module-mode .sig-filters-bar { position:sticky; top:68px; z-index:9; background:var(--cream); }

    /* ════════════════════════════════════
       RESPONSIVE — TABLET (≤ 900px)
    ════════════════════════════════════ */
    @media (max-width: 900px) {
      /* Sidebar masquée — bouton déconnexion dans la topbar */
      #sidebar { display: none !important; }
      #topBarLogout { display: flex !important; }

      /* Layout principal plein écran */
      #appShell { height: 100dvh; }

      /* Grilles */
      .dash-stats                         { grid-template-columns: 1fr 1fr; }
      .dash-grid                          { grid-template-columns: 1fr; }
      .conges-layout                      { grid-template-columns: 1fr; }
      .grid-4, .kpi-grid                  { grid-template-columns: 1fr 1fr; }
      .grid-3                             { grid-template-columns: 1fr 1fr; }

      /* Panels */
      .panel                              { padding: 18px 14px; }
      .panel-dark-head                    { margin: -18px -14px 16px; }
      .panel-head                         { flex-direction: column; align-items: flex-start; gap: 10px; }
      .panel-head .btn                    { align-self: flex-start; }

      /* Formulaires */
      .fg-row                             { grid-template-columns: 1fr; }

      /* Objectifs : 4 jours au lieu de 7 */
      .obj-day-grid                       { grid-template-columns: repeat(4, 1fr); }

      /* Date dans la topbar : superflue */
      .topbar-date                        { display: none; }

      /* Caisse nav */
      .cp-nav-label                       { min-width: 160px; font-size: .82rem; }

      /* Onglets pleine largeur */
      .admin-tabs                         { width: 100%; overflow-x: auto; }

      /* Settings : 1 colonne à partir de 900px */
      .settings-conges-grid,
      .settings-notifs-grid               { grid-template-columns: 1fr; }
      .settings-section                   { padding: 16px 14px; }
    }

    /* ════════════════════════════════════
       RESPONSIVE — MOBILE (≤ 640px)
    ════════════════════════════════════ */
    @media (max-width: 640px) {
      /* Topbar compacte */
      #topBar                             { padding: 0 14px; height: 54px; }
      .topbar-title                       { font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 44vw; }
      #topBarLogout                       { padding: 4px 10px !important; font-size: .72rem !important; }
      #topBarLogout span                  { display: none; } /* garde juste l'icône */
      #topBarBack                         { padding: 5px 10px !important; font-size: .72rem !important; }
      .topbar-right                       { gap: 8px; }

      /* Panels */
      .panel                             { padding: 14px 12px; }
      .panel-dark-head                   { margin: -14px -12px 14px; }

      /* Toutes les grilles en 1 colonne */
      .grid-4, .grid-3, .grid-2,
      .dash-stats, .kpi-grid             { grid-template-columns: 1fr; }

      /* App grid : 2 tuiles par ligne sur téléphone */
      .app-grid                          { grid-template-columns: 1fr 1fr; gap: 10px; }
      .app-tile                          { padding: 16px 10px; }
      .app-tile .app-icon                { font-size: 1.8rem; margin-bottom: 8px; }
      .app-tile .app-name                { font-size: .78rem; }
      .app-tile .app-desc                { display: none; }

      /* KPI caisse : 2 colonnes */
      .kpi-grid                          { grid-template-columns: 1fr 1fr; }
      .kpi-value                         { font-size: 1.6rem; }

      /* Dashboard stat value */
      .stat-value                        { font-size: 1.6rem; }

      /* Modales : bottom sheet sur mobile */
      .modal-back                        { align-items: flex-end; padding: 0; }
      .modal {
        width: 100%;
        border-radius: 20px 20px 0 0;
        max-height: 92dvh;
      }

      /* Tables : scroll horizontal */
      .table-wrap                        { -webkit-overflow-scrolling: touch; }
      table                              { min-width: 560px; }

      /* Commandes : actions sur 2 lignes */
      .cmd-actions                       { flex-wrap: wrap; }
      .cmd-btn                           { font-size: .68rem; padding: 3px 9px; }

      /* Utilisateurs table */
      .users-table                       { min-width: 480px; }

      /* Caisse tabs pleine largeur */
      .cp-tabs                           { width: 100%; }
      .cp-tab                            { flex: 1; padding: 8px 6px; font-size: .75rem; }
      .cp-nav                            { gap: 6px; }
      .cp-nav-label                      { min-width: 130px; font-size: .78rem; }

      /* ── Settings module — mobile compact ── */
      .settings-dark-head                { padding: .5rem .9rem !important; }
      .settings-head-icon                { width: 30px !important; height: 30px !important; font-size: 1.05rem !important; border-radius: .45rem !important; }
      .settings-head-title               { font-size: .82rem !important; }
      .settings-head-sub                 { display: none !important; }
      #settingsVersionBadge              { font-size: .6rem !important; padding: 2px 6px !important; }
      /* Sticky offset réduit */
      #appShell.module-mode .settings-tabs-bar { top: 46px; }
      /* Barre d'onglets scrollable */
      .settings-tabs-bar                 { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 0 12px; }
      .settings-tabs-bar::-webkit-scrollbar { display: none; }
      .settings-tab                      { padding: 9px 13px; font-size: .76rem; flex-shrink: 0; }
      .settings-section                  { padding: 14px 12px; }

      /* ── Caisse module — mobile compact ── */
      /* Header sombre compact */
      .caisse-dark-head                  { padding: .5rem .9rem !important; }
      .caisse-head-icon                  { width: 30px !important; height: 30px !important; font-size: 1.05rem !important; border-radius: .45rem !important; }
      .caisse-head-title                 { font-size: .82rem !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
      .caisse-head-sub                   { display: none !important; }
      /* Boutons : icône seule (texte masqué) */
      .caisse-btn-label                  { display: none; }
      .caisse-head-actions               { gap: 5px !important; }
      .caisse-btn-objectifs,
      .caisse-btn-refresh                { padding: 5px 8px !important; font-size: .85rem !important; min-width: 32px; justify-content: center; }
      /* Sticky offset du dark head réduit (~46px) */
      #appShell.module-mode .caisse-tabs-bar { top: 46px; }
      /* Barre d'onglets : scroll horizontal */
      .caisse-tabs-bar                   { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 0 12px; }
      .caisse-tabs-bar::-webkit-scrollbar { display: none; }
      .caisse-section-tab                { padding: 9px 13px; font-size: .76rem; flex-shrink: 0; }

      /* Objectifs : 4 colonnes (Lun–Jeu, Ven–Dim) */
      .obj-day-grid                      { grid-template-columns: repeat(4, 1fr); }

      /* Toast : pleine largeur */
      #toast                             { left: 12px; right: 12px; transform: translateY(100px); width: auto; white-space: normal; text-align: center; border-radius: 14px; }
      #toast.show                        { transform: translateY(0); }

      /* Panel head */
      .panel-head h2                     { font-size: 1.2rem; }

      /* Détail commande modal : table scrollable */
      #cmdDetailContent table            { min-width: 400px; }
      #cmdDetailContent > div[style*="grid"] { grid-template-columns: 1fr !important; }

      /* Client drawer pleine largeur */
      .client-drawer                     { width: 100vw; }

      /* GED mobile : grille réduite */
      .ged-folders-grid                  { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
      .ged-nav-right                     { flex-wrap: wrap; }
      .ged-search                        { width: 140px; }
      .ged-search:focus                  { width: 180px; }

      /* Planning : scroll horizontal explicite */
      .planning-grid                     { overflow-x: auto; -webkit-overflow-scrolling: touch; }

      /* Annuaire : 2 cartes */
      .annuaire-grid                     { grid-template-columns: 1fr 1fr; }
      .emp-name                          { font-size: .9rem; }

      /* Formation : 2 catégories */
      .formation-cats                    { grid-template-columns: 1fr 1fr; }

      /* ── Signature module — mobile ── */
      .sig-stats-bar                     { padding: 12px 12px 0; gap: 8px; }
      .sig-stat-val                      { font-size: 1.3rem; }
      .sig-filters-bar                   { padding: 10px 12px 0; top: 46px; }
      .sig-list-wrap                     { padding: 10px 12px 16px; }
      .sig-head-icon                     { width: 30px !important; height: 30px !important; font-size: 1rem !important; }
      .sig-head-title                    { font-size: .85rem !important; }
      .sig-head-sub                      { display: none !important; }
      .sig-row                           { padding: 11px 12px; gap: 10px; }
      .sig-doc-icon                      { width: 34px; height: 34px; font-size: .78rem; }
      .sig-right                         { gap: 5px; }
      .sig-actions .btn-sm               { padding: 4px 8px; font-size: .68rem; }
    }

    /* ════════════════════════════════════
       RESPONSIVE — PETIT MOBILE (≤ 380px)
    ════════════════════════════════════ */
    @media (max-width: 380px) {
      .app-grid                          { grid-template-columns: 1fr 1fr; gap: 8px; }
      .kpi-grid                          { grid-template-columns: 1fr; }
      .annuaire-grid                     { grid-template-columns: 1fr; }
      .formation-cats                    { grid-template-columns: 1fr; }
      .obj-day-grid                      { grid-template-columns: repeat(3, 1fr); }
    }