:root {
  --brand: #c0392b;
  --brand-2: #e67e22;
  --accent: #e67e22;
  --on-accent: #1d1206;
  --slate: #2c3e50;
  --ink: #1f2a36;
  --muted: #525e6b;
  --surface: #fbf0ec;
  --line: #f0dcd5;
  --dark: #1f2c3a;
  --on-dark: #f6f1ee;
  --on-dark-muted: #c3c9d1;
  --header-bg: rgba(255, 251, 249, .9);
}
.hero { background: linear-gradient(135deg, #1f2c3a 0%, #2c3e50 55%, #3b2b2f 100%); color: var(--on-dark); }
.hero .lead { color: var(--on-dark-muted); }
.hero h1 em { font-style: normal; color: var(--accent); }
html[lang^="zh"] h1, html[lang^="zh"] h2 { letter-spacing: 0; }

.bridge { width: 100%; max-width: 560px; margin-inline: auto; }
.bridge .arc { stroke-dasharray: 8 10; animation: flow 1.5s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -36; } }
.bridge .share { transform-box: fill-box; transform-origin: bottom; animation: grow 7s var(--ease) infinite; }
.bridge .share:nth-of-type(2) { animation-delay: .3s; } .bridge .share:nth-of-type(3) { animation-delay: .6s; }
@keyframes grow { 0%, 45% { transform: scaleY(.1); } 65%, 92% { transform: scaleY(1); } 100% { transform: scaleY(.1); } }

/* Carte des 54 pays (grille de tuiles) */
.map-wrap { display: grid; gap: 28px; grid-template-columns: 1fr; }
@media (min-width: 960px) { .map-wrap { grid-template-columns: 1.5fr 1fr; align-items: start; } }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 6px; }
.tiles button {
  aspect-ratio: 1; border: 0; border-radius: 10px; font-weight: 800; font-size: .78rem; letter-spacing: .04em;
  background: #fff; color: var(--slate); border: 1px solid var(--line);
  transition: transform .25s var(--ease), background .25s, color .25s; opacity: 0; transform: scale(.6);
}
.tiles.is-in button { opacity: 1; transform: none; transition-delay: calc(var(--i) * 18ms); }
.tiles button:hover, .tiles button[aria-pressed="true"] { transform: scale(1.08); background: var(--slate); color: #fff; }
.tiles button.pilot { background: var(--brand); color: #fff; border-color: var(--brand); }
.tiles button.pilot::after { content: ""; }
.map-info { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); position: sticky; top: calc(var(--header-h) + 16px); }
.map-info .code { font-size: 2.6rem; font-weight: 800; color: var(--brand); line-height: 1; }
.map-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: .85rem; color: var(--muted); margin-top: 14px; }
.map-legend span::before { content: ""; display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; background: #fff; border: 1px solid var(--line); }
.map-legend .p::before { background: var(--brand); border-color: var(--brand); }

.lang-big { display: inline-flex; gap: 6px; }
.zh-first { font-size: 1.15em; }