/**
 * fond — ambiance de couleur posée derrière un groupe de composants (prop
 * `ambiance`). Le fond et le texte vont ensemble : la couleur du texte est
 * déduite du fond, jamais choisie à part.
 *
 *   papier       aucun aplat, texte du thème
 *   papier-gris  --ffc-fond-doux    texte --ffc-texte
 *   encre        --ffc-fond-invert  texte --ffc-texte-invert
 *   bandeau      --ffc-accent       texte --ffc-texte-invert
 *
 * Liens, boutons et composants de texte sur ces fonds sont repris par le
 * thème, qui connaît leurs couleurs.
 */
.comp--fond {
  padding: var(--ffc-espace-bloc, 3rem) var(--ffc-gouttiere, 1.5rem);
}

/* Le dernier enfant referme sa marge : elle doublerait le blanc du bas. */
.comp--fond > :last-child {
  margin-block-end: 0;
}

.comp--fond--papier-gris {
  background-color: var(--ffc-fond-doux, #f1f1ef);
  color: var(--ffc-texte, #1c1a16);
}

.comp--fond--encre {
  background-color: var(--ffc-fond-invert, #1c1a16);
  color: var(--ffc-texte-invert, #fcfcfb);
}

.comp--fond--bandeau {
  background-color: var(--ffc-accent, #2c6f7a);
  color: var(--ffc-texte-invert, #fcfcfb);
}