/* ==========================================================================
   CTLServ, shop.css
   Chargee uniquement sur /boutique/. Reprend les regles de main.css:
   Montserrat, graisse 600 maxi, aucun letter-spacing, tuiles biseautees.
   ========================================================================== */

.page-shop { padding-bottom: 26px; }   /* la barre de progression est fixee en bas */

/* ------------------------------------------------------------------ En-tete */

.shop__head { position: relative; overflow: hidden; padding: clamp(48px, 6vw, 80px) 0 clamp(36px, 4vw, 56px); }
.shop__bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.shop__head-in { position: relative; }

.shop__h1 {
  font-size: clamp(30px, 4vw, 48px); font-weight: 700;
  text-transform: uppercase;
}
.shop__h1 em { font-style: normal; color: var(--blue-lt); }
.shop__lede {
  max-width: 620px; margin-top: 18px;
  color: var(--muted); font-size: clamp(15px, 1.4vw, 16.5px); font-weight: 500;
}

/* --------------------------------------------------------------- Connexion */

/* --------------------------------------------------------------- Etapes */

.etape {
  display: flex; align-items: flex-start; gap: 18px;
  margin-top: 16px; padding: 20px 24px;
  background: var(--surface);
  border: 1px solid var(--br);
  border-radius: var(--r);
}
.etape:first-of-type { margin-top: 30px; }
.etape__n {
  display: inline-flex; align-items: center; justify-content: center;
  flex: none;
  width: 44px; height: 28px; margin-left: 9px;   /* 9px: compense le biseau */
  color: #fff; font-size: 14px; font-weight: 600; font-style: italic;
  background: linear-gradient(110deg, #0b4791 0%, #1d72cc 50%, #0b4791 100%);
  border-bottom: 2px solid var(--blue-lt);
  transform: skewX(var(--skew));
}
.etape__body { flex: 1; min-width: 0; }

/* Etape sur deux niveaux: le numero est centre sur le titre et sa phrase, pas
   sur toute la hauteur du bloc. Ce qui suit (saisie, resultat) est aligne sous
   le texte. 71 px = marge du biseau 9 + largeur 44 + ecart 18. */
.etape--col { display: block; }
.etape__head { display: flex; align-items: center; gap: 18px; }
.etape__head > div { min-width: 0; }
.etape--col .etape__body { padding-left: 71px; }
.etape__t { color: var(--txt); font-size: 15.5px; font-weight: 600; }
.etape__d { margin-top: 4px; color: var(--muted); font-size: 14px; }
.etape__d b { color: var(--blue-lt); font-weight: 600; }
.etape__ko { margin-top: 12px; color: var(--amber); font-size: 13.5px; }

/* Apercu au survol du [3]: la capture monte en fondu au-dessus du texte, pour
   que le joueur voie tout de suite de quel numero on parle. */
.apercu { position: relative; display: inline-block; cursor: help; }
.apercu b { border-bottom: 1px dotted rgba(108, 198, 255, .6); }
.apercu:focus-visible { outline: 2px solid var(--blue-lt); outline-offset: 3px; border-radius: 2px; }

.apercu__pop {
  position: absolute; bottom: calc(100% + 14px); left: 50%; z-index: 5;
  display: block; width: 300px;
  padding: 8px 8px 6px;
  background: rgba(8, 11, 18, .98);
  border: 1px solid var(--br-lt);
  border-radius: var(--r);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .6);
  opacity: 0; visibility: hidden;
  translate: -50% 8px;
  transition: opacity .22s var(--ease), translate .22s var(--ease), visibility .22s;
}
.apercu__pop::after {                 /* petite fleche vers le [3] */
  content: ""; position: absolute; top: 100%; left: 50%;
  margin-left: -6px;
  border: 6px solid transparent;
  border-top-color: var(--br-lt);
}
.apercu__pop img { width: 100%; height: auto; border-radius: 4px; }
.apercu__lg {
  display: block; margin-top: 7px;
  color: var(--muted); font-size: 12px; line-height: 1.5; text-align: center;
}

