/* Hallmark · macrostructure: Index-First · theme: Newsprint · genre: editorial
 * audience: lecteurs généralistes · use: parcourir les titres · tone: éditorial
 * nav: N6 · footer: Ft2 · critique: P4 H5 E4 S5 R5 V4
 * honest: pass · tokens: pass · responsive: pass (34, 49–52) · contrast: pass (40–41)
 */
@import url("tokens.css");

html, body { overflow-x: clip; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-body); line-height: 1.55; }
a { color: inherit; text-decoration: none; }
button, input { color: inherit; font: inherit; }
.demo-note { padding: .48rem 1rem; background: var(--color-accent); color: var(--color-accent-ink); text-align: center; font: 500 .68rem var(--font-mono); letter-spacing: .08em; }
.masthead { max-width: 1160px; margin: 0 auto; padding: 1.35rem 2rem 0; text-align: center; }
.edition { display: flex; justify-content: space-between; gap: 1rem; border-bottom: var(--rule-hairline); padding-bottom: .7rem; color: var(--color-muted); font: 500 .67rem var(--font-mono); letter-spacing: .075em; }
.wordmark { display: inline-block; margin-top: .4rem; font: 600 clamp(2.65rem, 6vw, 4.45rem)/1 var(--font-display); letter-spacing: -.055em; }
.wordmark span { color: var(--color-accent); }
.tagline { margin: .25rem 0 1.15rem; color: var(--color-muted); font: 500 .82rem var(--font-mono); letter-spacing: .04em; }
.categories { display: flex; justify-content: center; gap: clamp(1.15rem, 4vw, 3.3rem); border-top: 3px double var(--color-ink); border-bottom: 3px double var(--color-ink); padding: .72rem .3rem; }
.categories a { position: relative; white-space: nowrap; font-size: .84rem; font-weight: 600; }
.categories a::after { position: absolute; right: 0; bottom: -.24rem; left: 0; height: 2px; background: var(--color-accent); content: ""; transform: scaleX(0); transform-origin: left; transition: transform var(--dur-fast) var(--ease-standard); }
.categories a:hover::after, .categories a.active::after { transform: scaleX(1); }
main { max-width: 1100px; margin: 0 auto; padding: 0 2rem; }
.topline { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: 1.25rem 0; border-bottom: var(--rule-hairline); }
.topline p { margin: 0; color: var(--color-muted); font: 500 .81rem var(--font-mono); }
.search { display: flex; align-items: center; gap: .5rem; width: min(270px, 48%); min-height: 42px; padding: 0 .8rem; border: 1px solid var(--color-rule); border-radius: var(--radius-small); background: var(--color-surface); outline: 2px solid transparent; }
.search:focus-within { border-color: var(--color-accent); outline: 2px solid var(--color-accent); outline-offset: 1px; }
.search-icon { color: var(--color-accent); font-size: 1.3rem; line-height: 1; }
.search input { width: 100%; border: 0; background: transparent; outline: 0; font-size: .82rem; }
.search input::placeholder { color: var(--color-muted); }
.lead-story { display: grid; grid-template-columns: minmax(0, 1.03fr) minmax(0, .97fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; padding: 2.8rem 0 3.2rem; border-bottom: var(--rule-hairline); }
.lead-copy { max-width: 510px; }
.kicker { display: flex; align-items: center; gap: .55rem; color: var(--color-accent); font: 500 .7rem var(--font-mono); letter-spacing: .035em; }
.kicker i { width: 7px; height: 7px; border-radius: 50%; background: var(--color-accent); }
.kicker span { color: var(--color-muted); }
h1 { max-width: 12ch; margin: 1rem 0 .85rem; font: 600 var(--text-display)/1.07 var(--font-display); letter-spacing: -.035em; overflow-wrap: anywhere; min-width: 0; }
.summary { max-width: 48ch; margin: 0; color: #555852; font-size: .98rem; }
.read-link { display: inline-flex; align-items: center; gap: .7rem; margin-top: 1.35rem; padding-bottom: .2rem; border-bottom: 1px solid var(--color-accent); color: var(--color-accent); font-size: .83rem; font-weight: 700; white-space: nowrap; }
.read-link span { transition: transform var(--dur-fast) var(--ease-standard); }
.read-link:hover span { transform: translate(2px, -2px); }
.lead-art { position: relative; display: block; min-height: 290px; aspect-ratio: 1.38; overflow: hidden; background: var(--color-illustration); }
.lead-art::before { position: absolute; inset: 0; background: linear-gradient(140deg, transparent 55%, #adbda9 55.3%); content: ""; }
.sun { position: absolute; top: 13%; right: 15%; width: 75px; aspect-ratio: 1; border-radius: 50%; background: #e7b873; }
.building { position: absolute; bottom: 22%; background: #f0e8d8; }
.building-back { left: 8%; width: 33%; height: 36%; clip-path: polygon(0 18%, 53% 0, 100% 16%, 100% 100%, 0 100%); }
.building-front { right: 9%; bottom: 17%; width: 38%; height: 50%; background: #bd7860; clip-path: polygon(0 15%, 50% 0, 100% 14%, 100% 100%, 0 100%); }
.tree { position: absolute; bottom: 20%; z-index: 2; color: #57735e; font-size: 5rem; line-height: 1; }
.tree-one { left: 13%; }.tree-two { right: 31%; bottom: 18%; font-size: 4rem; }
.bench { position: absolute; z-index: 3; bottom: 19%; left: 37%; width: 18%; height: 4px; background: #5b5548; box-shadow: 3px 10px 0 -1px #5b5548, 30px 10px 0 -1px #5b5548; }
.art-caption { position: absolute; right: .65rem; bottom: .55rem; color: #38483b; font: 500 .58rem var(--font-mono); letter-spacing: .04em; }
.news-section { padding: 1.9rem 0 2.7rem; }
.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-bottom: .7rem; border-bottom: 2px solid var(--color-ink); }
.section-head h2 { margin: 0; font: 600 1.75rem/1.2 var(--font-display); letter-spacing: -.02em; }
.section-head span { color: var(--color-muted); font: 500 .67rem var(--font-mono); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.news-row { display: grid; grid-template-columns: 115px minmax(0, 1fr) 38px; gap: 1.5rem; align-items: start; padding: 1.3rem 0; border-bottom: var(--rule-hairline); }
.row-meta { display: flex; flex-direction: column; gap: .35rem; padding-top: .2rem; color: var(--color-muted); font: 400 .68rem var(--font-mono); }
.category-tag { color: var(--color-accent); font-weight: 500; }
.row-content h3 { margin: 0; font: 600 1.2rem/1.3 var(--font-display); }
.row-content h3 a:hover { color: var(--color-accent); }
.row-content p { margin: .35rem 0 0; color: var(--color-muted); font-size: .82rem; }
.save { width: 36px; height: 36px; border: 1px solid var(--color-rule); border-radius: 50%; background: transparent; color: var(--color-accent); cursor: pointer; font-size: 1.2rem; transition: color var(--dur-fast), background var(--dur-fast), border-color var(--dur-fast); }
.save:hover, .save[aria-pressed="true"] { border-color: var(--color-accent); background: var(--color-accent); color: var(--color-accent-ink); }
.save:focus-visible, a:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.empty-state { padding: 2rem 0; color: var(--color-muted); text-align: center; }
footer { display: flex; justify-content: space-between; align-items: center; gap: 1rem; max-width: 1100px; margin: 0 auto; padding: 1.15rem 2rem; border-top: 3px double var(--color-ink); color: var(--color-muted); font-size: .72rem; }
.footer-mark { color: var(--color-ink); font: 600 1.3rem var(--font-display); }
footer a:last-child { color: var(--color-accent); white-space: nowrap; }
[hidden] { display: none !important; }

@media (max-width: 640px) {
  .masthead { padding: 1rem 1rem 0; }
  .edition { font-size: .56rem; }
  .categories { justify-content: flex-start; gap: 1.35rem; overflow-x: auto; }
  main { padding: 0 1rem; }
  .topline { align-items: flex-start; flex-direction: column; gap: .8rem; }
  .search { width: auto; align-self: stretch; }
  .lead-story { grid-template-columns: minmax(0, 1fr); gap: 1.35rem; padding: 2rem 0; }
  .lead-art { min-height: 220px; }
  .news-row { grid-template-columns: minmax(0, 1fr) 36px; gap: .4rem 1rem; padding: 1.05rem 0; }
  .row-meta { grid-column: 1; grid-row: 1; flex-direction: row; gap: .65rem; }
  .row-content { grid-column: 1; grid-row: 2; }
  .save { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  footer { align-items: flex-start; flex-wrap: wrap; padding: 1rem; }
  footer span { order: 3; width: 100%; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; } }