/*
 * Éclosia : la matière des fenêtres du jeu (brun laqué, filets dorés, orange
 * de l'action principale) en plus grand. Animations en transformation et
 * opacité seulement, coupées si le système demande moins de mouvement.
 */

@font-face {
  font-family: Inter;
  src: url('fonts/inter-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --ink: #140b05;
  --ink-2: #1d1209;
  --lacquer-1: #6b4a2e;
  --lacquer-2: #3d2716;
  --lacquer-3: #2a1a0e;
  --edge: #0e0804;
  --cream: #f3e6cd;
  --cream-dim: #cdb894;
  --title: #f3d9a4;
  --gold: #e7c27a;
  --gold-light: #fff0c4;
  --gold-deep: #9a6a1c;
  --orange: #f08a24;
  --orange-light: #ffb24a;
  --orange-deep: #c9581a;
  --on-orange: #3b1a05;
  --gloss: rgb(255 236 200 / 0.2);
  --gloss-strong: rgb(255 236 200 / 0.38);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --spring: cubic-bezier(0.34, 1.45, 0.64, 1);
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  --gutter: clamp(16px, 4vw, 48px);
  color-scheme: dark;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background: var(--ink);
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--ink);
  font:
    400 17px/1.6 Inter,
    system-ui,
    sans-serif;
  color: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

.icon {
  width: 22px;
  height: 22px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ----- Barre du haut : verre fumé brun, liens à droite ----- */
.bar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: max(12px, env(safe-area-inset-top)) var(--gutter) 12px;
  background: linear-gradient(180deg, rgb(20 11 5 / 0.82), rgb(20 11 5 / 0));
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 19px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--title);
}

.brand img {
  width: 40px;
  height: 40px;
  filter: drop-shadow(0 0 8px rgb(255 160 60 / 0.5));
}

.bar nav {
  display: flex;
  align-items: center;
  gap: 10px;
}

.bar-link,
.bar-vote {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  font-weight: 650;
  font-size: 15px;
  transition: transform 160ms var(--ease);
}

.bar-link {
  border: 1px solid rgb(231 194 122 / 0.4);
  background: rgb(20 11 5 / 0.45);
  color: var(--cream);
  backdrop-filter: blur(6px);
}

.bar-vote {
  border: 1px solid rgb(255 240 196 / 0.7);
  background:
    linear-gradient(180deg, var(--gloss-strong), transparent 55%),
    linear-gradient(180deg, var(--orange-light), var(--orange) 55%, var(--orange-deep));
  color: var(--on-orange);
  font-weight: 750;
}

.bar-link:hover,
.bar-vote:hover {
  transform: translateY(-1px);
}

/* ----- Accueil : les vues du monde en fond, l'œuf au centre ----- */
.hero {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: 120px var(--gutter) 96px;
  overflow: hidden;
  isolation: isolate;
}

.backdrop {
  position: absolute;
  inset: 0;
  z-index: -1;
}

/* Vues du monde en fondu lent, chacune avance doucement vers son point (main.js). */
.view {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity 2400ms ease-in-out;
}

.view.on {
  opacity: 1;
}

.view img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: 30% 45%;
  animation: drift 16s linear forwards;
}

.views.paused img {
  animation-play-state: paused;
}

/* Voile chaud : le monde reste visible, le texte lisible. */
.veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      60% 55% at 50% 46%,
      rgb(20 11 5 / 0.34),
      rgb(20 11 5 / 0.62) 70%,
      rgb(20 11 5 / 0.85)
    ),
    linear-gradient(180deg, rgb(20 11 5 / 0.35), transparent 30%, transparent 62%, var(--ink));
}

/* Braises qui montent doucement. */
.embers i {
  position: absolute;
  bottom: -10px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff3c4, #ffb347 60%, transparent 70%);
  box-shadow: 0 0 10px rgb(255 190 80 / 0.8);
  opacity: 0;
  animation: ember 11s linear infinite;
}

