/* Calculateur de sommeil */
.sl { display: flex; flex-direction: column; align-items: center; gap: clamp(16px, 3vh, 34px); width: 100%; text-align: center; }
.sl .sentence { text-wrap: balance; }
.sl-cards { display: flex; justify-content: center; align-items: stretch; gap: clamp(10px, 1.6vw, 20px); width: 100%; }
.sl-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-width: 0; padding: clamp(14px, 2vh, 22px) clamp(18px, 2.4vw, 34px); border-radius: 22px; background: var(--frame); color: var(--white); text-decoration: none; transition: background-color .15s, transform .15s var(--ease); }
.sl-card:hover { background: var(--frame-hi); transform: translateY(-2px); }
.sl-card:focus-visible { outline: 3px solid var(--white); outline-offset: 3px; }
.sl-t { font-family: var(--f-display); font-weight: 400; font-size: calc(clamp(44px, 6.4vw, 104px) * var(--cs, 1)); line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sl-c { font-size: clamp(15px, 1.4vw, 18px); font-weight: 700; white-space: nowrap; }
.sl-card.is-short .sl-t { opacity: .78; }
.sl-detail { margin: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 18px; font-size: clamp(17px, 1.7vw, 21px); font-weight: 500; }
.sl-nw { white-space: nowrap; }
.sl-alarm { color: var(--white); font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; padding: 10px 2px; }
.sl-alarm:hover { opacity: .85; }
@media (max-width: 720px) {
  .sl-cards { flex-direction: column; max-width: 420px; gap: 8px; }
  .sl-card { flex-direction: row; justify-content: space-between; padding: 10px 18px; border-radius: 18px; }
  .sl-t { font-size: calc(44px * var(--cs, 1)); }
}
.sl-sm { display: none; }
@media (max-width: 520px) { .sl-bar .chip-btn { padding: 0 14px; } .sl-bar .sl-lg { display: none; } .sl-bar .sl-sm { display: inline; } }