/* ============================================================
   PAN-TOGETHER — Système de design (Direction A · Institutionnel)
   Tokens en variables CSS · thème clair + sombre
   ============================================================ */

:root {
  --brand:        #E0892C;
  --brand-ink:    #C9781F;
  --brand-soft:   #FBF1E4;

  --axis-gastric: #2E7BB8;
  --axis-foie:    #C0392B;
  --axis-pancreas:#E0892C;

  --bg:           #FFFFFF;
  --surface:      #F7F9FC;
  --surface-2:    #EDF1F7;
  --line:         #E2E7EE;
  --line-strong:  #D2D9E3;

  --ink:          #14233D;   /* titres */
  --text:         #3A465C;   /* corps */
  --muted:        #5C677A;
  --faint:        #8A95A6;

  --bar:          #14233D;   /* barre util + footer + hero panel */
  --bar-text:     #AEBBD0;
  --bar-ink:      #FFFFFF;
  --on-bar-line:  rgba(255,255,255,.14);

  --shadow-sm: 0 1px 2px rgba(20,35,61,.05);
  --shadow-md: 0 10px 30px rgba(20,35,61,.08);
  --shadow-lg: 0 24px 60px rgba(20,35,61,.14);

  --r-sm: 8px;  --r-md: 12px;  --r-lg: 18px;  --r-pill: 999px;
  --wrap: 1240px;
  --header-h: 74px;

  --sans: 'Libre Franklin', system-ui, -apple-system, sans-serif;
}

[data-theme="dark"] {
  --brand:        #ED9C46;
  --brand-ink:    #F2AD61;
  --brand-soft:   #2A2113;

  --axis-gastric: #5AA7DC;
  --axis-foie:    #E06557;
  --axis-pancreas:#ED9C46;

  --bg:           #0E1726;
  --surface:      #15233A;
  --surface-2:    #1C2E49;
  --line:         #26364F;
  --line-strong:  #324363;

  --ink:          #EAF1FA;
  --text:         #C2CEDF;
  --muted:        #93A1B8;
  --faint:        #6E7E96;

  --bar:          #0A1322;
  --bar-text:     #93A1B8;
  --bar-ink:      #F4F8FD;
  --on-bar-line:  rgba(255,255,255,.10);

  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 10px 30px rgba(0,0,0,.45);
  --shadow-lg: 0 24px 60px rgba(0,0,0,.55);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg) !important; }
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--text);
  background: var(--bg) !important;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  transition: background .25s, color .25s;
}
a { color: inherit; }
img { display: block; max-width: 100%; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 56px; }
.kicker {
  display: inline-flex; align-items: center; gap: 9px;
  color: var(--brand); font-weight: 700; font-size: 13px;
  letter-spacing: .13em; text-transform: uppercase;
}
.kicker::before { content: ''; width: 26px; height: 2px; background: var(--brand); }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  border-radius: var(--r-sm); padding: 13px 22px;
  font-family: inherit; font-weight: 700; font-size: 15px;
  text-decoration: none; border: none; cursor: pointer;
  transition: background .15s, border-color .15s, transform .12s;
}
.btn:active { transform: translateY(1px); }
.btn-p { background: var(--brand); color: #fff; }
.btn-p:hover { background: var(--brand-ink); }
.btn-s { background: var(--bg); color: var(--ink); border: 1.5px solid var(--line-strong); }
.btn-s:hover { border-color: var(--brand); color: var(--brand); }

/* ============================================================
   EN-TÊTE
   ============================================================ */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); }
.brand { display: flex; align-items: center; gap: 13px; text-decoration: none; }
.brand img { width: 46px; height: 46px; }
.brand b { font-weight: 800; font-size: 19px; letter-spacing: .14em; color: var(--ink); }
.brand b span { color: var(--brand); }
.main-nav { display: flex; gap: 28px; }
.main-nav a {
  color: var(--text); text-decoration: none; font-size: 14.5px; font-weight: 600;
  padding: 6px 0; border-bottom: 2px solid transparent;
}
.main-nav a:hover { color: var(--brand); }
.main-nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--brand); }
.header-actions { display: flex; align-items: center; gap: 12px; }

/* Bascule thème */
.theme-toggle {
  width: 40px; height: 40px; border-radius: var(--r-sm);
  border: 1.5px solid var(--line-strong); background: var(--bg);
  color: var(--ink); cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: border-color .15s, background .15s;
}
.theme-toggle:hover { border-color: var(--brand); color: var(--brand); }
.theme-toggle .ico-moon { display: none; }
[data-theme="dark"] .theme-toggle .ico-sun { display: none; }
[data-theme="dark"] .theme-toggle .ico-moon { display: block; }

