/* ==========================================================================
   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 }
}

/* --------------------------------------------------------------------------
   Menu déroulant "Formulaires"
   -------------------------------------------------------------------------- */

.pub-v3 .nav-dropdown { position: relative }
.pub-v3 .nav-dropdown__trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  padding: 6px 2px;
  font: inherit;
  font-size: 14px;
  color: var(--muted);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease);
}
.pub-v3 .nav-dropdown__trigger:hover,
.pub-v3 .nav-dropdown__trigger[aria-expanded="true"] { color: var(--text) }
.pub-v3 .nav-dropdown__trigger svg { width: 14px; height: 14px; stroke: currentColor; fill: none; transition: transform var(--dur-fast) var(--ease) }
.pub-v3 .nav-dropdown__trigger[aria-expanded="true"] svg { transform: rotate(180deg) }
.pub-v3 .nav-dropdown__menu {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 260px;
  background: #14101ee6;
  border: 1px solid #443a63;
  border-radius: var(--radius);
  padding: 8px;
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), visibility var(--dur-fast);
}
.pub-v3 .nav-dropdown__menu.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0) }
.pub-v3 .nav-dropdown__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease);
}
.pub-v3 .nav-dropdown__item:hover { background: #ffffff0f }
.pub-v3 .nav-dropdown__item svg { width: 18px; height: 18px; stroke: var(--violet-200); fill: none; flex-shrink: 0; margin-top: 2px }
.pub-v3 .nav-dropdown__item strong { display: block; font-size: 13.5px; font-weight: 700; color: var(--text) }
.pub-v3 .nav-dropdown__item small { display: block; font-size: 12px; color: var(--muted); margin-top: 1px }

@media (max-width: 900px) {
  .pub-v3 .nav-dropdown { align-self: stretch; width: 100% }
  .pub-v3 .nav-dropdown__trigger { width: 100%; justify-content: space-between; padding: 15px 4px; border-bottom: 1px solid var(--line-soft) }
  .pub-v3 .nav-dropdown__menu {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    display: none;
    min-width: 0;
    background: none;
    border: none;
    backdrop-filter: none;
    box-shadow: none;
    padding: 0 0 8px;
  }
  .pub-v3 .nav-dropdown__menu.is-open { display: flex; position: static; transform: none }
  .pub-v3 .nav-dropdown__item { padding: 12px 4px; border-bottom: 1px solid var(--line-soft) }
}

/* --------------------------------------------------------------------------
   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) }
}

/* --------------------------------------------------------------------------
   Section : Score PC — épinglée à l'écran, pilotée par le défilement réel
   (position: sticky sur une section bien plus haute qu'un écran : la molette
   fait défiler la page normalement, mais le contenu reste visuellement fixe
   tant que cette hauteur n'est pas "consommée", ce qui donne l'impression
   que la molette pilote directement la jauge).
   -------------------------------------------------------------------------- */

#score.score-v3 { padding: 0; height: 260vh }
.score-v3__pin {
  position: sticky;
  top: var(--header-h);
  height: calc(100vh - var(--header-h));
  display: flex;
  align-items: center;
  overflow: hidden;
}
.score-v3__inner { padding: clamp(52px, 8vw, 96px) 32px; width: 100% }

@media (max-width: 760px) {
  #score.score-v3 { height: 220vh }
}
@media (prefers-reduced-motion: reduce) {
  #score.score-v3 { height: auto }
  .score-v3__pin { position: static; height: auto }
}

.score-v3__layout {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 48px;
  margin-top: 36px;
}
.score-v3__checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 460px;
}
.score-v3__checklist li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--muted);
  transition: color var(--dur) var(--ease);
}
.score-v3__checklist li svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  stroke: var(--line);
  fill: none;
  stroke-width: 2;
  transition: stroke var(--dur) var(--ease);
}
.score-v3__checklist li.is-done { color: var(--text) }
.score-v3__checklist li.is-done svg { stroke: var(--teal) }

