:root{
    --bg: #eef0f3;
    --surface: #ffffff;
    --surface-alt: #f6f7f9;
    --border: #d7dbe2;
    --border-strong: #b9bfc9;
    --text: #1e2330;
    --text-muted: #656d7a;
    --text-faint: #98a0ac;
    --primary: #2e5aac;
    --primary-dark: #1f4485;
    --primary-bg: #eaf0fb;
    --amber: #92650f;
    --amber-bg: #fbf1de;
    --green: #1f7a48;
    --green-bg: #e9f5ee;
    --red: #b3261e;
    --red-bg: #fbeceb;
    --radius: 3px;
    --mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    --ui: "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    --topbar-1: #3b3f47;
    --topbar-2: #2c2f36;
    --topbar-border: #454952;
    --topbar-text: #e7e9ec;
    --topbar-text-muted: #c7cbd3;
    --topbar-text-faint: #7d828d;
    --overlay: rgba(20,22,28,.42);
    --scrollbar: #c6cad2;
    color-scheme: light;
  }
  html[data-theme="dark"]{
    --bg: #14161a;
    --surface: #1b1e24;
    --surface-alt: #22252c;
    --border: #32363f;
    --border-strong: #454a54;
    --text: #e7e9ee;
    --text-muted: #9ba1ac;
    --text-faint: #6c7178;
    --primary: #5b8def;
    --primary-dark: #8fb4f5;
    --primary-bg: #1c2c47;
    --amber: #e3b567;
    --amber-bg: #3a2f18;
    --green: #6fce97;
    --green-bg: #163625;
    --red: #ea8580;
    --red-bg: #3a201e;
    --topbar-1: #101216;
    --topbar-2: #0b0c0f;
    --topbar-border: #2c2f36;
    --scrollbar: #3a3e46;
    color-scheme: dark;
  }
  *{box-sizing:border-box;}
  html,body{height:100%;margin:0;}
  body{
    font-family:var(--ui);
    background:var(--bg);
    color:var(--text);
    font-size:13px;
    -webkit-font-smoothing:antialiased;
    transition:background .15s ease, color .15s ease;
  }
  button{font-family:inherit;font-size:inherit;cursor:pointer;}
  input,select{font-family:inherit;font-size:inherit;}

  /* ===== App shell ===== */
  .app{
    display:grid;
    grid-template-rows:38px 26px 34px 1fr 22px;
    grid-template-columns:210px 1fr;
    grid-template-areas:
      "topbar topbar"
      "menubar menubar"
      "toolbar toolbar"
      "nav main"
      "status status";
    height:100vh;
  }
  /* Page d'accueil : pas de rail de navigation, le contenu principal prend toute la largeur. */
  .app.cockpit{grid-template-rows:38px 0 0 1fr 22px;}
  .app.cockpit .main{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr);}
  .app.no-nav{
    grid-template-columns:1fr;
    grid-template-areas:
      "topbar"
      "menubar"
      "toolbar"
      "main"
      "status";
  }

  /* Topbar */
  .topbar{
    grid-area:topbar;
    background:linear-gradient(var(--topbar-1),var(--topbar-2));
    color:var(--topbar-text);
    display:flex;
    align-items:center;
    padding:0 10px;
    gap:14px;
    font-size:12.5px;
  }
  .topbar .brand{
    font-weight:600;
    letter-spacing:.2px;
    color:#fff;
    display:flex;
    align-items:center;
    gap:6px;
  }
  .brand .dot{width:7px;height:7px;border-radius:50%;background:#5b8def;display:inline-block;}
  .topbar nav{display:flex;gap:2px;flex:1;}
  .topbar nav a{
    color:var(--topbar-text-muted);
    text-decoration:none;
    padding:9px 10px;
    font-size:12.5px;
    border-bottom:2px solid transparent;
  }
  .topbar nav a.active{color:#fff;border-bottom-color:#5b8def;}
  .topbar nav a:hover{color:#fff;}
  .topbar .search{
    display:flex;align-items:center;gap:6px;
    background:rgba(0,0,0,.22);border:1px solid var(--topbar-border);border-radius:3px;
    padding:4px 8px;width:220px;
  }
  .topbar .search input{background:transparent;border:0;color:var(--topbar-text);outline:0;width:100%;font-size:12px;}
  .topbar .search input::placeholder{color:var(--topbar-text-faint);}
  .topbar .user{display:flex;align-items:center;gap:6px;color:var(--topbar-text-muted);}
  .avatar{width:20px;height:20px;border-radius:50%;background:#5b8def;color:#fff;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;}
  .theme-toggle{
    display:flex;align-items:center;justify-content:center;
    width:26px;height:26px;border-radius:4px;
    background:rgba(255,255,255,.06);border:1px solid var(--topbar-border);
    color:var(--topbar-text-muted);font-size:13px;flex-shrink:0;
  }
  .theme-toggle:hover{color:#fff;background:rgba(255,255,255,.12);}

  /* Toolbar */
  .toolbar{
    grid-area:toolbar;
    background:var(--surface);
    border-bottom:1px solid var(--border);
    display:flex;align-items:center;gap:4px;
    padding:0 8px;
  }
  .tbtn{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:1px;
    border:1px solid transparent;
    background:transparent;
    padding:2px 8px;
    border-radius:var(--radius);
    color:var(--text);
    height:30px;
    min-width:52px;
  }
  .tbtn:hover{background:var(--surface-alt);border-color:var(--border);}
  .tbtn .ic{font-size:13px;line-height:1;}
  .tbtn .lb{font-size:9.5px;color:var(--text-muted);}
  .tbtn:disabled{opacity:.35;cursor:default;}
  .tbtn:disabled:hover{background:transparent;border-color:transparent;}
  .tsep{width:1px;align-self:stretch;margin:6px 4px;background:var(--border);}
  .tb-fill{flex:1;}
  .tb-sort{display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--text-muted);}
  .tb-sort select{border:1px solid var(--border);border-radius:var(--radius);padding:3px 4px;background:var(--surface);}

  /* Barre de menus classique (Fichier/Structure/Traitement/Etat/...) */
  .menubar{
    grid-area:menubar;
    background:var(--surface);
    border-bottom:1px solid var(--border);
    display:flex;
    align-items:stretch;
    padding:0 4px;
    position:relative;
    z-index:60;
    font-size:12.5px;
  }
  .mb-top{
    display:flex;align-items:center;
    padding:0 10px;border:0;background:transparent;
    color:var(--text);cursor:pointer;
  }
  .mb-top:hover,.mb-top.open{background:var(--surface-alt);}
  .mb-top.disabled{color:var(--text-faint);cursor:default;}
  .mb-top.disabled:hover{background:transparent;}
  .mb-menu{
    position:absolute;top:100%;left:0;min-width:260px;
    background:var(--surface);border:1px solid var(--border-strong);
    border-radius:0 0 var(--radius) var(--radius);
    box-shadow:0 6px 20px rgba(0,0,0,.18);
    padding:4px 0;display:none;list-style:none;margin:0;
  }
  .mb-menu.open{display:block;}
  .mb-divider{height:1px;background:var(--border);margin:4px 0;}
  .mb-item{position:relative;}
  .mb-item > a,.mb-item > .mb-disabled,.mb-item > .mb-trigger{
    display:flex;align-items:center;justify-content:space-between;gap:16px;
    padding:5px 14px;color:var(--text);text-decoration:none;
    white-space:nowrap;cursor:pointer;
  }
  .mb-item > a:hover,.mb-item > .mb-trigger:hover,.mb-item.open > .mb-trigger{
    background:var(--primary-bg);color:var(--primary-dark);
  }
  .mb-item > .mb-disabled,.mb-item > a.mb-off{color:var(--text-faint);cursor:default;}
  .mb-item > a.mb-off:hover{background:transparent;color:var(--text-faint);}
  .mb-shortcut{color:var(--text-faint);font-size:11px;margin-left:16px;}
  .mb-arrow{color:var(--text-faint);font-size:10px;margin-left:8px;}
  .mb-submenu{
    position:absolute;top:-5px;left:100%;min-width:260px;
    background:var(--surface);border:1px solid var(--border-strong);
    border-radius:var(--radius);box-shadow:0 6px 20px rgba(0,0,0,.18);
    padding:4px 0;display:none;list-style:none;margin:0;
  }
  .mb-item.open > .mb-submenu{display:block;}

  /* Nav rail */
  .nav{
    grid-area:nav;
    background:var(--surface);
    border-right:1px solid var(--border);
    overflow-y:auto;
    padding:8px 0;
  }
  .nav-group{margin-bottom:2px;}
  .nav-title{
    font-size:10px;text-transform:uppercase;letter-spacing:.5px;
    color:var(--text-faint);padding:8px 14px 4px;
  }
  .nav a{
    display:flex;align-items:center;gap:8px;
    padding:6px 14px;
    color:var(--text);
    text-decoration:none;
    font-size:12.5px;
    border-left:3px solid transparent;
  }
  .nav a .ic{width:14px;text-align:center;color:var(--text-muted);font-size:11px;}
  .nav a:hover{background:var(--surface-alt);}
  .nav a.active{background:var(--primary-bg);border-left-color:var(--primary);color:var(--primary-dark);font-weight:600;}
  .nav a.active .ic{color:var(--primary-dark);}

  /* Main split */
  .main{
    grid-area:main;
    display:grid;
    --list-w:clamp(360px,28vw,480px);
    grid-template-columns:var(--list-w) minmax(0,1fr);
    overflow:hidden;
  }
  .main.list-wide{--list-w:clamp(520px,36vw,680px);}

  /* List pane */
  .list-pane{
    border-right:1px solid var(--border);
    background:var(--surface);
    display:flex;flex-direction:column;
    overflow:hidden;
  }
  /* Écran sans detail-pane (États, etc.) : occupe les deux colonnes de .main au lieu de rester
     confiné à la première (360px) faute de second enfant pour remplir la colonne 1fr. */
  .list-pane.full,
  .main > .list-pane:only-child{
    grid-column:1 / -1;
    border-right:0;
  }
  .list-head{
    padding:8px 10px 6px;
    border-bottom:1px solid var(--border);
  }
  .list-head h1{font-size:13px;margin:0 0 6px;font-weight:600;}
  .filters{display:flex;gap:6px;}
  .filters select{
    flex:1;border:1px solid var(--border);border-radius:var(--radius);
    padding:4px 5px;background:var(--surface);color:var(--text);font-size:11.5px;
  }
  .find{
    margin-top:6px;position:relative;
  }
  .find input{
    width:100%;border:1px solid var(--border);border-radius:var(--radius);
    padding:5px 7px 5px 24px;font-size:12px;
  }
  .find .ic{position:absolute;left:7px;top:6px;color:var(--text-faint);font-size:11px;}

  table.grid{width:100%;border-collapse:collapse;font-size:12px;}
  table.grid thead th{
    position:sticky;top:0;background:var(--surface-alt);
    text-align:left;font-weight:600;color:var(--text-muted);
    padding:6px 8px;border-bottom:1px solid var(--border);
    font-size:11px;text-transform:uppercase;letter-spacing:.3px;
    cursor:pointer;user-select:none;
  }
  table.grid thead th:hover{color:var(--text);}
  table.grid tbody td{padding:6px 8px;border-bottom:1px solid var(--border);}
  table.grid tbody tr{cursor:pointer;}
  table.grid tbody tr:hover{background:var(--surface-alt);}
  table.grid tbody tr.sel{background:var(--primary-bg);}
  table.grid tbody tr.sel td{color:var(--primary-dark);}
  .type-ic{width:16px;display:inline-flex;justify-content:center;color:var(--text-muted);}
  .ref-cell{font-family:var(--mono);font-size:11.5px;}
  .tag-sommeil{
    display:inline-block;margin-left:6px;font-size:9.5px;padding:1px 5px;
    background:var(--amber-bg);color:var(--amber);border-radius:2px;
  }
  .list-body{flex:1;overflow-y:auto;}
  .list-foot{
    display:flex;align-items:center;justify-content:space-between;
    padding:6px 10px;border-top:1px solid var(--border);
    font-size:11px;color:var(--text-muted);
  }
  .pager{display:flex;gap:2px;}
  .pager button{
    border:1px solid var(--border);background:var(--surface);border-radius:var(--radius);
    width:22px;height:22px;font-size:11px;color:var(--text);
  }
  .pager button:hover{background:var(--surface-alt);}
  .pager button:disabled{opacity:.35;}

  /* Detail pane */
  .detail-pane{display:flex;flex-direction:column;overflow-y:auto;background:var(--surface);}
  .detail-pane > form{flex:0 0 auto;}
  .detail-pane > .volet-panel{flex:0 0 auto;}
  .fiche-head{
    display:flex;align-items:flex-start;justify-content:space-between;
    padding:10px 16px;border-bottom:1px solid var(--border);
    background:var(--surface);
  }
  .fiche-title{display:flex;flex-direction:column;gap:2px;}
  .fiche-title .kicker{font-size:10.5px;color:var(--text-faint);text-transform:uppercase;letter-spacing:.4px;}
  .fiche-title h2{margin:0;font-size:15px;font-weight:600;}
  .fiche-title h2 .ref{font-family:var(--mono);color:var(--primary-dark);}
  .fiche-title .meta{font-size:11px;color:var(--text-muted);margin-top:2px;}
  .fiche-actions{display:flex;gap:6px;align-items:flex-start;}
  .btn{
    border:1px solid var(--border-strong);
    background:var(--surface);
    padding:5px 10px;
    border-radius:var(--radius);
    font-size:11.5px;
    color:var(--text);
    display:flex;align-items:center;gap:5px;
  }
  .btn:hover{background:var(--surface-alt);}
  .btn.primary{background:var(--primary);border-color:var(--primary);color:#fff;}
  .btn.primary:hover{background:var(--primary-dark);}
  .btn.danger{color:var(--red);border-color:#e3b9b6;}
  .btn.danger:hover{background:var(--red-bg);}

  /* Volets (tabs) — signature element: file-folder tab rail */
    /* Rail à gauche sur toute la hauteur ; formulaire et panneaux hors formulaire s'empilent dans la colonne de droite. */
  .volets-shell{display:grid;grid-template-columns:120px minmax(0,1fr);grid-template-rows:auto auto auto auto minmax(0,1fr);flex:1 1 auto;min-height:200px;overflow:visible;}
  .volets-shell > .volets-rail{grid-column:1;grid-row:1 / -1;}
  .volets-shell > :not(.volets-rail){grid-column:2;min-width:0;}
  .volets-shell > form{display:flex;flex-direction:column;min-height:0;}
  /* Les onglets hors <form> (Contacts, Conversations, Agenda…) sont frères du formulaire dans la
     même rangée flex : tant que le formulaire restait affiché (vide), il se partageait la largeur
     avec le panneau actif, qui se retrouvait repoussé à droite de l'écran. */
  .volets-shell > form:not(.volet-panel):not(:has(> .volet-panel.active)){display:none;}
  .volets-rail{
    width:120px;
    background:var(--surface-alt);
    border-right:1px solid var(--border);
    padding:10px 0;
    flex-shrink:0;
  }
  .volet-tab{
    display:block;width:100%;text-align:left;
    background:transparent;border:0;
    padding:8px 12px;
    font-size:12px;color:var(--text-muted);
    border-left:3px solid transparent;
    position:relative;
  }
  .volet-tab:hover{color:var(--text);background:#eef0f3;}
  .volet-tab.active{
    background:var(--surface);
    color:var(--primary-dark);
    font-weight:600;
    border-left-color:var(--primary);
    box-shadow:inset 0 0 0 1px var(--border);
    border-right:1px solid var(--surface);
    margin-right:-1px;
  }

  .volet-panel{overflow-y:auto;padding:16px 20px;display:none;}
  .volets-shell .volet-panel{min-width:0;overflow-x:auto;}
  .volet-panel.active{display:block;}

  .field-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px 16px;max-width:820px;}
  .field-grid.two{grid-template-columns:repeat(2,1fr);}
  .field{display:flex;flex-direction:column;gap:3px;}
  .field.span2{grid-column:span 2;}
  .field.span3{grid-column:span 3;}
  .field label{font-size:11px;color:var(--text-muted);display:flex;align-items:center;gap:4px;}
  .field label .req{color:var(--red);}
  .field input[type=text], .field input[type=number], .field select{
    border:1px solid var(--border);border-radius:var(--radius);
    padding:6px 7px;font-size:12.5px;color:var(--text);background:var(--surface);
  }
  .field input:disabled{background:var(--surface-alt);color:var(--text-muted);}
  .field .hint{font-size:10.5px;color:var(--text-faint);}
  .radio-row{display:flex;gap:12px;align-items:center;padding-top:4px;}
  .radio-row label{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--text);font-weight:400;}

  .section-title{
    font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;
    color:var(--text-muted);margin:22px 0 10px;padding-top:16px;border-top:1px solid var(--border);
    max-width:820px;
  }
  .section-title:first-child{margin-top:0;border-top:0;padding-top:0;}

  .check-list{display:grid;grid-template-columns:repeat(2,1fr);gap:8px 20px;max-width:600px;}
  .check-row{display:flex;align-items:center;gap:7px;font-size:12px;}
  .check-row input{width:14px;height:14px;}

  .mini-table-wrap{max-width:820px;border:1px solid var(--border);border-radius:var(--radius);overflow-x:auto;overflow-y:hidden;}
  table.mini{width:100%;border-collapse:collapse;font-size:11.5px;}
  table.mini th{background:var(--surface-alt);text-align:left;padding:6px 8px;font-weight:600;color:var(--text-muted);border-bottom:1px solid var(--border);font-size:10.5px;text-transform:uppercase;}
  table.mini td{padding:5px 8px;border-bottom:1px solid var(--border);}
  table.mini tbody tr:last-child td{border-bottom:0;}
  table.mini input, table.mini select{width:100%;border:1px solid transparent;background:transparent;padding:3px 4px;font-size:11.5px;border-radius:2px;}
  table.mini input:hover, table.mini input:focus, table.mini select:hover{border-color:var(--border);background:var(--surface);}
  .mini-toolbar{display:flex;justify-content:flex-end;gap:6px;margin-top:8px;max-width:820px;}
  .link-btn{background:none;border:0;color:var(--primary);font-size:11.5px;padding:2px 0;}
  .link-btn:hover{text-decoration:underline;}

  .empty-note{
    max-width:520px;background:var(--surface-alt);border:1px dashed var(--border-strong);
    border-radius:var(--radius);padding:14px 16px;color:var(--text-muted);font-size:12px;
  }

  .subtabs{display:flex;gap:2px;margin-bottom:14px;border-bottom:1px solid var(--border);max-width:820px;}
  .subtabs[hidden]{display:none;}
  .subtab{padding:6px 12px;font-size:11.5px;color:var(--text-muted);background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;}
  .subtab.active{color:var(--primary-dark);border-bottom-color:var(--primary);font-weight:600;}
  .subtab:hover{color:var(--text);}
  .subpanel{display:none;}
  .subpanel.active{display:block;}

  .chart-row{display:flex;gap:10px;align-items:flex-end;height:120px;max-width:520px;margin:10px 0 4px;padding:0 4px;border-bottom:1px solid var(--border);}
  .bar{flex:1;background:linear-gradient(#6f97d6,var(--primary));border-radius:2px 2px 0 0;position:relative;min-height:4px;}
  .bar span{position:absolute;top:-16px;left:0;right:0;text-align:center;font-size:9.5px;color:var(--text-muted);}
  .chart-labels{display:flex;gap:10px;max-width:520px;padding:0 4px;}
  .chart-labels div{flex:1;text-align:center;font-size:9.5px;color:var(--text-faint);}
  .graph-toggle{display:flex;gap:4px;margin-bottom:10px;}
  .graph-toggle button{border:1px solid var(--border);background:var(--surface);padding:4px 9px;font-size:11px;border-radius:var(--radius);}
  .graph-toggle button.active{background:var(--primary-bg);border-color:var(--primary);color:var(--primary-dark);}

  /* Status bar */
  .status{
    grid-area:status;
    background:var(--surface-alt);border-top:1px solid var(--border);
    display:flex;align-items:center;justify-content:space-between;
    padding:0 10px;font-size:10.5px;color:var(--text-muted);
  }
  .status .right{display:flex;gap:14px;}

  /* Modal */
  .modal-overlay{
    position:fixed;inset:0;background:var(--overlay);
    display:none;align-items:center;justify-content:center;z-index:70;
  }
  .modal-overlay.open{display:flex;}
  .modal{
    width:360px;background:var(--surface);border-radius:4px;
    box-shadow:0 12px 32px rgba(0,0,0,.28);
    overflow:hidden;
  }
  .modal-head{
    padding:10px 14px;border-bottom:1px solid var(--border);
    display:flex;align-items:center;justify-content:space-between;
    background:var(--surface-alt);
  }
  .modal-head h3{margin:0;font-size:12.5px;font-weight:600;}
  .modal-head button{background:none;border:0;color:var(--text-muted);font-size:14px;}
  .modal-body{padding:16px 14px;display:flex;flex-direction:column;gap:12px;}
  .modal-body .field label{font-size:11px;color:var(--text-muted);margin-bottom:3px;display:block;}
  .modal-body .field input{width:100%;border:1px solid var(--border);border-radius:var(--radius);padding:6px 7px;font-size:12.5px;}
  .modal-foot{padding:10px 14px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:8px;background:var(--surface-alt);}

  .toast{
    position:fixed;bottom:34px;right:16px;
    background:#242832;color:#fff;padding:9px 14px;border-radius:4px;
    font-size:12px;display:flex;align-items:center;gap:8px;
    box-shadow:0 6px 18px rgba(0,0,0,.25);
    opacity:0;transform:translateY(6px);pointer-events:none;
    transition:opacity .18s ease,transform .18s ease;
    z-index:60;
  }
  .toast.show{opacity:1;transform:translateY(0);}
  .toast .ok{color:#7fd99a;}

  ::-webkit-scrollbar{width:10px;height:10px;}
  ::-webkit-scrollbar-thumb{background:var(--scrollbar);border-radius:5px;}
  ::-webkit-scrollbar-track{background:transparent;}

  a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible{
    outline:2px solid var(--primary);outline-offset:1px;
  }

/* ===== Authentification ===== */
.auth-shell{
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  background:var(--bg);
}
.auth-card{
  width:340px;background:var(--surface);border:1px solid var(--border);
  border-radius:4px;box-shadow:0 8px 28px rgba(0,0,0,.10);
  overflow:hidden;
}
.auth-card .auth-head{
  background:linear-gradient(var(--topbar-1),var(--topbar-2));
  color:var(--topbar-text);padding:20px 22px 16px;
}
.auth-card .auth-head .dot{width:7px;height:7px;border-radius:50%;background:#5b8def;display:inline-block;margin-right:6px;}
.auth-card .auth-head h1{font-size:14px;margin:0;font-weight:600;letter-spacing:.2px;}
.auth-card .auth-head p{margin:4px 0 0;font-size:11px;color:var(--topbar-text-muted);}
.auth-body{padding:20px 22px;display:flex;flex-direction:column;gap:14px;}
.auth-field label{font-size:11px;color:var(--text-muted);display:block;margin-bottom:4px;}
.auth-field input{
  width:100%;border:1px solid var(--border);border-radius:3px;
  padding:8px 9px;font-size:13px;color:var(--text);background:var(--surface);
}
.auth-field input:focus-visible{outline:2px solid var(--primary);outline-offset:1px;}
.auth-error{font-size:11px;color:var(--red);background:var(--red-bg);border-radius:3px;padding:6px 8px;}
.auth-remember{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--text-muted);}
.auth-submit{
  width:100%;border:1px solid var(--primary);background:var(--primary);color:#fff;
  padding:8px;border-radius:3px;font-size:12.5px;font-weight:600;
}
.auth-submit:hover{background:var(--primary-dark);}
.auth-foot{padding:12px 22px;border-top:1px solid var(--border);background:var(--surface-alt);
  font-size:10.5px;color:var(--text-faint);text-align:center;}

/* ===== Page de connexion ===== */
.lg-shell{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px 16px;position:relative;overflow:hidden;background:#d9dde3;}
html[data-theme="dark"] .lg-shell{background:#1b1e24;}
.lg-tiles{position:absolute;inset:0;display:grid;grid-template-columns:repeat(6,1fr);gap:14px;padding:70px 6%;opacity:.55;pointer-events:none;}
.lg-tiles span{background:rgba(255,255,255,.65);border-radius:3px;min-height:90px;box-shadow:0 1px 3px rgba(0,0,0,.15);}
html[data-theme="dark"] .lg-tiles span{background:rgba(255,255,255,.07);}
.lg-dialog{
  position:relative;width:100%;max-width:640px;background:var(--surface);color:var(--text);
  border:3px solid #000;box-shadow:0 0 0 1px #00843d,0 24px 60px rgba(0,0,0,.45);
}
.lg-title{display:flex;align-items:center;gap:10px;background:#000;color:#fff;padding:10px 12px;font-size:17px;}
.lg-title span:nth-child(2){flex:1;text-align:center;}
.lg-title .lg-x{color:#2ecc71;font-size:15px;}
.lg-body{padding:16px 20px 18px;}
.lg-heading{display:flex;align-items:center;gap:10px;}
.lg-heading h1{margin:0;font-size:19px;font-weight:400;white-space:nowrap;}
.lg-heading i{flex:1;height:1px;background:var(--border);}
.lg-lead{margin:10px 0 14px;font-size:14px;}
.lg-cols{display:grid;grid-template-columns:1fr 1fr;gap:0;}
.lg-left{padding-right:18px;border-right:1px solid var(--border);display:flex;flex-direction:column;gap:10px;}
.lg-right{padding-left:18px;display:flex;flex-direction:column;gap:10px;}
.lg-row{display:grid;grid-template-columns:96px 1fr;align-items:center;gap:8px;}
.lg-row label{text-align:right;font-size:14px;}
.lg-row input{width:100%;border:1px solid var(--border);border-bottom:2px solid var(--border);padding:7px 9px;font-size:14px;background:var(--surface);color:var(--text);border-radius:0;}
.lg-row input:focus{outline:0;border-bottom-color:#2e5aac;}
.lg-remember{display:flex;align-items:center;gap:8px;font-size:14px;cursor:pointer;}
.lg-help{margin:4px 0 0;font-size:13.5px;line-height:1.5;color:var(--text-faint);}
.lg-alt{display:flex;align-items:stretch;width:100%;padding:0;border:1px solid #00843d;background:var(--surface);color:#00843d;font-size:14px;cursor:not-allowed;opacity:.55;}
.lg-alt-ic{width:36px;display:flex;align-items:center;justify-content:center;background:#fff;border-right:1px solid #cfd4da;}
.lg-alt-lb{flex:1;padding:7px 8px;text-align:center;}
.lg-foot{display:flex;justify-content:flex-end;gap:10px;padding:12px 20px;border-top:1px solid var(--border);}
.lg-ok,.lg-cancel{padding:9px 16px;font-size:14px;cursor:pointer;border:1px solid #00843d;}
.lg-ok{background:#00843d;color:#fff;font-weight:500;}
.lg-ok:hover{background:#006b32;}
.lg-cancel{background:var(--surface);color:#00843d;}
.lg-cancel:hover{background:var(--surface-alt);}
@media (max-width:640px){
  .lg-cols{grid-template-columns:1fr;gap:16px;}
  .lg-left{padding-right:0;border-right:0;}
  .lg-right{padding-left:0;}
  .lg-row{grid-template-columns:1fr;gap:4px;}
  .lg-row label{text-align:left;}
  .lg-heading h1{white-space:normal;font-size:17px;}
  .lg-tiles{grid-template-columns:repeat(3,1fr);}
}

/* ===== Fenêtres de sélection des états (modales) ===== */
.sel-backdrop{position:fixed;inset:0;z-index:900;background:rgba(0,0,0,.38);display:flex;align-items:center;justify-content:center;padding:12px;}
.sel-modal{display:flex;flex-direction:column;max-height:calc(100vh - 24px);background:var(--surface);color:var(--text);border:3px solid #000;border-radius:2px;box-shadow:0 0 0 1px #00843d,0 22px 60px rgba(0,0,0,.45);overflow:hidden;}
.sel-title{flex:0 0 auto;display:flex;align-items:center;background:#000;color:#fff;padding:10px 12px;font-size:16px;}
.sel-title span{flex:1;text-align:center;}
.sel-x{color:#2ecc71;text-decoration:none;font-size:15px;padding:0 4px;}
.sel-body{flex:1 1 auto;overflow:auto;}
.sel-foot{flex:0 0 auto;background:var(--surface);}

/* ===== Ventes — documents commerciaux ===== */
.doc-badge{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:16px;border-radius:2px;font-size:9.5px;font-weight:700;
  color:#fff;background:var(--text-faint);letter-spacing:.2px;
}
.doc-badge.t-quote, .doc-badge.t-request{background:#8a6dbb;}
.doc-badge.t-preparation{background:#7a95c4;}
.doc-badge.t-order{background:#5b7fbb;}
.doc-badge.t-delivery_prep{background:#4fa8a0;}
.doc-badge.t-delivery_note{background:#3f9a5c;}
.doc-badge.t-return_note, .doc-badge.t-return_invoice{background:var(--red);}
.doc-badge.t-credit_note, .doc-badge.t-credit_invoice{background:var(--amber);}
.doc-badge.t-invoice{background:var(--green);}

.status-pill{
  display:inline-block;padding:2px 7px;border-radius:10px;font-size:10.5px;
  background:var(--surface-alt);color:var(--text-muted);border:1px solid var(--border);
}

.doc-toolbar{
  display:flex;align-items:center;gap:2px;flex-wrap:wrap;
  padding:6px 10px;border-bottom:1px solid var(--border);background:var(--surface-alt);
}
.doc-toolbar .tbtn{min-width:auto;flex-direction:row;gap:5px;height:26px;padding:2px 9px;}
.doc-toolbar .tbtn .lb{font-size:11px;color:var(--text);}
.doc-toolbar select.tbtn-select{
  border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);
  padding:3px 6px;font-size:11px;color:var(--text);height:26px;
}

.totals-panel{
  display:flex;gap:0;border-top:1px solid var(--border);
}
.totals-block{
  flex:1;padding:10px 16px;background:var(--green-bg);
  display:flex;flex-direction:column;gap:3px;
}
.totals-block + .totals-block{border-left:1px solid var(--border);}
.totals-row{display:flex;justify-content:space-between;font-size:12px;color:var(--text);}
.totals-row.strong{font-weight:700;font-size:13px;}
.totals-row .lbl{color:var(--text-muted);}

.lines-toolbar{display:flex;justify-content:flex-end;gap:6px;padding:6px 10px;border-bottom:1px solid var(--border);}
.lines-wrap{flex:1;overflow:auto;min-height:280px;}
table.lines{width:100%;border-collapse:collapse;font-size:11.5px;min-width:900px;}
table.lines thead th{
  position:sticky;top:0;background:var(--surface-alt);text-align:left;font-weight:600;
  color:var(--text-muted);padding:6px 8px;border-bottom:1px solid var(--border);
  font-size:10px;text-transform:uppercase;letter-spacing:.3px;white-space:nowrap;
}
table.lines tbody td{padding:5px 8px;border-bottom:1px solid var(--border);white-space:nowrap;}
table.lines tbody tr.discount-line{color:var(--red);font-style:italic;}
table.lines tbody tr.discount-line td{color:var(--red);}
table.lines td.num{text-align:right;font-family:var(--mono);}
table.lines tfoot td{padding:8px;color:var(--text-faint);font-style:italic;}
table.lines tbody tr.line-row-editable{cursor:pointer;}
table.lines tbody tr.line-row-editable:hover{background:var(--surface-alt);}
table.lines tbody tr.editing-line,table.lines tbody tr.editing-line:hover{background:var(--primary-bg);}

/* Modale large (sélection tiers/article, informations document, pied) */
.modal.wide{width:96vw;max-width:1100px;max-height:88vh;display:flex;flex-direction:column;}
.modal.wide .modal-head,.modal.wide .modal-foot{flex-shrink:0;}
.modal.wide .modal-body{max-height:none;overflow-y:auto;padding:16px 18px;flex:1 1 auto;min-height:0;}
.modal.wide .picker-shell{height:72vh;max-height:620px;}
.picker-shell{display:flex;gap:0;height:440px;min-width:0;}
.picker-rail{
  width:168px;flex-shrink:0;border-right:1px solid var(--border);overflow-y:auto;
  background:var(--surface-alt);
}
.picker-rail button{
  display:block;width:100%;text-align:left;background:transparent;border:0;
  padding:7px 10px;font-size:11.5px;line-height:1.35;color:var(--text);border-left:3px solid transparent;
}
.picker-rail button.active{background:var(--primary-bg);color:var(--primary-dark);border-left-color:var(--primary);font-weight:600;}
.picker-rail button:hover{background:var(--surface);}
.picker-main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0;}
.picker-search{padding:8px;border-bottom:1px solid var(--border);}
.picker-search input{width:100%;border:1px solid var(--border);border-radius:var(--radius);padding:6px 8px;font-size:12px;}
.picker-list{flex:1;overflow:auto;}
.picker-list table{width:100%;min-width:480px;border-collapse:collapse;font-size:11.5px;}
.picker-list th{position:sticky;top:0;background:var(--surface-alt);text-align:left;padding:6px 9px;font-weight:600;color:var(--text-muted);border-bottom:1px solid var(--border);font-size:10px;text-transform:uppercase;white-space:nowrap;}
.picker-list td{padding:6px 9px;border-bottom:1px solid var(--border);white-space:nowrap;}
.picker-list tr{cursor:pointer;}
.picker-list tr:hover{background:var(--surface-alt);}
.picker-list tr.sel{background:var(--primary-bg);}

.info-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px 20px;}

/* Téléphone : la coque ne doit jamais dépasser l'écran. Les pages pleine largeur (Projets, accueil)
   passent en une colonne ; les écrans liste + fiche de la gestion commerciale gardent leur disposition
   à deux volets et défilent horizontalement. */
@media (max-width:760px){
  .app,.app.no-nav{grid-template-columns:minmax(0,1fr);}
  .topbar{padding:0 8px;gap:6px;}
  .topbar .brand{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}
  .topbar .search{display:none;}
  .topbar .user span{display:none;}
  .toolbar{overflow-x:auto;overflow-y:hidden;}
  .toolbar > *{flex:0 0 auto;}
  .mb-top{padding:0 7px;}
  .mb-menu{max-width:100vw;max-height:70vh;overflow-y:auto;}
  .mb-submenu{position:static;min-width:0;border:0;box-shadow:none;padding:0 0 0 14px;background:var(--surface-alt);}
  .mb-item > a,.mb-item > .mb-disabled,.mb-item > .mb-trigger{padding:8px 14px;white-space:normal;}
  .main:has(> .pj),.main:has(> .hub){grid-template-columns:minmax(0,1fr);}
  .status .right span:first-child{display:none;}
}

/* Impression : masque le chrome applicatif (topbar, toolbar, nav rail, barre de statut,
   filtres/formulaires) pour n'imprimer que le contenu du module — bouton "Imprimer"
   (window.print()) disponible sur les écrans États. */
@media print{
  .topbar,.menubar,.toolbar,.nav,.status,.etat-filters,.etat-tabs,.no-print{display:none!important;}
  .app{display:block;height:auto;}
  .main{overflow:visible;height:auto;padding:0;}
  .list-pane{height:auto;}
  .article-list-table-wrap{overflow:visible!important;}
  body{background:#fff;color:#000;}
}

/* Bannière globale des erreurs de validation */
.flash-errors{position:relative;margin:10px 16px 0;padding:10px 40px 10px 14px;border:1px solid #e0a4a4;border-left:4px solid #c0392b;border-radius:6px;background:#fdf1f0;color:#7a1f16;font-size:13px;}
.flash-errors ul{margin:6px 0 0 18px;padding:0;}
.flash-errors .fe-close{position:absolute;top:6px;right:10px;border:0;background:none;font-size:20px;line-height:1;color:inherit;cursor:pointer;}
[data-theme="dark"] .flash-errors{background:#3a1d1a;border-color:#8a3a33;color:#f3c7c2;}

/* Fenêtres de sélection modales : aucun défilement horizontal, les champs de la grille se réduisent à la largeur disponible. */
.sel-modal{max-width:calc(100vw - 24px);}
.sel-body{overflow-x:hidden;}
.sel-body > *{min-width:0;}
.sel-body select,.sel-body input:not([type=checkbox]):not([type=radio]),.sel-body textarea{min-width:0;max-width:100%;width:100%;box-sizing:border-box;}
.sel-body select{text-overflow:ellipsis;}
.sel-body label{min-width:0;overflow-wrap:anywhere;}
.sel-foot{flex-wrap:wrap;}