.embers i:nth-child(1) {
  left: 8%;
  animation-delay: -1s;
  animation-duration: 12s;
}
.embers i:nth-child(2) {
  left: 17%;
  animation-delay: -6s;
  animation-duration: 15s;
}
.embers i:nth-child(3) {
  left: 26%;
  animation-delay: -3s;
}
.embers i:nth-child(4) {
  left: 35%;
  animation-delay: -9s;
  animation-duration: 14s;
}
.embers i:nth-child(5) {
  left: 44%;
  animation-delay: -4.5s;
  animation-duration: 10s;
}
.embers i:nth-child(6) {
  left: 53%;
  animation-delay: -8s;
  animation-duration: 13s;
}
.embers i:nth-child(7) {
  left: 61%;
  animation-delay: -2s;
  animation-duration: 16s;
}
.embers i:nth-child(8) {
  left: 69%;
  animation-delay: -7s;
}
.embers i:nth-child(9) {
  left: 77%;
  animation-delay: -5s;
  animation-duration: 12.5s;
}
.embers i:nth-child(10) {
  left: 85%;
  animation-delay: -10s;
  animation-duration: 14.5s;
}
.hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 920px;
  text-align: center;
}

/* Le Dofus : éclos par défaut ; avec l'animation, d'abord fermé, il tremble puis éclot. */
.dofus {
  position: relative;
  height: min(33vh, 42vw, 360px);
  aspect-ratio: 200 / 256;
  margin-bottom: 14px;
  animation: rise 1100ms var(--ease) both;
}

.dofus img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform-origin: 50% 85%;
  filter: drop-shadow(0 16px 28px rgb(0 0 0 / 0.45));
}

.dofus-oeuf {
  opacity: 0;
}

.dofus-eclos {
  animation: float 6s ease-in-out infinite;
}

.eclosion .dofus-oeuf {
  opacity: 1;
  animation: tremble 1500ms ease-in both;
}

.eclosion .dofus-eclos {
  opacity: 0;
  transform: scale(0.82) translateY(6%);
  animation: none;
}

.eclosion.eclos .dofus-oeuf {
  opacity: 0;
  transform: scale(1.14);
  transition:
    opacity 260ms ease,
    transform 260ms ease;
}

.eclosion.eclos .dofus-eclos {
  opacity: 1;
  transform: none;
  transition:
    opacity 320ms ease,
    transform 900ms var(--spring);
  animation: float 6s 1s ease-in-out infinite;
}

/* Lueur dorée derrière le Dofus : seule son opacité respire ; elle monte avant l'éclosion. */
.aura {
  position: absolute;
  inset: -12%;
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    rgb(255 214 130 / 0.5),
    rgb(240 150 40 / 0.16) 55%,
    transparent
  );
  animation: breathe 2.5s ease-in-out infinite;
}

.eclosion .aura {
  animation: kindle 1500ms ease-in both;
}

.eclosion.eclos .aura {
  animation: breathe 2.5s ease-in-out infinite;
}

/* Le mot est dessiné en écailles par le canevas ; le titre garde sa place et son texte. */
.eclosion .wordmark {
  background: none;
  filter: none;
}

