/* Les couleurs du tableau codent les familles chimiques. */
.family-legend {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  margin: 0 0 1rem;
  padding: .75rem 1rem;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #f8fbfc;
}

.family-key {
  display: inline-flex;
  align-items: center;
  gap: .42rem;
  color: #526474;
  font-size: .75rem;
  font-weight: 700;
}

.family-key i {
  width: .8rem;
  height: .8rem;
  flex: 0 0 auto;
  border: 1px solid rgba(15, 39, 71, .16);
  border-radius: 3px;
  background: var(--family-color);
}

.periodic-table .element {
  background: var(--family-color, #e8f5f8);
  border-color: rgba(15, 39, 71, .18);
}

.periodic-table .element:hover {
  filter: saturate(1.08) brightness(.98);
}

.periodic-table .element.is-selected {
  outline: 3px solid var(--blue);
  outline-offset: 1px;
  box-shadow: 0 0 0 5px rgba(24, 167, 200, .2);
}

.series-label {
  align-self: center;
  padding-right: .45rem;
  color: #415565;
  font-size: .72rem;
  font-weight: 800;
  text-align: right;
}

.lanthanide-label {
  grid-row: 8;
  grid-column: 1 / span 3;
}

.actinide-label {
  grid-row: 9;
  grid-column: 1 / span 3;
}

@media (max-width: 700px) {
  .family-legend {
    gap: .45rem .75rem;
    padding: .65rem .75rem;
  }

  .family-key {
    font-size: .7rem;
  }
}