/* Badge « Compte Pro vérifié » payant : fenêtre d'offre et d'achat (badge-offer.js), accueil et Réglages > Activité.
   Couleurs par les variables d'app.css : thèmes clair et sombre. Aucune animation. */
.bo-modal { gap: 14px; }
.bo-preview { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); min-width: 0; }
.bo-avatar { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--brand); color: #FFFFFF; font-weight: 700; font-size: 15px; }
.bo-who { display: flex; flex-direction: column; min-width: 0; }
.bo-who b { font-size: 16px; font-weight: 700; overflow-wrap: anywhere; }
.bo-who small { font-size: 13px; color: var(--muted); }
.bo-text { margin: 0; font-size: 14px; line-height: 1.5; color: var(--fg-2); }
.bo-places { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.bo-places li { padding: 3px 10px; border-radius: 999px; background: var(--brand-tint); color: var(--brand-strong); font-size: 12px; font-weight: 600; }
/* Deux formules côte à côte ; l'annuelle mise en avant (mois offerts). */
.bo-plans { margin: 0; padding: 0; border: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; min-width: 0; }
.bo-plans legend { padding: 0; margin-bottom: 8px; font-size: 13px; font-weight: 600; color: var(--fg-2); }
.bo-plan { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 12px 12px 12px 38px; border: 1px solid var(--field); border-radius: 14px; background: var(--card); cursor: pointer; min-width: 0; }
.bo-plan input { position: absolute; top: 14px; left: 12px; margin: 0; accent-color: var(--brand); }
.bo-plan:has(input:checked) { border-color: var(--brand); background: var(--brand-tint); }
.bo-plan:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }
.bo-plan.is-best { border-width: 2px; padding: 11px 11px 11px 37px; }
.bo-plan.is-best input { top: 13px; left: 11px; }
.bo-plan-head { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.bo-plan-head b { font-size: 14px; font-weight: 700; }
.bo-plan-tag { padding: 2px 8px; border-radius: 999px; background: var(--ok-soft); color: var(--ok); font-size: 11px; font-weight: 700; white-space: nowrap; }
.bo-plan-price { display: flex; flex-direction: column; gap: 0; }
.bo-plan-price b { font-size: 18px; font-weight: 800; color: var(--fg); overflow-wrap: anywhere; }
.bo-plan-ref { font-size: 13px; color: var(--muted); }
.bo-plan small { font-size: 12px; color: var(--muted); }
.bo-auto { display: flex; flex-direction: column; gap: 4px; }
.bo-auto .check-line input { accent-color: var(--brand); }
.bo-auto .hint { padding-left: 28px; }
.bo-flat { margin: 0; }
.bo-src-list { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
/* Réglages > Activité : renouvellement automatique et boutons du badge. */
.bo-renew { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bo-renew > div { min-width: 0; }
.bo-renew b { font-size: 14px; }
.bo-renew .hint { margin-top: 2px; }
.bo-fact-sub { display: block; font-size: 12px; font-weight: 400; color: var(--muted); text-align: right; }
.bo-sources { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.bo-sources legend { padding: 0; margin-bottom: 8px; font-size: 13px; font-weight: 600; color: var(--fg-2); }
.bo-source { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--field); border-radius: 12px; background: var(--card); cursor: pointer; min-width: 0; }
.bo-source:has(input:checked) { border-color: var(--brand); background: var(--brand-tint); }
.bo-source.is-off { cursor: not-allowed; opacity: .6; }
.bo-source input { flex: none; margin: 0; accent-color: var(--brand); }
.bo-src-main { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.bo-src-main b { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.bo-src-main small, .bo-src-price small { font-size: 12px; color: var(--muted); font-weight: 400; }
.bo-src-price { display: flex; flex-direction: column; align-items: flex-end; flex: none; font-size: 14px; font-weight: 600; text-align: right; }
.bo-proof { display: grid; gap: 10px; }
.bo-done { display: flex; flex-direction: column; gap: 14px; }
.bo-entry { display: flex; flex-direction: column; gap: 8px; }
.bo-entry .btns .btn { flex: 1 1 auto; }
@media (max-width: 340px) {
  .bo-plans { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .bo-modal { padding: 18px; }
  .bo-plan { padding: 10px 10px 10px 34px; }
  .bo-plan.is-best { padding: 9px 9px 9px 33px; }
  .bo-plan input { left: 10px; }
  .bo-plan.is-best input { left: 9px; }
  .bo-plan-price b { font-size: 16px; }
  .bo-source { flex-wrap: wrap; }
  .bo-src-price { flex: 1 1 100%; flex-direction: row; justify-content: space-between; padding-left: 26px; }
  .bo-modal .btns .btn { flex: 1 1 100%; }
}