:root {
  /* Background */
  --bg: #25262a;
  --bg2: #2d2f35;
  --surface: #31333a;
  --surface2: #3a3c45;
  --border: #444754;

  --text: #f6f6f7;
  --muted: #d0d1d6;

  /* Accent ammonite */
  --accent: #d6a24b;
  --accent-2: #b8842f;

  /* Discord */
  --discord: #5865F2;

  --radius: 16px;
  --max: 1160px;

  /* Nav indicator (taille fixe) */
  --nav-indicator-w: 26px;
  /* ~ moitié de "Accueil" */
  --nav-indicator-h: 3px;
  /* plus fin */
  --nav-indicator-gap: 0px;
  /* distance sous le texte */

  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

* {
  box-sizing: border-box
}

html,
body {
  height: 100%
}

body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: inherit;
  text-decoration: none
}

img {
  max-width: 100%;
  display: block
}

.container {
  width: min(var(--max), calc(100% - 40px));
  margin: 0 auto
}

.grid {
  display: grid;
  gap: 18px
}

/* Sections + séparateur */
.section {
  padding: 60px 0;
  position: relative;
}

.section.alt {
  background: var(--bg2)
}

.section::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: rgba(255, 255, 255, .06);
}

.section:first-of-type::before {
  display: none
}

.hr {
  height: 1px;
  background: rgba(255, 255, 255, .08);
  margin: 18px 0
}

/* Typo */
.mini-title {
  margin: 0 0 10px;
  font-size: 13px;
  letter-spacing: .25px;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
}

.title {
  margin: 0 0 10px;
  font-size: 30px;
  line-height: 1.2;
  font-weight: 720;
  /* moins gras */
}

.lead {
  margin: 0;
  color: var(--muted);
  line-height: 1.75;
  font-size: 16px;
  font-weight: 400;
}

.small {
  color: rgba(246, 246, 247, .75);
  font-size: 13px;
  line-height: 1.6;
  font-weight: 400;
}

/* NAV */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(37, 38, 42, .92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.nav-inner {
  height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  /* moins gras */
  letter-spacing: .2px;
}

.brand-name {
  font-weight: 650;
  /* nettement moins gras */
}

/* Zone droite (menus + boutons) */
.nav-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Menus à droite (sans bloc glass) + indicateur */
.nav-links-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
}

.nav-links a {
  color: rgba(246, 246, 247, .80);
  padding: 10px 12px;
  border-radius: 12px;
  font-weight: 500;
  position: relative;
}

.nav-links a:hover {
  color: var(--text)
}

/* Indicateur fin, largeur fixe, centré sous le texte */
.nav-indicator {
  position: absolute;
  height: var(--nav-indicator-h);
  width: var(--nav-indicator-w);
  border-radius: 999px;
  background: var(--accent);
  left: 0;
  top: calc(100% + var(--nav-indicator-gap));
  transform: translateX(0);
  opacity: 1;
  transition: transform .18s ease, opacity .18s ease;
  pointer-events: none;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}


/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .10);
  background: rgba(255, 255, 255, .04);
  color: var(--text);
  cursor: pointer;
  font-weight: 500;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .12s ease;
}

.btn:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, .06)
}

.btn.small {
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
}

/* Primary : normal plein / hover transparent + bordure + texte ammonite */
.btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
  font-weight: 500;
  /* pas gras */
}

.btn.primary:hover {
  background: transparent;
  border-color: var(--accent);
  color: var(--accent);
}

/* Secondary : outline ammonite, hover neutre (pas d’orange transparent) */
.btn.secondary {
  background: transparent;
  border-color: rgba(214, 162, 75, .70);
  color: rgba(214, 162, 75, .95);
  font-weight: 500;
}

.btn.secondary:hover {
  background: rgba(255, 255, 255, .06);
  border-color: var(--accent);
  color: var(--accent);
}

/* Discord (pas gras) */
.btn.discord {
  background: var(--discord);
  border-color: var(--discord);
  color: #fff;
  font-weight: 500;
}

.btn.discord:hover {
  filter: brightness(.96)
}

/* Mobile menu */
.mobile-menu {
  display: none;
  border-top: 1px solid rgba(255, 255, 255, .08);
  padding: 10px 0 14px;
}

.mobile-menu a {
  display: block;
  padding: 12px 8px;
  color: rgba(246, 246, 247, .85);
  border-radius: 12px;
  font-weight: 500;
}

.mobile-menu a:hover {
  background: rgba(255, 255, 255, .06)
}

.mobile-menu.open {
  display: block
}

/* Cards */
.card {
  border: 1px solid rgba(255, 255, 255, .10);
  background: var(--surface);
  border-radius: var(--radius);
  padding: 18px;
  transition: background .12s ease, border-color .12s ease, transform .12s ease;
}

.card:hover {
  background: var(--surface2);
  border-color: rgba(255, 255, 255, .18);
  transform: translateY(-2px);
}

.card h3 {
  margin: 0 0 8px;
  font-weight: 800
}

