/* Calculateur d'heures */
.tc { display: flex; flex-direction: column; align-items: center; gap: clamp(12px, 2.2vh, 24px); text-align: center; width: 100%; }
.tc .sentence { text-wrap: balance; }
.tc-add-q { display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: clamp(21px, 2.6vw, 30px); font-weight: 500; }
.tc-list { display: grid; grid-template-columns: 1.7em auto 44px; align-items: center; justify-content: center; gap: 8px 8px; margin: 0; padding: 0; list-style: none; }
.tc-row { display: contents; }
.tc-sign { justify-self: end; }
.tc-sign .cyc-btn { min-width: 1.45em; text-align: center; font-variant-numeric: tabular-nums; }
.tc-row .cyc-btn { font-variant-numeric: tabular-nums; }
.tc-x { 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; }
.tc-x:hover { background: var(--frame); opacity: 1; }
.tc-x svg { width: 18px; height: 18px; }
.tc-list.is-single .tc-x { visibility: hidden; }
.tc-plus { min-height: 44px; padding: 0 16px 0 12px; border: 0; border-radius: 12px; background: transparent; color: var(--white); font-weight: 700; font-size: 16px; display: inline-flex; align-items: center; gap: 6px; box-shadow: inset 0 0 0 2px var(--frame); transition: background-color .15s; }
.tc-plus:hover { background: var(--frame); }
.tc-plus svg { width: 16px; height: 16px; }
.tc-out { display: flex; flex-direction: column; align-items: center; line-height: .9; }
.tc-big { font-family: var(--f-display); font-size: calc(clamp(80px, 12vw, 180px) * var(--cs, 1)); line-height: .95; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tc[data-mode="add"] .tc-big { font-size: calc(clamp(72px, 10vw, 150px) * var(--cs, 1)); }
.tc-unit { margin-top: .3em; font-size: calc(clamp(20px, 2.5vw, 30px) * var(--cs, 1)); font-weight: 700; }
.tc-detail { margin: 0; font-size: clamp(16px, 1.8vw, 20px); font-weight: 500; opacity: .9; max-width: 900px; text-wrap: balance; }
.tc-sm { display: none; }
@media (max-width: 520px) {
  .tc-bar .tc-sm { display: inline; }
  .tc-add-q { font-size: 21px; }
  .tc-bar .bar-sep, .tc-bar [data-tc-clear], .tc-bar [data-tc-now] { display: none; }
  .tc-bar .chip-btn { padding: 0 14px; }
  .tc-bar .tc-lg { display: none; }
}