/* Activité sur iPhone (screens/activite/Mobile.js), repris de la maquette validée par Dylan le 27/09/2026 :
   frise de la semaine qu'on fait glisser, chiffres du jour, semaine en barres. */

.week-h { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); margin: 0 4px 8px; font-size: 15px; color: var(--text-2); }
.week-h b { color: var(--text); font-weight: 650; }
.week-h span { font-size: 13px; color: var(--text-3); }

/* Une semaine par écran, aimantée ; la frise déborde jusqu'aux bords de l'écran */
.week-strip {
  display: flex; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
  margin: 0 calc(-1 * var(--gutter));
}
.week-strip::-webkit-scrollbar { display: none; }
.wk { flex: 0 0 100%; scroll-snap-align: center; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; padding: 0 var(--gutter); }
.day {
  border: 0; background: none; border-radius: 16px; padding: 6px 0 8px; display: grid; justify-items: center; gap: 4px;
  color: var(--text); font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.day:disabled { cursor: default; opacity: 0.35; }
.day .d-w { font-size: 12px; font-weight: 650; color: var(--text-3); }
.day .d-n { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 17px; font-weight: 600; transition: background 0.2s var(--ease), color 0.2s var(--ease); }
.day .d-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.day .d-dot.none { visibility: hidden; }
.day.today .d-n { color: var(--accent); }
.day.on .d-n { background: var(--accent-bg); color: #fff; }

/* Chiffres du jour : six cases, trois par ligne ; Close en vert quand il y en a (D15) */
.day-card { display: grid; gap: var(--s-3); }
.day-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ds { background: var(--card-2); border-radius: 14px; padding: 10px 12px; display: grid; gap: 2px; min-width: 0; }
.ds-l { font-size: 12.5px; font-weight: 600; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-v { font-size: 22px; font-weight: 750; }
.ds.pos { background: var(--green-soft); }
.ds.pos .ds-l, .ds.pos .ds-v { color: var(--green); }
.day-card .caption { margin: 0 2px; }

.week-card { margin-top: var(--s-5); }
.week-card .caption { margin: var(--s-2) 2px 0; }
/* Barre du jour choisi mise en avant, les autres en gris (BarChart active) */
.bar-chart.has-active .bar { fill: var(--fill-2); opacity: 1; }
.bar-chart.has-active .bar.on { fill: var(--accent-bg); }
.chart-labels span.on { color: var(--accent); font-weight: 700; }