.score-v3__gauge {
  position: relative;
  width: 220px;
  height: 220px;
  flex-shrink: 0;
  margin: 0 auto;
}
.score-v3__gauge svg { width: 100%; height: 100%; transform: rotate(-90deg) }
.score-v3__track { fill: none; stroke: var(--line); stroke-width: 10 }
.score-v3__fill {
  fill: none;
  stroke: url(#score-gauge-grad);
  stroke-width: 10;
  stroke-linecap: round;
  stroke-dasharray: 439.8;
  stroke-dashoffset: 439.8;
  transition: stroke-dashoffset 0.1s linear;
}
.score-v3__readout {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.score-v3__readout strong { font-size: 44px; letter-spacing: -1px; color: var(--text); font-variant-numeric: tabular-nums }
.score-v3__readout span { font-size: 12.5px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); margin-top: 2px }
.score-v3__readout small { font-size: 11px; color: var(--muted-2); margin-top: 6px }

@media (max-width: 760px) {
  .score-v3__layout { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 32px }
}
@media (prefers-reduced-motion: reduce) {
  .score-v3__fill { transition: none }
}

/* --------------------------------------------------------------------------
   Carrousel jeux — coverflow 3D
   -------------------------------------------------------------------------- */

.games-v3__viewport {
  position: relative;
  margin-top: 30px;
  perspective: 1600px;
}
.games-v3__track {
  display: flex;
  position: relative;
  justify-content: center;
  align-items: center;
  height: 320px;
  list-style: none;
  margin: 0;
  padding: 4px 4px 14px;
}
.games-v3__track:focus-visible { outline: 3px solid var(--violet); outline-offset: 4px; border-radius: 12px }
.game-card-v3 {
  position: absolute;
  left: 50%;
  top: 4px;
  width: 300px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.game-card-v3:hover { 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__viewport { perspective: none }
  .games-v3__track {
    position: static;
    height: auto;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    gap: 16px;
    scrollbar-width: thin;
    scrollbar-color: #5f3f96 transparent;
  }
  .game-card-v3 {
    position: static;
    flex: 0 0 78vw;
    width: auto;
    scroll-snap-align: start;
    transform: none !important;
    opacity: 1 !important;
  }
  .games-v3__arrow { display: none }
}
@media (prefers-reduced-motion: reduce) {
  .game-card-v3 { transition: none }
}

/* --------------------------------------------------------------------------
   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) }
}

/* --------------------------------------------------------------------------
   Ce qu’il y a dedans — 3 blocs (réutilise .why-card)
   -------------------------------------------------------------------------- */

.features-v3__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 30px;
}
@media (max-width: 800px) {
  .features-v3__grid { grid-template-columns: 1fr }
}

/* --------------------------------------------------------------------------
   Trois étapes
   -------------------------------------------------------------------------- */

.steps-v3__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-top: 36px;
}
.steps-v3__num {
  display: block;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: var(--violet-300);
  margin-bottom: 10px;
}
.steps-v3__item h3 { font-size: 18px; margin: 0 0 8px }
.steps-v3__item p { color: var(--muted); font-size: 14px; margin: 0 }
@media (max-width: 800px) {
  .steps-v3__grid { grid-template-columns: 1fr; gap: 26px }
}

