/* Boutons de connexion — styles front */

.hsaab__group {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

/* Tant que le script n'a pas tranché, on montre l'état non connecté :
   c'est le cas majoritaire, et le bloc reste utilisable sans JavaScript. */
.hsaab__group--in {
	display: none;
}

.hsaab.is-connected .hsaab__group--out {
	display: none;
}

.hsaab.is-connected .hsaab__group--in {
	display: flex;
}

.hsaab__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 18px;
	border: 2px solid transparent;
	border-radius: 2px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}

.hsaab__btn--primary {
	border-color: #ffc800;
	background-color: #ffc800;
	color: #111;
}

.hsaab__btn--secondary {
	border-color: #ffc800;
	background-color: transparent;
	color: #111;
}

.hsaab__btn:focus-visible {
	outline: 2px solid #111;
	outline-offset: 3px;
}

/* --- Icônes -------------------------------------------------------------- */

.hsaab__icon {
	display: none;
	align-items: center;
	justify-content: center;
	width: 1.15em;
	height: 1.15em;
}

.hsaab__icon svg {
	width: 100%;
	height: 100%;
	fill: currentColor;
}

/* Icônes visibles partout, si l'option est activée. */
.hsaab--icons .hsaab__icon {
	display: inline-flex !important;
	margin-right: 0.5em;
}

/* --- Tablettes et mobiles : boutons réduits à leur icône ----------------- */

@media (max-width: 1024px) {
	.hsaab__btn.is-m-icon {
		gap: 0;
		padding-inline: 0;
		aspect-ratio: 1 / 1;
	}

	.hsaab__btn.is-m-icon .hsaab__icon {
		display: inline-flex !important;
		width: 1.4em;
		height: 1.4em;
		margin: 0;
	}

	/* Le libellé reste dans le document pour les lecteurs d'écran. */
	.hsaab__btn.is-m-icon .hsaab__label {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

/* Alignement « Étiré » : les boutons se partagent la largeur. */
.hsaab__group[style*="stretch"] .hsaab__btn,
.hsaab__group.is-stretch .hsaab__btn {
	flex: 1 1 auto;
}

@media (prefers-reduced-motion: reduce) {
	.hsaab__btn {
		transition: none;
	}
}