.burger {
  display: none; width: 40px; height: 40px; border-radius: var(--r-sm);
  border: 1.5px solid var(--line-strong); background: var(--bg); color: var(--ink);
  cursor: pointer; align-items: center; justify-content: center;
}

/* ============================================================
   PIED DE PAGE
   ============================================================ */
.site-footer { background: var(--bar); color: var(--bar-text); padding: 56px 0 30px; margin-top: 80px; }
.site-footer .top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 36px; }
.site-footer h5 { color: var(--bar-ink); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; margin: 0 0 16px; }
.site-footer a { display: block; color: var(--bar-text); text-decoration: none; font-size: 14px; margin-bottom: 10px; }
.site-footer a:hover { color: var(--bar-ink); }
.site-footer .f-brand b { color: var(--bar-ink); font-weight: 800; letter-spacing: .12em; }
.site-footer .f-about { font-size: 14px; max-width: 24em; color: var(--bar-text); margin: 14px 0 0; }
.site-footer .copy {
  border-top: 1px solid var(--on-bar-line); margin-top: 40px; padding-top: 22px;
  font-size: 12.5px; color: var(--faint); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.site-footer .copy a { display: inline; margin: 0; color: var(--bar-text); text-decoration: underline; text-underline-offset: 2px; }
.site-footer .copy a:hover { color: var(--bar-ink); }
.site-footer .copy .sep { color: var(--faint); margin: 0 8px; }
.site-footer .copy a svg { width: 15px; height: 15px; vertical-align: -3px; margin-right: 5px; }

/* ============================================================
   LAYOUT DOCUMENTATION (3 colonnes)
   ============================================================ */
.docs {
  display: grid;
  grid-template-columns: 268px minmax(0, 1fr) 244px;
  gap: 52px;
  max-width: 1360px; margin: 0 auto; padding: 0 48px 80px;
  align-items: start;
}

/* -- colonne gauche : sous-sections -- */
.docs-nav { position: sticky; top: calc(var(--header-h) + 28px); align-self: start; }
.docs-nav .nav-title { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); font-weight: 700; padding: 0 14px 12px; }
.docs-nav ul { list-style: none; margin: 0; padding: 0; }
.docs-nav li { margin: 2px 0; }
.docs-nav a {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border-radius: var(--r-sm);
  text-decoration: none; color: var(--text); font-size: 14.5px; font-weight: 600;
  transition: background .12s, color .12s;
}
.docs-nav a .ic { width: 18px; height: 18px; flex: 0 0 auto; color: var(--faint); transition: color .12s; }
.docs-nav a:hover { background: var(--surface); color: var(--ink); }
.docs-nav a.active { background: var(--brand-soft); color: var(--brand-ink); }
.docs-nav a.active .ic { color: var(--brand); }

/* -- colonne centrale : contenu -- */
.doc-main { min-width: 0; padding-top: 6px; }
.breadcrumb { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--muted); margin-bottom: 22px; flex-wrap: wrap; }
.breadcrumb a { text-decoration: none; color: var(--muted); }
.breadcrumb a:hover { color: var(--brand); }
.breadcrumb .sep { color: var(--faint); }
.breadcrumb .cur { color: var(--ink); font-weight: 600; }

.doc-panel { display: none; }
.doc-panel.active { display: block; animation: fade .25s ease; }
@keyframes fade { from { transform: translateY(6px); } to { transform: none; } }

.doc-main h1 { font-size: 40px; line-height: 1.1; font-weight: 800; letter-spacing: -.02em; color: var(--ink); margin: 0 0 8px; }
.doc-main .lead { font-size: 18px; color: var(--muted); margin: 0 0 14px; max-width: 40em; }
.doc-main h2 {
  font-size: 25px; font-weight: 800; letter-spacing: -.015em; color: var(--ink);
  margin: 48px 0 14px; scroll-margin-top: calc(var(--header-h) + 28px);
}
.doc-main h2:first-of-type { margin-top: 34px; }
.doc-main h3 {
  font-size: 18px; font-weight: 700; color: var(--ink);
  margin: 30px 0 10px; scroll-margin-top: calc(var(--header-h) + 28px);
}
.doc-main p { font-size: 16px; color: var(--text); margin: 0 0 16px; max-width: 42em; text-wrap: pretty; }
.doc-main a.inline { color: var(--brand-ink); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1.5px; font-weight: 600; }
.doc-main ul.body { margin: 0 0 16px; padding-left: 0; list-style: none; max-width: 42em; }
.doc-main ul.body li { position: relative; padding-left: 26px; margin-bottom: 11px; font-size: 16px; color: var(--text); }
.doc-main ul.body li::before { content: ''; position: absolute; left: 4px; top: 10px; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); }
.doc-main strong { color: var(--ink); font-weight: 700; }
.doc-divider { border: 0; border-top: 1px solid var(--line); margin: 44px 0; }

