/* ==================================================================
   Alta FA — Boutique
   ================================================================== */

[hidden] { display: none !important; }

.page-shop body, body.page-shop { min-height: 100vh; }

.shop {
  position: relative;
  z-index: 1;
  max-width: 132rem;
  margin: 0 auto;
  padding: 0 2rem 8rem;
}

/* ---------------- En-tête ---------------- */

.shop-head { text-align: center; padding: 2rem 0 4rem; }

.shop-title {
  font-size: clamp(3.4rem, 6vw, 5.6rem);
  font-weight: 800;
  letter-spacing: -.01em;
  text-shadow: 0 6px 30px rgba(0, 0, 0, .55);
}

.shop-lead {
  color: var(--white-50);
  font-size: 1.6rem;
  line-height: 1.7;
  margin-top: .6rem;
}

.shop-tabs {
  display: inline-flex;
  gap: .4rem;
  margin-top: 2.8rem;
  padding: .5rem;
  border: 1px solid hsla(0, 0%, 100%, .1);
  border-radius: 999px;
  background: rgba(2, 6, 20, .5);
  backdrop-filter: blur(10px);
}

.shop-tab {
  padding: 1rem 2.6rem;
  border-radius: 999px;
  color: var(--white-50);
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  transition: background .25s, color .25s;
}
.shop-tab:hover { color: var(--white); }
.shop-tab.active {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 10px 24px -8px rgba(26, 108, 240, .8);
}

.shop-section { margin-bottom: 6rem; }

.section-title {
  font-size: 2.4rem;
  font-weight: 700;
  margin-bottom: 2.4rem;
  text-align: center;
}

/* ---------------- Grille produits ---------------- */

.product-grid {
  display: grid;
  gap: 2.4rem;
}
.product-grid-3 { grid-template-columns: repeat(3, 1fr); }
.product-grid-coins { grid-template-columns: repeat(5, 1fr); }

.product {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid hsla(0, 0%, 100%, .09);
  border-radius: 1.2rem;
  background: rgba(4, 10, 28, .62);
  backdrop-filter: blur(12px);
  box-shadow: 0 24px 50px -26px rgba(0, 0, 0, .9);
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.product:hover {
  transform: translateY(-.6rem);
  border-color: color-mix(in srgb, var(--accent) 60%, transparent);
  box-shadow: 0 32px 60px -24px color-mix(in srgb, var(--accent) 45%, transparent);
}

.product-badge {
  position: absolute;
  top: 1.2rem;
  right: 1.2rem;
  z-index: 2;
  padding: .5rem 1.2rem;
  border-radius: 999px;
  background: var(--accent);
  color: #05070f;
  text-shadow: none;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .9);
}

/* Tags des packs de coins : texte blanc, avec une ombre portée pour
   rester lisible sur les accents les plus clairs (or, cyan). */
.product-coin .product-badge {
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
}

.product-visual { position: relative; overflow: hidden; }
.product-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(4, 10, 28, .85) 100%);
}
.product-visual img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .5s ease;
}
.product-coin .product-visual img { aspect-ratio: 3 / 4; }
.product:hover .product-visual img { transform: scale(1.05); }

.product-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 2rem 2rem 2.2rem;
}

.product-name {
  font-size: 2.2rem;
  font-weight: 800;
  line-height: 1.2;
}

.product-subtitle {
  color: var(--white-50);
  font-size: 1.3rem;
  line-height: 1.6;
  margin-top: .3rem;
}

.product-perks {
  margin: 1.8rem 0 2.2rem;
  display: flex;
  flex-direction: column;
  gap: .7rem;
}
.product-perks li {
  position: relative;
  margin: 0;
  padding-left: 2.2rem;
  color: hsla(0, 0%, 100%, .78);
  font-size: 1.35rem;
  line-height: 1.5;
}
.product-perks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .45rem;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 .35rem color-mix(in srgb, var(--accent) 22%, transparent);
}

.product-foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  flex-wrap: wrap;
}

.product-price {
  font-size: 2.2rem;
  font-weight: 800;
  letter-spacing: -.01em;
}

