/* /public_html/assets/css/ui-button.css */

:root{
  --ui-btn-h: 44px;
  --ui-btn-h-compact: 36px;
  --ui-btn-radius: var(--radius-pill, 999px);

  --ui-focus-ring: color-mix(in srgb, var(--theme-primary, #0ea5e9) 45%, transparent);

  /* TONES (change 1 fois ici) */
  --ui-primary-from: color-mix(in srgb, var(--theme-primary, #0ea5e9) 35%, #020617 65%);
  --ui-primary-to:   color-mix(in srgb, var(--theme-primary, #0ea5e9) 75%, #020617 25%);

  --ui-cta-from: #fb7185;
  --ui-cta-to:   #f43f5e;

  --ui-danger-from: #ef4444;
  --ui-danger-to:   #f97316;
}

/* =========================
   UI BUTTON (V2) - base
   ========================= */

.ui-btn{
  -webkit-tap-highlight-color: transparent;
  appearance: none;

  height: var(--ui-btn-h);
  min-height: var(--ui-btn-h);
  padding: 0 1.15rem;

  border-radius: var(--ui-btn-radius);
  border: 1px solid var(--ui-btn-border, transparent);
  background: var(--ui-btn-bg, transparent);
  color: var(--ui-btn-text, var(--color-text));
  box-shadow: var(--ui-btn-shadow, none);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;

  line-height: 1;
  white-space: nowrap;

  font-size: 0.95rem;
  font-weight: 650;
  letter-spacing: 0.01em;

  cursor: pointer;
  user-select: none;

  transition:
    transform 110ms ease-out,
    box-shadow 150ms ease-out,
    filter 150ms ease-out,
    background-color 150ms ease-out,
    border-color 150ms ease-out,
    color 150ms ease-out,
    opacity 150ms ease-out;
}

.ui-btn:focus{ outline: none; }
.ui-btn:focus-visible{
  box-shadow: 0 0 0 2px var(--ui-focus-ring), var(--ui-btn-shadow, none);
}

/* Disabled */
.ui-btn[disabled],
.ui-btn.is-disabled{
  opacity: 0.55;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
  filter: none !important;
}

/* Tailles */
.ui-btn--compact{
  height: var(--ui-btn-h-compact);
  min-height: var(--ui-btn-h-compact);
  padding: 0 0.95rem;
  font-size: 0.9rem;
}
.ui-btn--sm{
  height: 32px;
  min-height: 32px;
  padding: 0 0.75rem;
  font-size: 0.85rem;
}
.ui-btn--block{ width: 100%; }

/* contenu */
.ui-btn__icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:1.05em;
  line-height:1;
  opacity:.95;
}
.ui-btn__label{
  display:inline-flex;
  align-items:center;
  line-height:1;
}

/* =========================
   Variants (tones)
   ========================= */

/* Secondary (neutre) */
.ui-btn--secondary{
  --ui-btn-bg:
    radial-gradient(circle at 0% 0%, rgba(255,255,255,0.55), transparent 55%),
    color-mix(in srgb, var(--color-surface-soft) 92%, #ffffff 8%);
  --ui-btn-border: color-mix(in srgb, var(--color-border-subtle) 80%, #94a3b8 20%);
  --ui-btn-text: var(--color-text);
  --ui-btn-shadow: var(--shadow-subtle);
}
html[data-theme="dark"] .ui-btn--secondary{
  --ui-btn-bg:
    radial-gradient(circle at 0% 0%, rgba(255,255,255,0.07), transparent 55%),
    color-mix(in srgb, var(--color-surface) 80%, #020617 20%);
  --ui-btn-border: rgba(148, 163, 184, 0.55);
}

/* Back (spécial retour : contraste naturel) */
.ui-btn--back{
  --ui-btn-bg: color-mix(in srgb, var(--color-surface-soft) 92%, #ffffff 8%);
  --ui-btn-border: color-mix(in srgb, var(--color-border-subtle) 80%, #94a3b8 20%);
  --ui-btn-text: #0b1220;
  --ui-btn-shadow: 0 18px 45px rgba(15, 23, 42, 0.14);
}
html[data-theme="dark"] .ui-btn--back{
  --ui-btn-bg: color-mix(in srgb, var(--color-surface) 85%, #020617 15%);
  --ui-btn-border: rgba(148, 163, 184, 0.40);
  --ui-btn-text: #f8fafc;
  --ui-btn-shadow: 0 18px 45px rgba(0, 0, 0, 0.35);
}

/* Primary */
.ui-btn--primary{
  --ui-btn-text: #f9fafb;
  --ui-btn-border: transparent;
  --ui-btn-bg: linear-gradient(135deg, var(--ui-primary-from), var(--ui-primary-to));
  --ui-btn-shadow:
    0 0 0 1px color-mix(in srgb, var(--theme-primary, #0ea5e9) 65%, transparent),
    0 18px 45px color-mix(in srgb, var(--theme-primary, #0ea5e9) 30%, transparent);
}
html[data-theme="light"] .ui-btn--primary{
  --ui-btn-text: #0b1220;
  --ui-btn-bg: linear-gradient(
    135deg,
    color-mix(in srgb, var(--theme-primary, #0ea5e9) 35%, #ffffff 65%),
    color-mix(in srgb, var(--theme-primary, #0ea5e9) 85%, #ffffff 15%)
  );
  --ui-btn-shadow: 0 14px 34px color-mix(in srgb, var(--theme-primary, #0ea5e9) 35%, transparent);
}

/* CTA (rose) */
.ui-btn--cta{
  --ui-btn-text: #fff;
  --ui-btn-border: transparent;
  --ui-btn-bg: linear-gradient(135deg, var(--ui-cta-from), var(--ui-cta-to));
  --ui-btn-shadow:
    0 0 0 1px rgba(244, 63, 94, 0.55),
    0 18px 45px rgba(244, 63, 94, 0.25);
}
html[data-theme="light"] .ui-btn--cta{
  --ui-btn-shadow: 0 14px 34px rgba(244, 63, 94, 0.35);
}

/* Danger */
.ui-btn--danger{
  --ui-btn-text: #f9fafb;
  --ui-btn-border: transparent;
  --ui-btn-bg: linear-gradient(135deg, var(--ui-danger-from), var(--ui-danger-to));
  --ui-btn-shadow: 0 12px 28px rgba(239, 68, 68, 0.55);
}

/* Hover (commun) */
.ui-btn:hover{
  transform: none;
  filter: brightness(1.03);

  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--color-border-subtle) 55%, transparent),
    0 14px 34px rgba(15, 23, 42, 0.14);
}
html[data-theme="dark"] .ui-btn:hover{
  box-shadow:
    0 0 0 1px rgba(148, 163, 184, 0.38),
    0 18px 45px rgba(0, 0, 0, 0.35);
}


/* Par défaut : full label */
.ui-btn__label--short{ display:none; }

/* Tablet : 720–900 => short label */
@media (min-width: 720px) and (max-width: 900px){
  .ui-btn .ui-btn__label--full{ display:none; }
  .ui-btn .ui-btn__label--short{ display:inline-flex; }
}

/* <720 : icon-only si roundMobile */
@media (max-width: 719px){
  .ui-btn.ui-btn--round-mobile{
    width: var(--ui-btn-h);
    min-width: var(--ui-btn-h);
    padding: 0;
    border-radius: 999px;
    gap: 0;
  }

  .ui-btn.ui-btn--round-mobile.ui-btn--compact{
    width: var(--ui-btn-h-compact);
    min-width: var(--ui-btn-h-compact);
  }

  .ui-btn.ui-btn--round-mobile .ui-btn__label{
    display: none !important;
  }

  .ui-btn.ui-btn--round-mobile .ui-btn__icon{
    font-size: 1.15em;
  }
}

/* EXTRAS (header)  */
@media (min-width: 720px){
  .panel-header-extras .ui-btn .ui-btn__label--full{ display:inline-flex !important; }
  .panel-header-extras .ui-btn .ui-btn__label--short{ display:none !important; }
}