/* ==========================================================================
   FPS VALORIA — Refonte V3 Ultra Premium (SITE PUBLIC UNIQUEMENT)
   Ce fichier n'est chargé que par les pages publiques (accueil, boutique,
   panier, commande, changelog, conditions, confidentialité, 404).
   Il n'est jamais chargé par compte.html ni admin.html : aucune règle ici
   ne peut donc modifier l'apparence de l'espace client ou de l'administration.
   Les surcharges de composants partagés (header, nav, .button, footer) sont
   en plus scoped sous .pub-v3 par prudence supplémentaire.
   ========================================================================== */

.pub-v3 { --pub-maxw: 1280px; }

/* --------------------------------------------------------------------------
   En-tête : navigation centrée, actions à droite
   -------------------------------------------------------------------------- */

.pub-v3 header {
  justify-content: center;
  gap: 28px;
}
.pub-v3 header nav#site-nav {
  flex: 1;
  justify-content: center;
}
.pub-v3 .header-actions {
  flex-shrink: 0;
}
.pub-v3 .header-actions .login-link {
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  padding: 8px 6px;
  transition: color var(--dur-fast) var(--ease);
}
.pub-v3 .header-actions .login-link:hover { color: var(--text) }
.pub-v3 .header-actions .discord-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.pub-v3 .header-actions .discord-pill svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8 }

@media (max-width: 900px) {
  .pub-v3 header { justify-content: space-between }
}

/* --------------------------------------------------------------------------
   Hero : badge de version, titre en dégradé, ligne de compatibilité
   -------------------------------------------------------------------------- */

.hero-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px solid #4a3d73;
  background: linear-gradient(135deg, #1c1430, #120e1e 70%);
  border-radius: 30px;
  padding: 8px 16px 8px 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.4px;
  color: var(--text-dim);
  text-transform: uppercase;
  box-shadow: var(--glow-line);
}
.hero-badge-pill .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 10px 2px #67e2bd90;
  flex-shrink: 0;
}
.hero-badge-pill b { color: var(--violet-200); font-weight: 800 }

.hero h1 .grad {
  display: block;
  background: linear-gradient(120deg, var(--violet-200), var(--violet) 45%, var(--violet-700) 85%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.compat-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 26px;
  font-size: 13px;
  color: var(--muted-2);
}
.compat-row svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--text-dim) }
.compat-row b { color: var(--text-dim); font-weight: 600 }

/* --------------------------------------------------------------------------
   Trois avantages
   -------------------------------------------------------------------------- */

