/* Respiration guidée */
.br { display: flex; flex-direction: column; align-items: center; gap: clamp(8px, 1.6vh, 18px); text-align: center; width: 100%; }
.br-status { min-height: 1.4em; font-weight: 700; }
.br-stage { --d: calc(min(34vh, 74vw, 400px) * var(--cs, 1)); position: relative; width: var(--d); height: var(--d); display: grid; place-items: center; flex: none; }
.br-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--frame-hi); }
.br-ring::after { content: ""; position: absolute; inset: calc(25% - 2px); border-radius: 50%; border: 2px solid var(--frame); }
.br-circle { position: absolute; inset: 0; border-radius: 50%; background: var(--white); transform: scale(1); will-change: transform; }
.br[data-state="idle"] .br-circle, .br[data-state="done"] .br-circle { transition: transform .9s var(--ease); }
.br-text { position: relative; display: flex; flex-direction: column; align-items: center; gap: .1em; color: var(--bg); width: calc(var(--d) * .76); }
.br-label { position: relative; display: block; width: 100%; height: 1.3em; overflow: hidden; font-weight: 700; font-size: calc(var(--d) * .068); line-height: 1.3; white-space: nowrap; }
.br-label span { position: absolute; inset: 0; }
.br-label .in { animation: brIn .5s cubic-bezier(.2, .8, .2, 1) both; }
.br-label .out { animation: brOut .5s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes brIn { from { transform: translateY(100%); } }
@keyframes brOut { to { transform: translateY(-100%); } }
.br-count { font-family: var(--f-display); font-size: calc(var(--d) * .2); line-height: 1; font-variant-numeric: tabular-nums; }
.br[data-phase="idle"] .br-count { font-size: calc(var(--d) * .1); white-space: nowrap; }
.br[data-phase="idle"] .br-label { font-size: calc(var(--d) * .05); }
.br-sentence { text-wrap: balance; }
.br[data-state="run"] .br-sentence .iw, .br[data-state="pause"] .br-sentence .iw { pointer-events: none; opacity: .6; }
.br-bar .chip-btn { padding: 0 18px; }
/* Mode concentré : seule la respiration reste à l'écran */
.hero--breathing .br-sentence, .hero--breathing .br-actions, .hero--breathing .br-status { transition: opacity .6s ease; }
.hero--breathing.live-idle .br-sentence, .hero--breathing.live-idle .br-actions { opacity: 0; pointer-events: none; }
.hero.is-fs .br-sentence { display: none; }
@media (max-width: 720px) { .br-stage { --d: calc(min(40vh, 78vw, 340px) * var(--cs, 1)); } }
@media (max-width: 520px) { .br-bar .chip-btn { padding: 0 12px; } }