/* ============================================================================
   .h-badge — pastille de preuve sociale « +10 000 médecins ».

   Remplace l'image `pix-2500med.webp` (2499px, préchargée en haute priorité pour
   un rendu à 200px) qui portait TROIS chiffres contradictoires : « +8000 » dans
   ses pixels, « +10 000 » dans son `alt`, « 2500med » dans son nom de fichier.
   Le chiffre vient désormais du HTML : il ne peut plus diverger de lui-même, et
   se corrige sans repasser par un export d'image.

   Seule reste une image : `images/avatars-medecins.webp` (les 4 avatars, extraits
   de l'ancien visuel, fond transparent) — décorative, donc `alt=""`.

   Chargé UNIQUEMENT par les pages qui affichent ce badge : `index.html` et
   `discutez-en-direct-avec-les-etablissements/`. Aucun fichier partagé touché
   (navbar.css / webflow.css / footer.css intacts) → zéro cache-bust site-wide.
   Bumper `h-badge.css?v=N` sur ces deux pages à chaque édition.

   Géométrie reprise au pixel de l'ancien rendu (mesurée sur l'image d'origine,
   ramenée à l'échelle d'affichage 200/2499) : pastille de 32px de haut, avatars
   de 82px de large débordant de 7px sur son bord gauche et dépassant de ~4px
   au-dessus, texte à 20px du bord gauche de la pastille.
   Palette : uniquement les tokens de marque (DESIGN_SYSTEM §1).
   ========================================================================== */

.h-badge {
  display: inline-flex;
  align-items: flex-end; /* avatars et pastille alignés par le bas, comme avant */
  flex: none;
  /* L'ancienne image portait ~12px de transparent en haut et en bas dans sa
     boîte de 61px. Sans ces marges le badge remonterait contre le CTA. */
  margin: 12px 0;
}

.h-badge-avatars {
  flex: none;
  width: 82px;
  height: auto;
  /* Chevauchement du bord gauche de la pastille. */
  margin-right: -7px;
  position: relative;
  z-index: 1;
}

.h-badge-pill {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  /* padding gauche élargi : le texte démarre après la zone couverte par les avatars */
  padding: 0 14px 0 20px;
  border: 1px solid #7ea8be; /* --h-air */
  border-radius: 100px;
  background: #fff;
  font-family: "Baloo 2", sans-serif;
  font-weight: 700;
  /* 12px : reproduit exactement la hauteur de chiffre de l'ancienne image
     (7,65px mesures contre 7,60px d'origine, a l'echelle d'affichage). */
  font-size: 12px;
  line-height: 1;
  color: #28536b; /* --h-charcoal */
  white-space: nowrap;
}