/* ====== Pricing – base (updated) ====== */
:root{
  --hf-primary:#203a72;
  --hf-accent:#6ea0ff;
  --hf-deep:#1f2c59;
  --hf-muted:#6a7491;
  --hf-border:#e6e9f4;
  --hf-radius:18px;                    
  --hf-card-shadow:0 10px 24px rgba(20,35,80,.06);
}

.hf-pricing{
  padding: clamp(40px,6vw,80px) 0;
  background:#f7f8ff;
}

/* grille : espaces + alignement haut identique */
.hf-price-grid{
  width: min(1200px, 92vw);
  margin-inline: auto;
  padding-inline: clamp(24px, 4vw, 40px); /* espace gauche/droite de la section */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: clamp(22px, 3.2vw, 32px);
  row-gap: clamp(22px, 3.2vw, 32px);
  align-items: start;                    /* toutes les cartes au même niveau */
}
@media (max-width:1024px){ .hf-price-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:680px){ .hf-price-grid{ grid-template-columns:1fr; } }

/* carte */
.hf-price-card{
  position: relative;
  background:#fff;
  border: 1px solid var(--hf-border);
  border-radius: var(--hf-radius);
  box-shadow: var(--hf-card-shadow);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: visible;                    /* pour que le bandeau déborde au-dessus */
  height: 100%;
}
.hf-price-card::after{
  content:"";
  position:absolute; inset:0;
  border-radius: var(--hf-radius);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.02);
  pointer-events:none;
}

/* header + icônes noires */
.hf-price-card__head{ display:flex; align-items:center; gap:10px; }
.hf-price-card__title{ font-weight:700; color:#111; }
.hf-ico{
  width:22px; height:22px; display:inline-block; background:#111;
  mask-size:contain; mask-repeat:no-repeat; mask-position:center;
  -webkit-mask-size:contain; -webkit-mask-repeat:no-repeat; -webkit-mask-position:center;
}
.hf-ico--cube{
  mask-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M12 2 3 7v10l9 5 9-5V7l-9-5Zm0 2.2 6.6 3.67L12 11.53 5.4 7.87 12 4.2Zm-7 6.5 6 3.33v6.77l-6-3.33V10.7Zm8 10.1v-6.77l6-3.33v6.77l-6 3.33Z'/></svg>");
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M12 2 3 7v10l9 5 9-5V7l-9-5Zm0 2.2 6.6 3.67L12 11.53 5.4 7.87 12 4.2Zm-7 6.5 6 3.33v6.77l-6-3.33V10.7Zm8 10.1v-6.77l6-3.33v6.77l-6 3.33Z'/></svg>");
}
.hf-ico--star{
  mask-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M12 2l2.9 6.3 6.9.6-5.3 4.5 1.6 6.7L12 16.8 5.9 20.1l1.6-6.7L2.2 8.9l6.9-.6L12 2z'/></svg>");
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M12 2l2.9 6.3 6.9.6-5.3 4.5 1.6 6.7L12 16.8 5.9 20.1l1.6-6.7L2.2 8.9l6.9-.6L12 2z'/></svg>");
}
.hf-ico--bolt{
  mask-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M13 2 3 14h7l-1 8 10-12h-7l1-8z'/></svg>");
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M13 2 3 14h7l-1 8 10-12h-7l1-8z'/></svg>");
}

/* prix / descriptif / bouton */
.hf-price-card__price{ font-size:32px; color:var(--hf-deep); line-height:1; }
.hf-price-card__desc{ color:var(--hf-muted); font-size:14px; }
.hf-price-card .hf-btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:46px; padding:0 22px; border-radius:12px; font-weight:700;
  background:var(--hf-primary); color:#fff; border:1px solid var(--hf-primary);
  transition:.18s ease; width:100%;
}
.hf-price-card .hf-btn:hover{ transform:translateY(-1px); box-shadow:0 8px 18px rgba(32,58,114,.25); }

/* features -> vrai check */
.hf-feats{ margin:6px 0 0; padding:0; display:grid; gap:12px; }
.hf-feats li{
  list-style:none; color:#1c2442; display:flex; align-items:flex-start; gap:10px;
}
.hf-feats li::before{
  content:""; flex:0 0 18px; height:18px; margin-top:2px; background:#808aa5;
  mask-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M20 6 9 17l-5-5' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  -webkit-mask-image:url(\"data:image/svg+xml;utf8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M20 6 9 17l-5-5' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>\");
  mask-size:contain; mask-repeat:no-repeat; mask-position:center;
  -webkit-mask-size:contain; -webkit-mask-repeat:no-repeat; -webkit-mask-position:center;
}
.hf-feats strong{ color:#0f1838; }

/* ====== Pack "Challenger" mis en avant ====== */
.hf-price-card--pro{
  border: 2px solid #6ea0ff !important;      /* bordure bleue visible */
  box-shadow: 0 16px 30px rgba(50,90,180,.12);
  padding-top: 22px;                           /* même padding que les autres (bandeau hors flux) */
}

/* Bandeau "Recommandé" : AU-DESSUS, pleine largeur, arrondi haut */
.hf-price-card--pro .hf-badge.hf-badge--band{
  position: absolute;
  top: -40px;                                  /* hauteur au-dessus de la carte */
  left: -2px; right: -2px;                     /* recouvre la bordure 2px */
  padding: 12px 0;
  text-align: center;
  border-radius: 18px 18px 0 0;
  background: linear-gradient(180deg,#8eb4ff,#6ea0ff);
  color:#fff; font-weight:800; font-size:15px; letter-spacing:.2px;
  box-shadow: 0 10px 20px rgba(60,100,200,.18);
  z-index: 3;
}

/* sécurité : masquer l'ancienne capsule si elle existe */
.hf-badge--pill{ display:none !important; }


@media (max-width: 680px){
  .hf-price-grid{
    grid-template-columns: 1fr;
    row-gap: 0; /* on gère l'espacement à la main */
  }

  /* reset */
  .hf-price-grid > .hf-price-card{
    margin: 0 !important;
  }

  /* espace standard entre cartes */
  .hf-price-grid > .hf-price-card + .hf-price-card{
    margin-top: 48px !important;
  }

  /* Challenger : compenser le bandeau top:-40px */
  .hf-price-grid > .hf-price-card--pro{
    margin-top: calc(48px + 40px) !important; /* 48 + 40 */
  }

  /* ➕ un peu plus d’espace juste entre pack 2 (pro) et pack 3 */
  .hf-price-grid > .hf-price-card--pro + .hf-price-card{
    margin-top: 60px !important;  /* 48 + 12px de bonus (ajuste 56/60/64 si besoin) */
  }
}