.card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
  font-weight: 400
}

/* HERO */
.hero {
  padding: 46px 0 46px;
  position: relative;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 26px;
  align-items: center;
}

.h-title {
  font-size: clamp(34px, 4.2vw, 56px);
  line-height: 1.02;
  margin: 10px 0 12px;
  font-weight: 900;
}

.h-sub {
  margin: 0 0 18px;
  color: var(--muted);
  line-height: 1.75;
  font-weight: 400;
}

.hero-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap
}

/* JEUX */
.packs-wrap {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 26px;
  align-items: stretch;
}

.packs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  height: 100%;
}

.game-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0;
  overflow: hidden;
}

.game-cover {
  width: 100%;
  aspect-ratio: 16/10;
  object-fit: cover;
  border-bottom: 1px solid rgba(255, 255, 255, .10);
}

.game-body {
  padding: 16px 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.game-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.game-title h3 {
  margin: 0;
  font-weight: 900
}

.game-desc {
  color: rgba(246, 246, 247, .78);
  line-height: 1.6;
  font-weight: 400;
}

.packs-side {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
}

/* DASHBOARD */
.dashboard-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 26px;
  align-items: center;
}

.dashboard-media {
  border: 1px solid rgba(255, 255, 255, .10);
  background: var(--surface);
  border-radius: var(--radius);
  padding: 14px;
}

.dashboard-media img {
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .08);
}

/* FAQ */
.faq {
  display: grid;
  gap: 12px
}

.faq-item {
  border: 1px solid rgba(255, 255, 255, .10);
  background: var(--surface);
  border-radius: 14px;
  overflow: hidden;
}

.faq-q {
  width: 100%;
  background: transparent;
  border: 0;
  color: var(--text);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  font-weight: 400;
  font-size: 16px;
}

.faq-q svg {
  width: 18px;
  height: 18px;
  transition: transform .15s ease;
  opacity: .9;
}

.faq-item.open .faq-q svg {
  transform: rotate(180deg)
}

.faq-a {
  padding: 0 16px 0px;
  color: rgba(246, 246, 247, .85);
  line-height: 1.65;
  display: none;
  font-weight: 400;
  font-size: 16px;
}

.faq-item.open .faq-a {
  display: block
}

.faq-sep {
  display: none;
  height: 1px;
  background: rgba(255, 255, 255, .10);
  margin: 0 16px 0px;
}

.faq-item.open .faq-sep {
  display: block
}

/* Discord CTA */
.discord-cta {
  border: 1px solid rgba(255, 255, 255, .10);
  background: var(--surface);
  border-radius: var(--radius);
  padding: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

/* FOOTER (centré + équilibré + hover ammonite uniquement ici) */
.footer {
  padding: 48px 0;
  background: var(--bg2);
  border-top: 1px solid rgba(255, 255, 255, .08);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 26px;
  align-items: start;
  justify-items: center;
  /* centre les colonnes */
  text-align: left;
  /* centre les contenus */
}

.footer a {
  color: rgba(246, 246, 247, .80);
  font-weight: 400;
}

.footer a:hover {
  color: rgba(214, 162, 75, .92);
  /* ammonite moyen clair */
}

.footer .brand {
  justify-content: left;
}

.footer .grid,
.footer p,
.mini-title,
.footer a {
  text-align: left;
}

/* Responsive */
@media (max-width: 980px) {
  .hero-grid {
    grid-template-columns: 1fr
  }

  .packs-wrap {
    grid-template-columns: 1fr
  }

  .packs-grid {
    grid-template-columns: 1fr
  }

  .dashboard-grid {
    grid-template-columns: 1fr
  }

  .footer-grid {
    grid-template-columns: 1fr
  }
}

/* Par défaut (desktop) */
.burger {
  display: none;
}

/* À partir de 780px et moins */
@media (max-width: 780px) {
  .nav-links-wrap {
    display: none;
  }

  .nav-actions a {
    display: none;
    /* cache Dashboard + Boutique */
  }

  .burger {
    display: inline-flex;
  }
}



@media (max-width: 720px) {

  /* En mobile: on cache les liens desktop et on montre burger + menu mobile */
  .nav-links-wrap {
    display: none
  }

  .burger {
    display: inline-flex !important
  }

  .discord-cta {
    flex-direction: column;
    align-items: flex-start;
    text-align: left
  }

  .footer-grid {
    text-align: left;
    justify-items: start
  }

  .footer .brand {
    justify-content: flex-start
  }
}

/* OFFERS PAGE */
.filterbar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 18px;
  margin-bottom: 22px;
}

.filterbtn {
  background: rgba(255, 255, 255, .04);
}

.filterbtn[aria-pressed="true"] {
  border-color: rgba(214, 162, 75, .70);
  color: rgba(214, 162, 75, .95);
  background: rgba(214, 162, 75, .10);
}

