/* ===========================================================================
   MaPièce Auto — page « Crédits photos » (credits.html).

   Jetons : vitrine-tokens.css (chargée avant). Thème clair, aucune couleur,
   aucun espacement ni rayon écrits en dur. `style.css` n'est PAS chargée par
   cette page statique : la base typographique est reposée ici.

   Contrastes (jetons mesurés dans vitrine-tokens.css) :
     liens --color-accent-text sur --color-surface      6,8:1
     texte --color-muted       sur --color-base         5,8:1
     texte --color-text        sur --color-accent-soft  > 14:1
   =========================================================================== */

/* Sans `style.css`, rien ne pose `border-box` : `.shell` (largeur 100 % +
   rembourrage) déborderait alors de 2 × son rembourrage (mesuré : +32 px à 320). */
*, *::before, *::after { box-sizing: border-box; }
body.vitrine {
  margin: 0; font-family: -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: var(--text-base); line-height: 1.55;
}
body.vitrine a { color: var(--color-accent-text); text-underline-offset: .18em; }
body.vitrine a:hover { color: var(--color-text-strong); }

/* ---------------------------------------------------------------- en-tête */
.credits-entete { background: var(--color-surface); border-bottom: 1px solid var(--color-line); }
.credits-entete-grille {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-3); padding-block: var(--space-4);
}
body.vitrine .credits-logo {
  display: inline-flex; align-items: center; gap: var(--space-2);
  color: var(--color-text-strong); text-decoration: none;
}
.credits-logo-texte { font-weight: 800; font-size: var(--text-lg); letter-spacing: -.02em; }
.credits-logo-accent { color: var(--color-accent-text); }
body.vitrine .credits-retour {
  padding: var(--space-2) var(--space-4); background: var(--color-surface);
  border: 1px solid var(--color-line-strong); border-radius: var(--radius-pill);
  color: var(--color-text); font-size: var(--text-sm); font-weight: 700; text-decoration: none;
  transition: border-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
}
body.vitrine .credits-retour:hover, body.vitrine .credits-retour:focus-visible {
  border-color: var(--color-accent); color: var(--color-accent-text);
}

/* ------------------------------------------------------------ introduction */
.credits { padding-block: var(--space-section); }
.credits h1 {
  margin: var(--space-2) 0 var(--space-5); color: var(--color-text-strong);
  font-size: var(--text-display); font-weight: 800; letter-spacing: -.02em; line-height: 1.1;
}
.credits-intro { display: grid; gap: var(--space-4); max-width: 70ch; margin-bottom: var(--space-6); }
.credits-intro p { margin: 0; color: var(--color-muted); }
/* Le rappel de licence est une information juridique, pas un décor : il est
   isolé par un liseré accent et garde l'encre principale. */
.credits-intro .credits-rappel {
  padding: var(--space-4) var(--space-5); color: var(--color-text);
  background: var(--color-accent-soft); border-left: 4px solid var(--color-accent);
  border-radius: var(--radius-sm);
}

/* ------------------------------------------------------ liste des crédits */
.credits-liste { display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.credit {
  display: grid; grid-template-columns: 8.5rem 1fr; gap: var(--space-4); align-items: start;
  padding: var(--space-4); background: var(--color-surface);
  border: 1px solid var(--color-line); border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.credit-vignette {
  display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: var(--radius-sm); background: var(--color-surface-2);
}
.credit-texte { display: grid; gap: var(--space-2); min-width: 0; }
.credit-categorie {
  margin: 0; color: var(--color-accent-text); font-size: var(--text-eyebrow);
  font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
}
.credit-titre {
  margin: 0; color: var(--color-text-strong); font-weight: 700;
  line-height: 1.35; overflow-wrap: anywhere;
}
.credit-details { display: grid; gap: var(--space-1); margin: 0; font-size: var(--text-sm); }
.credit-details div { display: grid; grid-template-columns: 9.5rem 1fr; gap: var(--space-3); }
.credit-details dt { color: var(--color-muted); font-weight: 600; }
.credit-details dd { margin: 0; color: var(--color-text); overflow-wrap: anywhere; }

/* ------------------------------------------------------------ pied de page */
.credits-pied { background: var(--color-surface); border-top: 1px solid var(--color-line); }
.credits-pied-grille {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-3); padding-block: var(--space-5); font-size: var(--text-sm);
}
.credits-copyright { margin: 0; color: var(--color-muted); font-weight: 700; }

/* ------------------------------------------------------------- responsive */
@media (width >= 900px) { .credits-liste { grid-template-columns: repeat(2, 1fr); } }

/* Écran étroit : la vignette passe au-dessus du texte, chaque libellé au-dessus
   de sa valeur — aucune colonne de 9,5 rem ne doit déborder à 320 px. */
@media (width < 480px) {
  .credit { grid-template-columns: 1fr; }
  .credit-vignette { max-width: 12rem; }
  .credit-details div { grid-template-columns: 1fr; gap: 0; }
}