* { box-sizing: border-box; }
body { margin: 0; font: 16px/1.6 "Segoe UI", Roboto, Arial, sans-serif; color: #1f2a37; background: #f4f6f8; }
a { color: #1d4ed8; }
.bar { background: #1e3a8a; color: #fff; font-size: 13px; padding: 6px 32px; }
header { background: #fff; padding: 18px 32px; display: flex; align-items: center; gap: 16px; border-bottom: 4px solid #2563eb; }
.blason { width: 46px; height: 54px; border-radius: 6px 6px 23px 23px; background: linear-gradient(#2563eb 50%, #f59e0b 50%); display: grid; place-items: center; color: #fff; font-weight: 800; }
header b { font-size: 22px; } header small { display: block; color: #6b7280; }
nav { background: #fff; padding: 0 32px; display: flex; gap: 22px; border-bottom: 1px solid #e5e7eb; }
nav a { padding: 12px 0; color: #1f2a37; text-decoration: none; font-weight: 600; font-size: 14px; }
nav a.on { color: #1d4ed8; box-shadow: inset 0 -3px #1d4ed8; }
main { max-width: 980px; margin: 28px auto; padding: 0 20px; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.card { background: #fff; border-radius: 12px; padding: 20px; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
footer { text-align: center; color: #6b7280; font-size: 13px; padding: 28px; }