/* Mon Suivi Nutrition — composants (graphiques, IMC, profil, navigation) */

/* ---- Graphiques ---- */
.chart { width: 100%; height: auto; display: block; margin-top: 8px; }

.chart-line {
  fill: none;
  stroke: var(--c-accent);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.chart-dot { fill: var(--card); stroke: var(--c-accent); stroke-width: 2.5; }

.chart-grid { stroke: var(--border); stroke-width: 1; }

.chart-goal { stroke: var(--c-fast); stroke-width: 1.5; stroke-dasharray: 5 4; }

.chart-goal-lbl { font-size: 9px; fill: var(--c-fast); font-weight: 700; font-family: var(--font); }

.chart-axis { font-size: 9px; fill: var(--text-2); font-family: var(--font); }

.chart-bar { fill: var(--c-accent); opacity: 0.9; }

.chart-bar.over { fill: var(--c-over); }

/* ---- IMC ---- */
.imc-row { display: flex; align-items: center; gap: 18px; margin-bottom: 16px; }

.imc-val { font-size: 2.4rem; font-weight: 800; letter-spacing: -0.05em; }

.imc-lbl { font-weight: 700; letter-spacing: -0.01em; }

.imc-scale {
  position: relative;
  display: flex;
  height: 11px;
  border-radius: 7px;
  overflow: visible;
}

.imc-zone { height: 100%; }

.imc-zone.z1 { width: 10.4%; background: #5b8dc7; border-radius: 7px 0 0 7px; }

.imc-zone.z2 { width: 27.1%; background: var(--c-accent); }

.imc-zone.z3 { width: 20.8%; background: var(--c-fast); }

.imc-zone.z4 { width: 41.7%; background: var(--c-over); border-radius: 0 7px 7px 0; }

.imc-cursor {
  position: absolute;
  top: -5px;
  width: 5px;
  height: 21px;
  background: var(--text);
  border-radius: 3px;
  transform: translateX(-50%);
  box-shadow: 0 0 0 2.5px var(--card), 0 2px 6px rgba(0, 0, 0, 0.25);
}

.imc-legend {
  display: flex;
  justify-content: space-between;
  font-size: 0.68rem;
  color: var(--text-2);
  margin-top: 8px;
}

/* ---- Besoins ---- */
.needs-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.88rem;
}

.needs-row:last-child { border-bottom: none; }

.needs-row.accent b { color: var(--c-accent-dark); font-size: 1rem; }

/* ---- Profil ---- */
.profile-hero { display: flex; align-items: center; gap: 15px; }

.avatar {
  width: 58px;
  height: 58px;
  border-radius: 20px;
  background: var(--grad-hero);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  font-weight: 800;
  flex-shrink: 0;
  box-shadow: 0 6px 16px rgba(47, 163, 107, 0.35);
}

.key-status { font-size: 0.8rem; font-weight: 700; color: var(--c-over); margin: 6px 0 2px; }

.key-status.ok { color: var(--c-accent-dark); }

/* ---- Navigation basse flottante ---- */
#bottomnav {
  position: fixed;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 24px);
  max-width: 456px;
  height: 66px;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 24px;
  box-shadow: 0 10px 34px rgba(23, 37, 31, 0.16);
  display: flex;
  padding: 6px;
  gap: 2px;
  z-index: 40;
}

.nav-btn {
  flex: 1;
  border: none;
  background: transparent;
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: #93a29a;
  font-size: 0.64rem;
  font-weight: 700;
  font-family: inherit;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: color 0.18s, background 0.18s;
}

.nav-btn svg { width: 23px; height: 23px; transition: transform 0.18s; }

.nav-btn.on {
  color: var(--c-accent-dark);
  background: var(--c-accent-soft);
}

.nav-btn.on svg { transform: translateY(-1px); }

.nav-btn:hover { color: var(--c-accent-dark); }

@media (min-width: 500px) {
  #main { padding-top: 28px; }
  .overlay { align-items: center; padding: 20px; }
  .modal { border-radius: 28px; max-height: 84vh; }
  .modal-head::before { display: none; }
}