/* ==========================================================================
   Thème Pixelcraft — raccord avec Azuriom
   1. le menu construit depuis l'admin (icônes Bootstrap Icons, compte, notifications)
   2. les pages génériques (layouts.app) : plugins, profil, connexion…
   3. les composants Bootstrap des plugins, repeints dans la charte
      (relief = cliquable, or = acheter, vert = jouer/recevoir)
   ========================================================================== */

/* ---------- 1. Menu ---------------------------------------------------------- */

.nav__link i.bi { font-size: 17px; line-height: 1; opacity: .85; }
.nav__badge--green { background: #3c9e45; border-color: #1d5a25; }
.drop--end { left: auto; right: 0; }
.drop__logo i.bi { font-size: 20px; color: var(--pc-lilac); }
.drop--list a,
.drop__logout { grid-template-columns: 40px 1fr auto; }
.drop--list .drop__logo { width: 40px; height: 40px; border-radius: 11px; }
.drop__logout {
  display: grid; gap: 12px; align-items: center; width: 100%;
  padding: 8px 10px; border-radius: 14px; text-align: left;
}
.drop__logout:hover { background: rgba(232, 87, 76, .14); }
.drop__logout b { display: block; font-size: 14px; font-weight: 900; text-transform: uppercase; letter-spacing: .03em; color: #ffb4ad; }

.nav__user { position: relative; }
.nav__userbtn {
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 10px 0 6px;
  border-radius: 12px; border: 1px solid var(--line-strong); background: rgba(var(--navy-950-rgb), .5);
  font-weight: 900; font-size: 14px; color: #fff; max-width: 220px;
}
.nav__userbtn img { width: 32px; height: 32px; border-radius: 8px; image-rendering: pixelated; }
.nav__userbtn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav__userbtn .chev { width: 14px; height: 14px; flex: none; transition: transform .2s; }
.nav__user.is-open .nav__userbtn .chev { transform: rotate(180deg); }

.nav-notifs { list-style: none; margin: 0; padding: 0; display: flex; }
.nav-notifs .nav-link {
  display: grid; place-items: center; position: relative; width: 44px; height: 44px; border-radius: 12px;
  border: 1px solid var(--line-strong); background: rgba(var(--navy-950-rgb), .5); color: #fff;
}
.nav-notifs .nav-link::after { display: none; }
.nav-notifs .nav-link .bi { font-size: 18px; }
.nav-notifs .badge { position: absolute; top: -6px; right: -6px; border-radius: 8px; font-size: 10px; }
.nav-notifs .dropdown-menu { width: 340px; max-width: calc(100vw - 32px); }

/* Le menu réglé dans l'admin + le compte prennent plus de place que dans la maquette :
   la barre s'élargit sur grand écran, puis se resserre par paliers avant le menu burger */
@media (min-width: 1400px) {
  .nav__bar { width: min(1380px, 100% - 32px); }
}
@media (max-width: 1399px) {
  .nav__links { gap: 2px; }
  .nav__link { padding: 0 10px; gap: 6px; }
  .nav__right { gap: 8px; }
}
@media (max-width: 1340px) {
  .nav__userbtn span { display: none; }
}
@media (max-width: 1240px) {
  .nav__link { font-size: 13px; letter-spacing: .02em; }
  .nav__link > i.bi,
  .nav__link > svg:not(.chev) { display: none; }
  .nav__link--shop > i.bi { display: inline-block; }
}
/* Menu burger dès 1020 px (920 px dans la maquette, qui avait moins de liens) */
@media (max-width: 1020px) {
  .nav__links,
  .nav__right .pbtn--ghost,
  .nav__right .nav-notifs { display: none; }
  .nav__burger { display: grid; }
  .nav__userbtn { padding: 0 6px; }
  .topnav.is-open .nav__links {
    display: flex; flex-direction: column; align-items: stretch;
    position: absolute; top: calc(var(--nav-h) + 10px); left: 16px; right: 16px;
    padding: 12px; border-radius: 20px;
    background: rgba(var(--navy-950-rgb), .97); border: 1px solid var(--line-strong);
    pointer-events: auto;
  }
  .topnav.is-open .nav__link { height: 52px; font-size: 15px; padding: 0 14px; }
  .topnav.is-open .nav__link > i.bi,
  .topnav.is-open .nav__link > svg:not(.chev) { display: inline-block; }
  .topnav.is-open .nav__links .drop { position: static; width: auto; opacity: 1; transform: none; pointer-events: auto; margin: 4px 0 8px; display: none; }
  .topnav.is-open .nav__links .nav__item.is-open .drop { display: block; }
  /* le menu du compte reste flottant, même burger ouvert */
  .topnav.is-open .nav__user .drop { position: absolute; width: 300px; margin: 0; display: block; opacity: 0; transform: translateY(-6px); pointer-events: none; }
  .topnav.is-open .nav__user.is-open .drop { opacity: 1; transform: none; pointer-events: auto; }
}

/* ---------- 2. Pages génériques ------------------------------------------ */

.is-page { background: var(--navy-950); }
.page-top {
  height: 150px;
  background:
    radial-gradient(60% 120% at 50% 0%, rgba(var(--accent-rgb), .22), transparent 70%),
    linear-gradient(180deg, var(--navy-900), var(--navy-950));
  border-bottom: 1px solid var(--line);
}
.page { padding: 34px 0 90px; min-height: 55vh; }
.page h1 {
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: .01em;
  font-size: clamp(30px, 4vw, 46px); margin: 0 0 22px;
  paint-order: stroke fill; -webkit-text-stroke: 6px var(--outline); text-shadow: 0 5px 0 var(--outline);
}
.page h2 { font-size: clamp(24px, 2.6vw, 32px); margin: 0 0 14px; }
.page h3 { font-size: 22px; margin: 0 0 10px; }
.page h4, .page h5, .page h6 { font-family: var(--font-body); font-weight: 900; margin: 0 0 8px; }
.page p { margin: 0 0 12px; }
.page img { display: inline-block; }
/* Liens du contenu en couleur d'accent ; :where() garde un poids minimal pour que les composants (cartes-liens) gardent leurs couleurs */
.page :where(a:not(.btn, .pbtn, .nav-link, .dropdown-item, .list-group-item, .page-link, .card)) { color: var(--sky); }
.page :where(a:not(.btn, .pbtn, .nav-link, .dropdown-item, .list-group-item, .page-link, .card):hover) { color: #fff; }
.lead { font-weight: 600; }
.home-alerts { position: relative; z-index: 2; margin-top: 16px; }
.discord__more { display: inline-flex; align-items: center; justify-content: center; width: auto; min-width: 40px; padding: 0 10px; white-space: nowrap; }

/* Les attributs width/height servent de réserve de place : l'image garde toujours ses proportions */
img { height: auto; }
.game .game__logo { width: auto; max-width: min(270px, 70%); max-height: 200px; }
.member__plus {
  width: 76px; height: 76px; border-radius: 18px; font-size: 32px;
  background: var(--pc-violet); color: #fff; border-color: var(--pc-violet-edge); box-shadow: 0 5px 0 var(--pc-violet-edge);
}

/* ---------- 3. Bootstrap aux couleurs du thème ------------------------------ */

body[data-bs-theme="dark"] {
  --bs-body-font-family: var(--font-body);
  --bs-body-bg: var(--navy-950);
  --bs-body-color: var(--text);
  --bs-emphasis-color: #fff;
  --bs-secondary-color: var(--text-muted);
  --bs-secondary-bg: var(--navy-900);
  --bs-tertiary-bg: var(--navy-850);
  --bs-border-color: var(--line);
  --bs-border-color-translucent: var(--line);
  --bs-link-color: var(--sky);
  --bs-link-hover-color: #fff;
  --bs-heading-color: #fff;
  --bs-border-radius: 12px;
  --bs-border-radius-lg: 18px;
  --bs-focus-ring-color: rgba(var(--accent-rgb), .45);
}

.card {
  --bs-card-bg: rgba(var(--navy-900-rgb), .78);
  --bs-card-border-color: var(--line);
  --bs-card-border-radius: 18px;
  --bs-card-inner-border-radius: 17px;
  --bs-card-cap-bg: rgba(var(--accent-rgb), .07);
  --bs-card-color: var(--text);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .05);
}
.card-header { font-weight: 900; }
.list-group {
  --bs-list-group-bg: transparent;
  --bs-list-group-border-color: var(--line);
  --bs-list-group-color: var(--text-soft);
  --bs-list-group-action-hover-bg: rgba(var(--accent-rgb), .1);
  --bs-list-group-active-bg: var(--gold);
  --bs-list-group-active-border-color: var(--gold-edge);
  --bs-list-group-active-color: var(--gold-ink);
}
.list-group-item.active { font-weight: 900; }

/* Boutons Bootstrap en relief (même logique que .pbtn) */
.btn {
  --edge: rgba(0, 0, 0, .35);
  font-weight: 900; letter-spacing: .02em; text-transform: uppercase; font-size: 14px;
  border-radius: 12px; border-width: 2px; padding: .55rem 1.1rem;
  box-shadow: 0 4px 0 var(--edge);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 5px 0 var(--edge); filter: brightness(1.05); }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--edge); }