/* encadré / callout */
.callout {
  display: flex; gap: 16px; background: var(--surface); border: 1px solid var(--line);
  border-left: 4px solid var(--brand); border-radius: var(--r-md);
  padding: 20px 22px; margin: 24px 0; max-width: 44em;
}
.callout .c-ic { flex: 0 0 auto; width: 26px; height: 26px; color: var(--brand); }
.callout h4 { margin: 0 0 6px; font-size: 15px; color: var(--ink); font-weight: 800; }
.callout p { margin: 0; font-size: 14.5px; color: var(--muted); max-width: none; }

/* mini-cartes (axes, gouvernance, partenaires) */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin: 22px 0; }
.tile { border: 1px solid var(--line); border-radius: var(--r-md); padding: 22px; background: var(--bg); border-top: 3px solid var(--tc, var(--brand)); }
.tile .dot { width: 36px; height: 36px; border-radius: 9px; background: color-mix(in srgb, var(--tc, var(--brand)) 14%, transparent); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.tile .dot::after { content: ''; width: 14px; height: 14px; border-radius: 50%; background: var(--tc, var(--brand)); }
.tile h4 { margin: 0; font-size: 16px; color: var(--ink); font-weight: 700; }
.tile p { margin: 8px 0 0; font-size: 14px; color: var(--muted); max-width: none; }

/* chiffres en bref */
.factgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; margin: 24px 0; }
.factgrid .f { background: var(--bg); padding: 22px; }
.factgrid .f .n { font-size: 30px; font-weight: 800; color: var(--ink); letter-spacing: -.02em; }
.factgrid .f .n em { color: var(--brand); font-style: normal; }
.factgrid .f .l { font-size: 13px; color: var(--muted); margin-top: 2px; }

/* -- colonne droite : ancres -- */
.doc-toc { position: sticky; top: calc(var(--header-h) + 28px); align-self: start; }
.doc-toc .toc-title { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); font-weight: 700; margin-bottom: 14px; }
.doc-toc ul { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--line); }
.doc-toc li a {
  display: block; padding: 6px 0 6px 16px; margin-left: -2px;
  border-left: 2px solid transparent; text-decoration: none;
  font-size: 13.5px; color: var(--muted); transition: color .12s, border-color .12s;
}
.doc-toc li.lvl-3 a { padding-left: 30px; font-size: 13px; }
.doc-toc li a:hover { color: var(--ink); }
.doc-toc li a.active { color: var(--brand-ink); border-left-color: var(--brand); font-weight: 700; }

/* ============================================================
   PAGE D'ACCUEIL
   ============================================================ */
