/* /public_html/assets/css/ui-controls-chips.css */

/* =========================================================
   PREFAB — CHIP (base)
   Usage: <button class="chip chip--icon|chip--avatar|chip--text ...">
   Pilotage via variables:
     --chip-size
     --chip-accent
     --chip-inner-w / --chip-outer-w
     --chip-inner-off / --chip-outer-off
     --chip-inner-on  / --chip-outer-on
   ========================================================= */

.chip{
  /* tokens */
  --chip-accent: #6366f1;

  /* ring widths */
  --chip-inner-w: 1px;    /* OFF */
  --chip-outer-w: 1px;    /* OFF */
  --chip-inner-w-on: 2px; /* ON */
  --chip-outer-w-on: 2px; /* ON */

  /* ring colors (OFF) */
  --chip-inner-off: rgba(148,163,184,0.22);
  --chip-outer-off: rgba(148,163,184,0.50);

  /* ring colors (ON) */
  --chip-inner-on: color-mix(in srgb, var(--chip-accent) 70%, rgba(255,255,255,0.10));
  --chip-outer-on: color-mix(in srgb, var(--chip-accent) 90%, rgba(148,163,184,0.10));

  width: var(--chip-size, 38px);
  height: var(--chip-size, 38px);
  min-width: var(--chip-size, 38px);
  min-height: var(--chip-size, 38px);

  border: 0;
  padding: 0;
  border-radius: 999px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  position: relative;
  overflow: visible;
  background: transparent;
  cursor: pointer;
  user-select: none;

  transform: translateZ(0);
  will-change: transform, filter;
}

.chip:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--chip-accent) 22%, transparent);
}

/* fond léger (optionnel) */
.chip::before{
  content:"";
  position:absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events:none;
  z-index: 1;
  background: color-mix(in srgb, var(--chip-accent) 6%, rgba(255,255,255,0.06));
  opacity: .95;
}

/* double ring collé */
.chip::after{
  content:"";
  position:absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events:none;
  z-index: 5;

  box-shadow:
    0 0 0 var(--chip-inner-w) var(--chip-inner-off),
    0 0 0 calc(var(--chip-inner-w) + var(--chip-outer-w)) var(--chip-outer-off);

  transition: box-shadow 420ms ease, filter 420ms ease, opacity 420ms ease;
}

/* état ON */
.chip.is-active{
  filter: saturate(1.06);
}
.chip.is-active::after{
  box-shadow:
    0 0 0 var(--chip-inner-w-on) var(--chip-inner-on),
    0 0 0 calc(var(--chip-inner-w-on) + var(--chip-outer-w-on)) var(--chip-outer-on);
}

/* Dark tweak OFF */
html[data-theme="dark"] .chip::after{
  /* on garde les vars OFF, mais tu peux les adoucir ici si besoin */
}

/* --- Click pop (sans respiration permanente) --- */
@keyframes chip-press-pop {
  0%   { transform: scale(1); }
  35%  { transform: scale(0.92); }
  70%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}

@keyframes chip-ring-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--chip-accent) 28%, transparent); }
  30%  { box-shadow: 0 0 0 6px color-mix(in srgb, var(--chip-accent) 22%, transparent); }
  100% { box-shadow: 0 0 0 10px rgba(0,0,0,0); }
}

.chip.is-clicked{
  animation: chip-press-pop 260ms cubic-bezier(.2,.9,.2,1);
}
.chip.is-clicked::after{
  /* pulse via drop-shadow, pas besoin de pseudo supplémentaire */
  filter: drop-shadow(0 0 0 rgba(0,0,0,0));
}
.chip.is-clicked{
  /* ring pulse "virtuel" (via box-shadow sur l’élément) */
  box-shadow: 0 0 0 0 transparent;
  animation:
    chip-press-pop 260ms cubic-bezier(.2,.9,.2,1),
    chip-ring-pulse 360ms ease-out;
}

/* =========================================================
   Variantes
   ========================================================= */

/* ICON */
.chip--icon i{
  position: relative;
  z-index: 2;
  font-size: calc(var(--chip-size) * 0.48);
  line-height: 1;
  transition: color 220ms ease, opacity 220ms ease, filter 220ms ease;
}

/* TEXT */
.chip--text .chip__txt{
  position: relative;
  z-index: 2;
  font-weight: 800;
  letter-spacing: .02em;
  font-size: clamp(12px, 1.3vw, 14px);
  transition: color 220ms ease, opacity 220ms ease, filter 220ms ease;
}

/* AVATAR */
.chip--avatar .chip__avatar{
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  z-index: 1;
  display:flex;
  align-items:center;
  justify-content:center;
  background: color-mix(in srgb, var(--color-surface) 88%, #ffffff 12%);
}

.chip--avatar .chip__avatar img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}

.chip--avatar .chip__initials{
  position: relative;
  z-index: 2;
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .06em;
  color: var(--color-text);
  transition: opacity 220ms ease;
}

/* OFF look */
.chip.is-muted{ opacity: .72; }

.chip--avatar:not(.is-active) .chip__avatar img{
  filter: grayscale(1);
  opacity: .75;
}

.chip--avatar:not(.is-active) .chip__initials{
  opacity: .55;
}

/* ICON/TEXT : gris OFF / couleur ON */
.chip--icon:not(.is-active) i,
.chip--text:not(.is-active) .chip__txt{
  color: color-mix(in srgb, var(--color-text-muted, #94a3b8) 85%, transparent);
  opacity: .85;
  filter: saturate(0.65);
}
html[data-theme="dark"] .chip--icon:not(.is-active) i,
html[data-theme="dark"] .chip--text:not(.is-active) .chip__txt{
  color: rgba(148,163,184,0.75);
  opacity: .8;
}
.chip--icon.is-active i,
.chip--text.is-active .chip__txt{
  color: var(--chip-accent);
  opacity: 1;
  filter: saturate(1.15);
}

/* Modificateur “small” (ex: TOUS) */
.chip--sm{
  --chip-size: calc(var(--chip-size) * 0.80);
}

/* Chips action (imprimer / reset) : look "double ring" */
.chip.chip--action{
  /* on les force à être "active vibe" en permanence */
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--chip-accent, var(--color-border-subtle)) 70%, transparent),
    0 0 0 3px color-mix(in srgb, var(--chip-accent, var(--color-border-subtle)) 22%, transparent);
}