/* =====================================================================
   Cohérence cardiaque Cap555 - bloc autonome, avec outils/commun/fenetre.css
   Fenêtre couleur lagon.
   ===================================================================== */
.co {
  --of-1: #12526a; --of-2: #0b3542; --of-3: #04161c;
  --of-lueur-haut: rgba(90, 190, 220, .34); --of-lueur-bas: rgba(255, 122, 26, .16);
}
.co-corps { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 1.6rem; align-items: center; }
.co-scene { display: flex; flex-direction: column; align-items: center; gap: .9rem; text-align: center; }
.co-stage {
  position: relative;
  width: min(20rem, 74vw); aspect-ratio: 1;
  border-radius: 50%;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  background: radial-gradient(circle, rgba(159, 216, 232, .08) 0%, rgba(0, 0, 0, .25) 70%);
}
.co-stage:focus-visible { outline: 2px solid var(--of-vert-clair); outline-offset: 6px; }
.co-stage svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.co-piste { fill: none; stroke: #9fd8e8; stroke-width: 1.2; opacity: .4; }
.co-anneaux circle { fill: none; stroke: #9fd8e8; stroke-width: .5; opacity: .18; }
.co-prog { fill: none; stroke: #ff7a1a; stroke-width: 2.6; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; filter: drop-shadow(0 0 2px rgba(255, 122, 26, .9)); }
.co-orbe {
  position: absolute; inset: 16%;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #ffd2a8 0%, #e8893a 38%, #9c3145 75%, #6b1d2b 100%);
  box-shadow: 0 0 50px 12px rgba(255, 140, 60, .32), inset 0 -8px 24px rgba(61, 14, 20, .5);
  transform: scale(.55);
  will-change: transform;
}
.co-label {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  pointer-events: none;
  color: #fff7ee; text-shadow: 0 1px 4px rgba(61, 14, 20, .7);
}
.co-phase { font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 1.55rem; }
.co-compte { font-variant-numeric: tabular-nums; font-size: 1.15rem; }
.co .co-minuteur { font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 1.9rem; font-variant-numeric: tabular-nums; color: var(--of-texte); }
.co-reglages { display: flex; flex-direction: column; gap: 1rem; }
.co .co-rythme {
  align-self: flex-start;
  padding: .25rem .9rem;
  border-radius: 999px;
  font-size: .9rem;
  font-variant-numeric: tabular-nums;
  color: var(--of-vert-clair);
  background: rgba(0, 0, 0, .28);
  border: 1px solid rgba(198, 227, 207, .28);
}
.co.is-running .co-reglages select { opacity: .75; }
@media (max-width: 820px) {
  .co-corps { grid-template-columns: 1fr; gap: 1.2rem; }
}