/* ==========================================================================
   F&I STUDIO — COMPOSANT : BOUTON (.fi-button)
   ==========================================================================
   Remplace, à terme, les 81 classes de bouton recensées dans
   docs/UI_AUDIT.md §5.4/§7. AUCUNE migration n'est faite dans cette étape —
   ce fichier prépare seulement la primitive officielle.

   Variantes : .fi-button--primary | --secondary | --danger | --ghost
   Modificateur de forme : .fi-button--icon (bouton carré, icône seule)
   États : natifs (:hover/:focus-visible/:active/:disabled) — voir
   docs/DESIGN_SYSTEM.md §E pour ce qui est extrait vs conçu.

   SPÉCIFICITÉ — trouvé pendant la migration pilote de #openDealManualTaskModalButton
   (docs/UI_AUDIT.md, session "Phase 4") : une classe simple comme `.fi-button`
   (0,1,0) perd contre d'innombrables anciennes règles du type
   `.unAncetre > button` (0,1,1) encore présentes dans main.css/aesthetic-
   presentation.css/settings-premium.css, sans même qu'elles utilisent
   `!important`. Plutôt que de résoudre ça au cas par cas à chaque bouton
   migré (ou pire, avec `!important`), chaque sélecteur ci-dessous répète sa
   propre classe (`.fi-button.fi-button`, `.fi-button.fi-button--primary`…) —
   une technique CSS standard qui porte la spécificité à (0,2,0) sans rien
   changer d'autre : mêmes éléments ciblés, même cascade normale, juste un
   poids suffisant pour gagner face à ce genre de reliquat par défaut. */

.fi-button.fi-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--fi-space-xs);
  height:var(--fi-control-height-primary);
  min-height:var(--fi-control-height-primary);
  padding:0 var(--fi-space-2xl);
  border:1px solid transparent;
  border-radius:var(--fi-radius-lg);
  font-family:var(--fi-font);
  font-size:var(--fi-text-base2);
  font-weight:var(--fi-weight-interactive);
  line-height:1;
  white-space:nowrap;
  cursor:pointer;
  /* Fluidité (FLUID-002) : l'ombre (anneau de focus) n'est plus interpolée. */
  transition:background-color .12s ease, border-color .12s ease, color .12s ease;
}
.fi-button.fi-button:focus-visible{
  outline:none;
  box-shadow:var(--fi-shadow-focus-ring);
}
.fi-button.fi-button:disabled,
.fi-button.fi-button[aria-disabled="true"]{
  cursor:not-allowed;
  opacity:.5;
  box-shadow:none;
}

/* --- Primaire : action principale (Envoyer, Ajouter…) --- */
.fi-button.fi-button--primary{
  background:var(--fi-action-solid);
  color:#fff;
  /* Sobriété premium (référence Paramètres) : aplat, sans halo coloré. */
  box-shadow:none;
}
.fi-button.fi-button--primary:hover:not(:disabled){ background:var(--fi-action-solid-hover); }
.fi-button.fi-button--primary:active:not(:disabled){ background:var(--fi-action-solid-active); }

/* --- Secondaire : action neutre --- */
.fi-button.fi-button--secondary{
  background:var(--fi-surface);
  border-color:var(--fi-border);
  color:var(--fi-ink);
}
.fi-button.fi-button--secondary:hover:not(:disabled){ background:var(--fi-hover-surface); }
.fi-button.fi-button--secondary:active:not(:disabled){ background:var(--fi-border-soft); }

/* --- Fantôme : action tertiaire, discrète --- */
.fi-button.fi-button--ghost{
  background:transparent;
  border-color:transparent;
  color:var(--fi-ink-soft);
}
.fi-button.fi-button--ghost:hover:not(:disabled){ background:var(--fi-hover-surface); color:var(--fi-ink); }
.fi-button.fi-button--ghost:active:not(:disabled){ background:var(--fi-border-soft); }

