/* =========================================
   MOUVEMENT LEH — Dashboard CSS v5
   ========================================= */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg-primary:    #ffffff;
  --bg-secondary:  #f5f5f3;
  --bg-tertiary:   #eeece6;
  --tx-primary:    #1a1a18;
  --tx-secondary:  #5a5a57;
  --tx-tertiary:   #8a8a86;
  --border-light:  rgba(0,0,0,0.09);
  --border-medium: rgba(0,0,0,0.18);
  --success-bg:    #e1f5ee;
  --success-tx:    #085041;
  --warning-bg:    #faeeda;
  --warning-tx:    #633806;
  --danger-bg:     #fcebeb;
  --danger-tx:     #791f1f;
  --info-bg:       #e6f1fb;
  --info-tx:       #0c447c;
  --accent:        #185FA5;
  --accent-hover:  #0e4a85;
  --r-md: 8px;
  --r-lg: 12px;
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-primary:    #1e1e1c;
    --bg-secondary:  #2a2a28;
    --bg-tertiary:   #242422;
    --tx-primary:    #f0ede6;
    --tx-secondary:  #a8a8a2;
    --tx-tertiary:   #6a6a66;
    --border-light:  rgba(255,255,255,0.07);
    --border-medium: rgba(255,255,255,0.15);
    --success-bg:    #04342c;
    --success-tx:    #9fe1cb;
    --warning-bg:    #412402;
    --warning-tx:    #fac775;
    --danger-bg:     #501313;
    --danger-tx:     #f09595;
    --info-bg:       #042c53;
    --info-tx:       #b5d4f4;
  }
}

body {
  font-family: var(--font);
  background: var(--bg-tertiary);
  color: var(--tx-primary);
  font-size: 15px;
  line-height: 1.5;
  min-height: 100vh;
}

/* ══════════════════════════════════════════
   ÉCRAN DE CONNEXION
   ══════════════════════════════════════════ */
.login-screen {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-tertiary);
  z-index: 9999;
}

.login-card {
  background: var(--bg-primary);
  border: 0.5px solid var(--border-light);
  border-radius: var(--r-lg);
  padding: 2.5rem 2rem;
  width: 100%; max-width: 380px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.10);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}

.login-logo img {
  width: 64px; height: 64px; border-radius: 50%; object-fit: cover;
  margin-bottom: 8px;
}

.login-title { font-size: 20px; font-weight: 700; color: var(--tx-primary); }
.login-sub   { font-size: 12px; color: var(--tx-tertiary); letter-spacing: .05em; margin-bottom: 8px; }

.login-form  { width: 100%; display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }

.login-input-wrap { position: relative; }
.login-input-wrap .form-input { padding-right: 40px; }

.btn-eye {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer;
  color: var(--tx-tertiary); font-size: 16px; padding: 4px;
  transition: color .15s;
}
.btn-eye:hover { color: var(--tx-primary); }

.login-error {
  display: flex; align-items: center; gap: 6px;
  background: var(--danger-bg); color: var(--danger-tx);
  border-radius: var(--r-md); padding: 8px 12px;
  font-size: 13px; font-weight: 500;
}

.btn-login {
  width: 100%; justify-content: center;
  padding: 10px 18px; font-size: 14px;
}

.save-status {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 99px;
  white-space: nowrap;
}
.save-saving { background: var(--warning-bg); color: var(--warning-tx); }
.save-saved  { background: var(--success-bg); color: var(--success-tx); }
.save-error  { background: var(--danger-bg);  color: var(--danger-tx); }

.data-load-error {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--danger-bg);
  color: var(--danger-tx);
  border-radius: var(--r-md);
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 500;
}

/* ── Badge rôle ── */
.role-badge {
  font-size: 11px; font-weight: 600; padding: 2px 10px;
  border-radius: 99px; white-space: nowrap;
}
.role-admin    { background: var(--info-bg);    color: var(--info-tx); }
.role-readonly { background: var(--bg-secondary); color: var(--tx-secondary); border: 0.5px solid var(--border-medium); }

