/* Aurélie Ndjock-Lambert (démo) — styles propres à la page Ressources.
   Chargée après styles.css, uniquement sur ressources.html. Même couche « pages ». */
@layer pages {
/* ===== Ressources ===== */
.guide-block { display: grid; gap: var(--space-7) var(--gutter); }
@media (min-width: 64em) { .guide-block { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } .guide-block__aside { position: sticky; top: calc(var(--header-h) + 2rem); align-self: start; } }
.guide-block__aside { display: grid; gap: var(--space-6); justify-items: center; }
.toc-list { list-style: none; padding: 0; margin: 0; border-block-start: 1px solid var(--color-filet); }
.toc-list li { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: .5rem; padding-block: .75rem; border-block-end: 1px solid var(--color-filet); margin: 0; align-items: baseline; }
.toc-list .roman { font-size: 1.25rem; }
.toc-list strong { font: 500 1.3rem/1.3 var(--font-display); color: var(--color-prune); }
.toc-list .tag { margin-inline-start: .4rem; vertical-align: middle; }
.extract { background: var(--color-creme); border: 1px solid var(--color-filet); border-radius: var(--radius-1); padding: clamp(1.4rem, 4vw, 2.5rem); display: grid; gap: var(--space-4); }
.extract h3 { font-size: clamp(1.7rem, 1.4rem + 1vw, 2.2rem); font-weight: 400; }
.extract h4 { font: 500 var(--fs-eyebrow)/1.3 var(--font-text); letter-spacing: .14em; text-transform: uppercase; color: var(--color-terracotta-texte); margin-block-start: .5rem; }
.extract ol { padding-inline-start: 1.2em; }
.extract .opening { font: italic 400 1.45rem/1.4 var(--font-display); color: var(--color-prune); border-inline-start: 2px solid var(--color-terracotta); padding-inline-start: 1rem; }
.guide-ready { display: grid; gap: var(--space-4); }
.guide-ready h3 { font-size: 1.9rem; }
.feature-article { display: grid; gap: 0; padding: 0; overflow: hidden; }
.feature-article .media { aspect-ratio: 3 / 2; }
.feature-article__body { padding: clamp(1.4rem, 4vw, 2.5rem); display: grid; gap: var(--space-4); align-content: center; }
.feature-article h3 { font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.6rem); font-weight: 400; }
.feature-article__meta { font-size: var(--fs-small); color: var(--color-attenue); display: flex; flex-wrap: wrap; gap: .3rem 1rem; }
@media (min-width: 56em) { .feature-article { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); } .feature-article .media { aspect-ratio: auto; min-block-size: 22rem; } }
.filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-block-end: var(--space-6); }
.filter-btn { display: inline-flex; align-items: center; gap: .45rem; min-block-size: 2.75rem; padding: .45rem 1.1rem; border-radius: var(--radius-pill); border: 1px solid var(--color-attenue); background: var(--color-creme); font-weight: 500; font-size: var(--fs-small); color: var(--color-encre); transition: background-color var(--dur-1), border-color var(--dur-1), color var(--dur-1); }
.filter-btn:hover { border-color: var(--color-prune); }
.filter-btn[aria-pressed="true"] { background: var(--color-prune); border-color: var(--color-prune); color: var(--color-lin); }
.filter-btn .count { font-size: var(--fs-xs); opacity: .8; font-variant-numeric: tabular-nums; }
.notes { display: grid; gap: var(--gutter); }
@media (min-width: 48em) { .notes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 72em) { .notes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.note { display: grid; gap: .75rem; align-content: start; background: var(--color-creme); border: 1px solid var(--color-filet); border-radius: var(--radius-1); padding: clamp(1.25rem, 3vw, 1.75rem); view-transition-class: note; }
.note h3 { font-size: 1.6rem; }
.note p { font-size: var(--fs-small); line-height: 1.65; }
.note__try { font-size: var(--fs-small); padding-block-start: .75rem; border-block-start: 1px solid var(--color-filet); }
.note__try strong { color: var(--color-terracotta-texte); }
.lettre-block { display: grid; gap: var(--space-7) var(--gutter); align-items: start; }
@media (min-width: 64em) { .lettre-block { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); } }
.lettre-block__issues { list-style: none; padding: 0; margin: var(--space-5) 0 0; display: grid; gap: 0; border-block-start: 1px solid var(--color-filet); }
.lettre-block__issues li { margin: 0; padding-block: .8rem; border-block-end: 1px solid var(--color-filet); display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 1rem; font-size: var(--fs-small); }
.lettre-block__issues time { color: var(--color-terracotta-texte); font-weight: 500; }

.notes-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-5); align-items: end; margin-block-end: clamp(2rem, 5vw, 3.5rem); }
.notes-head .section-head { margin-block-end: 0; }
.notes-head__media { inline-size: clamp(6rem, 18vw, 13rem); aspect-ratio: 1; border-radius: var(--radius-arch); }
@media (max-width: 29.99em) { .notes-head { grid-template-columns: minmax(0, 1fr); } .notes-head__media { display: none; } }
}