/* Calcul des heures travaillées : feuille d'heures de la semaine */
.hc { display: flex; flex-direction: column; align-items: center; gap: clamp(14px, 2.4vh, 26px); width: 100%; text-align: center; }
.hc-sum { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.hc-out { display: flex; flex-direction: column; align-items: center; line-height: .9; }
.hc-big { font-family: var(--f-display); font-size: calc(clamp(72px, 9vw, 150px) * var(--cs, 1)); line-height: .95; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hc-unit { margin-top: .3em; font-size: calc(clamp(19px, 2vw, 26px) * var(--cs, 1)); font-weight: 700; }
.hc-detail { margin: 0; font-size: clamp(16px, 1.6vw, 19px); font-weight: 500; opacity: .92; text-wrap: balance; }
.hc-detail span { display: block; }
.hc-detail span:empty { display: none; }

/* La semaine : une ligne par jour */
.hc-week { display: grid; grid-template-columns: auto auto auto minmax(4.2em, auto); align-items: center; gap: 6px 12px; font-size: 18px; font-weight: 500; }
.hc-day { display: contents; }
.hc-name { grid-column: 1; min-width: 3.4em; min-height: 44px; padding: 0 12px; border: 0; border-radius: 12px; background: var(--white); color: var(--bg); font-weight: 700; font-size: 16px; transition: background-color .15s, color .15s; }
.hc-name[aria-pressed="false"] { background: transparent; color: var(--white); box-shadow: inset 0 0 0 2px var(--frame); }
.hc-name[aria-pressed="false"]:hover { background: var(--frame); }
.hc-times { grid-column: 2; display: inline-flex; align-items: center; gap: 8px; }
.hc-to { opacity: .7; }
.hc-extra { grid-column: 3; display: inline-flex; align-items: center; gap: 4px; }
.hc-off { grid-column: 2 / 4; display: none; justify-self: start; padding-left: 4px; opacity: .7; }
.hc-tot { grid-column: 4; justify-self: end; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hc-tot.bump { animation: bump .28s var(--ease); }
.hc-day.is-off .hc-times, .hc-day.is-off .hc-extra { display: none; }
.hc-day.is-off .hc-off { display: block; }
.hc-week .cyc-btn { font-variant-numeric: tabular-nums; }
.hc-cp { width: 44px; height: 44px; padding: 0; border: 0; border-radius: 12px; background: transparent; color: var(--white); display: inline-flex; align-items: center; justify-content: center; opacity: .75; transition: background-color .15s, opacity .15s; }
.hc-cp:hover { background: var(--frame); opacity: 1; }
.hc-cp svg { width: 19px; height: 19px; }
.hc-set { font-size: clamp(18px, 1.7vw, 22px); line-height: 1.75; max-width: 760px; }
.hc-nw { white-space: nowrap; }
.hc-sm { display: none; }

/* Grand écran : la semaine à gauche, le total et les réglages à droite */
@media (min-width: 1100px) {
  .hc { display: grid; grid-template-columns: auto minmax(0, 520px); grid-template-areas: "week sum" "week set"; align-items: center; justify-content: center; column-gap: clamp(48px, 5vw, 96px); row-gap: 18px; }
  .hc-sum { grid-area: sum; align-self: end; }
  .hc-week { grid-area: week; }
  .hc-set { grid-area: set; align-self: start; }
}

/* Téléphone : chaque jour sur deux lignes, le total à droite */
@media (max-width: 620px) {
  .hc-week { display: flex; flex-direction: column; align-self: stretch; align-items: stretch; gap: 10px; font-size: 16px; }
  .hc-day { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "n t tot" "n x tot"; align-items: center; gap: 4px 10px; padding-bottom: 10px; border-bottom: 1.5px solid var(--frame); text-align: left; }
  .hc-day:last-child { border-bottom: 0; padding-bottom: 0; }
  .hc-day.is-off { grid-template-areas: "n o tot"; }
  .hc-name { grid-area: n; align-self: start; min-width: 3.2em; padding: 0 8px; font-size: 15px; }
  .hc-times { grid-area: t; gap: 6px; }
  .hc-extra { grid-area: x; }
  .hc-off { grid-area: o; }
  .hc-tot { grid-area: tot; font-size: 17px; }
  .hc-day.is-off .hc-tot { display: none; }
  .hc-week .cyc-btn { padding: .12em .4em .14em; }
  .hc-set { font-size: 18px; }
}
@media (max-width: 520px) { .hc-bar .chip-btn { padding: 0 13px; } .hc-bar .hc-lg { display: none; } .hc-bar .hc-sm { display: inline; } }