/* Page /legal (sommaire des documents) et fil d'Ariane des pages légales */
.crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; font-size: 13px; color: var(--muted); }
.crumbs a { color: var(--muted); text-decoration: none; transition: color .15s; }
.crumbs a:hover { color: var(--text); }
.crumbs [aria-current] { color: var(--text); font-weight: 560; }
.crumbs span[aria-hidden] { color: var(--muted-soft); }

.hub-lead { margin-top: 16px; max-width: 54ch; color: var(--muted); font-size: 16.5px; }
.hub-grid { list-style: none; display: grid; gap: 14px; margin: 18px 0 0; padding: 0; }
.hub-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 20px; padding: 24px 26px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--card); color: inherit; text-decoration: none; transition: border-color .25s ease, transform .35s var(--ease), box-shadow .25s ease; }
.hub-card:hover { border-color: var(--g-line, var(--line-strong)); transform: translateX(6px); box-shadow: 0 10px 30px rgba(34, 34, 34, .06); }
.hub-ico { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 12px; background: var(--g-soft, var(--bg-soft)); color: var(--g, var(--text)); transition: background .25s ease, color .25s ease; }
.hub-ico svg { width: 23px; height: 23px; }
.hub-card:hover .hub-ico { background: var(--g, var(--text)); color: var(--on-g, #ffffff); }
.hub-body { display: grid; gap: 3px; }
.hub-body strong { font-size: 18.5px; font-weight: 650; letter-spacing: -0.02em; color: var(--text); }
.hub-body span { color: var(--muted); font-size: 14.5px; }
.hub-body small { margin-top: 4px; color: var(--muted-soft); font-size: 12.5px; }
.hub-arrow { width: 20px; height: 20px; color: var(--muted-soft); transition: transform .3s var(--ease), color .2s; }
.hub-card:hover .hub-arrow { color: var(--g, var(--text)); transform: translate(3px, -3px); }
.hub-contact { margin: 34px 0 70px; color: var(--muted); font-size: 14.5px; }
.hub-contact a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-strong); }
@media (max-width: 560px) { .hub-card { grid-template-columns: auto 1fr; padding: 20px; } .hub-arrow { display: none; } .hub-card:hover { transform: none; } }
@media (prefers-reduced-motion: reduce) { .hub-card, .hub-arrow { transition: none; } }