.hero { padding: 74px 0 64px; display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.hero h1 { font-size: 46px; line-height: 1.08; font-weight: 800; letter-spacing: -.02em; margin: 20px 0 0; color: var(--ink); }
.hero .lead { font-size: 18px; color: var(--muted); margin: 20px 0 0; max-width: 33em; }
.hero .cta { display: flex; gap: 14px; margin-top: 30px; flex-wrap: wrap; }
.hero-panel { background: var(--bar); border-radius: var(--r-lg); padding: 38px; position: relative; overflow: hidden; aspect-ratio: 1/.92; }
.hero-panel .logo { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.hero-panel .logo img { width: 64%; filter: drop-shadow(0 14px 40px rgba(0,0,0,.4)); }
.hero-panel .badge { position: absolute; left: 30px; bottom: 28px; background: rgba(255,255,255,.08); border: 1px solid var(--on-bar-line); border-radius: var(--r-md); padding: 12px 16px; color: #E7EDF6; font-size: 13px; }
.hero-panel .badge b { color: #fff; font-size: 15px; display: block; }

.statbar { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface); }
.statbar .wrap { display: grid; grid-template-columns: repeat(4,1fr); padding: 0; }
.statbar .stat { padding: 30px 26px; border-right: 1px solid var(--line); }
.statbar .stat:last-child { border-right: none; }
.statbar .stat .n { font-size: 38px; font-weight: 800; color: var(--ink); letter-spacing: -.02em; }
.statbar .stat .n em { color: var(--brand); font-style: normal; }
.statbar .stat .l { font-size: 13.5px; color: var(--muted); margin-top: 4px; }

.home-section { padding: 72px 0; }
.home-section.alt { background: var(--surface); border-top: 1px solid var(--line); }
.shead { max-width: 680px; }
.shead h2 { font-size: 32px; font-weight: 800; color: var(--ink); margin: 14px 0 0; letter-spacing: -.015em; }
.shead p { color: var(--muted); font-size: 16.5px; margin: 14px 0 0; }

.axes-home { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; margin-top: 40px; }
.axis-card { border: 1px solid var(--line); border-radius: var(--r-md); padding: 26px; background: var(--bg); border-top: 4px solid var(--c); text-decoration: none; display: block; transition: transform .15s, box-shadow .15s; }
.axis-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.axis-card .dot { width: 42px; height: 42px; border-radius: 10px; background: color-mix(in srgb, var(--c) 14%, transparent); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.axis-card .dot::after { content: ''; width: 16px; height: 16px; border-radius: 50%; background: var(--c); }
.axis-card h3 { font-size: 18px; font-weight: 700; color: var(--ink); margin: 0; }
.axis-card p { font-size: 14.5px; color: var(--muted); margin: 10px 0 0; }
.axis-card .go { display: inline-block; margin-top: 16px; color: var(--c); font-weight: 700; font-size: 14px; }
.organ { width: 40px; height: 40px; color: var(--c, var(--brand)); display: block; margin-bottom: 16px; }
.tile .organ { width: 30px; height: 30px; color: var(--tc, var(--brand)); margin-bottom: 12px; }

.map-row { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.map-frame { aspect-ratio: 1/1; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg); display: flex; align-items: center; justify-content: center; color: var(--faint); font-size: 14px; }

.spaces { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.space { border-radius: var(--r-lg); padding: 36px; color: #fff; position: relative; overflow: hidden; min-height: 230px; display: flex; flex-direction: column; justify-content: flex-end; text-decoration: none; }
.space.pat { background: linear-gradient(135deg,#1E3357,#14233D); }
.space.pro { background: linear-gradient(135deg,#B5751F,#E0892C); }
.space .tag { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; opacity: .8; font-weight: 700; }
.space h3 { font-size: 24px; font-weight: 800; margin: 10px 0 0; }
.space p { font-size: 15px; opacity: .9; margin: 10px 0 0; max-width: 26em; }
.space .go { margin-top: 18px; color: #fff; font-weight: 700; font-size: 14.5px; }

.news-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; margin-top: 40px; }
.news-card { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--bg); text-decoration: none; display: block; transition: box-shadow .15s; }
.news-card:hover { box-shadow: var(--shadow-md); }
.news-card .ph { aspect-ratio: 16/9; background: var(--surface-2); display: flex; align-items: center; justify-content: center; color: var(--faint); font-size: 12.5px; }
.news-card .b { padding: 20px; }
.news-card .date { font-size: 12.5px; color: var(--brand); font-weight: 700; letter-spacing: .04em; }
.news-card h4 { font-size: 16.5px; font-weight: 700; color: var(--ink); margin: 8px 0 0; line-height: 1.3; }

.partners-row { padding: 46px 0; border-top: 1px solid var(--line); }
.plogos { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin-top: 22px; }
.plogo { height: 54px; flex: 1; min-width: 120px; border: 1px dashed var(--line-strong); border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; color: var(--faint); font-size: 13px; font-weight: 600; }

/* ============================================================
   CONTENU MARKDOWN (pages docs & articles)
   Les pages sont rédigées en markdown : on style les balises
   brutes générées pour qu'elles reprennent le design.
   ============================================================ */
/* Listes markdown -> puces de marque (comme ul.body) */
.doc-main ul:not(.body), .article-body ul {
  margin: 0 0 16px; padding-left: 0; list-style: none; max-width: 42em;
}
.doc-main ul:not(.body) > li, .article-body ul > li {
  position: relative; padding-left: 26px; margin-bottom: 11px; font-size: 16px; color: var(--text);
}
.doc-main ul:not(.body) > li::before, .article-body ul > li::before {
  content: ''; position: absolute; left: 4px; top: 10px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--brand);
}
.doc-main ol, .article-body ol { margin: 0 0 16px; padding-left: 22px; max-width: 42em; color: var(--text); font-size: 16px; }
.doc-main ol li, .article-body ol li { margin-bottom: 11px; }
/* Premier paragraphe d'un panneau = chapô (lead) */
.doc-panel > h1 + p { font-size: 18px; color: var(--muted); margin: 0 0 14px; max-width: 40em; }
.doc-main a:not(.btn), .article-body a { color: var(--brand-ink); text-decoration: underline; text-underline-offset: 2px; }
.doc-main blockquote, .article-body blockquote {
  margin: 24px 0; padding: 14px 20px; border-left: 4px solid var(--brand);
  background: var(--surface); border-radius: var(--r-sm); color: var(--muted); max-width: 44em;
}
.doc-main img, .article-body img { border-radius: var(--r-md); margin: 20px 0; }
.doc-main table, .article-body table { border-collapse: collapse; margin: 22px 0; width: 100%; max-width: 44em; font-size: 15px; }
.doc-main th, .doc-main td, .article-body th, .article-body td { border: 1px solid var(--line); padding: 10px 14px; text-align: left; }
.doc-main th, .article-body th { background: var(--surface); color: var(--ink); font-weight: 700; }
.doc-main pre, .article-body pre { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px 18px; overflow: auto; margin: 20px 0; }
.doc-main code, .article-body code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em; }

/* ============================================================
   ARTICLES (Actualités)
   ============================================================ */
.article-single { max-width: 800px; margin: 0 auto; padding: 40px 48px 40px; }
.article-single .breadcrumb { margin-bottom: 20px; }
.article-head h1 { font-size: 40px; line-height: 1.12; font-weight: 800; letter-spacing: -.02em; color: var(--ink); margin: 0 0 12px; }
.article-meta { display: flex; gap: 12px; align-items: center; font-size: 13.5px; color: var(--muted); flex-wrap: wrap; margin-bottom: 8px; }
.article-meta .date { color: var(--brand); font-weight: 700; letter-spacing: .04em; }
.article-meta .cat { border: 1px solid var(--line-strong); border-radius: var(--r-pill); padding: 3px 11px; }
.article-body { margin-top: 26px; }
.article-body h2 { font-size: 25px; font-weight: 800; color: var(--ink); margin: 40px 0 14px; letter-spacing: -.015em; }
.article-body h3 { font-size: 18px; font-weight: 700; color: var(--ink); margin: 28px 0 10px; }
.article-body p { font-size: 16.5px; color: var(--text); margin: 0 0 16px; max-width: 42em; text-wrap: pretty; }
.article-body strong { color: var(--ink); }

.page-head { padding: 56px 0 10px; }
.page-head h1 { font-size: 40px; line-height: 1.1; font-weight: 800; letter-spacing: -.02em; color: var(--ink); margin: 14px 0 0; }
.page-lead { font-size: 18px; color: var(--muted); margin: 14px 0 0; max-width: 40em; }
.list-head { margin-bottom: 34px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
  .docs { grid-template-columns: 240px minmax(0,1fr); }
  .doc-toc { display: none; }
}
@media (max-width: 920px) {
  .hero { grid-template-columns: 1fr; gap: 36px; }
  .hero-panel { aspect-ratio: 16/10; }
  .axes-home, .news-grid { grid-template-columns: 1fr; }
  .spaces, .map-row { grid-template-columns: 1fr; gap: 24px; }
  .statbar .wrap { grid-template-columns: 1fr 1fr; }
  .statbar .stat:nth-child(2) { border-right: none; }
  .statbar .stat:nth-child(1), .statbar .stat:nth-child(2) { border-bottom: 1px solid var(--line); }
}
@media (max-width: 820px) {
  .wrap { padding: 0 24px; }
  .main-nav { display: none; }
  .main-nav.open { display: flex; position: absolute; top: var(--header-h); left: 0; right: 0; flex-direction: column; gap: 0; background: var(--bg); border-bottom: 1px solid var(--line); padding: 8px 24px 16px; }
  .burger { display: flex; }
  .docs { grid-template-columns: 1fr; gap: 24px; padding: 0 24px 60px; }
  .docs-nav { position: static; border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px; background: var(--surface); }
  .site-footer .top { grid-template-columns: 1fr 1fr; }
}