/* ==========================================================================
   Ossature : barre supérieure collante, largeurs, pied de page.
   ========================================================================== */

.shell {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

.wrap {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--sp-4);
}

@media (min-width: 48em) {
  .wrap { padding-inline: var(--sp-6); }
}

/* --- Barre supérieure ---------------------------------------------------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
}

.topbar__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-md);
  font-weight: 600;
  letter-spacing: var(--ls-heading);
  color: var(--fg);
  flex: none;
}

.brand__mark {
  width: 22px;
  height: 22px;
  color: var(--accent);
}

.topbar__nav {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  margin-inline-start: auto;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.topbar__nav::-webkit-scrollbar { display: none; }

.topbar__nav a {
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  font-size: var(--fs-base);
  color: var(--fg-secondary);
  white-space: nowrap;
}

.topbar__nav a:hover { color: var(--fg); background: var(--bg-muted); }

.topbar__nav a[aria-current="page"] { color: var(--fg); font-weight: 500; }

/* --- Corps --------------------------------------------------------------- */

.main { flex: 1; padding-block: var(--sp-10) var(--sp-16); }

@media (min-width: 48em) {
  .main { padding-block: var(--sp-12) var(--sp-16); }
}

/* --- Pied de page -------------------------------------------------------- */

.footer {
  border-top: 1px solid var(--border);
  background: var(--bg-subtle);
  padding-block: var(--sp-10);
  font-size: var(--fs-base);
  color: var(--fg-secondary);
}

.footer__grid {
  display: grid;
  gap: var(--sp-8);
}

@media (min-width: 44em) {
  .footer__grid { grid-template-columns: 1.7fr 1fr 1fr; gap: var(--sp-10); }
}

.footer h2 {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  color: var(--fg-muted);
  margin-bottom: var(--sp-4);
}

.footer p { max-width: 32rem; }

.footer ul { list-style: none; padding: 0; display: grid; gap: var(--sp-3); }

.footer li a { color: var(--fg-secondary); }
.footer li a:hover { color: var(--fg); }

.footer__sources {
  max-width: none;
  margin-top: var(--sp-8);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border);
  font-size: var(--fs-xs);
  line-height: 1.7;
  color: var(--fg-muted);
}

.footer__sources a { color: var(--fg-muted); text-decoration: underline; text-underline-offset: 2px; }
.footer__sources a:hover { color: var(--fg-secondary); }