/* CHANGEMENTS MINIMAUX :
  1) Correction de la coquille: `ard-product .thumb` -> `.card-product .thumb`
  2) Arrière-plan: garde ton chemin avec espaces mais bien entre guillemets
  3) Déduplication du style .counter-pill (une seule définition complète)
*/

:root{
  --brand: #7c5cff;
  --brand-2: #00d4ff;
}

html, body { height: 100%; }
body {
     position: relative;
    background: #0b0b10;
    font-family: "Space Grotesk", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: #f5f5ff;
   }

/* Image de fond fixe (garde ton fichier ; idéalement renommer sans espaces) */
body::before{
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  /* Si tu gardes les espaces, laisse bien les guillemets.
     Astuce : renomme plus tard en /Images/bg.jpg pour simplifier. */
  background: url("/Images/ChatGPT Image 1 nov. 2025, 16_35_33.png") center / cover no-repeat;
  /* optionnel : assombrir
  box-shadow: inset 0 0 0 100vmax rgba(0,0,0,.25);
  */
}

/* Verre */
.glass {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(6px);
  border-radius: 16px;
}

.hero {
  position: relative;
  overflow: hidden;
  padding-top: 6rem;
  padding-bottom: 5rem;
  background:
    radial-gradient(1000px 600px at 20% 0%, rgba(124,92,255,.25), transparent 60%),
    linear-gradient(180deg, rgba(124,92,255,.08), rgba(0,0,0,0) 35%);
}

.hero-title { letter-spacing: .2px; }

