/* ==========================================================================
   Pixelcraft Studios — site mère (maquette)
   S'appuie sur base.css (même système que Cobblemon Academy, teinté violet).
   Chaque jeu garde sa couleur : Academy = bleu, ManiaSky = orange/vert.
   ========================================================================== */

:root {
  --pc-violet: #9b5cff;
  --pc-violet-lo: #6a2fd6;
  --pc-violet-edge: #36157a;
  --pc-lilac: #c8a2ff;
  --pc-pink: #ff7ad9;
  --academy: #2f8ce8;
  --academy-lo: #1c6bcb;
  --mania: #ff9a3d;
  --mania-lo: #e0661a;
  --mania-green: #6ed36b;
}

body { background: #0e0820; }

.pbtn--violet { --b-hi: #b27dff; --b-lo: var(--pc-violet-lo); --b-edge: var(--pc-violet-edge); --b-ink: #fff; }

/* ---------- Menu déroulant « Serveurs » ---------------------------------- */

.nav__item { position: relative; }
.nav__link--drop svg.chev { width: 14px; height: 14px; transition: transform .2s; }
.nav__item.is-open .nav__link--drop { background: rgba(190, 150, 255, .16); color: #fff; }
.nav__item.is-open .nav__link--drop svg.chev { transform: rotate(180deg); }

.drop {
  position: absolute; top: calc(100% + 14px); left: 0; z-index: 60;
  width: 320px; padding: 10px;
  border-radius: 20px;
  background: rgba(18, 10, 40, .97);
  border: 1px solid rgba(255, 213, 79, .35);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  opacity: 0; transform: translateY(-6px); pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
}
.nav__item.is-open .drop { opacity: 1; transform: none; pointer-events: auto; }
.drop__head {
  display: flex; justify-content: space-between; padding: 6px 10px 10px; margin-bottom: 6px;
  border-bottom: 1px solid var(--line);
  font-size: 11px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: var(--gold);
}
.drop__head span { color: var(--text-dim); }
.drop a {
  display: grid; grid-template-columns: 48px 1fr auto; gap: 12px; align-items: center;
  padding: 8px 10px; border-radius: 14px;
}
.drop a:hover { background: rgba(190, 150, 255, .1); }
.drop__logo {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px;
  background: rgba(255, 255, 255, .05); border: 1px solid var(--line);
}
.drop__logo img { width: 40px; height: 40px; object-fit: contain; }
.drop__logo svg { width: 22px; height: 22px; color: var(--pc-lilac); }
.drop b { display: block; font-size: 14px; font-weight: 900; text-transform: uppercase; letter-spacing: .03em; }
.drop small { color: var(--text-dim); font-weight: 700; font-size: 12px; }
.drop .ext { width: 14px; height: 14px; color: var(--text-dim); }
.drop__status { display: inline-flex; align-items: center; gap: 5px; }
.drop__status i { width: 7px; height: 7px; border-radius: 50%; background: #5fe36a; }
.drop__status i.off { background: #8e97a6; }

@media (max-width: 920px) {
  .topnav.is-open .drop { position: static; width: auto; opacity: 1; transform: none; pointer-events: auto; margin: 4px 0 8px; display: none; }
  .topnav.is-open .nav__item.is-open .drop { display: block; }
}

/* ---------- Hero ---------------------------------------------------------- */

.pc-hero { min-height: min(100svh, 940px); padding-bottom: 170px; }
.pc-hero .hero__bg { background-image: url("../img/pixelcraft-hero.jpg"); background-position: center 40%; }
.pc-hero::before {
  background:
    radial-gradient(55% 45% at 50% 35%, rgba(155, 92, 255, .28), transparent 70%),
    linear-gradient(180deg, rgba(14, 8, 32, .7) 0%, rgba(14, 8, 32, .25) 35%, rgba(14, 8, 32, .7) 70%, #0e0820 100%);
}
.pc-hero .hero__logo {
  width: min(300px, 62vw);
  filter: drop-shadow(0 0 30px rgba(155, 92, 255, .65)) drop-shadow(0 10px 20px rgba(0, 0, 0, .5));
}
.pc-hero .hero__title { max-width: 14ch; }
.pc-hero .hero__title .hl { color: var(--gold); }

/* Pixels flottants (rappel du logo) */
.pixels { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.pixels i {
  position: absolute; display: block; width: 14px; height: 14px; border-radius: 3px;
  background: var(--pc-violet); box-shadow: 0 0 18px rgba(155, 92, 255, .8);
  opacity: .7; animation: drift 9s ease-in-out infinite;
}
.pixels i:nth-child(1) { left: 12%; top: 28%; }
.pixels i:nth-child(2) { left: 22%; top: 62%; width: 10px; height: 10px; animation-delay: -2s; background: var(--pc-lilac); }
.pixels i:nth-child(3) { left: 80%; top: 24%; width: 18px; height: 18px; animation-delay: -4s; }
.pixels i:nth-child(4) { left: 88%; top: 58%; width: 9px; height: 9px; animation-delay: -1s; background: var(--pc-pink); }
.pixels i:nth-child(5) { left: 68%; top: 72%; width: 12px; height: 12px; animation-delay: -6s; background: var(--pc-lilac); }
.pixels i:nth-child(6) { left: 34%; top: 18%; width: 8px; height: 8px; animation-delay: -3s; background: var(--pc-pink); }
@keyframes drift {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-22px) rotate(20deg); }
}

/* ---------- Nos jeux ------------------------------------------------------ */

.games { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.game {
  --g: var(--academy); --g-lo: var(--academy-lo);
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 560px; padding: 28px;
  border-radius: var(--r-xl);
  border: 2px solid color-mix(in srgb, var(--g) 70%, white 10%);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(255, 255, 255, .06);
  transition: transform .25s ease, box-shadow .25s ease;
}
.game:hover { transform: translateY(-6px); box-shadow: 0 36px 80px rgba(0, 0, 0, .55), 0 0 0 4px color-mix(in srgb, var(--g) 30%, transparent); }
.game__bg { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; transition: transform .6s ease; }
.game:hover .game__bg { transform: scale(1.05); }
.game::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(10, 6, 25, .05) 0%, rgba(10, 6, 25, .35) 35%, color-mix(in srgb, var(--g-lo) 35%, #0a0619) 72%, #0a0619 100%);
}
.game--mania { --g: var(--mania); --g-lo: #7a2fbf; }
.game__logo { width: min(270px, 70%); margin: 36px auto auto; filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .55)); transition: transform .3s ease; }
.game:hover .game__logo { transform: scale(1.04) rotate(-1.5deg); }
.game__top { position: absolute; top: 20px; left: 20px; right: 20px; display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.status {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px;
  background: rgba(10, 6, 25, .75); border: 1px solid rgba(255, 255, 255, .18);
  font-size: 13px; font-weight: 800; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.status--off .dot-live { background: #8e97a6; animation: none; }
.game h3 { font-size: clamp(30px, 3.4vw, 42px); text-transform: uppercase; margin: 14px 0 4px; }
.game__tagline { margin: 0 0 14px; font-weight: 800; color: color-mix(in srgb, var(--g) 55%, white); font-size: 17px; }
.game__list { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 8px; font-weight: 700; color: #ece2ff; }
.game__list li { display: flex; gap: 10px; align-items: center; }
.game__list svg { width: 18px; height: 18px; color: var(--mania-green); flex: none; }
.game__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.game .tag { background: rgba(10, 6, 25, .6); }

@media (max-width: 960px) { .games { grid-template-columns: 1fr; } .game { min-height: 520px; } }
@media (max-width: 520px) { .game { padding: 20px; min-height: 500px; } .game__ctas .pbtn { flex: 1; } }

/* ---------- Bande violette vive (façon section parchemin de Rinaorc) ------ */

.band-pixel {
  position: relative;
  background:
    radial-gradient(60% 80% at 100% 0%, rgba(255, 122, 217, .25), transparent 60%),
    linear-gradient(180deg, #7b3fe4, #5423b8);
}
.band-pixel .eyebrow { color: #fff; }
.band-pixel .section-title { text-shadow: 0 4px 0 var(--pc-violet-edge); }
.band-pixel .lead { color: #f1e8ff; }

.account { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.acc-card {
  position: relative; padding: 26px 22px 24px; border-radius: var(--r-lg);
  background: #fff; color: #1d1040;
  box-shadow: 0 7px 0 var(--pc-violet-edge);
}
.acc-card__icon {
  display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 16px; border-radius: 16px;
  background: linear-gradient(180deg, #b27dff, var(--pc-violet-lo)); color: #fff;
  box-shadow: 0 4px 0 var(--pc-violet-edge);
}
.acc-card__icon svg { width: 28px; height: 28px; }
.acc-card h3 { font-size: 26px; color: #2a1257; margin-bottom: 6px; }
.acc-card p { margin: 0; color: #4b3a78; font-weight: 700; font-size: 15px; }
.acc-card .tag { position: absolute; top: 22px; right: 20px; background: #f1e8ff; color: var(--pc-violet-lo); border-color: #d9c4ff; }
.account__flow {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px;
  margin-top: 34px; font-weight: 900; color: #fff;
}
.account__flow span {
  display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 14px;
  background: rgba(20, 8, 50, .35); border: 1px solid rgba(255, 255, 255, .25);
}
.account__flow img { height: 26px; width: auto; }
.account__flow svg { width: 20px; height: 20px; opacity: .8; }

.stats--pc { margin-top: 56px; }
.stats--pc .stat { box-shadow: 0 6px 0 var(--pc-violet-edge); }
.stats--pc .stat b { color: var(--pc-violet-lo); }
.stats--pc .stat span { color: #5b4a86; }

@media (max-width: 960px) { .account { grid-template-columns: 1fr; } }

/* ---------- Actus : pastille du jeu -------------------------------------- */

.tag--academy { background: rgba(47, 140, 232, .18); color: #8fdcff; border-color: rgba(143, 220, 255, .4); }
.tag--mania { background: rgba(255, 154, 61, .16); color: #ffc38a; border-color: rgba(255, 195, 138, .4); }
.tag--studio { background: rgba(155, 92, 255, .18); color: var(--pc-lilac); border-color: rgba(200, 162, 255, .4); }

/* ---------- Valeurs & équipe --------------------------------------------- */

.values { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 64px; }
.value {
  padding: 22px 20px; border-radius: var(--r-lg);
  background: linear-gradient(180deg, #24154f, #1c1040); border: 1px solid var(--line);
}
.value b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 22px; margin: 12px 0 6px; }
.value p { margin: 0; color: var(--text-muted); font-size: 14px; font-weight: 600; }
.value__n {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
  background: var(--gold); color: var(--gold-ink); border: 2px solid var(--gold-edge);
  font-family: var(--font-display); font-size: 20px; box-shadow: 0 3px 0 var(--gold-edge);
}
@media (max-width: 960px) { .values { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .values { grid-template-columns: 1fr; } }

.team { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.member {
  position: relative; display: grid; justify-items: center; text-align: center; gap: 6px;
  padding: 24px 16px 20px; border-radius: var(--r-lg);
  background: linear-gradient(180deg, #24154f, #1c1040); border: 1px solid var(--line);
  transition: transform .18s ease, border-color .18s ease;
}
.member:hover { transform: translateY(-4px); border-color: var(--line-strong); }
.member img {
  width: 76px; height: 76px; border-radius: 18px; image-rendering: pixelated; margin-bottom: 6px;
  border: 3px solid var(--role, var(--pc-violet)); box-shadow: 0 5px 0 rgba(0, 0, 0, .35);
}
.member b { font-size: 17px; font-weight: 900; }
.member .tag { background: color-mix(in srgb, var(--role, var(--pc-violet)) 18%, transparent); color: color-mix(in srgb, var(--role, var(--pc-violet)) 60%, white); border-color: color-mix(in srgb, var(--role, var(--pc-violet)) 50%, transparent); }
.member p { margin: 4px 0 0; color: var(--text-muted); font-size: 13px; font-weight: 600; }
.member--founder { --role: var(--gold); }
.member--admin { --role: #e8574c; }
.member--dev { --role: #5fb8ff; }
.member--lead::after {
  content: "👑"; position: absolute; top: 12px; right: 14px; font-size: 18px;
}
@media (max-width: 960px) { .team { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Final & footer ----------------------------------------------- */

.pc-final::before {
  background:
    linear-gradient(180deg, #0e0820 0%, rgba(23, 13, 51, .7) 40%, rgba(14, 8, 32, .95) 100%),
    url("../img/pixelcraft-hero.jpg") center 60% / cover;
}
.footer { background: #090516; }
.footer__brand img { width: 150px; }

/* ---------- Visite animée du launcher ------------------------------------
   Onglets à gauche (avance automatique, pause au survol), scène à droite.
   L'état de base de chaque élément est son état FINAL : sans animation
   (prefers-reduced-motion), la scène reste lisible. */

.launcher__dl { display: grid; justify-items: end; gap: 8px; }
.launcher__dl small { color: var(--text-dim); font-weight: 700; }
@media (max-width: 760px) { .launcher__dl { justify-items: start; } }

.tour { --dur: 6.5s; display: grid; grid-template-columns: 1fr 1.15fr; gap: 40px; align-items: center; }
.tour__list { display: grid; gap: 10px; }
.tour__tab {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 48px 1fr; gap: 16px; align-items: start;
  width: 100%; padding: 16px 18px; border-radius: 20px; text-align: left;
  border: 1px solid transparent; background: transparent;
  transition: background .25s ease, border-color .25s ease;
}
.tour__tab:hover { background: rgba(190, 150, 255, .06); }
.tour__tab.is-active { background: linear-gradient(180deg, #24154f, #1c1040); border-color: var(--line-strong); }
.tour__icon {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px;
  background: rgba(190, 150, 255, .1); border: 1px solid var(--line); color: var(--pc-lilac);
  transition: all .25s ease;
}
.tour__icon svg { width: 22px; height: 22px; }
.tour__tab.is-active .tour__icon {
  background: linear-gradient(180deg, var(--gold-hi), var(--gold-lo)); border-color: var(--gold-edge);
  color: var(--gold-ink); box-shadow: 0 4px 0 var(--gold-edge);
}
.tour__text { display: grid; gap: 4px; padding-top: 3px; }
.tour__text b { font-size: 18px; font-weight: 900; color: #fff; }
.tour__text span {
  max-height: 0; overflow: hidden; opacity: 0;
  color: var(--text-muted); font-weight: 600; font-size: 15px; line-height: 1.5;
  transition: max-height .35s ease, opacity .3s ease;
}
.tour__tab.is-active .tour__text span { max-height: 90px; opacity: 1; }
.tour__timer {
  position: absolute; left: 18px; right: 18px; bottom: 0; height: 3px; border-radius: 3px;
  background: rgba(255, 255, 255, .06); opacity: 0;
}
.tour__timer::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(90deg, var(--gold), var(--gold-lo));
  transform-origin: left; transform: scaleX(0);
}
.tour__tab.is-active .tour__timer { opacity: 1; }
.tour__tab.is-active .tour__timer::after { animation: timer var(--dur) linear forwards; }
.tour:hover .tour__timer::after, .tour.is-paused .tour__timer::after { animation-play-state: paused; }
@keyframes timer { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.stage {
  position: relative; overflow: hidden; isolation: isolate;
  aspect-ratio: 5 / 4; border-radius: 32px;
  background:
    radial-gradient(70% 60% at 50% 110%, rgba(155, 92, 255, .45), transparent 70%),
    radial-gradient(50% 40% at 15% 0%, rgba(255, 122, 217, .12), transparent 70%),
    linear-gradient(180deg, #1c1040, #120a2a);
  border: 1px solid var(--line-strong);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.stage__pixels i {
  position: absolute; width: 10px; height: 10px; border-radius: 2px; background: var(--pc-violet);
  box-shadow: 0 0 14px rgba(155, 92, 255, .8); opacity: .55; animation: drift 8s ease-in-out infinite;
}
.stage__pixels i:nth-child(1) { left: 8%; top: 14%; }
.stage__pixels i:nth-child(2) { left: 88%; top: 20%; animation-delay: -2s; background: var(--pc-lilac); }
.stage__pixels i:nth-child(3) { left: 82%; top: 80%; animation-delay: -4s; width: 14px; height: 14px; }
.stage__pixels i:nth-child(4) { left: 12%; top: 76%; animation-delay: -6s; background: var(--pc-pink); width: 8px; height: 8px; }
.stage__pixels i:nth-child(5) { left: 50%; top: 7%; animation-delay: -3s; background: var(--pc-lilac); width: 7px; height: 7px; }

.scene { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 22px; padding: 30px; }
.scene[hidden] { display: none; }
.scene__pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px;
  background: #16361c; border: 1px solid #46a84b; color: #8be98f;
  font-size: 12px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase;
}
.scene__caption { margin: 0; color: var(--text-muted); font-weight: 800; font-size: 14px; text-align: center; }

/* Scène 1 : tuiles des jeux */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; width: min(100%, 520px); }
.tile {
  position: relative; overflow: hidden; display: grid; justify-items: center; align-content: space-between; gap: 10px;
  aspect-ratio: 3 / 4; padding: 14px 8px 12px; border-radius: 20px;
  background-size: cover; background-position: center; background-color: #24154f;
  border: 2px solid var(--c); box-shadow: 0 14px 30px rgba(0, 0, 0, .45);
}
.tile::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 6, 25, .15), rgba(10, 6, 25, .85)); }
.tile > * { position: relative; }
.tile img { width: 88%; margin-top: 8px; filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .5)); }
.tile__count {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 10px;
  background: rgba(10, 6, 25, .8); border: 1px solid rgba(255, 255, 255, .18);
  font-size: 12px; font-weight: 800; color: var(--text-soft); white-space: nowrap;
}
.tile__count i { width: 8px; height: 8px; border-radius: 50%; background: #5fe36a; box-shadow: 0 0 8px #5fe36a; }
.tile__count b { color: #fff; font-variant-numeric: tabular-nums; }
.tile__count--tag { color: #ffc38a; }
.tile--soon { background: repeating-linear-gradient(-45deg, #24154f 0 14px, #1c1040 14px 28px); border-style: dashed; }
.tile__q { margin-top: 30%; font-family: var(--font-display); font-size: 64px; color: var(--pc-lilac); text-shadow: 0 5px 0 #3b1a82; }
.tile__count--soon { color: var(--pc-lilac); }
.scene--live.is-active .tile { animation: popIn .6s cubic-bezier(.2, .9, .3, 1.35) var(--d) both; }
.scene--live.is-active .tile__q { animation: bob 2s ease-in-out infinite; }
.scene--live.is-active .scene__pill { animation: fadeUp .5s ease both; }
@keyframes popIn { from { opacity: 0; transform: translateY(26px) scale(.8); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } }
@keyframes bob { 50% { transform: translateY(-6px); } }

/* Scène 2 : notifications */
.bell {
  position: relative; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold-lo)); border: 2px solid var(--gold-edge);
  box-shadow: 0 5px 0 var(--gold-edge); color: var(--gold-ink);
}
.bell svg { width: 30px; height: 30px; }
.bell span {
  position: absolute; top: -8px; right: -8px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  background: #e8574c; border: 2px solid #120a2a; color: #fff; font-size: 12px; font-weight: 900;
}
.notifs { display: grid; gap: 10px; width: min(100%, 440px); }
.notif {
  position: relative; display: grid; grid-template-columns: 76px 1fr; gap: 14px; align-items: center;
  padding: 10px 12px 10px 10px; border-radius: 18px;
  background: rgba(255, 255, 255, .06); border: 1px solid var(--line-strong);
  box-shadow: 0 12px 26px rgba(0, 0, 0, .35); backdrop-filter: blur(8px);
}
.notif img { width: 76px; height: 50px; object-fit: cover; border-radius: 11px; }
.notif b { display: block; font-size: 15px; line-height: 1.3; }
.notif__tag { display: block; font-style: normal; font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 3px; }
.notif__tag--academy { color: #8fdcff; }
.notif__tag--mania { color: #ffc38a; }
.notif__new {
  position: absolute; top: -9px; right: 12px; padding: 2px 9px; border-radius: 8px;
  background: #e8574c; border: 1px solid #7a1c14; color: #fff; font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase;
}
.scene--news.is-active .bell { animation: ring 1.2s ease .1s 2; transform-origin: 50% 10%; }
.scene--news.is-active .bell span { animation: popIn .4s cubic-bezier(.2, .9, .3, 1.5) 1.6s both; }
.scene--news.is-active .notif { animation: slideIn .6s cubic-bezier(.2, .9, .3, 1.15) var(--d) both; }
@keyframes ring { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(14deg); } 30% { transform: rotate(-12deg); } 45% { transform: rotate(8deg); } 60% { transform: rotate(-5deg); } 75% { transform: rotate(2deg); } }
@keyframes slideIn { from { opacity: 0; transform: translateX(60px) scale(.95); } }

/* Scène 3 : un clic sur Jouer */
.play-demo { position: relative; display: grid; place-items: center; width: min(100%, 440px); min-height: 230px; }
.play-demo > * { grid-area: 1 / 1; }
.play-demo__btn {
  display: inline-flex; align-items: center; gap: 12px; height: 84px; padding: 0 56px; border-radius: 22px;
  font-family: var(--font-display); font-size: 36px; letter-spacing: .06em; text-transform: uppercase; color: #0d2c11;
  border: 3px solid var(--green-edge);
  background: linear-gradient(180deg, var(--green-hi) 0 50%, var(--green-lo) 50% 100%);
  box-shadow: 0 7px 0 var(--green-edge), inset 0 3px 0 rgba(255, 255, 255, .35);
  opacity: 0; transform: scale(.85);
}
.play-demo__btn svg { width: 28px; height: 28px; }
.play-demo__cursor { width: 40px; height: 40px; opacity: 0; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .5)); }
.play-demo__panel {
  width: 100%; padding: 20px; border-radius: 22px;
  background: rgba(14, 8, 32, .85); border: 1px solid var(--line-strong);
}
.play-demo__steps { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.play-demo__steps span {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 9px;
  font-size: 13px; font-weight: 900; background: #16361c; border: 1px solid #46a84b; color: #8be98f;
}
.play-demo__steps svg { width: 14px; height: 14px; }
.play-demo__bar { height: 18px; border-radius: 999px; overflow: hidden; background: #120a2a; border: 1px solid var(--line); }
.play-demo__bar i {
  display: block; height: 100%; width: 100%; border-radius: 999px;
  background: repeating-linear-gradient(-45deg, rgba(255,255,255,.2) 0 8px, transparent 8px 16px), linear-gradient(180deg, #cff3ff, #8fdcff 45%, #2a8de0);
}
.play-demo__go {
  align-self: end; justify-self: center; transform: translateY(46px);
  padding: 8px 18px; border-radius: 14px; background: var(--gold); color: var(--gold-ink); border: 2px solid var(--gold-edge);
  box-shadow: 0 4px 0 var(--gold-edge); font-family: var(--font-display); font-size: 22px;
}
.scene--play.is-active .play-demo__btn { animation: btnLife 1.5s ease both; }
.scene--play.is-active .play-demo__cursor { animation: cursorMove 1.4s cubic-bezier(.4, 0, .2, 1) both; }
.scene--play.is-active .play-demo__panel { animation: fadeUp .4s ease 1.35s both; }
.scene--play.is-active .play-demo__steps span { animation: stepOn .35s ease var(--d) both; }
.scene--play.is-active .play-demo__bar i { animation: fill 2.6s ease-in-out 1.5s both; }
.scene--play.is-active .play-demo__go { animation: popIn .5s cubic-bezier(.2, .9, .3, 1.5) 4.2s both; }
@keyframes btnLife {
  0% { opacity: 0; transform: scale(.85); }
  20%, 62% { opacity: 1; transform: scale(1); box-shadow: 0 7px 0 var(--green-edge), inset 0 3px 0 rgba(255,255,255,.35); }
  70% { opacity: 1; transform: translateY(6px) scale(.98); box-shadow: 0 1px 0 var(--green-edge), inset 0 3px 0 rgba(255,255,255,.25); }
  85% { opacity: 1; transform: scale(1.03); }
  100% { opacity: 0; transform: scale(.9); }
}
@keyframes cursorMove {
  0% { opacity: 0; transform: translate(170px, 120px); }
  15% { opacity: 1; }
  60% { transform: translate(40px, 22px); }
  70% { transform: translate(40px, 22px) scale(.85); }
  80% { opacity: 1; transform: translate(40px, 22px); }
  100% { opacity: 0; transform: translate(40px, 22px); }
}
@keyframes stepOn { from { background: rgba(255, 255, 255, .04); border-color: var(--line); color: var(--text-dim); } }
@keyframes fill { from { width: 0; } }

/* Scène 4 : le cadeau du jour */
.gift { position: relative; display: grid; grid-template: 330px / 300px; place-items: center; width: 300px; height: 330px; }
.gift > * { grid-area: 1 / 1; }
.gift__rays {
  width: 300px; height: 300px; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 213, 79, .22) 0 10deg, transparent 10deg 30deg);
  -webkit-mask: radial-gradient(circle, #000 20%, transparent 68%); mask: radial-gradient(circle, #000 20%, transparent 68%);
  animation: spin 14s linear infinite;
}
.gift__reward {
  z-index: 2; display: grid; justify-items: center; gap: 2px; padding: 10px 10px 12px; border-radius: 18px;
  background: #fff7dc; border: 2px solid var(--gold-edge); box-shadow: 0 6px 0 var(--gold-edge), 0 20px 40px rgba(0, 0, 0, .4);
  color: var(--gold-ink); transform: translateY(-58px);
}
.gift__reward img { width: 130px; height: 74px; object-fit: cover; border-radius: 11px; margin-bottom: 6px; }
.gift__reward b { font-family: var(--font-display); font-size: 20px; }
.gift__reward small { font-size: 12px; font-weight: 900; color: #7a5a14; }
.gift__box { z-index: 3; align-self: end; position: relative; width: 150px; height: 110px; }
.gift__body {
  position: absolute; left: 10px; right: 10px; bottom: 0; height: 80px; border-radius: 10px;
  background: linear-gradient(90deg, transparent 42%, var(--gold) 42% 58%, transparent 58%), linear-gradient(180deg, #b27dff, #6a2fd6);
  border: 3px solid #36157a; box-shadow: 0 6px 0 #36157a;
}
.gift__lid {
  position: absolute; left: 0; right: 0; top: 0; height: 34px; border-radius: 10px;
  background: linear-gradient(90deg, transparent 42%, var(--gold) 42% 58%, transparent 58%), linear-gradient(180deg, #c8a2ff, #8e4bff);
  border: 3px solid #36157a; transform: translate(26px, -70px) rotate(24deg); opacity: 0;
}
.gift__spark {
  z-index: 1; width: 12px; height: 12px; border-radius: 3px; background: var(--gold);
  box-shadow: 0 0 12px var(--gold); transform: translate(var(--x), var(--y)) rotate(45deg); opacity: 0;
}
.scene--gift.is-active .gift__box { animation: shake 1.1s ease both; }
.scene--gift.is-active .gift__lid { animation: lidOff .6s cubic-bezier(.3, .8, .4, 1) 1.1s both; }
.scene--gift.is-active .gift__reward { animation: rise .8s cubic-bezier(.2, .9, .3, 1.3) 1.3s both; }
.scene--gift.is-active .gift__rays { animation: raysIn .6s ease 1.3s both, spin 14s linear infinite; }
.scene--gift.is-active .gift__spark { animation: spark 1.2s ease calc(1.5s + var(--d, 0s)) both; }
@keyframes shake {
  0%, 100% { transform: none; }
  15% { transform: rotate(-6deg); } 30% { transform: rotate(6deg); } 45% { transform: rotate(-5deg); }
  60% { transform: rotate(4deg); } 75% { transform: translateY(-6px); }
}
@keyframes lidOff { from { transform: none; opacity: 1; } 60% { opacity: 1; } to { transform: translate(26px, -70px) rotate(24deg); opacity: 0; } }
@keyframes rise { from { transform: translateY(40px) scale(.6); opacity: 0; } }
@keyframes raysIn { from { opacity: 0; transform: scale(.4); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes spark {
  0% { opacity: 0; transform: translate(0, 0) rotate(0) scale(.4); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--x), var(--y)) rotate(180deg) scale(1); }
}

@media (max-width: 960px) {
  .tour { grid-template-columns: 1fr; }
  .stage { order: -1; aspect-ratio: auto; min-height: 400px; }
}
@media (max-width: 520px) {
  .stage { min-height: 440px; border-radius: 24px; }
  .tiles { gap: 8px; }
  .tile__count { font-size: 10px; padding: 4px 6px; white-space: normal; text-align: center; justify-content: center; }
  .play-demo__btn { height: 70px; padding: 0 36px; font-size: 28px; }
  .tour__tab { padding: 14px; grid-template-columns: 42px 1fr; gap: 12px; }
  .tour__icon { width: 42px; height: 42px; }
  .tour__text b { font-size: 16px; }
}

/* ==========================================================================
   Boutique Pixelcraft : choix du serveur + visite animée « comment ça marche »
   ========================================================================== */

.pc-shop-hero .lead { color: var(--text-soft); }
.srv-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 30px; }
.srv {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; align-items: center; gap: 16px; min-height: 110px; padding: 16px 20px;
  border-radius: 22px; text-align: left; color: #fff;
  border: 2px solid rgba(255, 255, 255, .12); box-shadow: 0 6px 0 #0b0620;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.srv:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--c) 60%, transparent); }
.srv__bg { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; filter: saturate(.6) brightness(.55); transition: filter .2s; }
.srv::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(14, 8, 32, .92) 0%, rgba(14, 8, 32, .55) 100%); }
.srv img { width: 110px; height: 80px; object-fit: contain; filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .5)); }
.srv__text b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 24px; text-transform: uppercase; }
.srv__text small { color: var(--text-muted); font-weight: 700; font-size: 14px; }
.srv__check {
  margin-left: auto; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .25); color: transparent; flex: none;
}
.srv__check svg { width: 18px; height: 18px; }
.srv[aria-selected="true"] { border-color: var(--gold); box-shadow: 0 6px 0 var(--gold-edge), 0 0 0 4px rgba(255, 213, 79, .12); }
.srv[aria-selected="true"] .srv__bg { filter: saturate(1) brightness(.75); }
.srv[aria-selected="true"] .srv__check { background: var(--gold); border-color: var(--gold-edge); color: var(--gold-ink); }
[data-goal][hidden] { display: none; }
.pc-shop-hero .cats { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
@media (max-width: 700px) {
  .srv-pick { grid-template-columns: 1fr; }
  .srv { min-height: 90px; }
  .srv img { width: 80px; height: 60px; }
}

/* Scène : choisir son serveur */
.pick { display: flex; gap: 14px; }
.pick__srv {
  display: grid; justify-items: center; gap: 8px; width: 170px; padding: 14px 10px; border-radius: 20px;
  background: rgba(255, 255, 255, .05); border: 2px solid rgba(255, 255, 255, .15);
  font-weight: 900; font-size: 13px; text-align: center;
}
.pick__srv img { height: 72px; width: auto; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .5)); }
.pick__srv--on { border-color: var(--gold); background: rgba(255, 213, 79, .1); box-shadow: 0 0 0 5px rgba(255, 213, 79, .12); }
.minis { display: flex; gap: 12px; }
.mini {
  position: relative; display: grid; justify-items: center; gap: 2px; width: 118px; padding: 10px 8px 12px; border-radius: 18px;
  background: linear-gradient(180deg, #24154f, #1c1040); border: 1px solid var(--line-strong);
}
.mini img { width: 74px; height: 64px; object-fit: contain; }
.mini b { font-family: var(--font-display); font-size: 20px; }
.mini small { font-weight: 900; color: var(--gold); }
.mini--hot { border: 2px solid var(--gold); transform: translateY(-8px); }
.scene--pick.is-active .pick__srv--on { animation: pickOn .5s ease .6s both; }
.scene--pick.is-active .mini { animation: popIn .55s cubic-bezier(.2, .9, .3, 1.35) var(--d) both; }
.scene--pick.is-active .mini--hot { animation: popInHot .55s cubic-bezier(.2, .9, .3, 1.35) var(--d) both; }
@keyframes pickOn { from { border-color: rgba(255, 255, 255, .15); background: rgba(255, 255, 255, .05); box-shadow: none; } 50% { transform: scale(1.06); } }
@keyframes popInHot { from { opacity: 0; transform: translateY(20px) scale(.8); } }

/* Scène : paiement */
.checkout {
  display: grid; gap: 12px; width: min(100%, 380px); padding: 18px; border-radius: 24px;
  background: #fff7dc; color: var(--gold-ink); border: 2px solid var(--gold-edge); box-shadow: 0 6px 0 var(--gold-edge), 0 24px 50px rgba(0, 0, 0, .45);
}
.checkout__row { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; }
.checkout__row img { width: 56px; height: 40px; object-fit: cover; border-radius: 10px; }
.checkout__row b { display: block; font-size: 15px; }
.checkout__row small { color: #7a5a14; font-weight: 800; }
.checkout__row > span { font-family: var(--font-display); font-size: 22px; }
.checkout__field {
  display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 12px 0 8px; border-radius: 12px;
  background: #fff; border: 2px solid #d9b25a; font-weight: 800;
}
.checkout__field img { width: 28px; height: 28px; border-radius: 6px; image-rendering: pixelated; }
.checkout__field .type { overflow: hidden; white-space: nowrap; border-right: 2px solid transparent; }
.checkout__btn {
  display: flex; align-items: center; justify-content: center; gap: 8px; height: 48px; border-radius: 14px;
  background: linear-gradient(180deg, var(--gold-hi) 0 50%, var(--gold-lo) 50%); border: 2px solid var(--gold-edge);
  box-shadow: 0 4px 0 var(--gold-edge); font-weight: 900; text-transform: uppercase; letter-spacing: .04em;
}
.checkout__btn svg { width: 18px; height: 18px; }
.checkout__ok {
  display: flex; align-items: center; justify-content: center; gap: 10px; height: 48px; border-radius: 14px;
  background: #16361c; color: #8be98f; border: 2px solid #46a84b; font-weight: 900;
}
.checkout__ok svg { width: 28px; height: 28px; fill: none; stroke: #8be98f; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.checkout__ok circle { stroke-dasharray: 150; }
.checkout__ok path { stroke-dasharray: 40; }
.scene--pay.is-active .checkout { animation: fadeUp .45s ease both; }
.scene--pay.is-active .checkout__field .type { animation: typing 1.1s steps(14) .5s both, caret .5s step-end 3 .5s; }
.scene--pay.is-active .checkout__btn { animation: payPress 2.6s ease both; }
.scene--pay.is-active .checkout__ok { animation: okIn .4s ease 2.6s both; }
.scene--pay.is-active .checkout__ok circle { animation: draw .6s ease 2.8s both; }
.scene--pay.is-active .checkout__ok path { animation: drawCheck .4s ease 3.3s both; }
@keyframes typing { from { width: 0; } to { width: 14ch; } }
@keyframes caret { 50% { border-right-color: var(--gold-ink); } }
@keyframes payPress {
  0%, 70% { transform: none; box-shadow: 0 4px 0 var(--gold-edge); opacity: 1; max-height: 48px; }
  78% { transform: translateY(4px); box-shadow: 0 0 0 var(--gold-edge); }
  90% { opacity: 1; max-height: 48px; transform: none; }
  100% { opacity: 0; max-height: 0; margin-top: -12px; border-width: 0; }
}
.checkout__btn { opacity: 0; max-height: 0; margin-top: -12px; border-width: 0; overflow: hidden; }
@keyframes okIn { from { opacity: 0; transform: scale(.9); } }
@keyframes draw { from { stroke-dashoffset: 150; } }
@keyframes drawCheck { from { stroke-dashoffset: 40; } }

/* Scène : livraison en jeu (fenêtre de chat façon Minecraft) */
.mc { display: grid; gap: 18px; justify-items: center; width: min(100%, 470px); }
.mc__chat {
  width: 100%; padding: 12px 14px; border-radius: 8px; background: rgba(0, 0, 0, .55);
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 14px; line-height: 1.6; color: #fff;
  text-shadow: 2px 2px 0 #3f3f3f;
}
.mc__chat p { margin: 0; }
.mc__gold { color: #ffaa00; }
.mc__green { color: #55ff55; }
.mc__aqua { color: #55ffff; }
.mc__bar { display: grid; grid-template-columns: repeat(9, 1fr); gap: 3px; padding: 4px; border-radius: 6px; background: rgba(0, 0, 0, .55); border: 2px solid #555; }
.mc__bar span { width: 42px; height: 42px; background: rgba(139, 139, 139, .35); border: 2px solid #373737; display: grid; place-items: center; }
.mc__bar img { width: 34px; height: 34px; object-fit: cover; border-radius: 3px; }
.mc__slot--new { border-color: #fff !important; box-shadow: 0 0 14px rgba(255, 213, 79, .8); }
.scene--deliver.is-active .mc__chat p { animation: chatIn .35s ease var(--d) both; }
.scene--deliver.is-active .mc__slot--new img { animation: itemPop .6s cubic-bezier(.2, .9, .3, 1.6) 1.1s both; }
.scene--deliver.is-active .mc__slot--new { animation: slotGlow 1.2s ease 1.1s both; }
@keyframes chatIn { from { opacity: 0; transform: translateY(8px); } }
@keyframes itemPop { from { opacity: 0; transform: translateY(-40px) scale(.4); } }
@keyframes slotGlow { from { box-shadow: 0 0 0 rgba(255, 213, 79, 0); border-color: #373737; } }
@media (max-width: 520px) { .mc__bar span { width: 30px; height: 30px; } .mc__bar img { width: 24px; height: 24px; } .mc__chat { font-size: 12px; } }

/* Scène : objectif commun */
.goal-demo { display: grid; gap: 14px; justify-items: center; width: min(100%, 440px); text-align: center; }
.goal-demo__pct { font-family: var(--font-display); font-size: 64px; line-height: 1; color: #8fdcff; text-shadow: 0 5px 0 #0d3b73; }
.goal-demo__bar { position: relative; width: 100%; height: 26px; border-radius: 999px; background: #120a2a; border: 1px solid var(--line-strong); }
.goal-demo__bar i {
  display: block; width: 48.91%; height: 100%; border-radius: 999px;
  background: repeating-linear-gradient(-45deg, rgba(255,255,255,.2) 0 8px, transparent 8px 16px), linear-gradient(180deg, #cff3ff, #8fdcff 45%, #2a8de0);
}
.goal-demo__flag {
  position: absolute; right: -6px; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
  background: var(--gold); color: var(--gold-ink); border: 2px solid var(--gold-edge); box-shadow: 0 3px 0 var(--gold-edge);
}
.goal-demo__flag svg { width: 20px; height: 20px; }
.goal-demo p { margin: 0; color: var(--text-muted); font-weight: 800; font-size: 14px; }
.goal-demo__heads { display: flex; align-items: center; gap: 8px; }
.goal-demo__heads img { width: 40px; height: 40px; border-radius: 10px; image-rendering: pixelated; border: 2px solid var(--pc-violet); }
.goal-demo__heads span { font-weight: 900; color: var(--gold); }
.scene--goal.is-active .goal-demo__bar i { animation: fill 1.6s cubic-bezier(.3, .8, .3, 1) .4s both; }
.scene--goal.is-active .goal-demo__flag { animation: bob 1.6s ease-in-out infinite; }
.scene--goal.is-active .goal-demo__heads > * { animation: popIn .45s cubic-bezier(.2, .9, .3, 1.4) calc(1.6s + var(--d)) both; }