.ecailles {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.wordmark {
  margin: 0;
  font-weight: 850;
  font-size: clamp(48px, 8.6vw, 128px);
  line-height: 1;
  letter-spacing: 0.14em;
  padding-left: 0.14em;
  text-transform: uppercase;
  background: linear-gradient(180deg, #fff8e2 8%, var(--gold) 48%, #c88a32 70%, #f5d48c 92%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 4px 0 rgb(42 26 14 / 0.9)) drop-shadow(0 14px 30px rgb(0 0 0 / 0.55));
  animation: rise 1100ms 120ms var(--ease) both;
}

.tagline {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 22px 0 0;
  font-weight: 600;
  font-size: clamp(13px, 1.5vw, 18px);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--title);
  text-shadow: 0 2px 8px rgb(0 0 0 / 0.7);
  animation: rise 1100ms 220ms var(--ease) both;
}

/* Filets dorés terminés par un losange, de part et d'autre du slogan. */
.rule {
  position: relative;
  flex: none;
  width: clamp(28px, 6vw, 90px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}

.rule::after {
  content: '';
  position: absolute;
  right: -4px;
  top: -3px;
  width: 7px;
  height: 7px;
  background: var(--gold);
  box-shadow: 0 0 8px rgb(255 200 100 / 0.8);
  transform: rotate(45deg);
}

.rule:last-child {
  transform: scaleX(-1);
}

.lead {
  max-width: 60ch;
  margin: 14px 0 0;
  font-size: clamp(16px, 1.6vw, 21px);
  color: #e8d8ba;
  text-shadow:
    0 1px 2px rgb(0 0 0 / 0.9),
    0 2px 12px rgb(0 0 0 / 0.8);
  animation: rise 1100ms 300ms var(--ease) both;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 34px;
  animation: rise 1100ms 380ms var(--ease) both;
}

/* Voter : l'action principale, orange laqué, reflet qui passe de temps en temps. */
.btn-vote,
.btn-discord {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 64px;
  padding: 0 34px;
  overflow: hidden;
  border-radius: 999px;
  font-weight: 750;
  font-size: 19px;
  letter-spacing: 0.01em;
  transition: transform 180ms var(--ease);
  isolation: isolate;
}

.btn-vote {
  border: 1px solid rgb(255 240 196 / 0.8);
  background:
    linear-gradient(180deg, var(--gloss-strong), transparent 52%),
    linear-gradient(180deg, var(--orange-light), var(--orange) 55%, var(--orange-deep));
  box-shadow:
    0 0 0 1px rgb(90 40 10 / 0.7),
    0 10px 30px rgb(240 138 36 / 0.35),
    0 4px 10px rgb(0 0 0 / 0.4);
  color: var(--on-orange);
  text-shadow: 0 1px 0 rgb(255 220 160 / 0.6);
}

.btn-vote::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgb(255 255 255 / 0.55), transparent);
  transform: translateX(-160%) skewX(-18deg);
  animation: sheen 5.5s 1.8s ease-in-out infinite;
}

.btn-discord {
  border: 1px solid rgb(231 194 122 / 0.6);
  background:
    linear-gradient(180deg, var(--gloss), transparent 52%),
    linear-gradient(180deg, #5a3a22, #3a2414);
  box-shadow:
    0 0 0 1px var(--edge),
    0 4px 14px rgb(0 0 0 / 0.45);
  color: var(--title);
}

/* Lueur préparée, révélée au survol (opacité seulement). */
.btn-vote::after,
.btn-discord::after {
  content: '';
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 200ms ease;
}

.btn-vote::after {
  box-shadow: 0 0 34px rgb(255 170 70 / 0.8);
}

.btn-discord::after {
  box-shadow:
    inset 0 0 0 1px var(--gold),
    0 0 24px rgb(231 194 122 / 0.45);
}

.btn-vote:hover,
.btn-discord:hover {
  transform: translateY(-2px);
}

.btn-vote:hover::after,
.btn-discord:hover::after,
.btn-vote:focus-visible::after,
.btn-discord:focus-visible::after {
  opacity: 1;
}

.btn-vote:active,
.btn-discord:active {
  transform: translateY(1px) scale(0.98);
}

a:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
}

.scroll {
  position: absolute;
  left: 50%;
  bottom: max(20px, env(safe-area-inset-bottom));
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-left: -22px;
  border: 1px solid rgb(231 194 122 / 0.45);
  border-radius: 50%;
  background: rgb(20 11 5 / 0.4);
  color: var(--gold);
  animation: nudge 2.4s ease-in-out infinite;
}

.scroll svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ----- Au programme ----- */
.features {
  max-width: 1280px;
  margin: 0 auto;
  padding: 72px var(--gutter) 24px;
  background: radial-gradient(50% 60% at 50% 45%, rgb(120 70 30 / 0.22), transparent 70%);
}

.section-title {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0 0 32px;
  font-weight: 750;
  font-size: clamp(14px, 1.4vw, 17px);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
}

.section-title::before,
.section-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(231 194 122 / 0.6));
}

.section-title::after {
  transform: scaleX(-1);
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: clamp(14px, 1.8vw, 24px);
}

/* Carte : cadre laqué des fenêtres du jeu, rivets dorés, médaillon d'or. */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 28px 22px 24px;
  border: 1px solid var(--edge);
  border-radius: 16px;
  background:
    radial-gradient(90% 60% at 50% 0%, rgb(255 190 110 / 0.1), transparent 70%), var(--noise),
    linear-gradient(180deg, #3d3530, #2f2924);
  background-blend-mode: normal, soft-light, normal;
  box-shadow:
    0 0 0 4px var(--lacquer-2),
    0 0 0 5px var(--edge),
    inset 0 1px 0 rgb(255 236 200 / 0.12),
    0 18px 36px rgb(0 0 0 / 0.4);
  text-align: center;
}

