/* =====================================================================
   CLOUD PVP — site public (cloudpvp.fr)
   Même style que le jeu : contours encre #1b1240, couleurs vives, polices Lilita One + Fredoka.
   ===================================================================== */
:root {
  --ink: #1b1240;
  --ink-2: #2a1d5e;
  --night: #150e33;
  --violet: #3d27b0;
  --violet-2: #2c1b85;
  --violet-3: #5a3fd6;
  --deep: #231763;
  --white: #ffffff;
  --txt-2: #ece8ff;
  --muted: #bdb4ef;
  --yellow: #ffd23f;
  --yellow-2: #e39a00;
  --blue: #2ea8ff;
  --red: #ff4d5e;
  --green: #4ce05b;
  --pink: #ff5fb3;
  --purple: #a66bff;
  --cyan: #33e3ff;
  --discord: #5865f2;
  --sky-1: #7fd6ff;
  --sky-2: #5aa8ff;
  --sky-3: #6e50f0;
  --rare: #3c9bff;
  --epic: #a66bff;
  --legend: #ffb400;
  --radius: 22px;
  --wrap: 1160px;
  --title: 'Lilita One', 'Arial Black', 'Trebuchet MS', sans-serif;
  --text: 'Fredoka', 'Trebuchet MS', 'Segoe UI', system-ui, sans-serif;
  --outline: 2px 0 0 var(--ink), -2px 0 0 var(--ink), 0 2px 0 var(--ink), 0 -2px 0 var(--ink),
    1.5px 1.5px 0 var(--ink), -1.5px 1.5px 0 var(--ink), 1.5px -1.5px 0 var(--ink), -1.5px -1.5px 0 var(--ink);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font: 500 17px/1.55 var(--text);
  color: var(--white);
  background: var(--violet);
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; font-family: var(--title); font-weight: 400; line-height: 1.1; letter-spacing: .3px; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
strong { font-weight: 700; }
code { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; }
[id] { scroll-margin-top: 76px; }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; border-radius: 8px; }

.wrap { width: min(var(--wrap), 100% - 32px); margin-inline: auto; }
.narrow { width: min(860px, 100% - 32px); }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--yellow); color: var(--ink); font-weight: 700; padding: 10px 16px; border-radius: 12px;
  border: 3px solid var(--ink); text-decoration: none;
}
.skip:focus { top: 12px; }

/* ---------------------------------------------------------------- boutons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font: 700 17px/1.1 var(--text); color: var(--ink); text-decoration: none; text-align: center;
  padding: 13px 20px; border: 3px solid var(--ink); border-radius: 16px; cursor: pointer;
  background: var(--white); box-shadow: 0 5px 0 var(--ink);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 7px 0 var(--ink); filter: brightness(1.04); }
.btn:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--ink); }
.btn .ico { width: 1.3em; height: 1.3em; flex: none; }
.btn-yellow { background: linear-gradient(180deg, #ffe680, var(--yellow) 55%, #ffc21a); }
.btn-discord { background: var(--discord); color: var(--white); }
.btn-ink { background: var(--ink); color: var(--white); box-shadow: 0 5px 0 #0b0720; }
.btn-white { background: var(--white); }
.btn-lg { font-size: 19px; padding: 16px 24px; border-radius: 18px; }
.btn-sm { font-size: 15px; padding: 8px 14px; border-radius: 13px; box-shadow: 0 4px 0 var(--ink); }
.btn-block { width: 100%; }
.cta { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------------------------------------------------------------- en-tête */
.top {
  position: sticky; top: 0; z-index: 50;
  background: rgba(44, 27, 133, .94);
  border-bottom: 3px solid var(--ink);
  transition: box-shadow .2s ease;
}
@supports (backdrop-filter: blur(8px)) { .top { background: rgba(44, 27, 133, .82); backdrop-filter: blur(10px) saturate(1.2); } }
.top.is-scrolled { box-shadow: 0 6px 0 rgba(27, 18, 64, .35); }
.top-in { display: flex; align-items: center; gap: 18px; height: 64px; }
.brand { flex: none; display: block; }
.brand img { height: 46px; width: auto; }
.nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav a {
  text-decoration: none; font-weight: 600; font-size: 16px; padding: 8px 12px; border-radius: 12px; color: var(--txt-2);
}
.nav a:hover { color: var(--ink); background: var(--yellow); }
.nav .ico { width: 18px; height: 18px; display: inline-block; vertical-align: -3px; margin-right: 6px; }
.top-play { flex: none; }
.brand + .top-play { margin-left: auto; }   /* pages sans menu (mentions, confidentialité) */
.burger { display: none; }