.product-add {
  flex: 1;
  min-width: 14rem;
  padding: 1.2rem 1.8rem;
  border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent);
  border-radius: .6rem;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  font-size: 1.4rem;
  font-weight: 600;
  transition: background .25s, box-shadow .25s, transform .2s;
}
.product-add:hover {
  background: var(--accent);
  color: #05070f;
  box-shadow: 0 14px 30px -12px var(--accent);
}
.product-add:active { transform: scale(.98); }

.product-coin .product-foot { flex-direction: column; align-items: stretch; }
.product-coin .product-price { text-align: center; }
.product-coin .product-add { min-width: 0; }

/* ---------------- Comparatif ---------------- */

.cmp-scroll { overflow-x: auto; padding-bottom: 1rem; }

.cmp {
  display: flex;
  flex-direction: column;
  gap: .8rem;
  min-width: 82rem;
}

.cmp-row {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: .8rem;
}

.cmp-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.4rem 1.6rem;
  border: 1px solid hsla(0, 0%, 100%, .07);
  border-radius: .6rem;
  font-size: 1.35rem;
  line-height: 1.4;
  text-align: center;
}

.cmp-label {
  justify-content: flex-start;
  text-align: left;
  background: rgba(255, 255, 255, .04);
  color: hsla(0, 0%, 100%, .75);
}

.cmp-basic   { background: linear-gradient(180deg, rgba(120, 128, 145, .22), rgba(70, 76, 90, .22)); }
.cmp-premium { background: linear-gradient(180deg, rgba(23, 140, 214, .30), rgba(12, 84, 150, .30)); border-color: rgba(60, 160, 235, .35); }
.cmp-plus    { background: linear-gradient(180deg, rgba(220, 45, 180, .30), rgba(150, 25, 130, .30)); border-color: rgba(230, 70, 195, .35); }

.cmp-head .cmp-cell {
  font-size: 1.8rem;
  font-weight: 800;
  letter-spacing: .02em;
  padding: 1.8rem 1.6rem;
}

.cmp-row-highlight .cmp-cell { font-size: 2rem; font-weight: 800; padding: 1.8rem 1.6rem; }
.cmp-row-highlight .cmp-label { font-size: 1.35rem; font-weight: 500; }

/* ---------------- Note Alta Coins ---------------- */

.coins-note {
  max-width: 72rem;
  margin: 0 auto;
  text-align: center;
}
.coins-note p {
  color: var(--white-50);
  font-size: 1.5rem;
  line-height: 1.9;
}

/* ---------------- Pied de page boutique ---------------- */

.shop-footer {
  padding-top: 4rem;
  border-top: 1px solid hsla(0, 0%, 100%, .07);
  color: hsla(0, 0%, 100%, .45);
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.2rem;
  letter-spacing: .12em;
  text-align: center;
}

/* ==================================================================
   Panier (tiroir)
   ================================================================== */

.cart-drawer {
  position: fixed;
  inset: 0;
  z-index: 1000;
  visibility: hidden;
  pointer-events: none;
}
.cart-drawer.open { visibility: visible; pointer-events: auto; }

.cart-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 5, 14, .68);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity .3s;
}
.cart-drawer.open .cart-backdrop { opacity: 1; }

.cart-panel {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  width: min(46rem, 100%);
  height: 100%;
  padding: 2.4rem;
  background: linear-gradient(180deg, #060d22 0%, #04091a 100%);
  border-left: 1px solid hsla(0, 0%, 100%, .09);
  box-shadow: -30px 0 60px -30px rgba(0, 0, 0, .9);
  transform: translateX(100%);
  transition: transform .38s cubic-bezier(.4, 0, .2, 1);
}
.cart-drawer.open .cart-panel { transform: translateX(0); }

.cart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 2rem;
  border-bottom: 1px solid hsla(0, 0%, 100%, .08);
}
.cart-header h2 { font-size: 2rem; font-weight: 700; }

.cart-close, .auth-close {
  width: 3.6rem;
  height: 3.6rem;
  border: 1px solid hsla(0, 0%, 100%, .12);
  border-radius: 50%;
  background: transparent;
  color: #fff;
  cursor: pointer;
  font-size: 2.4rem;
  line-height: 1;
  transition: background .25s, transform .25s;
}
.cart-close:hover, .auth-close:hover { background: hsla(0, 0%, 100%, .1); transform: rotate(90deg); }