.apercu:hover .apercu__pop,
.apercu:focus .apercu__pop,
.apercu:focus-within .apercu__pop {
  opacity: 1; visibility: visible;
  translate: -50% 0;
}

@media (max-width: 520px) {
  /* Cale sur le bord gauche du bloc: a 300 px de large, centre sur le [3] la
     bulle sortirait de l'ecran. */
  .apercu { position: static; }
  .apercu__pop { left: 0; translate: 0 8px; width: min(300px, 100%); }
  .apercu__pop::after { display: none; }
  .apercu:hover .apercu__pop,
  .apercu:focus .apercu__pop,
  .apercu:focus-within .apercu__pop { translate: 0 0; }
}

/* Saisie du code */
.codef { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.codef input {
  width: 130px; padding: 12px 16px;
  color: var(--txt); font: 600 17px var(--font);
  background: rgba(0, 0, 0, .35);
  border: 1px solid var(--br-lt);
  border-radius: var(--r);
}
.codef input::placeholder { color: var(--dim); font-weight: 500; }
.codef input:focus-visible { outline: 2px solid var(--blue-lt); outline-offset: 2px; }
.codef__go { margin-left: 15px; }

/* Joueur trouve */
.joueur {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  margin-top: 16px; padding: 12px 16px;
  background: rgba(60, 217, 123, .07);
  border: 1px solid rgba(60, 217, 123, .3);
  border-radius: var(--r);
}
/* Drapeau: le meme SVG qu'en jeu. Les emoji drapeaux ne sont pas rendus sous
   Windows, qui affiche les deux lettres du pays a la place. */
.joueur__flag {
  flex: none;
  width: 30px; height: 20px;
  border-radius: 3px; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .14);
}
.joueur__flag svg { display: block; width: 100%; height: 100%; }

