/* Aurélie Ndjock-Lambert (démo) — styles propres à l'article.
   Chargée après styles.css, uniquement sur article-feedback-interculturel.html. Même couche « pages ». */
@layer pages {
/* ===== Article ===== */
.article-head { padding-block: clamp(2.5rem, 6vw, 4.5rem) var(--space-6); }
.article-head__inner { display: grid; gap: var(--space-5); max-inline-size: 52rem; }
.article-head h1 { font-size: clamp(2.5rem, 1.6rem + 3.8vw, 4.8rem); }
.article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; color: var(--color-attenue); font-size: var(--fs-small); }
.article-meta .avatar-img { inline-size: 2.5rem; block-size: 2.5rem; border-radius: 50%; object-fit: cover; }
.article-hero { inline-size: min(100% - 2rem, 60rem); margin-inline: auto; }
.article-hero .media { aspect-ratio: 3 / 2; border-radius: var(--radius-1); }
.article-layout { display: grid; gap: var(--space-7) var(--gutter); padding-block: var(--space-8) var(--space-section); }
@media (min-width: 64em) { .article-layout { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); } .article-toc { position: sticky; top: calc(var(--header-h) + 2rem); align-self: start; } }
.article-toc h2 { font: 500 var(--fs-eyebrow)/1.3 var(--font-text); letter-spacing: .14em; text-transform: uppercase; color: var(--color-terracotta-texte); margin-block-end: var(--space-3); }
.article-toc ol { list-style: none; padding: 0; margin: 0; border-inline-start: 1px solid var(--color-filet); }
.article-toc li { margin: 0; }
.article-toc a { display: block; padding: .45rem 0 .45rem 1rem; font-size: var(--fs-small); color: var(--color-encre); text-decoration: none; line-height: 1.4; border-inline-start: 2px solid transparent; margin-inline-start: -1px; }
.article-toc a:hover { color: var(--color-prune); border-color: var(--color-terracotta-texte); }
.article-body { font-size: clamp(1.0625rem, 1rem + .25vw, 1.1875rem); }
.article-body .prose > p:first-child { font-size: var(--fs-lead); font-weight: 300; }
.tryit { margin-block: var(--space-6); padding: clamp(1.4rem, 4vw, 2.25rem); background: var(--color-sauge-pale); border-radius: var(--radius-1); border-inline-start: 3px solid var(--color-sauge-texte); }
.tryit h2, .tryit h3 { font-size: 1.7rem; margin-block: 0 .5rem !important; color: var(--color-sauge-texte); }
.tryit ol { margin-block-start: .5rem; }
.pullquote { font: italic 400 clamp(1.5rem, 1.25rem + 1vw, 2.1rem)/1.3 var(--font-display); color: var(--color-prune); padding-block: var(--space-4); border-block: 1px solid var(--color-filet); }
.author-box { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-4); align-items: center; padding: var(--space-5); border: 1px solid var(--color-filet); border-radius: var(--radius-1); background: var(--color-creme); }
.author-box img { inline-size: 4.5rem; block-size: 4.5rem; border-radius: 50%; object-fit: cover; }
.author-box strong { font: 500 1.35rem/1.2 var(--font-display); color: var(--color-prune); display: block; }
.article-end { display: grid; gap: var(--gutter); margin-block-start: var(--space-7); }
@media (min-width: 48em) { .article-end { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.read-progress { display: none; }
@supports (animation-timeline: scroll()) {
@media (prefers-reduced-motion: no-preference) {
.read-progress { display: block; position: fixed; inset-block-start: 0; inset-inline: 0; block-size: 3px; background: var(--color-terracotta-texte); transform-origin: 0 50%; transform: scaleX(0); z-index: 60; animation: grow-x linear both; animation-timeline: scroll(root block); }
}
}
@keyframes grow-x { to { transform: scaleX(1); } }

}