/* ============================================================
   LE TRAK-EUR — kyberdex.css
   Styles spécifiques à la page Kyber Dex. La structure (sélecteur
   de variantes, grille de droïdes, toolbar) réutilise les classes
   déjà définies dans droidex.css — ce fichier ne contient que les
   quelques ajustements propres à cette page. Les couleurs des 3
   variantes (Vert/Bleu/Violet) sont posées en inline via --vc par
   kyberdex.js, pas besoin de règles par variante ici.
   ============================================================ */

.kyberdex-page{ max-width:1080px; }

/* --- encadré repliable : infos Kyber (coût d'activation + taux de
   couleur), même structure que le "rates-box" du Parfait (importé
   via parfait.css) mais en blanc plutôt qu'en accent/violet --- */
.kyberdex-rates-box{ margin-top:0; margin-bottom:26px; }
.kyberdex-rates-box summary:hover{ color:#ffffff; }
.kyberdex-rates-box[open] summary{ color:#ffffff; }
.kyberdex-rates-subtitle{
  margin:0 0 8px;
  font-family:var(--font-ui); font-weight:700; font-size:.8rem;
  letter-spacing:.02em;
  color:var(--text);
}

/* deux colonnes verticales (coût d'activation / taux de couleur) pour
   bien distinguer les deux sections au premier coup d'œil */
.kyberdex-rates-columns{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:0 28px;
}
.kyberdex-rates-col:first-child{
  padding-right:24px;
  border-right:1px solid var(--line);
}
.kyberdex-rates-list-single{
  grid-template-columns: 1fr;
}

@media (max-width:480px){
  .kyberdex-rates-columns{
    grid-template-columns: 1fr;
    gap:16px 0;
  }
  .kyberdex-rates-col:first-child{
    padding-right:0; padding-bottom:14px; margin-bottom:2px;
    border-right:none;
    border-bottom:1px solid var(--line);
  }
}