/* =============================================================
   Socle · Carte (.sc-card)
   Surface autonome : __header, __body, __footer.
   Variantes : --interactive (carte cliquable), --flush (corps
   bord à bord pour listes et tableaux imbriqués).
   ============================================================= */

.sc-card {
  /* Tokens de composant : les variantes ne font que réassigner ceci. */
  --_card-bg: var(--color-bg-surface);
  --_card-border: var(--color-border);
  --_card-padding: var(--padding-l);
  /* La voix et l'échelle du titre, réassignables comme la largeur d'un
     dialogue. Par défaut c'est la linéale au cran des petits titres :
     une carte de tableau de bord nomme une section, elle n'ouvre pas
     une page, et la coupe de display ne porte que les titres de page et
     de calque.
     Une carte de produit, elle, est la page de ce produit en petit :
     son nom est le titre, et c'est le seul cas où elle les reprend. */
  --_card-title-font: var(--font-body);
  --_card-title-size: var(--text-h4-size);
  /* La description suit le fond qui la porte. Sur la surface, c'est
     l'atténué ordinaire ; dès que le fond passe en adouci, dans le pied
     ou sous l'appui, c'est le rôle qui a le cran de plus. */
  --_card-description-text: var(--color-text-muted);

  display: flex;
  flex-direction: column;
  background: var(--_card-bg);
  border: var(--border-hairline) solid var(--_card-border);
  border-radius: var(--radius-surface);
  overflow: hidden;
  color: var(--color-text);
}

/* ---- Média ----
   L'aperçu d'une carte de produit : une capture, une illustration, une
   couleur. Il se pose en tête et ne touche pas les bords : le visuel
   est encadré par la carte plutôt que collé à son arête, ce qui le fait
   lire comme un objet posé sur la surface et non comme un morceau de la
   carte elle-même. Un visuel bord à bord donne une vignette dont on ne
   sait plus si le coin arrondi lui appartient ou appartient au cadre.
   Il garde sa place même vide : une grille dont les cartes changent de
   hauteur selon qu'elles ont une image ondule, et c'est la première
   chose que l'œil attrape sur une page de catalogue.
   Son contrat : le premier enfant est le visuel, tout ce qui suit est
   posé dessus. Une étiquette de catégorie, un bouton de lecture, un
   voile. Sans cette règle, une étiquette héritait du cadrage et
   recouvrait la carte entière. */

.sc-card__media {
  /* Dimension structurelle : la proportion d'une capture d'écran. */
  --_card-media-ratio: 16 / 10;

  /* Le repère de ce qui se pose dessus. Il appartient au composant et
     non à la page : sans lui, le contrat « tout ce qui suit le premier
     enfant est posé sur le visuel » oblige chaque intégration à se
     souvenir d'ajouter un position:relative, et celle qui l'oublie voit
     son étiquette partir se caler sur la page. */
  position: relative;

  padding: var(--_card-padding);
  padding-block-end: 0;
}

.sc-card__media > :first-child {
  display: block;
  inline-size: 100%;
  aspect-ratio: var(--_card-media-ratio);
  object-fit: cover;
  background: var(--color-bg-subtle);
  border: var(--border-hairline) solid var(--color-border);
  border-radius: var(--radius-control);
}

/* Bord à bord quand la carte le demande, pour une vignette qui fait
   corps avec sa surface plutôt que d'y être posée. */
.sc-card--flush .sc-card__media {
  padding: 0;
}

.sc-card--flush .sc-card__media > :first-child {
  border-inline: 0;
  border-block-start: 0;
  border-radius: 0;
}

/* ---- En-tête ---- */

.sc-card__header {
  display: flex;
  flex-direction: column;
  gap: var(--gap-2xs);
  padding: var(--_card-padding);
}

.sc-card__title {
  margin: 0;
  font-family: var(--_card-title-font);
  font-size: var(--_card-title-size);
  font-weight: var(--text-h4-weight);
  line-height: var(--leading-snug);
  color: var(--color-text);
}

.sc-card__description {
  margin: 0;
  font-size: var(--text-caption-size);
  line-height: var(--leading-snug);
  color: var(--_card-description-text);
}

/* ---- Corps ---- */

.sc-card__body {
  flex: 1;
  padding: var(--_card-padding);
  font-size: var(--text-body-s-size);
  line-height: var(--leading-normal);
  color: var(--color-text-secondary);
}

.sc-card__body > :first-child {
  margin-block-start: 0;
}

.sc-card__body > :last-child {
  margin-block-end: 0;
}

/* Après un en-tête, le corps ne double pas la respiration. */
.sc-card__header + .sc-card__body {
  padding-block-start: 0;
}

/* ---- Pied ---- */

.sc-card__footer {
  --_card-description-text: var(--color-text-muted);

  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--gap-s);
  padding: var(--padding-m) var(--_card-padding);
  border-block-start: var(--border-hairline) solid var(--color-border);
  background: var(--color-bg-subtle);
}

/* ---- Carte cliquable ---- */

.sc-card--interactive {
  cursor: pointer;
  text-decoration: none;
  transition:
    background-color var(--motion-fast),
    border-color var(--motion-fast),
    box-shadow var(--motion-fast);
}

/* Le survol tient au filet, et à lui seul : la mise à plat a vidé
   --elevation-raised de sa substance, et le cran --color-border-strong
   est trop court pour se voir à côté du repos. Les quatre rôles de
   bordure existaient déjà pour dire cette échelle, et deux d'entre eux
   se nomment justement « survolé » et « enfoncé ». */
.sc-card--interactive:hover:not([data-disabled]),
.sc-card--interactive[data-state="hover"] {
  --_card-border: var(--color-border-hover);
}

/* Enfoncée : la surface s'assombrit et le filet passe au cran du
   dessus, sans quoi appuyer affaiblirait la bordure que le survol vient
   de renforcer. La description suit ce fond, sinon elle passe sous le
   seuil le temps de l'appui. */
.sc-card--interactive:active:not([data-disabled]),
.sc-card--interactive[data-state="active"] {
  --_card-bg: var(--color-bg-subtle);
  --_card-border: var(--color-border-active);
  --_card-description-text: var(--color-text-muted);
}

/* Simulation du focus clavier pour la doc (le vrai focus passe
   par :focus-visible dans base.css). */
.sc-card--interactive[data-state="focus"] {
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.sc-card--interactive[data-disabled],
.sc-card--interactive[aria-disabled="true"] {
  opacity: var(--opacity-disabled);
  pointer-events: none;
}

/* ---- Corps bord à bord ----
   Placé après la règle header + body pour la neutraliser. */

.sc-card--flush .sc-card__body {
  padding: 0;
}