/* =========================================================
   PROJECT MASTER PRO — feuille de styles
   ========================================================= */
:root{
  --navy-999:#060a14;
  --navy-950:#0b1220;
  --navy-900:#111a2e;
  --navy-800:#16213b;
  --navy-700:#1c2b4a;
  --blue-600:#2563eb;
  --blue-500:#3b82f6;
  --blue-100:#dbeafe;
  --teal-500:#0ea5a3;
  --amber-500:#f59e0b;
  --amber-100:#fef3c7;
  --red-500:#ef4444;
  --red-100:#fee2e2;
  --green-500:#16a34a;
  --green-100:#dcfce7;
  --slate-50:#f7f8fb;
  --slate-100:#eef1f6;
  --slate-200:#e3e8f0;
  --slate-300:#cbd5e1;
  --slate-400:#94a3b8;
  --slate-500:#64748b;
  --slate-600:#475569;
  --slate-700:#334155;
  --slate-800:#1e293b;
  --slate-900:#0f172a;
  --radius:10px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.06);
  --shadow-md:0 4px 14px rgba(15,23,42,.08);
  --shadow-lg:0 12px 32px rgba(15,23,42,.16);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

*, *::before, *::after{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; font-family:var(--font); background:var(--slate-50); color:var(--slate-800);
  font-size:14px; line-height:1.45;
}
h1,h2,h3,h4{ margin:0 0 8px; color:var(--slate-900); }
a{ color:var(--blue-600); }
.hidden{ display:none !important; }
code{ background:var(--slate-100); padding:1px 6px; border-radius:4px; font-size:12px; }

