/* ============================================================
   listes-common.css — OmniBota / Listes
   Palette : vert #2c3a2e, beige #f5f3ee, gris #9a9a8e
   Police  : Playfair Display (titres) + Lato (corps)
   ============================================================ */

/* ---- Layout ---- */
.liste-page { display:flex; flex-direction:column; gap:20px; }

/* ---- Onglets langues / thématiques ---- */
.liste-tabs { display:flex; gap:6px; flex-wrap:wrap; }
.liste-tab {
  font-family:'Lato',Arial,sans-serif; font-size:13px;
  padding:7px 18px; border-radius:50px;
  border:1px solid #e8e4dc; background:#ffffff;
  color:#6b6b60; text-decoration:none;
  transition:background .15s, color .15s, border-color .15s;
  white-space:nowrap;
}
.liste-tab:hover { border-color:#2c3a2e; color:#2c3a2e; text-decoration:none; }
.liste-tab.actif { background:#2c3a2e; color:#ffffff; border-color:#2c3a2e; }

/* ---- Alphabet ---- */
.alphabet { display:flex; flex-wrap:wrap; gap:4px; }
.alpha-btn {
  display:inline-block; width:28px; height:28px; line-height:28px;
  text-align:center; border-radius:6px;
  border:1px solid #e8e4dc; background:#ffffff;
  font-family:'Lato',Arial,sans-serif; font-size:12px; font-weight:600;
  color:#6b6b60; text-decoration:none;
  transition:background .15s, color .15s, border-color .15s;
}
.alpha-btn:hover { border-color:#2c3a2e; color:#2c3a2e; text-decoration:none; }
.alpha-btn.actif { background:#2c3a2e; color:#ffffff; border-color:#2c3a2e; }

/* ---- En-tête liste ---- */
.liste-header {
  display:flex; align-items:baseline;
  justify-content:space-between; flex-wrap:wrap; gap:8px;
}
.liste-title {
  font-family:'Lato',Arial,sans-serif; font-size:18px;
  font-weight:700; color:#1a1a18;
}
.liste-count {
  font-family:'Lato',Arial,sans-serif; font-size:13px; color:#9a9a8e;
}

/* ---- En-têtes colonnes ---- */
.cols-header {
  display:grid; grid-template-columns:1fr 1fr; gap:12px;
  padding:0 0 6px 0;
  border-bottom:1px solid #e8e4dc;
}
.cols-header span {
  font-family:'Lato',Arial,sans-serif; font-size:11px;
  font-weight:700; text-transform:uppercase;
  letter-spacing:.08em; color:#9a9a8e;
}

/* ---- Ligne espèce (noms avec index alphabétique) ---- */
.espece-row {
  display:grid; grid-template-columns:1fr 1fr; gap:12px;
  padding:8px 0; border-bottom:1px solid #f5f3ee;
  transition:background .1s;
}
.espece-row:hover { background:#faf8f4; }

.espece-latin {
  font-family:'Playfair Display',Georgia,serif;
  font-style:italic; font-size:13px; color:#1a1a18;
  text-decoration:none; display:block;
}
.espece-latin:hover { color:#2c3a2e; text-decoration:none; }
.espece-fr { font-family:'Lato',Arial,sans-serif; font-size:11px; color:#9a9a8e; }

.espece-syn {
  font-family:'Lato',Arial,sans-serif; font-size:12px;
  color:#9a9a8e; font-style:italic; align-self:center;
}

/* ---- Grille cartes (Medicinales, Toxiques, etc.) ---- */
.espece-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:10px;
}
.espece-card {
  background:#ffffff; border:1px solid #e8e4dc; border-radius:10px;
  padding:12px 16px;
  transition:border-color .15s, box-shadow .15s;
}
.espece-card:hover {
  border-color:#2c3a2e;
  box-shadow:0 2px 8px rgba(0,0,0,0.05);
}
.card-latin {
  font-family:'Playfair Display',Georgia,serif;
  font-style:italic; font-size:13px; color:#1a1a18;
  text-decoration:none; display:block;
}
.card-latin:hover { color:#2c3a2e; text-decoration:none; }
.card-fr { font-family:'Lato',Arial,sans-serif; font-size:11px; color:#9a9a8e; margin-top:2px; }

/* Badges */
.badge-med  { display:inline-block; font-size:9px; padding:1px 7px; border-radius:10px; margin-top:4px; font-family:'Lato',Arial,sans-serif; background:#e8f0e8; color:#2c3a2e; border:1px solid #b8d4b8; }
.badge-com  { display:inline-block; font-size:9px; padding:1px 7px; border-radius:10px; margin-top:4px; font-family:'Lato',Arial,sans-serif; background:#fff8e8; color:#7a5c00; border:1px solid #f0d88a; }
.badge-prot { display:inline-block; font-size:9px; padding:1px 7px; border-radius:10px; margin-top:4px; font-family:'Lato',Arial,sans-serif; background:#e8f0fc; color:#1a4a8a; border:1px solid #b0c8f0; }
.badge-rare { display:inline-block; font-size:9px; padding:1px 7px; border-radius:10px; margin-top:4px; font-family:'Lato',Arial,sans-serif; background:#fce8f0; color:#8a1a4a; border:1px solid #f0b0c8; }

/* Pays tabs */
.pays-tabs { display:flex; gap:6px; }
.pays-tab {
  font-family:'Lato',Arial,sans-serif; font-size:12px;
  padding:5px 14px; border-radius:50px;
  border:1px solid #e8e4dc; background:#fff;
  color:#6b6b60; text-decoration:none;
  transition:all .15s;
}
.pays-tab:hover, .pays-tab.actif {
  background:#f5f3ee; border-color:#2c3a2e;
  color:#2c3a2e; text-decoration:none;
}