/* Safety: jamais de H1 visible */
h1{ display:none !important; }

/* ===== HERO: on force la grille sur .hero (ton HTML) ===== */
.hero{
  display: grid !important;
  grid-template-columns: 1.2fr 0.8fr !important; /* gauche + large / droite + petite */
  gap: 24px !important;
  align-items: start !important;
  padding-top: 32px !important;
}

/* Si jamais une version utilise .hero-grid, on la couvre aussi */
.hero-grid{
  display:grid !important;
  grid-template-columns: 1.2fr 0.8fr !important;
  gap: 24px !important;
  align-items: start !important;
}

/* Evite les débordements */
.hero-left, .hero-right{ min-width:0 !important; }

/* ===== Badges (les “toasts” sous le titre) ===== */
.badges{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:10px !important;
}
.badge{ white-space:nowrap !important; }

/* ===== Cards “Pourquoi PickleSky ?” (les 3 blocs) ===== */
.cards{
  display:grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
}
.cards .card{
  padding: 16px !important;          /* IMPORTANT: sinon ça ressemble à des toasts */
  border-radius: 18px !important;
}
.cards .card h4{
  margin: 0 0 8px 0 !important;
  font-size: 15px !important;
}
.cards .card p{
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
}

/* ===== Live card à droite ===== */
.hero-right .live{
  width: 100% !important;
  overflow: hidden !important;
}

/* Live grid 2x2 stable */
.live-grid{
  display:grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
}

/* ===== Logo dans la carte live (on ne bouge pas le visuel) ===== */
.logo-right{
  margin-top: 14px !important;
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
}
.logo-right img{
  width: min(240px, 90%) !important;
  max-height: 240px !important;
  height:auto !important;
  object-fit: contain !important;
  display:block !important;
}

/* ===== Mobile: on veut comme TON screen (2 colonnes) ===== */
@media (max-width: 900px){
  .hero{
    grid-template-columns: 1.25fr 0.95fr !important;
    gap: 16px !important;
  }
  .hero-grid{
    grid-template-columns: 1.25fr 0.95fr !important;
    gap: 16px !important;
  }

  .logo-right img{
    width: min(220px, 90%) !important;
    max-height: 220px !important;
  }
}

/* Très petit écran: là on stack sinon illisible */
@media (max-width: 520px){
  .hero, .hero-grid{
    grid-template-columns: 1fr !important;
  }
  .cards{
    grid-template-columns: 1fr !important;
  }
}


/* 1) Live card : on lui remet le look "carte" comme ton screen */
.hero-right .live{
  background: rgba(20,30,60,0.45) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 22px !important;
  padding: 18px !important;
  box-shadow: 0 15px 40px rgba(0,0,0,0.55) !important;
  backdrop-filter: blur(10px) !important;
}

/* LIVE header align */
.live-top{
  display:flex !important;
  justify-content: space-between !important;
  align-items:center !important;
  margin-bottom: 10px !important;
}

/* Live grid 2x2 + spacing clean */
.live-grid{
  margin-top: 10px !important;
  display:grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
}
.live-box{
  padding: 12px !important;
  border-radius: 16px !important;
  background: rgba(10,14,25,0.35) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
}

/* 2) Les 3 cartes "Pourquoi" : plus grandes, vraie card, pas mini-toasts */
.cards{
  margin-top: 12px !important;
  display:grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
}
.cards .card{
  padding: 18px !important;
  border-radius: 20px !important;
}
.cards .card h4{
  font-size: 16px !important;
}
.cards .card p{
  font-size: 13px !important;
  line-height: 1.35 !important;
}

/* 3) Ratio mobile : on veut comme ton screen (gauche + large, droite compacte) */
@media (max-width: 900px){
  .hero{
    grid-template-columns: 1.35fr 0.85fr !important;
    gap: 16px !important;
  }
  .hero-grid{
    grid-template-columns: 1.35fr 0.85fr !important;
    gap: 16px !important;
  }

  /* Le texte ne doit pas s'écraser */
  .hero-left .card,
  .hero-right .live{
    min-width: 0 !important;
  }
}

