@import url("tokens.css");

@font-face { font-family: "Archivo Narrow"; src: url("../fonts/archivo-narrow-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url("../fonts/atkinson-next.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--color-surface);
  color: var(--color-text);
  font: var(--font-weight-regular) var(--text-base) / var(--leading-body) var(--font-body);
}
h1, h2, h3 { font-family: var(--font-heading); font-weight: var(--font-weight-bold); line-height: var(--leading-heading); margin: 0 0 var(--space-4); letter-spacing: -0.01em; text-wrap: balance; }
h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }
p { margin: 0 0 var(--space-4); max-width: var(--measure); }
a { color: var(--color-accent); text-underline-offset: 0.18em; }
:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }

.wrap { max-width: var(--page-max); margin-inline: auto; padding-inline: var(--space-4); }
.skip { position: absolute; left: -999px; }
.skip:focus { left: var(--space-4); top: var(--space-4); background: var(--color-surface); padding: var(--space-2); }

/* Ink band: header + search */
.band { background: var(--color-ink); color: var(--color-on-ink); --color-focus: var(--color-focus-on-ink); }
.band a { color: var(--color-on-ink); }
.topbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-3); padding-block: var(--space-4); border-bottom: var(--border-width) solid oklch(100% 0 0 / 0.15); }
.logo { font-family: var(--font-heading); font-weight: var(--font-weight-bold); font-size: var(--text-lg); text-decoration: none; }
.logo b { color: var(--color-signal); }
.topbar ul { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); list-style: none; margin: 0; padding: 0; font-size: var(--text-sm); }
.topbar ul a { display: inline-block; padding-block: var(--space-2); }
.tag-test { font-size: var(--text-sm); color: var(--color-signal); }

.search-hero { padding-block: var(--space-12) var(--space-16); }
.search-hero h1 { max-width: 18ch; }
.search-hero h1 em { font-style: normal; color: var(--color-signal); }
.search-hero p { color: var(--color-on-ink); opacity: 0.9; font-size: var(--text-lg); }
.depts { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-8); list-style: none; padding: 0; }

/* Signature: dog-tag medal */
.medal { position: relative; display: inline-grid; place-items: center; width: var(--medal-size); height: var(--medal-size); border-radius: 50%; background: var(--color-signal); color: var(--color-ink); font: var(--font-weight-bold) var(--text-xl) / 1 var(--font-heading); flex: none; }
.medal::before { content: ""; position: absolute; top: calc(var(--space-2) * -1.5); left: 50%; width: var(--space-4); height: var(--space-4); translate: -50% 0; border: var(--border-width-accent) solid var(--color-signal); border-radius: 50%; }
.dept-link { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-6) var(--space-4) var(--space-4); border: var(--border-width) solid oklch(100% 0 0 / 0.25); border-radius: var(--radius-pill); text-decoration: none; min-height: var(--tap-min); transition: background var(--duration) var(--easing); }
.dept-link:hover { background: oklch(100% 0 0 / 0.08); }
.dept-link strong { display: block; font-family: var(--font-heading); font-size: var(--text-lg); }
.dept-link span { font-size: var(--text-sm); opacity: 0.85; }

/* Results */
.results { padding-block: var(--space-section); }
.results-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--space-4); margin-bottom: var(--space-4); }
.results-head h2 { margin: 0; }
.results-head p { margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); }
.rows { list-style: none; margin: 0 0 var(--space-12); padding: 0; border-top: var(--border-width-strong) solid var(--color-text); }
.rows li { border-bottom: var(--border-width) solid var(--color-border); }
.rows a { display: grid; grid-template-columns: 1fr; gap: var(--space-1); padding: var(--space-4) 0; text-decoration: none; color: var(--color-text); }
@media (min-width: 48rem) { .rows a { grid-template-columns: 2fr 1.3fr 1fr 9rem; align-items: center; gap: var(--space-4); } }
.rows strong { font-family: var(--font-heading); font-size: var(--text-lg); }
.rows a:hover strong { color: var(--color-accent); text-decoration: underline; }
.rows .muted { color: var(--color-text-muted); font-size: var(--text-sm); }

/* Completion meter (signature) */
.meter { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-text-muted); }
.meter i { flex: 1; height: var(--space-2); background: var(--color-surface-alt); border: var(--border-width) solid var(--color-border-field); border-radius: var(--radius-pill); overflow: hidden; }
.meter i::before { content: ""; display: block; height: 100%; width: var(--pct); background: var(--color-accent); }

