/* ===== Pills “checks” (dégradé léger) ===== */
:root{
  --pill-check:#32b744;        /* icône check */
  --pill-text:#2d0068;         /* texte */
  --pill-shadow:0 4px 12px rgba(32,72,129,.06);
  --pill-radius:16px;
}

.hf-pills{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin:0;
  padding:0;
  list-style:none !important;
}
.hf-pills > li,
.hf-pill{ list-style:none !important; }
.hf-pills li::marker{ content:"" !important; }
.hf-pills li::before{ content:none !important; display:none !important; }

/* pill */
.hf-pill{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 16px;
  border-radius: var(--pill-radius);

  /* Dégradé très doux */
  background: linear-gradient(
    90deg,
    #ffffff 0%,
    rgba(12,161,225,0.15) 40%,
    rgba(35,73,129,0.25) 100%
  );

  /* plus de bordure noire */
  border:none;
  box-shadow: var(--pill-shadow);
  min-height:56px;
}

/* check */
.hf-pill__check{
  flex:0 0 26px;
  width:26px; height:26px;
  border-radius:999px;
  background:#eaf8ef;
  border:1px solid #cfead7;
  display:grid; place-items:center;
}
.hf-pill__check svg{
  width:16px; height:16px; fill:var(--pill-check);
}

/* texte */
.hf-pill__text{
  color: var(--pill-text);
  font-weight:700;
  line-height:1.35;
}

@media (max-width:480px){
  .hf-pill{ padding:10px 14px; min-height:50px; }
  .hf-pill__text{ font-weight:600; }
}




/* ===== Section 2 : largeur 75% seulement ===== */
.hf-pills--s2{
  width:75%;
  max-width:75%;
  flex:0 0 75%;
  box-sizing:border-box;
}
@media (max-width:1024px){
  .hf-pills--s2{ width:100%; max-width:100%; flex:0 0 100%; }
}

/* ===== Check visible en toutes circonstances ===== */

/* 1) Si l’SVG est présent, on force le remplissage */
.hf-pill__check svg,
.hf-pill__check svg path{
  display:block;
  width:16px; height:16px;
  fill: var(--pill-check) !important;
  stroke: none !important;
}

/* 2) Si l’éditeur a supprimé le <path>, on dessine un check en CSS */
.hf-pill__check{
  position: relative;               /* nécessaire pour le ::after */
}
.hf-pill__check::after{
  content:"";
  position:absolute;
  /* ajuster au besoin selon ton cercle 26x26 */
  left:7px; top:8px;
  width:10px; height:6px;
  border-left:3px solid var(--pill-check);
  border-bottom:3px solid var(--pill-check);
  transform: rotate(-45deg);
  box-sizing: border-box;
}