.card::before,
.card::after {
  content: '';
  position: absolute;
  top: -1px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 35% 30%,
    var(--gold-light),
    var(--gold) 42%,
    var(--gold-deep) 78%,
    #4a300e
  );
  box-shadow: 0 0 0 1px var(--edge);
}

.card::before {
  left: -1px;
}

.card::after {
  right: -1px;
}

.badge {
  position: absolute;
  top: 12px;
  right: 14px;
  padding: 2px 9px;
  border: 1px solid rgb(240 138 36 / 0.6);
  border-radius: 999px;
  background: rgb(240 138 36 / 0.14);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--orange-light);
}

/* Médaillon : bois laqué, anneau d'or, pictogramme doré. */
.medal {
  display: grid;
  flex: none;
  place-items: center;
  width: 68px;
  height: 68px;
  margin-bottom: 16px;
  border: 3px solid transparent;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 35%, #5d3f26, #1d1209 72%) padding-box,
    linear-gradient(160deg, var(--gold-light), var(--gold) 40%, var(--gold-deep)) border-box;
  box-shadow:
    0 0 0 1px var(--edge),
    0 8px 20px rgb(0 0 0 / 0.5),
    0 0 22px rgb(240 160 60 / 0.22);
}

.medal svg {
  width: 36px;
  height: 36px;
  fill: none;
  stroke: var(--gold);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px rgb(255 190 90 / 0.45));
}

.card h3 {
  margin: 0 0 6px;
  font-weight: 750;
  font-size: 19px;
  line-height: 1.3;
  color: var(--title);
}

.card p {
  max-width: 30ch;
  margin: 0 auto;
  font-size: 15px;
  line-height: 1.55;
  color: var(--cream-dim);
}

/* Et aussi : le reste en pastilles. */
.extras {
  max-width: 980px;
  margin: 44px auto 0;
  text-align: center;
}

.extras h3 {
  margin: 0 0 16px;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}

.extras ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.extras li {
  padding: 7px 16px;
  border: 1px solid rgb(231 194 122 / 0.35);
  border-radius: 999px;
  background: linear-gradient(180deg, rgb(255 236 200 / 0.06), transparent), rgb(42 26 14 / 0.6);
  font-size: 15px;
  color: var(--cream);
}

/* ----- Bêta (à retirer pour la sortie officielle) ----- */
.beta {
  max-width: 980px;
  margin: 0 auto;
  padding: 64px var(--gutter) 0;
}

