/* 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; }
.day-stats.q7 { grid-template-columns: repeat(12, minmax(0, 1fr)); } /* chiffres du jour : 4, puis 3 */
.day-stats.q7 > * { grid-column: span 3; }
.day-stats.q7 > :nth-child(n+5) { grid-column: span 4; }
.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; }

/* ---- Bilan du jour en tête de la saisie détaillée (maquette validée le 29/09/2026, CloseBilan.js) ---- */
.clb { display: flex; align-items: center; gap: 12px; margin-top: var(--s-4); padding: 12px; border-radius: 16px; background: var(--card-2); }
.day-panel .clb { margin-top: 4px; background: var(--card); border: 1px solid var(--line); }
.clb-ring { position: relative; width: 58px; height: 58px; flex: none; }
.clb-ring svg { display: block; width: 58px; height: 58px; transform: rotate(-90deg); } /* seul le cercle tourne, jamais le chiffre */
.clb-ring circle { fill: none; stroke-width: 6; }
.clb-ring .t { stroke: var(--green-soft); }
.clb-ring .v { stroke: var(--green); stroke-linecap: round; transition: stroke-dashoffset 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
.clb-ring .v.z { opacity: 0; } /* conversion nulle : pas de point rond au départ de l'anneau */
.clb-n { position: absolute; inset: 0; display: grid; place-items: center; font-size: 21px; font-weight: 800; color: var(--green); font-variant-numeric: tabular-nums; }
.clb-n.pop { animation: clbPop 0.32s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes clbPop { from { transform: scale(1.35); } }
.clb-t { flex: 1; min-width: 0; display: grid; gap: 1px; }
.clb-t b { font-size: 15px; color: var(--green); }
.clb-t span { font-size: 12.5px; color: var(--text-2); }
.clb-b { display: flex; gap: 6px; flex: none; }
.clb .btn-round { width: 36px; min-height: 36px; }
.clb .btn-primary, .clb .btn-primary:hover { background: var(--green); }