/* les polices sont servies par le site, sans appel à Google */
@font-face { font-family: "Grandstander"; font-style: normal; font-weight: 800; font-display: swap; src: url(/fonts/grandstander-800.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/poppins-400.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/poppins-500.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/poppins-600.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/poppins-700.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 800; font-display: swap; src: url(/fonts/poppins-800.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD }

:root {
  --ease: cubic-bezier(.22, 1, .36, 1);
  --gold: #6fe3d6;
  --gold-soft: #ffe066;
  --cream: #f3fbff;
  --text: #f5fbff;
  --muted: #d3e2ec;
  --deep: #0b1630;
  --title: "Grandstander", "Poppins", sans-serif;
  /* la hauteur du menu sous le logo, padding du haut + marge + logo + marge */
  --nav-top: 262px;
}
* { box-sizing: border-box; margin: 0; padding: 0 }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100% }
body { font-family: Poppins, system-ui, sans-serif; color: var(--text); background: var(--deep); -webkit-font-smoothing: antialiased; overflow-x: hidden }
img { max-width: 100%; height: auto; display: block }
a { color: inherit }
button { font: inherit }
svg { flex-shrink: 0 }
:is(a, button):focus-visible { outline: 2px solid #8ff0e6; outline-offset: 3px }

/* ---------- boutons ---------- */
.action-button { cursor: pointer; min-height: 50px; transition: transform .25s var(--ease), box-shadow .25s, background .25s; border: 1px solid transparent; border-radius: 14px; justify-content: center; align-items: center; gap: 10px; padding: 13px 24px; font-size: 14px; font-weight: 700; line-height: 1.3; text-decoration: none; display: inline-flex }
.action-primary { color: #ffffff; text-shadow: 0 1px 2px #07465266; background: linear-gradient(#3fdccf, #139fb4); border-color: #a4f3ec; box-shadow: 0 5px #0b6b7c, 0 10px 28px #16092340 }
.action-primary:hover { transform: translateY(-3px); box-shadow: 0 8px #0b6b7c, 0 14px 30px #16092355 }
.action-primary:active { transform: translateY(3px); box-shadow: 0 2px #0b6b7c }
.action-secondary { color: #fff; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); background: #0f243dab; border-color: #ffffff45 }
.action-secondary:hover { background: #17365a; transform: translateY(-2px) }
.action-button .arrow { transition: transform .25s var(--ease) }
.action-button:hover .arrow { transform: translateX(3px) }

.nav-control { color: #f5fbff; text-transform: uppercase; white-space: nowrap; cursor: pointer; text-decoration: none; border: 1px solid transparent; border-radius: 12px; justify-content: center; align-items: center; gap: 9px; min-height: 46px; padding: 11px 16px; font-size: 13px; font-weight: 750; line-height: 1.2; transition: transform .23s var(--ease), background-color .2s, border-color .2s, box-shadow .23s; display: inline-flex; background: transparent }
.nav-control.plain:hover { background: #8fe8ff12; border-color: #8fe8ff55 }
.nav-control.play { text-shadow: 0 1px 2px #07465266; background: linear-gradient(#3fdccf, #139fb4); border-color: #a4f3ec; box-shadow: 0 3px #0b6b7c, inset 0 1px #d9fffb60 }
.nav-control.shop { text-shadow: 0 1px 2px #6a1d1080; background: linear-gradient(#ff8a6b, #e9553f); border-color: #ffc1b0; box-shadow: 0 3px #9c2f1f, inset 0 1px #ffe6de5c }
.nav-control.discord { text-shadow: 0 1px 2px #16335e80; background: linear-gradient(#7983f5, #5865f2); border-color: #a5acff; box-shadow: 0 3px #3a43b5, inset 0 1px #e3efff5c }
.nav-control.vote { color: #3d2b00; background: linear-gradient(#ffe066, #f4b81c); border-color: #fff0a6; box-shadow: 0 3px #a37400, inset 0 1px #fffbe080 }
.nav-control:is(.play, .shop, .discord, .vote):hover { transform: translateY(-2px); box-shadow: 0 5px #0d1a2d99, 0 8px 16px #0d0b202e, inset 0 1px #e8fffc50 }
.nav-control:is(.play, .shop, .discord, .vote):active { transform: translateY(2px); box-shadow: 0 1px #0d1a2d99 }

/* ---------- le haut de page ---------- */
.hero { z-index: 40; background: #63cbea; height: calc(100svh - 38px); min-height: 560px; position: relative }
.hero-scene { pointer-events: none; position: absolute; inset: 0; overflow: hidden; container-type: size }
.hero-stage { aspect-ratio: 16/9; width: calc(1.04 * max(100cqw, 177.778cqh)); position: absolute; top: 50%; left: 50%; translate: -50% -50% }
.hero-backdrop, .hero-pointer { position: absolute; inset: 0 }
.hero-pointer { will-change: transform }
.hero-backdrop img { width: 100%; height: 100%; user-select: none }
.hero-sprite { position: absolute }
.hero-sprite .hero-pointer { position: relative; inset: auto }
.hero-sprite img { width: 100%; height: auto; user-select: none; filter: drop-shadow(0 6px 10px #0a2a3f40) }
.hero-sun { position: absolute; left: 53%; top: 17%; width: 30%; aspect-ratio: 1; translate: -50% -50%; background: radial-gradient(circle, #fffbe0aa, #fff7c033 35%, transparent 65%); mix-blend-mode: screen; animation: sun 9s ease-in-out infinite alternate }
@keyframes sun { to { opacity: .55; scale: 1.08 } }

.hero-motes, .hero-motes .hero-pointer { position: absolute; inset: 0 }
.hero-motes span { width: var(--size); aspect-ratio: 1; opacity: 0; background: radial-gradient(circle, #ffffff, #d6f3ffcc 45%, #d6f3ff00 74%); box-shadow: 0 0 6px #ffffff55; border-radius: 50%; animation: hero-mote linear infinite; position: absolute }
@keyframes hero-mote { 0% { opacity: 0; transform: translate(0) scale(.6) } 15%, 80% { opacity: var(--alpha) } to { transform: translate3d(var(--drift), -42cqh, 0) scale(1); opacity: 0 } }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(#0f4c6e00 40%, #0f4c6e1f 55%, #0f4c6e66 68%, #0f4c6ebb 80%, #0f4c6eee 91%, #0f4c6e 99%) }

.hero-top { position: relative; z-index: 10; padding: 20px }
.hero-logo { display: flex; justify-content: center; margin: 14px 0 18px }
.hero-logo a { width: 100%; max-width: 210px; display: block }
.hero-logo-art { position: relative; filter: drop-shadow(0 10px 22px #0a2a3f55) }
.hero-logo-shine { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: overlay; background: linear-gradient(105deg, #fff0 40%, #fff9, #fff0 60%) 140% 0 / 250% 100% no-repeat; -webkit-mask: url(/img/logo.webp) 50% / 100% 100% no-repeat; mask: url(/img/logo.webp) 50% / 100% 100% no-repeat; animation: shine 7s ease-in-out 1.2s infinite }
@keyframes shine { 0% { background-position: 140% 0 } 30%, 100% { background-position: -40% 0 } }

.recruit-bar { position: sticky; top: 0; z-index: 10001; display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 38px; padding: 7px 16px; font-size: 13px; color: #d9eef7; text-decoration: none; background: linear-gradient(90deg, #0b1630f2, #10345af2 50%, #0b1630f2); border-bottom: 1px solid #6fe3d633; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px) }
.recruit-bar .tag { color: #063b44; background: linear-gradient(#a9f5ec, #6fe3d6); border-radius: 999px; padding: 2px 10px; font-size: 11px; font-weight: 800; text-transform: uppercase }
.recruit-bar u { text-decoration: none; color: var(--gold); font-weight: 700 }
.recruit-bar .arrow { display: inline-block; transition: transform .25s var(--ease) }
.recruit-bar:hover .arrow { transform: translateX(4px) }
.site-nav { position: sticky; top: 48px; z-index: 9999; height: 0; margin-top: var(--nav-top); padding: 0 12px }
.hero { margin-top: calc(-1 * var(--nav-top)) }
.site-nav-shell { background: linear-gradient(155deg, #1d3550ea, #12223aef); border: 1px solid #8fe8ff30; border-bottom: 3px solid #1f9fb3; border-radius: 20px; justify-content: center; align-items: center; width: fit-content; max-width: 100%; margin-inline: auto; padding: 12px 16px; display: flex; box-shadow: 0 8px 26px #0a142c40, inset 0 1px #fff1; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px) }
.nav-links { display: flex; align-items: center; gap: 8px }
.nav-burger { display: none; cursor: pointer; align-items: center; justify-content: center; gap: 12px; padding: 12px 20px; color: #fff; background: none; border: 0; font-size: 14px; font-weight: 600 }
.nav-burger .lines { display: flex; flex-direction: column; gap: 6px }
.nav-burger .lines i { display: block; width: 24px; height: 2px; background: #fff; border-radius: 9px; transition: transform .3s, opacity .3s }
.site-nav.open .lines i:nth-child(1) { transform: translateY(8px) rotate(45deg) }
.site-nav.open .lines i:nth-child(2) { opacity: 0; transform: scaleX(0) }
.site-nav.open .lines i:nth-child(3) { transform: translateY(-8px) rotate(-45deg) }

.hero-welcome { z-index: 9; text-align: center; width: min(680px, 100% - 40px); position: absolute; bottom: 22px; left: 50%; translate: -50% }
.hero-tagline { color: #f5fbff; text-wrap: balance; text-shadow: 0 2px 10px #071a2b; margin: 0 0 18px; font-size: clamp(20px, 2.3vw, 30px); font-weight: 800; line-height: 1.2 }
.hero-word { display: inline-block }
.hero-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px }
.hero-proof { color: #e9f4fb; text-shadow: 0 1px 8px #071a2b; flex-wrap: wrap; justify-content: center; gap: 4px 0; margin: 18px 0 0; padding: 0; font-size: 12px; font-weight: 500; list-style: none; display: flex }
.hero-proof li + li:before { content: "·"; color: var(--gold-soft); margin: 0 10px }

/* l'arrivée en douceur des éléments du haut */
.intro { animation: intro .8s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 70ms + 150ms) }
@keyframes intro { from { opacity: 0; transform: translateY(14px) } }


/* ---------- sections ---------- */
.section-eyebrow { color: var(--gold); text-transform: uppercase; margin-bottom: 14px; font-size: 12px; font-weight: 600; display: block }
.section-heading { text-align: center; margin-bottom: 40px; padding: 0 24px; position: relative }
.title-font { text-transform: uppercase; color: var(--cream); text-shadow: 0 3px #0a1a3070; font-family: var(--title); font-weight: 800; line-height: 1.05 }
.section-heading h2 { font-size: clamp(36px, 4.4vw, 58px) }
.section-heading > p { color: var(--muted); text-wrap: balance; max-width: 560px; margin: 16px auto 0; font-size: 15px; line-height: 1.7 }

[data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: var(--d, 0s) }
[data-reveal].seen { opacity: 1; transform: none }

/* jouer */
.play-scene { position: relative; overflow: hidden; padding: 120px 24px 90px; background: radial-gradient(at 75% 55%, #1f7aa044, #0000 55%), linear-gradient(#0f4c6e, #0d3557 60%, #0c2a4a) }
.connection-panel { grid-template-columns: 1fr 1.25fr; align-items: center; gap: 56px; max-width: 1180px; margin: auto; display: grid }
.connection-copy h2 { font-size: clamp(36px, 4.4vw, 54px); margin-bottom: 18px }
.connection-copy > p { color: var(--muted); font-size: 15px; line-height: 1.75; max-width: 470px }
.connection-address { display: grid; max-width: 440px; margin-top: 28px; background: #ffffff0d; border: 1px solid #8fe8ff26; border-radius: 18px; padding: 6px 18px }
.connection-address > div { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 14px; padding: 12px 0 }
.connection-address > div + div { border-top: 1px solid #ffffff14 }
.connection-address span { grid-column: 1; color: #9fd0e4; text-transform: uppercase; font-size: 10px; font-weight: 600 }
.connection-address code { grid-column: 1; user-select: all; color: var(--text); font: 500 17px Poppins, sans-serif }
.connection-address code small { display: block; color: #9fd0e4; font-size: 12px }
.copy-small { grid-column: 2; grid-row: 1 / 3; color: #8fe8ff; cursor: pointer; background: #0e223a66; border: 1px solid #8fe8ff38; border-radius: 10px; min-height: 38px; padding: 7px 13px; font-size: 12px; font-weight: 600 }
.copy-small:hover { background: #1a3d5f }
.online-line { display: flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 13px; color: #cfe3ef }
.online-line i { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #7cff6b; box-shadow: 0 0 6px #7cff6b99 }
.online-line i:after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #7cff6b; animation: ping 1.8s cubic-bezier(0, 0, .2, 1) infinite }
@keyframes ping { 75%, 100% { transform: scale(2.6); opacity: 0 } }
.platforms { grid-column: 1 / -1; text-align: center; padding-top: 6px }
.platforms > span { display: block; color: var(--gold); text-transform: uppercase; font-size: 11px; font-weight: 600; margin-bottom: 14px }
.connection-devices { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; list-style: none }
.connection-devices a { display: inline-flex; align-items: center; gap: 9px; color: #e3f0f8; text-decoration: none; background: #ffffff0d; border: 1px solid #8fe8ff2b; border-radius: 999px; padding: 9px 17px 9px 13px; font-size: 13px; font-weight: 500; transition: background .2s, border-color .2s, transform .2s var(--ease) }
.connection-devices a:hover { background: #ffffff1a; border-color: #6fe3d670; transform: translateY(-2px) }
.connection-devices svg { width: 16px; height: 16px; fill: currentColor }

.connection-illustration { position: relative }
@media (min-width: 1240px) { .connection-illustration { margin-right: -30px } }
.connection-illustration img { width: 100% }
.join-button { position: absolute; left: 6.7%; top: 71.7%; width: 49.2%; height: 20.4%; border: 0; border-radius: 999px; background: transparent; cursor: pointer; transition: transform .25s var(--ease), box-shadow .25s }
.join-button:hover { box-shadow: 0 0 0 3px #ffffffaa, 0 0 26px #5ee8e099 }
.join-button:active { transform: translateY(2px) }

.server-questions { display: grid; grid-template-columns: .9fr 1.3fr; gap: 50px; width: min(1150px, 100% - 48px); margin: 70px auto 0; padding-top: 54px; border-top: 1px solid #8fe8ff22 }
.server-questions h2 { font-size: clamp(26px, 2.6vw, 34px); margin: 0 0 13px }
.server-questions-intro p { color: var(--muted); font-size: 14px; line-height: 1.7 }
.server-questions-list { display: grid; gap: 12px }
.server-questions details { background: #ffffff0a; border: 1px solid #ffffff1a; border-radius: 16px; transition: border-color .25s, background .25s }
.server-questions details[open] { background: #ffffff10; border-color: #6fe3d655 }
.server-questions summary { cursor: pointer; list-style: none; padding: 18px 58px 18px 22px; position: relative; font-weight: 600; font-size: 15px }
.server-questions summary::-webkit-details-marker { display: none }
.server-questions summary:after { content: "+"; position: absolute; right: 20px; top: 50%; translate: 0 -50%; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: #8fe8ff1a; color: var(--gold-soft); font-size: 18px; transition: rotate .25s var(--ease) }
.server-questions details[open] summary:after { rotate: 45deg }
.server-questions details p { padding: 0 22px 20px; color: var(--muted); font-size: 14px; line-height: 1.75 }

/* le duo */
.duo-section { padding: 100px 32px 50px; background: #0c2a4a }
.duo-inner { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 64px; max-width: 1180px; margin: 0 auto }
.duo-copy h2 { font-size: clamp(36px, 4.2vw, 54px); margin-bottom: 18px }
.duo-copy h2 span { display: block; color: var(--gold-soft) }
.duo-copy > p { color: var(--muted); font-size: 15px; line-height: 1.75; margin-bottom: 30px; max-width: 540px }
.duo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 28px; margin-bottom: 34px; list-style: none }
.duo-grid li { display: grid; grid-template-columns: 40px 1fr; gap: 2px 12px; align-items: start }
.duo-grid i { grid-row: span 2; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-style: normal; font-size: 19px; background: #ff8a6b24 }
.duo-grid b { font-size: 15px; font-weight: 700; color: #fff }
.duo-grid span { color: var(--muted); font-size: 13px; line-height: 1.55 }
.duo-art img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 18% 55%; border-radius: 28px; border: 1px solid #ffffff1f; box-shadow: 0 30px 70px #04102266 }

/* le carnet de bord */
.logbook-section { background: linear-gradient(#0c2a4a, #0b2443); padding: 70px 24px 40px }
.logbook { max-width: 1060px; margin: 0 auto; position: relative; padding: 64px 54px 58px; color: #123a5a; rotate: -.6deg; filter: drop-shadow(0 26px 40px #04102270) }
.logbook:before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 18% 12%, #ffffff, #0000 45%), radial-gradient(circle at 85% 85%, #bfe0ee99, #0000 55%), linear-gradient(170deg, #f4fbff, #d7ecf6); clip-path: polygon(0% 1.6%, 7% .4%, 15% 1.4%, 26% .2%, 38% 1.2%, 50% .3%, 61% 1.5%, 73% .5%, 84% 1.3%, 93% .2%, 100% 1.1%, 99.4% 14%, 100% 29%, 99.2% 45%, 99.9% 61%, 99.3% 78%, 100% 98.6%, 92% 99.8%, 81% 98.7%, 69% 99.7%, 57% 98.6%, 45% 99.6%, 33% 98.8%, 21% 99.8%, 10% 98.7%, 0% 99.6%, .6% 84%, 0% 67%, .7% 50%, 0% 33%, .5% 16%) }
.logbook:after { content: ""; position: absolute; left: 50%; top: -14px; width: 120px; height: 30px; translate: -50% 0; rotate: 2deg; background: #ffe06699; box-shadow: 0 2px 6px #0002 }
.logbook-title { text-align: center; font: 800 clamp(34px, 4.6vw, 58px)/1.05 var(--title); text-transform: uppercase; color: #0f3557; margin-bottom: 40px }
.logbook-title span { display: block; color: #139fb4; font-size: .6em; margin-top: 6px }
.logbook ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; list-style: none; position: relative }
.logbook li { text-align: center; background: #ffffff8c; border: 1px dashed #1f6f9a40; border-radius: 16px; padding: 22px 12px }
.logbook strong { display: block; font: 800 26px/1.15 var(--title); color: #0f3557 }
.logbook li span { display: block; margin-top: 6px; font-size: 13px; color: #3f6680 }
.logbook-leaf { position: absolute; width: 74px; z-index: 2 }
.logbook-leaf { animation: leaf 5.5s ease-in-out infinite alternate; transform-origin: 30% 80% }
.logbook-leaf + .logbook-leaf { animation-duration: 6.5s; animation-delay: -2s; transform-origin: 70% 20% }
@keyframes leaf { from { transform: rotate(-7deg) translateY(0) } to { transform: rotate(8deg) translateY(-6px) } }

/* les jeux */
.community-world { background: radial-gradient(at 70% 40%, #1d5c8a55, #0000 60%), linear-gradient(#0b2443, #0d2a52 45%, #0b1630); position: relative }
.games-section { padding: 90px 0 60px; position: relative; overflow: hidden }
.games-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; max-width: 1180px; margin: 0 auto; padding: 0 32px; list-style: none }
.games-grid > li { flex: 0 0 calc(25% - 15px); min-width: 0 }
.games-grid.duo { max-width: 940px }
.games-grid.duo > li { flex-basis: calc(50% - 10px) }
.games-grid.duo .pic { aspect-ratio: 16 / 10 }
.game-tile { color: var(--text); height: 100%; display: flex; flex-direction: column; text-decoration: none; transition: transform .3s var(--ease) }
.game-tile:hover { transform: translateY(-4px) }
.game-tile .pic { aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; border-radius: 20px; border: 1px solid #ffffff1f; box-shadow: 0 18px 40px #04102255; transition: border-color .3s }
.game-tile:hover .pic { border-color: #6fe3d680 }
.game-tile .pic img { width: 100%; height: 100%; object-fit: contain; transition: transform .4s var(--ease); filter: drop-shadow(0 12px 16px #04102255) }
.game-tile .pic.cover img { object-fit: cover }
.game-tile .pic.small img { width: 72%; height: 72% }
.game-tile:hover .pic img { transform: scale(1.04) rotate(-1deg) }
.game-tile h3 { text-transform: uppercase; margin-top: 22px; font: 800 23px/1.1 var(--title) }
.game-tile p { color: var(--muted); margin: 8px 0 16px; font-size: 13px; line-height: 1.6 }
.game-tile-link { color: var(--gold-soft); align-items: center; gap: 6px; margin-top: auto; font-size: 12px; font-weight: 600; display: inline-flex }
.game-tile:hover .game-tile-link { text-decoration: underline; text-underline-offset: 4px }

/* quoi de neuf */
.news-section { padding: 30px 0 50px }
.news-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; max-width: 1180px; margin: 0 auto; padding: 0 32px; list-style: none }
.news-card { display: flex; flex-direction: column; height: 100%; color: var(--text); text-decoration: none; transition: transform .3s var(--ease) }
.news-card:hover { transform: translateY(-4px) }
.news-pic { aspect-ratio: 16 / 9; display: grid; place-items: center; border-radius: 18px; overflow: hidden; background: radial-gradient(circle at 50% 60%, #1f7aa077, transparent 70%), linear-gradient(#123d63, #0d2a4a); box-shadow: 0 16px 34px #04102255; transition: border-color .3s }
.news-card:hover .news-pic { box-shadow: 0 16px 34px #04102255, inset 0 0 0 2px #6fe3d680 }
.news-pic img { height: 62%; width: auto; max-width: 70%; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 10px 14px #04102288); transition: transform .4s var(--ease) }
.news-card:hover .news-pic img { transform: scale(1.06) rotate(-2deg) }
.news-body { display: flex; flex-direction: column; flex: 1; padding: 20px 4px 0 }
.news-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 12px; color: var(--muted) }
.news-tag { color: var(--gold); background: #6fe3d614; border: 1px solid #6fe3d640; border-radius: 999px; padding: 3px 10px; font-weight: 700 }
.news-card h3 { font: 800 21px/1.15 var(--title); text-transform: uppercase; margin-bottom: 8px }
.news-card p { color: var(--muted); font-size: 13px; line-height: 1.6; margin-bottom: 14px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden }
.news-more { text-align: center; margin-top: 28px }

/* la chasse */
.hunt-section { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 50px; max-width: 1180px; margin: 0 auto; padding: 60px 32px 70px }
.hunt-section h2 { font-size: clamp(36px, 4.4vw, 56px); margin-bottom: 18px }
.hunt-section h2 span { display: block; color: var(--gold-soft) }
.hunt-section > div > p { color: var(--muted); font-size: 15px; line-height: 1.75; margin-bottom: 26px }
.hunt-list { list-style: none; display: grid; gap: 14px; margin-bottom: 30px }
.hunt-list li { display: flex; gap: 14px; align-items: flex-start; font-size: 14px; line-height: 1.6; color: #e4eef5 }
.hunt-list li b { color: #fff; display: block; font-size: 15px }
.hunt-list i { flex-shrink: 0; width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; font-style: normal; font-size: 18px; background: #6fe3d61f }

.hunt-section .voice-only { display: inline-block; margin-bottom: 20px; padding: 9px 14px; border-radius: 12px; font-size: 13px; font-weight: 600; line-height: 1.5; color: #bff7f0; background: #6fe3d61a }
.voice-art { position: relative; aspect-ratio: 1; max-width: 480px; width: 100%; margin: 0 auto }
.voice-distance { position: absolute; left: 50%; top: 47%; translate: -50% -50%; display: flex; align-items: center; gap: 3px; white-space: nowrap; padding: 8px 14px 8px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; color: #bff7f0; background: #0b1f3aee; border: 1px solid #6fe3d655; box-shadow: 0 10px 24px #04102266 }
.voice-distance i { width: 3px; height: 14px; margin-right: 1px; border-radius: 2px; background: #6fe3d6; transform-origin: 50% 100%; animation: level .9s ease-in-out infinite alternate }
.voice-distance i:nth-child(2) { animation-delay: -.3s } .voice-distance i:nth-child(3) { animation-delay: -.6s } .voice-distance i:nth-child(4) { animation-delay: -.15s; margin-right: 8px }
@keyframes level { from { transform: scaleY(.3) } to { transform: scaleY(1) } }
.voice-user { position: absolute; width: 26%; display: flex; flex-direction: column; align-items: center; gap: 8px }
.voice-user.a { left: 8%; top: 10% }
.voice-user.b { right: 8%; bottom: 10% }
.voice-user img { width: 100%; aspect-ratio: 1; border-radius: 50%; border: 3px solid #6fe3d6; box-shadow: 0 14px 30px #04102277; }
.voice-user.b { --ring: #ffe066 }
.voice-user.b img { border-color: #ffe066 }
.voice-user b { font-size: 13px; font-weight: 700; color: #fff; background: #0b1f3acc; border-radius: 999px; padding: 3px 12px }
.voice-art .bubble { position: absolute; max-width: 48%; margin: 0; padding: 12px 16px; border-radius: 18px; font-size: 14px; font-weight: 600; line-height: 1.4; box-shadow: 0 12px 30px #0410224d; animation: say 6s infinite }
.voice-art .bubble.a { left: 38%; top: 12%; color: #0f3557; background: #f3fbff; border-bottom-left-radius: 4px }
.voice-art .bubble.b { right: 38%; bottom: 17%; color: #3d2b00; background: #ffe066; border-bottom-right-radius: 4px; animation-delay: -3s }
@keyframes say { 0%, 45% { opacity: 1; transform: none } 52%, 93% { opacity: .8; transform: scale(.97) } 100% { opacity: 1; transform: none } }

/* rendez-vous et grades */
.events-section { padding: 40px 0 60px }
.events { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; max-width: 1180px; margin: 0 auto; padding: 0 32px }
.event { background: linear-gradient(#ffffff12, #ffffff05); border-radius: 20px; padding: 22px 20px }
.event .when { display: inline-block; color: #3d2b00; background: linear-gradient(#ffe066, #f4b81c); border-radius: 999px; padding: 4px 11px; font-size: 11px; font-weight: 700; margin-bottom: 14px }
.event h3 { font: 800 22px/1.15 var(--title); text-transform: uppercase; margin-bottom: 8px }
.event p { color: var(--muted); font-size: 13px; line-height: 1.6 }
.rarity-switch { display: flex; width: fit-content; margin: 0 auto 30px; padding: 5px; gap: 4px; border-radius: 999px; background: #ffffff0d; border: 1px solid #ffffff1c }
.rarity-switch button { cursor: pointer; border: 0; border-radius: 999px; padding: 9px 20px; font-size: 14px; font-weight: 700; color: var(--muted); background: transparent; transition: background .25s, color .25s }
.rarity-switch button[aria-selected="true"] { color: #063b44; background: linear-gradient(#3fdccf, #139fb4); box-shadow: 0 3px #0b6b7c }
.rarity-boards { display: grid }
.rarities { grid-area: 1 / 1; display: grid; grid-template-columns: repeat(5, 1fr); gap: 34px 14px; max-width: 1100px; margin: 0 auto; padding: 0 32px; list-style: none; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .45s, transform .45s var(--ease), visibility .45s }
.rarities.on { opacity: 1; visibility: visible; transform: none }
.rarities li { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; transition: transform .3s var(--ease) }
.rarities li:before { content: ""; position: absolute; top: -6px; left: 50%; width: 120px; height: 120px; translate: -50% 0; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--c) 45%, transparent), transparent 68%); z-index: -1 }
.rarities li:hover { transform: translateY(-4px) }
.rarities img { width: 96px; height: 96px; object-fit: contain; image-rendering: pixelated; margin-bottom: 8px; filter: drop-shadow(0 10px 14px #04102288) }
.rarities img.silhouette { filter: brightness(0) drop-shadow(0 0 10px var(--c)); opacity: .85 }
.rarities em { font-style: normal; color: #fff; font-size: 13px; font-weight: 600 }
.rarities em.mystery { color: var(--muted); font-style: italic; font-weight: 500 }
.rarities b { font: 800 20px/1.15 var(--title); text-transform: uppercase; color: var(--c) }
.rarities b.shine { color: transparent; -webkit-background-clip: text; background-clip: text; background-size: 200% 100%; animation: shine-text 4s linear infinite }
@keyframes shine-text { to { background-position: 200% 0 } }
.rarities span { color: var(--text); font-size: 13px; font-weight: 600 }
.rarities[data-board="animals"] span { color: var(--muted); font-weight: 500 }
.rarities small { color: var(--muted); font-size: 12px }
.rarity-note { text-align: center; color: var(--muted); font-size: 14px; max-width: 620px; margin: 26px auto 0; padding: 0 24px }
.rarity-note b { color: #fff }
.rarity-note .gold-text { color: #ffd166 }

/* recrutement et discord */
.community-art { position: relative; display: grid; place-items: center }
.community-art .glow { position: absolute; width: 90%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #5865f255, transparent 65%) }
.community-art img { position: relative; width: min(380px, 80%); filter: drop-shadow(0 24px 30px #04102277) }
.community-section { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 90px; max-width: 1220px; margin: auto; padding: 110px 48px 130px; position: relative }
.community-copy h2 { font-size: clamp(36px, 4.4vw, 56px); margin-bottom: 18px }
.community-copy > p { color: var(--muted); font-size: 15px; line-height: 1.75; margin-bottom: 34px; max-width: 520px }
.community-highlights { color: #e3eef5; flex-direction: column; gap: 16px; margin: 0 0 40px; font-size: 14px; list-style: none; display: flex }
.community-highlights li { align-items: center; gap: 12px; display: flex }
.community-highlights li > span { background: #5865f226; border-radius: 10px; place-items: center; width: 32px; height: 32px; display: grid; flex-shrink: 0 }
.discord-cta { isolation: isolate; position: relative; overflow: hidden; color: #fff; text-decoration: none; text-shadow: 0 1px 2px #22297a66; min-height: 56px; transition: transform .25s var(--ease), box-shadow .25s; background: linear-gradient(#7983f5, #5865f2); border: 1px solid #a5acff; border-radius: 16px; align-items: center; gap: 12px; padding: 10px 22px 10px 10px; font-size: 15px; font-weight: 700; display: inline-flex; box-shadow: 0 5px #3a43b5 }
.discord-cta:after { content: ""; z-index: -1; pointer-events: none; background: linear-gradient(100deg, #0000, #ffffff8c 50%, #0000); width: 40%; animation: cta-shine 6s cubic-bezier(.45, 0, .25, 1) 1.5s infinite; position: absolute; top: -4px; bottom: -4px; left: 0; transform: translate(-170%) skew(-18deg) }
@keyframes cta-shine { 0% { transform: translate(-170%) skew(-18deg) } 30%, 100% { transform: translate(370%) skew(-18deg) } }
.discord-cta .logo { background: #ffffff29; border-radius: 11px; place-items: center; width: 36px; height: 36px; display: grid; box-shadow: inset 0 1px #ffffff40 }
.discord-cta:hover { transform: translateY(-3px); box-shadow: 0 8px #3a43b5, 0 18px 36px #5865f25c }
.discord-cta:active { transform: translateY(3px); box-shadow: 0 2px #3a43b5 }
.discord-cta.gold { color: #3d2b00; text-shadow: none; background: linear-gradient(#ffe066, #f4b81c); border-color: #fff0a6; box-shadow: 0 5px #a37400 }
.discord-cta.gold:hover { box-shadow: 0 8px #a37400, 0 18px 36px #f4b81c55 }
.discord-cta.gold .logo { background: #fffbe080 }

/* la fin */
.finale-section { isolation: isolate; position: relative; overflow: hidden; padding: 130px 32px 110px; background: linear-gradient(#0b1630, #0b163088 30%, #0b1630aa 62%, #0b1630f2 88%, #0b1630), url(/img/fond.jpg) center 70% / cover }
.finale-inner { position: relative; z-index: 2; max-width: 760px; margin: 0 auto; text-align: center }
.finale-copy h2 { font-size: clamp(46px, 5.6vw, 78px) }
.finale-copy h2 > span { color: #ffe066; display: block }
.finale-copy > p { color: #e4eef5; text-wrap: balance; max-width: 460px; margin: 23px auto 27px; font-size: 14px; line-height: 1.8 }
.finale-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px }
.finale-actions .action-primary { position: relative }
.finale-actions .action-primary:after { content: ""; border-radius: inherit; pointer-events: none; animation: ripple 2.6s ease-out infinite; position: absolute; inset: -1px; box-shadow: 0 0 #3fdccf99 }
@keyframes ripple { 0% { box-shadow: 0 0 #3fdccf80 } 70%, to { box-shadow: 0 0 0 16px #3fdccf00 } }
.finale-meta { color: #e3eef5; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 24px 0 0; list-style: none; display: flex }
.finale-meta li { background: #ffffff10; border: 1px solid #8fe8ff2b; border-radius: 999px; padding: 6px 12px; font-size: 12px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px) }

/* pages intérieures */
body.page { --nav-top: 162px }
.page-hero { position: relative; margin-top: calc(-1 * var(--nav-top)); padding-bottom: 54px; background: linear-gradient(#0f4c6e66, #0c2a4acc 70%, #0b1630), url(/img/fond.jpg) center 35% / cover }
.page-hero .hero-top { padding: 20px }
.page-hero .hero-logo { margin: 14px 0 18px }
.page-hero .hero-logo a { max-width: 110px }
.page-hero-text { position: relative; max-width: 860px; margin: 0 auto; padding: 96px 24px 0; text-align: center }
.page-hero-text h1 { font-size: clamp(38px, 5vw, 64px) }
.page-hero-text > p { color: #e4eef5; font-size: 16px; line-height: 1.7; max-width: 640px; margin: 16px auto 0; text-wrap: balance }
.crumbs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 18px; font-size: 13px; color: #cfe3ef }
.crumbs a { text-decoration: none; color: var(--gold) }
.crumbs a:hover { text-decoration: underline }
.crumbs i { font-style: normal; opacity: .5 }
.page-main { padding: 50px 0 90px; background: linear-gradient(#0b1630, #0c2a4a 40%, #0b1630) }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px }
.wrap + .wrap { margin-top: 56px }
.small-title { font-size: clamp(26px, 3vw, 36px); margin-bottom: 22px }
.small-title small, .rarity-head small { font: 600 14px Poppins, sans-serif; color: var(--muted); text-transform: none; margin-left: 8px }
.small-title a { color: inherit; text-decoration: none }
.small-title a:hover { color: var(--gold) }
.more { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center }

.prose { color: #dbe8f0; font-size: 15px; line-height: 1.8 }
.prose > * + * { margin-top: 16px }
.prose h2 { font: 800 clamp(24px, 2.6vw, 32px)/1.15 var(--title); text-transform: uppercase; color: var(--cream); margin-top: 44px }
.prose h2:first-child { margin-top: 0 }
.prose h3 { font-size: 18px; color: #fff; margin-top: 28px }
.prose a { color: var(--gold) }
.prose ul, .prose ol { padding-left: 22px }
.prose li + li { margin-top: 6px }
.prose strong, .prose b { color: #fff }
.prose code, .table code { font: 600 13px ui-monospace, Menlo, monospace; color: var(--gold); background: #6fe3d614; border-radius: 6px; padding: 2px 6px }
.prose .note { color: #bff7f0; background: #6fe3d61a; border-radius: 12px; padding: 12px 16px; font-size: 14px }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch }
.table { width: 100%; border-collapse: collapse; font-size: 14px }
.table th { text-align: left; color: var(--gold); font-size: 12px; font-weight: 700; text-transform: uppercase; padding: 10px 12px; border-bottom: 1px solid #ffffff1f; white-space: nowrap }
.table td { padding: 12px; border-bottom: 1px solid #ffffff12; vertical-align: middle }
.table tr:hover td { background: #ffffff06 }
.rarity-table .rarity-name { color: var(--c); font: 800 17px var(--title); text-transform: uppercase }

.px { image-rendering: pixelated }
.fish-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 12px; list-style: none; padding: 0 }
.fish-grid.small { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)) }
.prose .fish-grid { padding: 0; margin-top: 14px }
.prose .fish-grid li + li { margin-top: 0 }
.fish-card { display: flex; flex-direction: column; align-items: center; gap: 2px; height: 100%; padding: 14px 8px 12px; text-align: center; text-decoration: none; color: #fff; border-radius: 16px; background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--c) 22%, transparent), transparent 70%), #ffffff08; transition: transform .25s var(--ease), background-color .25s }
.fish-card:hover { transform: translateY(-3px); background-color: #ffffff12 }
.fish-card img { width: 64px; height: 64px; margin-bottom: 4px; filter: drop-shadow(0 6px 8px #04102266) }
.fish-card b { font-size: 13px; font-weight: 600; line-height: 1.3 }
.fish-card span { font-size: 11px; color: var(--c); font-weight: 700 }
.fish-card { position: relative }
.fish-card .season-tag { position: absolute; top: 6px; right: 6px; padding: 2px 7px; border-radius: 999px; font-size: 10px; font-weight: 800; color: #2b1300; background: linear-gradient(#ffb36b, #ff8a1c) }
.rarity-head { font: 800 20px var(--title); text-transform: uppercase; color: var(--c); margin: 30px 0 12px }
.rarity-tag { display: inline-block; color: var(--c); font: 800 16px var(--title); text-transform: uppercase }

.fish-sheet { display: grid; grid-template-columns: 300px 1fr; gap: 40px; align-items: center }
.fish-portrait { aspect-ratio: 1; display: grid; place-items: center; border-radius: 28px; background: radial-gradient(circle, color-mix(in srgb, var(--c) 35%, transparent), transparent 70%), #ffffff08 }
.fish-portrait img { width: 78%; height: auto; filter: drop-shadow(0 16px 20px #04102288) }
.facts { display: grid; gap: 2px }
.facts div { display: grid; grid-template-columns: 170px 1fr; gap: 16px; padding: 13px 0; border-bottom: 1px solid #ffffff12 }
.facts dt { color: var(--muted); font-size: 14px }
.facts dd { color: #fff; font-size: 15px; font-weight: 500 }
.facts dd a { color: var(--gold) }
.facts small { color: var(--muted); font-weight: 400; margin-left: 6px }

.spot-grid, .wiki-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; list-style: none }
.spot-card, .wiki-tile { position: relative; display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 22px 20px; border-radius: 20px; text-decoration: none; color: #fff; background: linear-gradient(#ffffff10, #ffffff05); transition: transform .25s var(--ease), background-color .25s }
.spot-card:hover, .wiki-tile:hover { transform: translateY(-4px); background-color: #ffffff0d }
.spot-card img { width: 56px; height: 56px; margin-bottom: 4px }
.spot-num { position: absolute; top: 16px; right: 18px; font: 800 30px var(--title); color: #ffffff1f }
.spot-card b, .wiki-tile b { font: 800 20px/1.15 var(--title); text-transform: uppercase }
.spot-card > span, .wiki-tile > span { color: var(--muted); font-size: 13px; line-height: 1.55 }
.spot-card small { margin-top: auto; padding-top: 8px; color: var(--gold); font-size: 12px; font-weight: 600 }
.wiki-pic { width: 64px; height: 64px; display: grid; place-items: center; margin-bottom: 6px }
.wiki-pic img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; border-radius: 12px }
.prose .connection-devices { padding: 0; margin-top: 18px }
.prose .connection-devices li + li { margin-top: 0 }
.bait { padding: 26px 0; border-bottom: 1px solid #ffffff12 }
.bait h2 { margin-top: 0 }
.bait-meta { color: var(--gold); font-size: 13px; font-weight: 600 }

.steps { counter-reset: step; list-style: none; padding: 0 !important }
.steps li { counter-increment: step; position: relative; padding-left: 52px; min-height: 38px }
.steps li + li { margin-top: 18px !important }
.steps li:before { content: counter(step); position: absolute; left: 0; top: -2px; width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; font: 800 18px var(--title); color: #063b44; background: linear-gradient(#a9f5ec, #6fe3d6) }
.platform { scroll-margin-top: 90px; padding: 34px; border-radius: 24px; background: linear-gradient(#ffffff0e, #ffffff04) }
.platform + .platform { margin-top: 22px !important }
.platform h2 { display: flex; align-items: center; gap: 12px; margin-top: 0 }
.platform h2 svg { width: 28px; height: 28px; fill: var(--gold) }
.address-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 22px; border-radius: 18px; background: #6fe3d614 }
.address-card code { font-size: 18px !important; background: none !important; padding: 0 !important }
.cards-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px }
.cards-2 > div { padding: 26px; border-radius: 20px; background: linear-gradient(#ffffff0e, #ffffff04) }
.cards-2 h3 { margin-top: 0 }

/* page introuvable */
body.bare { --nav-top: 0px }
body.bare .site-nav { display: none }
.lost { min-height: calc(100svh - 38px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 40px 24px 70px; text-align: center; background: radial-gradient(ellipse at 50% 60%, #1f7aa055, transparent 60%), linear-gradient(#0f4c6ecc, #0b1630 85%), url(/img/fond.jpg) center 60% / cover }
.lost-logo img { width: 96px; height: auto; filter: drop-shadow(0 10px 22px #0a2a3f55) }
.lost-scene { position: relative; margin: 6px 0 4px }
.lost-big { display: flex; align-items: center; gap: 6px; font: 800 clamp(120px, 22vw, 220px)/1 var(--title); color: var(--cream); text-shadow: 0 8px #0a1a3070 }
.lost-fish { width: .8em; height: .8em; margin: 0 -.05em; animation: lost-jump 3.2s cubic-bezier(.45, 0, .55, 1) infinite; filter: drop-shadow(0 14px 16px #04102288) }
@keyframes lost-jump { 0%, 100% { transform: translateY(18px) rotate(12deg) } 45% { transform: translateY(-28px) rotate(-14deg) } 60% { transform: translateY(-20px) rotate(-6deg) } }
.lost-ripple { position: absolute; left: 50%; bottom: -6px; width: 180px; height: 26px; translate: -50% 0; border-radius: 50%; border: 2px solid #6fe3d6; opacity: 0; animation: lost-ripple 2.6s ease-out infinite }
@keyframes lost-ripple { 0% { transform: scale(.4); opacity: .7 } 100% { transform: scale(1.4); opacity: 0 } }
.lost-text h1 { font-size: clamp(32px, 4.6vw, 52px) }
.lost-text > p { color: #e4eef5; font-size: 16px; max-width: 480px; margin: 14px auto 28px; text-wrap: balance }
.lost-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin-top: 30px; list-style: none; font-size: 14px }
.lost-links a { color: var(--gold); text-decoration: none }
.lost-links a:hover { text-decoration: underline }

/* visuels du wiki */
.spot-intro .dest > a { pointer-events: none }
.spot-intro .dest .dest-map { height: 230px }
.spot-intro .dest .dest-map img { width: 200px; height: 200px }
.spot-intro { display: grid; grid-template-columns: 340px 1fr; gap: 44px; align-items: center }
.spot-map { margin: 0; text-align: center }
.spot-map img { width: 100%; aspect-ratio: 1; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 24px 34px #04102299) }
.spot-map figcaption { color: var(--muted); font-size: 12px; margin-top: 8px }
.spot-stats { display: flex; flex-wrap: wrap; gap: 12px; list-style: none; padding: 0 !important; margin-top: 22px }
.spot-stats li { margin: 0 !important; padding: 14px 18px; border-radius: 16px; background: #ffffff0a; min-width: 120px }
.spot-stats b { display: block; font: 800 28px var(--title); color: var(--gold) }
.spot-stats span { color: var(--muted); font-size: 13px }
.spot-card { padding-top: 0; overflow: hidden }
.spot-map.small { display: block; margin: 0 -20px 6px; height: 170px; background: radial-gradient(circle at 50% 55%, #1f7aa055, transparent 70%) }
.spot-map.small img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; padding: 14px; transition: transform .4s var(--ease) }
.spot-card:hover .spot-map.small img { transform: scale(1.06) rotate(-3deg) }
.spot-card .spot-fish { position: absolute; top: 128px; right: 14px; width: 48px; height: 48px; filter: drop-shadow(0 6px 8px #04102288) }
.with-pic { display: flex; align-items: center; gap: 12px }
.with-pic img { flex-shrink: 0; image-rendering: pixelated }
.wiki-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 22px }
.wiki-card { position: relative; isolation: isolate; display: flex; flex-direction: column; height: 100%; padding: 10px; border-radius: 24px; text-decoration: none; color: #fff; background: linear-gradient(150deg, color-mix(in srgb, var(--c) 85%, #fff), var(--c) 40%, color-mix(in srgb, var(--c) 55%, #000)); box-shadow: 0 18px 40px #04102277, inset 0 1px #ffffff66; transition: transform .35s var(--ease), box-shadow .35s; transform-style: preserve-3d }
.wiki-card:before { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none; background: linear-gradient(115deg, transparent 35%, #ffffff55 48%, transparent 60%) 200% 0 / 250% 100% no-repeat; transition: background-position .8s var(--ease) }
.wiki-card:hover { transform: translateY(-8px) rotate(-1.5deg); box-shadow: 0 28px 50px #04102299, 0 0 0 2px #fff6, inset 0 1px #ffffff66 }
.wiki-card:hover:before { background-position: -60% 0 }
.wiki-card-num { position: absolute; top: 18px; left: 20px; z-index: 1; font: 800 15px var(--title); color: #ffffffcc; text-shadow: 0 2px #0004 }
.wiki-card-art { height: 190px; flex-shrink: 0; display: grid; place-items: center; border-radius: 16px 16px 6px 6px; background: radial-gradient(circle at 50% 45%, #ffffff55, transparent 60%), repeating-linear-gradient(45deg, #ffffff10 0 10px, transparent 10px 20px), color-mix(in srgb, var(--c) 60%, #0b1630) }
.wiki-card-art img { width: 62%; height: 150px; object-fit: contain; image-rendering: pixelated; border-radius: 14px; filter: drop-shadow(0 14px 16px #0008); transition: transform .45s var(--ease) }
.wiki-card:hover .wiki-card-art img { transform: scale(1.1) rotate(-5deg) translateY(-4px) }
.wiki-card-body { position: relative; flex: 1; display: flex; flex-direction: column; gap: 4px; margin-top: 8px; padding: 14px 16px 16px; border-radius: 6px 6px 16px 16px; background: #0b1630e8 }
.wiki-card-body b { font: 800 21px/1.1 var(--title); text-transform: uppercase; color: color-mix(in srgb, var(--c) 45%, #fff) }
.wiki-card-body span { color: var(--muted); font-size: 13px; line-height: 1.5; padding-right: 22px }
.wiki-card-body i { position: absolute; right: 14px; bottom: 14px; font-style: normal; font-weight: 800; color: var(--c); transition: transform .3s var(--ease) }
.wiki-card:hover .wiki-card-body i { transform: translateX(4px) }

.section-lead { color: var(--muted); font-size: 15px; line-height: 1.7; max-width: 680px; margin: -8px 0 22px }
.sub-nav { position: sticky; top: var(--sub-top, 132px); z-index: 50; display: flex; gap: 8px; width: fit-content; max-width: calc(100% - 32px); margin: -26px auto 40px; padding: 6px; overflow-x: auto; border-radius: 999px; background: #0b1630e6; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 10px 26px #04102266; scrollbar-width: none }
.sub-nav::-webkit-scrollbar { display: none }
.sub-nav a { flex-shrink: 0; padding: 9px 16px; border-radius: 999px; font-size: 13px; font-weight: 600; color: #dbe8f0; text-decoration: none; white-space: nowrap; transition: background .2s, color .2s }
.sub-nav a:hover, .sub-nav a.on { color: #063b44; background: linear-gradient(#a9f5ec, #6fe3d6) }
.cosmo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; list-style: none; padding: 0 }
.cosmo { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 20px 16px 18px; text-align: center; border-radius: 20px; background: linear-gradient(#ffffff0e, #ffffff04); scroll-margin-top: 200px }
.cosmo-pic { width: 84px; height: 84px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle, #6fe3d62e, transparent 70%) }
.cosmo-pic img { width: 72px; height: 72px; object-fit: contain; filter: drop-shadow(0 8px 10px #04102288) }
.cosmo-emoji { font-size: 40px }
.cosmo b { font: 800 17px/1.2 var(--title); text-transform: uppercase; color: #fff }
.cosmo > span:not(.cosmo-pic):not(.cosmo-tag) { color: var(--muted); font-size: 13px; line-height: 1.5 }
.cosmo small { margin-top: auto; padding-top: 6px; color: var(--gold); font-size: 12px; font-weight: 600 }
.cosmo small a { color: inherit }
.cosmo-tag { position: absolute; top: 12px; right: 12px; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; color: #2b1300; background: linear-gradient(#ffb36b, #ff8a1c) }

/* anti-spoil */
.spoiler-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 16px; max-width: 1032px; margin: 0 auto 40px; padding: 12px 18px; border-radius: 16px; background: #ffffff0a; color: var(--muted); font-size: 13px; text-align: center }
.spoiler-toggle { cursor: pointer; border: 0; border-radius: 999px; padding: 8px 16px; font-size: 13px; font-weight: 700; color: #063b44; background: linear-gradient(#a9f5ec, #6fe3d6) }
body.reveal .spoiler-toggle { color: #dbe8f0; background: #ffffff14 }
.secret img { filter: brightness(0) drop-shadow(0 0 8px color-mix(in srgb, var(--c) 80%, transparent)) !important }
.fish-card.secret b { filter: blur(6px); user-select: none }
body.reveal .secret img { filter: drop-shadow(0 6px 8px #04102266) !important }
body.reveal .fish-card.secret b { filter: none }
.fish-portrait { position: relative }
.fish-portrait .spoiler-toggle { position: absolute; bottom: 18px; left: 50%; translate: -50% 0 }
body.reveal .fish-portrait .spoiler-toggle { display: none }

/* page découvrir */
.feature { display: grid; grid-template-columns: 1fr 1.05fr; align-items: center; gap: 64px; max-width: 1180px; margin: 0 auto; padding: 70px 32px; scroll-margin-top: 170px }
.feature.reverse .feature-text { order: 2 }
.feature.wide { display: block }
.feature-text h2 { font-size: clamp(32px, 3.8vw, 50px); margin-bottom: 18px }
.feature-text h2 span { display: block; color: var(--gold-soft) }
.feature-text > p { color: var(--muted); font-size: 15px; line-height: 1.8; margin-bottom: 14px; max-width: 540px }
.feature-text.center { text-align: center; max-width: 720px; margin: 0 auto 34px }
.feature-text.center > p { margin-inline: auto }
.feature-text code { font: 600 13px ui-monospace, Menlo, monospace; color: var(--gold); background: #6fe3d614; border-radius: 6px; padding: 2px 6px }
.text-link { display: inline-block; margin-top: 8px; color: var(--gold); font-weight: 700; font-size: 14px; text-decoration: none }
.text-link:hover { text-decoration: underline; text-underline-offset: 4px }
.feature-art { position: relative }
.feature-photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 28px; box-shadow: 0 30px 70px #04102266 }
.feature-sticker { position: absolute; width: 26%; right: -4%; bottom: -8%; filter: drop-shadow(0 16px 20px #04102288); animation: glide 6s ease-in-out infinite }
@keyframes glide { 0%, 100% { transform: translate(0, 0) rotate(0) } 50% { transform: translate(-6px, -8px) rotate(-3deg) } }
.feature-map { width: 82%; margin: 0 auto; filter: drop-shadow(0 24px 30px #04102266); animation: float-map 8s ease-in-out infinite }
@keyframes float-map { 50% { transform: translateY(-10px) rotate(1deg) } }
.spot-strip { display: flex; gap: 16px; overflow-x: auto; padding: 10px 32px 18px; list-style: none; scroll-snap-type: x mandatory; scrollbar-width: thin }
.catch-card { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 44px 30px 34px; border-radius: 28px; text-align: center; background: radial-gradient(circle at 50% 40%, #f5a62340, transparent 60%), linear-gradient(#123d63, #0c2a4a) }
.catch-burst { position: absolute; left: 50%; top: 42%; width: 520px; aspect-ratio: 1; translate: -50% -50%; background: repeating-conic-gradient(#ffd16614 0 8deg, transparent 8deg 22deg); border-radius: 50%; animation: spin 30s linear infinite; mask-image: radial-gradient(circle, #000 20%, transparent 65%); -webkit-mask-image: radial-gradient(circle, #000 20%, transparent 65%) }
@keyframes spin { to { rotate: 360deg } }
.catch-tag { position: relative; padding: 7px 16px; border-radius: 999px; font-size: 13px; font-weight: 800; color: #3d2b00; background: linear-gradient(#ffe066, #f4b81c); box-shadow: 0 4px #a37400 }
.catch-fish { position: relative; width: 70%; margin: 6px 0 2px; filter: drop-shadow(0 16px 18px #04102299); animation: bob 4s ease-in-out infinite }
.catch-card b { position: relative; font: 800 26px var(--title); text-transform: uppercase; color: #ffd166 }
.catch-meta { position: relative; color: var(--muted); font-size: 14px }
.catch-rod { position: absolute; width: 90px; right: 16px; bottom: 12px; opacity: .9; rotate: 10deg }
.school { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px 10px }
.school-fish { display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--c) 40%, transparent), transparent 68%); animation: bob 4s ease-in-out infinite; animation-delay: calc(var(--i) * -.4s); transition: transform .25s var(--ease) }
.school-fish:hover { transform: scale(1.12) }
.school-fish img { width: 78%; height: auto; filter: drop-shadow(0 8px 10px #04102288) }
@keyframes bob { 50% { translate: 0 -6px } }
.event-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; list-style: none }
.event-cards li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 26px 18px; border-radius: 22px; background: linear-gradient(#ffffff0e, #ffffff04) }
.event-cards img { width: 76px; height: 76px; object-fit: contain; margin-bottom: 6px; filter: drop-shadow(0 10px 12px #04102288) }
.event-cards b { font: 800 20px var(--title); text-transform: uppercase }
.event-cards span { color: var(--muted); font-size: 13px; line-height: 1.55 }
.shelf { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; list-style: none }
.shelf li { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px 10px 16px; border-radius: 22px; background: radial-gradient(circle at 50% 35%, #6fe3d62a, transparent 70%), #ffffff08; font-size: 13px; font-weight: 600; color: #dbe8f0 }
.shelf img { width: 64px; height: 64px; object-fit: contain; filter: drop-shadow(0 8px 10px #04102288); transition: transform .3s var(--ease) }
.shelf li:hover img { transform: translateY(-4px) rotate(-6deg) }
.feature-cta { text-align: center; padding: 50px 24px 30px }
.feature-cta h2 { font-size: clamp(32px, 4vw, 52px); margin-bottom: 28px }
.feature-cta h2 span { display: block; color: var(--gold-soft) }
.feature-cta .finale-actions { justify-content: center }
.feature .voice-art { max-width: 440px }

/* fenêtres */
.modal { margin: auto; width: min(460px, calc(100% - 32px)); padding: 34px 32px 30px; border: 0; border-radius: 28px; color: var(--text); text-align: center; background: radial-gradient(circle at 50% 0, #5865f255, transparent 60%), linear-gradient(#152a4a, #0b1630); box-shadow: 0 30px 80px #000a }
.modal::backdrop { background: #04102299; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px) }
.modal[open] { animation: modal-in .35s var(--ease) }
@keyframes modal-in { from { opacity: 0; transform: translateY(16px) scale(.97) } }
.modal-close { position: absolute; top: 14px; right: 16px; width: 36px; height: 36px; border: 0; border-radius: 50%; cursor: pointer; font-size: 22px; color: #dbe8f0; background: #ffffff12 }
.modal-close:hover { background: #ffffff22 }
.modal-badge { width: 76px; height: 76px; margin: 0 auto 18px; display: grid; place-items: center; border-radius: 22px; color: #fff; background: linear-gradient(#7983f5, #5865f2); box-shadow: 0 6px #3a43b5, 0 18px 30px #5865f255 }
.modal h2 { font-size: 30px; margin-bottom: 12px }
.modal > p { color: var(--muted); font-size: 14px; line-height: 1.7 }
.modal-list { display: grid; gap: 10px; margin: 20px auto 26px; width: fit-content; text-align: left; list-style: none; font-size: 14px }
.modal-list li { display: flex; align-items: center; gap: 12px }
.modal-list span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: #5865f226 }
.modal .discord-cta { justify-content: center; width: 100% }
.modal-note { margin-top: 14px; font-size: 12px !important }
.modal label { display: block; text-align: left; font-size: 13px; font-weight: 600; margin: 16px 0 6px; color: #dbe8f0 }
.modal input[type=text], .modal input[type=number] { width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid #ffffff22; background: #0b1630; color: #fff; font: 500 15px Poppins, sans-serif }
.modal input:focus { outline: 2px solid #6fe3d6; outline-offset: 1px }
.modal .check { display: flex; align-items: center; gap: 12px; font-weight: 500; color: var(--muted); cursor: pointer }
.modal .check input { appearance: none; -webkit-appearance: none; flex-shrink: 0; width: 22px; height: 22px; margin: 0; border-radius: 7px; border: 2px solid #ffffff33; background: #0b1630; display: grid; place-items: center; cursor: pointer; transition: background .2s, border-color .2s }
.modal .check input:checked { border-color: #6fe3d6; background: linear-gradient(#a9f5ec, #6fe3d6) }
.modal .check input:checked:after { content: ""; width: 6px; height: 11px; margin-top: -2px; border: solid #063b44; border-width: 0 3px 3px 0; rotate: 45deg }
.modal .check input:focus-visible { outline: 2px solid #f9d991; outline-offset: 2px }

/* page voter */
.vote-me { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 40px; text-align: center }
.vote-me label, .shop-who label { font-size: 13px; font-weight: 700; color: var(--gold); text-transform: uppercase }
.vote-me-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 20px }
.vote-me input, .shop-who input { width: 260px; padding: 13px 16px; border-radius: 14px; border: 1px solid #ffffff22; background: #0b1630; color: #fff; font: 600 16px Poppins, sans-serif; text-align: center }
.vote-me input:focus, .shop-who input:focus { outline: 2px solid #6fe3d6 }
.vote-me-count { color: var(--muted); font-size: 14px }
.vote-me-count b { color: #fff; font: 800 24px var(--title) }
.vote-sites { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; list-style: none }
.vote-sites li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 30px 22px 24px; text-align: center; border-radius: 24px; background: radial-gradient(circle at 50% 0, #ffe06626, transparent 60%), linear-gradient(#ffffff10, #ffffff04) }
.vote-num { position: absolute; top: 14px; left: 18px; font: 800 30px var(--title); color: #ffffff22 }
.vote-sites b { font: 800 24px var(--title); text-transform: uppercase }
.vote-site { color: var(--gold); font-size: 13px; font-weight: 600 }
.vote-sites p { color: var(--muted); font-size: 14px; margin: 6px 0 4px }
.vote-wait { font-size: 12px; font-weight: 700; padding: 4px 11px; border-radius: 999px; color: #ffd6a0; background: #ff8a1c22; margin-bottom: 10px }
.vote-wait.ready { color: #b8ffb0; background: #7cff6b1f }
.vote-sites .action-button { width: 100%; color: #3d2b00; text-shadow: none; background: linear-gradient(#ffe066, #f4b81c); border-color: #fff0a6; box-shadow: 0 5px #a37400 }
.vote-sites .action-button:hover { box-shadow: 0 8px #a37400 }
.vote-hint { text-align: center; color: var(--muted); font-size: 13px; margin-top: 18px }
.vote-goals { display: grid; grid-template-columns: 1fr 1fr; gap: 18px }
.goal-card { padding: 30px 30px 26px; border-radius: 26px; background: linear-gradient(#ffffff10, #ffffff04) }
.goal-card.party { background: radial-gradient(circle at 100% 0, #e265a433, transparent 55%), linear-gradient(#ffffff10, #ffffff04) }
.goal-card.common { background: radial-gradient(circle at 100% 0, #ffd16633, transparent 55%), linear-gradient(#ffffff10, #ffffff04) }
.goal-card h2 { font-size: clamp(24px, 2.6vw, 32px); margin-bottom: 12px }
.goal-card h2 span { display: block; color: var(--gold-soft) }
.goal-card > p { color: var(--muted); font-size: 14px; line-height: 1.7 }
.goal-bar { height: 14px; margin: 20px 0 10px; border-radius: 999px; background: #ffffff14; overflow: hidden }
.goal-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #e265a4, #ff8ad0); transition: width 1.2s var(--ease) }
.goal-bar.gold i { background: linear-gradient(90deg, #f4b81c, #ffe066) }
.goal-count { font-size: 13px !important }
.goal-count b { color: #fff; font: 800 20px var(--title) }
.tiers { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; list-style: none; counter-reset: none }
.tiers li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px 12px 18px; text-align: center; border-radius: 22px; background: #ffffff08; transition: background .3s }
.tiers li:after { content: "🔒"; position: absolute; top: 10px; right: 12px; font-size: 13px; opacity: .6 }
.tiers li.done { background: radial-gradient(circle at 50% 30%, #7cff6b26, transparent 70%), #ffffff0c }
.tiers li.done:after { content: "✓"; color: #7cff6b; font-weight: 800; opacity: 1 }
.tier-at { font: 800 15px var(--title); color: var(--gold) }
.tiers img { width: 56px; height: 56px; object-fit: contain; filter: drop-shadow(0 8px 10px #04102288) }
.tiers b { font-size: 13px; font-weight: 600; color: #fff }
.board-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 26px }
.board-head .small-title { margin: 0 }
.board-head .rarity-switch { margin: 0 }
.podium { display: flex; align-items: flex-end; justify-content: center; gap: 14px }
.podium:empty { display: none }
.podium-step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 170px; padding: 20px 10px 54px; border-radius: 22px 22px 8px 8px; background: linear-gradient(#ffffff14, #ffffff05) }
.podium-step img { width: 64px; height: 64px; border-radius: 12px; image-rendering: pixelated }
.podium-step b { font-size: 15px }
.podium-step span { color: var(--muted); font-size: 13px }
.podium-step i { position: absolute; bottom: 10px; font: 800 30px var(--title); font-style: normal }
.podium-step.p1 { order: 2; padding-top: 34px; padding-bottom: 80px; background: linear-gradient(#ffd16633, #ffffff05) } .podium-step.p1 i { color: #ffd166 }
.podium-step.p2 { order: 1 } .podium-step.p2 i { color: #d6e2ee }
.podium-step.p3 { order: 3; padding-bottom: 40px } .podium-step.p3 i { color: #e8a36b }
.ranking { max-width: 640px; margin: 18px auto 0; list-style: none; display: grid; gap: 8px }
.ranking li { display: flex; align-items: center; gap: 14px; padding: 10px 16px; border-radius: 14px; background: #ffffff08 }
.ranking img, .recent img { width: 36px; height: 36px; border-radius: 8px; image-rendering: pixelated }
.ranking b { flex: 1 }
.ranking span { color: var(--muted); font-size: 13px }
.rank-n { width: 26px; font: 800 18px var(--title); color: var(--gold) !important }
.board-empty { text-align: center; color: var(--muted); font-size: 14px; padding: 30px 20px; border-radius: 20px; background: #ffffff06 }
.prose details { margin-top: 12px; border-radius: 16px; background: #ffffff0a }
.prose summary { cursor: pointer; padding: 16px 20px; font-weight: 600; color: #fff }
.prose details p { padding: 0 20px 18px; margin: 0 }

/* page boutique */
.shop-top { display: grid; grid-template-columns: 1fr 1.4fr; gap: 20px; align-items: stretch; margin-bottom: 44px }
.shop-who, .shop-goal { padding: 24px 26px; border-radius: 22px; background: #ffffff0a }
.shop-who { display: flex; flex-direction: column; justify-content: center; gap: 10px }
.shop-who input { width: 100%; text-align: left }
.shop-goal-head { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; color: var(--muted) }
.shop-goal-head > b { color: #fff }
.shop-goal-head span b { color: #fff; font: 800 18px var(--title) }
.shop-goal .goal-bar { margin: 12px 0 10px }
.shop-goal p { color: var(--muted); font-size: 13px }
.rank-offer { display: grid; grid-template-columns: 380px 1fr; gap: 40px; align-items: center; padding: 34px; border-radius: 30px; background: radial-gradient(circle at 0 0, #ff8ad02e, transparent 50%), radial-gradient(circle at 100% 100%, #ffd16626, transparent 50%), linear-gradient(#ffffff10, #ffffff04) }
.rank-offer-art { position: relative; display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 30px 22px 24px; border-radius: 24px; overflow: hidden; background: radial-gradient(circle at 20% 0, #ff8ad055, transparent 55%), radial-gradient(circle at 90% 100%, #ffd16644, transparent 55%), linear-gradient(160deg, #3b2a5e, #1a1f44) }
.rank-pill { padding: 8px 20px; border-radius: 999px; font: 800 24px var(--title); text-transform: uppercase; color: #2b1640; background: linear-gradient(90deg, #ff8ad0, #ffd166); box-shadow: 0 4px #9a4a7a, 0 10px 30px #ff8ad055 }
.chat-preview { width: 100%; padding: 14px 16px; border-radius: 14px; background: #0006; font: 500 13px/1.5 Poppins, sans-serif; color: #e8e8e8; text-align: left }
.chat-preview p + p { margin-top: 6px }
.chat-preview b { color: #fff }
.badge-tag { color: #ffd166; margin-right: 4px }
.mecene-name { background: linear-gradient(90deg, #ff8ad0, #ffd166); -webkit-background-clip: text; background-clip: text; color: transparent !important }
.mecene-name.alt { background-image: linear-gradient(90deg, #6fe3d6, #a9b4ff) }
.rank-gifts { display: flex; gap: 10px; list-style: none }
.rank-gifts li { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 84px; padding: 10px 6px; border-radius: 14px; background: #ffffff12; font-size: 11px; font-weight: 600; color: #e9d8ff }
.rank-gifts img { width: 46px; height: 46px; object-fit: contain }
.rank-price { font-size: 14px; font-weight: 700; color: #ffe8a6 }
.rank-offer-text h2 { font-size: clamp(30px, 3.4vw, 44px); margin-bottom: 12px }
.rank-offer-text > p { color: var(--muted); font-size: 15px; line-height: 1.75 }
.perks { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; margin: 20px 0 26px; font-size: 14px }
.perks li { position: relative; padding-left: 26px; color: #e4eef5 }
.perks li:before { content: "✦"; position: absolute; left: 0; color: #ffd166 }
.perks code { font: 600 12px ui-monospace, Menlo, monospace; color: var(--gold); background: #6fe3d614; border-radius: 6px; padding: 1px 5px }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; list-style: none }
.shop-grid.keys { grid-template-columns: repeat(3, 1fr) }
.product { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 18px 18px 18px; border-radius: 24px; background: linear-gradient(#ffffff10, #ffffff04); transition: transform .3s var(--ease) }
.product:hover { transform: translateY(-4px) }
.product.best { background: radial-gradient(circle at 50% 0, #ffd16633, transparent 60%), linear-gradient(#ffffff12, #ffffff05) }
.product-flag { position: absolute; top: 14px; right: 14px; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; color: #3d2b00; background: linear-gradient(#ffe066, #f4b81c) }
.product-pic { position: relative; display: grid; place-items: center; height: 150px; margin-bottom: 8px; border-radius: 18px; background: radial-gradient(circle at 50% 55%, color-mix(in srgb, var(--c) 40%, transparent), transparent 68%), #0b163066 }
.product-pic img { width: 92px; height: 92px; object-fit: contain; filter: drop-shadow(0 12px 14px #04102299); transition: transform .4s var(--ease) }
.product-pic img.second { position: absolute; width: 40px; height: 40px; right: 16%; bottom: 12%; filter: drop-shadow(0 6px 8px #04102299) }
.product:hover .product-pic img:first-child { transform: rotate(-8deg) scale(1.06) }
.product-pic .qty { position: absolute; bottom: 12px; right: 14px; font: 800 26px var(--title); color: #fff; text-shadow: 0 3px #0008 }
.product b { font: 800 21px var(--title); text-transform: uppercase }
.product > span:not(.product-flag) { color: var(--muted); font-size: 13px; line-height: 1.55 }
.product-buy { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 12px }
.product-buy strong { font: 800 22px var(--title); color: #fff }
.product-buy .action-button { min-height: 42px; padding: 10px 18px }
.recent { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; list-style: none }
.recent li { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 16px; background: #ffffff08 }
.recent div { flex: 1; display: flex; flex-direction: column }
.recent b { font-size: 14px } .recent span { color: var(--muted); font-size: 12px }
.recent strong { color: #ffd166; font: 800 16px var(--title) }
.shop-modal { background: radial-gradient(circle at 50% 0, #ffd16633, transparent 60%), linear-gradient(#152a4a, #0b1630) }
.buy-total { display: flex; justify-content: space-between; margin: 20px 0 14px; font-size: 15px !important; color: #fff !important }
.buy-total b { font: 800 22px var(--title) }
.buy-go { width: 100% }

/* bien débuter */
.center-title { text-align: center }
.gestures { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; list-style: none; counter-reset: none }
.gestures li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 30px 22px 26px; text-align: center; border-radius: 26px; background: radial-gradient(circle at 50% 30%, #6fe3d62a, transparent 65%), linear-gradient(#ffffff10, #ffffff04) }
.step-num { position: absolute; top: 14px; left: 18px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; font: 800 18px var(--title); color: #063b44; background: linear-gradient(#a9f5ec, #6fe3d6) }
.step-pic { height: 110px; display: grid; place-items: center }
.step-pic img { width: 96px; height: 96px; object-fit: contain; filter: drop-shadow(0 12px 14px #04102288); animation: bob 4s ease-in-out infinite }
.gestures b { font: 800 24px var(--title); text-transform: uppercase }
.gestures span:last-child { color: var(--muted); font-size: 14px; line-height: 1.6 }
.guide-list { display: grid; gap: 22px }
.guide-card { display: grid; grid-template-columns: 260px 1fr; align-items: center; gap: 34px; padding: 26px 34px 26px 26px; border-radius: 28px; background: linear-gradient(#ffffff0e, #ffffff04) }
.guide-card.reverse { grid-template-columns: 1fr 260px; padding: 26px 26px 26px 34px }
.guide-card.reverse .guide-art { order: 2 }
.guide-art { display: flex; align-items: center; justify-content: center; gap: 4px; height: 190px; border-radius: 22px; background: radial-gradient(circle at 50% 55%, #1f7aa077, transparent 70%), repeating-linear-gradient(45deg, #ffffff06 0 10px, transparent 10px 20px), #0b1630 }
.guide-art img { width: 84px; height: 84px; object-fit: contain; filter: drop-shadow(0 12px 14px #04102299); transition: transform .4s var(--ease) }
.guide-art img:only-child { width: 120px; height: 120px }
.guide-card:hover .guide-art img { transform: translateY(-6px) rotate(-5deg) }
.guide-num { font: 800 15px var(--title); color: var(--gold) }
.guide-text h2 { font-size: clamp(24px, 2.6vw, 32px); margin: 4px 0 10px }
.guide-text p { color: #dbe8f0; font-size: 15px; line-height: 1.75 }

/* appâts */
.bait-list { display: grid; gap: 20px }
.bait-card { display: grid; grid-template-columns: 170px 1fr; gap: 28px; align-items: start; padding: 24px; border-radius: 26px; background: linear-gradient(#ffffff0e, #ffffff04); scroll-margin-top: 170px }
.bait-pic { display: grid; place-items: center; aspect-ratio: 1; border-radius: 22px; background: radial-gradient(circle at 50% 50%, #ffd16633, transparent 68%), repeating-linear-gradient(45deg, #ffffff06 0 10px, transparent 10px 20px), #0b1630 }
.bait-pic img { width: 96px; height: 96px; filter: drop-shadow(0 12px 14px #04102299); animation: bob 4s ease-in-out infinite }
.bait-body h2 { font-size: clamp(24px, 2.6vw, 32px); margin-bottom: 6px }
.bait-body > p { color: #dbe8f0; font-size: 15px; line-height: 1.7 }
.bait-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 16px }
.bait-tag { padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; color: #ffe8a6; background: #ffd16622 }
.bait-tag.luck { color: #d7b8ff; background: #a55eea2a }
.bait-tag.water { color: #bff7f0; background: #6fe3d622 }
.bait-fans { color: var(--muted) !important; font-size: 13px !important; margin-bottom: 10px }
.bait-fans b { color: var(--gold) }
.bait-card .fish-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)) }

/* destinations */
.dest-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 22px; list-style: none }
.dest > a { --sea: #2ec4d6; position: relative; display: flex; flex-direction: column; height: 100%; padding: 10px; border-radius: 24px; text-decoration: none; color: #fff; background: linear-gradient(160deg, #f6efe0, #e6d8bc); box-shadow: 0 18px 40px #04102277; transition: transform .35s var(--ease), box-shadow .35s }
.dest.salt > a { --sea: #1e7bd6 }
.dest.dream > a { --sea: #a55eea; background: linear-gradient(160deg, #f1e6ff, #d9c4f2) }
.dest > a:hover { transform: translateY(-8px) rotate(-1.2deg); box-shadow: 0 28px 50px #04102299 }
.dest-top { display: flex; align-items: center; gap: 10px; padding: 6px 8px 10px }
.dest-flag { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px #0003; font-size: 18px; color: #a55eea; overflow: hidden }
.dest-flag img { width: 100%; height: 100%; object-fit: cover; scale: 1.5 }
.dest-country { font: 800 18px var(--title); text-transform: uppercase; color: #2a1f14 }
.dest-stamp { margin-left: auto; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; border: 2px dashed color-mix(in srgb, var(--sea) 70%, #000); color: color-mix(in srgb, var(--sea) 70%, #000); font: 800 16px var(--title); rotate: 12deg; opacity: .8 }
.dest-map { display: grid; place-items: center; height: 190px; border-radius: 16px; background: radial-gradient(ellipse 6px 2px at 20% 25%, #ffffff66 60%, transparent 70%) 0 0 / 46px 34px, radial-gradient(ellipse 6px 2px at 70% 70%, #ffffff55 60%, transparent 70%) 0 0 / 46px 34px, radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--sea) 45%, #fff), color-mix(in srgb, var(--sea) 80%, #fff) 75%); box-shadow: inset 0 0 0 3px #ffffff55, inset 0 0 30px #0002 }
.dest-map { overflow: hidden }
.dest-map img { width: 160px; height: 160px; max-width: 85%; object-fit: contain; filter: drop-shadow(0 8px 10px #0003); transition: transform .45s var(--ease) }
.dest > a:hover .dest-map img { transform: scale(1.07) rotate(-4deg) }
.dest-body { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 14px 8px 6px }
.dest-body b { font: 800 20px/1.15 var(--title); text-transform: uppercase; color: #1b2a44 }
.dest-body > span:not(.dest-chips) { color: #4a5568; font-size: 13px; line-height: 1.5 }
.dest-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 6px }
.dest-chips i { font-style: normal; font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: 999px; color: #fff; background: color-mix(in srgb, var(--sea) 85%, #000) }
.spot-strip .dest { flex: 0 0 250px; scroll-snap-align: start }
.spot-strip { padding-top: 16px; padding-bottom: 30px }

/* aperçu des traînées et des effets */
.fx { position: relative; display: block; width: 84px; height: 84px }
.fx i { position: absolute; left: 50%; top: 50%; font-style: normal; line-height: 1; color: var(--pc, #fff); font-size: var(--ps); text-shadow: 0 0 6px var(--pc, #fff8); opacity: 0; animation: fx-burst 2.4s ease-out infinite; animation-delay: var(--pd) }
.fx.trail i { left: 64%; top: 62%; animation-name: fx-trail; animation-timing-function: linear }
@keyframes fx-burst { 0% { transform: translate(-50%, -50%) scale(.3); opacity: 0 } 12% { opacity: 1 } 100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1); opacity: 0 } }
@keyframes fx-trail { 0% { transform: translate(-50%, -50%) scale(1); opacity: 0 } 10% { opacity: 1 } 100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy) - 14px)) scale(.5); opacity: 0 } }
.fx-fish { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; translate: -50% -50%; animation: fx-pop 2.4s ease-out infinite }
@keyframes fx-pop { 0% { scale: .6 } 10% { scale: 1.15 } 25%, 100% { scale: 1 } }
.fx-walker { position: absolute; right: 2px; top: 50%; width: 34px; height: 34px; border-radius: 50%; translate: 0 -50%; border: 2px solid #ffffff66; animation: fx-walk .5s ease-in-out infinite alternate }
@keyframes fx-walk { to { translate: 0 calc(-50% - 3px) } }

/* articles */
.article-cover { display: grid; place-items: center; height: 260px; margin-bottom: 30px; border-radius: 24px; background: radial-gradient(circle at 50% 60%, #1f7aa077, transparent 70%), repeating-linear-gradient(45deg, #ffffff06 0 10px, transparent 10px 20px), #0b1630 }
.article-cover img { height: 150px; width: auto; max-width: 70%; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 16px 20px #04102299) }
.article-meta { display: flex; gap: 10px; align-items: center; color: var(--muted); font-size: 13px; margin-bottom: 8px }
.news-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 22px; list-style: none }

/* variantes */
.variants { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; list-style: none; padding: 0 !important; margin-top: 18px }
.variants li + li { margin-top: 0 !important }
.variant { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 22px 16px; border-radius: 20px; background: radial-gradient(circle at 50% 28%, var(--glow), transparent 62%), #ffffff08 }
.variant-pic img { width: 96px; height: 96px; filter: var(--tint) drop-shadow(0 10px 14px #04102288) }
.variant b { font: 800 22px var(--title); text-transform: uppercase; color: var(--c) }
.variant small { color: #fff; font-size: 13px; font-weight: 600 }
.variant > span:last-child { color: var(--muted); font-size: 13px; line-height: 1.55 }
.variant.melanique { --c: #b9a7d9; --glow: #6a4ca055; --tint: brightness(.32) contrast(1.4) saturate(.4) }
.variant.dore { --c: #ffd166; --glow: #f5a62366; --tint: sepia(1) saturate(3.5) hue-rotate(-8deg) brightness(1.15) }
.variant.albinos { --c: #ffe3ef; --glow: #ffd6f555; --tint: grayscale(1) brightness(1.75) sepia(.15) hue-rotate(300deg) }
@media (max-width: 700px) { .variants { grid-template-columns: 1fr } }

/* pied de page */
.site-footer { position: relative; z-index: 3; color: #b8c9d8; background: #0b1630 }
.footer-inner { max-width: 1180px; margin-inline: auto; padding: 10px 30px 22px; border-top: 1px solid #ffffff12; padding-top: 44px }
.footer-main { display: grid; grid-template-columns: 1.3fr repeat(4, 1fr); gap: clamp(24px, 4vw, 64px); align-items: start }
.footer-brand a { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; font: 800 24px var(--title); text-transform: uppercase; color: var(--cream) }
.footer-brand img { width: 64px; height: 64px }
.footer-brand p { margin-top: 14px; font-size: 13px; line-height: 1.7; max-width: 300px }
.footer-col h4 a { display: inline; padding: 0; font-size: inherit }
.footer-col h4 { color: var(--gold); text-transform: uppercase; font-size: 11px; font-weight: 600; margin-bottom: 14px }
.footer-col a { display: block; text-decoration: none; font-size: 14px; padding: 4px 0; transition: color .2s }
.footer-col a:hover { color: #fff }
.footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; border-top: 1px solid #ffffff12; margin-top: 34px; padding-top: 18px; font-size: 12px; color: #8ea3b8 }
.footer-bottom a { text-decoration: none }

.toast { position: fixed; z-index: 20000; left: 50%; bottom: 26px; translate: -50% 20px; opacity: 0; pointer-events: none; transition: opacity .25s, translate .35s var(--ease); background: linear-gradient(155deg, #1d3550f7, #12223af7); border: 1px solid #8fe8ff30; border-bottom: 2px solid #1f9fb3; border-radius: 14px; padding: 12px 18px; font-size: 14px; font-weight: 600; box-shadow: 0 12px 30px #0006; white-space: nowrap }
.toast.on { opacity: 1; translate: -50% 0 }

/* ---------- tablettes et téléphones ---------- */
@media (max-width: 1100px) {
  .games-grid > li { flex-basis: calc(33.333% - 13.4px) }
  .events { grid-template-columns: 1fr 1fr }
  .duo-inner { grid-template-columns: 1fr; text-align: center }
  .duo-copy > p { margin-inline: auto }
  .duo-grid { text-align: left; max-width: 560px; margin-inline: auto }
  .duo-art { max-width: 420px; margin: 0 auto }
  .news-grid { grid-template-columns: 1fr 1fr }
  .rarities { grid-template-columns: repeat(3, 1fr) }
}
@media (max-width: 900px) {
  .bait-card { grid-template-columns: 1fr; text-align: center }
  .bait-pic { max-width: 160px; margin: 0 auto; width: 100% }
  .bait-tags { justify-content: center }

  .gestures { grid-template-columns: 1fr }
  .guide-card, .guide-card.reverse { grid-template-columns: 1fr; padding: 20px; text-align: center }
  .guide-card.reverse .guide-art { order: 0 }

  .vote-sites, .vote-goals, .shop-top, .rank-offer { grid-template-columns: 1fr }
  .tiers { grid-template-columns: repeat(3, 1fr) }
  .rank-offer-art { max-width: 420px; width: 100%; margin: 0 auto }
  .shop-grid.keys { grid-template-columns: 1fr }

  .feature { grid-template-columns: 1fr; gap: 30px; padding: 50px 22px; text-align: center }
  .feature.reverse .feature-text { order: 0 }
  .feature-text > p { margin-inline: auto }
  .event-cards { grid-template-columns: 1fr 1fr }
  .spot-strip { padding-inline: 22px }

  .spot-intro { grid-template-columns: 1fr; gap: 20px }
  .spot-intro .dest { max-width: 340px; margin: 0 auto; width: 100% }

  .fish-sheet { grid-template-columns: 1fr; gap: 24px }
  .fish-portrait { max-width: 260px; margin: 0 auto; width: 100% }
  .facts div { grid-template-columns: 1fr; gap: 2px }
  .cards-2 { grid-template-columns: 1fr }

  .site-nav-shell { padding: 0; border-radius: 18px; flex-direction: column }
  .nav-burger { display: flex }
  .nav-links { display: none; flex-direction: column; padding: 0 14px 14px; width: 100% }
  .site-nav.open .nav-links { display: flex }
  .nav-links .nav-control { width: 100%; min-width: 220px }
  .connection-panel, .hunt-section, .community-section, .finale-inner { grid-template-columns: 1fr; text-align: center }
  .connection-copy > p, .community-copy > p, .finale-copy > p, .hunt-section > div > p { margin-inline: auto }
  .connection-address { margin-inline: auto; text-align: left }
  .connection-illustration { margin-right: 0 }
  .connection-devices, .finale-actions, .finale-meta { justify-content: center }
  .connection-illustration { max-width: 620px; margin: 0 auto; width: 100% }
  .online-line { justify-content: center }
  .server-questions { grid-template-columns: 1fr; gap: 26px; text-align: center }
  .server-questions-list { text-align: left }
  .hunt-list, .community-highlights { text-align: left; margin-inline: auto; max-width: 520px }
  .community-highlights { width: fit-content }
  .community-section { padding: 60px 24px 70px; gap: 40px }
  .community-art { order: -1 }
  .community-art img { width: min(240px, 60%) }
  .logbook ul { grid-template-columns: 1fr 1fr }
  .footer-main { grid-template-columns: 1fr 1fr }
  .footer-brand { grid-column: 1 / -1 }
}
@media (max-width: 640px) {
  .tiers { grid-template-columns: 1fr 1fr }
  .perks { grid-template-columns: 1fr }
  .podium-step { width: 104px }
  .rank-offer { padding: 22px }

  .event-cards { grid-template-columns: 1fr }
  .school { gap: 8px 4px }
  .shelf { gap: 10px }

  .sub-nav { --sub-top: 104px; border-radius: 16px; margin-top: -20px }

  body.page { --nav-top: 126px }
  .page-hero .hero-logo { margin: 4px 0 12px }
  .page-hero .hero-logo a { max-width: 90px }
  .page-hero-text { padding-top: 80px }
  .platform { padding: 24px 18px }
  .fish-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)) }

  .hero { min-height: 540px }
  .hero-logo a { max-width: 150px }
  .hero-logo { margin: 4px 0 12px }
  .recruit-bar > span:not(.tag) { display: none }
  :root { --nav-top: 186px }
  .hero-tagline { max-width: 300px; margin-inline: auto }
  .hero-actions { flex-direction: column; align-items: center; gap: 10px }
  .hero-actions .action-button { width: 230px; min-height: 44px; padding: 11px 15px; font-size: 13px }
  .hero-proof { gap: 4px 14px; font-size: 11px }
  .hero-proof li + li:before { content: none }
  .hide-mobile { display: none }
  .games-grid { gap: 12px; padding: 0 16px }
  .games-grid > li { flex-basis: calc(50% - 6px) }
  .games-grid.duo > li { flex-basis: 100% }
  .game-tile { padding: 10px 12px 16px }
  .game-tile h3 { font-size: 18px }
  .events { grid-template-columns: 1fr; padding: 0 20px }
  .duo-grid { grid-template-columns: 1fr }
  .duo-section { padding: 70px 20px 40px }
  .news-grid { grid-template-columns: 1fr; padding: 0 20px }
  .rarities { grid-template-columns: 1fr 1fr; padding: 0 16px; gap: 10px }
  .voice-art { max-width: 340px; margin-top: 10px }
  .voice-user { width: 28% }
  .voice-user.a { left: 0; top: 4% }
  .voice-user.b { right: 0; bottom: 4% }
  .voice-art .bubble { max-width: 58%; font-size: 12px; padding: 9px 12px; text-align: left }
  .voice-art .bubble.a { left: 34%; top: 6% }
  .voice-art .bubble.b { right: 34%; bottom: 14% }
  .voice-distance { top: 50%; font-size: 11px; padding: 6px 10px }
  .rarities img { width: 64px; height: 64px }
  .logbook { padding: 44px 20px 30px }
  .logbook ul { gap: 10px }
  .logbook strong { font-size: 21px }
  .play-scene { padding: 80px 20px 70px }
  .footer-main { grid-template-columns: 1fr }
}
@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after { animation: none !important; transition: none !important }
  [data-reveal] { opacity: 1; transform: none }
  .hero-motes { display: none }
}