/* Nafas · page Article (v2) */

.article-head { padding-block: var(--space-8) var(--space-6); text-align: center; }
.article-head .chips { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); }
.article-head h1 { font-size: var(--text-3xl); margin-block: var(--space-5) var(--space-4); }
.article-head .lede { margin-inline: auto; max-width: 32em; }
.byline { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) var(--space-5); margin-top: var(--space-5); font-size: var(--text-sm); font-weight: 600; color: var(--ink-3); }
.byline strong { font-weight: 700; color: var(--ink); }
.article-fig { margin-top: var(--space-7); }
.article-fig .img-frame { border-radius: var(--radius-lg); }
.article-fig figcaption { text-align: center; margin-top: var(--space-3); font-weight: 600; }

.article-body { padding-block: var(--space-6) var(--space-8); }
.prose { position: relative; font-size: var(--text-md); line-height: 1.6; color: var(--ink-2); }
.prose p { max-width: 62ch; }
.prose p + p { margin-top: var(--space-5); }
.prose h2 { font-size: var(--text-xl); margin-top: var(--space-8); margin-bottom: var(--space-4); max-width: 20em; }

/* ouverture : citation arabe dans une carte */
.drop { text-align: center; padding: var(--space-6) var(--space-5); border-radius: var(--radius-md); background: var(--surface); font-size: clamp(1.9rem, 4vw, 2.6rem); line-height: 1.6; color: var(--ink); margin-bottom: var(--space-7); }
.drop small { display: block; direction: ltr; font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 700; color: var(--ink-3); line-height: 1.4; margin-top: var(--space-3); }

/* verset en exergue */
.prose .verse { margin-block: var(--space-8); }

/* note de marge : carte colorée */
.sidenote { margin-block: var(--space-7); padding: var(--space-6); background: var(--blue-soft); border-radius: var(--radius-md); font-size: var(--text-base); line-height: 1.5; }
.sidenote .eyebrow { display: block; margin-bottom: var(--space-2); color: var(--blue-deep); }
.sidenote h3 { font-size: var(--text-lg); margin-bottom: var(--space-3); }
.sidenote li { position: relative; padding-left: 1.4rem; color: var(--ink-2); font-weight: 500; }
.sidenote li + li { margin-top: .6rem; }
.sidenote li::before { content: ''; position: absolute; left: 0; top: .5em; width: .6rem; height: .6rem; border-radius: 50%; background: var(--blue); }
.sidenote .btn { margin-top: var(--space-4); }
@media (min-width: 1240px) {
  .sidenote { float: right; width: 18rem; margin: .35rem calc(-18rem - var(--space-7)) var(--space-5) var(--space-5); }
}

/* fin d’article */
.article-end { margin-top: var(--space-8); padding: var(--space-6); border-radius: var(--radius-md); background: var(--sun-soft); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.article-end p { flex-basis: 100%; margin-bottom: var(--space-2); color: var(--ink-2); font-weight: 600; }

/* lire aussi */
.more .card h3 { font-size: var(--text-lg); }
.more .card__foot { font-weight: 700; font-size: var(--text-sm); color: var(--ink-3); }
.more .card__foot svg { width: 1.1rem; height: 1.1rem; color: var(--ink); }