/* Boutique Varelia — cartes sombres, couleurs par rayon. */

/* Polices Varelia auto-hébergées (sous-ensemble latin, licence OFL). */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("fonts/bricolage-grotesque-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("fonts/figtree-latin.woff2") format("woff2");
  font-weight: 300 900;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --fond: #0a0f1a;
  --fond-2: #0e1524;
  --carte: #111a2b;
  --carte-2: #152036;
  --ligne: rgb(255 255 255 / 0.08);
  --ligne-forte: rgb(255 255 255 / 0.16);
  --texte: #f2f5fa;
  --texte-2: #b9c3d3;
  --texte-3: #8f9bb0;
  --bleu: #2f7ff0;
  --bleu-clair: #5a9cff;
  --orange: #ff9a45;
  --titre: "Bricolage Grotesque", Georgia, serif;
  --corps: "Figtree", system-ui, sans-serif;
}
* {
  box-sizing: border-box;
  min-width: 0;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background:
    radial-gradient(
      ellipse 80% 50% at 50% -10%,
      rgb(47 127 240 / 0.16),
      transparent 60%
    ),
    var(--fond);
  color: var(--texte);
  font: 16px/1.6 var(--corps);
  -webkit-font-smoothing: antialiased;
}
h1,
h2,
h3 {
  margin: 0;
  font-family: var(--titre);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  text-wrap: balance;
}
p {
  margin: 0;
}
a {
  color: inherit;
}
a:focus-visible {
  outline: 2px solid var(--bleu-clair);
  outline-offset: 3px;
  border-radius: 6px;
}
.shell {
  width: min(76rem, 100% - 2rem);
  margin-inline: auto;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.sprite {
  position: absolute;
  width: 0;
  height: 0;
}

/* Annonce et en-tête. */
.annonce {
  border-bottom: 1px solid rgb(90 156 255 / 0.25);
  background: linear-gradient(90deg, rgb(47 127 240 / 0.18), rgb(47 127 240 / 0.06));
  font-size: 0.85rem;
}
.annonce .shell {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1rem;
  padding-block: 0.6rem;
}
.annonce strong {
  color: var(--bleu-clair);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.entete .shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.2rem;
}
.marque {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--titre);
  font-size: 1.2rem;
  font-weight: 700;
  text-decoration: none;
}
.marque svg {
  width: 30px;
  height: 30px;
  color: var(--texte);
}
.marque span {
  color: var(--orange);
  font-family: var(--corps);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.entete-liens {
  display: flex;
  gap: 1.4rem;
  font-size: 0.92rem;
}
.entete-liens a {
  color: var(--texte-2);
  text-decoration: none;
}
.entete-liens a:hover {
  color: var(--texte);
}

/* Accroche et étapes. */
.hero {
  padding-block: clamp(2.5rem, 7vw, 5rem) 2.5rem;
}
.surtitre {
  color: var(--bleu-clair);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.hero h1 {
  margin-top: 1rem;
  font-size: clamp(2.6rem, 7vw, 5rem);
  font-weight: 800;
  letter-spacing: -0.04em;
}
.hero h1 span {
  background: linear-gradient(90deg, var(--orange), #ffc58a 45%, var(--bleu-clair));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.lead {
  max-width: 42rem;
  margin-top: 1.2rem;
  color: var(--texte-2);
  font-size: 1.1rem;
}
.etapes {
  display: grid;
  gap: 0.8rem;
  margin: 2.2rem 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 860px) {
  .etapes {
    grid-template-columns: repeat(3, 1fr);
  }
}
.etapes li {
  display: flex;
  gap: 0.9rem;
  border: 1px solid var(--ligne);
  border-radius: 1rem;
  background: var(--carte);
  padding: 1rem 1.1rem;
  color: var(--texte-2);
  font-size: 0.92rem;
}
.etapes li > span {
  display: grid;
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  place-items: center;
  border: 1px solid rgb(90 156 255 / 0.45);
  border-radius: 50%;
  color: var(--bleu-clair);
  font-family: var(--titre);
  font-weight: 700;
}
.etapes strong {
  display: block;
  color: var(--texte);
}

/* Rayons. */
.rayons {
  position: sticky;
  top: 0;
  z-index: 10;
  border-block: 1px solid var(--ligne);
  background: rgb(10 15 26 / 0.86);
  backdrop-filter: blur(12px);
}
.rayons ul {
  display: flex;
  gap: 0.4rem;
  margin: 0;
  overflow-x: auto;
  padding: 0.7rem 0;
  list-style: none;
}
.rayons a {
  display: inline-block;
  border: 1px solid var(--ligne-forte);
  border-radius: 2rem;
  padding: 0.4rem 0.95rem;
  color: var(--texte-2);
  font-size: 0.88rem;
  text-decoration: none;
  white-space: nowrap;
}
.rayons a:hover {
  border-color: rgb(90 156 255 / 0.6);
  color: var(--texte);
}
.rayon {
  padding-top: clamp(2.8rem, 6vw, 4.2rem);
  scroll-margin-top: 4rem;
}
.rayon-entete {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 0.6rem 1rem;
  margin-bottom: 1.4rem;
}
.rayon-entete h2 {
  font-size: clamp(1.8rem, 3.6vw, 2.5rem);
}
.rayon-entete p {
  color: var(--texte-3);
}
.grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: 1rem;
}

/* Cartes. */
.carte {
  --teinte: 90 156 255;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--ligne);
  border-radius: 1.1rem;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.035), transparent 40%),
    var(--carte);
  padding: 1.3rem 1.3rem 1.2rem;
  box-shadow: 0 18px 40px -26px rgb(0 0 0 / 0.8);
  transition:
    border-color 0.2s,
    transform 0.2s;
}
.carte:hover {
  border-color: rgb(var(--teinte) / 0.4);
  transform: translateY(-3px);
}
.carte-centree {
  align-items: center;
  text-align: center;
}
.carte-cat {
  align-self: stretch;
  color: var(--texte-3);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-align: left;
  text-transform: uppercase;
}
.carte h3 {
  margin-top: 0.9rem;
  font-size: 1.45rem;
}
.carte-texte {
  margin-top: 0.7rem;
  color: var(--texte-2);
  font-size: 0.88rem;
  line-height: 1.55;
}
.carte-pied {
  align-self: stretch;
  margin-top: auto;
  padding-top: 1.3rem;
}

