/* Temps : minuteur, chronomètre, compte à rebours, âge, jours entre deux dates. */
.tp-ecran { display: grid; gap: 16px; justify-items: center; padding: 26px 16px 20px; border-radius: 18px; background: var(--soft); text-align: center; }
.tp-temps { font: 700 clamp(64px, 17vw, 132px)/1 var(--head); letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--ink); }
.tp-ecran[data-etat="fini"] .tp-temps { color: var(--red-deep); animation: tp-bat 1s ease-in-out infinite; }
@keyframes tp-bat { 50% { opacity: .35; } }
.tp-chrono small { font-size: .5em; color: var(--muted); }
.tp-jauge { width: 100%; max-width: 520px; height: 8px; border-radius: 99px; background: rgba(12, 12, 24, .08); overflow: hidden; }
.tp-jauge i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #ff6168, var(--red-deep)); transition: width .25s linear; }
.tp-cmd { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.tp-cmd .btn-red { min-width: 168px; }
.tp-puces { display: flex; flex-wrap: wrap; gap: 8px; }
.tp-puce { height: 42px; padding: 0 14px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px var(--line); font: 600 15px/1 var(--body); color: var(--ink); cursor: pointer; transition: background .2s, box-shadow .2s; }
.tp-puce:hover { box-shadow: 0 0 0 1px rgba(12, 12, 24, .22); }
.tp-puce[aria-pressed="true"] { background: var(--tint); box-shadow: 0 0 0 1.5px rgba(238, 47, 59, .6); color: var(--red-deep); }
.tp-hms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.tp-date { min-width: 0; -webkit-appearance: none; appearance: none; }
.tp-outil .acts { justify-content: space-between; }

/* Plein écran */
.tp-ecran:fullscreen { align-content: center; gap: 4vh; width: 100%; height: 100%; border-radius: 0; background: #fff; }
.tp-ecran:fullscreen .tp-temps { font-size: min(21vw, 46vh); }
.tp-ecran:fullscreen .tp-jauge { max-width: 70vw; height: 12px; }
.tp-ecran:-webkit-full-screen { align-content: center; gap: 4vh; width: 100%; height: 100%; border-radius: 0; background: #fff; }
.tp-ecran:-webkit-full-screen .tp-temps { font-size: min(21vw, 46vh); }

/* Chronomètre : tours */
.tp-tours { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; max-height: 340px; overflow-y: auto; }
.tp-tours li { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 12px; background: var(--soft); font-size: 15px; font-variant-numeric: tabular-nums; color: var(--muted); }
.tp-tours b { font: 700 18px/1.2 var(--head); color: var(--ink); }
.tp-tours span:last-child { text-align: right; }

/* Compte à rebours */
.tp-titre { font: 700 clamp(22px, 4.4vw, 32px)/1.2 var(--head); letter-spacing: -.02em; color: var(--ink); overflow-wrap: anywhere; }
.tp-sens { font-size: 15px; font-weight: 600; color: var(--muted); }
.tp-cases { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; width: 100%; max-width: 560px; }
.tp-cases .res { padding: 14px 6px; text-align: center; }
.tp-cases .res b { display: block; font-size: clamp(26px, 7vw, 46px); line-height: 1.1; font-variant-numeric: tabular-nums; }
.tp-rebours[data-etat="fini"] .tp-sens { color: var(--red-deep); }
.tp-rebours:fullscreen .tp-titre { font-size: min(7vw, 9vh); }
.tp-rebours:fullscreen .tp-cases { max-width: 86vw; gap: 2vw; }
.tp-rebours:fullscreen .tp-cases .res b { font-size: min(11vw, 22vh); }
.tp-rebours:fullscreen .tp-sens, .tp-rebours:fullscreen .tp-quand { font-size: max(16px, 2.2vh); }

/* Âge, écart de dates : les réponses sont des phrases, pas un seul nombre */
.tp-calc .res b { display: block; font-size: 19px; line-height: 1.35; overflow-wrap: anywhere; }
.tp-calc .res-main b { font-size: 25px; }
.calc-in-bloc { display: grid; gap: 12px; }

@media (max-width: 600px) {
  .tp-ecran { padding: 20px 10px 16px; }
  .tp-cmd .btn { height: 46px; padding: 0 16px; }
  .tp-cmd .btn-red { min-width: 140px; }
  .tp-cases { gap: 6px; }
  .tp-cases .res small { font-size: 13px; }
  .tp-calc .res-main b { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .tp-ecran[data-etat="fini"] .tp-temps { animation: none; }
}