/* Texte en dégradé */
.gradient-text{
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Bouton brand */
.btn-brand{
  --bs-btn-color:#fff;
  --bs-btn-bg: var(--brand);
  --bs-btn-border-color: transparent;
  --bs-btn-hover-bg: #6b4af8;
  --bs-btn-hover-border-color: transparent;
  --bs-btn-focus-shadow-rgb: 124,92,255;
}

.section{ padding: 4rem 0; }

.badge-soft{
  background: rgba(124,92,255,.15);
  color: #cfc7ff;
  border: 1px solid rgba(124,92,255,.22);
}

.icon-pill{
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
}

.card-product .price{
  font-weight: 700;
  font-size: 1.4rem;
}

/* Liens footer génériques (tes anciens styles) */
.footer a{
  color: #bfc3ff;
  text-decoration: none;
}
.footer a:hover{
  color: #fff;
  text-decoration: underline;
}

.shadow-soft { box-shadow: 0 20px 60px rgba(0,0,0,.35); }

.divider {
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
}

/* Responsive tweaks */
@media (min-width:992px){
  .hero{
    padding-top: 8rem;
    padding-bottom: 7rem;
  }
}

/* même hauteur pour toutes les images de carte
   (COQUILLE CORRIGÉE ICI) */
.card-product .thumb {
  width: 100%;
  height: 220px;      /* ajuste 200–260px selon ton design */
  object-fit: cover;
}

/* Logo navbar */
.brand-logo{
  width: 50px;
  height: 50px;
  object-fit: cover;   /* évite la déformation */
}

/* Bouton dégradé (tu l’utilises pour Discord par ex.) */
.btn-gradient{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.9rem 1.2rem; border-radius:14px; font-weight:700;
  text-decoration:none; color:#fff;
  background: linear-gradient(90deg, #7c5cff, #00d4ff);
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.btn-gradient:hover{ transform: translateY(-2px); box-shadow:0 12px 28px rgba(0,0,0,.45); opacity:.95; }
.btn-gradient:active{ transform: translateY(0); box-shadow:0 6px 18px rgba(0,0,0,.35); }

/* Pills compteur (UNE SEULE DÉFINITION COMPLÈTE) */
.counter-pill{
  display:inline-block;
  padding:.22rem .55rem;
  border-radius:999px;
  background:#fff;
  color:#111;
  font-weight:700;
  letter-spacing:.02em;
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
}

/* ===== Footer (A) Glass Bar ===== */
.site-footer.glass-footer{
  position: relative;
  margin-top: 3rem;
  background: radial-gradient(80% 200% at 10% -50%, rgba(124,92,255,.10), transparent 40%),
              radial-gradient(90% 180% at 110% 0%, rgba(0,212,255,.08), transparent 45%),
              rgba(8,10,14,.75);
  backdrop-filter: blur(8px);
  border-top: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 -8px 24px rgba(0,0,0,.3) inset;
}
.site-footer.glass-footer::before{
  content:"";
  position:absolute; left:0; right:0; top:0; height:2px;
  background: linear-gradient(90deg, #7c5cff, #00d4ff);
  opacity:.5;
}
.site-footer .container{ padding: 18px 12px; }

.footer-row{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  flex-wrap: wrap;
}
.brand-inline{ display:flex; align-items:center; gap:.55rem; color:#cfd3ff; font-weight:600; }
.brand-inline img{ display:block; }

.meta-inline{ display:flex; align-items:center; gap:.5rem; color:#93a0b8; font-size:.9rem; }
.meta-inline .dot{ width:6px; height:6px; border-radius:50%; background:#3bd671; box-shadow:0 0 8px #3bd671aa; }

.footer-nav{ display:flex; align-items:center; gap:.9rem; flex-wrap:wrap; }
.footer-nav a{
  color:#dfe2ff; text-decoration:none; opacity:.85;
  padding:.45rem .7rem; border-radius:10px;
  border:1px solid transparent;
  transition:all .15s ease;
}
.footer-nav a:hover{
  opacity:1; border-color:rgba(255,255,255,.1); background:rgba(255,255,255,.05);
}

/* Discord pill */
.footer-nav .discord-pill{
  background: linear-gradient(90deg, #5865F2, #8a96ff);
  border:none; color:#fff !important; font-weight:700;
  box-shadow: 0 6px 20px rgba(88,101,242,.35);
}
.footer-nav .discord-pill:hover{ transform: translateY(-1px); }

/* Responsive */
@media (max-width: 768px){
  .footer-row{ flex-direction:column; align-items:flex-start; }
  .footer-nav{ width:100%; gap:.5rem; }
  .footer-nav a{ padding:.5rem .65rem; }
}

/* Taille standard pour les petites icônes */
.icon-18 { width: 80px; height: 80px; object-fit: contain; display: inline-block; }


/* Mini mini vignette dans l’en-tête du modal */
.modal-thumb {
  width: 100px;       /* encore plus petit */
  height: 100px;
  object-fit: cover;
  flex-shrink: 0;
}


/*///////////////////////////////////////////////////////////////////////////*/
/*///////////////////////////////////////////////////////////////////////////*/
/* ========== HEADER / NAVBAR ========== */

/* Navbar glass globale */
.navbar.glass {
  background:
    radial-gradient(120% 250% at -10% -50%, rgba(124,92,255,.16), transparent 55%),
    radial-gradient(110% 260% at 110% -40%, rgba(0,212,255,.14), transparent 60%),
    rgba(8,10,20,.92);
  border-bottom: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 12px 40px rgba(0,0,0,.55);
}

/* Marque / logo dans la navbar */
.navbar-brand {
  padding: .2rem 0;
}

.navbar-brand .brand-logo{
  width: 70px;
  height: 70px;
  border-radius: 14px;
  object-fit: cover;
  box-shadow: 0 10px 24px rgba(0,0,0,.6);
  border: 1px solid rgba(255,255,255,.35);
}

.brand-text-main {
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 1.2rem;
  color: #f4f3ff;
}

.brand-text-sub {
  font-size: .72rem;
  color: #8f96b3;
}

/* Nom en dégradé pour le branding */
.brand-text-main .gradient {
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ========== Liens de menu ========== */

.navbar-nav > .nav-item {
  margin-left: .35rem;
  margin-right: .35rem;
}

.navbar-nav .nav-link {
  position: relative;
  font-size: .86rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 500;
  color: #c4c9f5;
  padding: .4rem .6rem;
  border-radius: 999px;
  transition: all .15s ease;
}

.navbar-nav .nav-link:hover {
  color: #ffffff;
  background: rgba(255,255,255,.04);
}

.navbar-nav .nav-link.active {
  color: #fff;
  background: linear-gradient(120deg, rgba(124,92,255,.35), rgba(0,212,255,.25));
  box-shadow: 0 8px 24px rgba(0,0,0,.55);
}

/* ========== Dropdown Compte ========== */

.navbar .dropdown-menu {
  background: rgba(12,14,24,.96);
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 18px 40px rgba(0,0,0,.7);
  padding: .4rem;
  backdrop-filter: blur(12px);
}

.navbar .dropdown-item {
  font-size: .86rem;
  border-radius: 10px;
  color: #d5dafc;
  transition: background .12s ease, color .12s ease;
}

.navbar .dropdown-item:hover,
.navbar .dropdown-item.active {
  background: linear-gradient(120deg, rgba(124,92,255,.3), rgba(0,212,255,.25));
  color: #fff;
}

/* ========== Boutons à droite : Support & Discord ========== */

/* Style commun pour les deux boutons (même pill) */
.navbar .btn-support,
.navbar .btn-discord {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .45rem 1rem;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 600;
  border: 1px solid rgba(140,150,255,.6);
  color: #e4e7ff;
  box-shadow: 0 10px 28px rgba(24,32,84,.75);
  transition: transform .15s ease,
              box-shadow .15s ease,
              opacity .15s ease,
              border-color .15s ease;
}

.navbar .btn-support i,
.navbar .btn-discord i {
  font-size: 1rem;
}

/* Hover commun */
.navbar .btn-support:hover,
.navbar .btn-discord:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 34px rgba(18,24,72,.9);
  opacity: .98;
  color: #ffffff;
}

/* Discord : dégradé bleu/violet */
.navbar .btn-discord {
  background:
    radial-gradient(circle at 0 0, rgba(88,101,242,.7), transparent 55%),
    linear-gradient(135deg, #5865F2, #7c5cff);
}

/* Support : même style, léger dégradé variante (ou mets le même si tu veux 100% identique) */
.navbar .btn-support {
  position: relative; /* pour le badge */
  background:
    radial-gradient(circle at 0 0, rgba(124,92,255,.7), transparent 55%),
    linear-gradient(135deg, #7c5cff, #00d4ff);
}

/* Badge messages non lus sur le bouton Support */
.navbar .btn-support .badge {
  position: absolute;
  top: -4px;
  right: -6px;
  font-size: .62rem;
  padding: .15rem .4rem;
  border-radius: 999px;
  box-shadow: 0 0 16px rgba(255,69,90,.85);
}

/* ========== Compat / ancien .nav-chat-link (si encore utilisé ailleurs) ========== */

.nav-chat-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 14px;
  background:
    radial-gradient(circle at 0 0, rgba(124,92,255,.5), transparent 55%),
    rgba(14,16,30,.98);
  box-shadow: 0 12px 30px rgba(0,0,0,.65);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
  color: #f7f4ff;
}

.nav-chat-link i {
  font-size: 1.4rem;
}

.nav-chat-link:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 36px rgba(0,0,0,.75);
}

.nav-chat-link .badge {
  font-size: .62rem;
  padding: .15rem .4rem;
  box-shadow: 0 0 16px rgba(255,69,90,.85);
}

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

@media (max-width: 991.98px) {
  .navbar.glass {
    backdrop-filter: blur(10px);
  }

  .navbar-nav .nav-link {
    margin-top: .1rem;
    margin-bottom: .1rem;
    border-radius: 10px;
  }

  .navbar .btn-support,
  .navbar .btn-discord {
    width: 100%;
    justify-content: center;
    margin-top: .4rem;
  }
}