/* ==========================================================================
   Talia — Boutons
   --------------------------------------------------------------------------
   SEUL fichier du système de boutons : base, variantes, tailles, états.

   Ce qui n'est PAS ici, volontairement :
   - les ajustements d'un bouton DANS un composant (.hero-actions .btn,
     .cart-widget-floating .btn, .historique-table .btn-sm…) : ils suivent leur
     composant, pas la couche boutons ;
   - les COULEURS de palette du bouton de bloc Gutenberg
     (.wp-block-button__link.has-*-background-color), dans gutenberg-blocks.css :
     sa géométrie, elle, vient bien d'ici ;
   - l'habillage WooCommerce de fond de page, dans woocommerce.css.

   Sur les — 52 restants, tous justifiés :
   - 42 tiennent tête au CSS du plugin WooCommerce, dont l'ordre de chargement
     n'est pas garanti. Les retirer casserait la boutique en silence.
   - 10 surchargent une propriété que la règle de base impose elle-même en
     (padding, border, font-size, min-height…). Sans eux, .btn-sm
     et .btn-lg n'auraient plus aucun effet.
   Les 17 autres ont été retirés : ils portaient sur background-color, color et
   transform, que rien ne conteste.

   DEUX CONVENTIONS, UN SEUL SYSTÈME — le markup du plugin Toolbox (autre
   dépôt) écrit `.btn--primary`, `.btn--sm`, `.btn--outline`… avec un double
   tiret. Ces noms sont ici de simples ALIAS ajoutés aux sélecteurs des
   variantes canoniques : mêmes déclarations, deux noms. Ce n'est pas un
   second système. À supprimer le jour où le markup du plugin sera migré vers
   la convention à simple tiret.

   RÈGLE DE COMPOSITION — un contexte ne surcharge pas un bouton, il choisit
   une variante. Écrire `.mon-composant .btn { color: #fff }` ne marchera pas :
   la règle de base est en. Utiliser une variante existante
   (.btn-outline-white pour un bouton sur fond sombre) ou en ajouter une ici.
   C'est ce qui évite de rouvrir la course aux qu'on vient
   d'arrêter.

   Chargé APRÈS main.css.
   ========================================================================== */

@media (max-width: 767.98px) {
    .btn,
    .button,
    .woocommerce a.button,
    .woocommerce button.button,
    .woocommerce input.button,
    .woocommerce #respond input#submit,
    .woocommerce #payment #place_order,
    .woocommerce-page a.button,
    .woocommerce-page button.button,
    .woocommerce-page input.button,
    .woocommerce-account .woocommerce .button,
    .submit-btn,
    .action-btn {
      font-size: var(--font-size-sm);
      min-height: 40px;
      padding: var(--spacing-sm) var(--spacing-md);
    }
}


.btn,
.button,
.woocommerce a.button, 
.woocommerce button.button, 
.woocommerce input.button, 
.woocommerce #respond input#submit, 
.woocommerce #payment #place_order, 
.woocommerce-page a.button, 
.woocommerce-page button.button, 
.woocommerce-page input.button,
.woocommerce-account .woocommerce .button,
.submit-btn,
.action-btn,
/* Le bouton « retour » des pages Résultat vient du plugin Toolbox, sans classe
   de bouton. Il rejoint les sélecteurs canoniques plutôt que de recopier
   .btn-outline et .btn-sm à la main, ce que faisait plugin-integration.css en
   25 déclarations !important. À retirer quand le markup posera les classes. */
.do-result-back,
/* Bouton du bloc « Bouton » de Gutenberg. Sa géométrie était recopiée à
   l'identique dans gutenberg-blocks.css — mêmes 13 déclarations, mêmes tokens.
   Il rejoint la base ; ses couleurs de palette restent gérées là-bas, c'est
   la seule chose qui lui soit propre. */
.wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-sm) var(--spacing-lg);
  border: 2px solid transparent;
  border-radius: var(--border-radius-md);
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--transition-normal);
  gap: var(--spacing-sm);
  white-space: nowrap;
  min-height: 44px;
  line-height: 1.2;
  text-transform: none;
  box-shadow: none;
}

.btn-primary,
.btn--primary,
.button-primary,
.button.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
#loginform #wp-submit,
#registerform .btn-primary,
.woocommerce #payment #place_order,
.woocommerce-checkout #place_order,
.woocommerce-cart .checkout-button,
.woocommerce .button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button {
  background-color: var(--primary-color);
  color: #ffffff;
  border-color: var(--primary-color);
}

.btn-primary:hover,
.btn--primary:hover,
.button-primary:hover,
.button.alt:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
#loginform #wp-submit:hover {
  background-color: var(--primary-light);
  border-color: var(--primary-light);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn-outline,
.btn--outline,
.do-result-back,
.btn-primary-outline,
.woocommerce a.button.outline,
.woocommerce button.button.outline,
.view-all-tools-container .btn-outline {
  background-color: transparent;
  color: var(--primary-color);
  border: 2px solid var(--primary-color);
}

.btn-outline:hover,
.btn--outline:hover,
.do-result-back:hover,
.do-result-back:focus,
.btn-primary-outline:hover,
.woocommerce a.button.outline:hover {
  background-color: var(--primary-color);
  color: #ffffff;
  transform: translateY(-2px);
}