.joueur__id { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.joueur__ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.joueur__ligne b { color: var(--txt); font-size: 15.5px; font-weight: 600; }
.joueur__meta { color: var(--muted); font-size: 13px; }

/* Badges de rang et de crew, meme convention que le chat en jeu: rang en fond
   plein, crew en contour, pour les distinguer quand un joueur porte les deux. */
.badges { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.badge {
  display: inline-block;
  padding: 1px 7px;
  color: var(--role, var(--blue-lt));
  font-size: 10.5px; font-weight: 600; text-transform: uppercase;
  background: rgba(8, 10, 16, .55);
  border: 1px solid var(--role, var(--blue-lt));
  border-radius: 4px;
  box-shadow: 0 0 12px -3px var(--role, var(--blue-lt));
}
.badge--crew { background: transparent; }
.joueur__chg {
  margin-left: auto;
  padding: 7px 14px;
  color: var(--muted); font: 500 13px var(--font);
  background: var(--surface); border: 1px solid var(--br);
  border-radius: var(--r); cursor: pointer;
  transition: color .18s var(--ease), border-color .18s var(--ease);
}
.joueur__chg:hover { color: #fff; border-color: var(--br-lt); }

/* --------------------------------------------------------------- Connexion */

.auth { align-items: center; }
.auth .etape__body { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 26px; }
.auth__txt b {
  display: block;
  color: var(--txt); font-size: 15.5px; font-weight: 600;
}
/* Le pseudo reste sur la meme ligne: `.auth__txt span` est en bloc, un <em>
   echappe a cette regle. */
.auth__txt b em { font-style: normal; }

.auth__out {
  margin-left: 8px; padding: 0;
  color: var(--dim); font: 500 13px var(--font);
  background: none; border: 0; cursor: pointer;
  transition: color .18s var(--ease);
}
.auth__out:hover { color: #ff6b6b; text-decoration: underline; }
.auth__txt span { display: block; margin-top: 4px; color: var(--muted); font-size: 14px; }
.auth .auth__on { display: none; }
.auth.is-on .auth__off { display: none; }
.auth.is-on .auth__on { display: block; }
.auth.is-on { border-color: rgba(60, 217, 123, .35); }
.auth.is-on .auth__txt b { color: var(--ok); }

/* Le biseau du bouton depasse a gauche: on compense pour qu'il reste dans la
   boite, comme partout ailleurs sur le site. */
.auth__btns { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-left: auto; }
.auth__go { margin-left: 15px; }
.auth__ko { max-width: 340px; color: var(--amber); font-size: 13px; line-height: 1.6; }

/* ------------------------------------------------------------------- Etats */

.state {
  padding: 44px 24px; text-align: center;
  background: var(--surface);
  border: 1px solid var(--br);
  border-radius: var(--r);
}
.state__t { color: var(--txt); font-size: 17px; font-weight: 600; }
.state__d { margin-top: 8px; color: var(--muted); font-size: 14.5px; }

/* --------------------------------------------------------------- Catalogue */

.shop__cat + .shop__cat { margin-top: 56px; }

.prods {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

.prod {
  display: flex; flex-direction: column;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--br);
  border-radius: var(--r);
  transition: transform .24s var(--ease), border-color .24s var(--ease), background .24s var(--ease);
}
.prod:hover { transform: translateY(-5px); border-color: var(--br-lt); background: var(--surface-2); }

/* Fond visible derrière un visuel transparent, et seul décor quand le pack n'en
   a pas. Pas de `border-bottom`: le filet gris coupait l'image de part en part
   et se prolongeait mal après le liseré bleu, qui ne fait que 74px. Le dégradé
   sombre du bas suffit à détacher l'image du corps de la carte.

   `--pack-h` et `--pack-s` sont la TEINTE du visuel du pack, posées par shop.js
   après lecture des pixels. Les valeurs ci-dessous sont le bleu du site, et
   servent de repli tant que l'image n'est pas chargée, ou si elle n'a aucune
   couleur franche à donner. La clarté, elle, n'est jamais dictée par l'image:
   c'est ce qui garantit que le motif reste lisible sur fond sombre quel que
   soit le visuel envoyé.

   Elles sont portées par la CARTE entière, pas par le cadre du visuel: les
   tuiles du liseré vivent dans `.prod__body`, qui est un frère du cadre et
   n'hériterait donc de rien. */
.prod, .pmod__box { --pack-h: 211; --pack-s: 86%; }
.prod__media {
  position: relative; overflow: hidden;
  height: 150px;
  background:
    linear-gradient(180deg, rgba(5, 7, 12, 0) 40%, rgba(5, 7, 12, .92) 100%),
    linear-gradient(140deg, hsl(var(--pack-h) var(--pack-s) 30%), #071322);
}
.prod__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

.prod__body {
  position: relative;
  display: flex; flex-direction: column; flex: 1;
  padding: 20px 22px 22px;
}
/* File de petites tuiles, le motif de la barre de progression du bas de page.
   Le dégradé reste une seule couche, découpée en tuiles par un masque: chaque
   tuile hérite ainsi de sa portion du dégradé au lieu d'être un aplat, et la
   lueur suit la découpe puisque `drop-shadow` épouse l'alpha. */
.prod__body::before {
  content: ""; position: absolute; top: -1px; left: -14px;
  width: 78px; height: 5px;
  background: linear-gradient(100deg,
    hsl(var(--pack-h) var(--pack-s) 71%), hsl(var(--pack-h) var(--pack-s) 55%));
  transform: skewX(var(--skew));
  -webkit-mask-image: repeating-linear-gradient(90deg, #000 0 15px, transparent 15px 19px);
  mask-image: repeating-linear-gradient(90deg, #000 0 15px, transparent 15px 19px);
  transition: width .38s var(--ease), filter .38s var(--ease);
}
/* La largeur s'étire d'un multiple exact du pas (19px): les tuiles se révèlent
   une par une et la dernière n'est jamais coupée en deux. */
.prod:hover .prod__body::before {
  width: 173px;
  filter: drop-shadow(0 0 7px hsl(var(--pack-h) var(--pack-s) 55% / .8));
}

.prod h3 { margin-bottom: 9px; font-size: 16px; font-weight: 600; text-transform: uppercase; }
.prod__desc {
  color: var(--muted); font-size: 14.2px;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
  overflow: hidden;
}
.prod__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin-top: auto; padding-top: 18px;
}
.prod__price { font-size: 19px; font-weight: 600; font-style: italic; color: var(--txt); }
.prod__price.is-promo { color: var(--amber); }

/* Tebex refuse l'ajout tant que le joueur n'est pas connecte. Le bouton dit
   donc « Se connecter » avant, « Acheter » apres.
   L'etat est porte par <body> et non par `.shop`: la fenetre de detail vit en
   dehors de `<main class="shop">`, et avec l'ancienne portee ses deux libelles
   s'affichaient l'un a cote de l'autre. */
.l-login { display: none; }
body:not(.is-auth) .l-add { display: none; }
body:not(.is-auth) .l-login { display: inline; }

.btn.is-busy { opacity: .6; pointer-events: none; }

/* La carte entiere est cliquable: on le montre au curseur et au focus clavier. */
.prod { cursor: pointer; }
.prod:focus-visible { outline: 2px solid var(--blue-lt); outline-offset: 3px; }

/* ------------------------------------------------------- Detail d'un produit */

.pmod { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 20px; }
.pmod[hidden] { display: none; }
.pmod__fond { position: absolute; inset: 0; background: rgba(3, 5, 9, .78); backdrop-filter: blur(4px); }
body.pmod-on { overflow: hidden; }

/* Colonne: visuel figé en haut, description qui défile, barre de prix ancrée en
   bas. Avant, toute la fenêtre défilait d'un bloc et le bouton d'achat n'était
   atteignable qu'après avoir lu la description jusqu'au bout. */
.pmod__box {
  position: relative;
  display: flex; flex-direction: column;
  width: min(560px, 100%); max-height: 88vh; overflow: hidden;
  background: rgba(9, 12, 19, .99);
  border: 1px solid var(--br-lt);
  border-radius: var(--r);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .65);
}
.pmod__close {
  position: absolute; top: 12px; right: 12px; z-index: 1;
  width: 34px; height: 34px;
  color: var(--txt); font-size: 22px; line-height: 1;
  background: rgba(5, 7, 12, .7); border: 1px solid var(--br-lt);
  border-radius: var(--r); cursor: pointer;
  transition: border-color .18s var(--ease);
}
.pmod__close:hover { border-color: var(--blue-lt); }

/* Même fond que les cartes. */
.pmod__media {
  position: relative; overflow: hidden;
  flex: none; height: 190px;
  background:
    linear-gradient(180deg, rgba(5, 7, 12, 0) 40%, rgba(5, 7, 12, .92) 100%),
    linear-gradient(140deg, hsl(var(--pack-h) var(--pack-s) 30%), #071322);
}
.pmod__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

/* Contours de tuiles, le motif de la barre de progression du bas de page: des
   parallélogrammes biseautés dont on ne garde que le trait, épais.
   Une seule couche inclinée porte les deux familles de traits: inclinée, une
   barre verticale devient le flanc d'une tuile, une horizontale sa séparation
   de rangée. Le calque déborde largement pour qu'aucun bord ne laisse voir une
   tuile coupée net. */
.prod__media::before,
.pmod__media::before {
  content: ""; position: absolute; inset: -30% -40%;
  background-image:
    repeating-linear-gradient(90deg,
      hsl(var(--pack-h) var(--pack-s) 64% / .46) 0 4px, transparent 4px 74px),
    repeating-linear-gradient(180deg,
      hsl(var(--pack-h) var(--pack-s) 64% / .46) 0 4px, transparent 4px 34px);
  transform: skewX(var(--skew));
  /* Le motif s'éteint vers le bas. Sans ça il passait PAR-DESSUS le dégradé
     sombre du fond (un pseudo-élément peint après l'arrière-plan) et se coupait
     net sur le bord bas, au lieu de s'y fondre. */
  -webkit-mask-image: linear-gradient(180deg, #000 38%, transparent 96%);
  mask-image: linear-gradient(180deg, #000 38%, transparent 96%);
}

.pmod__body {
  position: relative;
  flex: 1 1 auto; min-height: 0; overflow-y: auto;   /* min-height: sinon flex refuse de le comprimer */
  padding: 22px 24px 24px;
}
.pmod__body::before {                 /* mêmes tuiles que sur les cartes */
  content: ""; position: absolute; top: -1px; left: -14px;
  width: 116px; height: 5px;
  background: linear-gradient(100deg,
    hsl(var(--pack-h) var(--pack-s) 71%), hsl(var(--pack-h) var(--pack-s) 55%));
  transform: skewX(var(--skew));
  -webkit-mask-image: repeating-linear-gradient(90deg, #000 0 15px, transparent 15px 19px);
  mask-image: repeating-linear-gradient(90deg, #000 0 15px, transparent 15px 19px);
}
.pmod__nom { margin-bottom: 12px; font-size: 20px; font-weight: 600; text-transform: uppercase; }
.pmod__desc {
  color: var(--muted); font-size: 14.6px; line-height: 1.7;
}
.pmod__desc > * + * { margin-top: 10px; }

/* Titres de section de la description. Rendus en h4 quel que soit le niveau
   d'origine: une description Tebex n'a pas de hierarchie fiable, et un h1 au
   milieu d'une fenetre casserait le plan du document. */
.pmod__h {
  margin-top: 18px;
  color: var(--blue-lt);
  font-size: 13px; font-weight: 600; text-transform: uppercase;
}
.pmod__desc > .pmod__h:first-child { margin-top: 0; }

.pmod__liste { margin-top: 8px; padding-left: 2px; list-style: none; }
.pmod__liste li { position: relative; padding-left: 18px; }
.pmod__liste li + li { margin-top: 5px; }
.pmod__liste li::before {             /* puce en tuile biseautee, comme le reste */
  content: ""; position: absolute; left: 0; top: .62em;
  width: 8px; height: 4px;
  background: var(--blue);
  transform: skewX(var(--skew));
}
.pmod__desc strong { color: var(--txt); font-weight: 600; }
.pmod__desc em { font-style: normal; color: var(--txt); }
/* Ancrée hors du corps qui défile: le prix et le bouton restent atteignables
   quelle que soit la position dans la description. */
.pmod__foot {
  flex: none;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 15px 24px;
  background: rgba(6, 9, 15, .99);
  border-top: 1px solid var(--br);
}
.pmod__foot .prod__price { font-size: 22px; }
.pmod__foot .btn { margin-left: 15px; }

/* Écrans bas (portable en paysage): le visuel cède la place au texte plutôt que
   de tout comprimer entre l'image et la barre de prix. */
@media (max-height: 680px) {
  .pmod__box { max-height: 94vh; }
  .pmod__media { height: 120px; }
}

@media (max-width: 460px) {
  .pmod__foot { flex-direction: column; align-items: stretch; padding: 14px 18px; }
  .pmod__foot .btn { margin-left: 0; width: 100%; }
  .pmod__body { padding: 18px 18px 20px; }
}

/* ---------------------------------------------------- Moyens de paiement */

.pay { padding-top: 0; }
.pay .wrap { text-align: center; }

.pay__t {
  color: var(--muted); font-size: 12.5px; font-weight: 600;
  text-transform: uppercase;
}

/* Une seule ligne tant que ça tient, puis retour à la ligne centré: en dessous
   de 560px, onze marques ne peuvent pas rester côte à côte sans devenir des
   timbres illisibles. */
.pay__list {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 14px 26px;
  margin: 20px auto 0;
  list-style: none;
}
/* Chaque marque a sa hauteur propre. Les viewBox sont serrés sur le tracé réel
   (mesuré au getBBox), donc une hauteur commune donnerait un logo en toutes
   lettres aussi haut qu'un pictogramme, soit trois fois trop gros à l'œil.
   Les valeurs ci-dessous équilibrent la masse visuelle, pas la hauteur. */
.pay__list li { display: flex; align-items: center; height: var(--ph, 21px); }

.pay-visa      { --ph: 15px; }
.pay-jcb       { --ph: 13px; }
.pay-googlepay { --ph: 16px; }
.pay-applepay  { --ph: 19px; }
.pay-mastercard, .pay-americanexpress, .pay-crypto { --ph: 21px; }
.pay-klarna    { --ph: 19px; }
.pay-paypal    { --ph: 23px; }

/* `width: auto` sur une hauteur fixe: les silhouettes n'ont pas toutes le même
   rapport (Klarna est étroite, American Express carrée). Caler la largeur les
   écraserait. */
.pay__list svg {
  height: 100%; width: auto;
  fill: var(--muted);
  transition: fill .18s var(--ease);
}
.pay__list li:hover svg { fill: var(--txt); }

/* Marques sans silhouette libre de droits: le nom, calé sur la même hauteur
   optique que les logos voisins. */
.pay__mot {
  color: var(--muted); font-size: 14px; font-weight: 600;
  transition: color .18s var(--ease);
}
.pay__list li:hover .pay__mot { color: var(--txt); }

.pay__note {
  margin-top: 18px;
  color: var(--muted); font-size: 12.5px;
  opacity: .75;
}

/* Mise en garde anti-arnaque. Assez visible pour être lue, assez sobre pour ne
   pas ressembler à une erreur de la page: un liseré ambre à gauche plutôt qu'un
   bandeau rouge plein. */
.pay__arnaque {
  display: flex; align-items: flex-start; gap: 10px;
  max-width: 640px; margin: 20px auto 0; padding: 12px 16px;
  color: var(--muted); font-size: 12.5px; line-height: 1.6; text-align: left;
  background: rgba(245, 178, 38, .05);
  border-left: 3px solid var(--amber);
  border-radius: 0 var(--r) var(--r) 0;
}
.pay__arnaque svg {
  flex: none; width: 15px; height: 15px; margin-top: 2px;
  fill: var(--amber);
}

@media (max-width: 560px) {
  .pay__list { gap: 12px 18px; }
  .pay__list li { --ph: 17px; }
  .pay-visa { --ph: 13px; }
  .pay-jcb { --ph: 11px; }
  .pay-paypal { --ph: 19px; }
  .pay__mot { font-size: 12.5px; }
}

/* ------------------------------------------------------- Bouton panier (nav) */

.cart-toggle {
  position: relative;
  display: grid; place-items: center;
  width: 38px; height: 38px;
  color: var(--muted);
  background: none; border: 0; padding: 0;
  cursor: pointer;
  transition: color .18s var(--ease), transform .18s var(--ease);
}
.cart-toggle svg { width: 20px; height: 20px; fill: currentColor; }
.cart-toggle:hover { color: #fff; transform: translateY(-1px); }
.cart-toggle__n {
  position: absolute; top: 0; right: -2px;
  min-width: 17px; height: 17px; padding: 0 4px;
  display: grid; place-items: center;
  color: #04070d; font-size: 11px; font-weight: 600;
  background: var(--amber);
  border-radius: 999px;
}

/* ------------------------------------------------------------------ Panier */

.cart {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 70;
  display: flex; flex-direction: column;
  width: min(400px, 92vw);
  background: rgba(8, 11, 18, .98);
  border-left: 1px solid var(--br-lt);
  transform: translateX(101%);
  transition: transform .3s var(--ease);
}
.cart.is-open { transform: none; box-shadow: -30px 0 60px rgba(0, 0, 0, .55); }

.cart__head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 22px 24px;
  border-bottom: 1px solid var(--br);
}
.cart__head h2 { font-size: 17px; font-weight: 600; text-transform: uppercase; }
.cart__close {
  width: 34px; height: 34px;
  color: var(--muted); font-size: 22px; line-height: 1;
  background: var(--surface); border: 1px solid var(--br); border-radius: var(--r);
  cursor: pointer;
  transition: color .18s var(--ease), border-color .18s var(--ease);
}
.cart__close:hover { color: #fff; border-color: var(--br-lt); }

.cart__list { flex: 1; overflow-y: auto; padding: 12px 24px; }
.cart__empty { padding: 30px 0; color: var(--muted); font-size: 14.5px; text-align: center; }
.cart__line {
  display: grid; grid-template-columns: 1fr auto auto auto;
  align-items: center; gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--br);
}
.cart__name { font-size: 14.5px; }
.cart__qty { color: var(--muted); font-size: 13px; }
.cart__price { font-size: 14.5px; font-weight: 600; }
.cart__del {
  width: 26px; height: 26px;
  color: var(--dim); font-size: 17px; line-height: 1;
  background: none; border: 0; cursor: pointer;
  transition: color .18s var(--ease);
}
.cart__del:hover { color: #ff6b6b; }

.cart__foot { padding: 20px 24px 24px; border-top: 1px solid var(--br); }
.cart__total {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 16px;
  color: var(--muted); font-size: 14px;
}
.cart__total b { color: var(--txt); font-size: 22px; font-weight: 600; font-style: italic; }
.cart__go { width: 100%; margin-left: 15px; }
.cart__go[disabled] { opacity: .45; pointer-events: none; }
.cart__note { margin-top: 14px; color: var(--dim); font-size: 12px; line-height: 1.6; }

/* --------------------------------------------------- Page de remerciement */

.merci { position: relative; overflow: hidden; padding: clamp(52px, 7vw, 92px) 0 clamp(60px, 8vw, 100px); }
.merci__bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.merci__in { position: relative; max-width: 780px; }

.merci__coche {
  display: grid; place-items: center;
  width: 62px; height: 62px; margin-bottom: 26px;
  background: rgba(60, 217, 123, .12);
  border: 1px solid rgba(60, 217, 123, .45);
  border-radius: 50%;
  box-shadow: 0 0 34px -6px rgba(60, 217, 123, .55);
}
.merci__coche svg { width: 32px; height: 32px; fill: var(--ok); }

.merci__h1 { font-size: clamp(30px, 4vw, 46px); font-weight: 700; text-transform: uppercase; }
.merci__h1 em { font-style: normal; color: var(--ok); }
.merci__lede {
  max-width: 560px; margin-top: 14px;
  color: var(--muted); font-size: clamp(15px, 1.4vw, 17px); font-weight: 500;
}
.merci__joueur { margin-top: 26px; }

.merci__points { display: grid; gap: 14px; margin-top: 34px; }
.merci__points li {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--br);
  border-radius: var(--r);
}
.merci__ico {
  display: grid; place-items: center; flex: none;
  width: 36px; height: 36px;
  background: rgba(38, 145, 245, .12);
  border: 1px solid rgba(38, 145, 245, .32);
  border-radius: var(--r);
}
.merci__ico svg { width: 19px; height: 19px; fill: var(--blue-lt); }
.merci__ico--discord { background: rgba(88, 101, 242, .14); border-color: rgba(88, 101, 242, .4); }
.merci__ico--discord svg { fill: #8b96f5; }
/* Cible le bloc de texte, PAS l'icone: `.merci__points span` attrapait aussi
   `.merci__ico`, qui est un span, et lui imposait `display: block`. Le
   `place-items: center` ne s'appliquait donc plus et le SVG se collait a gauche
   de son carre. */
.merci__points > li > div > b { display: block; color: var(--txt); font-size: 15px; font-weight: 600; }
.merci__points > li > div > span { display: block; margin-top: 4px; color: var(--muted); font-size: 14px; }

.merci__cta { margin-top: 32px; }
.merci__aide { margin-top: 26px; color: var(--dim); font-size: 13.5px; }

/* ------------------------------------------------------------- Responsive */

@media (max-width: 760px) {
  .etape { padding: 18px 18px 20px; gap: 14px; }
  .etape__n { margin-left: 9px; }
  .etape__head { gap: 14px; }
  .etape--col .etape__body { padding-left: 0; margin-top: 4px; }
  .auth .etape__body { flex-direction: column; align-items: flex-start; }
  .auth__btns { margin-left: 0; }
  .joueur__chg { margin-left: 0; }
  .cart-toggle { width: 34px; height: 34px; }
}

@media (max-width: 460px) {
  .cart__go { width: auto; margin-left: 0; align-self: stretch; }
  .cart__foot .btn { width: 100%; }
}