/* assets/css/btn.css */

/* BASE */
.btn, a.btn, button.btn {
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:10px;
	height:44px;
	padding:0 16px;
	border-radius:14px;
	border:1px solid rgba(255,255,255,.14);
	background:rgba(255,255,255,.10);
	color:rgba(255,255,255,.92);
	cursor:pointer;
	user-select:none;
	text-decoration:none;
	font-family:inherit;
	font-size:14px;
	font-weight:800;
	letter-spacing:.2px;
	line-height:1;
	-webkit-appearance:none;
	appearance:none;
	transition:transform 120ms ease, background 120ms ease, border-color 120ms ease, opacity 120ms ease, box-shadow 120ms ease;
}

.btn:hover, a.btn:hover, button.btn:hover {
	background:rgba(255,255,255,.14);
	border-color:rgba(255,255,255,.18);
	text-decoration:none;
}

.btn:active, a.btn:active, button.btn:active {
	transform:translateY(1px);
}

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

/* ICONS */
.btn img, a.btn img, button.btn img {
	width:20px;
	height:20px;
	display:block;
}

/* PRIMARY */
.btn--primary, a.btn--primary, button.btn--primary {
	background:linear-gradient(135deg,#ff00ff 10%,#1c00ff 90%);
	color:#fff;
	border:0;
}


.btn--primary:hover, a.btn--primary:hover, button.btn--primary:hover {
	background:linear-gradient(135deg,#ff2dff 10%,#1c00ff 90%);
	color:#fff;
}

/* GHOST */
.btn--ghost, a.btn--ghost, button.btn--ghost {
	background:transparent;
	color:rgba(255,255,255,.92);
	border-color:rgba(255,255,255,.14);
}

.btn--ghost:hover, a.btn--ghost:hover, button.btn--ghost:hover {
	background:rgba(255,255,255,.08);
	border-color:rgba(255,255,255,.22);
}

/* DANGER */
.btn--danger, a.btn--danger, button.btn--danger {
	background:rgba(255,70,70,.95);
	border-color:rgba(255,90,90,.55);
	color:#fff;
}

.btn--danger:hover, a.btn--danger:hover, button.btn--danger:hover {
	background:rgba(255,70,70,.85);
}

.is-copied {background:#ff2dff!important;border:1px solid #ff2dff!important}


/* MOBILE */
@media (max-width:420px) {
	.btn, a.btn, button.btn {
		width:100%;
	}
}

.photo_profil.size_normal img {width:48px;height:48px;}
.photo_profil.size_big img {width:84px;height:84px;}

.photo_profil img {border-radius:48px;background:#333}
.page-loader{position:fixed;inset:0;z-index:9999;background:#111;display:flex;align-items:center;justify-content:center;opacity:1;transition:opacity .25s ease;}
.page-loader.is-hidden{opacity:0;pointer-events:none;}
.spinner{width:48px;height:48px;border:3px solid rgba(255,255,255,.2);border-top-color:#fff;border-radius:50%;animation:spin 1s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

/* À coller TOUT EN BAS du CSS commun (pour override l’ancienne règle .user-img-del) */

.user-img-del{
	width:34px;
	height:34px;
	display:flex;
	align-items:center;
	justify-content:center;
	border:0;
	border-radius:10px;
	background:rgba(255,77,77,1);
	backdrop-filter:blur(6px);
	cursor:pointer;
	padding:0;
	flex-shrink:0;
}

.user-img-del img{
	width:18px;
	height:18px;
	display:block;
}

.user-img-del:hover{
	background:rgba(255,77,77,.70);
}

.user-img-del:active{
	transform:translateY(1px);
}

.user-img-del:disabled{
	opacity:.9;
	cursor:not-allowed;
	transform:none;
}