/* ============================================================
   ML – Pill Links
   Bloc de deux liens arrondis (formation précision / mode)
   S'appuie sur les tokens globaux de ml-tokens.css

   Les sélecteurs .pill-links* sont conservés pour rétrocompatibilité
   avec les pages Divi existantes.
   ============================================================ */

.ml-pill-links,
.pill-links {
  display: inline-flex;
  align-items: stretch;
  gap: 4px;
  padding: 5px;
  width: fit-content;
  max-width: 100%;
  background: var(--ml-color-white);
  border-radius: var(--ml-radius-md);
  box-shadow: var(--ml-shadow-sm);
}

.ml-pill-links__item,
.pill-links__item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: normal;
  flex: 0 0 auto;
  min-width: 160px;
  max-width: 180px;
  min-height: 52px;
  padding: 10px 12px;
  border-radius: var(--ml-radius-md);
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  font-family: var(--ml-font-display);
  font-size: clamp(12px, 0.95vw, 15px);
  line-height: 1.05;
  letter-spacing: 0.02em;
  overflow-wrap: break-word;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) inset;
  transition:
    transform var(--ml-transition-fast),
    box-shadow var(--ml-transition-fast),
    filter var(--ml-transition-fast);
}

.ml-pill-links__item::after,
.pill-links__item::after {
  content: "";
  position: absolute;
  top: -120%;
  left: -35%;
  width: 42%;
  height: 320%;
  background: linear-gradient(100deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.38) 45%,
      rgba(255, 255, 255, 0) 100%);
  transform: translateX(-180%) rotate(12deg);
  transition: transform 0.6s ease;
  pointer-events: none;
}

.ml-pill-links__item:hover,
.pill-links__item:hover {
  transform: translateY(-2px);
  box-shadow: var(--ml-shadow-md);
  filter: brightness(1.02);
}

.ml-pill-links__item:hover::after,
.pill-links__item:hover::after {
  transform: translateX(360%) rotate(12deg);
}

.ml-pill-links__item:active,
.pill-links__item:active {
  transform: translateY(0);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.14);
}

.ml-pill-links__item:focus-visible,
.pill-links__item:focus-visible {
  outline: 2px solid var(--ml-color-navy);
  outline-offset: 2px;
}

.ml-pill-links__item--precision,
.pill-links__item--precision {
  background: var(--ml-color-teal);
  color: var(--ml-color-white) !important;
}

.ml-pill-links__item--mode,
.pill-links__item--mode {
  background: var(--ml-color-yellow);
  color: var(--ml-color-navy) !important;
  max-width: 170px;
}

/* Divi force `.et_pb_module a { color: inherit !important; }`.
   On sur-spécifie uniquement les liens de ce composant pour ne
   pas impacter les autres boutons/liens du site. */
.et_pb_module a.ml-pill-links__item--precision,
.et_pb_module a.pill-links__item--precision,
.et_pb_module a.ml-pill-links__item--precision:visited,
.et_pb_module a.pill-links__item--precision:visited,
.et_pb_module a.ml-pill-links__item--precision:hover,
.et_pb_module a.pill-links__item--precision:hover,
.et_pb_module a.ml-pill-links__item--precision:focus,
.et_pb_module a.pill-links__item--precision:focus {
  color: #ffffff !important;
}

.et_pb_module a.ml-pill-links__item--mode,
.et_pb_module a.pill-links__item--mode,
.et_pb_module a.ml-pill-links__item--mode:visited,
.et_pb_module a.pill-links__item--mode:visited,
.et_pb_module a.ml-pill-links__item--mode:hover,
.et_pb_module a.pill-links__item--mode:hover,
.et_pb_module a.ml-pill-links__item--mode:focus,
.et_pb_module a.pill-links__item--mode:focus {
  color: #012c4a !important;
}

@media (max-width: 600px) {
  .ml-pill-links,
  .pill-links {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: none;
  }

  .ml-pill-links__item,
  .pill-links__item {
    width: 100%;
    min-width: 0;
    max-width: none;
    flex: 1 1 auto;
    min-height: 52px;
  }
}

@media (prefers-reduced-motion: reduce) {

  .ml-pill-links__item,
  .ml-pill-links__item::after,
  .pill-links__item,
  .pill-links__item::after {
    transition: none;
  }

  .ml-pill-links__item:hover,
  .ml-pill-links__item:active,
  .pill-links__item:hover,
  .pill-links__item:active {
    transform: none;
    box-shadow: none;
    filter: none;
  }
}