/* =========================================================================
   ACCUEIL — design/PageAccueil.dc.html
   Bandes, titres et cartes viennent de fiche-production.css (dépendance).
   Mobile d'abord, aux paliers du rail (768, 1280).
   ========================================================================= */

.accueil__surtitre { margin: 0 0 var(--e-2); }
.accueil__chapeau {
  margin: calc(var(--e-3) - var(--e-4)) 0 0;
  max-width: var(--l-max-texte);
  font-size: var(--t-lead);
  line-height: var(--l-texte);
  color: var(--c-ink-2);
}
.accueil__suite { margin-top: var(--e-8); }

/* --- Entrées : trois cartes sur une rangée, empilées sous 768 px --------- */
.accueil-entrees__liste {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-8) var(--gout);
}
.accueil-entree { flex: 1 1 200px; }

/* --- Prochaines représentations ------------------------------------------ */
/* Date 200 px | spectacle | lieu 260 px à 1280 ; le lieu passe sous la
   rangée à 768 ; tout empilé sous 768. */
.accueil-dates__liste { margin: var(--e-8) 0 0; padding: 0; list-style: none; }
.accueil-date {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-2) var(--e-8);
  align-items: center;
  min-height: var(--cible-min);
  padding: var(--e-4) 0;
  border-top: 1px solid var(--c-line-fort);
}
@media (min-width: 768px) {
  .accueil-date { grid-template-columns: 200px minmax(0, 1fr); }
  .accueil-date__lieu { grid-column: 1 / -1; }
}
@media (min-width: 1280px) {
  .accueil-date { grid-template-columns: 200px minmax(0, 1fr) 260px; }
  .accueil-date__lieu { grid-column: auto; }
}
.accueil-date__quand {
  font-family: var(--f-titre);
  font-size: var(--t-h3);
  line-height: var(--l-titre);
  font-variant-numeric: tabular-nums;
  color: var(--c-ink);
}
.accueil-date__quoi {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-3);
}
.accueil-date__quoi a {
  display: inline-flex;
  align-items: center;
  min-height: var(--cible-min);
  font-size: var(--t-base);
  color: var(--c-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.accueil-date__lieu { font-size: var(--t-small); color: var(--c-ink-3); }
.accueil-dates__pied {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-4) var(--e-6);
  align-items: center;
  padding-top: var(--e-6);
  border-top: 1px solid var(--c-line-fort);
}

/* --- Productions récentes : 1, 2 puis 4 vignettes par rangée ------------- */
.accueil-productions__liste {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-8) var(--gout);
  margin: var(--e-8) 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 768px)  { .accueil-productions__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .accueil-productions__liste { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* --- La maison en bref ---------------------------------------------------- */
.accueil-bref__liste {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--gout);
  margin: var(--e-8) 0 0;
}
.accueil-bref__liste > div {
  flex: 1 1 200px;
  min-width: 0;
  padding: var(--e-4) 0;
  border-top: 1px solid var(--c-line);
}
.accueil-bref__liste dt { margin: 0; }
.accueil-bref__liste dd {
  margin: var(--e-2) 0 0;
  font-family: var(--f-titre);
  font-size: var(--t-h3);
  line-height: var(--l-titre);
  font-variant-numeric: tabular-nums;
}
.accueil-bref__precision {
  margin: var(--e-2) 0 0;
  max-width: var(--l-max-texte);
  font-size: var(--t-small);
  line-height: var(--l-dense);
  color: var(--c-ink-3);
}
.accueil-bref .accueil__suite { margin-top: var(--e-6); }