/* --------------------------------------------------------------------------
   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 }
}

/* --------------------------------------------------------------------------
   Catalogue de jeux (games.html)
   -------------------------------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  padding: 4px 10px;
  border-radius: 20px;
  background: #ffffff0f;
  color: var(--muted);
  border: 1px solid var(--line);
}
.badge.good { background: #67e2bd1f; color: var(--teal); border-color: #67e2bd40 }

.games-catalog-v3__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 30px;
}
.games-catalog-v3__search {
  position: relative;
  flex: 1 1 260px;
  max-width: 360px;
}
.games-catalog-v3__search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; stroke: var(--muted-2) }
.games-catalog-v3__search input {
  width: 100%;
  padding: 11px 14px 11px 40px;
  border-radius: 30px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 14.5px;
}
.games-catalog-v3__search input:focus-visible { outline: 2px solid var(--violet); outline-offset: 1px }
.games-catalog-v3__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-height: 70px;
  overflow-y: auto;
}
.games-catalog-v3__filters .pill {
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 8px 14px;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.games-catalog-v3__filters .pill:hover { color: var(--text) }
.games-catalog-v3__filters .pill.is-active { color: #fff; background: linear-gradient(135deg, #8b5cf633, #6d3fd622); border-color: var(--violet) }

.games-catalog-v3__count { color: var(--muted-2); font-size: 13.5px; margin: 18px 0 0 }
.games-catalog-v3__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 14px;
}
.games-catalog-v3__empty { color: var(--muted); grid-column: 1 / -1; padding: 40px 0; text-align: center }

.game-tile-v3 {
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  padding: 0;
  font: inherit;
  color: inherit;
  transition: transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.game-tile-v3:hover { transform: translateY(-4px); border-color: #4a3d7a; box-shadow: var(--shadow) }
.game-tile-v3__media { aspect-ratio: 16/9; background: #09070d; overflow: hidden }
.game-tile-v3__media img { width: 100%; height: 100%; object-fit: cover; display: block }
.game-tile-v3__placeholder {
  width: 100%; height: 100%;
  display: grid; place-items: center;
  background: linear-gradient(150deg, #1c1430, #120e1e 70%);
}
.game-tile-v3__placeholder svg { width: 34px; height: 34px; color: var(--violet-300); opacity: 0.6 }
.game-tile-v3__body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 8px }
.game-tile-v3__body h3 { font-size: 14.5px; margin: 0; line-height: 1.3 }
.game-tile-v3__body .badge { align-self: flex-start }

.games-catalog-v3__pager { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 30px }
.games-catalog-v3__pager span { color: var(--muted); font-size: 13.5px }

.games-modal-overlay {
  position: fixed; inset: 0;
  background: #06050ac2;
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 60;
}
.games-modal {
  position: relative;
  width: 100%;
  max-width: 640px;
  max-height: 86vh;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 28px;
}
.games-modal__close {
  position: absolute; top: 14px; right: 14px;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #ffffff0a;
  color: var(--text);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  z-index: 1;
}
.games-modal__media { aspect-ratio: 16/9; border-radius: var(--radius); overflow: hidden; margin: -4px -4px 18px; background: #09070d }
.games-modal__media img { width: 100%; height: 100%; object-fit: cover; display: block }
.games-modal h2 { margin: 0 0 8px; font-size: 22px }
.games-modal__category { color: var(--muted); font-size: 13.5px; margin: 8px 0 0 }
.games-modal__boost, .games-modal__specs { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line) }
.games-modal__boost h4, .games-modal__specs h4 {
  font-size: 13px; text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--muted-2); margin: 0 0 12px;
}
.games-modal__chipstitle { margin-top: 18px !important }
.games-modal__nospecs, .games-modal__boostnote { color: var(--muted-2); font-size: 13px; margin: 0 0 12px }
.games-modal__loading { color: var(--muted); text-align: center; padding: 30px 0 }

.games-modal__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.games-modal__table th, .games-modal__table td { padding: 9px 10px; text-align: left; border-bottom: 1px solid var(--line-soft) }
.games-modal__table thead th { color: var(--muted-2); font-weight: 700; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.4px }
.games-modal__table tbody th { color: var(--muted); font-weight: 600; white-space: nowrap; width: 1%; padding-right: 18px }
.games-modal__table tbody td { color: var(--text-dim) }
.games-modal__table tbody tr:last-child th, .games-modal__table tbody tr:last-child td { border-bottom: none }
.games-modal__source { margin: 10px 0 0; font-size: 12px; color: var(--muted-2) }
.games-modal__source a { color: var(--violet-300) }

.games-modal__boostcard {
  display: flex; gap: 12px; align-items: flex-start;
  background: #ffffff06;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 8px;
}
.games-modal__boostcard svg { width: 18px; height: 18px; color: var(--violet-300); flex-shrink: 0; margin-top: 1px }
.games-modal__boostcard strong { display: block; font-size: 13.5px; color: var(--text); margin-bottom: 3px }
.games-modal__boostcard p { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.4 }
.games-modal__chips { display: flex; flex-wrap: wrap; gap: 8px }
.games-modal__chips .chip {
  font-size: 12px;
  color: var(--text-dim);
  background: #ffffff08;
  border: 1px solid var(--line-soft);
  border-radius: 20px;
  padding: 6px 12px;
}

@media (max-width: 640px) {
  .games-catalog-v3__filters { max-height: 110px }
}

/* --------------------------------------------------------------------------
   Formulaires publics (support.html, recrutement.html)
   -------------------------------------------------------------------------- */

.pub-v3 .auth-card--wide { max-width: 640px }
.ticket-row { padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14.5px }
.ticket-row:last-child { border-bottom: none }
.pub-v3 .eyebrow svg { width: 13px; height: 13px; stroke: currentColor; fill: none; vertical-align: -1px; margin-right: 2px }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px }
.field-row label { margin: 17px 0 0 }
.field-hint { font-weight: 400; color: var(--muted-2); font-size: 12.5px }
.field-counter { margin: 6px 2px 0; font-size: 12.5px; color: var(--muted-2); min-height: 1.2em }
.field-footnote { margin-top: 18px; font-size: 12.5px; text-align: center }
@media (max-width: 560px) {
  .field-row { grid-template-columns: 1fr }
}

/* --------------------------------------------------------------------------
   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 }
}