:root {
  --navy: #0E2542;
  --navy-2: #163358;
  --navy-3: #1F4170;
  --amber: #FFA801;
  --amber-soft: #FFC94D;
  --cream: #FBF2E1;
  --sand: #FBEAC8;
  --white: #FFFFFF;
  --ink: #0E2542;
  --muted: rgba(255, 255, 255, .62);
  --c0: #E4003A; /* triangle */
  --c1: #0085C7; /* losange */
  --c2: #FFA801; /* rond */
  --c3: #00A651; /* carré */
  --ok: #00A651;
  --ko: #E4003A;
  --radius: 18px;
  --font: Avenir, "Avenir Next", "Nunito Sans", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--font);
  color: var(--white);
  background-color: var(--navy);
  background-image:
    radial-gradient(1200px 700px at 85% -10%, rgba(255, 168, 1, .16), transparent 60%),
    radial-gradient(900px 600px at -10% 110%, rgba(0, 133, 199, .18), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cpath d='M28 0 L56 16 L56 48 L28 64 L0 48 L0 16 Z M28 64 L28 97 M0 48 L0 81 L28 97 L56 81 L56 48' fill='none' stroke='%23FFFFFF' stroke-opacity='.045' stroke-width='1.5'/%3E%3C/svg%3E");
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

button { font: inherit; cursor: pointer; border: 0; }
input { font: inherit; }

.logo-alveus { filter: brightness(0) invert(1); display: block; }

/* Bandeau « Zone Olympico » : cinq alvéoles aux couleurs des épreuves */
.hexes { display: inline-flex; gap: .28em; vertical-align: middle; }
.hexes i {
  width: .9em; height: 1.02em; display: block;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.hexes i:nth-child(1) { background: var(--c1); }
.hexes i:nth-child(2) { background: var(--amber); }
.hexes i:nth-child(3) { background: var(--white); }
.hexes i:nth-child(4) { background: var(--c3); }
.hexes i:nth-child(5) { background: var(--c0); }

.btn {
  background: var(--amber); color: var(--navy);
  font-weight: 900; letter-spacing: .01em;
  padding: .85em 1.6em; border-radius: 999px;
  box-shadow: 0 6px 0 #C98300;
  transition: transform .08s, box-shadow .08s, opacity .2s;
}
.btn:active { transform: translateY(4px); box-shadow: 0 2px 0 #C98300; }
.btn:disabled { opacity: .45; cursor: default; }
.btn.ghost { background: rgba(255,255,255,.1); color: var(--white); box-shadow: none; }

.tile-0 { background: var(--c0); }
.tile-1 { background: var(--c1); }
.tile-2 { background: var(--c2); color: var(--navy); }
.tile-3 { background: var(--c3); }
.shape { width: 1.4em; height: 1.4em; flex: none; fill: currentColor; }

@keyframes pop { 0% { transform: scale(.6); opacity: 0; } 70% { transform: scale(1.06); opacity: 1; } 100% { transform: scale(1); } }
@keyframes rise { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pulse { 50% { transform: scale(1.04); } }
.pop { animation: pop .45s cubic-bezier(.2,.9,.3,1.3) both; }
.rise { animation: rise .5s ease both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}