/* ======================================================
   OBSYNIAVERSE — INDEX.CSS
   STYLE SIMPLE / LECTURE / WEBTOON
   ADAPTÉ AU index.php ACTUEL
   ====================================================== */

body{
  margin:0;
  background:#0b0714;
  color:#fff;
  font-family:Arial, Helvetica, sans-serif;
}

/* ===== LAYOUT ===== */
.layout{
  max-width:1400px;
  margin:0 auto;
  display:flex;
  gap:30px;
  padding:20px;
}

.content{
  flex:1;
  min-width:0;
}

.sidebar{
  width:260px;
}

/* ===== TITRES ===== */
.content h2{
  margin:30px 0 15px;
  font-size:20px;
  font-weight:bold;
}

/* ===== GRID (CŒUR DU PROBLÈME) ===== */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(160px, 1fr));
  gap:20px;
}

/* ===== CARD ===== */
.card{
  background:none;
}

.card img{
  width:100%;
  display:block;
  border-radius:4px;
}

/* ===== FOOTER CARD ===== */
.card-footer{
  margin-top:6px;
}

.card-title{
  font-size:14px;
  font-weight:bold;
  line-height:1.3;
  margin:4px 0;
}

/* ===== BADGES ===== */
.badges-line{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  margin-bottom:4px;
}

.badge{
  font-size:11px;
  padding:2px 6px;
  border-radius:3px;
  background:#1a142b;
  color:#ccc;
}

.badge.new{ color:#7a4dff }
.badge.adult{ color:#ff5c8a }
.badge.trad{ color:#4dd3ff }
.badge.fav{ color:#ffd369 }

/* ===== RATING ===== */
.rating{
  font-size:12px;
  color:#cfcfcf;
  margin-top:2px;
}

/* ===== READ BAR ===== */
.read-bar{
  height:4px;
  background:#1a142b;
  border-radius:2px;
  overflow:hidden;
  margin:6px 0;
}

.read-bar span{
  display:block;
  height:100%;
  background:#7a4dff;
}

/* ===== SIDEBAR ===== */
.sidebar h3{
  margin:10px 0 15px;
  font-size:16px;
}

.popular{
  display:flex;
  gap:10px;
  margin-bottom:14px;
  text-decoration:none;
  color:inherit;
}

.popular img{
  width:56px;
  border-radius:3px;
}

.popular .title{
  font-size:13px;
  font-weight:bold;
}

.popular .views{
  font-size:11px;
  color:#aaa;
}

/* ===== LIENS ===== */
a{
  text-decoration:none;
  color:inherit;
}

/* ===== MOBILE ===== */
@media (max-width:900px){
  .layout{
    flex-direction:column;
  }
  .sidebar{
    width:auto;
  }
}

@media (max-width:600px){
  .grid{
    grid-template-columns:repeat(auto-fill, minmax(130px, 1fr));
    gap:14px;
  }
}
/* ===============================
   AMÉLIORATION COVERS
   =============================== */

/* CARD IMAGE */
.card img{
  border-radius:6px;
  background:#111;
  transition:
    transform .25s ease,
    box-shadow .25s ease,
    filter .25s ease;
}

/* HOVER PRO (DISCRET) */
.card:hover img{
  transform:scale(1.03);
  box-shadow:0 10px 24px rgba(0,0,0,.45);
  filter:brightness(1.05) contrast(1.05);
}

/* NETTETÉ + UNIFORMITÉ */
.card img{
  aspect-ratio:2 / 3;
  object-fit:cover;
}

/* BADGES SUR IMAGE (MIEUX POSÉS) */
.badges-line{
  margin-top:6px;
}

.badge{
  background:#1a142b;
  border:1px solid rgba(255,255,255,.08);
}

/* TITRE MIEUX LISIBLE */
.card-title{
  margin-top:6px;
  font-size:14px;
  line-height:1.35;
}

/* RATING PLUS PROPRE */
.rating{
  display:flex;
  align-items:center;
  gap:4px;
  font-size:12px;
  color:#d6d0ff;
}