.btn-sm { font-size: 12px; padding: .35rem .75rem; border-radius: 10px; }
.btn-lg { font-size: 16px; padding: .75rem 1.5rem; }
.btn-link, .btn-close { box-shadow: none; text-transform: none; }
.btn-link:hover, .btn-close:hover { transform: none; box-shadow: none; }

.btn-primary {
  --edge: var(--gold-edge);
  --bs-btn-color: var(--gold-ink); --bs-btn-bg: var(--gold); --bs-btn-border-color: var(--gold-edge);
  --bs-btn-hover-color: var(--gold-ink); --bs-btn-hover-bg: var(--gold-hi); --bs-btn-hover-border-color: var(--gold-edge);
  --bs-btn-active-color: var(--gold-ink); --bs-btn-active-bg: var(--gold-lo); --bs-btn-active-border-color: var(--gold-edge);
  --bs-btn-disabled-color: var(--gold-ink); --bs-btn-disabled-bg: var(--gold); --bs-btn-disabled-border-color: var(--gold-edge);
  background-image: linear-gradient(180deg, var(--gold-hi) 0 50%, var(--gold-lo) 50% 100%);
}
.btn-success {
  --edge: var(--green-edge);
  --bs-btn-color: #fff; --bs-btn-bg: var(--green); --bs-btn-border-color: var(--green-edge);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--green-hi); --bs-btn-hover-border-color: var(--green-edge);
  --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--green-lo); --bs-btn-active-border-color: var(--green-edge);
  background-image: linear-gradient(180deg, var(--green-hi) 0 50%, var(--green-lo) 50% 100%);
}
.btn-danger {
  --edge: var(--red-edge);
  --bs-btn-color: #fff; --bs-btn-bg: var(--red); --bs-btn-border-color: var(--red-edge);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #f06b61; --bs-btn-hover-border-color: var(--red-edge);
  --bs-btn-active-bg: #c9443a; --bs-btn-active-border-color: var(--red-edge);
}
.btn-info,
.btn-secondary,
.btn-dark,
.btn-light {
  --edge: var(--navy-950);
  --bs-btn-color: #fff; --bs-btn-bg: var(--navy-btn-lo); --bs-btn-border-color: var(--navy-950);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--navy-btn-hi); --bs-btn-hover-border-color: var(--navy-950);
  --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--navy-800); --bs-btn-active-border-color: var(--navy-950);
  background-image: linear-gradient(180deg, var(--navy-btn-hi) 0 50%, var(--navy-btn-lo) 50% 100%);
}
[class*="btn-outline-"] {
  --edge: rgba(0, 0, 0, .3);
  --bs-btn-color: var(--text-soft); --bs-btn-border-color: var(--line-strong);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: rgba(var(--accent-rgb), .14); --bs-btn-hover-border-color: var(--sky);
  --bs-btn-active-color: #fff; --bs-btn-active-bg: rgba(var(--accent-rgb), .2); --bs-btn-active-border-color: var(--sky);
}