/* Très petit écran : on stack (comme déjà) */
@media (max-width: 520px){
  .hero, .hero-grid{ grid-template-columns: 1fr !important; }
  .cards{ grid-template-columns: 1fr !important; }
}



/* (A) La card principale gauche (hero-left) doit être une vraie card */
.hero-left{
  background: rgba(20,30,60,0.45) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 22px !important;
  padding: 24px !important;
  box-shadow: 0 15px 40px rgba(0,0,0,0.55) !important;
  backdrop-filter: blur(10px) !important;
}

/* (B) "Pourquoi PickleSky ?" : spacing + cartes comme la ref */
.section-title{
  font-size: 22px !important;
  margin: 18px 0 14px !important;
  justify-content: flex-start !important; /* titre align gauche comme ref */
}

.cards{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

.cards .card{
  padding: 18px !important;
  border-radius: 22px !important;
  background: rgba(20,30,60,0.40) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
}

.cards .card h4{
  font-size: 16px !important;
  margin-bottom: 8px !important;
}

.cards .card p{
  font-size: 13px !important;
  line-height: 1.35 !important;
  opacity: .95 !important;
}

/* (C) Live : même profondeur visuelle que la ref */
.hero-right .live{
  padding: 20px !important;
  border-radius: 22px !important;
  background: rgba(20,30,60,0.45) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: 0 15px 40px rgba(0,0,0,0.55) !important;
  backdrop-filter: blur(10px) !important;
}

/* Logo live : on ne change pas l'image, juste marges/limites */
.hero-right .live-logo{
  margin-top: 14px !important;
  display:flex !important;
  justify-content:center !important;
}
.hero-right .live-logo img{
  width: min(320px, 92%) !important;
  height: auto !important;
  max-height: 320px !important;
  object-fit: contain !important;
}

/* Mobile: ratio proche ref */
@media (max-width: 900px){
  .hero, .hero-grid{
    grid-template-columns: 1.25fr 0.75fr !important;
    gap: 16px !important;
  }
  .hero-left, .hero-right{ min-width: 0 !important; }
}

/* Petit écran: stack propre */
@media (max-width: 520px){
  .hero, .hero-grid{ grid-template-columns: 1fr !important; }
  .cards{ grid-template-columns: 1fr !important; }
}



/* 1) CTA "Copier l'IP" : plus de glow + un peu plus épais */
.pill.primary{
  box-shadow:
    0 0 0 1px rgba(46,255,106,0.35),
    0 8px 24px rgba(46,255,106,0.35) !important;
  padding: 10px 18px !important;
}
.pill.primary:hover{
  box-shadow:
    0 0 0 1px rgba(46,255,106,0.6),
    0 10px 30px rgba(46,255,106,0.55) !important;
}

/* 2) Badges (Version/Mode/Monnaie/Discord) : spacing + rendu */
  font-size: 13px !important;
  padding: 7px 14px !important;
  background: rgba(20,30,60,0.55) !important;
}
  margin-left: 6px !important;
}

/* 3) Cards "Pourquoi PickleSky" : hauteur + typos */
.cards .card{
  min-height: 130px !important;
}
.cards .card h4{
  font-weight: 600 !important;
  letter-spacing: .2px;
}
.cards .card p{
  margin-top: 6px !important;
}

/* 4) Card Live : respiration + logo bien posé */
.hero-right .live > * + *{
  margin-top: 10px !important;
}
.hero-right .live-logo{
  margin-top: 18px !important;
}


/* ===== PickleSky FINAL TOUCH : toast Copier IP ===== */

