/* ==========================================================
   CORE Buttons — 1 composant + variantes métier
   Compatible <button> et <a>
   ========================================================== */

:root {
  /* Couleurs génériques (mappées par site) */
  --c-primary: #0069d9;
  --c-primary-2: #0053aa;

  --c-danger: #c0392b;
  --c-danger-2: #8e241b;

  --c-success: #27ae60;
  --c-success-2: #219150;

  --c-warning: #f39c12;
  --c-warning-2: #d98200;

  --c-neutral: #6b7280;
  --c-neutral-2: #4b5563;

  --c-text: #111;
  --c-on: #fff;

  --btn-h: 36px;
  --btn-h-sm: 28px;
  --btn-pad-x: 12px;
  --btn-pad-x-sm: 10px;

  --btn-radius: 10px;
  --btn-radius-sm: 8px;

  --btn-border: 1px solid rgba(0, 0, 0, 0.16);
  --btn-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

/* Base */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  height: var(--btn-h);
  padding: 0 var(--btn-pad-x);

  border-radius: var(--btn-radius);
  border: 1px solid transparent;

  font-size: 14px;
  font-weight: 600;
  line-height: 1;

  text-decoration: none;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;

  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    box-shadow 0.15s ease,
    filter 0.15s ease,
    transform 0.05s ease;
}

/* <a class="btn"> garde une couleur cohérente */
a.btn {
  color: inherit;
}

/* Focus clavier */
.btn:focus-visible {
  outline: 2px solid rgba(0, 0, 0, 0.85);
  outline-offset: 2px;
}

.btn:active {
  transform: scale(0.98);
}

.btn[disabled],
.btn.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

/* Sizes */
.btn--sm {
  height: var(--btn-h-sm);
  padding: 0 var(--btn-pad-x-sm);
  font-size: 12.5px;
  border-radius: var(--btn-radius-sm);
}
.btn--block {
  width: 100%;
}

/* Icon-only */
.btn--icon {
  width: var(--btn-h);
  padding: 0;
}
.btn--icon.btn--sm {
  width: var(--btn-h-sm);
}

/* ==========================================================
   Variantes métier
   (par défaut : plein + hover)
   ========================================================== */

/* ADD : vert + icône + */
.btn--add {
  background: var(--c-success);
  color: var(--c-on);
}
.btn--add:hover {
  background: var(--c-success-2);
}

/* DELETE : rouge, et option “peur” quand texte */
.btn--delete {
  background: var(--c-danger);
  color: var(--c-on);
}
.btn--delete:hover {
  background: var(--c-danger-2);
   filter: saturate(1.1);
}

/* Variante “peur” (quand tu mets du texte) */
.btn--delete.btn--scary {
  box-shadow: 0 0 0 2px rgba(192, 57, 43, 0.18);
}
.btn--delete.btn--scary:hover {
  filter: saturate(1.1);
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.22);
}

/* EDIT : primaire (bleu) */
.btn--edit {
  background: var(--c-primary);
  color: var(--c-on);
}
.btn--edit:hover {
  background: var(--c-primary-2);
}

/* VALIDATE : vert (comme add) mais sémantique différente */
.btn--validate {
  background: var(--c-success);
  color: var(--c-on);
}
.btn--validate:hover {
  background: var(--c-success-2);
}

/* CANCEL : neutre, souvent outline/ghost */
.btn--cancel {
  background: var(--c-neutral);
  color: var(--c-on);
}
.btn--cancel:hover {
  background: var(--c-neutral-2);
}

/* IMPORT : warning (orange) */
.btn--import {
  background: var(--c-warning);
  color: var(--c-on);
}
.btn--import:hover {
  background: var(--c-warning-2);
}

/* EXPORT : outline primaire (pas dangereux) */
.btn--export {
  background: transparent;
  color: var(--c-primary);
  border: 1px solid rgba(0, 105, 217, 0.25);
}
.btn--export:hover {
  background: rgba(0, 105, 217, 0.08);
}

/* ACTION générique : neutre (ou primaire) */
.btn--action {
  background: #eef2f7;
  color: #223;
  border: 1px solid rgba(0, 0, 0, 0.12);
}
.btn--action:hover {
  background: #e6ebf3;
}

.btn--action2 {
  background: rgba(0, 105, 217, 0.1);
  color: #0b3b7a;
  border: 1px solid rgba(0, 105, 217, 0.18);
}
.btn--action2:hover {
  background: rgba(0, 105, 217, 0.16);
}

/* Petites icônes alignées si tu encapsules */
.btn__icon {
  line-height: 1;
}

/* ==========================================================
   YES / NO — décisions binaires
   ========================================================== */

/* YES : validation claire, rassurante */
.btn--yes {
  background: var(--c-success);
  color: var(--c-on);
}
.btn--yes:hover {
  background: var(--c-success-2);
}

/* NO : refus explicite, sans être “delete” */
.btn--no {
  background: var(--c-danger);
  color: var(--c-on);
}
.btn--no:hover {
  background: var(--c-danger-2);
}

/* Option confort : léger anneau pour renforcer la décision */
.btn--yes.btn--decide,
.btn--no.btn--decide {
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.08);
}
.btn--yes.btn--decide:hover,
.btn--no.btn--decide:hover {
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12);
}

/* NO SOFT : refus sans danger */
.btn--no-soft {
  background: var(--c-neutral);
  color: var(--c-on);
}
.btn--no-soft:hover {
  background: var(--c-neutral-2);
}

/* ==========================================================
   RENDUS PRIORITAIRES (override métier)
   ========================================================== */
/* NOTE: btn--outline/btn--ghost sont des modes de rendu neutres et gagnent sur les variantes métier */

.btn.btn--outline {
  background: transparent !important;
  color: var(--c-text) !important;
  border: var(--btn-border) !important;
}

.btn.btn--outline:hover {
  background: rgba(0, 0, 0, 0.04)!important;
}

.btn.btn--ghost {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--c-primary) !important;
}

.btn.btn--ghost:hover {
  background: rgba(0, 105, 217, 0.08)!important;
}