@layer components {
  .container {
    padding-inline: round(5vw, var(--s));
  }

  .section-header {
    display: flex;
    align-items: baseline;
    gap: 1rem;
  }

  .section-line {
    flex: 1;
    height: var(--stroke-sm);
    background: var(--ink);
  }

  .btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 0.8em 1.5em;

    font-weight: 600;
    font-size: var(--text-sm);
    white-space: nowrap;

    border: var(--stroke-xs) solid var(--ink);

    &.btn-primary {
      background-color: var(--ink);
      color: var(--paper);
    }
  }

  .underline-on-hover {
    text-decoration: none;
    position: relative;

    &::after {
      content: '';
      position: absolute;
      inset-inline: 0;
      bottom: 0;

      background-color: currentColor;
      height: var(--underline-thickness, var(--stroke-xs));
      transform: scaleX(0);
      transform-origin: right;

      transition: transform 200ms ease;
    }

    &:hover::after {
      transform: scaleX(1);
      transform-origin: left;
    }
  }

  .recto,
  .verso {
    display: flex;
    flex-direction: column;

    & .img-wrapper {
      flex-grow: 1;
      position: relative;

      & img {
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: calc(var(--radius) - var(--padding));
        object-fit: cover;
      }

      & .placeholder {
        filter: blur(20px);
        transform: scale(1.15); /* masque le liseré du blur */
        opacity: 0.5;
        transition: opacity 400ms ease;

        &:has(+ img.loaded) {
          opacity: 0;
        }
      }

      & .real {
        transition: opacity 400ms ease;

        &:not(.loaded) {
          opacity: 0;
        }

        &.loaded {
          opacity: 1;
        }
      }
    }
  }

  .recto {
    & .content {
      height: 3lh;
    }
  }

  .verso {
    & time {
      display: inline-block;
      font-weight: 700;
    }
  }
}