/* Prix. */
.prix {
  display: flex;
  min-height: 2.8rem;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  border-radius: 0.75rem;
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
}
.prix-attente,
.prix-coins {
  background: rgb(255 255 255 / 0.06);
  color: var(--texte-2);
}
.prix-coins {
  color: #f6dd8e;
}
.prix-achat {
  background: linear-gradient(180deg, var(--bleu-clair), var(--bleu));
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.25),
    0 10px 24px -12px var(--bleu);
  transition: filter 0.2s;
}
.prix-achat:hover {
  filter: brightness(1.1);
}
.mini-piece {
  width: 18px;
  height: 18px;
}

/* Grades : couronnes colorées. */
.couronne {
  width: 76px;
  height: 62px;
  margin-top: 1rem;
  filter: drop-shadow(0 6px 18px var(--lueur));
}
.couronne-corps,
.couronne-base,
.couronne-perle {
  fill: var(--or);
}
.couronne-base {
  fill: var(--or-fonce);
}
.couronne-starter {
  --or: #a4adbb;
  --or-fonce: #7c8594;
  --lueur: rgb(164 173 187 / 0.3);
}
.couronne-debutant {
  --or: #4fc77a;
  --or-fonce: #2f9a57;
  --lueur: rgb(79 199 122 / 0.4);
}
.couronne-intermediaire {
  --or: #3d8ff5;
  --or-fonce: #2368c8;
  --lueur: rgb(61 143 245 / 0.45);
}
.couronne-pro {
  --or: #f4c04f;
  --or-fonce: #c79222;
  --lueur: rgb(244 192 79 / 0.45);
}
.couronne-ultra {
  --or: #b679f5;
  --or-fonce: #8b4fd0;
  --lueur: rgb(182 121 245 / 0.45);
}

/* Packs teintés. */
.carte-pack h3 {
  margin-top: 1.1rem;
  font-size: 1.75rem;
}
.carte-pack .carte-cat {
  color: rgb(var(--teinte));
}
.carte-pack::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(
    120% 80% at 0% 0%,
    rgb(var(--teinte) / 0.2),
    transparent 60%
  );
}
.carte-pack .prix-attente {
  background: rgb(var(--teinte) / 0.12);
}
.pack-starter {
  --teinte: 240 160 80;
}
.pack-legal {
  --teinte: 90 156 255;
}
.pack-illegal {
  --teinte: 235 90 80;
}

