/* Propriété de l'agent HOME (vue Accueil). */

.home-wrap {
  padding-top: var(--sp-5);
  padding-bottom: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.home-section-title {
  font-size: var(--text-md);
  font-weight: 700;
  margin: var(--sp-2) 0 calc(var(--sp-2) * -1);
}

.home-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-6);
}
.home-streak {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-width: 0;
}
.home-streak-ic { color: var(--text3); flex-shrink: 0; }
.home-streak-ic.is-on { color: var(--amber); }
.home-streak-value { font-weight: 800; font-size: var(--text-lg); }
.home-streak-label { color: var(--text3); font-size: var(--text-xs); }

.home-goal-msg { margin-top: var(--sp-2); }


/* À 390 px, quatre tuiles en ligne font 78 px : les libellés passaient sur deux lignes et la
   rangée se désalignait. */
.home-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
@media (min-width: 460px) { .home-tiles { grid-template-columns: repeat(4, 1fr); } }

.home-order { display: flex; flex-direction: column; gap: var(--sp-3); }
.home-order .home-goal-msg { margin-top: 0; }
.home-order-due {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-base);
  color: var(--amber);
  font-weight: 600;
}
.home-order-due .icon { flex-shrink: 0; }

.home-cta-main { width: 100%; }
.home-cta-secondary { display: flex; gap: var(--sp-3); }
.home-cta-secondary .btn { flex: 1; }

.home-weak-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.home-weak-title {
  font-size: var(--text-xs);
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.home-weak-chapter { font-weight: 700; }
.home-weak-head .badge { margin-left: auto; flex-shrink: 0; }

.home-heatmap-card .heatmap { margin-top: var(--sp-3); }

.home-chapters {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--sp-3);
}

@media (max-width: 480px) {
  .home-hero { flex-direction: column; text-align: center; }
  .home-streak { justify-content: center; }
}