/**
 * Bouton flottant « Faites le test ! ».
 *
 * Feuille autonome, chargée seulement sur les pages où le bouton s'affiche :
 * elle n'emprunte rien à qcm.css, qui n'est présent que sur la page du
 * questionnaire. Tout est préfixé .lacense-qcm-cta pour ne rien imposer au
 * thème et ne rien lui emprunter.
 *
 * Charte la Cense : vert #79B51D, brun #522B0D.
 */

.lacense-qcm-cta {
	--lqc-green: #79b51d;
	--lqc-green-dark: #547e15;
	--lqc-brown: #522b0d;

	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 99997; /* juste sous le bouton d'opt-in produit, qui est à 99998 */

	display: inline-flex;
	align-items: center;
	gap: 13px;
	max-width: calc( 100vw - 40px );
	margin: 0;
	padding: 12px 18px 12px 13px;
	border-radius: 999px;
	background: linear-gradient( 135deg, var( --lqc-green ) 0%, var( --lqc-green-dark ) 100% );
	box-shadow:
		0 2px 6px rgba( 82, 43, 13, 0.16 ),
		0 14px 34px rgba( 82, 43, 13, 0.26 );
	color: #fff;
	font-family: "Poppins", "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	line-height: 1.25;
	text-align: left;
	text-decoration: none;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

/*
 * Le thème colore les liens : on réaffirme le blanc à chaque état, sinon la
 * couleur de lien du thème traverse le dégradé au survol.
 */
.lacense-qcm-cta:hover,
.lacense-qcm-cta:focus,
.lacense-qcm-cta:active,
.lacense-qcm-cta:visited {
	color: #fff;
	text-decoration: none;
}

.lacense-qcm-cta:hover,
.lacense-qcm-cta:focus-visible {
	transform: translateY( -2px );
	box-shadow:
		0 3px 8px rgba( 82, 43, 13, 0.2 ),
		0 18px 42px rgba( 82, 43, 13, 0.32 );
}

.lacense-qcm-cta:focus-visible {
	outline: 3px solid var( --lqc-brown );
	outline-offset: 3px;
}

.lacense-qcm-cta__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgba( 255, 255, 255, 0.18 );
	color: #fff;
}

.lacense-qcm-cta__text {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

.lacense-qcm-cta__title {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.lacense-qcm-cta__sub {
	font-size: 12.5px;
	font-weight: 400;
	color: rgba( 255, 255, 255, 0.88 );
}

.lacense-qcm-cta__arrow {
	display: inline-flex;
	flex: 0 0 auto;
	color: rgba( 255, 255, 255, 0.85 );
	transition: transform 0.18s ease;
}

.lacense-qcm-cta:hover .lacense-qcm-cta__arrow {
	transform: translateX( 3px );
}

/*
 * Sur mobile, seule la flèche disparaît : elle ne porte aucune information, et
 * la place qu'elle libère revient au sous-texte, qui lui reste affiché.
 *
 * La question passe sur deux lignes si nécessaire — d'où le retrait du
 * `white-space: nowrap` qu'on pourrait être tenté de mettre ici. La largeur est
 * bornée pour que la pastille ne touche jamais les bords de l'écran.
 */
@media ( max-width: 600px ) {

	.lacense-qcm-cta {
		right: 12px;
		bottom: 12px;
		gap: 10px;
		max-width: calc( 100vw - 24px );
		padding: 10px 16px 10px 11px;
	}

	.lacense-qcm-cta__arrow {
		display: none;
	}

	.lacense-qcm-cta__icon {
		width: 32px;
		height: 32px;
	}

	.lacense-qcm-cta__title {
		font-size: 14px;
	}

	.lacense-qcm-cta__sub {
		font-size: 12px;
		line-height: 1.35;
	}
}

@media ( prefers-reduced-motion: reduce ) {

	.lacense-qcm-cta,
	.lacense-qcm-cta__arrow {
		transition: none;
	}

	.lacense-qcm-cta:hover,
	.lacense-qcm-cta:focus-visible {
		transform: none;
	}

	.lacense-qcm-cta:hover .lacense-qcm-cta__arrow {
		transform: none;
	}
}