/* ============================================
   COMPONENTS — éléments d'interface réutilisables
   (cartes, boutons, pills, champs, habitudes, mood...)
   ============================================ */

/* ---------- Typography helpers ---------- */
.h-serif { font-family: var(--serif); color: var(--ink); }
.label-eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-muted);
  margin-bottom: 10px;
}
.muted { color: var(--ink-muted); }
.soft { color: var(--ink-soft); }

/* ---------- Cards ---------- */
.card {
  background: var(--white);
  border: 1px solid var(--cream-dark);
  border-radius: 24px;
  padding: 20px;
  box-shadow: 0 12px 30px -18px rgba(49,41,31,0.18);
}
.card.tight { padding: 16px; }
.card.dark { background: var(--ink); }
.card.clickable { cursor: pointer; }

/* ---------- Buttons ---------- */
.btn-primary {
  width: 100%;
  padding: 14px;
  border-radius: 999px;
  color: var(--white);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}
.btn-ghost {
  padding: 10px 12px;
  border-radius: 16px;
  background: var(--cream);
  border: 1px solid var(--cream-dark);
  font-size: 12px;
  color: var(--ink-soft);
}

/* ---------- Pills ---------- */
.pill-row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.pill {
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 13px;
  white-space: nowrap;
  border: 1px solid var(--cream-dark);
  background: var(--cream);
  color: var(--ink-soft);
  flex-shrink: 0;
}
.pill.active { color: var(--white); border-color: transparent; }

/* ---------- Segmented control ---------- */
.segmented {
  display: flex;
  padding: 4px;
  border-radius: 999px;
  background: var(--cream);
  border: 1px solid var(--cream-dark);
}
.segmented button {
  flex: 1;
  padding: 8px 0;
  border-radius: 999px;
  font-size: 12px;
  color: var(--ink-muted);
}
.segmented button.active {
  background: var(--white);
  color: var(--ink);
  font-weight: 600;
  box-shadow: 0 4px 12px -6px rgba(49,41,31,0.25);
}

/* ---------- Grids ---------- */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }

/* ---------- Level bar ---------- */
.level-bar { width: 100%; height: 6px; border-radius: 999px; background: var(--cream-dark); overflow: hidden; }
.level-bar > div { height: 100%; border-radius: 999px; transition: width 0.5s ease; }

/* ---------- Tip list ---------- */
.tip-list { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.tip-list .tip { display: flex; gap: 10px; }
.tip-list .dot { width: 5px; height: 5px; border-radius: 999px; margin-top: 7px; flex-shrink: 0; }
.tip-list p { margin: 0; font-size: 14px; color: var(--ink-soft); line-height: 1.55; }

/* ---------- Fields / inputs ---------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field span { font-size: 12px; color: var(--ink-muted); }
input[type="date"], input[type="number"], input[type="text"], textarea {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink);
  background: var(--cream);
  border: 1px solid var(--cream-dark);
  border-radius: 12px;
  padding: 10px 12px;
  outline: none;
  width: 100%;
}
textarea { resize: none; }

/* ---------- Habit rows ---------- */
.habit-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 16px;
  background: var(--cream);
  border: 1px solid var(--cream-dark);
  width: 100%;
  text-align: left;
}
.habit-row.done { border-color: var(--accent-deep); }
.habit-checkbox {
  width: 24px; height: 24px; border-radius: 999px;
  border: 1px solid var(--sand);
  background: var(--white);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.habit-row.done .habit-checkbox { background: var(--accent-deep); border-color: var(--accent-deep); }
.habit-row span.label { font-size: 14px; color: var(--ink-soft); }
.habit-row.done span.label { color: var(--ink); text-decoration: line-through; }
.habit-edit-row { display: flex; align-items: center; gap: 8px; }

/* ---------- Icon circle ---------- */
.icon-circle {
  display: flex; align-items: center; justify-content: center;
  border-radius: 999px; flex-shrink: 0;
}

/* ---------- Mood grid ---------- */
.mood-btn {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 0; border-radius: 16px; background: var(--cream); border: 1px solid var(--cream-dark);
}
.mood-btn.active { border-color: var(--accent-deep); background: var(--accent-tint); }
.mood-btn .emoji { font-size: 20px; }
.mood-btn span.label { font-size: 12px; color: var(--ink-muted); }
.mood-btn.active span.label { color: var(--ink); font-weight: 600; }

/* ---------- Utility ---------- */
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }
.mb-2 { margin-bottom: 8px; }
.w-full { width: 100%; }
.text-xs { font-size: 12px; }
.text-sm { font-size: 14px; }
.italic { font-style: italic; }