/* Nafas · page Comprendre (v2) */

/* sous-navigation collante : pilules façon .tabs */
.subnav { position: sticky; top: var(--header-h); z-index: 40; background: var(--bg); padding-block: var(--space-3); }
.subnav__inner { display: flex; gap: var(--space-2); overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.subnav__inner::-webkit-scrollbar { display: none; }
.subnav a { display: inline-flex; align-items: center; gap: .5rem; height: 2.5rem; padding: 0 1rem; border-radius: var(--radius-pill); border: .125rem solid var(--line); background: var(--surface); font-size: var(--text-sm); font-weight: 700; color: var(--ink-2); white-space: nowrap; transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast); }
.subnav a i { font-style: normal; color: var(--ink-3); }
.subnav a:hover { border-color: var(--ink); color: var(--ink); }
.subnav a[aria-current="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.subnav a[aria-current="true"] i { color: var(--ink-inverse-3); }

/* une section par dépendance : un bloc teinté */
.topic { padding-block: var(--space-4); scroll-margin-top: calc(var(--header-h) + 4.5rem); }
.topic .block { display: grid; gap: var(--space-7); }
.topic__head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); }
.topic__idx { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--surface); font-weight: 800; font-size: var(--text-sm); color: var(--ink); }
.topic__head .ar { font-size: 1.75rem; line-height: 1.2; color: var(--ink); }
.topic h2 { margin-top: var(--space-4); max-width: 12em; }
.topic .lede { margin-top: var(--space-3); color: var(--ink-2); }
.topic__label { font-weight: 700; font-size: var(--text-sm); color: var(--ink-3); margin-bottom: var(--space-3); }
.topic__prose { margin-top: var(--space-6); }
.topic__prose p { max-width: 56ch; color: var(--ink-2); }
.topic__prose p + p { margin-top: var(--space-4); }
.topic__prose .who { font-size: var(--text-sm); font-weight: 600; color: var(--ink-3); }
.topic__faith { display: grid; gap: var(--space-3); align-content: start; }
.topic__faith .verse { padding: var(--space-6) var(--space-5); }
.topic__faith .verse .ar { font-size: clamp(1.5rem, 2.6vw, 2rem); }
.topic__faith .verse__fr { font-size: var(--text-md); }
.topic__note { font-size: var(--text-sm); font-weight: 600; color: var(--ink-2); padding: 0 var(--space-3); }
.topic__cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }

/* clôture */
.closing__cta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }
.closing .img-frame { aspect-ratio: 4 / 3; }