/* Palette et utilitaires – Suivi projets (sans build Vite) */
:root {
  --color-primary: #373a70;
  --color-accent: #e60721;
  --color-muted: #5a5d8a;
  --color-muted-light: #8a8daa;
  --color-border: #edf0f5;
  --color-subtle: #f5f8fa;
  --color-danger: #9a0412;
  --color-danger-soft: rgba(154, 4, 18, 0.12);
  --color-danger-light: rgba(230, 7, 33, 0.08);
  --color-danger-border: rgba(230, 7, 33, 0.25);
  --color-success: #15803d;
  --color-warning: #b45309;
  --color-warning-bg: rgba(180, 83, 9, 0.12);
  --color-step-current: #64748b;
  --color-step-idle: #8a8daa;
  --color-step-done: #15803d;
  --color-step-blocked: #9a0412;
  --color-primary-soft: rgba(55, 58, 112, 0.08);
  --color-accent-soft: rgba(230, 7, 33, 0.1);
  --color-accent-shadow: 0 2px 8px rgba(230, 7, 33, 0.35);
  --color-blocked-soft: rgba(154, 4, 18, 0.06);
}

body { font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; }

.body-bg { background-color: var(--color-subtle); }
.nav-bg { background-color: var(--color-primary); }
.nav-link-active { background-color: var(--color-accent); color: white; }
.card-border { border-color: var(--color-border); }
.card-bg-subtle { background-color: var(--color-subtle); }
.alert-success-bg { background-color: var(--color-primary-soft); border-color: rgba(55, 58, 112, 0.3); color: var(--color-primary); }
.alert-error-bg { background-color: var(--color-danger-light); border-color: var(--color-danger-border); color: var(--color-danger); }
.btn-accent { background-color: var(--color-accent); box-shadow: var(--color-accent-shadow); }
.progress-bar-bg { background-color: var(--color-border); }
.progress-bar-fill { }
.progress-fill-dynamic { width: var(--progress, 0); }
.progress-fill-low { background-color: #d97706; }
.progress-fill-mid { background-color: #c2410c; }
.progress-fill-high { background-color: #15803d; }
.logo-invert { filter: brightness(0) invert(1); }

.tracking-logo {
  width: 250px;
  height: auto;
}
@media (max-width: 767px) {
  .tracking-logo {
    width: 150px;
    height: auto;
  }
  .tracking > div.nav-bg {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
  }
  .tracking > div.nav-bg div.flex.justify-center {
    margin-bottom: 0.75rem;
  }
  .tracking > div.nav-bg h1 {
    font-size: 1.25rem;
    line-height: 1.3;
  }
}
.pulse-dot { animation: pulse 2s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

.text-primary { color: var(--color-primary); }
.text-accent { color: var(--color-accent); }
.text-muted { color: var(--color-muted); }
.text-muted-light { color: var(--color-muted-light); }
.text-danger { color: var(--color-danger); }
.text-success { color: var(--color-success); }
.text-warning { color: var(--color-warning); }
.text-step-current { color: var(--color-step-current); }

.bg-primary { background-color: var(--color-primary); }
.bg-accent { background-color: var(--color-accent); }
.bg-subtle { background-color: var(--color-subtle); }
.bg-border { background-color: var(--color-border); }
.bg-danger { background-color: var(--color-danger); }
.bg-danger-soft { background-color: var(--color-danger-soft); }
.bg-primary-soft { background-color: var(--color-primary-soft); }
.bg-accent-soft { background-color: var(--color-accent-soft); }
.bg-step-done { background-color: var(--color-step-done); }
.bg-step-blocked { background-color: var(--color-step-blocked); }
.bg-step-current { background-color: var(--color-step-current); }
.bg-step-idle { background-color: var(--color-step-idle); }
.bg-blocked-soft { background-color: var(--color-blocked-soft); }
.bg-warning-bg { background-color: var(--color-warning-bg); }

.border-border { border-color: var(--color-border); }

.tracking .nav-bg:after {
  background: linear-gradient(180deg, #373A70 0%, rgba(55, 58, 112, 0) 88.48%);
}

.nav-bg { position: relative; overflow: visible; }
.tracking .nav-bg { overflow: hidden; }
.tracking .nav-bg:before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url(../fill-1.png);
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: cover;
  opacity: 0.04;
  pointer-events: none;
}

/* Tracking timeline – palette MTDS */
.tracking-card { transition: box-shadow 0.2s ease; }
.tracking-card:hover { box-shadow: 0 20px 25px -5px rgba(55, 58, 112, 0.08), 0 8px 10px -6px rgba(55, 58, 112, 0.06); }

.tracking-timeline { position: relative; }
.tracking-timeline-item { opacity: 0; transform: translateY(12px); transition: opacity 0.4s ease, transform 0.4s ease; }
.tracking-timeline-item.tracking-timeline-visible { opacity: 1; transform: translateY(0); }

.tracking-timeline-marker { position: relative; }
.tracking-timeline-dot {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 3px solid white;
  box-shadow: 0 2px 8px rgba(55, 58, 112, 0.2);
  transition: transform 0.2s ease;
}
.tracking-timeline-item:hover .tracking-timeline-dot { transform: scale(1.05); }
.timeline-dot-done { background-color: var(--color-step-done); color: white; }
.timeline-dot-blocked { background-color: var(--color-step-blocked); color: white; }
.timeline-dot-current { background-color: var(--color-step-current); color: white; }
.timeline-dot-idle { background-color: var(--color-step-idle); color: white; }

.tracking-timeline-line { background: linear-gradient(180deg, var(--color-border) 0%, var(--color-border) 100%); }

.tracking-timeline-card {
  background: white;
  border: 1px solid var(--color-border);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.tracking-timeline-card:hover { box-shadow: 0 4px 14px rgba(55, 58, 112, 0.08); }
.timeline-step-blocked { border-left: 3px solid var(--color-step-blocked); }
.timeline-step-done { border-left: 3px solid var(--color-step-done); }
.timeline-step-current { border-left: 3px solid var(--color-step-current); }
.timeline-step-idle { border-left: 3px solid var(--color-step-idle); }

.tracking-card{
  position: relative;
}

/* Chronologie du projet (détail projet) – timeline verticale */
.project-chrono-timeline {
  position: relative;
  padding-top: 0.25rem;
}
.project-chrono-timeline::before {
  content: '';
  position: absolute;
  left: 11px;
  top: 1.25rem;
  bottom: 1.25rem;
  width: 2px;
  background-color: #e0e4eb;
  border-radius: 1px;
  pointer-events: none;
}
.project-chrono-step {
  margin-bottom: 15px;
}
.project-chrono-step:last-child {
  margin-bottom: 0;
}

/* Titre des cartes projet */
.project-card-title {
  max-width: 216px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dashboard-project-grid .project-card-title {
  max-width: 200px;
}