.subsides-detail {
  width: 100%;
  box-sizing: border-box;

  /*
   * flow-root crée un contexte de formatage de bloc : les marges du h1 —
   * 120px / 100px, posées par le thème — s'appliquent à l'intérieur de
   * l'article au lieu de le traverser. Sans ça, la marge haute du titre
   * fusionne avec celle du fil d'Ariane qui précède et se perd, alors qu'elle
   * est visible ailleurs sur le site où le titre est dans un conteneur avec
   * du padding.
   */
  display: flow-root;
}

.subsides-detail *,
.subsides-detail *::before,
.subsides-detail *::after {
  box-sizing: border-box;
}

/*
 * Pas de règle sur .subsides-detail__title : le thème habille déjà h1
 * (styles.less), y compris sa variante responsive. Une règle de classe ici
 * serait plus spécifique et écraserait ce réglage — c'est ce qui neutralisait
 * les marges du titre auparavant.
 */

/*
 * Étiquette et valeur côte à côte, la colonne d'étiquettes ne s'élargit pas.
 *
 * Le fond reprend --funige-light, la même valeur que le pied de page : la
 * palette est déclarée une seule fois dans le thème (styles.less) et exposée
 * en variables CSS. La valeur de repli ne sert que si la feuille du thème
 * n'est pas chargée.
 */
.subsides-detail__meta {
  display: grid;
  grid-template-columns: minmax(140px, max-content) 1fr;
  gap: 8px 24px;
  margin: 0 0 32px;
  padding: 20px;
  border-radius: 8px;
  background-color: var(--funige-light, #fafafa);
}

.subsides-detail__meta dt {
  margin: 0;
  font-weight: 700;
}

.subsides-detail__meta dd {
  margin: 0;
  overflow-wrap: break-word;
}

.subsides-detail__description p {
  margin: 0 0 16px;
  line-height: 1.6;
}

.subsides-detail__description p:last-child {
  margin-bottom: 0;
}

@media screen and (max-width: 640px) {
  .subsides-detail__meta {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .subsides-detail__meta dd {
    margin-bottom: 12px;
  }

  .subsides-detail__meta dd:last-child {
    margin-bottom: 0;
  }
}