@media (max-width: 920px) {
  .top-in { gap: 10px; }
  .top-play { margin-left: auto; }
  .burger {
    display: grid; place-content: center; gap: 5px; width: 46px; height: 42px; flex: none;
    background: var(--white); border: 3px solid var(--ink); border-radius: 12px; box-shadow: 0 4px 0 var(--ink); cursor: pointer;
  }
  .burger span { display: block; width: 20px; height: 3px; border-radius: 3px; background: var(--ink); transition: transform .2s, opacity .2s; }
  .menu-open .burger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .menu-open .burger span:nth-child(2) { opacity: 0; }
  .menu-open .burger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
  .nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%; margin: 0;
    flex-direction: column; align-items: stretch; gap: 2px; padding: 12px 16px 18px;
    background: var(--violet-2); border-bottom: 3px solid var(--ink); box-shadow: 0 10px 0 rgba(27, 18, 64, .35);
  }
  .menu-open .nav { display: flex; }
  .nav a { font-size: 18px; padding: 12px 14px; }
}

/* ---------------------------------------------------------------- titres de section */
.sec { position: relative; padding: 84px 0 96px; }
.title {
  text-align: center; font-size: clamp(36px, 6.4vw, 62px); color: var(--white);
  text-shadow: 3px 0 0 var(--ink), -3px 0 0 var(--ink), 0 3px 0 var(--ink), 0 -3px 0 var(--ink),
    2.2px 2.2px 0 var(--ink), -2.2px 2.2px 0 var(--ink), 2.2px -2.2px 0 var(--ink), -2.2px -2.2px 0 var(--ink),
    0 7px 0 var(--ink);
  transform: rotate(-1.5deg);
}
.subtitle {
  text-align: center; max-width: 700px; margin: 18px auto 44px; font-weight: 600; font-size: 19px; color: var(--txt-2);
}

/* ---------------------------------------------------------------- bords en nuages */
.edge {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 56px; pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 56' preserveAspectRatio='none'%3E%3Cpath d='M0 56V34c12-12 30-14 44-6 8-16 30-22 46-12 12-12 34-12 44 2 12-12 34-10 42 4 12-10 30-8 38 4 14-8 32-4 46 8V56Z' fill='%233d27b0'/%3E%3C/svg%3E") repeat-x bottom / 260px 56px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 56' preserveAspectRatio='none'%3E%3Cpath d='M0 56V30c14-12 32-12 44-2 10-16 32-20 46-8 14-12 36-10 44 4 12-10 32-8 40 6 12-8 30-6 40 6 12-6 28-2 46 8V56Z' fill='%23ffffff' fill-opacity='.35'/%3E%3C/svg%3E") repeat-x 90px calc(100% - 10px) / 260px 56px;
}
.edge-top-violet {
  top: -1px; bottom: auto; transform: scaleY(-1);
}

