/*
 * SWSM 2026 - assistant d'aide guide.
 *
 * Toutes les classes sont prefixees swsm-assist- : aucune collision
 * possible avec les classes swsm-* existantes du site.
 *
 * ARCH-DECISION sur les z-index. Releve du site : banniere de
 * consentement Complianz 99999, bouton "Manage consent" 9998 (fixe en
 * bas a gauche), en-tete du theme 9990. L'assistant se place sous les
 * trois. La fenetre est plafonnee a 100vh - 88px, elle n'atteint donc
 * jamais l'en-tete : aucune bagarre de z-index n'est possible.
 */

.swsm-assist {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 9980;
	font-family: "DM Sans", sans-serif;
	font-size: 15px;
	line-height: 1.5;
}

.swsm-assist[hidden] {
	display: none;
}

.swsm-assist__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* --- La bulle ------------------------------------------------------ */

.swsm-assist__bubble {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #2FAAE1;
	color: #062133;
	cursor: pointer;
	box-shadow: 0 2px 12px rgba(6, 33, 51, 0.35);
	transition: background 160ms ease, transform 160ms ease;
}

.swsm-assist__bubble:hover {
	background: #5FC4F0;
}

.swsm-assist__bubble:focus-visible {
	outline: 3px solid #F1F6F9;
	outline-offset: 3px;
}

.swsm-assist__bubble svg {
	width: 26px;
	height: 26px;
	fill: currentColor;
}

/* --- La fenetre ---------------------------------------------------- */

.swsm-assist__panel {
	position: absolute;
	right: 0;
	bottom: 72px;
	display: flex;
	flex-direction: column;
	width: 380px;
	max-height: calc(100vh - 200px);
	overflow: hidden;
	border: 1px solid rgba(241, 246, 249, 0.14);
	border-radius: 16px;
	background: #0A2A40;
	color: #F1F6F9;
	box-shadow: 0 8px 32px rgba(6, 33, 51, 0.45);
	z-index: 9985;
}

.swsm-assist__panel[hidden] {
	display: none;
}

.swsm-assist__head {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 16px 16px 12px;
	border-bottom: 1px solid rgba(241, 246, 249, 0.14);
}

.swsm-assist__title {
	margin: 0;
	font-family: "Zilla Slab", serif;
	font-size: 16px;
	font-weight: 600;
	color: #F1F6F9;
}

.swsm-assist__sub {
	margin: 2px 0 0;
	font-size: 12px;
	color: #9DB4C2;
}

.swsm-assist__sub a {
	color: #9DB4C2;
	text-decoration: underline;
}