.adv-section {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.adv-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 26px;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.adv-card:hover {
  transform: translateY(-5px);
  border-color: #4a3d7a;
  box-shadow: var(--shadow);
}
.adv-ico {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(150deg, #241735, #16121f);
  border: 1px solid var(--line-soft);
  color: var(--violet-200);
  margin-bottom: 18px;
}
.adv-ico svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.7 }
.adv-card h3 { font-size: 19px; margin: 0 0 10px }
.adv-card p { color: var(--muted); font-size: 14.5px; margin: 0 }

/* --------------------------------------------------------------------------
   Vitrine de l'application : menu latéral + capture + miniatures
   -------------------------------------------------------------------------- */

.showcase-v3__layout {
  display: grid;
  grid-template-columns: 230px 1fr;
  gap: 32px;
  margin-top: 34px;
  align-items: start;
}
.showcase-v3__sidebar {
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: sticky;
  top: calc(var(--header-h) + 20px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 10px;
}
.showcase-v3__sidebar button {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted);
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  padding: 12px 14px;
  border-radius: 10px;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.showcase-v3__sidebar button svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.7; flex-shrink: 0; opacity: 0.85 }
.showcase-v3__sidebar button:hover { color: var(--text); background: #ffffff08 }
.showcase-v3__sidebar button[aria-selected="true"] {
  color: #fff;
  background: linear-gradient(135deg, #8b5cf633, #6d3fd622);
  border-color: #6d44b84d;
  box-shadow: inset 0 0 0 1px #8b5cf640;
}

.showcase-v3__main { min-width: 0 }
.showcase-v3__main .window { opacity: 1; transition: opacity 0.28s var(--ease) }
.showcase-v3__main .window.is-fading { opacity: 0.35 }
.showcase-v3__desc {
  color: var(--muted);
  font-size: 15px;
  max-width: 640px;
  margin: 18px 0 0;
}
.showcase-v3__thumbs {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  margin-top: 20px;
}
.showcase-v3__thumbs button {
  padding: 0;
  border: 2px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  background: #09070d;
  line-height: 0;
  transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.showcase-v3__thumbs button:hover { transform: translateY(-2px) }
.showcase-v3__thumbs button img { width: 100%; height: 100%; aspect-ratio: 8/5; object-fit: cover; display: block; opacity: 0.72; transition: opacity var(--dur-fast) var(--ease) }
.showcase-v3__thumbs button[aria-current="true"] { border-color: var(--violet-300) }
.showcase-v3__thumbs button[aria-current="true"] img,
.showcase-v3__thumbs button:hover img { opacity: 1 }

@media (max-width: 900px) {
  .showcase-v3__layout { grid-template-columns: 1fr }
  .showcase-v3__sidebar {
    position: static;
    flex-direction: row;
    overflow-x: auto;
    scrollbar-width: none;
    gap: 6px;
  }
  .showcase-v3__sidebar::-webkit-scrollbar { display: none }
  .showcase-v3__sidebar button { white-space: nowrap; flex-shrink: 0 }
  .showcase-v3__thumbs { grid-template-columns: repeat(3, 1fr) }
}
@media (max-width: 560px) {
  .showcase-v3__thumbs { grid-template-columns: repeat(3, 1fr) }
}

/* --------------------------------------------------------------------------
   Carrousel jeux
   -------------------------------------------------------------------------- */

.games-v3__viewport {
  position: relative;
  margin-top: 30px;
}
.games-v3__track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  list-style: none;
  margin: 0;
  padding: 4px 4px 14px;
  scrollbar-width: thin;
  scrollbar-color: #5f3f96 transparent;
}
.games-v3__track:focus-visible { outline: 3px solid var(--violet); outline-offset: 4px; border-radius: 12px }
.game-card-v3 {
  flex: 0 0 300px;
  scroll-snap-align: start;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.game-card-v3:hover { transform: translateY(-5px); border-color: #4a3d7a; box-shadow: var(--shadow) }
.game-card-v3__media { position: relative; aspect-ratio: 2.1/1; overflow: hidden; background: #09070d }
.game-card-v3__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s var(--ease-out) }
.game-card-v3:hover .game-card-v3__media img { transform: scale(1.06) }
.game-card-v3__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(0deg, #0a0812e6 0%, transparent 55%);
}
.game-card-v3__body { padding: 18px 20px 22px }
.game-card-v3__body h3 { font-size: 16.5px; margin: 0 0 8px; line-height: 1.25 }
.game-card-v3__body p { font-size: 13.5px; color: var(--muted); margin: 0 0 16px; min-height: 36px }
.game-card-v3__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--violet-200);
  position: relative;
  padding-bottom: 2px;
}
.game-card-v3__link::after {
  content: "";
  position: absolute; left: 0; right: 100%; bottom: 0; height: 1px;
  background: var(--violet-300);
  transition: right var(--dur) var(--ease-out);
}
.game-card-v3__link:hover::after { right: 0 }

.games-v3__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #14101ee6;
  border: 1px solid #443a63;
  color: var(--text);
  backdrop-filter: blur(10px);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.games-v3__arrow:hover { border-color: var(--violet-300); transform: translateY(-50%) scale(1.06) }
.games-v3__arrow svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2 }
.games-v3__arrow--prev { left: -8px }
.games-v3__arrow--next { right: -8px }

@media (max-width: 720px) {
  .games-v3__arrow { display: none }
  .game-card-v3 { flex-basis: 78vw }
}

/* --------------------------------------------------------------------------
   Boutique — cartes tarifaires
   -------------------------------------------------------------------------- */

.price-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 36px;
  align-items: start;
}
.price-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.price-card:hover { transform: translateY(-6px); box-shadow: var(--shadow) }
.price-card--featured {
  border-color: var(--violet);
  background: linear-gradient(165deg, #241735, #111019 70%);
  box-shadow: var(--shadow-lg);
  transform: scale(1.02);
}
.price-card--featured:hover { transform: scale(1.02) translateY(-6px) }
.price-card__ribbon {
  position: absolute;
  top: -13px; left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #b98bff, #8b5cf6);
  color: #150d25;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 7px 16px;
  border-radius: 30px;
  white-space: nowrap;
  box-shadow: 0 10px 24px -8px #8b5cf680;
}
.price-card__name { font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted) }
.price-card__price { display: flex; align-items: baseline; gap: 6px; margin: 14px 0 4px }
.price-card__price strong { font-size: 42px; letter-spacing: -1.5px; font-variant-numeric: tabular-nums }
.price-card__price span { color: var(--muted); font-size: 14px }
.price-card__sub { color: var(--muted-2); font-size: 13px; margin: 0 0 22px }
.price-card ul { list-style: none; margin: 0 0 26px; padding: 0; flex: 1 }
.price-card li { font-size: 14.5px; padding: 8px 0 8px 24px; position: relative; color: var(--text-dim) }
.price-card li::before { content: "✓"; position: absolute; left: 0; color: var(--teal); font-weight: 700 }
.price-card .button { width: 100%; justify-content: center }

@media (max-width: 900px) {
  .price-grid { grid-template-columns: 1fr; max-width: 420px; margin-left: auto; margin-right: auto }
  .price-card--featured { transform: none }
  .price-card--featured:hover { transform: translateY(-6px) }
}

/* --------------------------------------------------------------------------
   Pourquoi FPS Valoria — 4 blocs
   -------------------------------------------------------------------------- */

.why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.why-card { text-align: left }
.why-ico {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: linear-gradient(150deg, #241735, #16121f);
  border: 1px solid var(--line-soft);
  color: var(--violet-200);
  margin-bottom: 16px;
  box-shadow: 0 0 0 1px #8b5cf61a;
}
.why-ico svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.7 }
.why-card h3 { font-size: 17px; margin: 0 0 8px }
.why-card p { color: var(--muted); font-size: 14px; margin: 0 }

@media (max-width: 800px) {
  .why-grid { grid-template-columns: 1fr 1fr; gap: 26px 18px }
}
@media (max-width: 520px) {
  .why-grid { grid-template-columns: 1fr }
}

/* --------------------------------------------------------------------------
   FAQ deux colonnes
   -------------------------------------------------------------------------- */

.faq-v3 {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 50px;
  align-items: start;
}
.faq-v3__intro { position: sticky; top: calc(var(--header-h) + 20px) }
.faq-v3__intro p { color: var(--muted); max-width: 360px; margin: 14px 0 22px }
.faq-v3__intro .button { white-space: nowrap }
.faq-v3__list { max-width: none; margin: 0 }
.faq-v3__list details { padding: 2px 0 }

@media (max-width: 900px) {
  .faq-v3 { grid-template-columns: 1fr; gap: 20px }
  .faq-v3__intro { position: static }
}

/* --------------------------------------------------------------------------
   CTA finale — logo Windows + halo animé
   -------------------------------------------------------------------------- */

.cta-v3__windows {
  width: 54px;
  height: 54px;
  margin: 0 auto 18px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  border: 1px solid var(--line-soft);
  background: linear-gradient(150deg, #241735, #16121f);
  color: var(--violet-200);
}
.cta-v3__windows svg { width: 24px; height: 24px }
.cta-v3 .button {
  position: relative;
  animation: ctaPulse 3.2s ease-in-out infinite;
}
@keyframes ctaPulse {
  0%, 100% { box-shadow: 0 14px 30px -10px #8b5cf680 }
  50% { box-shadow: 0 18px 46px -8px #a855f7aa }
}
.cta-v3__compat { margin-top: 16px; font-size: 13px; color: var(--muted-2) }

/* --------------------------------------------------------------------------
   Footer — réseaux réels uniquement
   -------------------------------------------------------------------------- */

.pub-v3 .footer-social {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}
.pub-v3 .footer-social a {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text-dim);
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.pub-v3 .footer-social a:hover { border-color: var(--violet-300); color: var(--violet-200) }
.pub-v3 .footer-social svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.8 }

/* --------------------------------------------------------------------------
   Grille responsive générale des nouvelles sections
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .adv-section { grid-template-columns: 1fr; gap: 16px }
}

@media (max-width: 800px) {
  .price-card__price strong { font-size: 36px }
}