.cart-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white-50);
  font-size: 1.5rem;
}

.cart-lines {
  flex: 1;
  overflow-y: auto;
  margin: 0 -.6rem;
  padding: 1.6rem .6rem;
}

.cart-line {
  position: relative;
  display: grid;
  grid-template-columns: 5.6rem 1fr auto;
  align-items: center;
  gap: 1.2rem;
  margin: 0 0 1rem;
  padding: 1.2rem;
  border: 1px solid hsla(0, 0%, 100%, .07);
  border-radius: .8rem;
  background: hsla(0, 0%, 100%, .03);
}

.cart-thumb {
  width: 5.6rem;
  height: 5.6rem;
  border-radius: .5rem;
  object-fit: cover;
}

.cart-info { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.cart-kind {
  color: var(--blue-soft);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.cart-name { font-size: 1.4rem; font-weight: 600; line-height: 1.3; }
.cart-unit { color: var(--white-50); font-size: 1.15rem; }

.cart-qty {
  grid-column: 2;
  display: flex;
  align-items: center;
  gap: .4rem;
  margin-top: .6rem;
}
.cart-qty button {
  width: 2.6rem;
  height: 2.6rem;
  border: 1px solid hsla(0, 0%, 100%, .14);
  border-radius: .4rem;
  background: transparent;
  color: #fff;
  cursor: pointer;
  font-size: 1.6rem;
  line-height: 1;
  transition: background .2s, border-color .2s;
}
.cart-qty button:hover { background: var(--blue); border-color: var(--blue); }
.cart-qty span { min-width: 2.4rem; text-align: center; font-size: 1.4rem; font-weight: 600; }

.cart-line-total { grid-column: 3; font-size: 1.5rem; font-weight: 700; white-space: nowrap; }

.cart-remove {
  position: absolute;
  top: .6rem;
  right: .6rem;
  width: 2.2rem;
  height: 2.2rem;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: hsla(0, 0%, 100%, .4);
  cursor: pointer;
  font-size: 1.8rem;
  line-height: 1;
  transition: color .2s, background .2s;
}
.cart-remove:hover { background: rgba(230, 60, 60, .18); color: #ff8a8a; }

.cart-foot { padding-top: 2rem; border-top: 1px solid hsla(0, 0%, 100%, .08); }

.cart-total-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 1.6rem;
  font-size: 1.5rem;
}
.cart-total-row strong { font-size: 2.4rem; font-weight: 800; }

.cart-checkout {
  width: 100%;
  padding: 1.4rem;
  border: none;
  border-radius: .6rem;
  background: var(--blue);
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  font-size: 1.6rem;
  font-weight: 700;
  transition: background .25s, box-shadow .25s, transform .2s;
}
.cart-checkout:hover {
  background: var(--blue-soft);
  box-shadow: 0 16px 34px -14px rgba(26, 108, 240, .9);
}
.cart-checkout:active { transform: scale(.99); }

.cart-clear {
  width: 100%;
  margin-top: .8rem;
  padding: 1rem;
  border: none;
  border-radius: .6rem;
  background: transparent;
  color: var(--white-50);
  cursor: pointer;
  font-family: inherit;
  font-size: 1.3rem;
  transition: color .2s;
}
.cart-clear:hover { color: #ff8a8a; }

/* ==================================================================
   Modale d'authentification 2 étapes
   ================================================================== */

.auth-modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  visibility: hidden;
  pointer-events: none;
}
.auth-modal.open { visibility: visible; pointer-events: auto; }

.auth-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 5, 14, .78);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .3s;
}
.auth-modal.open .auth-backdrop { opacity: 1; }

