/* Quizz */
.rq{background:#17171e;border:1px solid #23232b;border-radius:16px;padding:16px;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.rq-title{margin:0 0 10px;color:#f5f7fb}
.rq-progress{height:8px;background:#111;border:1px solid #23232b;border-radius:999px;overflow:hidden;margin-bottom:12px}
.rq-progress-bar{height:100%;background:linear-gradient(135deg,#ff4d6d,#a06cd5);transition:width .25s ease}
.rq-card{background:#14141b;border:1px solid #23232b;border-radius:14px;padding:14px}
.rq-q{font-weight:700;margin:0 0 10px;color:#f5f7fb}
.rq-answers{display:grid;gap:8px}
.rq-answers button{width:100%;text-align:left;padding:10px 12px;border-radius:10px;border:1px solid #2a2a34;background:#13131a;color:#f5f7fb;cursor:pointer}
.rq-answers button:hover{border-color:#3a3a46}
.rq-answers button.correct{outline:2px solid #47d16a}
.rq-answers button.wrong{outline:2px solid #ff6666}
.rq-explain{margin-top:10px;color:#9aa0a6}
.rq-actions{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.rq-btn{padding:8px 12px;border-radius:12px;border:1px solid #2a2a34;background:linear-gradient(135deg,#ff4d6d,#a06cd5);color:#111;font-weight:700;cursor:pointer}
.rq-btn[disabled]{opacity:.6;cursor:not-allowed}
.rq-btn.ghost{background:transparent;color:#f5f7fb;border-color:#2a2a34}
.rq-score{margin-top:10px;color:#f5f7fb;font-weight:600}
.rq-score small{display:block;color:#9aa0a6;font-weight:400}

/* Horoscope */
#horoscope-romance .astro-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.5rem}
#horoscope-romance .astro-sign{padding:.55rem .7rem;border:1px solid #2a2a34;border-radius:10px;background:#13131a;color:#fff !important;cursor:pointer;font-size:13px;line-height:1.2}
#horoscope-romance .astro-sign.is-active{outline:2px solid #ff8fa3}
@media (max-width:768px){ #horoscope-romance .astro-grid{grid-template-columns:repeat(3,1fr)} }
#horoscope-romance .astro-result{margin-top:.8rem;color:#9aa0a6;background:#17171e;border:1px solid #23232b;border-radius:12px;padding:.8rem;font-size:14px;line-height:1.4}
.astro-product{margin-top:.8rem}
.astro-card{display:grid;grid-template-columns:92px 1fr;gap:.75rem;align-items:center;background:#17171e;border:1px solid #23232b;border-radius:14px;padding:.75rem}
.astro-thumb{width:92px;height:92px;border-radius:12px;background:#222;object-fit:cover}
.astro-title{margin:0 0 .25rem 0;font-weight:600;color:#fff}
.astro-price{color:#d4af37;font-weight:600;margin:.15rem 0}
.astro-actions{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.35rem}
.astro-actions a{padding:.4rem .6rem;border-radius:10px;border:1px solid #2a2a34;background:#13131a;color:#fff;text-decoration:none;font-size:14px}
.astro-actions .buy{background:linear-gradient(135deg,#ff4d6d,#a06cd5);color:#111;border-color:rgba(212,175,55,.35)}

/* Moods */
#mood-picks .mood-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.5rem}
#mood-picks .mood-chip{padding:.55rem .7rem;border:1px solid #2a2a34;border-radius:10px;background:#13131a;color:#fff !important;cursor:pointer;font-size:13px;line-height:1.2;white-space:nowrap}
#mood-picks .mood-chip.is-active{outline:2px solid #ff8fa3}
@media(max-width:768px){#mood-picks .mood-grid{grid-template-columns:repeat(3,1fr)}}
.mood-text{margin-top:1rem;color:#ff8fa3;font-size:15px;font-style:italic}
.mood-result{margin-top:1rem;display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
/* Le wrapper visible DOIT être la grille */
#mood-picks .mood-result{ display:block !important; } /* pas de grille ici */
#mood-picks .mood-group{
  /* le JS mettra display:grid; colonnes; gap en inline, mais on met un fallback */
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 16px;
}

@media (max-width: 1024px){
  #mood-picks .mood-group{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 768px){
  #mood-picks .mood-group{ grid-template-columns: 1fr; }
}

/* Cartes verticales */
#mood-picks .mood-card{
  display:flex !important;
  flex-direction:column !important;
}
#horoscope-romance .astro-thumb{
  width:230px !important;
  height:auto !important;
  max-width:100%;
  border-radius:12px;
  object-fit:cover;
  display:block;
  margin:0 auto; /* centrer si besoin */
}