.btn-logout {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 0.5px solid var(--border-medium);
  color: var(--tx-secondary); cursor: pointer; border-radius: var(--r-md);
  padding: 6px 12px; font-size: 13px; font-family: var(--font);
  font-weight: 500; transition: all .15s; white-space: nowrap;
}
.btn-logout .ti { font-size: 15px; flex-shrink: 0; }
.btn-logout:hover { background: var(--danger-bg); color: var(--danger-tx); border-color: transparent; }
.btn-logout-label { font-size: 13px; }

/* ══════════════════════════════════════════
   LAYOUT PRINCIPAL
   ══════════════════════════════════════════ */
.page-wrapper { max-width: 980px; margin: 0 auto; padding: 2rem 1.5rem; }
.dash { display: flex; flex-direction: column; gap: 1rem; }

/* ── Header ── */
.leh-header {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 1.25rem;
  border-bottom: 0.5px solid var(--border-light);
  gap: 12px;
}
.leh-brand { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.leh-logo-img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.leh-name    { font-size: 16px; font-weight: 600; }
.leh-tagline { font-size: 12px; color: var(--tx-tertiary); margin-top: 2px; letter-spacing: .04em; }
.leh-date    { font-size: 13px; color: var(--tx-tertiary); white-space: nowrap; }

.leh-header-right {
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
  flex-shrink: 0;
}
.leh-header-badges {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end;
}
.leh-phase-badge { white-space: nowrap; }

/* ── Filter bar ── */
.filter-bar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.flt {
  font-size: 12px; padding: 5px 14px; border-radius: 99px;
  border: 0.5px solid var(--border-medium); background: transparent;
  color: var(--tx-secondary); cursor: pointer; font-family: var(--font); transition: all .15s;
}
.flt:hover  { background: var(--bg-secondary); }
.flt.active { background: var(--info-bg); color: var(--info-tx); border-color: transparent; }
.flt-manage { padding: 5px 10px; color: var(--tx-tertiary); }

/* ── Metrics ── */
.metrics { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; }
.metric  { background: var(--bg-secondary); border-radius: var(--r-md); padding: 14px 16px; }
.metric-label { font-size: 12px; color: var(--tx-secondary); margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.metric-label .ti { font-size: 15px; }
.metric-value { font-size: 28px; font-weight: 500; line-height: 1; }
.metric-value.success { color: #1D9E75; }
.metric-value.info    { color: #185FA5; }
.metric-value.danger  { color: #A32D2D; }
.metric-sub { font-size: 11px; color: var(--tx-tertiary); margin-top: 5px; }

/* ── Badge ── */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 500; padding: 3px 9px;
  border-radius: 99px; white-space: nowrap;
}
.badge .ti { font-size: 12px; }
.b-success { background: var(--success-bg); color: var(--success-tx); }
.b-warning { background: var(--warning-bg); color: var(--warning-tx); }
.b-danger  { background: var(--danger-bg);  color: var(--danger-tx); }
.b-info    { background: var(--info-bg);    color: var(--info-tx); }
.b-neutral { background: var(--bg-secondary); color: var(--tx-secondary); border: 0.5px solid var(--border-light); }

/* ── Grid ── */
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; }

/* ── Card ── */
.card {
  background: var(--bg-primary);
  border: 0.5px solid var(--border-light);
  border-radius: var(--r-lg);
  padding: 1rem 1.25rem;
}
.card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.card-title { font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 8px; }
.card-title .ti { font-size: 16px; color: var(--tx-tertiary); }

/* ── Progress ── */
.progress-bar { height: 6px; background: var(--bg-secondary); border-radius: 99px; overflow: hidden; }
.progress-fill { height: 100%; border-radius: 99px; transition: width .3s ease; }
.fill-none    { width: 0%; }
.fill-partial { width: 50%; background: #C0392B; }
.fill-done    { width: 100%; background: #1D9E75; }

/* ── Rows livrables ── */
.del-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 6px; border-bottom: 0.5px solid var(--border-light);
  cursor: pointer; border-radius: 6px; margin: 0 -6px;
  transition: background .12s;
}
.del-row:hover { background: var(--bg-secondary); }
.del-row:last-child { border-bottom: none; }

.del-info  { flex: 1; min-width: 0; }
.del-name  { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.del-meta  { font-size: 11px; color: var(--tx-tertiary); margin-top: 2px; display: flex; align-items: center; gap: 4px; }
.del-date  { font-size: 11px; color: var(--tx-tertiary); margin-top: 1px; }
.del-prog  { width: 82px; flex-shrink: 0; }

.pole-inline-tag {
  display: inline-block; font-size: 10px; padding: 1px 6px;
  border-radius: 99px; font-weight: 500; white-space: nowrap;
}

.del-edit {
  background: none; border: none; color: var(--tx-tertiary);
  cursor: pointer; padding: 4px 6px; border-radius: var(--r-md);
  font-size: 15px; opacity: 0; transition: opacity .15s; flex-shrink: 0;
}
.del-row:hover .del-edit { opacity: 1; }
.del-edit:hover { background: var(--border-light); color: var(--tx-primary); }

/* ── Avatar ── */
.avatar {
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 600; flex-shrink: 0;
}

/* ── Right col ── */
.right-col { display: flex; flex-direction: column; gap: 1rem; }
.pole-row  { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 0.5px solid var(--border-light); }
.pole-row:last-child { border-bottom: none; }
.pole-bar-wrap { flex: 1; }
.pole-pct  { font-size: 12px; color: var(--tx-secondary); min-width: 32px; text-align: right; }
.pole-tag  { font-size: 11px; padding: 3px 9px; border-radius: 99px; font-weight: 500; white-space: nowrap; min-width: 100px; text-align: center; }
.empty-note { font-size: 12px; color: var(--tx-tertiary); text-align: center; padding: 12px 0; }

/* ── Check liste permanente (points clés) ── */
.keypoints-card {
  border-color: rgba(195, 57, 43, 0.35);
  background: var(--danger-bg);
}
.keypoints-card .card-title {
  color: #C0392B;
}
@media (prefers-color-scheme: dark) {
  .keypoints-card .card-title { color: #E74C3C; }
}
.keypoints-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
}
.keypoint-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
  color: #A32D2D;
}
.keypoint-item::before {
  content: '•';
  flex-shrink: 0;
  color: #C0392B;
  font-size: 16px;
  line-height: 1.2;
}
@media (prefers-color-scheme: dark) {
  .keypoint-item { color: var(--danger-tx); }
  .keypoint-item::before { color: #E74C3C; }
}
.keypoints-editor { min-height: 160px; }

/* ── Milestones ── */
.milestones { display: flex; flex-direction: column; gap: 8px; }

.milestone {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: var(--r-md);
}
.ms-success { background: var(--success-bg); }
.ms-warning { background: var(--warning-bg); }
.ms-neutral { background: var(--bg-secondary); }

.ms-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.ms-success .ms-dot { background: #1D9E75; }
.ms-warning .ms-dot { background: #BA7517; }
.ms-neutral .ms-dot { background: var(--tx-tertiary); }

.ms-body { flex: 1; min-width: 0; }
.ms-status { font-size: 11px; font-weight: 500; margin-bottom: 2px; display: flex; align-items: center; gap: 4px; }
.ms-success .ms-status { color: var(--success-tx); }
.ms-warning .ms-status { color: var(--warning-tx); }
.ms-neutral .ms-status { color: var(--tx-secondary); }
.ms-name { font-size: 13px; font-weight: 500; }
.ms-date { font-size: 11px; color: var(--tx-tertiary); margin-top: 2px; }

.ms-edit {
  background: none; border: none; color: var(--tx-tertiary);
  cursor: pointer; padding: 5px 7px; border-radius: var(--r-md);
  font-size: 15px; transition: background .15s, color .15s; flex-shrink: 0;
}
.ms-edit:hover { background: rgba(0,0,0,0.07); color: var(--tx-primary); }

.ms-clickable { cursor: pointer; transition: filter .15s; }
.ms-clickable:hover { filter: brightness(0.96); }
.ms-clickable .ms-body { flex: 1; }

/* ── Buttons ── */
.btn-add {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; padding: 5px 12px; border-radius: 99px;
  border: 0.5px solid var(--border-medium); background: transparent;
  color: var(--tx-secondary); cursor: pointer; font-family: var(--font); transition: all .15s;
}
.btn-add:hover { background: var(--bg-secondary); color: var(--tx-primary); }

.btn-primary {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 13px; padding: 8px 18px; border-radius: var(--r-md);
  border: none; background: var(--accent); color: #fff;
  cursor: pointer; font-family: var(--font); font-weight: 500; transition: background .15s;
}
.btn-primary:hover { background: var(--accent-hover); }
.btn-primary.btn-danger { background: #A32D2D; }
.btn-primary.btn-danger:hover { background: #7a1f1f; }
.btn-sm { padding: 5px 12px; font-size: 12px; }

.btn-ghost {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 13px; padding: 8px 14px; border-radius: var(--r-md);
  border: 0.5px solid var(--border-medium); background: transparent;
  color: var(--tx-secondary); cursor: pointer; font-family: var(--font); transition: all .15s;
}
.btn-ghost:hover { background: var(--bg-secondary); color: var(--tx-primary); }
.btn-danger-ghost { color: var(--danger-tx); border-color: var(--danger-bg); }
.btn-danger-ghost:hover { background: var(--danger-bg); color: var(--danger-tx); }
.btn-xs { font-size: 11px; padding: 4px 10px; }

.btn-icon-sm {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: var(--r-md);
  border: 0.5px solid var(--border-medium); background: transparent;
  color: var(--tx-tertiary); cursor: pointer; font-size: 15px; transition: all .15s;
}
.btn-icon-sm:hover { background: var(--bg-secondary); color: var(--tx-primary); }

.btn-icon {
  background: none; border: none; cursor: pointer; font-size: 14px;
  color: var(--tx-tertiary); padding: 4px 6px; border-radius: 4px; transition: color .15s;
}
.btn-icon:hover { color: var(--tx-primary); }

/* ── Empty State ── */
.empty-state { text-align: center; padding: 28px 16px; color: var(--tx-tertiary); font-size: 13px; }
.empty-state .ti { font-size: 28px; display: block; margin-bottom: 8px; }

/* ── Modal ── */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.40);
  display: flex; align-items: center; justify-content: center;
  z-index: 200; opacity: 0; pointer-events: none;
  transition: opacity .2s;
}
.modal-overlay.open { opacity: 1; pointer-events: all; }

.modal {
  background: var(--bg-primary);
  border-radius: var(--r-lg);
  border: 0.5px solid var(--border-light);
  width: 100%; max-width: 440px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.18);
  overflow: hidden;
}
.modal-wide { max-width: 520px; }

.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 0.5px solid var(--border-light);
  font-size: 14px; font-weight: 600;
}
.modal-close {
  background: none; border: none; color: var(--tx-tertiary);
  cursor: pointer; font-size: 18px; padding: 2px 4px; border-radius: 4px;
  transition: color .15s; line-height: 1;
}
.modal-close:hover { color: var(--tx-primary); }

.modal-body {
  padding: 18px; display: flex; flex-direction: column; gap: 12px;
  max-height: 80vh; overflow-y: auto;
}

/* ── Forms ── */
.form-label { font-size: 12px; font-weight: 500; color: var(--tx-secondary); margin-bottom: -6px; }
.req { color: var(--danger-tx); }

.form-input {
  font-family: var(--font); font-size: 13px;
  padding: 8px 12px; border-radius: var(--r-md);
  border: 0.5px solid var(--border-medium);
  background: var(--bg-secondary); color: var(--tx-primary);
  width: 100%; outline: none; transition: border-color .15s;
}
.form-input:focus { border-color: var(--accent); }
.form-textarea { resize: vertical; min-height: 72px; line-height: 1.5; }

.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ── State selector ── */
.state-selector { display: flex; gap: 8px; }
.state-btn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 10px; border-radius: var(--r-md);
  border: 0.5px solid var(--border-medium); background: transparent;
  color: var(--tx-secondary); font-size: 12px; font-family: var(--font); cursor: pointer; transition: all .15s;
}
.state-btn.active { border-color: var(--accent); background: var(--info-bg); color: var(--info-tx); font-weight: 500; }

.state-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dot-none    { background: var(--border-medium); }
.dot-partial { background: #C0392B; }
.dot-done    { background: #1D9E75; }

.modal-actions {
  display: flex; align-items: center;
  padding-top: 8px;
  border-top: 0.5px solid var(--border-light);
  margin-top: 4px;
}

/* ── Poles manager ── */
.poles-manager-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 4px; }

.pole-mgr-row {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; border-radius: var(--r-md);
  background: var(--bg-secondary);
}
.pole-mgr-arrows { display: flex; flex-direction: column; gap: 1px; flex-shrink: 0; }

.btn-arrow {
  background: none; border: none; cursor: pointer;
  color: var(--tx-tertiary); padding: 0px 2px; font-size: 13px;
  border-radius: 3px; line-height: 1; transition: color .15s, background .15s;
}
.btn-arrow:hover:not([disabled]) { color: var(--tx-primary); background: var(--border-light); }
.btn-arrow[disabled] { opacity: 0.25; cursor: default; }

.pole-mgr-dot   { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.pole-mgr-label { flex: 1; font-size: 13px; font-weight: 500; }
.pole-mgr-count { font-size: 11px; color: var(--tx-tertiary); white-space: nowrap; }

.poles-form-sep {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13px; font-weight: 600;
  padding: 10px 0 4px;
  border-top: 0.5px solid var(--border-light);
  margin-top: 4px;
}

.palette-wrap { display: flex; gap: 8px; flex-wrap: wrap; }
.palette-swatch {
  width: 28px; height: 28px; border-radius: 50%; cursor: pointer;
  border: 2.5px solid transparent; transition: transform .15s, border-color .15s;
}
.palette-swatch:hover    { transform: scale(1.15); }
.palette-swatch.selected { border-color: var(--tx-primary); transform: scale(1.15); }

/* ── Drawer ── */
.drawer-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.25);
  z-index: 300; opacity: 0; pointer-events: none; transition: opacity .2s;
}
.drawer-backdrop.open { opacity: 1; pointer-events: all; cursor: pointer; }

.task-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 360px; max-width: 95vw;
  background: var(--bg-primary);
  border-left: 0.5px solid var(--border-light);
  z-index: 400;
  transform: translateX(100%);
  transition: transform .25s cubic-bezier(.32,.72,0,1);
  display: flex; flex-direction: column;
  box-shadow: -8px 0 32px rgba(0,0,0,0.08);
}
.task-drawer.open { transform: translateX(0); }

.drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 0.5px solid var(--border-light); gap: 12px;
}
.drawer-title { font-size: 14px; font-weight: 600; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drawer-body  { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 20px; }

.drawer-alert {
  display: flex; align-items: center; gap: 8px;
  background: var(--danger-bg); color: var(--danger-tx);
  border-radius: var(--r-md); padding: 10px 12px;
  font-size: 12px; font-weight: 500;
}

.drawer-section { display: flex; flex-direction: column; gap: 10px; }
.drawer-section-title { font-size: 11px; font-weight: 600; color: var(--tx-tertiary); text-transform: uppercase; letter-spacing: .06em; }
.drawer-kv { display: flex; align-items: center; gap: 10px; }
.drawer-k  { font-size: 12px; color: var(--tx-tertiary); display: flex; align-items: center; gap: 5px; min-width: 110px; }
.drawer-k .ti { font-size: 14px; }
.drawer-v  { font-size: 13px; font-weight: 500; }
.drawer-pole-tag { display: inline-block; font-size: 11px; padding: 2px 10px; border-radius: 99px; font-weight: 500; }
.drawer-notes {
  font-size: 13px; color: var(--tx-secondary); line-height: 1.6;
  white-space: pre-wrap; background: var(--bg-secondary);
  padding: 10px 12px; border-radius: var(--r-md); min-height: 60px;
}

/* ── Confirm ── */
.confirm-overlay { z-index: 600; }
.confirm-modal   { max-width: 360px; }
.confirm-message { font-size: 14px; color: var(--tx-primary); line-height: 1.5; }

/* ==========================================
   RESPONSIVE - TABLETTE (<= 768px)
   ========================================== */
@media (max-width: 768px) {
  .page-wrapper { padding: 1rem; }

  /* Header : brand a gauche, droite dessous */
  .leh-header {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding-bottom: 1rem;
  }
  .leh-brand { flex: 1; }
  .leh-header-right {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 8px;
  }
  .leh-header-badges {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
  }
  .leh-date { font-size: 12px; }

  /* Metriques 2 colonnes */
  .metrics { grid-template-columns: repeat(2, 1fr); }

  /* Grid principal 1 colonne */
  .grid2 { grid-template-columns: 1fr; }

  /* Filter bar scroll horizontal */
  .filter-bar { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
  .filter-bar::-webkit-scrollbar { display: none; }
  .flt { flex-shrink: 0; }

  /* Modales */
  .modal { max-width: calc(100vw - 2rem); margin: 1rem; }
  .modal-body { max-height: 70vh; }

  /* Drawer plein ecran */
  .task-drawer { width: 100%; border-left: none; }

  /* Formulaires 1 colonne */
  .form-row-2 { grid-template-columns: 1fr; }

  /* Jalons : padding reduit */
  .milestone { padding: 8px 10px; gap: 8px; }

  /* Del-row : barre plus courte */
  .del-prog { width: 64px; }
}

/* ==========================================
   RESPONSIVE - MOBILE (<= 480px)
   ========================================== */
@media (max-width: 480px) {
  .page-wrapper { padding: 0.75rem; }

  /* Header condense */
  .leh-header { gap: 10px; }
  .leh-logo-img { width: 36px; height: 36px; }
  .leh-name { font-size: 15px; }
  .leh-tagline { font-size: 11px; }
  .leh-header-right { gap: 6px; }
  /* Cacher badge de phase, montrer seulement icone logout */
  .leh-phase-badge { display: none; }
  .btn-logout-label { display: none; }
  .btn-logout { padding: 6px 8px; }

  /* Metriques 2 colonnes compactes */
  .metrics { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .metric { padding: 10px 12px; }
  .metric-value { font-size: 22px; }

  /* State selector vertical */
  .state-selector { flex-direction: column; gap: 6px; }

  /* Drawer */
  .drawer-body { padding: 14px; }
  .drawer-k { min-width: 90px; font-size: 11px; }

  /* Modales */
  .modal { max-width: calc(100vw - 1rem); margin: 0.5rem; border-radius: var(--r-md); }
  .modal-body { padding: 14px; max-height: 75vh; }
  .modal-head { padding: 12px 14px; }
  .modal-actions { flex-wrap: wrap; gap: 6px; }
  .modal-actions .btn-primary,
  .modal-actions .btn-ghost { flex: 1; justify-content: center; }

  /* Card */
  .card { padding: 0.875rem 1rem; }
  .card-head { margin-bottom: 10px; }

  /* Confirm modal */
  .confirm-modal { max-width: calc(100vw - 1rem); }

  /* Milestones */
  .ms-name { font-size: 12px; }
  .ms-date { font-size: 10px; }

  /* Del row */
  .del-name { font-size: 12px; }
  .del-prog { width: 56px; }

  /* Pole mgr */
  .pole-mgr-label { font-size: 12px; }

  /* Palette swatches */
  .palette-swatch { width: 24px; height: 24px; }

  /* Login card */
  .login-card { padding: 2rem 1.25rem; }
}