/* felome-variants.css
   Styles stand-alone pour le module "Encyclopédie des variants"
   Aucune dépendance à felome-rapports.css
*/

/* Reset léger scoppé au module
   ------------------------------------------------------------------ */

.felome-variants-root,
.felome-variants-root * {
  box-sizing: border-box;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
}

/* Conteneur principal
   ------------------------------------------------------------------ */

.felome-variants-root {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1rem 1rem 2rem;
}

/* Bloc parent : recherche + résultat -> en colonne
   ------------------------------------------------------------------ */

#felome-variants-block {
  display: flex;
  flex-direction: column;
  gap: 1rem; /* espace entre la tuile de recherche et la tuile de résultat */
}

/* Tuiles génériques
   ------------------------------------------------------------------ */

.felome-tile {
  background: #ffffff;
  border-radius: 14px;
  padding: 1rem 1.1rem;
  box-shadow: 0 1px 8px rgba(15, 23, 42, 0.06);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.felome-tile h2 {
  margin: 0 0 0.4rem;
  font-size: 1.05rem;
  font-weight: 600;
}

.felome-tile p {
  margin: 0.1rem 0;
  font-size: 0.92rem;
  line-height: 1.4;
}

/* Tuile de recherche
   ------------------------------------------------------------------ */

.felome-variants-header {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.felome-variants-header label {
  font-size: 0.9rem;
  font-weight: 600;
  flex: 1 1 100%;
}

/* Input texte + liste déroulante */

.felome-variants-search-input {
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  border: 1px solid #d0d5dd;
  font-size: 0.95rem;
  flex: 1 1 45%;
  min-width: 180px;
}

/* Bouton de recherche */

.felome-variants-search-button {
  padding: 0.5rem 0.9rem;
  border-radius: 6px;
  border: none;
  background: #111827;
  color: #ffffff;
  font-size: 0.9rem;
  cursor: pointer;
  flex: 0 0 auto;
}

.felome-variants-search-button:hover {
  opacity: 0.9;
}

/* Message d’info (aucun résultat, aide, etc.) */

.felome-variants-message {
  margin-top: 0.75rem;
  font-size: 0.9rem;
  color: #4b5563;
}

/* Tuile de résultat : texte spécifique
   ------------------------------------------------------------------ */

.felome-variant-presentation {
  margin-top: 0.2rem;
  margin-bottom: 0.6rem;
  font-size: 0.93rem;
}

.felome-variant-subsection-title {
  margin-top: 0.8rem;
  margin-bottom: 0.3rem;
  font-size: 0.95rem;
  font-weight: 600;
}

.felome-variant-note {
  margin-top: 0.4rem;
  font-size: 0.9rem;
  font-style: italic;
  color: #4b5563;
}

.felome-variant-selfcheck {
  margin-top: 0.4rem;
  font-size: 0.9rem;
}

/* Tableaux (variants + OMIA)
   ------------------------------------------------------------------ */

.felome-variant-table,
.felome-omia-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.6rem;
  font-size: 0.9rem;
}

.felome-variant-table th,
.felome-variant-table td,
.felome-omia-table th,
.felome-omia-table td {
  padding: 0.35rem 0.4rem;
  border-bottom: 1px solid #edf0f5;
  text-align: left;
}

.felome-variant-table th,
.felome-omia-table th {
  font-weight: 600;
  background: #f9fafb;
}

/* Résultat : la tuile est injectée, on ne fait que fixer la largeur */
#felome-variant-result {
  width: 100%;
}

/* Desktop : petits ajustements
   ------------------------------------------------------------------ */

/* =========================================================
   Responsive mobile : empiler les champs de recherche
   ========================================================= */

@media (max-width: 600px) {
  .felome-variants-header {
    flex-direction: column;
    align-items: stretch;
  }

  .felome-variants-header label {
    flex: 0 0 auto;
  }

  /* Input texte + select prennent toute la largeur */
  .felome-variants-search-input {
    flex: 1 1 100%;
    width: 100%;
  }

  /* Bouton pleine largeur sur mobile (plus confortable) */
  .felome-variants-search-button {
    width: 100%;
    margin-top: 0.3rem;
  }
}

/* Wrapper pour tableaux : évite que la page déborde sur mobile */
.felome-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; /* inertie iOS */
  border-radius: 10px;
}

/* Évite que le tableau se compacte trop */
.felome-variant-table,
.felome-omia-table {
  min-width: 720px; /* ajuste si besoin */
}

/* Mobile : optimise un peu la lisibilité */
@media (max-width: 600px) {
  .felome-variant-table,
  .felome-omia-table {
    min-width: 640px; /* un peu moins large en mobile */
    font-size: 0.88rem;
  }

  .felome-variant-table th,
  .felome-variant-table td,
  .felome-omia-table th,
  .felome-omia-table td {
    padding: 0.3rem 0.35rem;
    vertical-align: top;
  }

  /* Colonnes qui doivent rester compactes */
  .felome-variant-table td:nth-child(2),
  .felome-variant-table td:nth-child(3) {
    white-space: nowrap; /* Gène, Variant */
  }
}

/* Hint scroll (facultatif, discret) */
.felome-table-hint {
  margin-top: 0.35rem;
  font-size: 0.85rem;
  color: #6b7280;
}

.felome-variant-presentation p {
  margin: 0 0 0.75rem 0;
}

.felome-variant-list {
  margin: 0.25rem 0 0.75rem 1.25rem;
  padding: 0;
}

.felome-variant-list li {
  margin: 0.35rem 0;
}