@layer medaillons {
  .mdls {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    vertical-align: middle;

    --hx-l: 34px;
    --hx-h: 38px;
    --hx-nb: 13px;
  }

  .mdls-sm {
    --hx-l: 26px;
    --hx-h: 29px;
    --hx-nb: 10.5px;
    gap: 4px;
  }

  .mdls-lg {
    --hx-l: 46px;
    --hx-h: 52px;
    --hx-nb: 17px;
    gap: 8px;
  }

  .mpart {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    vertical-align: middle;
    border-radius: 20px;
    padding: 3px 11px 3px 8px;
    background: oklch(68% 0.170 55);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: -.005em;
    white-space: nowrap;
    cursor: default;

    & .ico { width: 14px; height: 14px; object-fit: contain; display: block; }
  }

  .mact {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: oklch(48% 0.13 152);

    & i {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: oklch(62% 0.165 152);
      flex: none;
    }
  }

  .mdl {
    position: relative;
    display: inline-grid;
    line-height: 0;
  }

  .hx {
    display: grid;
    place-items: center;
    width: var(--hx-l);
    height: var(--hx-h);
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    background: var(--hx-c);
    color: #fff;
    font-style: normal;
    cursor: default;
    transition: scale .13s ease;

    & img, & svg {
      width: calc(var(--hx-l) * .56);
      height: calc(var(--hx-l) * .56);
      object-fit: contain;
      display: block;
    }

    & .nb {
      font-family: "Archivo", "Public Sans", sans-serif;
      font-weight: 800;
      font-variant-numeric: tabular-nums;
      letter-spacing: -0.03em;
      font-size: var(--hx-nb);
      line-height: 1;

      &.len3 { font-size: calc(var(--hx-nb) * .84); }
      &.len4 { font-size: calc(var(--hx-nb) * .72); }
      &.len5 { font-size: calc(var(--hx-nb) * .60); }
      &.len6 { font-size: calc(var(--hx-nb) * .52); }

      & sup {
        font-size: .68em;
        line-height: 0;
        vertical-align: .55em;
        margin-inline-start: .5px;
      }
    }

    & .dr {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    &.hx-neutre    { --hx-c: oklch(56% 0.020 255); }
    &.hx-vert      { --hx-c: oklch(60% 0.145 152); }
    &.hx-turquoise { --hx-c: oklch(60% 0.100 195); }
    &.hx-bleu      { --hx-c: oklch(60% 0.150 250); }
    &.hx-violet    { --hx-c: oklch(52% 0.175 300); }
    &.hx-rose      { --hx-c: oklch(62% 0.165 355); }
    &.hx-rouge     { --hx-c: oklch(57% 0.190 25); }
    &.hx-or        { --hx-c: oklch(68% 0.170 55); }
    &.hx-bronze    { --hx-c: oklch(55% 0.095 55); }
    &.hx-argent    { --hx-c: oklch(64% 0.020 250); }
  }

  .mdl:hover .hx { scale: 1.09; }

  .mdl::after {
    content: attr(data-lib);
    position: absolute;
    z-index: 60;
    bottom: calc(100% + 7px);
    left: 50%;
    translate: -50% 0;
    width: max-content;
    max-width: 230px;
    padding: 7px 10px;
    border-radius: 8px;
    background: oklch(24% 0.015 255);
    color: #fff;
    font-family: "Public Sans", sans-serif;
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.4;
    text-align: center;
    white-space: normal;
    opacity: 0;
    pointer-events: none;
    transition: opacity .13s ease;
  }

  .mdl::before {
    content: "";
    position: absolute;
    z-index: 60;
    bottom: calc(100% + 2px);
    left: 50%;
    translate: -50% 0;
    border: 5px solid transparent;
    border-top-color: oklch(24% 0.015 255);
    opacity: 0;
    pointer-events: none;
    transition: opacity .13s ease;
  }

  .mdl:hover::after,
  .mdl:hover::before,
  .mdl:focus-within::after,
  .mdl:focus-within::before { opacity: 1; }
}