/* Bouton Copier IP */
.copy-ip,
button.copy-ip,
.pill.copy-ip{
  background: linear-gradient(135deg, #2eff6a, #b6ff4d) !important;
  color: #06210f !important;
  font-weight: 600 !important;
  border: none !important;
  box-shadow:
    0 0 0 1px rgba(46,255,106,0.45),
    0 10px 28px rgba(46,255,106,0.45) !important;
}

/* Hover */
.copy-ip:hover{
  box-shadow:
    0 0 0 1px rgba(46,255,106,0.75),
    0 14px 36px rgba(46,255,106,0.65) !important;
  transform: translateY(-1px);
}

/* Active (clic) */
.copy-ip:active{
  transform: translateY(0);
  box-shadow:
    0 0 0 1px rgba(46,255,106,0.5),
    0 6px 18px rgba(46,255,106,0.4) !important;
}



/* Cible le pill qui contient "Copier l'IP" */
.pill:has(:is(span, strong, b)):has-text("Copier l'IP"),
.pill:has-text("Copier l'IP") {
  background: linear-gradient(135deg, #2eff6a, #b6ff4d) !important;
  color: #06210f !important;
  font-weight: 600 !important;
  border: none !important;
  box-shadow:
    0 0 0 1px rgba(46,255,106,0.55),
    0 10px 28px rgba(46,255,106,0.55) !important;
}

/* Hover */
.pill:has-text("Copier l'IP"):hover {
  box-shadow:
    0 0 0 1px rgba(46,255,106,0.8),
    0 14px 36px rgba(46,255,106,0.7) !important;
  transform: translateY(-1px);
}

/* Active */
.pill:has-text("Copier l'IP"):active {
  transform: translateY(0);
  box-shadow:
    0 0 0 1px rgba(46,255,106,0.5),
    0 6px 18px rgba(46,255,106,0.4) !important;
}


/* ===== PickleSky PIXEL PERFECT — Copier IP (GREEN) ===== */
.pill.copy-ip{
  background: linear-gradient(135deg, #2eff6a, #b6ff4d) !important;
  color: #06210f !important;
  font-weight: 700 !important;
  border: none !important;
  box-shadow:
    0 0 0 1px rgba(46,255,106,0.55),
    0 10px 28px rgba(46,255,106,0.55) !important;
}

/* Hover */
.pill.copy-ip:hover{
  box-shadow:
    0 0 0 1px rgba(46,255,106,0.85),
    0 14px 36px rgba(46,255,106,0.70) !important;
  transform: translateY(-1px);
}

/* Active (clic) */
.pill.copy-ip:active{
  transform: translateY(0);
  box-shadow:
    0 0 0 1px rgba(46,255,106,0.50),
    0 6px 18px rgba(46,255,106,0.40) !important;
}


/* ===== PickleSky — FORCE GREEN Copier IP ===== */
.copy-ip{
  background: linear-gradient(135deg, #2eff6a, #b6ff4d) !important;
  color: #06210f !important;
  font-weight: 700 !important;
  border: none !important;
  box-shadow:
    0 0 0 1px rgba(46,255,106,0.55),
    0 10px 28px rgba(46,255,106,0.55) !important;
}
.copy-ip:hover{
  box-shadow:
    0 0 0 1px rgba(46,255,106,0.85),
    0 14px 36px rgba(46,255,106,0.70) !important;
  transform: translateY(-1px);
}
.copy-ip:active{
  transform: translateY(0);
  box-shadow:
    0 0 0 1px rgba(46,255,106,0.50),
    0 6px 18px rgba(46,255,106,0.40) !important;
}


/* Overkill: même si un autre CSS écrase */
.hero .card .actions .copy-ip,
.hero .copy-ip,
a.copy-ip.pill,
button.copy-ip.pill{
  background: linear-gradient(135deg, #2eff6a, #b6ff4d) !important;
  color: #06210f !important;
}


/* ===== PickleSky — COPY IP GREEN (final) ===== */
.copy-ip{
  background: linear-gradient(135deg, #2eff6a, #b6ff4d) !important;
  color: #06210f !important;
  font-weight: 700 !important;
  border: none !important;
  box-shadow:
    0 0 0 1px rgba(46,255,106,0.55),
    0 10px 28px rgba(46,255,106,0.55) !important;
}
.copy-ip:hover{
  box-shadow:
    0 0 0 1px rgba(46,255,106,0.85),
    0 14px 36px rgba(46,255,106,0.70) !important;
  transform: translateY(-1px);
}
.copy-ip:active{
  transform: translateY(0);
  box-shadow:
    0 0 0 1px rgba(46,255,106,0.50),
    0 6px 18px rgba(46,255,106,0.40) !important;
}
/* ===== end ===== */


/* ===== PickleSky — FORCE GREEN CTA #1 (Copier l'IP) ===== */
/* On vise le 1er bouton dans la zone actions du hero (pixel perfect) */
.hero .actions > a.pill:first-child,
.hero .actions > button.pill:first-child,
.hero .actions > .pill:first-child,
.hero-left .actions > a.pill:first-child,
.hero-left .actions > button.pill:first-child,
.hero-left .actions > .pill:first-child{
  background: linear-gradient(135deg, #2eff6a, #b6ff4d) !important;
  color: #06210f !important;
  font-weight: 700 !important;
  border: none !important;
  box-shadow:
    0 0 0 1px rgba(46,255,106,0.55),
    0 10px 28px rgba(46,255,106,0.55) !important;
}

.hero .actions > a.pill:first-child:hover,
.hero .actions > button.pill:first-child:hover,
.hero-left .actions > a.pill:first-child:hover,
.hero-left .actions > button.pill:first-child:hover{
  box-shadow:
    0 0 0 1px rgba(46,255,106,0.85),
    0 14px 36px rgba(46,255,106,0.70) !important;
  transform: translateY(-1px);
}

.hero .actions > a.pill:first-child:active,
.hero .actions > button.pill:first-child:active,
.hero-left .actions > a.pill:first-child:active,
.hero-left .actions > button.pill:first-child:active{
  transform: translateY(0);
  box-shadow:
    0 0 0 1px rgba(46,255,106,0.50),
    0 6px 18px rgba(46,255,106,0.40) !important;
}
/* ===== end ===== */


/* ===== PickleSky CTA: Copier l'IP (pixel perfect) ===== */
#cta-copyip{
  background: linear-gradient(135deg, #2eff6a, #b6ff4d) !important;
  color: #06210f !important;
  font-weight: 700 !important;
  border: none !important;
  box-shadow:
    0 0 0 1px rgba(46,255,106,.70),
    0 10px 28px rgba(46,255,106,.55) !important;
}
#cta-copyip:hover{
  box-shadow:
    0 0 0 1px rgba(46,255,106,.90),
    0 14px 36px rgba(46,255,106,.70) !important;
  transform: translateY(-1px);
}
#cta-copyip:active{
  transform: translateY(0);
  box-shadow:
    0 0 0 1px rgba(46,255,106,.55),
    0 6px 18px rgba(46,255,106,.40) !important;
}

/* ===== PickleSky FIX: CTA Copier IP en VERT (bouton .btn.primary) ===== */
.hero-left .cta .btn.primary{
  background: linear-gradient(135deg,#2eff6a,#b6ff4d) !important;
  color:#06210f !important;
  font-weight:800 !important;
  border: none !important;
  box-shadow:
    0 0 0 1px rgba(46,255,106,.70),
    0 10px 28px rgba(46,255,106,.55) !important;
}

.hero-left .cta .btn.primary:hover{
  box-shadow:
    0 0 0 1px rgba(46,255,106,.90),
    0 14px 36px rgba(46,255,106,.70) !important;
  transform: translateY(-1px) !important;
}

.hero-left .cta .btn.primary:active{
  transform: translateY(0) !important;
  box-shadow:
    0 0 0 1px rgba(46,255,106,.55),
    0 6px 18px rgba(46,255,106,.40) !important;
}

/* ===== PickleSky: PLAY page - hide right image card ===== */
.play-right .card img,
.play-right img,
.play-right .media,
.play-right .preview,
.play-right .thumb {
  display: none !important;
}

/* Si le bloc gardait du vide, on enlève le padding/marge */
.play-right .card:has(img),
.play-right .card:has(.media),
.play-right .card:has(.preview) {
  padding-bottom: 14px !important;
}

/* On force uniquement sur la zone hero de l'accueil */
.hero-left .badge {
  /* on écrase le style neutre */
  background: none !important;
  border: none !important;
}

/* On applique exactement le style de la pill "référence" (token) */
.hero-left .badge {
  /* copie du look "token" (héritage visuel) */
  background: linear-gradient(135deg, #2eff6a, #b6ff4d) !important;
  color: #06210f !important;
  font-weight: 800 !important;
  box-shadow:
    0 0 0 1px rgba(46,255,106,.70),
    0 10px 28px rgba(46,255,106,.55) !important;
}


.hero-left .badge{
  /* on colle le style token */
}

.hero-left .badge{
  background: var(--pill-token-bg) !important;
  color: var(--pill-token-fg) !important;
  border: var(--pill-token-border) !important;
  box-shadow: var(--pill-token-shadow) !important;
}



/* 1) RESTORE: badges ligne du haut (Version/Mode/Monnaie/Discord) */
.hero-left .badges .badge{
  display:inline-flex !important;
  align-items:center !important;
  gap:6px !important;
  padding:6px 10px !important;
  border-radius:999px !important;
  font-size:12px !important;
  line-height:1 !important;
  white-space:nowrap !important;
}

/* 2) RESTORE: pills (PickleCoin/Runbooks/Vote Party) */
.hero-left .cards .pill,
.hero-left .cards .pill.small{
  display:inline-flex !important;
  align-items:center !important;
  gap:6px !important;
  padding:6px 10px !important;
  border-radius:999px !important;
  font-size:12px !important;
  line-height:1 !important;
  white-space:nowrap !important;
}

/* 3) GREEN: uniquement les pills dans "Pourquoi PickleSky ?" (les 3 cards) */
.hero-left .cards .pill,
.hero-left .cards .pill.small{
  background: linear-gradient(135deg, #2eff6a, #b6ff4d) !important;
  color: #06210f !important;
  font-weight: 800 !important;
  border: none !important;
  box-shadow:
    0 0 0 1px rgba(46,255,106,.70),
    0 10px 28px rgba(46,255,106,.55) !important;
}


.hero-left .badges{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:8px !important;
  margin:10px 0 12px !important;
}

.hero-left .badges .badge{
  display:inline-flex !important;
  align-items:center !important;
  padding:6px 10px !important;
  border-radius:999px !important;
  font-size:12px !important;
  line-height:1 !important;
  white-space:nowrap !important;

  /* look "dark pill" (pas vert) */
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  color: rgba(255,255,255,.85) !important;
  box-shadow: none !important;
}


  background: rgba(46, 160, 67, 0.18) !important;   /* vert token soft */
  color: #7ee787 !important;                        /* texte doux */
  border: 1px solid rgba(46, 160, 67, 0.35) !important;
  box-shadow: none !important;
}

/* sécurité : jamais de glow vert sur les pills HOME */
  filter: none !important;
}


  background: rgba(46, 160, 67, 0.18) !important;
  color: #7ee787 !important;
  border: 1px solid rgba(46, 160, 67, 0.35) !important;
  box-shadow: none !important;
  filter: none !important;
}


  background: unset !important;
  color: unset !important;
  border: unset !important;
  box-shadow: unset !important;
  filter: unset !important;
}


/* ===== FIX HOME : reset UNIQUEMENT le menu du haut (pills <a>) ===== */
/* On cible par href car c’est stable et ça évite de toucher aux pills du contenu */
  background: rgba(255,255,255,0.06) !important;  /* look d’avant (pills sombres) */
  color: #d7e6ff !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow: none !important;
  filter: none !important;
}


}

/* Petites pills sous le titre + les petites pills dans les cards */
  background: rgba(46, 160, 67, 0.18) !important;  /* vert doux */
  color: #7ee787 !important;
  border: 1px solid rgba(46, 160, 67, 0.35) !important;
  box-shadow: none !important;
  filter: none !important;
}

/* Sécurité : ne jamais rendre vert le bouton "primary" du menu */
}


