/* ============================================================
 * LPI UI – Tabs / Pills
 * ============================================================ */

.lpi-tabs {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  margin-bottom:25px;
  flex-wrap:wrap;
}

.lpi-tab {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 14px;
  border-radius:12px;
  border:1px solid #E2E2E2;
  background:#fff;
  font-size:14px;
  font-weight:500;
  color:#555;
  text-decoration:none;
  cursor:pointer;
  box-shadow:0 1px 2px rgba(0,0,0,0.04);
  transition:
    background 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.1s ease,
    border-color 0.2s ease;
  white-space:nowrap;
}

.lpi-tab:hover,
.lpi-tab:focus-visible {
  border-color:#c28eff;                          /* ✅ violet */
  box-shadow:0 6px 18px rgba(194,142,255,0.28);  /* ✅ shadow plus marquée */
  transform:translateY(-1px);
  color:inherit;
}

/* active = gradient violet */
.lpi-tab--active,
.lpi-tab.is-active {
  background:linear-gradient(135deg,#C28EFF,#E87DEA);
  color:#fff;
  border-color:transparent;
  box-shadow:0 4px 10px rgba(200,120,255,0.35);
}

/* ✅ Fix: une tab active doit rester en texte clair même au hover/focus */
.lpi-tab.lpi-tab--active:hover,
.lpi-tab.lpi-tab--active:focus-visible,
.lpi-tab.is-active:hover,
.lpi-tab.is-active:focus-visible,
a.lpi-tab.lpi-tab--active:hover,
a.lpi-tab.is-active:hover {
  color:#fff;
  text-decoration:none;
}

/* ============================================================
 * LPI UI – Boutons gradients
 * ============================================================ */

.lpi-btn {
  /* même modèle de boîte partout */
  box-sizing:border-box;

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

  padding:6px 14px;
  border-radius:12px;
  border:1px solid transparent;

  background:linear-gradient(135deg,#C28EFF,#E87DEA);
  color:#fff;

  font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-size:14px;
  font-weight:500;

  /* ✅ clé pour rendre <a> et <button> identiques */
  line-height:21px;

  text-decoration:none;
  cursor:pointer;

  box-shadow:0 4px 10px rgba(200,120,255,0.35);
  transition:
    box-shadow 0.2s ease,
    transform 0.1s ease,
    filter 0.2s ease,
    color 0.2s ease;

  white-space:nowrap;
  vertical-align:middle;
}

/* ✅ reset léger pour éviter les styles natifs des boutons */
button.lpi-btn,
input.lpi-btn {
  -webkit-appearance:none;
  appearance:none;

  border:1px solid transparent; /* certains UA remettent un border */
  margin:0;                     /* certains UA ajoutent du margin */
  background-clip:padding-box;
}

/* Hover / focus / active */
a.lpi-btn:hover,
a.lpi-btn:focus-visible,
a.lpi-btn:active,
button.lpi-btn:hover,
button.lpi-btn:focus-visible,
button.lpi-btn:active,
input.lpi-btn:hover,
input.lpi-btn:focus-visible,
input.lpi-btn:active {
  color:#fff;
  text-decoration:none;
}

.lpi-btn:hover,
.lpi-btn:focus-visible {
  transform:translateY(-1px);
  box-shadow:0 5px 12px rgba(200,120,255,0.45);
  filter:saturate(1.05);
}

.lpi-btn:disabled,
.lpi-btn[disabled]{
  opacity:0.6;
  cursor:not-allowed;
  box-shadow:none;
}

/* ============================================================
 * Focus global
 * ============================================================ */

.lpi-tab:focus-visible,
.lpi-btn:focus-visible,
.lpi-icon-btn:focus-visible {
  outline:2px solid #C28EFF;
  outline-offset:2px;
}

/* ============================================================
 * Responsive
 * ============================================================ */

@media (max-width:480px) {
  .lpi-tab {
    flex:1 1 auto;
    text-align:center;
    padding:6px 10px;
    font-size:13px;
    border-radius:10px;
  }
}

button.lpi-tab{
  -webkit-appearance:none;
  appearance:none;
  background: #fff;          /* cohérent avec lpi-tab */
  border:1px solid #E2E2E2;
  font: inherit;
}