/* ============================================================
   EM Blocks — Design System Exprime.media
   Widget : Pill
   ============================================================ */


/* ------------------------------------------------------------
   Base
   ------------------------------------------------------------ */

.em-pill {
  display:       inline-flex;
  align-items:   center;
  gap:           var(--sp-2, 8px);
  border-radius: var(--radius-pill, 999px);
  font-family:   var(--em-font-mono, "JetBrains Mono", ui-monospace, monospace);
  font-weight:   600;
  letter-spacing: 0.01em;
  line-height:   1;
  white-space:   nowrap;
  background:    var(--pill-bg);
  color:         var(--pill-text);
  border-color:  var(--pill-border);
  transition:
    box-shadow var(--t-base, 120ms) var(--ease-snap, ease),
    transform  var(--t-fast, 80ms)  var(--ease-snap, ease);
}


/* ------------------------------------------------------------
   Tailles
   ------------------------------------------------------------ */

.em-pill--sm { font-size: 10px; padding: var(--sp-1, 2px)  var(--sp-3, 10px); }
.em-pill--md { font-size: 12px; padding: var(--sp-2, 6px)  var(--sp-4, 14px); }
.em-pill--lg { font-size: 14px; padding: var(--sp-3, 10px) var(--sp-5, 20px); }


/* ------------------------------------------------------------
   Modificateurs
   ------------------------------------------------------------ */

.em-pill--border {
  border: var(--bw-line, 1.5px) solid currentColor;
}

.em-pill--shadow {
  box-shadow: var(--shadow-cut-sm, 2px 2px 0 #0A0A0A);
}

.em-pill--upper {
  text-transform: uppercase;
  letter-spacing: 0.06em;
}


/* ------------------------------------------------------------
   Dot (puce)
   ------------------------------------------------------------ */

.em-pill__dot {
  display:       inline-block;
  flex-shrink:   0;
  border-radius: var(--radius-pill, 999px);
  background:    var(--pill-dot);
}

.em-pill--sm .em-pill__dot { width: 6px;  height: 6px;  }
.em-pill--md .em-pill__dot { width: 8px;  height: 8px;  }
.em-pill--lg .em-pill__dot { width: 10px; height: 10px; }


/* ------------------------------------------------------------
   Variantes couleur
   (définissent les 4 variables locales consommées par .em-pill)
   ------------------------------------------------------------ */

.em-pill--jaune {
  --pill-bg:     var(--soleil-soft,  #FFF1B8);
  --pill-dot:    var(--soleil,       #FED639);
  --pill-text:   var(--noir,         #0A0A0A);
  --pill-border: var(--noir,         #0A0A0A);
}

.em-pill--bleu {
  --pill-bg:     var(--encre-soft,   #E1ECFD);
  --pill-dot:    var(--encre,        #418BEE);
  --pill-text:   var(--noir,         #0A0A0A);
  --pill-border: var(--noir,         #0A0A0A);
}

.em-pill--vert {
  --pill-bg:     var(--valide-soft,  #DDF1E6);
  --pill-dot:    var(--valide,       #1F8A5B);
  --pill-text:   var(--noir,         #0A0A0A);
  --pill-border: var(--noir,         #0A0A0A);
}

.em-pill--rouge {
  --pill-bg:     var(--alerte-soft,  #FBE1DE);
  --pill-dot:    var(--alerte,       #E0463C);
  --pill-text:   var(--noir,         #0A0A0A);
  --pill-border: var(--noir,         #0A0A0A);
}