.beta-cadeaux {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.beta-cadeaux li {
  display: grid;
  gap: 4px;
  padding: 18px 20px;
  border: 1px solid rgb(231 194 122 / 0.35);
  border-radius: 14px;
  background: linear-gradient(180deg, rgb(255 236 200 / 0.06), transparent), rgb(42 26 14 / 0.6);
  text-align: center;
}

.beta-cadeaux b {
  font-size: 19px;
  color: var(--title);
}

.beta-cadeaux span {
  font-size: 15px;
  color: var(--cream-dim);
}

.beta-alerte {
  margin: 18px 0 0;
  padding: 14px 18px;
  border: 1px solid rgb(240 138 36 / 0.7);
  border-radius: 12px;
  background: rgb(240 138 36 / 0.1);
  font-size: 15px;
  line-height: 1.55;
}

.beta-alerte b {
  color: var(--orange-light);
}

.beta-suite {
  display: flex;
  justify-content: center;
  margin: 24px 0 0;
}

/* ----- Vote ----- */
.vote {
  max-width: 980px;
  margin: 0 auto;
  padding: 64px var(--gutter) 8px;
}

.vote-panel {
  display: flex;
  align-items: center;
  gap: 22px 28px;
  padding: 22px 26px;
  border: 1px solid rgb(231 194 122 / 0.45);
  border-radius: 20px;
  background:
    radial-gradient(70% 120% at 0% 50%, rgb(240 138 36 / 0.16), transparent 70%),
    linear-gradient(180deg, #3a2414, #24160b);
  box-shadow:
    0 0 0 1px var(--edge),
    inset 0 1px 0 rgb(255 236 200 / 0.12),
    0 18px 36px rgb(0 0 0 / 0.4);
}

.vote-dofus {
  flex: none;
  width: 50px;
  height: auto;
  filter: drop-shadow(0 0 14px rgb(255 190 90 / 0.45));
}

.vote-texte {
  flex: 1;
}

.vote-panel p {
  margin: 0;
  font-size: clamp(17px, 1.7vw, 20px);
  font-weight: 550;
  line-height: 1.45;
  color: var(--title);
}

.vote-panel .btn-vote {
  flex: none;
}

.vote-cagnotte {
  display: block;
  margin-top: 6px;
  font-size: 15px;
  color: var(--cream-dim);
}

.vote-cagnotte b {
  color: var(--gold-light);
  font-variant-numeric: tabular-nums;
}

.vote-sans-compte {
  margin: 14px 0 0;
  font-size: 14px;
  text-align: center;
  color: var(--cream-dim);
}

.vote-sans-compte a {
  color: var(--gold);
  text-decoration: underline;
  text-decoration-color: rgb(231 194 122 / 0.4);
  text-underline-offset: 3px;
}

/* ----- Kolizéum ----- */
.kolizeum {
  max-width: 980px;
  margin: 0 auto;
  padding: 64px var(--gutter) 8px;
}

.kolizeum-intro {
  margin: 0 0 18px;
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.5;
  text-align: center;
  color: var(--title);
}

.kolizeum-intro span {
  color: var(--cream-dim);
}

.kolizeum-tranches {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 14px;
}

.kolizeum-tranches button {
  padding: 7px 14px;
  border: 1px solid rgb(231 194 122 / 0.35);
  border-radius: 999px;
  background: rgb(0 0 0 / 0.25);
  color: var(--cream);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  transition:
    border-color 160ms var(--ease),
    background 160ms var(--ease);
}

.kolizeum-tranches button[aria-selected='true'] {
  border-color: var(--gold);
  background: rgb(231 194 122 / 0.18);
  color: var(--gold-light);
}

.kolizeum-classement {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 18px;
  border: 1px solid rgb(231 194 122 / 0.45);
  border-radius: 20px;
  list-style: none;
  background:
    radial-gradient(70% 120% at 100% 0%, rgb(194 59 34 / 0.18), transparent 70%),
    linear-gradient(180deg, #3a2414, #24160b);
  box-shadow:
    0 0 0 1px var(--edge),
    inset 0 1px 0 rgb(255 236 200 / 0.12),
    0 18px 36px rgb(0 0 0 / 0.4);
}

.kolizeum-classement li {
  display: grid;
  grid-template-columns: 40px 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgb(0 0 0 / 0.22);
}

.kolizeum-classement li.vide {
  display: block;
  text-align: center;
  color: var(--cream-dim);
}

.kolizeum-classement .rang {
  font-weight: 800;
  text-align: center;
  color: var(--gold);
}

.kolizeum-classement b {
  color: var(--title);
}

.kolizeum-classement .detail {
  font-size: 14px;
  color: var(--cream-dim);
}

.kolizeum-classement .cote {
  min-width: 60px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--gold-light);
}

@media (max-width: 560px) {
  .kolizeum-classement li {
    grid-template-columns: 32px 1fr auto;
  }

  .kolizeum-classement .detail {
    display: none;
  }
}

/* ----- Appel final ----- */
.cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 860px;
  margin: 0 auto;
  padding: 72px var(--gutter) 88px;
  text-align: center;
}

.cta-dofus {
  width: 94px;
  height: auto;
  filter: drop-shadow(0 0 18px rgb(255 190 90 / 0.4));
}

.cta h2 {
  margin: 10px 0 8px;
  font-weight: 800;
  font-size: clamp(32px, 4.4vw, 56px);
  line-height: 1.1;
  background: linear-gradient(180deg, #fff8e2, var(--gold) 60%, #c88a32);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.cta p {
  max-width: 44ch;
  margin: 0;
  color: var(--cream-dim);
}

.cta .actions {
  margin-top: 28px;
  animation: none;
}

/* ----- Pied de page ----- */
.footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 20px;
  padding: 22px var(--gutter) max(22px, env(safe-area-inset-bottom));
  border-top: 1px solid rgb(231 194 122 / 0.22);
  background: linear-gradient(180deg, #24160b, #170d06);
  font-size: 14px;
  color: var(--cream-dim);
}

.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 750;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--title);
}

