/* =========================================================================
   Astus, l'assistant des visiteurs : la bulle et son panneau.

   AUCUNE COULEUR INVENTEE. Tout vient du modele du site :
   - Corpus publie ses jetons (--accent, --fond, --texte...), qui suivent
     aussi son mode sombre : la classe .astus-v--corpus les reprend ;
   - sinon, la couleur primaire de Cassiopeia et les variables de Bootstrap ;
   - la couleur du module, si l'administrateur en impose une, est posee en
     ligne et gagne sur les deux.
   Les valeurs en dur ne sont que le dernier repli d'un modele qui ne publie
   rien.
   ========================================================================= */

.astus-v {
	--av-accent: var(--cassiopeia-color-primary, var(--bs-primary, #1f4e79));
	--av-accent-texte: #ffffff;
	--av-accent-survol: color-mix(in srgb, var(--av-accent) 82%, #000000);
	--av-fond: var(--bs-body-bg, #ffffff);
	--av-fond-alt: var(--bs-tertiary-bg, #f4f5f7);
	--av-texte: var(--bs-body-color, #22262a);
	--av-texte-doux: var(--bs-secondary-color, #50565d);
	--av-bord: var(--bs-border-color, #c9ced4);
	--av-angle: var(--bs-border-radius, 0.5rem);
	--av-focus: var(--av-accent);
	--av-marge: 1.25rem;
	--av-largeur: 25rem;

	position: fixed;
	z-index: 1040;
	inset-block-end: var(--av-marge);
	inset-inline-end: var(--av-marge);
	color: var(--av-texte);
	font-size: 1rem;
	line-height: 1.45;
	text-align: start;
}

.astus-v--corpus {
	--av-accent: var(--accent);
	--av-accent-texte: var(--accent-texte);
	--av-accent-survol: var(--accent-survol);
	--av-fond: var(--fond-eleve);
	--av-fond-alt: var(--fond-alt);
	--av-texte: var(--texte);
	--av-texte-doux: var(--texte-doux);
	--av-bord: var(--bord);
	--av-angle: var(--angle);
	--av-focus: var(--focus);
	font-family: var(--police);
}

.astus-v--gauche {
	inset-inline-end: auto;
	inset-inline-start: var(--av-marge);
}

/* Un bouton « remonter » fixe dans le meme coin : on monte d'un cran plutot
   que de le recouvrir. Classe posee par le script quand il en trouve un. */
.astus-v--au-dessus {
	inset-block-end: calc(var(--av-marge) + 3.75rem);
}

.astus-v *,
.astus-v *::before,
.astus-v *::after {
	box-sizing: border-box;
}

.astus-v [hidden] {
	display: none !important;
}

.astus-v :focus-visible {
	outline: 3px solid var(--av-focus);
	outline-offset: 2px;
}

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

.astus-v-bulle {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	max-width: min(22rem, calc(100vw - 2 * var(--av-marge)));
	min-height: 3rem;
	margin: 0;
	padding: 0.5rem 1.25rem 0.5rem 0.5rem;
	border: 0;
	border-radius: 2rem;
	background: var(--av-accent);
	color: var(--av-accent-texte);
	font: inherit;
	text-align: start;
	cursor: pointer;
	box-shadow: 0 6px 20px rgb(20 30 45 / 0.22);
}

.astus-v-bulle:hover {
	background: var(--av-accent-survol);
}

.astus-v-bulle:focus-visible {
	outline-color: var(--av-texte);
}

.astus-v-bulle-icone {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	background: color-mix(in srgb, currentColor 16%, transparent);
}

.astus-v-bulle-mots {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
}

.astus-v-bulle-titre {
	font-weight: 700;
}

.astus-v-bulle-texte {
	font-size: 0.9375rem;
}

/* La petite bulle : ronde, l'icone seule, et la mention « IA » toujours
   visible. Le visiteur doit savoir qu'il s'adresse a une IA avant d'ouvrir. */
.astus-v-bulle-ia {
	display: none;
}

.astus-v--ronde .astus-v-bulle {
	position: relative;
	justify-content: center;
	width: 3.5rem;
	height: 3.5rem;
	min-height: 0;
	padding: 0;
	border-radius: 50%;
}

.astus-v--ronde .astus-v-bulle-mots {
	display: none;
}

.astus-v--ronde .astus-v-bulle-icone {
	width: 3.5rem;
	height: 3.5rem;
	background: transparent;
}

.astus-v--ronde .astus-v-bulle-ia {
	position: absolute;
	inset-block-start: -0.25rem;
	inset-inline-end: -0.25rem;
	display: block;
	padding: 0.05rem 0.4rem;
	border: 2px solid var(--av-accent);
	border-radius: 1rem;
	background: var(--av-fond);
	color: var(--av-texte);
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.3;
}

/* --- Le panneau --------------------------------------------------------- */

.astus-v-panneau {
	position: fixed;
	inset-block: 0;
	inset-inline-end: 0;
	display: flex;
	flex-direction: column;
	width: var(--av-largeur);
	max-width: 100vw;
	height: 100vh;
	height: 100dvh;
	background: var(--av-fond);
	color: var(--av-texte);
	border-inline-start: 1px solid var(--av-bord);
	box-shadow: -8px 0 24px rgb(20 30 45 / 0.12);
}

.astus-v--gauche .astus-v-panneau {
	inset-inline-end: auto;
	inset-inline-start: 0;
	border-inline-start: 0;
	border-inline-end: 1px solid var(--av-bord);
}

.astus-v-tete {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	gap: 0.25rem;
	min-height: 4rem;
	padding: 0 0.5rem 0 1.25rem;
	background: var(--av-accent);
	color: var(--av-accent-texte);
}

.astus-v-titre {
	display: flex;
	flex-grow: 1;
	align-items: center;
	gap: 0.625rem;
	margin: 0;
	color: inherit;
	font: inherit;
	font-size: 1.125rem;
	font-weight: 700;
}

/* Corpus souligne ses h2 d'un trait : le panneau a deja son filet. */
.astus-v-titre::before,
.astus-v-titre::after {
	content: none;
}

.astus-v-badge {
	padding: 0.1rem 0.5rem;
	border-radius: 1rem;
	background: color-mix(in srgb, currentColor 20%, transparent);
	font-size: 0.8125rem;
	font-weight: 700;
}

.astus-v-icone {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--av-angle);
	background: transparent;
	color: inherit;
	cursor: pointer;
}

.astus-v-icone:hover {
	background: color-mix(in srgb, currentColor 14%, transparent);
}

.astus-v-icone:focus-visible {
	outline-color: currentColor;
	outline-offset: -3px;
}

/* --- Le fil de la conversation ------------------------------------------ */

.astus-v-fil {
	display: flex;
	flex-grow: 1;
	flex-direction: column;
	gap: 1rem;
	overflow-y: auto;
	padding: 1.25rem;
	background: var(--av-fond-alt);
	overscroll-behavior: contain;
}

.astus-v-msg {
	max-width: 90%;
	margin: 0;
	padding: 0.75rem 0.875rem;
	border-radius: 0.75rem;
	white-space: pre-line;
	overflow-wrap: anywhere;
}

.astus-v-msg--ia {
	align-self: flex-start;
	border: 1px solid var(--av-bord);
	background: var(--av-fond);
}

.astus-v-msg--vous {
	align-self: flex-end;
	background: var(--av-accent);
	color: var(--av-accent-texte);
}

.astus-v-msg--attente {
	color: var(--av-texte-doux);
	font-style: italic;
}

.astus-v-msg p {
	margin: 0;
}

.astus-v-liens {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin: 0.75rem 0 0;
	padding: 0;
	list-style: none;
	white-space: normal;
}

.astus-v-lien {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.625rem;
	min-height: 2.75rem;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--av-bord);
	border-radius: var(--av-angle);
	color: var(--av-texte);
	font-weight: 700;
	text-decoration: none;
}

.astus-v-lien:hover {
	border-color: var(--av-accent);
	text-decoration: underline;
}

.astus-v-lien svg {
	flex-shrink: 0;
	color: var(--av-accent);
}

.astus-v-secours {
	align-self: flex-start;
	color: var(--av-texte);
	font-size: 0.9375rem;
	text-decoration: underline;
}

.astus-v-masque {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Ressources exterieures : un intertitre discret au-dessus des liens. */
.astus-v-ailleurs {
	margin: 0.75rem 0 0 !important;
	color: var(--av-texte-doux);
	font-size: 0.875rem;
	font-weight: 600;
}

.astus-v-ailleurs + .astus-v-liens {
	margin-top: 0.5rem;
}

/* L'issue de secours : ecrire a l'equipe quand l'assistant n'a pas trouve. */
.astus-v-issue {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	align-self: stretch;
	padding: 0.75rem 0.875rem;
	border: 1px dashed var(--av-bord);
	border-radius: 0.75rem;
	background: var(--av-fond);
}

.astus-v-issue p {
	margin: 0;
	font-weight: 600;
}

/* --- La saisie ---------------------------------------------------------- */

.astus-v-pied {
	display: flex;
	flex-shrink: 0;
	flex-direction: column;
	gap: 0.5rem;
	margin: 0;
	padding: 0.875rem 1.25rem 1rem;
	border-top: 1px solid var(--av-bord);
	background: var(--av-fond);
}

.astus-v-label {
	margin: 0;
	font-size: 0.875rem;
	font-weight: 600;
}

.astus-v-saisie {
	display: flex;
	gap: 0.5rem;
}

.astus-v-champ {
	flex-grow: 1;
	min-width: 0;
	height: 2.75rem;
	margin: 0;
	padding: 0 0.75rem;
	border: 1px solid var(--av-texte-doux);
	border-radius: var(--av-angle);
	background: var(--av-fond);
	color: var(--av-texte);
	font: inherit;
	/* 16 px au moins : en dessous, Safari zoome sur le champ au toucher. */
	font-size: max(1rem, 16px);
}

.astus-v-champ:focus-visible {
	outline-offset: 0;
}

.astus-v-envoyer {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--av-angle);
	background: var(--av-accent);
	color: var(--av-accent-texte);
	cursor: pointer;
}

.astus-v-envoyer:hover {
	background: var(--av-accent-survol);
}

.astus-v-envoyer[aria-disabled="true"] {
	opacity: 0.55;
	cursor: wait;
}

.astus-v-note {
	margin: 0;
	color: var(--av-texte-doux);
	font-size: 0.8125rem;
	line-height: 1.4;
}

.astus-v-note a {
	color: inherit;
	text-decoration: underline;
}

/* =========================================================================
   LE DESSIN D'OPUS ET DE CORPUS

   Ecrit APRES le reste, a dessein : a specificite egale, la derniere regle
   gagne. Rien ne change dans le fonctionnement, seulement l'habit.

   Le vocabulaire est celui des cartes et des messages d'Opus (feuille
   `sans-corpus.css`) et de Corpus : un trait fin qui se renforce au survol avec
   une ombre douce, des messages teintes soulignes d'un filet a l'accent, un
   en-tete clair dont le titre porte son filet. Sous Corpus, ce sont SES jetons
   de forme qui servent ; ailleurs, les replis d'Opus pour Cassiopeia.
   ========================================================================= */

.astus-v {
	--av-bord-fort: color-mix(in srgb, var(--av-texte) 30%, transparent);
	--av-angle-carte: var(--bs-border-radius-lg, 0.75rem);
	--av-angle-bouton: var(--bs-border-radius, 0.375rem);
	--av-ombre-survol: 0 2px 8px rgb(0 0 0 / 10%);
	--av-accent-doux: color-mix(in srgb, var(--av-accent) 10%, var(--av-fond));
	--av-message-fond: color-mix(in srgb, var(--av-accent) 7%, var(--av-fond));
	--av-filet: var(--av-accent);
	--av-filet-part: 70%;
	--av-filet-epaisseur: 2px;
}

.astus-v--corpus {
	--av-bord-fort: var(--bord-fort, var(--bord));
	--av-angle-carte: var(--forme-carte-angle, var(--angle));
	--av-angle-bouton: var(--forme-bouton-angle, var(--angle));
	--av-ombre-survol: var(--forme-carte-ombre-survol, 0 2px 8px rgb(0 0 0 / 10%));
	--av-accent-doux: var(--accent-doux);
	--av-message-fond: var(--info-fond, var(--accent-doux));
	--av-filet: var(--info, var(--accent));
	--av-filet-part: var(--filet-part, 70%);
	--av-filet-epaisseur: var(--filet-epaisseur, 2px);
}

/* L'en-tete clair, et le filet sous le titre. */
.astus-v-tete {
	position: relative;
	border-bottom: 1px solid var(--av-bord);
	background: var(--av-fond);
	color: var(--av-texte);
}

.astus-v-tete::after {
	content: "";
	position: absolute;
	inset-block-end: -1px;
	inset-inline-start: 1.25rem;
	width: 3rem;
	height: 3px;
	border-radius: 2px;
	background: var(--av-accent);
}

.astus-v-badge {
	background: var(--av-accent-doux);
	color: var(--av-accent);
	font-size: 0.75rem;
	letter-spacing: 0.04em;
}

.astus-v-icone {
	color: var(--av-texte-doux);
}

.astus-v-icone:hover {
	background: var(--av-accent-doux);
	color: var(--av-texte);
}

.astus-v-icone:focus-visible {
	outline-color: var(--av-focus);
}

/* Les messages : des cartes au trait fin, l'angle du visiteur marque la
   provenance. */
.astus-v-msg {
	border-radius: var(--av-angle-carte);
	line-height: 1.5;
}

.astus-v-msg--ia {
	border-end-start-radius: 0.25rem;
}

.astus-v-msg--vous {
	border-end-end-radius: 0.25rem;
}

/* Les pages proposees : la carte d'Opus, qui se soulève au survol. */
.astus-v-lien {
	border-radius: var(--av-angle-carte);
	background: var(--av-fond);
	font-weight: 600;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.astus-v-lien:hover {
	border-color: var(--av-bord-fort);
	box-shadow: var(--av-ombre-survol);
	text-decoration: none;
}

.astus-v-lien:hover > span:first-child {
	text-decoration: underline;
}

.astus-v-lien svg {
	color: var(--av-accent);
}

.astus-v-ailleurs {
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 0.75rem;
}

/* L'issue de secours : le message d'Opus, sans bordure, teinte, souligne d'un
   seul filet au ton. */
.astus-v-issue {
	position: relative;
	padding: 0.875rem 1rem calc(0.875rem + var(--av-filet-epaisseur));
	border: 0;
	border-radius: var(--av-angle-carte);
	background: var(--av-message-fond);
}

.astus-v-issue::after {
	content: "";
	position: absolute;
	inset-block-end: 0;
	inset-inline-start: 1rem;
	width: calc(var(--av-filet-part) - 1rem);
	height: var(--av-filet-epaisseur);
	background: var(--av-filet);
}

/* La saisie : le bouton et le champ d'Opus. */
.astus-v-champ {
	border-color: var(--av-bord-fort);
	border-radius: var(--av-angle-bouton);
}

.astus-v-envoyer {
	border-radius: var(--av-angle-bouton);
}

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

/* --- Telephone : plein ecran -------------------------------------------- */

@media (max-width: 37.5rem) {
	.astus-v {
		--av-marge: 1rem;
	}

	.astus-v-panneau,
	.astus-v--gauche .astus-v-panneau {
		inset: 0;
		width: 100vw;
		border: 0;
		box-shadow: none;
	}

	.astus-v-msg {
		max-width: 100%;
	}

	/* Sur un petit ecran, la bulle se reduit a son titre. */
	.astus-v-bulle-texte {
		display: none;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.astus-v-panneau:not([hidden]) {
		animation: astus-v-entree 0.18s ease-out;
	}

	@keyframes astus-v-entree {
		from {
			opacity: 0;
			transform: translateX(1.5rem);
		}
	}
}

@media (forced-colors: active) {
	.astus-v-bulle,
	.astus-v-envoyer,
	.astus-v-msg--vous {
		border: 1px solid ButtonText;
	}
}

@media print {
	.astus-v {
		display: none !important;
	}
}