/* Nafas · page Accompagnement (v2) */
.hero__grid .hero__media .img-frame { aspect-ratio: 5 / 4; }
@media (max-width: 900px) { .hero__grid .hero__media .img-frame { aspect-ratio: 16 / 10; } }

/* four steps */
.steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .steps--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 800px) { .steps--4 { grid-template-columns: 1fr; } }

/* three channels */
.ways .card { display: flex; flex-direction: column; }
.ways .card .chip { align-self: flex-start; margin-bottom: var(--space-4); }
.ways .card__foot { margin-top: auto; padding-top: var(--space-5); }
.ways .card__foot .muted { font-weight: 700; }

/* breathing exercise (white circle on the blue gradient) */
.breathe { display: grid; place-items: center; gap: var(--space-4); min-height: 22rem; --breathe-dur: 1s; }
.breathe__ring { position: relative; width: 12rem; height: 12rem; display: grid; place-items: center; }
.breathe__circle { position: absolute; inset: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); transform: scale(.68); transition: transform var(--breathe-dur) var(--ease-in-out), background var(--dur-base); }
.breathe.is-in .breathe__circle, .breathe.is-hold .breathe__circle { transform: scale(1.32); }
.breathe.is-out .breathe__circle { transform: scale(.68); }
.breathe__inner { position: relative; text-align: center; }
.breathe__label { font-weight: 800; letter-spacing: -.02em; font-size: var(--text-xl); line-height: 1.1; color: var(--ink); }
.breathe__count { font-size: 1.5rem; line-height: 1; color: var(--blue); min-height: 1.5rem; margin-top: var(--space-2); }
.breathe__cycle { text-align: center; font-weight: 700; font-size: var(--text-sm); color: var(--ink-inverse-2); }
@media (prefers-reduced-motion: reduce) {
  .breathe__circle { transition: background var(--dur-base); transform: scale(1) !important; background: rgba(255, 255, 255, .55); }
  .breathe.is-in .breathe__circle, .breathe.is-hold .breathe__circle { background: rgba(255, 255, 255, .95); }
  .breathe.is-out .breathe__circle { background: rgba(255, 255, 255, .55); }
}

/* orientation form */
.orient-form { display: grid; gap: var(--space-5); }
.orient-form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.orient-form legend { font-size: var(--text-sm); font-weight: 700; color: var(--ink); padding: 0; margin-bottom: .4rem; }
.orient-form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); padding-top: var(--space-2); }
@media (max-width: 600px) { .orient-form__foot .btn { width: 100%; } }