/* =========================
   BOUTONS
   .btn + une variante. Les anciennes classes (.save-btn,
   .delete-btn, .edit-button) restent valides et retombent sur
   le même système.
========================= */

.btn,
.save-btn,
.delete-btn,
.edit-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;

	padding: 10px 16px;

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

	background: var(--surface);
	color: var(--text);

	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;

	cursor: pointer;

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

.btn:active,
.save-btn:active,
.delete-btn:active,
.edit-button:active {
	transform: translateY(1px);
}

/* ---- primaire ---- */

.btn-primary {
	background: var(--primary);
	color: var(--text-invert);
}

.btn-primary:hover {
	background: var(--primary-dark);
}

/* ---- validation (sauvegarde) ---- */

.btn-success,
.save-btn {
	background: var(--success);
	color: var(--text-invert);
}

.btn-success:hover,
.save-btn:hover {
	background: var(--success-dark);
}

/* ---- secondaire / discret ---- */

.btn-ghost,
.edit-button {
	background: var(--surface);
	border-color: var(--border-strong);
	color: var(--text-soft);
}

.btn-ghost:hover,
.edit-button:hover {
	background: var(--surface-alt);
	border-color: var(--primary);
	color: var(--primary-dark);
}

/* ---- destructif ---- */

.btn-danger,
.delete-btn {
	background: var(--danger);
	color: var(--text-invert);
}

.btn-danger:hover,
.delete-btn:hover {
	background: var(--danger-dark);
}

/* destructif discret : présent sans crier, pour les actions
   qu'on ne veut surtout pas cliquer par réflexe */
.btn-danger-ghost {
	background: transparent;
	border-color: transparent;
	color: var(--danger);
}

.btn-danger-ghost:hover {
	background: var(--danger-soft);
	border-color: var(--danger);
}

/* ---- tailles ---- */

.btn-sm {
	padding: 6px 12px;
	font-size: 14px;
}

.btn-block {
	width: 100%;
}

.btn:disabled,
.save-btn:disabled {
	background: var(--border-strong);
	border-color: transparent;
	color: var(--surface);
	cursor: not-allowed;
}

.delete-btn.hidden,
.btn.hidden {
	display: none;
}

/* raccourci clavier affiché dans un bouton */
.btn kbd {
	padding: 1px 5px;

	border-radius: 4px;
	background: rgba(255, 255, 255, 0.22);

	font-family: inherit;
	font-size: 12px;
	font-weight: 600;
}