/* ===== HOME : only "Pourquoi PickleSky ?" small pills -> match Store token style ===== */
  background: rgba(46, 160, 67, 0.18) !important;
  color: #7ee787 !important;
  border: 1px solid rgba(46, 160, 67, 0.35) !important;
  box-shadow: none !important;
  filter: none !important;
}


/* ===== HOME : only the 3 "Pourquoi PickleSky ?" pills (h4 > span.pill.small) ===== */
  background: rgba(46, 160, 67, 0.18) !important;
  color: #7ee787 !important;
  border: 1px solid rgba(46, 160, 67, 0.35) !important;
  box-shadow: none !important;
  filter: none !important;
}


  background: unset !important;
  color: unset !important;
  border: unset !important;
  box-shadow: unset !important;
  filter: unset !important;
}


/* ===== HOME : only "Pourquoi PickleSky ?" pills (h4 > span.pill.small) ===== */
body.home h4 > span.pill.small{
  background: rgba(46, 160, 67, 0.18) !important;  /* vert doux comme boutique */
  color: #7ee787 !important;
  border: 1px solid rgba(46, 160, 67, 0.35) !important;
  box-shadow: none !important;
  filter: none !important;
}

/* ===== FIX HOME : body.home .pill:not(.token) rend le HEADER vert -> on force le HEADER en BLEU ===== */
body.home header .pill,
body.home .navbar .pill,
body.home .topbar .pill {
  background: rgba(88, 166, 255, 0.14) !important;
  color: #c9d1ff !important;
  border: 1px solid rgba(88, 166, 255, 0.35) !important;
  box-shadow: inset 0 0 0 1px rgba(88,166,255,.05) !important;
  filter: none !important;
}

