/* Minuteur fractionné */
.hero--interval { --iv-a: var(--white); --iv-b: var(--bg); }
.iv { display: flex; flex-direction: column; align-items: center; gap: clamp(8px, 1.8vh, 18px); text-align: center; width: 100%; }
.iv-status { min-height: 1.4em; font-weight: 700; }
.iv-time { font-family: var(--f-display); font-size: calc(clamp(96px, min(17vw, 25vh), 250px) * var(--cs, 1)); line-height: .95; font-variant-numeric: tabular-nums; white-space: nowrap; }
.iv-time > .stack { padding: .02em 0; }
.iv.iv-flip .iv-time > .stack { animation: ivSlide .45s var(--ease) both; }
@keyframes ivSlide { from { transform: translateX(14%); } }
.iv-sub { margin: 0; min-height: 1.5em; font-size: clamp(17px, 1.8vw, 21px); font-weight: 700; }
.iv-sentence { margin-top: clamp(4px, 1.4vh, 14px); text-wrap: balance; }
.iv-sentence .iv-dur { width: 3.6em; }
.iv[data-state="run"] .iv-sentence .iw, .iv[data-state="pause"] .iv-sentence .iw { pointer-events: none; }
.iv-actions { margin-top: 0; }
.iv-bar .chip-btn { padding: 0 18px; }
@media (max-width: 520px) { .iv-bar .iv-p-h4020 { display: none; } .iv-bar .chip-btn { padding: 0 14px; } }

/* Repos : fond blanc, texte couleur. Un rideau blanc monte, les couleurs s'échangent sur le contenu. */
.iv-curtain { position: absolute; inset: 0; z-index: -1; background: var(--iv-a); clip-path: inset(100% 0 0 0); transition: clip-path .55s var(--swift); pointer-events: none; }
.hero--interval.iv-rest .iv-curtain { clip-path: inset(0 0 0 0); }
.hero--interval .tool, .hero--interval .fs-bar { transition: --bg .45s ease, --white .45s ease, --frame .45s ease, --frame-hi .45s ease, color .45s ease; }
.hero--interval .top, .hero--interval .scroll-down { transition: opacity .6s ease, transform .2s var(--ease), --white .45s ease, --frame .45s ease, --frame-hi .45s ease, color .45s ease; }
.hero--interval.iv-rest .tool, .hero--interval.iv-rest .top, .hero--interval.iv-rest .fs-bar, .hero--interval.iv-rest .scroll-down {
  --bg: var(--iv-a); --white: var(--iv-b);
  --frame: color-mix(in srgb, var(--iv-b) 13%, transparent); --frame-hi: color-mix(in srgb, var(--iv-b) 22%, transparent);
  color: var(--white);
}

/* Mode concentré : la phrase et les boutons s'effacent après quelques secondes, un toucher les ramène. */
.hero--interval .iv-sentence, .hero--interval .iv-actions { transition: opacity .6s ease; }
.hero--interval.live-idle .iv-sentence, .hero--interval.live-idle .iv-actions { opacity: 0; pointer-events: none; }
.hero.is-fs .iv-sentence { display: none; }
@media (max-width: 720px) {
  .iv-time { font-size: calc(clamp(88px, 26vw, 130px) * var(--cs, 1)); }
}