/* --- Danger : action destructive --- */
.fi-button.fi-button--danger{
  background:var(--fi-danger-soft);
  color:var(--fi-danger);
}
.fi-button.fi-button--danger:hover:not(:disabled){ background:var(--fi-danger); color:#fff; }
.fi-button.fi-button--danger:active:not(:disabled){ background:color-mix(in srgb, var(--fi-danger) 85%, black); color:#fff; }

/* --- Forme carrée, icône seule (ex. bouton de fermeture rond — voir
       docs/UI_AUDIT.md §5.12 pour l'unification des 3 patterns existants) --- */
.fi-button.fi-button--icon{
  width:var(--fi-control-height-compact);
  height:var(--fi-control-height-compact);
  padding:0;
  border-radius:var(--fi-radius-pill);
}
.fi-button.fi-button--icon .actionLabel{
  display:none;
}

/* ==========================================================================
   FAMILLES D'ACTION CANONIQUES (2026-10-06) — référence visuelle : Paramètres.
   Ciblage explicite par classe/attribut, jamais par `button` nu.
   ========================================================================== */

/* --- Fermer (texte) : action NEUTRE d'en-tête de fenêtre, jamais primaire --- */
.fi-button.fi-button--close{
  height:var(--fi-control-height-header);
  min-height:var(--fi-control-height-header);
  padding:0 var(--fi-space-xl);
  border-color:var(--fi-border);
  border-radius:var(--fi-radius-xl);
  background:var(--fi-surface);
  color:var(--fi-ink);
  box-shadow:none;
  font-size:var(--fi-text-sm2);
}
.fi-button.fi-button--close:hover:not(:disabled){ background:var(--fi-hover-surface); }
.fi-button.fi-button--close:active:not(:disabled){ background:var(--fi-border-soft); }

/* --- Fermer (×) et Agrandir/Réduire : même pastille ronde d'en-tête --- */
.fi-button.fi-button--icon.fi-button--close,
.fi-button.fi-button--icon[data-toggle-maximize]{
  width:var(--fi-control-height-header);
  min-width:var(--fi-control-height-header);
  height:var(--fi-control-height-header);
  min-height:var(--fi-control-height-header);
  padding:0;
  border:1px solid var(--fi-border);
  border-radius:var(--fi-radius-circle);
  background:var(--fi-surface);
  color:var(--fi-ink-soft);
  box-shadow:none;
  font-size:var(--fi-text-lg);
}
.fi-button.fi-button--icon.fi-button--close:hover:not(:disabled),
.fi-button.fi-button--icon[data-toggle-maximize]:hover:not(:disabled){ background:var(--fi-hover-surface); color:var(--fi-ink); }
.fi-button.fi-button--icon.fi-button--close:active:not(:disabled),
.fi-button.fi-button--icon[data-toggle-maximize]:active:not(:disabled){ background:var(--fi-border-soft); }
/* Icône d'agrandissement et ×  de fermeture : même tracé fin partout (sans règle, le × SVG d'une pastille
   de fermeture était invisible — popup « Choisir un modèle »). */
.fi-button.fi-button--icon[data-toggle-maximize] svg,
.fi-button.fi-button--icon.fi-button--close svg{
  width:16px;
  height:16px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* × encore écrit en caractère (« × ») dans certaines fenêtres : même tracé fin que le × SVG, couleur
   héritée (survol compris) — une seule règle de composant au lieu d'une retouche par fenêtre. */
.fi-button.fi-button--icon.fi-button--close:not(:has(svg)){
  position:relative;
  color:transparent; /* le caractère « × » reste dans le DOM (accessibilité) mais n'est jamais dessiné */
  font-size:0;
}
.fi-button.fi-button--icon.fi-button--close:not(:has(svg))::before{
  content:"";
  position:absolute;
  inset:0;
  width:16px;
  height:16px;
  margin:auto;
  background:var(--fi-ink-soft);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='m7 7 10 10M17 7 7 17'/%3E%3C/svg%3E") center/16px 16px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='m7 7 10 10M17 7 7 17'/%3E%3C/svg%3E") center/16px 16px no-repeat;
}
.fi-button.fi-button--icon.fi-button--close:not(:has(svg)):hover:not(:disabled)::before{ background:var(--fi-ink); }

/* --- Supprimer (corbeille) : neutre au repos, danger explicite au survol / clavier --- */
.fi-button.fi-button--danger.fi-button--icon{
  border-color:transparent;
  background:transparent;
  color:var(--fi-ink-faint);
  box-shadow:none;
}
.fi-button.fi-button--danger.fi-button--icon:is(:hover,:focus-visible):not(:disabled){
  border-color:var(--fi-danger-line);
  background:var(--fi-danger-soft);
  color:var(--fi-danger);
}