/* Illustrations. */
.art-icone {
  width: 64px;
  height: 64px;
  margin-top: 1rem;
  fill: none;
  stroke: var(--bleu-clair);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 6px 16px rgb(90 156 255 / 0.35));
}
#argent .art-icone {
  stroke: #57c98a;
  filter: drop-shadow(0 6px 16px rgb(87 201 138 / 0.35));
}
.art-chapeau {
  width: 92px;
  height: 58px;
  margin-top: 1rem;
  filter: drop-shadow(0 6px 16px rgb(200 140 70 / 0.35));
}
.chapeau-calotte,
.chapeau-bord {
  fill: #b9844a;
}
.chapeau-bord {
  fill: #a06f3a;
}
.chapeau-ruban {
  fill: #5a3a1c;
}
.pile {
  width: 120px;
  height: 84px;
  margin-top: 0.8rem;
  filter: drop-shadow(0 10px 18px rgb(224 180 79 / 0.3));
}

/* Aide. */
.aide {
  margin-top: clamp(3.5rem, 7vw, 5rem);
  border: 1px solid var(--ligne);
  border-radius: 1.4rem;
  background:
    radial-gradient(80% 120% at 100% 0%, rgb(88 101 242 / 0.18), transparent 60%),
    var(--carte);
  padding: clamp(1.5rem, 4vw, 2.5rem);
}
.aide h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
}
.aide p {
  max-width: 44rem;
  margin-top: 0.8rem;
  color: var(--texte-2);
}

/* Boutons. */
.bouton {
  display: inline-flex;
  min-height: 2.9rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.8rem;
  padding: 0 1.2rem;
  font-weight: 700;
  text-decoration: none;
  transition: filter 0.2s;
}
.bouton:hover {
  filter: brightness(1.08);
}
.bouton-discord {
  margin-top: 1.4rem;
  background: #5865f2;
  color: #fff;
}
.bouton-paypal {
  background: #ffc439;
  color: #13233f;
}
.bouton-carte {
  background: #f2f5fa;
  color: #0a0f1a;
}

/* Fenêtres de paiement (sans script : cible d'ancre). */
.paiement {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: none;
  place-items: center;
  padding: 1rem;
}
.paiement:target {
  display: grid;
}
.paiement-fond {
  position: absolute;
  inset: 0;
  background: rgb(4 7 14 / 0.72);
  backdrop-filter: blur(6px);
}
.paiement-boite {
  position: relative;
  width: min(32rem, 100%);
  max-height: calc(100vh - 2rem);
  overflow: auto;
  border: 1px solid var(--ligne-forte);
  border-radius: 1.3rem;
  background: var(--carte-2);
  padding: 1.6rem;
  box-shadow: 0 30px 80px -20px rgb(0 0 0 / 0.9);
}
.paiement-boite h2 {
  margin-top: 0.6rem;
  font-size: 1.6rem;
}
.paiement-etapes {
  margin: 1.1rem 0 0;
  padding-left: 1.2rem;
  color: var(--texte-2);
  font-size: 0.93rem;
  line-height: 1.7;
}
.paiement-etapes strong {
  color: var(--texte);
}
.paiement-boutons {
  display: grid;
  gap: 0.6rem;
  margin-top: 1.3rem;
}
.paiement-note {
  margin-top: 1rem;
  color: var(--texte-3);
  font-size: 0.82rem;
}
.paiement-note a {
  color: var(--texte-2);
}
.paiement-fermer {
  display: inline-block;
  margin-top: 1rem;
  color: var(--texte-2);
  font-size: 0.9rem;
}

footer {
  margin-top: 4rem;
  border-top: 1px solid var(--ligne);
  padding-block: 2rem;
  color: var(--texte-3);
  font-size: 0.82rem;
}
footer a {
  color: var(--texte-2);
}

@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}

/* Mode intégré à l'ordinateur : l'ordinateur fournit déjà l'en-tête. */
html[data-integre="ordinateur"] [data-chrome-site] {
  display: none;
}
html[data-integre="ordinateur"] .hero {
  padding-top: 2rem;
}