/* Carte — bloc à fond plein, rayon 20, bordure intérieure brandt/line 1 px, padding 20 mobile / 28 desktop.
   Inversion automatique : grise sur section blanche, blanche sur section grise.
   Jamais de hauteur fixe : min-height si besoin, égalisation par la grille (align-items: stretch). */

.card {
  position: relative;
  display: flex; flex-direction: column; gap: var(--space-16);
  padding: var(--card-padding);
  border-radius: var(--radius-20);
  background: var(--brandt-light);
  box-shadow: inset 0 0 0 var(--border-1) var(--brandt-line);
}
.section--light .card { background: var(--brandt-white); }
.section--white .card { background: var(--brandt-light); }
/* Modificateurs explicites (priment sur l'inversion automatique) */
.card.card--white { background: var(--brandt-white); }
.card.card--carbon { background: var(--brandt-carbon); color: var(--brandt-white); box-shadow: none; }

.card--p40 { --card-padding: var(--space-20); }
@media (min-width: 1024px) {
  .card--p40 { --card-padding: var(--space-40); }
}

.card__body { display: flex; flex-direction: column; gap: var(--space-8); }
.card__footer { margin-top: auto; }  /* CTA calé en bas, quelle que soit la longueur du texte */

/* Carte à photo (Par où commencer, Comment améliorer / produire) :
   image en fond (object-fit: cover), voile dégradé carbone 70 % → 0 derrière le texte blanc, CTA calé en bas. */
.card--photo {
  min-height: var(--min-card-photo); padding: var(--space-20); color: var(--brandt-white);
  overflow: hidden; isolation: isolate; box-shadow: none;
}
.card--photo > .card__media { position: absolute; inset: 0; z-index: -2; }
.card--photo > .card__media img { width: 100%; height: 100%; object-fit: cover; }
.card--photo::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--veil-card);
}
.card--photo .card__footer { margin-top: auto; }
@media (min-width: 1024px) {
  .card--photo { padding: var(--space-32); gap: var(--space-24); }
}

/* Ligne horizontale (icône ou pastille à gauche + texte) */
.card--row { flex-direction: row; align-items: flex-start; gap: var(--space-16); }
@media (min-width: 1024px) { .card--row { gap: var(--space-24); } }

/* Carte hero sur photo : fond brandt/carbon-muted (carbone 70 %), sans contour. Mobile p24 g16 centrée ; desktop p40 g40, 560 px. */
.card--hero {
  background: var(--brandt-carbon-muted); color: var(--brandt-white); box-shadow: none;
  padding: var(--space-24); gap: var(--space-16);
}
@media (min-width: 1024px) { .card--hero { padding: var(--space-40); gap: var(--space-40); width: var(--size-hero-card); max-width: 100%; } }