/* Pro block */
.pro { display: grid; gap: var(--space-8); padding: var(--space-8); background: var(--color-surface-alt); border-left: var(--border-width-accent) solid var(--color-accent); }
@media (min-width: 60rem) { .pro { grid-template-columns: 1fr 1fr; align-items: center; } }
.pro ol { margin: 0; padding-left: var(--space-6); display: grid; gap: var(--space-3); }
.pro ol strong { font-family: var(--font-heading); font-size: var(--text-lg); }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap-min); padding: var(--space-2) var(--space-6); border-radius: var(--radius-md); font: var(--font-weight-bold) var(--text-base) var(--font-body); text-decoration: none; border: var(--border-width-strong) solid var(--color-accent); transition: filter var(--duration) var(--easing); }
.btn-primary { background: var(--color-accent); color: var(--color-on-accent); }
.btn-secondary { background: transparent; color: var(--color-accent); }
.btn:hover { filter: brightness(var(--hover-brightness)); }

/* Footer */
.site-footer { background: var(--color-ink); color: var(--color-on-ink); padding-block: var(--space-8); font-size: var(--text-sm); --color-focus: var(--color-focus-on-ink); }
.site-footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-4); }
.site-footer p { margin: 0; }
.site-footer ul { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); list-style: none; margin: 0; padding: 0; }
.site-footer a { color: var(--color-on-ink); }

/* Listing page */
.listing-head { padding-block: var(--space-8) var(--space-12); }
.crumb { font-size: var(--text-sm); margin-bottom: var(--space-8); opacity: 0.9; }
.id { display: flex; gap: var(--space-6); align-items: center; }
.id h1 { margin: 0 0 var(--space-1); }
.id p { margin: 0; font-size: var(--text-lg); opacity: 0.9; }
.listing { display: grid; gap: var(--space-8); padding-block: var(--space-12) var(--space-section); }
@media (min-width: 60rem) { .listing { grid-template-columns: 1fr 1fr 20rem; align-items: start; } }
.card h2 { font-size: var(--text-lg); text-transform: uppercase; letter-spacing: 0.04em; padding-bottom: var(--space-2); border-bottom: var(--border-width-strong) solid var(--color-text); }
.facts { margin: 0; }
.facts div { display: grid; gap: var(--space-1); padding-block: var(--space-3); border-bottom: var(--border-width) solid var(--color-border); }
.facts dt { font-size: var(--text-sm); color: var(--color-text-muted); }
.facts dd { margin: 0; font-weight: var(--font-weight-bold); }
.missing { list-style: none; margin: 0; padding: 0; }
.missing li { display: flex; gap: var(--space-3); padding-block: var(--space-3); border-bottom: var(--border-width) solid var(--color-border); }
.missing svg { flex: none; width: 1.25rem; height: 1.25rem; margin-top: 0.15rem; color: var(--color-text-muted); }
.missing span { display: block; font-size: var(--text-sm); color: var(--color-text-muted); }
.claim { padding: var(--space-6); border: var(--border-width-strong) solid var(--color-text); display: grid; gap: var(--space-3); }
@media (min-width: 60rem) { .claim { position: sticky; top: var(--space-6); } }
.claim h2 { font-size: var(--text-lg); margin: 0; }
.claim p { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.claim .meter { margin-bottom: var(--space-2); }
.source { grid-column: 1 / -1; font-size: var(--text-sm); color: var(--color-text-muted); margin: 0; }
.dept-link .medal { font-size: var(--text-xl); }
.topbar .tag-test { padding-block: var(--space-2); }
.theme-toggle { min-height: var(--tap-min); padding: var(--space-1) var(--space-3); font: inherit; color: var(--color-on-ink); background: transparent; border: var(--border-width) solid currentColor; border-radius: var(--space-8); cursor: pointer; }
.theme-toggle:hover { background: oklch(100% 0 0 / 0.1); }
.theme-toggle:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* Results: one section per département */
.results section + section { margin-top: var(--space-12); }

/* Text pages (sources, legal) */
.prose { padding-block: var(--space-12) var(--space-section); max-width: var(--measure); }
.prose h2 { font-size: var(--text-lg); margin-top: var(--space-8); }
.prose ul { padding-left: var(--space-6); }
.prose li + li { margin-top: var(--space-2); }
.page-head { padding-block: var(--space-8) var(--space-12); }
.page-head h1 { margin: 0; }

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }