/**
 * separateur — filet horizontal entre deux composants (props `couleur` et
 * `epaisseur`).
 *
 * Couleur et épaisseur passent par `--separateur-couleur` et
 * `--separateur-epaisseur`, posées par les modificateurs : un thème qui
 * redéclare le trait de `.comp--separateur` les reprend sans avoir à connaître
 * chaque variante.
 */

.comp--separateur {
  border-bottom: var(--separateur-epaisseur, 1px) solid var(--separateur-couleur, var(--ffc-filet, rgba(28, 26, 22, 0.14)));
  margin-block: var(--ffc-espace-bloc, 1.5rem);
}

.separateur--2px {
  --separateur-epaisseur: 2px;
}

.separateur--encre {
  --separateur-couleur: var(--ffc-texte-fort, #1c1a16);
}

.separateur--accent {
  --separateur-couleur: var(--ffc-accent, #2c6f7a);
}

.separateur--papier {
  --separateur-couleur: var(--ffc-texte-invert, #fcfcfb);
}