.auth-dialog {
  position: relative;
  width: min(54rem, 100%);
  max-height: calc(100vh - 4rem);
  overflow-y: auto;
  padding: 3.2rem;
  border: 1px solid hsla(0, 0%, 100%, .1);
  border-radius: 1.4rem;
  background: linear-gradient(180deg, #071031 0%, #04091b 100%);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .95);
  opacity: 0;
  transform: translateY(14px) scale(.98);
  transition: opacity .3s, transform .3s;
}
.auth-modal.open .auth-dialog { opacity: 1; transform: none; }

.auth-close { position: absolute; top: 1.6rem; right: 1.6rem; }

.auth-title { font-size: 2.4rem; font-weight: 800; }
.auth-sub { color: var(--white-50); font-size: 1.4rem; line-height: 1.7; margin-top: .4rem; }

.auth-steps { margin: 2.8rem 0 2.4rem; display: flex; flex-direction: column; gap: 1.2rem; }

.auth-step {
  display: grid;
  grid-template-columns: 4rem 1fr;
  gap: 1.4rem;
  margin: 0;
  padding: 1.8rem;
  border: 1px solid hsla(0, 0%, 100%, .09);
  border-radius: 1rem;
  background: hsla(0, 0%, 100%, .03);
  transition: border-color .3s, background .3s, opacity .3s;
}
.auth-step.locked { opacity: .45; }
.auth-step.done { border-color: rgba(46, 204, 128, .45); background: rgba(46, 204, 128, .07); }

.auth-step-index {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border: 1px solid hsla(0, 0%, 100%, .16);
  border-radius: 50%;
  font-size: 1.6rem;
  font-weight: 800;
}
.auth-step.done .auth-step-index {
  background: #2ecc80;
  border-color: #2ecc80;
  color: #04121c;
}

.auth-step-head { display: flex; align-items: center; gap: 1.2rem; }
.auth-step-icon { width: 2.6rem; height: 2.6rem; }
.auth-step-head h3 { font-size: 1.7rem; font-weight: 700; }
.auth-step-desc { color: var(--white-50); font-size: 1.3rem; line-height: 1.5; }

.auth-btn {
  width: 100%;
  margin-top: 1.4rem;
  padding: 1.2rem;
  border: none;
  border-radius: .6rem;
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  font-size: 1.4rem;
  font-weight: 600;
  transition: filter .25s, transform .2s;
}
.auth-btn:disabled { cursor: not-allowed; filter: grayscale(.6) brightness(.7); }
.auth-btn:not(:disabled):hover { filter: brightness(1.12); }
.auth-btn:not(:disabled):active { transform: scale(.99); }
.auth-btn-discord { background: #5865f2; }
.auth-btn-fivem { background: #f04e45; }

.auth-step-done { display: none; align-items: center; gap: .8rem; margin-top: 1.4rem; font-size: 1.4rem; }
.auth-step.done .auth-step-done { display: flex; }
.auth-step.done .auth-btn { display: none; }
.auth-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: #2ecc80;
  color: #04121c;
  font-size: 1.2rem;
  font-weight: 800;
}

.auth-continue {
  width: 100%;
  padding: 1.4rem;
  border: none;
  border-radius: .6rem;
  background: var(--blue);
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  font-size: 1.6rem;
  font-weight: 700;
  transition: background .25s, box-shadow .25s;
}
.auth-continue:disabled { background: hsla(0, 0%, 100%, .08); color: var(--white-50); cursor: not-allowed; }
.auth-continue:not(:disabled):hover {
  background: var(--blue-soft);
  box-shadow: 0 16px 34px -14px rgba(26, 108, 240, .9);
}

/* ==================================================================
   Toast
   ================================================================== */

.toast {
  position: fixed;
  left: 50%;
  bottom: 3rem;
  z-index: 1200;
  padding: 1.2rem 2.2rem;
  border: 1px solid hsla(0, 0%, 100%, .12);
  border-radius: .8rem;
  background: rgba(6, 14, 36, .96);
  box-shadow: 0 20px 44px -18px rgba(0, 0, 0, .9);
  color: #fff;
  font-size: 1.4rem;
  opacity: 0;
  transform: translate(-50%, 14px);
  pointer-events: none;
  transition: opacity .3s, transform .3s;
}
.toast.visible { opacity: 1; transform: translate(-50%, 0); }

/* ==================================================================
   Responsive
   ================================================================== */

@media screen and (max-width: 1200px) {
  .product-grid-coins { grid-template-columns: repeat(3, 1fr); }
}

@media screen and (max-width: 900px) {
  .product-grid-3 { grid-template-columns: 1fr; }
  .product-grid-coins { grid-template-columns: repeat(2, 1fr); }
  .shop { padding: 0 1.6rem 6rem; }
}

@media screen and (max-width: 560px) {
  .product-grid-coins { grid-template-columns: 1fr; }
  .shop-tabs { width: 100%; }
  .shop-tab { flex: 1; padding: 1rem 1.4rem; text-align: center; }
  .auth-dialog { padding: 2.4rem 1.8rem; }
  .cart-panel { padding: 1.8rem; }
}

/* ==================================================================
   FAQ

   Basée sur <details>/<summary> : l'ouverture/fermeture est native,
   donc fonctionnelle sans JavaScript et accessible au clavier.
   ================================================================== */

.faq-list {
  max-width: 88rem;
  margin: 0 auto 6rem;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.faq-item {
  border: 1px solid hsla(0, 0%, 100%, .09);
  border-radius: 1rem;
  background: rgba(4, 10, 28, .62);
  backdrop-filter: blur(12px);
  overflow: hidden;
  transition: border-color .3s, background .3s;
}
.faq-item:hover { border-color: hsla(0, 0%, 100%, .18); }
.faq-item[open] {
  border-color: color-mix(in srgb, var(--blue) 45%, transparent);
  background: rgba(8, 20, 48, .7);
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem;
  padding: 1.9rem 2.2rem;
  cursor: pointer;
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.45;
  list-style: none;
  transition: color .25s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::marker { content: ""; }
.faq-item summary:hover { color: var(--blue-soft); }
.faq-item summary:focus-visible {
  outline: 2px solid var(--blue-soft);
  outline-offset: -2px;
  border-radius: 1rem;
}

/* Chevron */
.faq-item summary::after {
  content: "";
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  border-right: 2px solid var(--blue-soft);
  border-bottom: 2px solid var(--blue-soft);
  transform: rotate(45deg) translate(-.2rem, -.2rem);
  transition: transform .3s ease;
}
.faq-item[open] summary::after {
  transform: rotate(225deg) translate(-.2rem, -.2rem);
}

.faq-answer {
  padding: 0 2.2rem 2.1rem;
  border-top: 1px solid hsla(0, 0%, 100%, .07);
  margin-top: -.4rem;
  padding-top: 1.6rem;
  animation: faq-open .28s ease;
}
.faq-answer p {
  color: hsla(0, 0%, 100%, .72);
  font-size: 1.45rem;
  line-height: 1.85;
}
.faq-answer p + p { margin-top: 1rem; }

@keyframes faq-open {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

.faq-link {
  color: var(--blue-soft);
  font-weight: 600;
  transition: color .25s;
}
.faq-link:hover { color: #fff; }
.faq-link::after { display: none; }

/* Bouton d'appel à l'action réutilisable */
.cta-button {
  display: inline-block;
  margin-top: 1.6rem;
  padding: 1.3rem 3rem;
  border-radius: .6rem;
  background: var(--blue);
  color: #fff;
  font-size: 1.5rem;
  font-weight: 700;
  transition: background .25s, box-shadow .25s, transform .2s;
}
.cta-button:hover {
  background: var(--blue-soft);
  box-shadow: 0 16px 34px -14px rgba(26, 108, 240, .9);
  transform: translateY(-2px);
}

/* ==================================================================
   Liens
   ================================================================== */

.link-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.4rem;
  max-width: 108rem;
  margin: 0 auto;
}

.link-card {
  --accent: var(--blue);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 2.8rem 2.4rem 2.4rem;
  border: 1px solid hsla(0, 0%, 100%, .09);
  border-radius: 1.2rem;
  background: rgba(4, 10, 28, .62);
  backdrop-filter: blur(12px);
  box-shadow: 0 24px 50px -26px rgba(0, 0, 0, .9);
  transition: transform .3s, border-color .3s, box-shadow .3s;
}
.link-card::after { display: none; }
.link-card:hover {
  transform: translateY(-.6rem);
  border-color: color-mix(in srgb, var(--accent) 60%, transparent);
  box-shadow: 0 32px 60px -24px color-mix(in srgb, var(--accent) 45%, transparent);
}

.link-card-main    { --accent: #5865f2; }
.link-card-legal   { --accent: #2ecc80; }
.link-card-illegal { --accent: #e0453f; }

.link-badge {
  position: absolute;
  top: 1.4rem;
  right: 1.4rem;
  padding: .45rem 1.1rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  color: #fff;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.link-icon {
  width: 4.4rem;
  height: 4.4rem;
  padding: 1rem;
  margin-bottom: 1.6rem;
  border-radius: 1rem;
  background: color-mix(in srgb, var(--accent) 24%, transparent);
}

.link-title { font-size: 1.9rem; font-weight: 800; }

.link-desc {
  flex: 1;
  margin: .6rem 0 2rem;
  color: var(--white-50);
  font-size: 1.35rem;
  line-height: 1.7;
}

.link-cta {
  color: var(--accent);
  font-size: 1.4rem;
  font-weight: 700;
  transition: gap .25s;
}
.link-card:hover .link-cta { color: #fff; }

/* Liens secondaires */

.link-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.4rem;
  max-width: 108rem;
  margin: 0 auto;
}

.link-mini {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  padding: 1.6rem 1.8rem;
  border: 1px solid hsla(0, 0%, 100%, .09);
  border-radius: .8rem;
  background: rgba(4, 10, 28, .5);
  transition: background .25s, border-color .25s, transform .25s;
}
.link-mini::after { display: none; }
.link-mini:hover {
  background: rgba(10, 24, 56, .7);
  border-color: color-mix(in srgb, var(--blue) 50%, transparent);
  transform: translateY(-3px);
}
.link-mini-label { font-size: 1.5rem; font-weight: 700; }
.link-mini-desc { color: var(--white-50); font-size: 1.25rem; }

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

@media screen and (max-width: 900px) {
  .link-grid { grid-template-columns: 1fr; }
  .link-row  { grid-template-columns: repeat(2, 1fr); }
  .faq-item summary { padding: 1.6rem 1.8rem; font-size: 1.5rem; }
  .faq-answer { padding-left: 1.8rem; padding-right: 1.8rem; }
}

@media screen and (max-width: 560px) {
  .link-row { grid-template-columns: 1fr; }
}

/* ==================================================================
   États liés à Tebex
   ================================================================== */

.shop-empty {
  grid-column: 1 / -1;
  padding: 4rem 2rem;
  border: 1px dashed hsla(0, 0%, 100%, .16);
  border-radius: 1rem;
  color: var(--white-50);
  font-size: 1.45rem;
  text-align: center;
}


/* Message d'erreur dans la modale d'authentification */
.auth-error {
  margin-bottom: 1.6rem;
  padding: 1.2rem 1.4rem;
  border: 1px solid rgba(230, 90, 90, .4);
  border-radius: .6rem;
  background: rgba(230, 90, 90, .12);
  color: #ffb4b4;
  font-size: 1.3rem;
  line-height: 1.6;
}

.toast-error {
  border-color: rgba(230, 90, 90, .5);
  background: rgba(46, 10, 14, .97);
  color: #ffc9c9;
}

/* Le panier Tebex fait foi : la quantité s'y modifie, pas ici. */
.cart-qty span {
  min-width: auto;
  padding: .3rem 1rem;
  border: 1px solid hsla(0, 0%, 100%, .14);
  border-radius: .4rem;
  font-size: 1.3rem;
  font-weight: 600;
}

/* ==================================================================
   Page « à venir » (Recrutement)

   Contenu très court : on occupe la hauteur d'écran restante pour
   éviter que le pied de page ne remonte au milieu de la fenêtre.
   ================================================================== */

.shop-soon {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100vh - 12rem);
}

.shop-soon .shop-head { padding: 0 0 6rem; }

.shop-soon .shop-lead {
  font-size: 1.8rem;
  letter-spacing: .04em;
}

.shop-soon .shop-footer { margin-top: auto; }