/* ——— Layout sombre commun ——— */

.container { max-width: 1100px; margin: 20px auto; padding: 0 16px; }

.lecteur-container {
  max-width: 100%;
  margin: auto;
  background-color: #1F1F1F !important;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  padding: 20px;
  color:#fff;
}

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.card { background:#1F1F1F; border-radius:12px; padding:16px; box-shadow:0 4px 12px rgba(0,0,0,.25); color: #fff; }
.card h2 { margin:0 0 10px; font-size:18px; color:#60a5fa; display:flex; align-items:center; gap:8px; }

.badge { display:inline-block; background:#0b1220; color:#93c5fd; border-radius:999px; padding:3px 10px; font-size:12px; margin-left:4px; }
.muted { color:#9ca3af; }
.small { font-size:12px; display:block; margin-top:4px; }
.big { font-size:22px; margin:0; }
.mt16 { margin-top:16px; }

a { color:#FF8802; text-decoration:none; }
a:hover { color:#FF8802; text-decoration:underline; }

/* ——— Onglets header ——— */
.select-menu {
  max-width: 1100px; margin: 0 auto 16px; background: #1F1F1F; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,.25); padding: 16px;
}
.select-menu .tabs { list-style: none; margin: 0; padding: 0; display: inline-flex; gap: 30px; flex-wrap: wrap; }
.select-menu nav { text-align: center; margin-bottom: 6px; }
.tab-link { display:inline-block; padding:10px 20px; border-radius:8px; font-weight:700; background:#1F83F1; color:#fff; }
.tab-link:hover { text-decoration: underline; }
.tab-link.active { background:#0f62c0; text-decoration: underline; }
.select-menu__info { text-align: center; color: #fff; font-weight: 700; margin-top: 8px; }

/* ——— Tuiles Top10 ——— */
/* ——— TOP10: wrapper + grille ——— */
.top10-grid-wrapper {
  border: 1px solid #4a4a4a;         /* cadre extérieur */
  border-radius: 10px;
  overflow: hidden;                   /* arrondis propres */
  background: #1F1F1F;               /* fond unifié */
}

/* 3 colonnes fixes (desktop), pas d’espace pour que les traits se touchent */
.top10-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);  /* ✅ 3 colonnes */
  gap: 0;                                  /* ✅ pas d’espace entre cases */
}
/* Cases sans ombre ; traits internes par bordures droite + bas */
.top10-tile {
  background: #1F1F1F;
  padding: 12px;
  border: none;
  box-shadow: none;

  border-right: 1px solid #4a4a4a;   /* traits verticaux internes */
  border-bottom: 1px solid #4a4a4a;  /* traits horizontaux internes */
}
/* Supprimer la bordure à droite pour la 3e colonne */
.top10-tile:nth-child(2n) {
  border-right: none;
}
/* Supprimer la bordure en bas pour la 2e rangée (items 4 à 6) */
.top10-tile:nth-child(n+5) {
  border-bottom: none;
}
.top10-tile h3 { margin:0 0 8px; font-size:16px; color:#60a5fa; }
.top10-tile ol { margin:0; padding-left: 20px; }
.top10-tile li { margin:6px 0; }
.top10-tile small { color:#9ca3af; }

/* ——— Responsive ——— */
/* <= 900px : 2 colonnes, on enlève le quadrillage interne pour éviter les bordures mal alignées */
@media (max-width: 900px) {
  .top10-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .top10-grid-wrapper {
    border: 1px solid #2a2a2a;  /* on garde juste le cadre extérieur */
    border-radius: 10px;
  }
  .top10-tile {
    border: none;               /* plus de quadrillage interne en 2 colonnes */
    background: #1F1F1F;
    box-shadow: none;
  }
}

/* <= 640px : 1 colonne, cartes empilées (sans quadrillage) */
@media (max-width: 640px) {
  .top10-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* ——— Countries ——— */
.country-grid { columns:4; -webkit-columns:4; -moz-columns:4; list-style:none; padding-left:0; }
.country-grid li { margin:6px 0; text-align:left; }
.flag { width:16px; height:12px; vertical-align:text-bottom; margin-right:6px; object-fit:cover; }
.pill.code { display:inline-block; padding:2px 8px; border-radius:999px; background:#111827; margin-right:6px; }