.offers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.offer-card {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.offer-head {
  padding: 16px 16px 10px;
}

.offer-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Real icons as images (you will replace files later) */
.game-icon {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, .10);
  background: rgba(255, 255, 255, .06);
}

.offer-title h3 {
  margin: 0;
  font-weight: 850;
}

.offer-sub {
  margin: 2px 0 0;
  font-size: 13px;
  color: rgba(246, 246, 247, .78);
}

.offer-cover {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-top: 1px solid rgba(255, 255, 255, .08);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.offer-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  /* prend toute la hauteur dispo dans la card */
  padding-bottom: 0;
  /* si besoin */
}

.offer-desc {
  padding: 14px 16px 0;
  margin: 0;
  flex: 1;
  color: rgba(246, 246, 247, .80);
  line-height: 1.6;
  font-weight: 400;
}

/* TECH SPECS -> small glassy blocks with different outlines */
.offer-specs {
  margin-top: auto;
  padding: 14px 16px 14px;
  display: grid;
  gap: 10px;
}

.offer-specs .spec {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* value left / label right */
  gap: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .10);
  backdrop-filter: blur(10px);
}

.offer-specs .spec-value {
  color: rgba(246, 246, 247, .88);
  font-size: 14px;
  font-weight: 400;
}

.offer-specs .spec-label {
  color: rgba(246, 246, 247, .70);
  font-size: 12px;
  letter-spacing: .2px;
  text-transform: uppercase;
  font-weight: 500;
}

.offer-specs .spec-cpu {
  border-color: rgba(214, 162, 75, .22);
}

.offer-specs .spec-ram {
  border-color: rgba(214, 162, 75, .22);
}

.offer-specs .spec-storage {
  border-color: rgba(214, 162, 75, .22);
}

.offer-bottom {
  margin-top: auto;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid rgba(255, 255, 255, .08);
}

.offer-price {
  font-size: 18px;
  font-weight: 500;
  /* not bold */
  color: var(--accent);
  white-space: nowrap;
}

/* Responsive */
@media (max-width: 980px) {
  .hero-grid {
    grid-template-columns: 1fr
  }

  .packs-wrap {
    grid-template-columns: 1fr
  }

  .packs-grid {
    grid-template-columns: 1fr
  }

  .dashboard-grid {
    grid-template-columns: 1fr
  }

  .offers-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-grid {
    grid-template-columns: 1fr
  }
}

/* Mobile breakpoint requested */
@media (max-width: 770px) {
  .nav-links-wrap {
    display: none
  }

  .nav-actions a {
    display: none
  }

  .burger {
    display: inline-flex
  }

  .discord-cta {
    flex-direction: column;
    align-items: flex-start;
    text-align: left
  }

  .footer-grid {
    justify-items: start
  }

  .footer .brand {
    justify-content: flex-start
  }

  .footer .mini-title {
    text-align: left
  }
}

@media (max-width: 720px) {
  .offers-grid {
    grid-template-columns: 1fr
  }
}

/* =========================
   Contact
   ========================= */

.contact-grid {
  margin-top: 22px;
  display: grid;
  grid-template-columns: 1fr;
}

.contact-form {
  display: grid;
  gap: 12px;
}

/* Champs */

.field {
  display: grid;
  gap: 6px;
}

.field label {
  font-size: 13px;
  color: rgba(246, 246, 247, 0.76);
  font-weight: 500;
}

/* Message d’erreur (invisible par défaut) */
.field .error {
  display: none;
  margin: 0 0 2px;
  font-size: 12.5px;
  font-weight: 500;
  color: rgba(220, 80, 80, 0.9);
}

.field.is-error .error {
  display: block;
}

/* Inputs */

.field input,
.field textarea {
  width: 100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  outline: none;
  font: inherit;
  transition: border-color .15s ease, background .15s ease;
}

.field input:focus,
.field textarea:focus {
  border-color: rgba(214, 162, 75, 0.35);
  background: rgba(255, 255, 255, 0.05);
}

/* Erreur */

.field.is-error input,
.field.is-error textarea {
  border-color: rgba(220, 80, 80, 0.75);
  box-shadow: 0 0 0 1px rgba(220, 80, 80, 0.25);
  background: rgba(255, 255, 255, 0.04);
}

/* OK (discret) */

.field.is-ok input,
.field.is-ok textarea {
  border-color: rgba(90, 255, 170, 0.22);
}

/* Consentement */

.consent {
  margin-top: 10px;
}

/* Actions */

.form-actions {
  margin-top: 6px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Honeypot */

.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* =========================
   Status message
   ========================= */

.contact-status {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(246, 246, 247, 0.92);
}

.contact-status.ok {
  border-color: rgba(90, 255, 170, 0.22);
}

.contact-status.err {
  border-color: rgba(220, 80, 80, 0.22);
}

/* Désactiver le fond blanc de l'autofill */
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--bg-input) inset !important;
  -webkit-text-fill-color: var(--text) !important;
  caret-color: var(--text);
  transition: background-color 9999s ease-in-out 0s;
}