/* ---------- Login ---------- */
.login-screen{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 20% 20%, var(--navy-700) 0%, var(--navy-950) 55%, var(--navy-999) 100%);
  padding:24px;
}
.login-box{
  width:100%; max-width:420px; background:#fff; border-radius:16px; box-shadow:var(--shadow-lg);
  padding:36px 32px; animation:fadeUp .35s ease;
}
@keyframes fadeUp{ from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);} }
.login-logo{ text-align:center; margin-bottom:22px; }
.logo-mark{
  width:112px; height:112px; margin:0 auto 12px; border-radius:28px;
  background:linear-gradient(135deg, var(--blue-600), var(--teal-500));
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:36px; letter-spacing:.5px; box-shadow:var(--shadow-md);
}
.logo-mark.small{ width:36px; height:36px; font-size:12px; border-radius:10px; }
.login-logo h1{ font-size:20px; margin-bottom:6px; }
.login-logo p{ color:var(--slate-500); font-size:12.5px; margin:0; padding:0 8px; }
.login-form{ display:flex; flex-direction:column; gap:14px; margin-top:20px; }
.login-form label{ display:flex; flex-direction:column; gap:6px; font-size:12.5px; font-weight:600; color:var(--slate-600); }
.login-form input{
  font-size:14px; padding:10px 12px; border-radius:8px; border:1px solid var(--slate-300);
  font-family:var(--font); font-weight:400; color:var(--slate-900);
}
.login-form input:focus{ outline:2px solid var(--blue-500); outline-offset:1px; border-color:var(--blue-500); }
.login-error{ color:var(--red-500); font-size:12.5px; min-height:14px; }
.login-demo{ margin-top:22px; border-top:1px solid var(--slate-200); padding-top:14px; }
.login-demo p{ font-size:11.5px; color:var(--slate-500); margin:0 0 8px; }
.login-demo-list{ display:flex; flex-wrap:wrap; gap:6px; }
.demo-chip{
  font-size:11.5px; background:var(--slate-100); border:1px solid var(--slate-200); border-radius:20px;
  padding:5px 10px; cursor:pointer; color:var(--slate-700);
}
.demo-chip:hover{ background:var(--blue-100); border-color:var(--blue-500); color:var(--blue-600); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:6px; justify-content:center;
  padding:8px 14px; border-radius:8px; font-size:13px; font-weight:600; border:1px solid transparent;
  cursor:pointer; font-family:var(--font); transition:.15s ease;
}
.btn-block{ width:100%; }
.btn-primary{ background:var(--blue-600); color:#fff; }
.btn-primary:hover{ background:#1d4ed8; }
.btn-secondary{ background:var(--slate-100); color:var(--slate-700); border-color:var(--slate-200); }
.btn-secondary:hover{ background:var(--slate-200); }
.btn-success{ background:var(--green-500); color:#fff; }
.btn-success:hover{ background:#15803d; }
.btn-danger{ background:var(--red-500); color:#fff; }
.btn-danger:hover{ background:#dc2626; }
.btn-ghost{ background:transparent; color:var(--slate-200); border-color:rgba(255,255,255,.25); }
.btn-ghost:hover{ background:rgba(255,255,255,.1); }
.btn-sm{ padding:5px 10px; font-size:12px; border-radius:6px; }
.btn-xs{ padding:3px 8px; font-size:11px; border-radius:6px; }
.btn:disabled{ opacity:.45; cursor:not-allowed; }
.btn-link{ background:none; border:none; color:var(--slate-500); font-size:12px; cursor:pointer; text-decoration:underline; padding:0; }
.icon-btn{ background:none; border:none; font-size:18px; cursor:pointer; color:var(--slate-600); padding:4px 8px; border-radius:6px; }
.icon-btn:hover{ background:var(--slate-100); }

/* ---------- App shell ---------- */
.app-shell{ display:flex; min-height:100vh; }
.sidebar{
  width:250px; flex:none; background:linear-gradient(180deg, var(--navy-900), var(--navy-950));
  color:#e2e8f0; display:flex; flex-direction:column; position:sticky; top:0; height:100vh; overflow-y:auto;
  transition:width .18s ease;
}
.sidebar.collapsed{ width:70px; }
.sidebar.collapsed .logo-title,.sidebar.collapsed .logo-sub,.sidebar.collapsed .nav-label,
.sidebar.collapsed .nav-section-title{ display:none; }
.sidebar-logo{ display:flex; align-items:center; gap:10px; padding:18px 16px; border-bottom:1px solid rgba(255,255,255,.08); }
.logo-title{ font-weight:700; font-size:13.5px; color:#fff; }
.logo-sub{ font-size:10.5px; color:var(--slate-500); }
.sidebar-nav{ flex:1; padding:10px 8px; overflow-y:auto; }
.nav-section-title{ font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--slate-500); padding:14px 10px 6px; }
.nav-item{
  display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:8px; color:#cbd5e1;
  cursor:pointer; font-size:13px; margin-bottom:2px; white-space:nowrap;
}
.nav-item .nav-icon{ width:18px; text-align:center; flex:none; }
.nav-item:hover{ background:rgba(255,255,255,.06); color:#fff; }
.nav-item.active{ background:var(--blue-600); color:#fff; }

.main-col{ flex:1; display:flex; flex-direction:column; min-width:0; }
.topbar{
  height:60px; flex:none; background:#fff; border-bottom:1px solid var(--slate-200);
  display:flex; align-items:center; padding:0 20px; gap:14px; position:sticky; top:0; z-index:20;
}
.topbar-title{ font-weight:700; font-size:16px; color:var(--slate-900); flex:1; }
.topbar-right{ display:flex; align-items:center; gap:14px; }
.topbar-alerts{ font-size:13px; color:var(--slate-500); }
.topbar-alerts .alert-pill{ background:var(--red-100); color:var(--red-500); padding:4px 10px; border-radius:20px; font-weight:700; font-size:12px; }
.topbar-user{ display:flex; align-items:center; gap:8px; }
.user-avatar{
  width:34px; height:34px; border-radius:50%; background:var(--blue-100); color:var(--blue-600);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px;
}
.user-name{ font-size:12.5px; font-weight:700; color:var(--slate-800); }
.user-role{ font-size:11px; color:var(--slate-500); }
.content{ padding:22px 26px 60px; flex:1; min-width:0; }

/* ---------- Page bits ---------- */
.page-head{ display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:18px; gap:16px; flex-wrap:wrap;}
.page-head h2{ font-size:19px; }
.page-head p{ color:var(--slate-500); font-size:12.5px; margin:2px 0 0; max-width:640px; }
.page-actions{ display:flex; gap:8px; flex-wrap:wrap; }

.grid{ display:grid; gap:16px; }
.grid > *{ min-width:0; }
.grid-5{ grid-template-columns:repeat(5,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
@media (max-width:1100px){ .grid-5,.grid-4{grid-template-columns:repeat(2,1fr);} .grid-3{grid-template-columns:repeat(2,1fr);} }
@media (max-width:680px){ .grid-5,.grid-4,.grid-3,.grid-2{grid-template-columns:1fr;} }

.card{ background:#fff; border:1px solid var(--slate-200); border-radius:var(--radius); box-shadow:var(--shadow-sm); }
.card-pad{ padding:18px; }
.card-title{ font-size:13px; font-weight:700; color:var(--slate-700); margin-bottom:10px; display:flex; align-items:center; justify-content:space-between; }

.kpi{ padding:16px 18px; }
.kpi-label{ font-size:11.5px; color:var(--slate-500); text-transform:uppercase; letter-spacing:.04em; font-weight:700; }
.kpi-value{ font-size:24px; font-weight:800; color:var(--slate-900); margin-top:4px; }
.kpi-sub{ font-size:11.5px; color:var(--slate-500); margin-top:4px; }
.kpi-accent-blue{ border-top:3px solid var(--blue-600); }
.kpi-accent-amber{ border-top:3px solid var(--amber-500); }
.kpi-accent-green{ border-top:3px solid var(--green-500); }
.kpi-accent-red{ border-top:3px solid var(--red-500); }
.kpi-accent-teal{ border-top:3px solid var(--teal-500); }
.kpi-clickable{ cursor:pointer; transition:box-shadow .15s ease, transform .15s ease; }
.kpi-clickable:hover{ box-shadow:0 4px 14px rgba(15,23,42,.1); transform:translateY(-1px); }
.priority-tag{ display:inline-block; min-width:78px; text-align:center; }

table{ width:100%; border-collapse:collapse; font-size:12.8px; }
th{ text-align:left; background:var(--slate-50); color:var(--slate-500); font-size:11px; text-transform:uppercase;
    letter-spacing:.03em; padding:9px 10px; border-bottom:1px solid var(--slate-200); white-space:nowrap; }
td{ padding:9px 10px; border-bottom:1px solid var(--slate-100); vertical-align:middle; }
tbody tr:hover{ background:var(--slate-50); }
.table-wrap{ overflow-x:auto; border-radius:var(--radius); border:1px solid var(--slate-200); background:#fff; }
.table-wrap table{ border:none; }
.text-right{ text-align:right; }
.text-center{ text-align:center; }
.muted{ color:var(--slate-500); }
.small{ font-size:11.5px; }
.mono{ font-variant-numeric:tabular-nums; }
.empty-state{ text-align:center; padding:40px 20px; color:var(--slate-500); }

/* Organigramme (Administration de l'entreprise) — arbre indenté façon explorateur de fichiers,
   plus sûr à faire tenir sans bug de superposition qu'un diagramme à connecteurs horizontaux */
.org-chart{ display:flex; flex-direction:column; gap:14px; padding:4px 0 20px; }
.org-box{
  display:inline-flex; flex-direction:column; gap:2px; background:#fff;
  border:1px solid var(--slate-300); border-left:3px solid var(--blue-600); border-radius:8px;
  padding:8px 14px; min-width:180px; max-width:320px;
}
.org-box-inactif{ opacity:.55; border-left-color:var(--slate-400); border-style:dashed; }
.org-box-nom{ font-weight:700; font-size:13px; color:var(--slate-900); }
.org-box-code{ font-size:10.5px; }
.org-box-resp{ font-size:11.5px; color:var(--slate-500); }
.org-children{
  margin:8px 0 0 14px; padding-left:18px; border-left:2px solid var(--slate-200);
  display:flex; flex-direction:column; gap:10px;
}

.badge{ display:inline-block; padding:3px 9px; border-radius:20px; font-size:11px; font-weight:700; white-space:nowrap; }
.badge-gray{ background:var(--slate-100); color:var(--slate-600); }
.badge-blue{ background:var(--blue-100); color:var(--blue-600); }
.badge-amber{ background:var(--amber-100); color:#92400e; }
.badge-green{ background:var(--green-100); color:#15803d; }
.badge-red{ background:var(--red-100); color:#b91c1c; }
.badge-teal{ background:#ccfbf1; color:#0f766e; }

.progress{ height:7px; background:var(--slate-100); border-radius:6px; overflow:hidden; }
.progress > div{ height:100%; background:var(--blue-600); border-radius:6px; }
.progress.green > div{ background:var(--green-500); }
.progress.amber > div{ background:var(--amber-500); }
.progress.red > div{ background:var(--red-500); }

.tabs{ display:flex; gap:4px; border-bottom:1px solid var(--slate-200); margin-bottom:16px; flex-wrap:wrap; }
.tab{ padding:9px 14px; font-size:12.8px; font-weight:600; color:var(--slate-500); cursor:pointer; border-bottom:2px solid transparent; }
.tab:hover{ color:var(--slate-800); }
.tab.active{ color:var(--blue-600); border-color:var(--blue-600); }

.filters{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px; align-items:flex-end; }
.field{ display:flex; flex-direction:column; gap:4px; }
.field label{ font-size:11px; font-weight:700; color:var(--slate-500); text-transform:uppercase; letter-spacing:.03em; }
.field input, .field select, .field textarea{
  font-family:var(--font); font-size:13px; padding:8px 10px; border:1px solid var(--slate-300); border-radius:7px; color:var(--slate-900); background:#fff;
  min-width:160px; width:100%;
}
.field textarea{ min-width:260px; resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:2px solid var(--blue-500); outline-offset:0; border-color:var(--blue-500); }
.field-full{ grid-column:1/-1; }
.checkbox-list{ display:flex; flex-wrap:wrap; gap:6px 16px; border:1px solid var(--slate-300); border-radius:7px; padding:10px 12px; max-height:160px; overflow-y:auto; }
.checkbox-list-item{ display:flex; align-items:center; gap:6px; font-size:13px; font-weight:400; text-transform:none; letter-spacing:normal; }
.checkbox-list-item input{ width:auto; min-width:0; }
.checkbox-list-grouped{ display:block; max-height:260px; }
.checkbox-list-group{ margin-bottom:12px; }
.checkbox-list-group:last-child{ margin-bottom:0; }
.checkbox-list-group-title{ font-size:11px; font-weight:700; color:var(--slate-500); text-transform:uppercase; letter-spacing:.03em; margin-bottom:5px; padding-bottom:3px; border-bottom:1px solid var(--slate-200); }
.checkbox-list-group-items{ display:flex; flex-wrap:wrap; gap:6px 16px; }
.checkbox-list-selectall{ display:flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; color:var(--slate-700); margin-bottom:8px; cursor:pointer; }
.checkbox-list-selectall input{ width:auto; min-width:0; }
.form-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px 16px; }
.form-grid.cols-1{ grid-template-columns:1fr; }
.form-grid.cols-3{ grid-template-columns:repeat(3,1fr); }
@media (max-width:640px){ .form-grid{ grid-template-columns:1fr !important; } }
.hint{ font-size:11px; color:var(--slate-500); margin-top:2px; }

.workflow{ display:flex; align-items:center; flex-wrap:wrap; gap:0; margin:10px 0 4px; }
.wf-step{ display:flex; flex-direction:column; align-items:center; text-align:center; width:120px; position:relative; }
.wf-dot{ width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700;
  background:var(--slate-200); color:var(--slate-500); border:2px solid var(--slate-200); }
.wf-step.done .wf-dot{ background:var(--green-500); border-color:var(--green-500); color:#fff; }
.wf-step.current .wf-dot{ background:var(--blue-600); border-color:var(--blue-600); color:#fff; box-shadow:0 0 0 4px var(--blue-100); }
.wf-step.rejected .wf-dot{ background:var(--red-500); border-color:var(--red-500); color:#fff; }
.wf-label{ font-size:10.5px; font-weight:700; color:var(--slate-600); margin-top:6px; max-width:110px; }
.wf-date{ font-size:9.5px; color:var(--slate-500); }
.wf-line{ flex:1; height:2px; background:var(--slate-200); margin-top:15px; min-width:16px; }
.wf-line.done{ background:var(--green-500); }

.timeline{ list-style:none; margin:0; padding:0; border-left:2px solid var(--slate-200); }
.timeline li{ position:relative; padding:0 0 18px 18px; }
.timeline li::before{ content:''; position:absolute; left:-7px; top:2px; width:12px; height:12px; border-radius:50%; background:var(--blue-600); border:2px solid #fff; box-shadow:0 0 0 1px var(--slate-200); }
.timeline .tl-title{ font-weight:700; font-size:12.8px; color:var(--slate-800); }
.timeline .tl-meta{ font-size:11px; color:var(--slate-500); }
.timeline .tl-desc{ font-size:12px; color:var(--slate-600); margin-top:2px; }

/* ---------------- gantt ---------------- */
.gantt-wrap{ display:flex; border:1px solid var(--slate-200); border-radius:var(--radius); background:#fff; overflow:hidden; }
.gantt-labels{ flex:none; width:220px; border-right:1px solid var(--slate-200); }
.gantt-labels-head{ height:36px; display:flex; align-items:center; padding:0 10px; font-size:11px; font-weight:700;
  color:var(--slate-500); text-transform:uppercase; letter-spacing:.03em; border-bottom:1px solid var(--slate-200); background:var(--slate-50); }
.gantt-label-row{ height:34px; display:flex; align-items:center; padding:0 10px; border-bottom:1px solid var(--slate-100);
  font-size:12.3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--slate-700); }
.gantt-label-row.phase{ font-weight:700; color:var(--slate-800); background:var(--slate-50); }
.gantt-label-row.activite{ padding-left:22px; }
.gantt-scroll{ flex:1; overflow-x:auto; }
.gantt-inner{ position:relative; }
.gantt-months{ display:flex; height:36px; border-bottom:1px solid var(--slate-200); background:var(--slate-50); }
.gantt-month{ flex:none; display:flex; align-items:center; justify-content:center; font-size:10.5px; font-weight:700;
  color:var(--slate-500); border-right:1px solid var(--slate-200); text-transform:capitalize; white-space:nowrap; }
.gantt-row-track{ height:34px; border-bottom:1px solid var(--slate-100); position:relative; }
.gantt-row-track.phase{ background:var(--slate-50); }
.gantt-bar{ position:absolute; top:7px; height:20px; min-width:4px; border-radius:5px; background:var(--blue-100);
  border:1px solid var(--blue-500); overflow:hidden; }
.gantt-bar.phase{ background:var(--slate-200); border-color:var(--slate-400); top:8px; height:18px; }
.gantt-bar.late{ border-color:var(--red-500); }
.gantt-bar-fill{ position:absolute; top:0; left:0; bottom:0; background:var(--blue-500); }
.gantt-bar.phase .gantt-bar-fill{ background:var(--slate-500); }
.gantt-bar.late .gantt-bar-fill{ background:var(--red-500); }
.gantt-today{ position:absolute; top:0; bottom:0; width:2px; background:var(--red-500); z-index:2; }
.gantt-today-label{ position:absolute; top:-16px; left:4px; font-size:9.5px; font-weight:700; color:var(--red-500); white-space:nowrap; }
/* Organisation du projet — Lot F : marqueur de réception provisoire sur le Gantt (Option 1, simple
   marqueur — pas de concept générique de jalon). top:-30px pour ne pas chevaucher .gantt-today-label
   quand les deux marqueurs tombent près l'un de l'autre. */
.gantt-jalon{ position:absolute; top:0; bottom:0; width:2px; background:var(--teal-500,#0d9488); z-index:2; }
.gantt-jalon-label{ position:absolute; top:-30px; left:4px; font-size:9.5px; font-weight:700; color:var(--teal-500,#0d9488); white-space:nowrap; }

.matrice-phase-row td{ background:var(--slate-50); font-weight:700; color:var(--slate-800); }
.matrice-foot td{ background:var(--slate-50); font-weight:700; border-top:2px solid var(--slate-200); }

.pill-row{ display:flex; gap:8px; flex-wrap:wrap; }
.chain{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; font-size:12px; }
.chain .seg{ background:var(--slate-100); border-radius:6px; padding:5px 9px; font-weight:600; color:var(--slate-700); }
.chain .arrow{ color:var(--slate-300); }

.modal-overlay{ position:fixed; inset:0; background:rgba(15,23,42,.5); display:flex; align-items:center; justify-content:center; z-index:100; padding:20px; }
.modal-box{ background:#fff; border-radius:12px; width:100%; max-width:640px; max-height:88vh; display:flex; flex-direction:column; box-shadow:var(--shadow-lg); animation:fadeUp .18s ease; }
.modal-box.wide{ max-width:920px; }
.modal-head{ display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--slate-200); }
.modal-head h3{ font-size:15px; margin:0; }
.modal-body{ padding:18px 20px; overflow-y:auto; }
.modal-foot{ padding:14px 20px; border-top:1px solid var(--slate-200); display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }
.modal-close{ background:none; border:none; font-size:18px; cursor:pointer; color:var(--slate-500); }

.toast-container{ position:fixed; bottom:20px; right:20px; display:flex; flex-direction:column; gap:8px; z-index:200; }
.toast{ background:var(--slate-900); color:#fff; padding:10px 16px; border-radius:8px; font-size:12.8px; box-shadow:var(--shadow-md); animation:fadeUp .18s ease; }
.toast.success{ background:var(--green-500); }
.toast.error{ background:var(--red-500); }
.toast.info{ background:var(--slate-800); }

.alert-box{ display:flex; gap:10px; padding:11px 14px; border-radius:8px; font-size:12.5px; margin-bottom:10px; align-items:flex-start; }
.alert-box.warn{ background:var(--amber-100); color:#92400e; }
.alert-box.danger{ background:var(--red-100); color:#991b1b; }
.alert-box.info{ background:var(--blue-100); color:#1e40af; }
.alert-box.ok{ background:var(--green-100); color:#166534; }

.list-clean{ list-style:none; margin:0; padding:0; }
.list-clean li{ padding:9px 0; border-bottom:1px solid var(--slate-100); display:flex; justify-content:space-between; gap:10px; align-items:center; }
.list-clean li:last-child{ border-bottom:none; }

.link-row{ cursor:pointer; }
.link-row:hover td{ color:var(--blue-600); }

.mention-item:hover{ background:var(--slate-100); }
.mention-tag{ color:var(--blue-600); font-weight:600; }
.avatar-sm{ width:24px; height:24px; border-radius:50%; background:var(--slate-200); display:inline-flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; color:var(--slate-600); margin-right:6px; }

.matrix-table td, .matrix-table th{ text-align:center; }
.matrix-table td:first-child, .matrix-table th:first-child{ text-align:left; }

/* Assistant IA — panneau coulissant (Phase 4) */
.ai-panel{ position:fixed; top:0; right:0; bottom:0; width:380px; max-width:92vw; background:var(--slate-50);
  box-shadow:var(--shadow-lg); z-index:150; display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .22s ease; }
.ai-panel.open{ transform:translateX(0); }
.ai-panel-head{ background:var(--navy-900); color:#fff; padding:14px 16px; display:flex; align-items:center; gap:10px; }
.ai-panel-head-title{ flex:1; min-width:0; }
.ai-panel-head-title strong{ display:block; font-size:14px; }
.ai-panel-head-title span{ display:block; font-size:11.5px; color:var(--slate-300); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ai-panel-close{ background:none; border:none; color:#fff; font-size:18px; cursor:pointer; opacity:.85; padding:2px 6px; }
.ai-panel-close:hover{ opacity:1; }
.ai-panel-body{ flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; }
.ai-disclosure{ background:var(--blue-100); border:1px solid var(--blue-500); color:var(--slate-700); font-size:12.5px; padding:10px 12px; border-radius:8px; margin-bottom:12px; }
.ai-msg{ max-width:85%; padding:8px 12px; border-radius:10px; margin-bottom:8px; white-space:pre-wrap; word-break:break-word; font-size:13.3px; line-height:1.45; }
.ai-msg-user{ margin-left:auto; background:var(--blue-600); color:#fff; border-bottom-right-radius:2px; }
.ai-msg-assistant{ margin-right:auto; background:#fff; border:1px solid var(--slate-200); border-bottom-left-radius:2px; }
.ai-msg-notice{ margin:0 auto 8px; background:var(--amber-100); color:#92400e; border:1px solid var(--amber-500); font-size:12px; text-align:center; max-width:100%; }
.ai-msg-tool{ margin:0 auto 8px; background:var(--slate-100); color:var(--slate-600); border:1px solid var(--slate-200); font-size:11.5px; text-align:center; max-width:100%; padding:5px 10px; }
.ai-msg-pending{ margin-right:auto; background:#fff; border:1px solid var(--slate-200); color:var(--slate-500); font-style:italic; }
.ai-panel-foot{ border-top:1px solid var(--slate-200); padding:10px 12px; display:flex; gap:8px; align-items:flex-end; background:#fff; }
.ai-panel-foot textarea{ flex:1; resize:none; max-height:100px; }
.ai-proposal{ background:#fff; border:1px solid var(--blue-500); border-radius:8px; padding:10px 12px; margin-bottom:8px; font-size:12.8px; }
.ai-proposal-title{ font-weight:700; color:var(--blue-600); margin-bottom:6px; }
.ai-proposal-row{ margin-bottom:3px; }
.ai-proposal-hint{ color:var(--slate-500); font-size:11.5px; margin:6px 0 8px; }

/* =========================================================
   RESPONSIVE — Lot R0a (fondations)
   Toujours "screen" pour ne jamais interagir avec @media print ci-dessous.
   Convention de points de rupture utilisée dans tout le fichier :
     480px  = smartphone
     640px  = smartphone large / seuil plein écran modales-IA (aligné sur .form-grid existant)
     768px  = tablette portrait
     1024px = tablette paysage / petit laptop
   (1100px et 1280px+ déjà couverts par les grilles .grid-3/.grid-4 plus haut)
   Empilement z-index (documenté ici pour référence future, valeurs déjà cohérentes) :
     topbar(20) < modal-overlay(100) < ai-panel(150) < toast(200)
   ========================================================= */

/* Cibles tactiles ≥44px sur les contrôles principaux (formulaires, boutons standard). Les
   variantes compactes .btn-sm/.btn-xs (actions de tableaux denses) et .btn-link (liens texte) ne
   sont volontairement PAS concernées — respecte le design serré déjà en place dans les grilles. */
@media screen and (max-width:768px){
  .field input, .field select, .field textarea,
  .btn:not(.btn-sm):not(.btn-xs):not(.btn-link){ min-height:44px; }
  .icon-btn{ min-width:40px; min-height:40px; }
}

/* Modales et panneau Assistant IA en plein écran sous 640px : une fenêtre flottante centrée de
   quelques centaines de px devient inexploitable au doigt sur un téléphone. */
@media screen and (max-width:640px){
  .modal-overlay{ padding:0; }
  .modal-box, .modal-box.wide{ max-width:100vw; width:100vw; height:100vh; max-height:100vh; border-radius:0; }
  /* plein écran sur téléphone : sans cette marge, le titre de la fenêtre et sa croix de fermeture
     passent sous la barre d'état (heure, batterie) — constaté sur téléphone le 2026-10-01 */
  .modal-box, .modal-box.wide, .ai-panel{
    box-sizing:border-box;
    padding-top:env(safe-area-inset-top); padding-bottom:env(safe-area-inset-bottom);
  }
  .ai-panel{ width:100vw; max-width:100vw; }
}

/* Onglets internes (fiche projet, BPU, décomptes...) : défilement horizontal plutôt que retour à
   la ligne sur plusieurs lignes, qui repousserait tout le contenu utile vers le bas de l'écran. */
@media screen and (max-width:768px){
  .tabs{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:2px; }
  .tab{ white-space:nowrap; flex:none; }
}

/* Tiroir sidebar (off-canvas) sous 1024px — Lot R0b. Piloté par PMP.ui.open/closeSidebarDrawer
   (js/ui.js) via la classe .sidebar-open (convention alignée sur .ai-panel.open, pas .collapsed
   qui reste réservée au repli étroit desktop 70px — la coexistence des deux états à travers un
   redimensionnement est réconciliée côté JS dans app.js, pas ici, pour éviter toute ambiguïté de
   cascade CSS). #btn-toggle-sidebar (topbar) reste toujours accessible pour rouvrir le tiroir. */
@media screen and (max-width:1024px){
  .sidebar{
    position:fixed; top:0; left:0; height:100vh; z-index:150;
    transform:translateX(-100%); transition:transform .22s ease;
  }
  .sidebar.sidebar-open{ transform:translateX(0); }
}
.sidebar-backdrop{ display:none; position:fixed; inset:0; background:rgba(15,23,42,.5); z-index:149; }
.sidebar-backdrop.visible{ display:block; }

/* Topbar — corrige un débordement horizontal réel détecté à la vérification finale (Lot R4) :
   alertes + nom d'utilisateur + bouton IA + bouton Déconnexion ne rentrent jamais tous ensemble
   sous ~480px, quelle que soit la page (présent sur les 29 routes, pas propre à un écran). Le nom/
   rôle et le texte des alertes sont masqués (redondants avec l'écran lui-même) ; le bouton
   Déconnexion garde son texte visible (jamais d'icône seule sans étiquette — cohérent avec le
   focus clavier visible ajouté au Lot R3) mais réduit son gabarit.
   Applique le même critère à 640px (pas 480px) pour couvrir aussi les tablettes portrait étroites. */
@media screen and (max-width:640px){
  .topbar{ padding:0 10px; gap:8px; }
  .topbar-title{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; }
  .topbar-right{ gap:8px; }
  .topbar-alerts{ display:none; }
  .user-info{ display:none; }
  .topbar-user{ gap:0; }
  #btn-logout{ padding:6px 10px; font-size:11.5px; }
}

/* Mode "cartes empilées" pour tableaux à usage terrain — Lot R1. Utilitaire optionnel (classe
   .cards-mobile ajoutée à .table-wrap), appliqué au cas par cas selon un critère à 3 conditions
   (liste d'enregistrements, pas une matrice ; usage terrain plausible ; ≤5-6 colonnes) : dashboard,
   mouvements de stock, mobilisations, caisses. Les tableaux de gestion denses (BPU, décomptes,
   achats, admin) gardent le scroll horizontal existant, inchangé. Chaque <td> des tableaux
   concernés porte un attribut data-label (texte de l'en-tête associé) — sans lui, la cellule
   perdrait son étiquette en mode carte ; ne jamais omettre data-label sur une cellule d'action. */
@media screen and (max-width:640px){
  .table-wrap.cards-mobile{ border:none; background:transparent; overflow-x:visible; }
  .table-wrap.cards-mobile table, .table-wrap.cards-mobile thead,
  .table-wrap.cards-mobile tbody, .table-wrap.cards-mobile tr{ display:block; width:100%; }
  .table-wrap.cards-mobile thead{ display:none; }
  .table-wrap.cards-mobile tbody tr{
    background:#fff; border:1px solid var(--slate-200); border-radius:var(--radius);
    box-shadow:var(--shadow-sm); padding:10px 12px; margin-bottom:10px;
  }
  .table-wrap.cards-mobile td{
    display:flex; justify-content:space-between; align-items:center; gap:12px;
    padding:6px 0; border:none; text-align:right; white-space:normal;
  }
  .table-wrap.cards-mobile td:not(:last-child){ border-bottom:1px solid var(--slate-100); }
  .table-wrap.cards-mobile td::before{
    content:attr(data-label); font-weight:700; font-size:11px; text-transform:uppercase;
    letter-spacing:.03em; color:var(--slate-500); text-align:left; flex:none; margin-right:8px;
  }
}

/* Colonne d'étiquette figée au scroll horizontal — Lot R2. Réservée aux matrices non
   transformables en cartes (ex. planning de pointage) : la première colonne reste visible pendant
   que les colonnes de données défilent. */
.sticky-col{ position:sticky; left:0; z-index:1; }
th.sticky-col{ background:var(--slate-50); }
td.sticky-col{ background:#fff; }

/* Focus clavier visible — Lot R3 (accessibilité). Couvre les éléments interactifs qui n'ont pas
   déjà un style de focus dédié (inputs de formulaire : voir .field input:focus plus haut). */
a:focus-visible, button:focus-visible, .btn:focus-visible, .nav-item:focus-visible,
.tab:focus-visible, .icon-btn:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--blue-500); outline-offset:2px;
}

/* Zones sûres (encoche / barre d'accueil) — Lot P3 PWA. env(safe-area-inset-*) ne résout à autre
   chose que 0 que grâce à viewport-fit=cover (index.html) ; sans effet sur un appareil non concerné
   (résout alors à 0, comportement identique à avant ce lot). */
.topbar{
  height:calc(60px + env(safe-area-inset-top));
  padding-top:env(safe-area-inset-top);
}
/* Test sur téléphone du 2026-10-01 : la marge de zone sûre n'était portée que par .topbar, alors que
   les bannières (hors connexion, synchronisation, installation) sont placées AVANT elle — leur
   texte passait sous l'heure et la batterie, et un grand vide blanc les séparait de la barre de
   titre. Bannières et barre de titre forment désormais un seul bloc collant, qui porte la marge
   une seule fois ; les bannières restent ainsi visibles pendant le défilement. */
.entete-app{
  position:sticky; top:0; z-index:20; background:#fff;
  padding-top:env(safe-area-inset-top);
}
.entete-app .topbar{ position:static; height:60px; padding-top:0; }

/* Bannière d'installation PWA — Lot P4. #install-banner-login est en position fixe (l'écran de
   connexion est un flex centré ; sortir la bannière du flux évite de perturber ce centrage) ;
   #install-banner-app reste dans le flux normal, avant .topbar (déjà sticky), donc pousse le
   contenu sans conflit de z-index. */
#install-banner-login{ position:fixed; top:0; left:0; right:0; z-index:30; }
.install-banner{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:var(--blue-600); color:#fff; padding:10px 16px; font-size:12.8px;
}
.install-banner-actions{ display:flex; align-items:center; gap:10px; flex:none; }
.install-banner-close{
  background:none; border:none; color:#fff; cursor:pointer; font-size:15px; padding:2px 4px; opacity:.85;
}
.install-banner-close:hover{ opacity:1; }

/* Bannière d'état de connexion — retour utilisateur 2026-09-29. Dans le flux normal comme
   #install-banner-app (jamais fixed : les deux peuvent coexister sans se superposer), avant elle
   dans le HTML pour rester la plus visible des deux en cas de coupure prolongée. */
.connexion-banner{ text-align:center; padding:8px 16px; font-size:12.8px; font-weight:600; }
.connexion-banner-hors-ligne{ background:var(--amber-100); color:#92400e; }
.connexion-banner-retablie{ background:var(--green-100); color:#166534; }
.sync-banner{ text-align:center; padding:8px 16px; font-size:12.8px; font-weight:600; background:var(--blue-100); color:#1e40af; }

/* Gestion quotidienne — tableau kanban journalier (4 colonnes fixes). Défilement horizontal sous
   1024px plutôt qu'un empilement vertical : les colonnes gardent leur rôle spatial fixe (comme
   Jira), essentiel à la lisibilité du glisser-déposer. */
.gq-board{ display:flex; gap:12px; overflow-x:auto; align-items:flex-start; }
.gq-col{ flex:1 1 260px; min-width:240px; background:#fff; border:1px solid var(--slate-200); border-radius:10px; }
.gq-col-head{
  display:flex; align-items:center; gap:8px; padding:10px 12px; font-weight:700; font-size:12.5px;
  border-bottom:1px solid var(--slate-200); text-transform:uppercase; letter-spacing:.03em;
}
.gq-col-body{ padding:10px; min-height:80px; display:flex; flex-direction:column; gap:8px; }
.gq-col-body.drag-over{ background:var(--slate-50); outline:2px dashed var(--blue-500); outline-offset:-2px; border-radius:8px; }
.gq-card{
  background:var(--slate-50); border:1px solid var(--slate-200); border-radius:8px; padding:10px;
  font-size:12.5px; display:flex; flex-direction:column; gap:4px;
}
.gq-card[draggable="true"]{ cursor:grab; }
.gq-card[draggable="true"]:active{ cursor:grabbing; }
.gq-card-titre{ font-weight:700; color:var(--slate-800); }
.gq-priorite-sel{ font-size:11.5px; padding:4px 6px; border-radius:6px; border:1px solid var(--slate-300); }

@media print{
  .sidebar, .topbar, .page-actions, .no-print{ display:none !important; }
  .content{ padding:0; }
  body{ background:#fff; }
}