.btn-outline-white {
  background-color: transparent;
  color: #ffffff;
  border: 2px solid #ffffff;
}

.btn-outline-white:hover {
  background-color: #ffffff;
  color: var(--primary-color);
  transform: translateY(-2px);
}

.btn-secondary,
.btn--secondary,
.button-secondary {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  border-color: var(--border-color);
}

.btn-secondary:hover,
.btn--secondary:hover {
  background-color: var(--border-color);
  transform: translateY(-2px);
}

.btn-danger {
  background-color: var(--error-color);
  color: #ffffff;
  border-color: var(--error-color);
}

.btn-danger:hover {
  background-color: var(--error-light);
  border-color: var(--error-light);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn-danger-outline {
  background-color: transparent;
  color: var(--error-color);
  border: 2px solid var(--error-color);
}

.btn-danger-outline:hover {
  background-color: var(--error-color);
  color: #ffffff;
  transform: translateY(-2px);
}

.btn-sm,
.btn--sm,
/* Les cartes du catalogue reçoivent leurs boutons du plugin Toolbox, qui ne
   pose aucune classe de taille. Le contexte rejoint donc la variante plutôt
   que d'en recopier les valeurs — une seule source, un seul rendu. À retirer
   quand le markup du plugin posera `btn-sm` lui-même. */
.tools-catalog .catalog-card__actions .btn,
.do-result-back {
  padding: var(--spacing-xs) var(--spacing-md);
  font-size: var(--font-size-sm);
  min-height: 36px;
}

.btn:disabled,
.btn.disabled,
.btn.is-disabled,
.btn--disabled,
.button:disabled,
.button.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
}

.btn-md {
  padding: var(--spacing-sm) var(--spacing-lg);
  font-size: var(--font-size-base);
  min-height: 40px;
}

.btn-lg,
.btn--lg {
  padding: var(--spacing-md) var(--spacing-xl);
  font-size: var(--font-size-lg);
  min-height: 48px;
}

.btn-red-outline {
  background-color: transparent;
  color: var(--error-color);
  border-color: var(--error-color);
}

.btn-red-outline:hover:not(:disabled):not(.disabled) {
  background-color: var(--error-color);
  color: var(--text-inverse);
}

.social-btn {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.button.primary:hover,
button.primary:hover {
  background-color: var(--primary-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.button.primary:active,
button.primary:active {
  transform: translateY(0);
}

.btn-icon,
.btn--icon {
  width: 32px;
  height: 32px;
  border-radius: var(--border-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-sm);
  border: 1px solid var(--border-color);
  background: var(--bg-primary);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-normal);
}

.btn-icon:hover,
.btn--icon:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

@media (max-width: 767.98px) {
    .button.primary,
    button.primary {
      width: 100%;
    }
}


/* --------------------------------------------------------------------------
   Variante `primary` sur un <button> nu — rapatriée d'une section « 06.
   BOUTONS — suite 2 » restée isolée à 1 600 lignes de la première.

   ATTENTION : `--font-size-md` n'existe pas dans l'échelle du thème (xs, sm,
   base, lg, xl, 2xl…). La déclaration est donc invalide et la taille retombe
   sur l'héritage. Corrigée à l'aveugle, elle changerait le rendu : à trancher
   sur constat visuel, pas ici.
   -------------------------------------------------------------------------- */

.button.primary,
button.primary {
  background-color: var(--primary-color);
  color: var(--text-inverse);
  border: none;
  padding: var(--spacing-md) var(--spacing-md);
  border-radius: var(--border-radius-md);
  font-size: var(--font-size-md);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-normal);
}


/* --------------------------------------------------------------------------
   Variantes manquantes de la spécification (docs/design-system/boutons.md)
   -------------------------------------------------------------------------- */

/* Confirmation, validation. */
.btn-success,
.btn--success {
  background-color: var(--success-color);
  color: #ffffff;
  border-color: var(--success-color);
}

.btn-success:hover:not(:disabled):not(.disabled),
.btn--success:hover:not(:disabled):not(.disabled) {
  background-color: color-mix(in srgb, var(--success-color) 85%, #000);
  border-color: color-mix(in srgb, var(--success-color) 85%, #000);
  color: #ffffff;
}

/* Pleine largeur — pour les colonnes étroites et le mobile. */
.btn-block,
.btn--block {
  display: flex;
  width: 100%;
}

/* Pilule — cartes du catalogue, filtres. */
.btn-pill {
  border-radius: 999px;
}


/* --------------------------------------------------------------------------
   Boutons de l'éditeur WordPress ramenés dans le système

   Le bloc Fichier sort un bouton en `border-radius: 50px` (style du cœur de
   WordPress). Il prend ici le rayon et le gabarit du thème, comme n'importe
   quel autre bouton. Les boutons du bloc Bouton (.wp-block-button__link) sont
   traités séparément dans gutenberg-blocks.css.
   -------------------------------------------------------------------------- */

.wp-block-file__button {
  border-radius: var(--border-radius-md);
  padding: var(--spacing-sm) var(--spacing-lg);
  min-height: 40px;
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-decoration: none;
}