/* Formulaires */
.form-control,
.form-select {
  background-color: rgba(var(--navy-950-rgb), .65);
  border: 2px solid var(--line-strong);
  border-radius: 12px; color: #fff; font-weight: 700;
}
.form-control:focus,
.form-select:focus {
  background-color: rgba(var(--navy-950-rgb), .85); color: #fff;
  border-color: var(--sky); box-shadow: 0 0 0 .2rem rgba(var(--accent-rgb), .25);
}
.form-control::placeholder { color: var(--text-dim); }
.form-label { font-weight: 800; color: var(--text-soft); }
.form-text { color: var(--text-dim); }
.form-check-input { background-color: rgba(var(--navy-950-rgb), .65); border-color: var(--line-strong); }
.form-check-input:checked { background-color: var(--green); border-color: var(--green-edge); }
.input-group-text { background: rgba(var(--accent-rgb), .12); border: 2px solid var(--line-strong); color: var(--text-soft); font-weight: 800; }

/* Tableaux, alertes, pagination, onglets, menus, fenêtres */
.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--text-soft);
  --bs-table-border-color: var(--line);
  --bs-table-striped-bg: rgba(var(--accent-rgb), .05);
  --bs-table-hover-bg: rgba(var(--accent-rgb), .08);
}
.table thead th { color: var(--text-muted); font-size: 12px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.alert { border-radius: 14px; border-width: 1px; font-weight: 700; }
.alert-success { --bs-alert-bg: rgba(95, 199, 101, .14); --bs-alert-border-color: rgba(95, 199, 101, .45); --bs-alert-color: #c9f7cb; }
.alert-danger { --bs-alert-bg: rgba(232, 87, 76, .14); --bs-alert-border-color: rgba(232, 87, 76, .45); --bs-alert-color: #ffc9c4; }
.alert-info,
.alert-primary { --bs-alert-bg: rgba(var(--accent-rgb), .12); --bs-alert-border-color: var(--line-strong); --bs-alert-color: var(--text-soft); }
.alert-warning { --bs-alert-bg: rgba(255, 213, 79, .12); --bs-alert-border-color: rgba(255, 213, 79, .45); --bs-alert-color: #ffe9a8; }
.badge { font-weight: 900; letter-spacing: .04em; border-radius: 8px; }
.pagination {
  --bs-pagination-bg: rgba(var(--navy-900-rgb), .7);
  --bs-pagination-border-color: var(--line);
  --bs-pagination-color: var(--text-soft);
  --bs-pagination-hover-bg: rgba(var(--accent-rgb), .14);
  --bs-pagination-hover-color: #fff;
  --bs-pagination-active-bg: var(--gold);
  --bs-pagination-active-border-color: var(--gold-edge);
  --bs-pagination-active-color: var(--gold-ink);
  --bs-pagination-disabled-bg: transparent;
  gap: 6px;
}
.page-link { border-radius: 10px !important; font-weight: 900; }
.nav-tabs,
.nav-pills { gap: 6px; }
.nav-pills .nav-link,
.nav-tabs .nav-link { border-radius: 12px; font-weight: 900; color: var(--text-soft); }
.nav-pills .nav-link.active,
.nav-tabs .nav-link.active { background: var(--gold); color: var(--gold-ink); border-color: var(--gold-edge); }
.dropdown-menu {
  --bs-dropdown-bg: rgba(var(--navy-950-rgb), .97);
  --bs-dropdown-border-color: var(--line-strong);
  --bs-dropdown-border-radius: 16px;
  --bs-dropdown-link-color: var(--text-soft);
  --bs-dropdown-link-hover-bg: rgba(var(--accent-rgb), .12);
  --bs-dropdown-link-hover-color: #fff;
  --bs-dropdown-link-active-bg: var(--gold);
  --bs-dropdown-link-active-color: var(--gold-ink);
  --bs-dropdown-header-color: var(--gold);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
}
.modal-content {
  background: linear-gradient(180deg, var(--card-hi), var(--navy-900));
  border: 2px solid var(--line-strong); border-radius: 20px;
}
.progress { --bs-progress-bg: rgba(var(--navy-950-rgb), .7); --bs-progress-bar-bg: var(--green); border-radius: 8px; height: 12px; }

/* ---------- Boutique (vues du plugin Shop remplacées dans views/vendor/shop) ---------- */

/* Serveurs et catégories sont des liens : même rendu « sélectionné » que les onglets de la maquette */
.srv[aria-current="page"] { border-color: var(--gold); box-shadow: 0 6px 0 var(--gold-edge), 0 0 0 4px rgba(255, 213, 79, .12); }
.srv[aria-current="page"] .srv__bg { filter: saturate(1) brightness(.75); }
.srv[aria-current="page"] .srv__check { background: var(--gold); border-color: var(--gold-edge); color: var(--gold-ink); }
.cat[aria-current="page"] {
  background: linear-gradient(180deg, var(--gold-hi), var(--gold-lo));
  border-color: var(--gold-edge); color: var(--gold-ink);
  box-shadow: 0 5px 0 var(--gold-edge);
}
.cat[aria-current="page"] small { color: #6b4a00; }
.shop__desc { margin-top: 6px; color: var(--text-muted); font-weight: 600; max-width: 62ch; }
.shop__desc p { margin: 0 0 6px; }
.product__media { display: block; }
.shop-account { display: flex; align-items: center; gap: 12px; margin: 10px 0 14px; }
.shop-account img { width: 48px; height: 48px; border-radius: 12px; image-rendering: pixelated; border: 2px solid var(--gold-edge); }
.shop-account b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 22px; line-height: 1.1; }
.shop-account small { color: #6b4a00; font-weight: 800; font-size: 12px; }
.shop-account__money { margin: 0 0 12px; font-weight: 800; color: #6b4a00; }
.shop-account__link {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 10px;
  padding: 10px; border-radius: 12px; border: 2px solid #d9b25a; background: rgba(255, 255, 255, .45);
  font-weight: 900; font-size: 14px; color: var(--gold-ink);
}
.shop-account__link svg { width: 16px; height: 16px; }
.shop-account__link:hover { background: #fff; }
.shop-welcome { font-weight: 600; color: var(--text-soft); }
.shop .cats { margin-top: 0; }
/* Pastille « en direct » : point jaune fixe quand le serveur ne répond pas */
.is-off .dot-live { background: #ffd54f; animation: none; box-shadow: none; }

/* Top 3 des acheteurs du mois (bandeau de la boutique) */
.buyers {
  min-width: 300px; padding: 14px 16px; border-radius: var(--r-lg);
  background: linear-gradient(135deg, rgba(255, 213, 79, .14), rgba(255, 213, 79, .03));
  border: 1px solid rgba(255, 213, 79, .35);
}
.buyers__title { display: block; margin-bottom: 8px; font-size: 11px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.buyers__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.buyers__row { display: grid; grid-template-columns: 26px 40px 1fr auto; align-items: center; gap: 10px; }
.buyers__row img { width: 40px; height: 40px; border-radius: 10px; image-rendering: pixelated; border: 2px solid var(--gold-edge); }
.buyers__row b { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.buyers__rank {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px;
  font-family: var(--font-display); font-size: 16px; color: var(--gold-ink);
  background: linear-gradient(180deg, var(--gold-hi), var(--gold-lo)); box-shadow: 0 3px 0 var(--gold-edge);
}
.buyers__row--2 .buyers__rank { background: linear-gradient(180deg, #f1f5fa, #b9c4d2); box-shadow: 0 3px 0 #6b7686; color: #2b333d; }
.buyers__row--3 .buyers__rank { background: linear-gradient(180deg, #f3c39a, #c9814a); box-shadow: 0 3px 0 #7a4520; color: #3a1d08; }
.buyers__row--2 img { border-color: #6b7686; }
.buyers__row--3 img { border-color: #7a4520; }
.buyers__amount { font-size: 13px; font-weight: 800; color: var(--text-muted); }

/* ==========================================================================
   4. Pages Votes, Panier, Mes achats, Paiement et Profil (vues remplacées)
   Bandeau commun : layouts/app avec les sections hero-* (même rendu que la boutique)
   ========================================================================== */

.page-hero { padding: 140px 0 46px; }
.page-hero h1 { margin: 10px 0 0; font-size: clamp(38px, 5.4vw, 64px); }
.page-hero .lead { margin-top: 12px; }
.page-hero__text { max-width: 720px; }
.page--hero { padding-top: 30px; }
.page .panel { position: relative; }
.page .panel h2 { margin-bottom: 6px; text-transform: uppercase; }
.page .panel h3 { text-transform: uppercase; }

/* ---------- Votes ---------- */

.vote-layout, .cart-page { display: grid; grid-template-columns: minmax(0, 1fr) 350px; gap: 24px; align-items: start; }
.vote-main, .cart-main { display: grid; gap: 20px; min-width: 0; }
.page .vote-card { overflow: hidden; padding: 24px; }
.page .vote-card__head p { color: var(--text-muted); font-weight: 600; margin-bottom: 18px; }
.vote-card .spinner-parent { display: none; }
.vote-card.voting .spinner-parent {
  position: absolute; inset: 0; z-index: 10;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: rgba(var(--navy-950-rgb), .82); backdrop-filter: blur(3px); font-weight: 900;
}
.vote-card .spinner-parent .spinner-border { width: 46px; height: 46px; color: var(--gold); }

.vote-sites { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.page .vote-site {
  display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; gap: 14px;
  padding: 14px 16px; border-radius: var(--r-md); color: #fff;
  background: linear-gradient(180deg, var(--navy-700), var(--navy-800));
  border: 2px solid var(--line-strong); box-shadow: 0 5px 0 var(--navy-950);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.page .vote-site:hover { transform: translateY(-2px); border-color: var(--gold); box-shadow: 0 7px 0 var(--navy-950); color: #fff; }
.vote-site__num {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px;
  background: linear-gradient(180deg, var(--gold-hi) 0 50%, var(--gold-lo) 50%); border: 2px solid var(--gold-edge);
  box-shadow: 0 3px 0 var(--gold-edge); color: var(--gold-ink);
  font-family: var(--font-display); font-size: 24px; line-height: 1;
}
.vote-site__body { display: grid; gap: 2px; min-width: 0; }
.vote-site__body b { font-size: 17px; font-weight: 900; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vote-site__body small { color: var(--text-dim); font-weight: 700; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vote-site__state { font-size: 13px; font-weight: 800; color: #8be98f; }
.vote-site__wait { display: none; }
.vote-timer:empty::before { content: "Disponible maintenant"; }
.vote-site__go {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 11px;
  background: linear-gradient(180deg, var(--green-hi) 0 50%, var(--green-lo) 50%); border: 2px solid var(--green-edge);
  box-shadow: 0 3px 0 var(--green-edge); color: #0d2c11; font-weight: 900; font-size: 13px; text-transform: uppercase;
}
.vote-site__go svg { width: 14px; height: 14px; }
.page .vote-site.disabled { cursor: not-allowed; border-color: var(--line); transform: none; box-shadow: 0 5px 0 var(--navy-950); }
.vote-site.disabled .vote-site__num { filter: grayscale(1) brightness(.8); }
.vote-site.disabled .vote-site__state { color: var(--gold); }
.vote-site.disabled .vote-site__wait { display: inline; }
.vote-site.disabled .vote-site__go { background: var(--navy-700); border-color: var(--line); box-shadow: none; color: var(--text-dim); }

.vote-name__label { display: block; margin-bottom: 8px; font-weight: 900; }
.vote-name__row { display: flex; flex-wrap: wrap; gap: 10px; }
.vote-name__row .form-control { flex: 1 1 220px; height: 52px; font-weight: 800; }
.page .vote-name__auth { display: flex; align-items: center; gap: 8px; font-weight: 800; color: var(--text-soft); }
.vote-name__auth svg { width: 18px; height: 18px; color: var(--gold); flex: none; }
.page #vote-result { font-weight: 800; margin: 0; }
.vote-servers { display: flex; flex-wrap: wrap; gap: 10px; }

.vote-how { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.vote-how li {
  display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: var(--r-md);
  background: rgba(var(--accent-rgb), .06); border: 1px solid var(--line);
}
.vote-how b {
  flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
  background: var(--navy-700); border: 1px solid var(--line-strong);
  font-family: var(--font-display); font-weight: 400; font-size: 20px; color: var(--gold);
}
.vote-how span { font-size: 13px; font-weight: 700; color: var(--text-muted); }
.vote-how strong { display: block; font-size: 15px; font-weight: 900; color: #fff; }

.vote-top__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.page .vote-top__head h2 { margin: 0; }
.page .vote-top__empty { color: var(--text-muted); font-weight: 700; margin: 0; }
.podium--page { max-width: 560px; margin: 8px auto 22px; }
.page .podium--page .podium__col img { display: block; }
.vote-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.vote-list li {
  display: grid; grid-template-columns: 44px 32px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 8px 14px; border-radius: 12px; background: rgba(var(--accent-rgb), .05); border: 1px solid var(--line);
}
.vote-list li.is-me { border-color: var(--gold); background: rgba(255, 213, 79, .1); }
.vote-list__rank { font-family: var(--font-display); font-size: 20px; color: var(--text-dim); }
.page .vote-list img { display: block; width: 32px; height: 32px; border-radius: 8px; image-rendering: pixelated; }
.vote-list b { font-weight: 900; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vote-list__votes { font-weight: 800; color: var(--gold); font-size: 14px; }

.page .vote-goal__text { margin: 10px 0 0; font-weight: 900; text-align: center; }
.vote-rewards { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.vote-rewards li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 10px; font-weight: 800; }
.page .vote-rewards img, .vote-rewards__icon {
  display: block; width: 40px; height: 40px; border-radius: 10px; object-fit: contain;
  background: var(--well); border: 1px solid var(--line);
}
.vote-rewards__icon { display: grid; place-items: center; color: var(--gold); }
.vote-rewards__icon svg { width: 20px; height: 20px; }

.vote-me {
  display: flex; align-items: flex-end; gap: 14px; padding: 14px 22px 16px 14px; border-radius: var(--r-lg);
  background: linear-gradient(135deg, rgba(255, 213, 79, .16), rgba(255, 213, 79, .03)); border: 1px solid rgba(255, 213, 79, .35);
}
.vote-me img { width: 60px; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .45)); }
.vote-me small { display: block; font-size: 11px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.vote-me b { font-family: var(--font-display); font-weight: 400; font-size: 54px; line-height: 1; color: #fff; text-shadow: 0 4px 0 var(--outline); }
.vote-me span { margin-left: 6px; font-weight: 900; color: var(--text-soft); }
.vote-me .tag { display: flex; width: max-content; margin: 8px 0 0; }

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

.page .cart-lines__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.page .cart-lines__head h2 { margin: 0; }
.page .cart-lines__more { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: 14px; color: var(--text-muted); }
.page .cart-lines__more:hover { color: #fff; }
.cart-lines__more svg, .gateways__back svg { width: 16px; height: 16px; transform: scaleX(-1); }
.cart-lines__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cart-line {
  display: grid; grid-template-columns: 64px minmax(0, 1fr) 90px 110px 38px; grid-template-areas: "img name qty total remove";
  align-items: center; gap: 14px; padding: 12px; border-radius: var(--r-md);
  background: rgba(var(--accent-rgb), .05); border: 1px solid var(--line);
}
.page .cart-line__img { grid-area: img; display: block; width: 64px; height: 64px; border-radius: 12px; object-fit: cover; background: var(--well); }
.cart-line__name { grid-area: name; min-width: 0; }
.cart-line__name b { display: block; font-size: 17px; font-weight: 900; }
.cart-line__name small { color: var(--text-dim); font-weight: 700; }
.cart-line__name s { margin-right: 4px; }
.cart-line__qty { grid-area: qty; margin: 0; }
.cart-line__qty .form-control { height: 44px; text-align: center; font-weight: 900; }
.cart-line__total { grid-area: total; font-family: var(--font-display); font-weight: 400; font-size: 22px; color: var(--gold); text-align: right; }
.page .cart-line__remove {
  grid-area: remove; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px;
  color: var(--text-dim); border: 1px solid var(--line);
}
.page .cart-line__remove:hover { background: rgba(232, 87, 76, .18); color: #ff8a80; border-color: rgba(255, 138, 128, .4); }
.cart-line__remove svg { width: 16px; height: 16px; }
.cart-lines__foot { display: flex; justify-content: flex-end; margin-top: 14px; }
.cart-clear { display: flex; justify-content: flex-end; margin-top: -10px; }
.cart-clear__btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 8px; color: var(--text-dim); font-weight: 800; font-size: 13px; }
.cart-clear__btn:hover { color: #ff8a80; background: rgba(232, 87, 76, .12); }
.cart-clear__btn svg { width: 14px; height: 14px; }

.page .cart-codes { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.page .cart-codes h3 { font-size: 18px; margin-bottom: 10px; }
.cart-code { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.cart-code__value { font-weight: 900; color: #8be98f; }
.cart-code form { margin-left: auto; }
.cart-code__remove { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; color: var(--text-dim); }
.cart-code__remove:hover { background: rgba(232, 87, 76, .18); color: #ff8a80; }
.cart-code__remove svg { width: 14px; height: 14px; }

.cart-summary .shop-account { margin-top: 8px; }
.cart-summary__lines { display: grid; gap: 6px; margin: 4px 0 10px; }
.cart-summary__lines div { display: flex; justify-content: space-between; gap: 12px; font-weight: 800; color: #6b4a00; }
.cart-summary__lines dd { margin: 0; font-weight: 900; color: var(--gold-ink); }
.cart-summary__lines .is-discount dd { color: #1f7a2a; }
.cart-summary__total {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding-top: 12px; margin-bottom: 14px; border-top: 2px dashed #d9b25a; font-weight: 900; color: var(--gold-ink);
}
.cart-summary__total b { font-family: var(--font-display); font-weight: 400; font-size: 36px; line-height: 1; }
.cart-summary__form { display: grid; gap: 10px; }
.cart-summary .form-check-label, .cart-summary .form-label { color: var(--gold-ink); font-weight: 800; font-size: 14px; }
.cart-summary .form-check-label a { color: #7a4f00; text-decoration: underline; }
.cart-summary .form-check-input { border-color: #b8871f; }
.cart-summary .form-check-input:not(:checked) { background-color: #fff; }
.cart-summary .form-control { background: #fff; color: var(--gold-ink); border-color: #d9b25a; }

.page .cart-empty-state { text-align: center; padding: 44px 24px; }
.cart-empty-state__icon {
  display: inline-grid; place-items: center; width: 72px; height: 72px; margin-bottom: 14px; border-radius: 20px;
  background: rgba(255, 213, 79, .12); border: 1px solid rgba(255, 213, 79, .35); color: var(--gold);
}
.cart-empty-state__icon svg { width: 34px; height: 34px; }
.page .cart-empty-state p { color: var(--text-muted); font-weight: 600; max-width: 46ch; margin: 0 auto 20px; }

/* ---------- Mes achats ---------- */

.orders-panel + .orders-panel { margin-top: 20px; }
.orders { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.order {
  display: grid; grid-template-columns: 190px minmax(0, 1fr) auto 130px; grid-template-areas: "id items status price";
  align-items: center; gap: 16px; padding: 14px 16px; border-radius: var(--r-md);
  background: rgba(var(--accent-rgb), .05); border: 1px solid var(--line);
}
.order__id { grid-area: id; }
.order__id b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 20px; }
.order__id small, .order__items small { display: block; color: var(--text-dim); font-weight: 700; font-size: 12px; }
.order__items { grid-area: items; min-width: 0; }
.order__items span { display: inline-block; margin: 0 12px 2px 0; font-weight: 900; }
.order > .tag { grid-area: status; }
.order__price { grid-area: price; display: grid; justify-items: end; gap: 6px; text-align: right; font-family: var(--font-display); font-weight: 400; font-size: 22px; color: var(--gold); }
.order__price b { font-weight: 400; }
.order__cancel {
  padding: 4px 10px; border-radius: 8px; border: 1px solid rgba(255, 138, 128, .4); background: rgba(232, 87, 76, .12);
  color: #ff8a80; font-family: var(--font-body); font-weight: 800; font-size: 12px;
}
.page .orders-empty { color: var(--text-muted); font-weight: 700; margin: 0; }
.order[hidden] { display: none; }
.orders-more {
  display: block; width: 100%; margin-top: 12px; padding: 12px; border-radius: 12px;
  border: 1px dashed var(--line-strong); color: var(--text-soft); font-weight: 900; font-size: 14px;
}
.orders-more:hover { background: rgba(var(--accent-rgb), .08); color: #fff; }

/* ---------- Choix du paiement ---------- */

.gateways { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.gateways > .alert { grid-column: 1 / -1; margin: 0; }
.page .gateway {
  display: grid; justify-items: center; gap: 12px; padding: 20px 18px 18px; border-radius: var(--r-lg);
  text-align: center; color: #fff; background: linear-gradient(180deg, var(--navy-700), var(--navy-800));
  border: 2px solid var(--line-strong); box-shadow: 0 6px 0 var(--navy-950);
  transition: transform .12s ease, border-color .12s ease;
}
.page .gateway:hover { transform: translateY(-3px); border-color: var(--gold); color: #fff; }
.gateway__logo { display: grid; place-items: center; width: 100%; height: 76px; padding: 12px; border-radius: 14px; background: #fff; }
.page .gateway__logo img { display: block; width: auto; max-width: 100%; max-height: 52px; object-fit: contain; }
.gateway b { font-size: 17px; font-weight: 900; }
.gateway__go {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 11px;
  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); color: var(--gold-ink); font-weight: 900; font-size: 13px; text-transform: uppercase;
}
.gateway__go svg { width: 14px; height: 14px; }
.page .gateways__back { margin: 20px 0 0; }
.page .gateways__back a { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; color: var(--text-muted); }

/* ---------- Profil ---------- */

.profile-skin img { display: block; width: 100px; filter: drop-shadow(0 12px 16px rgba(0, 0, 0, .45)); }
.profile-top { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px; align-items: stretch; }
.profile-card__id { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.page .profile-card__avatar {
  display: block; width: 84px; height: 84px; border-radius: 18px; image-rendering: pixelated;
  border: 3px solid var(--line-strong); background: var(--well);
}
.page .profile-card__id h2 { margin: 0 0 6px; font-size: 30px; overflow-wrap: anywhere; }
.profile-role { font-size: 13px; padding: 6px 10px; }
.profile-facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.profile-facts li {
  display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 10px; padding: 10px 12px;
  border-radius: 12px; background: rgba(var(--accent-rgb), .06); border: 1px solid var(--line);
}
.profile-facts svg { grid-row: span 2; align-self: center; width: 20px; height: 20px; color: var(--gold); }
.profile-facts span { font-size: 11px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); }
.profile-facts b { font-weight: 900; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-facts__id { font-size: 12px; }
.profile-security__row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.page .profile-security h2 + .profile-security__row { border-top: 0; }
.profile-security__icon {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px;
  background: rgba(232, 87, 76, .14); color: #ff8a80; border: 1px solid rgba(255, 138, 128, .35);
}
.profile-security__icon.is-on { background: #16361c; color: #8be98f; border-color: #46a84b; }
.profile-security__icon svg { width: 22px; height: 22px; }
.profile-security__row b { display: block; font-weight: 900; }
.profile-security__row small { display: block; color: var(--text-muted); font-weight: 700; font-size: 13px; }
.page .profile-security__oauth { display: flex; align-items: center; gap: 8px; color: var(--text-muted); font-weight: 700; }
.profile-security__oauth svg { width: 18px; height: 18px; color: var(--gold); flex: none; }
.page .profile-delete { display: inline-block; margin-top: 12px; font-size: 13px; font-weight: 800; color: var(--text-dim); text-decoration: underline; }
.page .profile-delete:hover { color: #ff8a80; }

.profile-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin: 20px 0 0; }
.page .profile-links a {
  display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 12px; align-items: center;
  padding: 14px; border-radius: var(--r-md); color: #fff;
  background: linear-gradient(180deg, var(--navy-700), var(--navy-800)); border: 2px solid var(--line-strong);
  box-shadow: 0 5px 0 var(--navy-950); transition: transform .12s ease, border-color .12s ease;
}
.page .profile-links a:hover { transform: translateY(-2px); border-color: var(--gold); color: #fff; }
.profile-links span {
  grid-row: span 2; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px;
  background: rgba(255, 213, 79, .12); border: 1px solid rgba(255, 213, 79, .35); color: var(--gold);
}
.profile-links span svg { width: 24px; height: 24px; }
.profile-links b { font-size: 17px; font-weight: 900; }
.profile-links small { color: var(--text-dim); font-weight: 700; font-size: 13px; }
.profile-verify { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 20px; }
.page .profile-settings__title { margin: 30px 0 14px; text-transform: uppercase; }
.profile-settings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.page .profile-settings .panel h3 { margin-bottom: 14px; }

/* ---------- Petits écrans ---------- */

@media (max-width: 960px) {
  .vote-layout, .cart-page, .profile-top { grid-template-columns: 1fr; }
  .vote-side, .cart-side { position: static; }
}
@media (max-width: 720px) {
  .page-hero { padding: 120px 0 34px; }
  .vote-how, .page .cart-codes, .profile-settings, .profile-facts { grid-template-columns: 1fr; }
  .cart-line { grid-template-columns: 56px minmax(0, 1fr) auto; grid-template-areas: "img name remove" "img qty total"; row-gap: 8px; }
  .page .cart-line__img { width: 56px; height: 56px; }
  .cart-line__qty .form-control { width: 90px; }
  .order { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "id price" "items items" "status status"; row-gap: 8px; }
  .order > .tag { justify-self: start; }
  .profile-skin { display: none; }
  .profile-security__row { grid-template-columns: 44px minmax(0, 1fr); }
  .profile-security__row > :last-child { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 560px) {
  /* Sites de vote : le bouton passe sous le nom pour que le nom reste lisible en entier */
  .page .vote-site { grid-template-columns: 46px minmax(0, 1fr); align-items: start; }
  .vote-site__num { grid-row: span 2; }
  .vote-site__go { grid-column: 2; justify-self: start; }
  .vote-site__body b, .vote-site__body small { white-space: normal; }
}

/* Votes : un onglet par jeu (sites, classement et récompenses du jeu choisi) */
[data-game-panel][hidden] { display: none !important; }
.vote-games { margin-top: 24px; }
.vote-games .srv { min-height: 92px; }
.vote-games .srv img { width: 92px; height: 64px; }
.vote-card__game {
  display: inline-block; margin-left: 8px; padding: 3px 10px; border-radius: 9px; vertical-align: middle;
  background: rgba(var(--accent-rgb), .14); border: 1px solid var(--line-strong);
  font-family: var(--font-body, inherit); font-size: 13px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; color: var(--text-soft);
}
@media (max-width: 700px) {
  .vote-games { grid-template-columns: 1fr 1fr; gap: 10px; }
  .vote-games .srv { min-height: 72px; padding: 10px 12px; gap: 8px; }
  .vote-games .srv img { width: 48px; height: 40px; }
  .vote-games .srv__text b { font-size: 16px; }
  .vote-games .srv__text small, .vote-games .srv__check { display: none; }
}


/* Compte : bouton « Créer un compte » du menu, liens du menu mobile, lien connexion <-> inscription */
.nav__item--auth { display: none; }
.auth-switch { margin: 18px 0 0; text-align: center; font-weight: 700; color: var(--text-soft); }
.page .auth-switch a { color: var(--gold); font-weight: 900; }
/* la barre ne dépasse jamais 1380 px : Connexion et S'inscrire restent sans icône, à toutes les largeurs,
   pour laisser la place à « Jouer » */
.nav__right > .pbtn--sm:not(.pbtn--green) > svg { display: none; }
.nav__right > .pbtn--sm { padding: 0 12px; }
.nav__right { gap: 6px; }
/* juste avant le menu burger, les liens se resserrent encore pour que « Jouer » tienne dans la barre */
@media (min-width: 1021px) and (max-width: 1120px) {
  .nav__link { padding: 0 7px; }
  .nav__links { gap: 0; }
}
/* menu burger (dès 1020 px) : Connexion et Créer un compte passent dans le menu déroulant */
@media (max-width: 1020px) {
  .nav__item--auth { display: list-item; }
}
@media (max-width: 600px) {
  .nav__right .nav__register { display: none; }
}