/**
 * Api Sens — Onglet flottant « Mon diagnostic peau »
 * Languette fixée au bord droit, verticalement centrée. Charte Api Sens codée
 * en dur (indépendante de la compilation Tailwind du thème) :
 *   - Bleu canard  #194951  (fond signature)
 *   - Jaune miel   #eec227  (picto / liseré / hover)
 *   - Crème        #fbf8f1  (texte sur fond bleu)
 * z-index 40 : au-dessus du contenu et de la navbar sticky (z-30), sous le
 * drawer mobile (z-50) pour ne jamais transpercer l'overlay du menu.
 * Encapsulé sous .apisens-quiz-launcher — ne fuite pas dans le thème.
 */

.apisens-quiz-launcher {
	--aql-blue: #194951;
	--aql-blue-600: #143b41;
	--aql-honey: #eec227;
	--aql-cream: #fbf8f1;

	position: fixed;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	z-index: 40;

	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 0.6rem;
	padding: 1.05rem 0.5rem 1.15rem;

	background: var(--aql-blue);
	color: var(--aql-cream);
	border: 1px solid rgba(238, 194, 39, 0.55);
	border-right: 0;
	border-radius: 16px 0 0 16px;
	box-shadow: -12px 16px 38px -20px rgba(15, 46, 52, 0.65);

	text-decoration: none;
	font-family: "Poppins", "Quicksand", ui-sans-serif, system-ui, sans-serif;
	cursor: pointer;

	transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1),
		background-color 0.35s ease, color 0.35s ease, box-shadow 0.35s ease,
		padding 0.35s ease;
}

.apisens-quiz-launcher:hover,
.apisens-quiz-launcher:focus-visible {
	background: var(--aql-honey);
	color: var(--aql-blue);
	transform: translateY(-50%) translateX(-4px);
	padding-bottom: 1.35rem;
	box-shadow: -16px 20px 44px -20px rgba(15, 46, 52, 0.55);
}

.apisens-quiz-launcher:focus-visible {
	outline: 3px solid var(--aql-blue);
	outline-offset: 3px;
}

/* Picto sceau botanique (étoile 4 branches de la charte). */
.apisens-quiz-launcher__icon {
	display: inline-flex;
	color: var(--aql-honey);
	transition: color 0.35s ease, transform 0.45s ease;
}
.apisens-quiz-launcher__icon svg {
	width: 22px;
	height: 22px;
	display: block;
}
.apisens-quiz-launcher:hover .apisens-quiz-launcher__icon,
.apisens-quiz-launcher:focus-visible .apisens-quiz-launcher__icon {
	color: var(--aql-blue);
	transform: rotate(90deg);
}

/* Libellé vertical. */
.apisens-quiz-launcher__label {
	writing-mode: vertical-rl;
	text-orientation: mixed;
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	line-height: 1;
}

/* Mobile : languette un peu plus compacte. */
@media (max-width: 640px) {
	.apisens-quiz-launcher {
		gap: 0.5rem;
		padding: 0.85rem 0.4rem 0.95rem;
		border-radius: 13px 0 0 13px;
	}
	.apisens-quiz-launcher__icon svg {
		width: 18px;
		height: 18px;
	}
	.apisens-quiz-launcher__label {
		font-size: 0.66rem;
		letter-spacing: 0.18em;
	}
}

@media (prefers-reduced-motion: reduce) {
	.apisens-quiz-launcher,
	.apisens-quiz-launcher__icon {
		transition: none;
	}
	.apisens-quiz-launcher:hover,
	.apisens-quiz-launcher:focus-visible {
		transform: translateY(-50%);
	}
	.apisens-quiz-launcher:hover .apisens-quiz-launcher__icon,
	.apisens-quiz-launcher:focus-visible .apisens-quiz-launcher__icon {
		transform: none;
	}
}

@media print {
	.apisens-quiz-launcher {
		display: none !important;
	}
}