.swsm-assist__close {
	margin-left: auto;
	min-width: 44px;
	min-height: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: #9DB4C2;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

.swsm-assist__close:hover {
	color: #F1F6F9;
}

.swsm-assist__body {
	flex: 1 1 auto;
	padding: 16px;
	overflow-y: auto;
}

.swsm-assist__foot {
	padding: 12px 16px;
	border-top: 1px solid rgba(241, 246, 249, 0.14);
	font-size: 13px;
	color: #9DB4C2;
}

.swsm-assist__foot a {
	color: #5FC4F0;
}

/*
 * Les deux liens en ligne - Privacy Policy en en-tete, Contact the
 * secretariat en pied - sont des liens dans une phrase : WCAG 2.2 les
 * dispense de la taille minimale de cible (critere 2.5.8, exception
 * "inline"). Leur zone tactile est tout de meme agrandie, sans les
 * sortir du flux du texte, ce qu'une hauteur de 44 px imposerait.
 */
.swsm-assist__foot a,
.swsm-assist__sub a {
	display: inline-block;
	padding: 6px 2px;
}

/* --- Contenu ------------------------------------------------------- */

.swsm-assist__lead {
	margin: 0 0 12px;
	font-size: 14px;
	color: #9DB4C2;
}

.swsm-assist__choices {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Le theme impose list-style-type: disc sur les li, plus specifique
 * qu'un list-style sur le ul : la puce doit etre retiree sur le li
 * lui-meme, sans quoi elle s'affiche devant chaque bouton.
 */
.swsm-assist__choices li,
.swsm-assist__links li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.swsm-assist__choice {
	display: block;
	width: 100%;
	min-height: 44px;
	padding: 11px 14px;
	border: 1px solid rgba(241, 246, 249, 0.18);
	border-radius: 10px;
	background: transparent;
	color: #F1F6F9;
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: background 120ms ease;
}

.swsm-assist__choice:hover {
	background: #13324A;
}

.swsm-assist__choice:focus-visible {
	outline: 2px solid #5FC4F0;
	outline-offset: 2px;
}

.swsm-assist__answer {
	margin: 0 0 12px;
}

.swsm-assist__steps {
	margin: 0 0 12px;
	padding-left: 20px;
	color: #F1F6F9;
}

.swsm-assist__steps li {
	margin-bottom: 6px;
}

.swsm-assist__links {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0 0 12px;
	padding: 0;
	list-style: none;
}

.swsm-assist__link {
	display: block;
	min-height: 44px;
	padding: 11px 14px;
	border-radius: 10px;
	background: #13324A;
	color: #F1F6F9;
	text-decoration: none;
}

.swsm-assist__link:hover {
	background: #1B4160;
	color: #FFFFFF;
}

.swsm-assist__nav {
	display: flex;
	gap: 8px;
	margin-top: 16px;
	padding-top: 12px;
	border-top: 1px solid rgba(241, 246, 249, 0.14);
}

.swsm-assist__nav button {
	min-height: 44px;
	padding: 10px 14px;
	border: 1px solid rgba(241, 246, 249, 0.18);
	border-radius: 10px;
	background: transparent;
	color: #9DB4C2;
	font: inherit;
	cursor: pointer;
}

.swsm-assist__nav button:hover {
	color: #F1F6F9;
}

/* --- Recherche ----------------------------------------------------- */

.swsm-assist__search {
	display: flex;
	gap: 8px;
	margin-top: 16px;
	padding-top: 12px;
	border-top: 1px solid rgba(241, 246, 249, 0.14);
}

.swsm-assist__input {
	flex: 1 1 auto;
	min-height: 44px;
	padding: 10px 12px;
	border: 1px solid rgba(241, 246, 249, 0.22);
	border-radius: 10px;
	background: #062133;
	color: #F1F6F9;
	font: inherit;
}

.swsm-assist__input::placeholder {
	color: #7E97A6;
}

.swsm-assist__input:focus-visible {
	outline: 2px solid #5FC4F0;
	outline-offset: 1px;
}

.swsm-assist__send {
	min-width: 44px;
	min-height: 44px;
	padding: 10px 14px;
	border: 0;
	border-radius: 10px;
	background: #2FAAE1;
	color: #062133;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.swsm-assist__send[disabled] {
	opacity: 0.45;
	cursor: not-allowed;
}

/* --- Mobile : plein ecran ------------------------------------------ */

/*
 * ARCH-DECISION : plein ecran sous 768 px. Une fenetre flottante de
 * 380 px voit son champ de saisie recouvert des que le clavier virtuel
 * s'ouvre sur iOS. Le plein ecran est la seule mise en page qui ne
 * lutte pas avec le clavier.
 */
@media (max-width: 767px) {

	.swsm-assist {
		right: 16px;
		bottom: 16px;
	}

	.swsm-assist__bubble {
		width: 52px;
		height: 52px;
	}

	.swsm-assist__panel {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		width: auto;
		max-height: calc(100vh - 108px);
		border-radius: 16px 16px 0 0;
	}

	/*
	 * En pleine largeur, le pied du panneau passe sous le bouton
	 * "Manage consent", fixe en bas a gauche (52 px a 16 px du bord,
	 * z-index 9998, donc au-dessus du panneau). Le texte est decale
	 * pour degager ce coin : le bouton de consentement doit rester
	 * visible et cliquable en toutes circonstances.
	 */
	.swsm-assist__foot {
		padding-left: 80px;
	}
}

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

	.swsm-assist__bubble,
	.swsm-assist__choice,
	.swsm-assist__link {
		transition: none;
	}
}