/**
 * SDC Card — styles scoped.
 *
 * 3 variants (elevated/outlined/flat) × 3 positions image (top/left/none).
 * Pattern "card as link" via ::after pseudo-element transparent qui étend
 * la cible cliquable du title-link à toute la carte.
 */

  /* ===================================================================
   * BASE
   * ================================================================= */

  .previensmoi-card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--previensmoi-radius-xl);
    transition: box-shadow var(--previensmoi-motion-normal) var(--previensmoi-motion-easing),
                transform var(--previensmoi-motion-fast) var(--previensmoi-motion-easing);
  }

  .previensmoi-card__media {
    overflow: hidden;
    background-color: var(--previensmoi-color-paper-100);
  }

  .previensmoi-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 16 / 9;
    transition: transform var(--previensmoi-motion-slow) var(--previensmoi-motion-easing);
  }

  .previensmoi-card__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--previensmoi-space-3);
    padding: var(--previensmoi-space-6);
  }

  .previensmoi-card__kicker {
    align-self: flex-start;
    padding: var(--previensmoi-space-1) var(--previensmoi-space-3);
    border-radius: var(--previensmoi-radius-full);
    font-size: var(--previensmoi-fontsize-xs);
    font-weight: var(--previensmoi-fontweight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .previensmoi-card__kicker--primary {
    background-color: var(--previensmoi-color-primary-100);
    color: var(--previensmoi-color-primary-800);
  }

  .previensmoi-card__kicker--secondary {
    background-color: var(--previensmoi-color-secondary-100);
    color: var(--previensmoi-color-secondary-800);
  }

  .previensmoi-card__kicker--neutral {
    background-color: var(--previensmoi-color-paper-200);
    color: var(--previensmoi-color-ink-700);
  }

  .previensmoi-card__kicker--highlight {
    background-color: var(--previensmoi-color-highlight-100);
    color: var(--previensmoi-color-highlight-900);
  }

  .previensmoi-card__title {
    font-family: var(--previensmoi-font-title);
    font-size: var(--previensmoi-fontsize-xl);
    line-height: var(--previensmoi-lineheight-tight);
    color: var(--previensmoi-color-ink-800);
    margin: 0;
  }

  .previensmoi-card__title-link {
    color: inherit;
    text-decoration: none;
  }

  .previensmoi-card__title-link:focus-visible {
    outline: var(--previensmoi-focus-ring-width) solid var(--previensmoi-focus-ring-color);
    outline-offset: var(--previensmoi-focus-ring-offset);
    border-radius: var(--previensmoi-radius-sm);
  }

  .previensmoi-card__description {
    font-size: var(--previensmoi-fontsize-base);
    line-height: var(--previensmoi-lineheight-normal);
    color: var(--previensmoi-color-ink-600);
    margin: 0;
  }

  /* Meta — definition list display:grid pour aligner label / value. */
  .previensmoi-card__meta {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--previensmoi-space-2);
    font-size: var(--previensmoi-fontsize-sm);
    color: var(--previensmoi-color-ink-500);
  }

  .previensmoi-card__meta-row {
    display: flex;
    align-items: center;
    gap: var(--previensmoi-space-2);
  }

  .previensmoi-card__meta-label {
    font-weight: var(--previensmoi-fontweight-medium);
    color: var(--previensmoi-color-ink-600);
  }

  .previensmoi-card__meta-label::after {
    content: ' :';
  }

  .previensmoi-card__meta-value {
    margin: 0;
    color: var(--previensmoi-color-ink-700);
  }

  .previensmoi-card__meta-icon svg {
    width: 1em;
    height: 1em;
  }

  .previensmoi-card__footer {
    margin-top: auto;
    padding-top: var(--previensmoi-space-4);
  }

  /* ===================================================================
   * VARIANTS
   * ================================================================= */

  .previensmoi-card--elevated {
    background-color: var(--previensmoi-color-paper-0);
    box-shadow: var(--previensmoi-shadow-md);
  }

  .previensmoi-card--outlined {
    background-color: transparent;
    border: 1px solid var(--previensmoi-color-paper-200);
  }

  .previensmoi-card--flat {
    background-color: transparent;
  }

  /* ===================================================================
   * IMAGE POSITION
   * ================================================================= */

  .previensmoi-card--image-top {
    flex-direction: column;
  }

  .previensmoi-card--image-left {
    flex-direction: row;
  }

  .previensmoi-card--image-left .previensmoi-card__media {
    flex: 0 0 33%;
    max-width: 280px;
  }

  .previensmoi-card--image-left .previensmoi-card__media img {
    aspect-ratio: 1 / 1;
    height: 100%;
  }

  .previensmoi-card--image-none .previensmoi-card__media {
    display: none;
  }

  /* ===================================================================
   * CLICKABLE — card as link via ::after overlay (pattern Inclusive Design)
   * Cf. https://inclusive-components.design/cards/
   * ================================================================= */

  .previensmoi-card--clickable .previensmoi-card__title-link::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
  }

  .previensmoi-card--clickable {
    cursor: pointer;
  }

  .previensmoi-card--clickable:hover {
    transform: translateY(-2px);
    box-shadow: var(--previensmoi-shadow-lg);
  }

  .previensmoi-card--clickable:hover .previensmoi-card__media img {
    transform: scale(1.05);
  }

  /* Le footer doit rester cliquable independamment (Button SDC inclus
     dans le slot). On le hisse au-dessus du ::after overlay. */
  .previensmoi-card--clickable .previensmoi-card__footer {
    position: relative;
    z-index: 2;
  }

  /* ===================================================================
   * RESPONSIVE — image-left passe en stack sur mobile
   * ================================================================= */

  @media (max-width: 639px) {
    .previensmoi-card--image-left {
      flex-direction: column;
    }

    .previensmoi-card--image-left .previensmoi-card__media {
      flex-basis: auto;
      max-width: none;
    }

    .previensmoi-card--image-left .previensmoi-card__media img {
      aspect-ratio: 16 / 9;
      height: auto;
    }
  }