body.home header .pill:hover,
body.home .navbar .pill:hover,
body.home .topbar .pill:hover {
  background: rgba(88, 166, 255, 0.20) !important;
  border-color: rgba(88, 166, 255, 0.45) !important;
}

/* Si "Jouer" est en .primary/.active, on le garde BLEU aussi (pas vert) */
body.home header .pill.primary,
body.home .navbar .pill.primary,
body.home .topbar .pill.primary,
body.home header .pill.active,
body.home .navbar .pill.active,
body.home .topbar .pill.active {
  background: rgba(88, 166, 255, 0.22) !important;
  border-color: rgba(88, 166, 255, 0.55) !important;
}
body.home .header .pill { 
  background: rgba(88, 166, 255, 0.14) !important;
  color: #c9d1ff !important;
  border: 1px solid rgba(88, 166, 255, 0.35) !important;
}

/* ===== LIVE Status badge ===== */
#mcStatus.offline{
  background: rgba(255, 80, 80, 0.18) !important;
  border: 1px solid rgba(255, 80, 80, 0.35) !important;
  color: #ffd0d0 !important;
}
#mcUpdated{
  opacity: .75;
}

/* tiny helper text */
.tiny{
  font-size: 12px;
  opacity: .75;
  margin-top: 6px;
}

/* Live players details */
.tiny {
  font-size: 12px;
  opacity: 0.75;
  margin-top: 6px;
}