/* ABLOGUI — widget « Bandeau à cercles » : engagement, cercles concentriques aux couleurs du logo (d'après L'Arche) */
.bc-section { position: relative; overflow: hidden; background: var(--_fond, var(--ab-vert-nuit)); color: #fff; }
.bc-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; min-height: clamp(460px, 56vw, 600px); }
.bc-texte { position: relative; z-index: 1; padding-block: var(--ab-section); }
.bc-texte h2 { color: #fff; max-width: 18ch; }
.bc-texte p { margin: 22px 0 32px; max-width: 44ch; font-size: var(--ab-fs-l); line-height: 1.5; color: rgba(255, 255, 255, .85); }
.bc-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.bc-souligne { position: relative; white-space: nowrap; }
.bc-souligne svg { position: absolute; left: -2%; bottom: -.18em; width: 104%; height: .32em; overflow: visible; }
.bc-souligne path { fill: none; stroke: var(--ab-jaune); stroke-width: 9; stroke-linecap: round; }
.bc-cercles { position: relative; align-self: stretch; }
.bc-cercles svg { position: absolute; top: 50%; left: 8%; width: clamp(480px, 52vw, 720px); height: auto; transform: translateY(-50%); }
@media (max-width: 860px) {
  .bc-grille { grid-template-columns: 1fr; min-height: 0; }
  .bc-texte { padding-bottom: 0; }
  .bc-cercles { height: 280px; }
  .bc-cercles svg { left: 50%; top: 30px; width: 520px; transform: translateX(-50%); }
}