/* ============================================
   PAGES — mise en page propre à chaque écran
   ============================================ */

.app-header { padding: var(--space-6) var(--space-4) 0; }
.app-header .greeting { font-family: var(--font-display); font-size: var(--text-xl); line-height: 1.3; }
.app-header .subgreeting { font-size: var(--text-sm); color: var(--espresso-soft); margin-top: 3px; }

.page { padding: 0 0 96px; max-width: 640px; margin: 0 auto; display: none; }
.page.active { display: block; animation: fadeIn 0.25s var(--ease); }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

.section-title {
  font-size: var(--text-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--espresso-soft); margin: var(--space-5) var(--space-4) var(--space-3);
}

/* --- Accueil --- */
.carousel { display: flex; gap: var(--space-3); overflow-x: auto; padding: var(--space-3) var(--space-4) var(--space-2); scroll-snap-type: x proximity; }
.carousel .photo-card { scroll-snap-align: start; }
#activity-list, #mini-stats { padding: 0 var(--space-4); }

/* --- Mes objectifs --- */
.objectifs-toolbar { display: flex; justify-content: space-between; align-items: center; padding: var(--space-5) var(--space-4) 0; }
.objectifs-toolbar h1 { font-family: var(--font-display); font-size: var(--text-xl); margin: 0; }
.btn-icon-add {
  width: 40px; height: 40px; border-radius: 50%; background: var(--terracotta); color: white;
  border: none; font-size: 20px; display: flex; align-items: center; justify-content: center;
}
.objectifs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); padding: var(--space-4); }

/* --- Détail --- */
#page-detail.page { padding-bottom: 40px; }

/* --- Historique --- */
.historique-header { padding: var(--space-5) var(--space-4) 0; }
.historique-header h1 { font-family: var(--font-display); font-size: var(--text-xl); margin: 0; }
.filters-row { display: flex; gap: var(--space-2); overflow-x: auto; margin: var(--space-4) 0; padding: 0 var(--space-4) 2px; }
.month-group { padding: 0 var(--space-4); }
.month-label { font-size: var(--text-xs); font-weight: 700; color: var(--espresso-soft); text-transform: uppercase; margin: var(--space-4) 0 var(--space-2); }
.versement-row {
  display: flex; justify-content: space-between; align-items: center;
  background: white; border-radius: var(--radius-md); padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-2); box-shadow: var(--shadow-card);
}
.versement-row .v-left { display: flex; flex-direction: column; }
.versement-row .v-objectif { font-weight: 700; font-size: var(--text-sm); }
.versement-row .v-date { font-size: var(--text-xs); color: var(--espresso-soft); }
.versement-row .v-montant { font-family: var(--font-display); font-size: var(--text-lg); color: var(--sage); }

/* --- Statistiques --- */
.stats-header { padding: var(--space-5) var(--space-4) 0; }
.stats-header h1 { font-family: var(--font-display); font-size: var(--text-xl); margin: 0; }
.stat-cards-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); padding: var(--space-4); }
.stat-card { background: white; border-radius: var(--radius-md); padding: var(--space-4); box-shadow: var(--shadow-card); }
.stat-card .stat-label { font-size: var(--text-xs); color: var(--espresso-soft); font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; }
.stat-card .stat-value { font-family: var(--font-display); font-size: var(--text-xl); margin-top: 3px; font-variant-numeric: tabular-nums; }
.trend-bars { display: flex; align-items: flex-end; gap: var(--space-2); height: 100px; padding: var(--space-4); background: white; border-radius: var(--radius-md); margin: 0 var(--space-4); box-shadow: var(--shadow-card); }
.trend-bars .t-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; }
.trend-bars .t-bar { width: 70%; background: linear-gradient(180deg, var(--gold), var(--terracotta)); border-radius: 5px 5px 0 0; min-height: 4px; }
.trend-bars .t-label { font-size: 9px; color: var(--espresso-soft); }

/* --- Paramètres --- */
.settings-header { padding: var(--space-5) var(--space-4) 0; }
.settings-header h1 { font-family: var(--font-display); font-size: var(--text-xl); margin: 0; }
.settings-group { background: white; border-radius: var(--radius-md); overflow: hidden; margin: var(--space-4); box-shadow: var(--shadow-card); }
.settings-row { display: flex; justify-content: space-between; align-items: center; padding: var(--space-4); border-bottom: 1px solid var(--cream-deep); font-size: var(--text-sm); }
.settings-row:last-child { border-bottom: none; }
.settings-row .settings-label { font-weight: 700; }
.settings-row .settings-value { color: var(--espresso-soft); font-size: var(--text-xs); }

.empty-state { text-align: center; padding: var(--space-7) var(--space-4); color: var(--espresso-soft); }
.empty-state .empty-emoji { font-size: 40px; margin-bottom: var(--space-3); }

@media (min-width: 720px) {
  .page { max-width: 720px; }
  .objectifs-grid { grid-template-columns: repeat(3, 1fr); }
}