/* ---------------------------------------------------------------- fonds de section */
.sec-violet { background: var(--violet); }
.sec-ink {
  background:
    radial-gradient(1200px 500px at 50% 0%, rgba(110, 80, 240, .35), transparent 70%),
    var(--deep);
}
.sec-sky {
  background: linear-gradient(180deg, #6fc6ff 0%, var(--sky-2) 40%, var(--sky-3) 100%);
  padding-top: 110px; padding-bottom: 120px;
}
.sec-pink {
  background:
    repeating-conic-gradient(from 0deg at 50% 30%, rgba(255, 255, 255, .07) 0deg 9deg, transparent 9deg 20deg),
    linear-gradient(160deg, #e0479f 0%, #a2389f 45%, #6a2fd6 100%);
  padding-top: 110px;
}

/* ---------------------------------------------------------------- accueil */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(170deg, var(--sky-1) 0%, var(--sky-2) 38%, var(--sky-3) 82%, #5b3fdc 100%);
  padding: 42px 0 120px;
}
.rays {
  position: absolute; inset: -20% -10% 0; z-index: -1; pointer-events: none;
  background: repeating-conic-gradient(from 4deg at 68% 46%, rgba(255, 255, 255, .16) 0deg 8deg, transparent 8deg 20deg);
  -webkit-mask-image: radial-gradient(closest-side at 68% 46%, #000 30%, transparent 100%);
  mask-image: radial-gradient(closest-side at 68% 46%, #000 30%, transparent 100%);
}
.puff { position: absolute; z-index: -1; pointer-events: none; opacity: .95; animation: drift 38s ease-in-out infinite alternate; }
.puff svg { width: 100%; height: auto; }
.puff-1 { width: 220px; left: -40px; top: 120px; }
.puff-2 { width: 170px; right: 4%; top: 26px; animation-duration: 46s; opacity: .8; }
.puff-3 { width: 260px; right: 30%; bottom: 70px; animation-duration: 52s; opacity: .7; }
@keyframes drift { from { transform: translateX(0); } to { transform: translateX(60px); } }

.hero-in { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 28px; }
.eyebrow {
  display: inline-block; font-weight: 700; font-size: 15px; letter-spacing: .6px; text-transform: uppercase;
  color: var(--ink); background: var(--white); border: 3px solid var(--ink); border-radius: 999px; padding: 6px 14px;
  box-shadow: 0 4px 0 var(--ink);
}
.hero-logo { margin: 14px 0 0 -2.5%; }
.hero-logo img { width: min(560px, 100%); filter: drop-shadow(0 8px 0 rgba(27, 18, 64, .25)); }
.slogan {
  font-family: var(--title); font-size: clamp(26px, 3.6vw, 40px); line-height: 1.1; color: var(--yellow);
  text-shadow: 3px 0 0 var(--ink), -3px 0 0 var(--ink), 0 3px 0 var(--ink), 0 -3px 0 var(--ink),
    2.2px 2.2px 0 var(--ink), -2.2px 2.2px 0 var(--ink), 2.2px -2.2px 0 var(--ink), -2.2px -2.2px 0 var(--ink), 0 6px 0 var(--ink);
  transform: rotate(-2deg); transform-origin: left; margin-top: 2px;
}
.lead { margin-top: 22px; font-size: 19px; font-weight: 600; max-width: 560px; text-shadow: var(--outline), 0 3px 0 var(--ink); }
.hero .cta { margin-top: 26px; }
.hero-note { margin-top: 16px; font-weight: 600; font-size: 15px; text-shadow: var(--outline); }
.hero-note a { color: var(--yellow); }

.hero-art { position: relative; min-height: 470px; }
.polaroid {
  position: absolute; margin: 0; width: 56%; padding: 8px 8px 0; background: var(--white);
  border: 3px solid var(--ink); border-radius: 12px; box-shadow: 0 8px 0 rgba(27, 18, 64, .55);
}
.polaroid img { border-radius: 6px; border: 2px solid var(--ink); aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.polaroid figcaption { font-family: var(--title); color: var(--ink); text-align: center; font-size: 17px; padding: 6px 0 8px; }
.p1 { left: 0; top: 6px; transform: rotate(-7deg); }
.p2 { right: 0; top: 70px; transform: rotate(6deg); }
.p3 { left: 8%; bottom: 10px; transform: rotate(3deg); width: 50%; }
.nimbo-big {
  position: absolute; right: -2%; bottom: -18px; width: 54%; max-width: 300px;
  filter: drop-shadow(0 12px 0 rgba(27, 18, 64, .3)); animation: float 5s ease-in-out infinite;
}
.nimbo-big svg { width: 100%; height: auto; }
@keyframes float { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-14px) rotate(2deg); } }

.hero-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; list-style: none; margin-top: 46px; }
.hero-chips li {
  font-family: var(--title); font-size: 17px; color: var(--ink); background: var(--white);
  border: 3px solid var(--ink); border-radius: 999px; padding: 7px 16px; box-shadow: 0 4px 0 var(--ink);
}
.hero-chips li:nth-child(odd) { background: var(--yellow); }

@media (max-width: 920px) {
  .hero { padding-top: 28px; }
  .hero-in { grid-template-columns: 1fr; }
  .hero-text { text-align: center; }
  .hero-logo { margin-left: auto; margin-right: auto; }
  .hero-logo img { margin: 0 auto; width: min(460px, 100%); }
  .slogan { transform-origin: center; }
  .lead { margin-left: auto; margin-right: auto; }
  .hero .cta { justify-content: center; }
  .hero-art { min-height: 0; height: 330px; max-width: 520px; width: 100%; margin: 6px auto 0; }
  .polaroid { width: 54%; }
  .p3 { display: none; }
  .p2 { top: 40px; }
  .nimbo-big { width: 46%; right: 4%; bottom: -8px; }
  .hero-chips { margin-top: 34px; }
  .puff-3 { display: none; }
  .lead { font-size: 17.5px; }
}
@media (max-width: 520px) {
  .hero-art { height: 250px; }
  .polaroid figcaption { font-size: 14px; }
  .hero .btn-lg { width: 100%; }
  .hero-chips li { font-size: 15px; padding: 6px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .puff, .nimbo-big, .float { animation: none !important; }
}

/* ---------------------------------------------------------------- atouts */
.perks-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.perk {
  background: var(--white); color: var(--ink); border: 3px solid var(--ink); border-radius: var(--radius);
  box-shadow: 0 6px 0 var(--ink); padding: 22px 22px 24px;
}
.perk-ico { width: 54px; height: 54px; margin-bottom: 12px; }
.perk h3 { font-size: 23px; margin-bottom: 8px; }
.perk p { color: #3b3266; }
.ranked {
  display: grid; grid-template-columns: .8fr 1.2fr; align-items: center; gap: 26px; margin-top: 30px;
  background: var(--violet-2); border: 3px solid var(--ink); border-radius: var(--radius); box-shadow: 0 6px 0 var(--ink);
  padding: 24px 26px;
}
.ranked h3 { font-size: 28px; margin-bottom: 8px; text-shadow: var(--outline), 0 4px 0 var(--ink); }
.ranked p { color: var(--txt-2); }
.ranks { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; list-style: none; }
.ranks li { display: flex; flex-direction: column; align-items: center; gap: 4px; font-weight: 700; font-size: 13px; color: var(--txt-2); text-align: center; }
.rank-ico { width: 100%; max-width: 64px; }
.rank-ico svg { width: 100%; height: auto; overflow: visible; }
@media (max-width: 920px) {
  .perks-grid { grid-template-columns: 1fr 1fr; }
  .ranked { grid-template-columns: 1fr; text-align: center; }
}
@media (max-width: 600px) {
  .perks-grid { grid-template-columns: 1fr; gap: 16px; }
  .ranks { grid-template-columns: repeat(4, 1fr); row-gap: 14px; }
}

/* ---------------------------------------------------------------- modes */
.modes { display: grid; grid-template-columns: repeat(6, 1fr); gap: 22px; }
.mode {
  grid-column: span 2; display: flex; flex-direction: column; overflow: hidden;
  background: var(--violet-2); border: 3px solid var(--ink); border-radius: var(--radius); box-shadow: 0 7px 0 #0d0826;
  --accent: #a66bff;
}
.mode[data-k="bomb"] { --accent: #ff8a1f; }
.mode[data-k="duel"] { --accent: #f6b73c; }
.mode[data-k="redzone"] { --accent: #ff2d46; }
.mode[data-k="tdm"] { --accent: #3c9bff; }
.mode[data-k="ffa"] { --accent: #a66bff; }
.mode[data-k="gungame"] { --accent: #2fc95a; }
.mode[data-k="kart"] { --accent: #22c6e8; }
.mode[data-k="chase"] { --accent: #ffb02e; }
.mode[data-k="carfight"] { --accent: #ff5a36; }
.mode[data-k="aimlab"] { --accent: #2fcf86; }
.mode-art {
  position: relative; aspect-ratio: 16 / 10; border-bottom: 3px solid var(--ink); overflow: hidden;
  background: radial-gradient(circle at 50% 58%, color-mix(in srgb, var(--accent) 55%, #fff) 0%, var(--accent) 62%, color-mix(in srgb, var(--accent) 75%, #1b1240) 100%);
  display: grid; place-items: center;
}
.mode-art svg { width: 62%; height: auto; max-height: 92%; overflow: visible; }
.mode-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.tag {
  align-self: flex-start; font-weight: 700; font-size: 13px; letter-spacing: .5px; text-transform: uppercase;
  color: var(--ink); background: var(--yellow); border: 2.5px solid var(--ink); border-radius: 999px; padding: 3px 11px;
}
.tag-pink { background: var(--pink); color: var(--white); }
.mode h3 { font-size: 30px; text-shadow: var(--outline), 0 4px 0 var(--ink); }
.mode-sub { display: block; font-family: var(--text); font-weight: 600; font-size: 15px; color: var(--muted); text-shadow: none; margin-top: 4px; }
.pitch { color: var(--txt-2); }
.mini { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; }
.mini li {
  font-weight: 700; font-size: 13.5px; color: var(--ink); background: var(--white);
  border: 2.5px solid var(--ink); border-radius: 999px; padding: 3px 10px;
}
.mode details { margin-top: auto; padding-top: 4px; }
.mode summary, .faq summary { cursor: pointer; list-style: none; }
.mode summary::-webkit-details-marker, .faq summary::-webkit-details-marker { display: none; }
.mode summary {
  display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px;
  color: var(--white); border: 2.5px solid var(--accent); border-radius: 12px; padding: 6px 12px;
}
.mode summary::after {
  content: ''; width: 9px; height: 9px; border-right: 3px solid currentColor; border-bottom: 3px solid currentColor;
  transform: rotate(45deg) translateY(-3px); transition: transform .2s;
}
.mode details[open] summary::after { transform: rotate(225deg) translate(-2px, -1px); }
.mode summary:hover { background: color-mix(in srgb, var(--accent) 30%, transparent); }
.rules-list { list-style: none; margin-top: 12px; display: grid; gap: 8px; }
.rules-list li { position: relative; padding-left: 20px; color: var(--txt-2); font-size: 16px; }
.rules-list li::before { content: ''; position: absolute; left: 3px; top: .55em; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--ink); }
.where { margin-top: 10px; font-size: 15px; color: var(--muted); }
.where strong { color: var(--white); }

.mode-big { grid-column: span 3; flex-direction: row; }
.mode-big .mode-art { flex: 0 0 42%; aspect-ratio: auto; border-bottom: 0; border-right: 3px solid var(--ink); }
.mode-big .mode-art svg { width: 82%; }
@media (max-width: 1060px) {
  .modes { grid-template-columns: repeat(2, 1fr); }
  .mode, .mode-big { grid-column: span 1; flex-direction: column; }
  .mode-big .mode-art { flex: none; aspect-ratio: 16 / 10; border-right: 0; border-bottom: 3px solid var(--ink); }
  .mode-big .mode-art svg { width: 62%; }
}
@media (max-width: 640px) {
  .modes { grid-template-columns: 1fr; gap: 18px; }
  .mode-art { aspect-ratio: 16 / 8; }
  .mode-big .mode-art { aspect-ratio: 16 / 8; }
  .mode-art svg, .mode-big .mode-art svg { width: 46%; }
}

.chill {
  display: flex; align-items: center; gap: 22px; margin-top: 30px;
  background: linear-gradient(135deg, #2fcf86, #22c6e8); color: var(--ink);
  border: 3px solid var(--ink); border-radius: var(--radius); box-shadow: 0 6px 0 #0d0826; padding: 20px 26px;
}
.chill-nimbo { flex: none; width: 92px; }
.chill-nimbo svg { width: 100%; height: auto; }
.chill h3 { font-size: 26px; margin-bottom: 4px; }
.chill p { font-weight: 600; }
@media (max-width: 600px) { .chill { flex-direction: column; text-align: center; } }

/* ---------------------------------------------------------------- maps */
.maps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.map {
  display: flex; flex-direction: column; overflow: hidden; background: var(--white); color: var(--ink);
  border: 3px solid var(--ink); border-radius: var(--radius); box-shadow: 0 6px 0 var(--ink);
}
.map[data-k="halloween"] { grid-column: span 2; flex-direction: row; }
.map[data-k="halloween"] .map-img { flex: 0 0 60%; border-bottom: 0; border-right: 3px solid var(--ink); }
.map[data-k="halloween"] .map-img img { height: 100%; aspect-ratio: auto; }
.map-img { position: relative; border-bottom: 3px solid var(--ink); background: var(--ink); }
.map-img img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.badge-hallo {
  position: absolute; left: 14px; top: 14px; font-family: var(--title); font-size: 17px; color: var(--ink);
  background: #ff9f1a; border: 3px solid var(--ink); border-radius: 999px; padding: 4px 14px; box-shadow: 0 4px 0 var(--ink);
  transform: rotate(-3deg);
}
.map-body { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.area { font-weight: 700; font-size: 13px; letter-spacing: .6px; text-transform: uppercase; color: var(--violet-3); }
.map h3 { font-size: 27px; }
.map p { color: #3b3266; }
.map .mini { margin-top: auto; padding-top: 4px; }
.map .mini li { background: #efeaff; border-color: #cfc5ff; color: var(--violet-2); }
.maps-sub { text-align: center; font-size: 34px; margin-top: 56px; text-shadow: var(--outline), 0 5px 0 var(--ink); }
.maps-subtext { text-align: center; max-width: 640px; margin: 12px auto 26px; color: var(--txt-2); font-weight: 600; }
.map-small h3 { font-size: 23px; }
.city {
  margin-top: 30px; padding: 18px 22px; border: 3px dashed rgba(255, 255, 255, .45); border-radius: var(--radius);
  color: var(--txt-2); text-align: center;
}
.city strong { color: var(--white); }
@media (max-width: 1000px) {
  .maps { grid-template-columns: 1fr 1fr; }
  .map[data-k="halloween"] { grid-column: span 2; }
}
@media (max-width: 620px) {
  .maps { grid-template-columns: 1fr; gap: 18px; }
  .map[data-k="halloween"] { grid-column: auto; flex-direction: column; }
  .map[data-k="halloween"] .map-img { flex: none; border-right: 0; border-bottom: 3px solid var(--ink); }
  .map[data-k="halloween"] .map-img img { height: auto; aspect-ratio: 16 / 9; }
}

/* ---------------------------------------------------------------- rejoindre */
.sec-sky .subtitle { color: var(--white); text-shadow: var(--outline); }
.must {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 20px;
  background: var(--white); color: var(--ink); border: 3px solid var(--ink); border-radius: var(--radius);
  box-shadow: 0 6px 0 var(--ink); padding: 20px 24px; margin-bottom: 30px;
  border-left: 14px solid var(--discord);
}
.must-ico { width: 60px; height: 60px; color: var(--white); background: var(--discord); border: 3px solid var(--ink); border-radius: 18px; padding: 10px; }
.must-title { font-family: var(--title); font-size: 25px; line-height: 1.15; margin-bottom: 4px; }
.must p:not(.must-title) { color: #3b3266; }
@media (max-width: 760px) {
  .must { grid-template-columns: 1fr; text-align: center; justify-items: center; border-left-width: 3px; border-top: 12px solid var(--discord); }
}
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; list-style: none; counter-reset: none; }
.step {
  position: relative; background: var(--white); color: var(--ink); border: 3px solid var(--ink); border-radius: var(--radius);
  box-shadow: 0 6px 0 var(--ink); padding: 26px 22px 24px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start;
}
.step-wide { grid-column: span 2; }
.step-n {
  position: absolute; top: -18px; left: 18px; width: 44px; height: 44px; display: grid; place-items: center;
  font-family: var(--title); font-size: 24px; color: var(--ink); background: var(--yellow);
  border: 3px solid var(--ink); border-radius: 50%; box-shadow: 0 4px 0 var(--ink);
}
.step h3 { font-size: 24px; margin-top: 8px; }
.step p { color: #3b3266; }
.step .btn { margin-top: auto; }
.connect {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; width: 100%;
  background: var(--ink); border-radius: 14px; padding: 10px 10px 10px 16px;
}
.connect code { color: var(--yellow); font-size: 17px; font-weight: 700; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.copy.is-ok { background: var(--green); }
.step-wide .btn-lg { margin-top: 6px; }
.stuck {
  margin-top: 30px; background: rgba(27, 18, 64, .35); border: 3px solid var(--ink); border-radius: var(--radius); padding: 22px 26px;
}
.stuck h3 { font-size: 24px; margin-bottom: 10px; text-shadow: var(--outline); }
.stuck ul { display: grid; gap: 8px; list-style: none; }
.stuck li { position: relative; padding-left: 22px; }
.stuck li::before { content: '☁'; position: absolute; left: 0; top: 0; color: var(--yellow); }
@media (max-width: 920px) { .steps { grid-template-columns: 1fr 1fr; row-gap: 34px; } }
@media (max-width: 620px) {
  .steps { grid-template-columns: 1fr; }
  .step-wide { grid-column: auto; }
  .step .btn { width: 100%; }
}

/* ---------------------------------------------------------------- boutique */
.shop-state {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px; text-align: center;
  background: var(--ink); border: 3px dashed var(--yellow); border-radius: var(--radius); padding: 16px 22px; margin-bottom: 30px;
}
.shop-state-txt { font-weight: 700; color: var(--yellow); }
.shop-state.is-open { border-style: solid; border-color: var(--green); }
.shop-state.is-open .shop-state-txt { color: var(--white); }
.currencies { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.currency {
  display: flex; gap: 18px; align-items: flex-start; background: var(--white); color: var(--ink);
  border: 3px solid var(--ink); border-radius: var(--radius); box-shadow: 0 6px 0 var(--ink); padding: 22px;
}
.cur-ico { width: 64px; height: 64px; flex: none; }
.currency h3 { font-size: 27px; margin-bottom: 6px; }
.currency p { color: #3b3266; }
.currency .btn { margin-top: 14px; }
.small { font-size: 15px; margin-top: 10px; color: #5a5185; }
.rate {
  display: inline-block; margin-top: 12px; font-family: var(--title); font-size: 21px; color: var(--ink) !important;
  background: #e8f7ff; border: 3px solid var(--ink); border-radius: 12px; padding: 4px 12px; transform: rotate(-1.5deg);
}
.rate strong { font-weight: 400; }
.shop-h { text-align: center; font-size: clamp(30px, 4.4vw, 40px); margin-top: 60px; text-shadow: var(--outline), 0 5px 0 var(--ink); }
.shop-p { text-align: center; max-width: 640px; margin: 10px auto 26px; color: var(--txt-2); font-weight: 600; }

.vips { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.vip {
  position: relative; display: flex; flex-direction: column; gap: 16px; padding: 24px; color: var(--white);
  border: 3px solid var(--ink); border-radius: 26px; box-shadow: 0 8px 0 var(--ink); overflow: hidden; isolation: isolate;
}
.vip::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: repeating-conic-gradient(from 0deg at 85% 0%, rgba(255, 255, 255, .1) 0deg 8deg, transparent 8deg 18deg);
}
.vip-nuage { background: linear-gradient(160deg, #8fdcff 0%, #3aa2f0 55%, #1f6fd6 100%); }
.vip-orage { background: linear-gradient(160deg, #b9a4ff 0%, #7a5cf0 50%, #4a2fc4 100%); }
.vip-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.vip h4 { font-size: 36px; text-shadow: var(--outline), 0 5px 0 var(--ink); }
.price { font-weight: 700; color: var(--white); text-shadow: var(--outline); }
.price span {
  display: inline-block; font-family: var(--title); font-size: 26px; color: var(--ink); text-shadow: none;
  background: var(--yellow); border: 3px solid var(--ink); border-radius: 14px; padding: 2px 12px; box-shadow: 0 4px 0 var(--ink); margin-right: 6px;
}
.perks { list-style: none; display: grid; gap: 9px; }
.perks li { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; }
.perks .ico { width: 22px; height: 22px; flex: none; margin-top: 1px; }
.vip .perks li { text-shadow: var(--outline); }
.vip .btn { margin-top: auto; }

.pack {
  display: grid; grid-template-columns: 1.1fr 1fr; overflow: hidden; background: var(--white); color: var(--ink);
  border: 3px solid var(--ink); border-radius: 26px; box-shadow: 0 8px 0 var(--ink);
}
.pack-img { width: 100%; height: 100%; object-fit: cover; border-right: 3px solid var(--ink); background: #c81d3a; }
.pack-body { padding: 24px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.pack-body > p:first-child { font-weight: 600; font-size: 18px; }
.pack-items { list-style: none; display: grid; gap: 6px; width: 100%; }
.pack-items li { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; padding: 8px 12px; border-radius: 12px; background: #fff1f2; border: 2px solid #ffc9cf; }
.pack-items span { font-size: 14px; color: #7a3140; }
.pack-price { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.now { display: inline-flex; align-items: center; gap: 6px; font-family: var(--title); font-size: 30px; }
.was { text-decoration: line-through; color: #8a83a8; font-weight: 600; }
.ico-cur { width: 1.15em; height: 1.15em; flex: none; }
@media (max-width: 800px) {
  .currencies, .vips, .pack { grid-template-columns: 1fr; }
  .pack-img { border-right: 0; border-bottom: 3px solid var(--ink); height: auto; }
}
@media (max-width: 480px) { .currency { flex-direction: column; } }

.items { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.item {
  display: flex; flex-direction: column; gap: 4px; background: var(--white); color: var(--ink);
  border: 3px solid var(--ink); border-radius: 20px; box-shadow: 0 6px 0 var(--ink); padding: 0 0 14px; overflow: hidden;
  --r: var(--epic);
}
.item.r-rare { --r: var(--rare); }
.item.r-legendaire { --r: var(--legend); }
.item-img {
  aspect-ratio: 1; border-bottom: 3px solid var(--ink); margin-bottom: 8px; display: grid; place-items: center;
  background:
    repeating-conic-gradient(from 0deg at 50% 50%, rgba(255, 255, 255, .14) 0deg 9deg, transparent 9deg 20deg),
    radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--r) 45%, #fff), var(--r) 70%, color-mix(in srgb, var(--r) 70%, #1b1240));
}
.item-img img { width: 86%; filter: drop-shadow(0 6px 0 rgba(27, 18, 64, .35)); }
.item > p, .item > h4 { padding: 0 14px; }
.rarity { font-weight: 700; font-size: 12px; letter-spacing: .6px; text-transform: uppercase; color: color-mix(in srgb, var(--r) 70%, #1b1240); }
.item h4 { font-size: 21px; }
.kind { font-size: 14px; color: #5a5185; }
.quote { font-size: 14px; font-style: italic; color: #3b3266; }
.cost { display: flex; align-items: center; gap: 6px; font-family: var(--title); font-size: 19px; margin-top: auto; padding-top: 6px !important; }
@media (max-width: 1000px) { .items { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .items { grid-template-columns: 1fr 1fr; gap: 14px; } .item h4 { font-size: 18px; } }
.also { margin-top: 26px; text-align: center; color: var(--txt-2); }
.also strong { color: var(--white); }
.safe {
  display: flex; gap: 14px; align-items: center; margin: 26px auto 0; max-width: 820px;
  background: rgba(27, 18, 64, .45); border: 3px solid var(--ink); border-radius: 18px; padding: 14px 18px; font-weight: 600; color: var(--txt-2);
}
.safe-ico { width: 40px; height: 40px; flex: none; }

/* ---------------------------------------------------------------- créateurs */
.sec-pink .subtitle { color: var(--white); text-shadow: var(--outline); }
.crea { display: grid; grid-template-columns: 1.1fr 1fr; gap: 24px; align-items: start; }
.crea-card {
  background: var(--white); color: var(--ink); border: 3px solid var(--ink); border-radius: 26px; box-shadow: 0 8px 0 var(--ink);
  padding: 26px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start;
}
.crea-card h3 { font-size: 30px; }
.crea-card h4 { font-size: 21px; margin-top: 6px; }
.crea-card .perks li { color: #3b3266; }
.crea-steps { display: grid; gap: 8px; padding-left: 22px; color: #3b3266; }
.crea-steps li::marker { font-family: var(--title); color: var(--pink); }
.ideas { list-style: none; display: grid; gap: 7px; color: #3b3266; }
.ideas li { padding: 8px 12px; background: #fff0f8; border: 2px solid #ffc6e4; border-radius: 12px; font-size: 15.5px; }
.tags li { background: var(--ink); color: var(--white); border-color: var(--ink); }
@media (max-width: 860px) { .crea { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- règlement */
.rules { list-style: none; counter-reset: r; display: grid; gap: 12px; }
.rules li {
  counter-increment: r; position: relative; padding: 14px 18px 14px 66px; background: var(--violet-2);
  border: 3px solid var(--ink); border-radius: 18px; box-shadow: 0 5px 0 #0d0826; color: var(--txt-2);
}
.rules li::before {
  content: counter(r, decimal-leading-zero); position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px; display: grid; place-items: center; font-family: var(--title); font-size: 17px;
  color: var(--ink); background: var(--yellow); border: 3px solid var(--ink); border-radius: 12px;
}
.sanctions {
  margin-top: 26px; background: var(--white); color: var(--ink); border: 3px solid var(--ink); border-radius: var(--radius);
  box-shadow: 0 6px 0 #0d0826; padding: 22px 26px; border-top: 12px solid var(--red);
}
.sanctions h3 { font-size: 26px; margin-bottom: 10px; }
.sanctions ul { display: grid; gap: 8px; padding-left: 20px; color: #3b3266; }

/* ---------------------------------------------------------------- FAQ */
.faq { display: grid; gap: 12px; }
.faq details {
  background: var(--white); color: var(--ink); border: 3px solid var(--ink); border-radius: 18px; box-shadow: 0 5px 0 var(--ink);
}
.faq summary {
  position: relative; padding: 16px 56px 16px 20px; font-weight: 700; font-size: 18px;
}
.faq summary::after {
  content: '+'; position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; display: grid; place-items: center; font-family: var(--title); font-size: 24px; line-height: 1;
  background: var(--yellow); border: 3px solid var(--ink); border-radius: 50%;
}
.faq details[open] summary::after { content: '–'; }
.faq details p { padding: 0 20px 18px; color: #3b3266; }

.last-cta { margin-top: 64px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.last-nimbo { width: 130px; animation: float 5s ease-in-out infinite; }
.last-nimbo svg { width: 100%; height: auto; }
.last-txt { font-family: var(--title); font-size: clamp(28px, 4vw, 40px); text-shadow: var(--outline), 0 5px 0 var(--ink); }
.last-cta .cta { justify-content: center; }
@media (prefers-reduced-motion: reduce) { .last-nimbo { animation: none; } }

/* ---------------------------------------------------------------- pied de page */
.foot { background: var(--night); border-top: 3px solid var(--ink); padding: 54px 0 30px; color: var(--muted); }
.foot-in { display: grid; grid-template-columns: 1fr 1.6fr; gap: 36px; }
.foot-brand img { width: 190px; }
.foot-brand p { margin-top: 12px; }
.foot-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.foot-h { font-family: var(--title); font-size: 19px; color: var(--white); margin-bottom: 10px; }
.foot-links a { display: flex; align-items: center; gap: 8px; text-decoration: none; padding: 5px 0; color: var(--muted); font-weight: 600; }
.foot-links a:hover { color: var(--yellow); }
.foot-links .ico { width: 18px; height: 18px; }
.foot-legal { margin-top: 36px; padding-top: 22px; border-top: 2px solid rgba(189, 180, 239, .2); font-size: 14px; display: grid; gap: 6px; }
@media (max-width: 760px) {
  .foot-in { grid-template-columns: 1fr; }
  .foot-links { grid-template-columns: 1fr 1fr; }
}

/* ---------------------------------------------------------------- fenêtre « bientôt » */
.modal {
  width: min(460px, 100% - 32px); padding: 0; border: 3px solid var(--ink); border-radius: 26px; box-shadow: 0 10px 0 var(--ink);
  color: var(--ink); background: var(--white);
}
.modal::backdrop { background: rgba(21, 14, 51, .72); }
.modal-in { padding: 30px 26px 26px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.modal-nimbo { width: 110px; margin-top: -4px; }
.modal-nimbo svg { width: 100%; height: auto; }
.modal h2 { font-size: 30px; }
.modal p { color: #3b3266; }
.modal .cta { justify-content: center; margin-top: 6px; }

/* ---------------------------------------------------------------- pages simples (mentions, confidentialité, 404) */
.page { background: var(--violet); min-height: 70vh; padding: 56px 0 80px; }
.doc {
  width: min(860px, 100% - 32px); margin: 0 auto; background: var(--white); color: var(--ink);
  border: 3px solid var(--ink); border-radius: 26px; box-shadow: 0 8px 0 var(--ink); padding: clamp(22px, 4vw, 44px);
}
.doc h1 { font-size: clamp(32px, 5vw, 46px); margin-bottom: 8px; }
.doc h2 { font-size: 25px; margin: 30px 0 10px; }
.doc p, .doc li { color: #3b3266; }
.doc p + p { margin-top: 10px; }
.doc ul { padding-left: 22px; display: grid; gap: 6px; margin-top: 8px; }
.doc a { color: var(--violet-3); font-weight: 600; }
.doc .maj { color: #5a5185; font-size: 15px; }
.a-remplir {
  background: #fff3b0; color: #6b4b00; border: 2px dashed #e39a00; border-radius: 8px; padding: 1px 6px; font-weight: 700;
}
.back { display: inline-flex; margin-top: 30px; }
.lost { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.lost .nimbo-lost { width: 170px; animation: float 5s ease-in-out infinite; }
.lost .nimbo-lost svg { width: 100%; height: auto; }
.lost h1 { font-size: clamp(36px, 7vw, 64px); color: var(--white); text-shadow: var(--outline), 0 6px 0 var(--ink); }
.lost p { color: var(--white); font-weight: 600; font-size: 19px; max-width: 520px; text-shadow: var(--outline); }
.lost-page { min-height: 100vh; display: grid; place-items: center; padding: 40px 0; }

/* ---------------------------------------------------------------- téléphone : modes et maps à glisser */
.swipe-hint { display: none; }
@media (max-width: 640px) {
  .modes, .maps {
    display: flex; align-items: flex-start; gap: 14px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: 16px;
    margin-inline: -16px; padding: 4px 16px 18px; scrollbar-width: none;
  }
  .modes::-webkit-scrollbar, .maps::-webkit-scrollbar { display: none; }
  .modes > .mode, .maps > .map { flex: 0 0 84%; scroll-snap-align: start; }
  .swipe-hint {
    display: flex; align-items: center; justify-content: center; gap: 8px; margin: -26px 0 16px;
    font-weight: 700; font-size: 14px; color: var(--yellow);
  }
  .swipe-hint::before, .swipe-hint::after { content: ''; width: 26px; height: 3px; border-radius: 3px; background: currentColor; opacity: .6; }
}