/* ============================================================
   LPS Designer Pro — Clean Protect Bleu France
   Direct color overrides (hex-based for reliability)
   ============================================================ */

/* ---- Brand Colors ---- */
:root {
  --lps-bleu: #002395;
  --lps-republique: #0055A4;
  --lps-or: #D4A843;
  --lps-or-hover: #C49A38;
  --lps-bg: #F7F8FC;
  --lps-dark: #1A1D2E;
  --lps-grey: #6B7280;
  --lps-light-border: #E5E7EB;
}

/* Force DaisyUI theme colors */
[data-theme="tasklet"],
[data-theme="tasklet-dark"] {
  --p: 0.25 0.12 264;
  --pc: 1 0 0;
  --s: 0.40 0.12 255;
  --sc: 1 0 0;
  --a: 0.75 0.11 85;
  --ac: 0.15 0.05 85;
  --n: 0.25 0.02 260;
  --nc: 0.95 0.01 260;
  --b1: 0.98 0.003 264;
  --b2: 0.96 0.005 264;
  --b3: 0.93 0.008 264;
  --bc: 0.18 0.02 264;
  --in: 0.58 0.14 250;
  --su: 0.62 0.17 145;
  --wa: 0.76 0.14 75;
  --er: 0.53 0.19 25;
}

/* ---- Navbar ---- */
.navbar-brand {
  background: #FFFFFF;
  border-bottom: 1px solid var(--lps-light-border);
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

/* ---- Hero gradient ---- */
.hero-gradient {
  background: linear-gradient(135deg, var(--lps-bleu) 0%, var(--lps-republique) 60%, #003DB8 100%);
  color: #FFFFFF;
}

/* ---- Gold button ---- */
.btn-gold {
  background: var(--lps-or) !important;
  color: #FFFFFF !important;
  border: none !important;
  font-weight: 600;
}
.btn-gold:hover {
  background: var(--lps-or-hover) !important;
}

/* ---- Bleu button ---- */
.btn-bleu {
  background: var(--lps-bleu) !important;
  color: #FFFFFF !important;
  border: none !important;
}
.btn-bleu:hover {
  background: var(--lps-republique) !important;
}

/* ---- Text utility ---- */
.text-bleu { color: var(--lps-bleu); }
.text-republique { color: var(--lps-republique); }
.text-or { color: var(--lps-or); }
.text-grey { color: var(--lps-grey); }
.bg-bleu { background-color: var(--lps-bleu); }
.bg-or { background-color: var(--lps-or); }
.border-bleu { border-color: var(--lps-bleu); }

/* ---- Smooth transitions ---- */
.page-enter {
  animation: fadeIn 0.3s ease-out;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---- Card hover ---- */
.feature-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  border: 1px solid var(--lps-light-border);
}
.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px -8px rgba(0,35,149,0.12);
}

/* ---- Step indicator ---- */
.step-dot {
  width: 2rem;
  height: 0.25rem;
  border-radius: 2px;
  background: #E5E7EB;
  transition: background 0.3s ease, width 0.3s ease;
}
.step-dot.active {
  background: var(--lps-bleu);
  width: 3rem;
}
.step-dot.completed {
  background: var(--lps-republique);
}

/* ---- SVG viz ---- */
.viz-container svg {
  max-width: 100%;
  height: auto;
}

/* ---- Subtle grid hero ---- */
.grid-pattern {
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 40px 40px;
}