/**
 * SDC Button — styles scoped.
 *
 * Architecture BEM. Drupal SDC scope automatiquement par data-component-id,
 * mais on conserve le prefixe `.previensmoi-button` pour debug et override
 * theme parent eventuel.
 *
 * Pas de !important (regle absolue 4 CLAUDE.md theme). Pas de classes
 * Tailwind dans le markup Twig (regle absolue 6) — les utilites Tailwind
 * peuvent etre referencees ICI via @apply si necessaire, mais on prefere
 * les CSS variables natives consommees directement.
 */

  /* ===================================================================
   * BASE — partage entre toutes variantes/sizes
   * ================================================================= */

  .previensmoi-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--previensmoi-space-2);
    font-family: var(--previensmoi-font-sans);
    font-weight: var(--previensmoi-fontweight-semibold);
    line-height: var(--previensmoi-lineheight-tight);
    text-decoration: none;
    text-align: center;
    white-space: nowrap;
    border: 2px solid transparent;
    border-radius: var(--previensmoi-radius-lg);
    cursor: pointer;
    transition:
      background-color var(--previensmoi-motion-fast) var(--previensmoi-motion-easing),
      border-color     var(--previensmoi-motion-fast) var(--previensmoi-motion-easing),
      color            var(--previensmoi-motion-fast) var(--previensmoi-motion-easing),
      transform        var(--previensmoi-motion-fast) var(--previensmoi-motion-easing),
      box-shadow       var(--previensmoi-motion-fast) var(--previensmoi-motion-easing);
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }

  .previensmoi-button:focus-visible {
    outline: var(--previensmoi-focus-ring-width) solid var(--previensmoi-focus-ring-color);
    outline-offset: var(--previensmoi-focus-ring-offset);
  }

  .previensmoi-button__label {
    display: inline-block;
  }

  .previensmoi-button__icon {
    display: inline-flex;
    align-items: center;
    line-height: 0;
  }

  .previensmoi-button__icon svg {
    width: 1.25em;
    height: 1.25em;
  }

  /* ===================================================================
   * SIZES — sm / md / lg
   * Hauteurs cibles : sm 36px, md 44px (Apple HIG / WCAG SC 2.5.5
   * target size), lg 52px.
   * ================================================================= */

  .previensmoi-button--sm {
    padding: var(--previensmoi-space-2) var(--previensmoi-space-3);
    font-size: var(--previensmoi-fontsize-sm);
    min-height: 2.25rem;
  }

  .previensmoi-button--md {
    padding: var(--previensmoi-space-3) var(--previensmoi-space-6);
    font-size: var(--previensmoi-fontsize-base);
    min-height: 2.75rem;
  }

  .previensmoi-button--lg {
    padding: var(--previensmoi-space-4) var(--previensmoi-space-8);
    font-size: var(--previensmoi-fontsize-lg);
    min-height: 3.25rem;
  }

  /* ===================================================================
   * VARIANTS — primary / secondary / ghost
   * ================================================================= */

  /* PRIMARY — coral chaud, CTA. Contraste WCAG AA verifie sur paper-50. */
  .previensmoi-button--primary {
    background-color: var(--previensmoi-color-primary-600);
    border-color:     var(--previensmoi-color-primary-600);
    color:            var(--previensmoi-color-paper-0);
  }

  .previensmoi-button--primary:hover:not(.previensmoi-button--disabled) {
    background-color: var(--previensmoi-color-primary-700);
    border-color:     var(--previensmoi-color-primary-700);
    transform: translateY(-1px);
    box-shadow: var(--previensmoi-shadow-md);
  }

  .previensmoi-button--primary:active:not(.previensmoi-button--disabled) {
    background-color: var(--previensmoi-color-primary-800);
    border-color:     var(--previensmoi-color-primary-800);
    transform: translateY(0);
    box-shadow: var(--previensmoi-shadow-sm);
  }

  /* SECONDARY — bordure ink, fond transparent. */
  .previensmoi-button--secondary {
    background-color: transparent;
    border-color:     var(--previensmoi-color-ink-700);
    color:            var(--previensmoi-color-ink-700);
  }

  .previensmoi-button--secondary:hover:not(.previensmoi-button--disabled) {
    background-color: var(--previensmoi-color-paper-100);
    border-color:     var(--previensmoi-color-ink-800);
    color:            var(--previensmoi-color-ink-800);
  }

  .previensmoi-button--secondary:active:not(.previensmoi-button--disabled) {
    background-color: var(--previensmoi-color-paper-200);
  }

  /* GHOST — discret, texte uniquement. */
  .previensmoi-button--ghost {
    background-color: transparent;
    border-color:     transparent;
    color:            var(--previensmoi-color-ink-700);
  }

  .previensmoi-button--ghost:hover:not(.previensmoi-button--disabled) {
    background-color: var(--previensmoi-color-paper-100);
    color:            var(--previensmoi-color-ink-800);
  }

  .previensmoi-button--ghost:active:not(.previensmoi-button--disabled) {
    background-color: var(--previensmoi-color-paper-200);
  }

  /* ===================================================================
   * ETATS — disabled
   * ================================================================= */

  .previensmoi-button--disabled,
  .previensmoi-button:disabled,
  .previensmoi-button[aria-disabled='true'] {
    cursor: not-allowed;
    opacity: 0.5;
    pointer-events: none;
  }

  /* ===================================================================
   * MODIFIERS — full-width
   * ================================================================= */

  .previensmoi-button--full-width {
    width: 100%;
    display: flex;
  }