/* Horodatage Unix */
.ut { display: flex; flex-direction: column; align-items: center; gap: clamp(12px, 2.2vh, 24px); width: 100%; text-align: center; }
.ut .sentence { text-wrap: balance; }
.ut-in { width: min(15ch, 100%); padding: .12em .4em .1em; border: 0; border-radius: 16px; background: var(--frame); color: var(--white); font-family: var(--f-display); font-size: clamp(40px, 5.6vw, 76px); line-height: 1.15; letter-spacing: .01em; text-align: center; font-variant-numeric: tabular-nums; caret-color: var(--white); transition: background-color .15s, box-shadow .15s; }
.ut-in:hover { background: var(--frame-hi); }
.ut-in:focus { outline: none; box-shadow: 0 0 0 3px var(--white); }
.ut-in::placeholder { color: var(--white); opacity: .4; }
.ut-in.is-bad { box-shadow: inset 0 0 0 3px var(--white); }
.ut-out { display: flex; flex-direction: column; align-items: center; line-height: .9; max-width: 100%; }
.ut-big { font-family: var(--f-display); font-size: calc(clamp(54px, 12.5vw, 190px) * var(--cs, 1)); line-height: .95; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ut[data-mode="ts"] .ut-big { font-size: calc(clamp(48px, 7.5vw, 120px) * var(--cs, 1)); }
.ut-unit { margin-top: .35em; font-size: calc(clamp(18px, 2.2vw, 28px) * var(--cs, 1)); font-weight: 700; }
.ut-detail { margin: 0; font-size: clamp(15px, 1.6vw, 19px); font-weight: 500; opacity: .9; max-width: 900px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ut-detail span { display: block; }
.ut-acts { display: flex; gap: 8px; justify-content: center; }
.ut-act { min-width: 110px; justify-content: center; }

.ut-sm { display: none; }
@media (max-width: 520px) {
  .ut-bar .chip-btn { padding: 0 13px; }
  .ut-bar .ut-lg { display: none; }
  .ut-bar .ut-sm { display: inline; }
  .ut-detail { font-size: 15px; }
}
/* Exemples de code, plus bas dans la page */
.ut-code pre { margin: 0; padding: 16px 20px; border-radius: 16px; background: var(--tint); color: inherit; font-size: 15px; line-height: 1.55; overflow-x: auto; max-width: 100%; }
.ut-code code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace; }
.ut-code h3 + pre { margin-top: 8px; }
.content .ut-code { display: flex; flex-direction: column; gap: 12px; }