@layer components {
  .carte-plante {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--couleur-surface);
    border: var(--bordure);
    border-radius: var(--radius-m);
    height: 100%;
    overflow: hidden;
    transition: box-shadow var(--duree-normale) var(--easing),
                transform var(--duree-normale) var(--easing);

    &:hover,
    &:focus-within {
      box-shadow: var(--ombre-m);
      transform: translateY(-2px);
    }
  }

  .carte-plante__media {
    aspect-ratio: 4 / 3;

    & img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .carte-plante__corps {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    padding: var(--space-m);
  }

  .carte-plante__titre {
    font-family: var(--font-latin);
    font-size: var(--fs-l);
    font-style: italic;
  }

  .carte-plante__lien {
    color: var(--couleur-texte);
    text-decoration: none;

    /* Rend toute la carte cliquable */
    &::after {
      content: "";
      position: absolute;
      inset: 0;
    }

    &:focus-visible {
      outline: none;
    }
  }

  .carte-plante:has(.carte-plante__lien:focus-visible) {
    outline: 2px solid var(--couleur-focus);
    outline-offset: 2px;
  }

  .carte-plante__nom-commun {
    color: var(--couleur-texte-doux);
    font-size: var(--fs-s);
  }

  .carte-plante__meta {
    margin-block-start: var(--space-xs);
    font-size: var(--fs-s);
  }

  @media (prefers-reduced-motion: reduce) {
    .carte-plante {
      transition: none;

      &:hover,
      &:focus-within {
        transform: none;
      }
    }
  }
}