.footer-brand img {
  width: 24px;
  height: 24px;
}

.fan {
  font-size: 13px;
  color: rgb(205 184 148 / 0.75);
}

/* Apparition au défilement (classes posées par main.js). */
.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 700ms var(--ease),
    transform 700ms var(--ease);
}

.js .reveal.seen {
  opacity: 1;
  transform: none;
}

.cards .reveal:nth-child(4n + 2) {
  transition-delay: 70ms;
}

.cards .reveal:nth-child(4n + 3) {
  transition-delay: 140ms;
}

.cards .reveal:nth-child(4n) {
  transition-delay: 210ms;
}

/* ----- Téléphone ----- */
@media (max-width: 700px) {
  body {
    font-size: 16px;
  }

  .brand span,
  .bar-link span {
    display: none;
  }

  .brand img {
    width: 36px;
  }

  .bar-link {
    width: 40px;
    padding: 0;
    justify-content: center;
  }

  .hero {
    padding-top: 84px;
  }

  .dofus {
    height: min(34vh, 80vw, 300px);
  }

  .tagline {
    gap: 10px;
    letter-spacing: 0.2em;
    line-height: 1.5;
  }

  .tagline .rule {
    display: none;
  }

  .tagline span {
    text-wrap: balance;
  }

  .actions {
    flex-direction: column;
    align-self: stretch;
    width: 100%;
    max-width: 380px;
    margin-inline: auto;
  }

  .btn-vote,
  .btn-discord {
    height: 58px;
    font-size: 17px;
  }

  .features {
    padding-top: 56px;
  }

  /* Cartes en ligne : médaillon à gauche, texte à droite. */
  .card {
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
    padding: 18px 18px 18px 16px;
    text-align: left;
  }

  .medal {
    width: 54px;
    height: 54px;
    margin: 0;
  }

  .medal svg {
    width: 28px;
    height: 28px;
  }

  .card h3 {
    font-size: 18px;
  }

  .card:has(.badge) h3 {
    padding-right: 72px;
  }

  .card p {
    max-width: none;
    margin: 0;
  }

  .extras li {
    padding: 6px 13px;
    font-size: 14px;
  }

  .vote {
    padding-top: 52px;
  }

  .vote-panel {
    flex-direction: column;
    padding: 24px 20px;
    text-align: center;
  }

  .vote-panel .btn-vote {
    align-self: stretch;
  }

  .cta {
    padding-top: 56px;
  }
}

/* ----- Animations ----- */
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
}

@keyframes tremble {
  0%,
  30% {
    transform: none;
  }
  40% {
    transform: rotate(-3deg);
  }
  50% {
    transform: rotate(3deg);
  }
  58% {
    transform: rotate(-4deg) translateX(-1%);
  }
  66% {
    transform: rotate(4deg) translateX(1%);
  }
  74% {
    transform: rotate(-6deg);
  }
  82% {
    transform: rotate(6deg);
  }
  88% {
    transform: rotate(-7deg) scale(1.02);
  }
  94% {
    transform: rotate(7deg) scale(1.04);
  }
  100% {
    transform: scale(1.06);
  }
}

@keyframes kindle {
  from {
    opacity: 0.6;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1.3);
  }
}

@keyframes float {
  50% {
    transform: translateY(-8px);
  }
}

@keyframes breathe {
  0%,
  100% {
    opacity: 0.65;
  }
  50% {
    opacity: 1;
  }
}

@keyframes sheen {
  0%,
  70% {
    transform: translateX(-160%) skewX(-18deg);
  }
  100% {
    transform: translateX(360%) skewX(-18deg);
  }
}

@keyframes ember {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.6);
  }
  12% {
    opacity: 0.9;
  }
  80% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
    transform: translate(30px, -70vh) scale(1.1);
  }
}

@keyframes drift {
  from {
    transform: scale(1.1);
  }
  to {
    transform: scale(1.01);
  }
}

@keyframes nudge {
  50% {
    transform: translateY(5px);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition-duration: 1ms !important;
  }

  .js .reveal {
    opacity: 1;
    transform: none;
  }
}