/* MyBledi — Design System (Direction C)
   Composants partagés, orientés conversion. Additif : ne redéfinit PAS les
   tokens existants des pages, n'introduit que de nouvelles variables/classes
   (préfixe .ds-) avec valeurs de repli pour fonctionner sur toutes les pages. */

:root {
  --ds-mint: #e8f6ef;
  --ds-gold: #c9a227;
}

/* Eyebrow / pill */
.ds-pill {
  display: inline-flex; align-items: center; gap: .45rem;
  background: var(--ds-mint); color: var(--green, #006233);
  font-weight: 700; font-size: .78rem; letter-spacing: .02em;
  padding: .4rem .9rem; border-radius: 100px;
}

/* Preuve sociale (avatars + étoiles) */
.ds-proof { display: flex; align-items: center; justify-content: center; gap: .7rem; }
.ds-proof .ds-avatars { display: flex; }
.ds-proof .ds-avatars span {
  width: 30px; height: 30px; border-radius: 50%; border: 2px solid #fff;
  margin-left: -9px; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: .7rem; font-weight: 700;
}
.ds-proof .ds-avatars span:first-child { margin-left: 0; }
.ds-proof small { font-size: .82rem; color: var(--ink-light, #4a4a4a); }
.ds-stars { color: var(--ds-gold); letter-spacing: 1px; }

/* Liste de bénéfices à coches */
.ds-ticks { list-style: none; display: flex; flex-direction: column; gap: .55rem; margin: 0; padding: 0; }
.ds-ticks li { display: flex; align-items: center; gap: .55rem; font-size: .92rem; color: var(--ink-light, #4a4a4a); }
.ds-ticks li i {
  flex: none; width: 20px; height: 20px; border-radius: 50%;
  background: var(--ds-mint); color: var(--green, #006233);
  display: flex; align-items: center; justify-content: center;
  font-style: normal; font-size: .66rem; font-weight: 800;
}

/* Section repliable (champs optionnels → moins de friction) */
.ds-collapse {
  border: 1.5px solid var(--border, rgba(0,0,0,.08)); border-radius: 12px;
  margin-bottom: 1.25rem; background: var(--cream, #faf8f4); overflow: hidden;
}
.ds-collapse > summary {
  list-style: none; cursor: pointer; padding: .85rem 1rem;
  font-weight: 600; font-size: .9rem; color: var(--green, #006233);
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
}
.ds-collapse > summary::-webkit-details-marker { display: none; }
.ds-collapse > summary::after { content: '+'; font-size: 1.15rem; line-height: 1; color: var(--ink-lighter, #8a8a8a); }
.ds-collapse[open] > summary::after { content: '\2013'; }
.ds-collapse .ds-collapse-body { padding: .2rem 1rem 1rem; }
.ds-collapse:not([open]) > .ds-collapse-body { display: none; }

/* Divider "ou" */
.ds-or { display: flex; align-items: center; gap: .8rem; color: var(--ink-lighter, #8a8a8a); font-size: .8rem; margin: 1rem 0; }
.ds-or::before, .ds-or::after { content: ''; flex: 1; height: 1px; background: var(--border, rgba(0,0,0,.1)); }