/* =====================================================================
 * Camille — assistante de la conciergerie, sur tout le site
 * ---------------------------------------------------------------------
 * Rendu par includes/ai-concierge/views/widget.php, en pied de TOUTES les
 * pages : vitrine, formulaire d inscription, espace propriétaire, espace
 * ménage, Panel.
 *
 * 🔴 CETTE FEUILLE NE PEUT PAS S APPUYER SUR LES JETONS DES ESPACES. Les
 * --v-* ne sont définis que sous .vauban-dashboard-wrapper : sur la vitrine,
 * ils n existent pas, et un composant qui les emploie sans repli sort en noir
 * sur noir. Chaque couleur est donc déclarée ICI, en jetons --vcc-*, et
 * redéfinie une seule fois pour le thème sombre.
 *
 * ⚠️ Le coin bas-droite est disputé : feuille de route (z-index 940) et
 * assistant contrat (939) dans l espace propriétaire. Le lanceur se pose à 936
 * et le JavaScript mesure ce qui occupe déjà le coin pour se décaler
 * au-dessus. Une valeur écrite en dur serait fausse dès le premier bandeau.
 * ===================================================================== */

.vcc-root {
	--vcc-bas: 20px;

	/* 🔴 DEUX RÉGIMES D EMPILEMENT, ET C EST INÉVITABLE. Dans les espaces
	   applicatifs, la feuille de route est à 940 et l assistant contrat à 939 :
	   Camille doit passer DESSOUS, ce sont eux qui portent les actions du
	   moment. Sur la vitrine, le voile de bas de page monte à 9990 et la
	   pastille « Découvrir » à 9999 : à 936 le lanceur y était lavé par le
	   dégradé — mesuré sur mobile le 2026-09-03. On passe donc au-dessus du
	   voile, en restant sous la pastille de défilement. */
	--vcc-z-fab: 936;

	/* Le panneau OUVERT est une surface modale : il passe au-dessus des
	   pastilles, y compris la feuille de route (940). Le LANCEUR, lui, reste
	   dessous — il ne demande rien, elles si. */
	--vcc-z-voile: 941;
	--vcc-z-panel: 942;
	--vcc-encre: #111827;
	--vcc-encre-douce: #4B5563;
	--vcc-surface: #FFFFFF;
	--vcc-surface-2: #F6F7FB;
	--vcc-bord: #E5E7EB;
	--vcc-marque: #4F46E5;
	--vcc-marque-douce: #EEF0FE;
	--vcc-sur-marque: #FFFFFF;
	--vcc-ombre: 0 14px 34px -14px rgba(17, 24, 39, .45);
}

/* 🔴 LE RÉGLAGE SYSTÈME NE VAUT QUE DANS LES ESPACES APPLICATIFS. La vitrine
   est un site CLAIR : elle n a pas de thème sombre, et n en aura pas parce
   qu un visiteur en mode sombre n a rien demandé à son sujet. Sans cette
   restriction, la bulle sortait en bleu nuit sur une page blanche — mesuré
   sur la page d accueil le 2026-09-03. Les trois espaces, eux, ont un vrai
   thème sombre, et la bulle doit le suivre. */
@media (prefers-color-scheme: dark) {
	.vcc-root[data-vcc-space="proprietaire"],
	.vcc-root[data-vcc-space="menage"],
	.vcc-root[data-vcc-space="panel"] {
		--vcc-encre: #F1F5F9;
		--vcc-encre-douce: #94A3B8;
		--vcc-surface: #1E293B;
		--vcc-surface-2: #0F172A;
		--vcc-bord: #334155;
		--vcc-marque: #818CF8;
		--vcc-marque-douce: #24304C;
		--vcc-sur-marque: #0F172A;
		--vcc-ombre: 0 14px 34px -14px rgba(0, 0, 0, .7);
	}
}

.vcc-root[data-vcc-space="vitrine"],
.vcc-root[data-vcc-space="onboarding"] {
	/* Sur la vitrine, le lanceur passe au-dessus du voile de bas de page
	   (9990) et reste sous la pastille « Découvrir » (9999) : elles ne se
	   croisent pas, l'une est à droite et l'autre au centre.

	   ⚠️ Le panneau OUVERT, lui, doit passer au-dessus de TOUT — mesuré le
	   2026-09-03 : en feuille mobile, la pastille « Découvrir » flottait
	   par-dessus la mention légale du panneau. Une feuille modale que le
	   décor traverse n'est pas une feuille modale. 10060 passe aussi
	   au-dessus du rappel « Mieux sur ordinateur » (10050). */
	--vcc-z-fab: 9992;
	--vcc-z-voile: 10055;
	--vcc-z-panel: 10060;
}

/* Les espaces applicatifs portent leur propre bascule, indépendante du
   réglage du système : elle doit gagner sur la media query ci-dessus. */
.v-dark .vcc-root,
.vauban-dashboard-wrapper.v-dark .vcc-root,
[data-theme="dark"] .vcc-root {
	--vcc-encre: #F1F5F9;
	--vcc-encre-douce: #94A3B8;
	--vcc-surface: #1E293B;
	--vcc-surface-2: #0F172A;
	--vcc-bord: #334155;
	--vcc-marque: #818CF8;
	--vcc-marque-douce: #24304C;
	--vcc-sur-marque: #0F172A;
	--vcc-ombre: 0 14px 34px -14px rgba(0, 0, 0, .7);
}

/* ---------------------------------------------------------------------
 * Le lanceur — il PORTE l invitation
 * ---------------------------------------------------------------------
 * Un rond avec une icône ne dit rien ; ici le visage, le prénom et la
 * proposition tiennent dans le bouton lui-même. C est ce qui remplace le
 * panneau qui s ouvrirait tout seul.
 * ------------------------------------------------------------------- */

.vcc-fab {
	position: fixed;
	right: 20px;
	bottom: var(--vcc-bas);
	z-index: var(--vcc-z-fab);

	display: inline-flex;
	align-items: center;
	gap: 11px;
	max-width: calc(100vw - 40px);
	padding: 8px 18px 8px 8px;
	border: 1px solid var(--vcc-bord);
	border-radius: 999px;
	background: var(--vcc-surface);
	color: var(--vcc-encre);
	font: inherit;
	text-align: left;
	cursor: pointer;
	box-shadow: var(--vcc-ombre);
	/* Voir la note ci-dessous : PAS de transition sur `bottom` — `var()` en
	   transition gèle sa valeur (bug Chromium 2026-09-03). Seul `transform`
	   (le petit soulèvement au survol) est animé. */
	transition: transform .15s ease;
}

.vcc-fab:hover {
	transform: translateY(-1px);
}

.vcc-fab:focus-visible {
	outline: 2px solid var(--vcc-marque);
	outline-offset: 2px;
}

.vcc-fab[hidden] {
	display: none;
}

.vcc-fab__face {
	position: relative;
	flex: 0 0 auto;
	display: inline-flex;
	line-height: 0;
}

.vcc-fab__texte {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.vcc-fab__titre {
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.25;
}

.vcc-fab__sous {
	font-size: 11.5px;
	line-height: 1.35;
	color: var(--vcc-encre-douce);
}

/* Le point vert de disponibilité, posé sur le visage. Ancré sur le
   conteneur du portrait, pas décalé à la marge : une marge se calcule sur
   la taille du SVG, qui change entre le lanceur et l en-tête. */
.vcc-fab__face::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 1px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #10B981;
	box-shadow: 0 0 0 2px var(--vcc-surface);
}

@media (max-width: 600px) {
	.vcc-fab__texte {
		display: none;
	}

	.vcc-fab {
		padding: 8px;
	}
}

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

.vcc-panel {
	position: fixed;
	right: 20px;
	bottom: var(--vcc-bas);
	z-index: var(--vcc-z-panel);

	display: flex;
	flex-direction: column;
	width: min(440px, calc(100vw - 40px));

	/* La conversation prend la hauteur disponible au lieu de se contenter
	   d une bande : retour de Simon, « l espace du chat est trop petit ».
	   Le plancher evite qu un ecran bas la reduise a rien, le plafond la
	   garde sous la barre du navigateur. */
	height: min(640px, calc(100vh - var(--vcc-bas) - 24px));
	height: min(640px, calc(100dvh - var(--vcc-bas) - 24px));
	min-height: 340px;
	max-height: calc(100vh - var(--vcc-bas) - 20px);
	max-height: calc(100dvh - var(--vcc-bas) - 20px);

	border: 1px solid var(--vcc-bord);
	border-radius: 16px;
	overflow: hidden;
	background: var(--vcc-surface);
	color: var(--vcc-encre);
	font-size: 14px;
	line-height: 1.6;
	box-shadow: var(--vcc-ombre);
}

.vcc-panel[hidden] {
	display: none;
}

.vcc-panel__head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 14px;
	border-bottom: 1px solid var(--vcc-bord);
	background: var(--vcc-surface-2);
}

.vcc-panel__face {
	flex: 0 0 auto;
	display: inline-flex;
	line-height: 0;
}

.vcc-panel__ident {
	flex: 1 1 auto;
	min-width: 0;
}

.vcc-panel__titre {
	margin: 0;
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--vcc-encre);
}

.vcc-panel__sous {
	margin: 1px 0 0;
	font-size: 11.5px;
	line-height: 1.35;
	color: var(--vcc-encre-douce);
}

.vcc-panel__fermer {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--vcc-encre-douce);
	cursor: pointer;
}

.vcc-panel__fermer:hover {
	background: var(--vcc-bord);
	color: var(--vcc-encre);
}

.vcc-fil {
	flex: 1 1 auto;
	min-height: 140px;
	/* Plus de plafond en vh : le panneau a maintenant une hauteur, et le fil
	   prend ce que l en-tete et le pied lui laissent. Un `max-height: 46vh`
	   ici rognait la conversation meme quand la place existait. */
	padding: 14px;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.vcc-msg {
	max-width: 88%;
	padding: 10px 13px;
	border-radius: 14px;
	font-size: 13.5px;
	line-height: 1.6;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

.vcc-msg--bot {
	align-self: flex-start;
	border: 1px solid var(--vcc-bord);
	background: var(--vcc-surface-2);
	color: var(--vcc-encre);
}

.vcc-msg--moi {
	align-self: flex-end;
	background: var(--vcc-marque);
	color: var(--vcc-sur-marque);
}

.vcc-msg--erreur {
	align-self: flex-start;
	border: 1px solid var(--vcc-bord);
	background: var(--vcc-surface-2);
	color: var(--vcc-encre-douce);
}

/* Les sources, sous une réponse : elles disent d où vient ce qui vient d être
   lu. Repliées par défaut — elles rassurent quand on les cherche, elles
   encombrent quand on ne les cherche pas. */
.vcc-sources {
	margin: 6px 0 0;
	font-size: 11.5px;
	color: var(--vcc-encre-douce);
}

.vcc-sources summary {
	cursor: pointer;
}

.vcc-sources ul {
	margin: 4px 0 0;
	padding-left: 18px;
}

/* La carte d invitation et la carte d escalade : même gabarit, deux messages. */
.vcc-carte {
	align-self: stretch;
	padding: 12px 14px;
	border: 1px solid var(--vcc-marque);
	border-radius: 12px;
	background: var(--vcc-marque-douce);
}

.vcc-carte__titre {
	margin: 0 0 4px;
	font-size: 13px;
	font-weight: 700;
	color: var(--vcc-encre);
}

.vcc-carte__texte {
	margin: 0 0 10px;
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--vcc-encre-douce);
}

.vcc-carte__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.vcc-carte__btn {
	display: inline-block;
	padding: 8px 13px;
	border: 1px solid var(--vcc-marque);
	border-radius: 8px;
	background: var(--vcc-marque);
	color: var(--vcc-sur-marque);
	font-size: 12.5px;
	font-weight: 600;
	text-decoration: none;
}

.vcc-carte__btn--fantome {
	background: transparent;
	color: var(--vcc-marque);
}

.vcc-carte__btn:hover {
	filter: brightness(1.06);
}

/* ---------------------------------------------------------------------
 * Le pied : saisie et mention légale
 * ------------------------------------------------------------------- */

.vcc-pied {
	border-top: 1px solid var(--vcc-bord);
	background: var(--vcc-surface);
}

.vcc-form {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	padding: 10px 12px 6px;
}

.vcc-form__champ {
	flex: 1 1 auto;
	max-height: 110px;
	padding: 9px 12px;
	border: 1px solid var(--vcc-bord);
	border-radius: 12px;
	background: var(--vcc-surface-2);
	color: var(--vcc-encre);
	font: inherit;
	font-size: 13.5px;
	line-height: 1.5;
	resize: none;
}

.vcc-form__champ:focus {
	outline: 2px solid var(--vcc-marque);
	outline-offset: -1px;
}

.vcc-form__envoi {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border: 0;
	border-radius: 12px;
	background: var(--vcc-marque);
	color: var(--vcc-sur-marque);
	cursor: pointer;
}

.vcc-form__envoi[disabled] {
	opacity: .55;
	cursor: default;
}

.vcc-legal {
	margin: 0;
	padding: 0 12px 10px;
	font-size: 10.5px;
	line-height: 1.45;
	color: var(--vcc-encre-douce);
}

/* ---------------------------------------------------------------------
 * Téléphone : le panneau devient une feuille, avec un voile
 * ------------------------------------------------------------------- */

.vcc-backdrop {
	position: fixed;
	inset: 0;
	z-index: var(--vcc-z-voile);
	background: rgba(15, 23, 42, .5);
}

.vcc-backdrop[hidden] {
	display: none;
}

@media (min-width: 641px) {
	.vcc-backdrop {
		display: none;
	}
}

@media (max-width: 640px) {
	.vcc-panel {
		right: 0;
		left: 0;
		bottom: 0;
		width: 100%;
		max-height: 82dvh;
		border-radius: 18px 18px 0 0;
	}

	.vcc-fil {
		max-height: none;
	}
}

/* ---------------------------------------------------------------------
 * Les raccourcis sous une réponse
 * ---------------------------------------------------------------------
 * Deux au maximum, décidés par le SERVEUR à partir de l intention lue dans la
 * question. Variante fantôme : ce sont des propositions, pas l action
 * principale de l écran — un aplat plein les mettrait en concurrence avec les
 * boutons de la page elle-même.
 * ------------------------------------------------------------------- */

.vcc-raccourcis {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-self: flex-start;
	max-width: 100%;
}

.vcc-raccourcis .vcc-carte__btn {
	font-size: 12px;
}

/* =====================================================================
 * LES ÉTATS DES BOUTONS SONT VERROUILLÉS
 * ---------------------------------------------------------------------
 * 🔴 ASTRA REPEINT TOUT `button` AU SURVOL. Le thème porte une règle
 * `.ast-button:hover, .button:hover, button:hover` qui impose SON fond de
 * marque. Notre lanceur est un bouton blanc à encre sombre : au survol il
 * recevait donc un aplat indigo en gardant son encre presque noire, soit un
 * libellé illisible sur le fond de marque. Mesuré le 2026-09-03, signalé par
 * Simon capture à l appui.
 *
 * On ne peut pas « ne pas être un bouton » : c est un déclencheur, il doit
 * l être pour le clavier et les lecteurs d écran. On rend donc les trois
 * états explicites, avec la spécificité nécessaire pour passer devant la
 * règle du thème — et surtout on repose l ENCRE en même temps que le fond,
 * ce que le thème ne fait pas.
 * ===================================================================== */

.vcc-root .vcc-fab,
.vcc-root .vcc-fab:hover,
.vcc-root .vcc-fab:focus,
.vcc-root .vcc-fab:focus-visible,
.vcc-root .vcc-fab:active {
	background: var(--vcc-surface);
	color: var(--vcc-encre);
	border-color: var(--vcc-bord);
	box-shadow: var(--vcc-ombre);
}

.vcc-root .vcc-fab:hover {
	border-color: var(--vcc-marque);
}

.vcc-root .vcc-fab:hover .vcc-fab__titre {
	color: var(--vcc-marque);
}

.vcc-root .vcc-fab .vcc-fab__titre {
	color: var(--vcc-encre);
}

.vcc-root .vcc-fab .vcc-fab__sous {
	color: var(--vcc-encre-douce);
}

.vcc-root .vcc-form__envoi,
.vcc-root .vcc-form__envoi:hover,
.vcc-root .vcc-form__envoi:focus,
.vcc-root .vcc-form__envoi:focus-visible,
.vcc-root .vcc-form__envoi:active {
	background: var(--vcc-marque);
	color: var(--vcc-sur-marque);
	border: 0;
}

.vcc-root .vcc-form__envoi:hover:not([disabled]) {
	filter: brightness(1.1);
}

.vcc-root .vcc-form__envoi svg {
	width: 18px;
	height: 18px;
	stroke: currentColor;
}

.vcc-root .vcc-panel__fermer,
.vcc-root .vcc-panel__fermer:hover,
.vcc-root .vcc-panel__fermer:focus,
.vcc-root .vcc-panel__fermer:active {
	background: transparent;
	color: var(--vcc-encre-douce);
	border: 0;
}

.vcc-root .vcc-panel__fermer:hover {
	background: var(--vcc-surface-2);
	color: var(--vcc-encre);
}

.vcc-root .vcc-carte__btn,
.vcc-root .vcc-carte__btn:hover,
.vcc-root .vcc-carte__btn:focus,
.vcc-root .vcc-carte__btn:active {
	background: var(--vcc-marque);
	color: var(--vcc-sur-marque);
	border-color: var(--vcc-marque);
	text-decoration: none;
}

.vcc-root .vcc-carte__btn--fantome,
.vcc-root .vcc-carte__btn--fantome:hover,
.vcc-root .vcc-carte__btn--fantome:focus,
.vcc-root .vcc-carte__btn--fantome:active {
	background: var(--vcc-surface);
	color: var(--vcc-marque);
	border-color: var(--vcc-marque);
}

.vcc-root .vcc-carte__btn:hover {
	filter: brightness(1.08);
}

/* =====================================================================
 * LES TROIS POINTS D ÉCRITURE
 * ---------------------------------------------------------------------
 * Remplacent la phrase « Camille cherche… ». Demande de Simon : « je n aime
 * pas le visuel de Camille écrit ou réfléchit, je veux les trois petits
 * points animés ». Une phrase d attente se lit comme un message ; trois
 * points se lisent comme quelqu un qui écrit, et n encombrent pas le fil.
 *
 * ⚠️ La bulle garde un texte de rechange lu par les lecteurs d écran : trois
 * points animés ne s annoncent pas.
 * ===================================================================== */

.vcc-points {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 0;
}

.vcc-points span {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--vcc-encre-douce);
	animation: vcc-rebond 1.25s ease-in-out infinite;
}

.vcc-points span:nth-child(2) { animation-delay: .16s; }
.vcc-points span:nth-child(3) { animation-delay: .32s; }

@keyframes vcc-rebond {
	0%, 60%, 100% { opacity: .35; transform: translateY(0); }
	30%           { opacity: 1;   transform: translateY(-4px); }
}

/* =====================================================================
 * L HEURE SOUS CHAQUE MESSAGE
 * ===================================================================== */

.vcc-heure {
	display: block;
	margin-top: 5px;
	font-size: 10.5px;
	line-height: 1.2;
	letter-spacing: .01em;
	opacity: .75;
}

.vcc-msg--moi .vcc-heure {
	text-align: right;
}

/* =====================================================================
 * LA PASTILLE DU LANCEUR
 * ---------------------------------------------------------------------
 * Allumée quand Camille a parlé alors que le panneau était replié. Sans
 * elle, son premier message part dans le vide : personne ne rouvre une
 * bulle fermée pour vérifier s il s y est passé quelque chose.
 * ===================================================================== */

.vcc-fab__pastille {
	position: absolute;
	top: -4px;
	right: -4px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 999px;
	background: var(--vcc-danger, #DC2626);
	color: #FFFFFF;
	font-size: 11px;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
	box-shadow: 0 0 0 2px var(--vcc-surface);
}

.vcc-fab__pastille[hidden] {
	display: none;
}

/* Le lanceur porte la pastille : il lui faut un repère de positionnement. */
.vcc-root .vcc-fab {
	position: fixed;
}

.vcc-fab__face {
	position: relative;
}

/* ---------------------------------------------------------------------
 * LE PADDING DU THÈME ÉCRASE LES ICÔNES
 * ---------------------------------------------------------------------
 * 🔴 DÉFAUT MESURÉ LE 2026-09-03, signalé par Simon : le bouton d envoi
 * n affichait aucune icône. Sa flèche faisait 18 px de haut et **0 px de
 * large**.
 *
 * Cause : Astra applique un padding généreux à tout `button`. Sur un bouton
 * de 38 px de côté, ce padding horizontal dépasse la largeur totale — la
 * boîte de contenu tombe donc à zéro, et le SVG, simple élément flexible en
 * `flex: 0 1 auto`, se laisse écraser sans un mot.
 *
 * Deux verrous, parce qu un seul ne suffit pas : le padding est remis à zéro
 * sur les boutons carrés, et les icônes refusent désormais de rétrécir.
 * ------------------------------------------------------------------- */

.vcc-root .vcc-form__envoi,
.vcc-root .vcc-panel__fermer {
	padding: 0;
	min-width: 0;
	line-height: 0;
}

.vcc-root .vcc-form__envoi {
	min-width: 38px;
}

.vcc-root .vcc-panel__fermer {
	min-width: 30px;
}

.vcc-root svg {
	flex: 0 0 auto;
}

.vcc-root .vcc-carte__btn {
	padding: 9px 14px;
	min-width: 0;
}

.vcc-root .vcc-fab {
	padding: 8px 18px 8px 8px;
}

@media (max-width: 600px) {
	.vcc-root .vcc-fab {
		padding: 8px;
	}
}

/* =====================================================================
 * L ACCROCHE FLOTTANTE ET LA PULSATION — « voir que le chat existe »
 * ---------------------------------------------------------------------
 * Retour de Simon : manque de vivant, il faut focaliser la personne sur le
 * chat, ou au moins qu elle voie qu il existe. L accroche apparait au-dessus
 * du lanceur avec la premiere phrase de Camille adaptee a la page ; le
 * lanceur pulse quelques fois pour attirer l oeil.
 *
 * ⚠️ Sous prefers-reduced-motion, la pulsation ne joue pas : l accroche seule
 * suffit a signaler, sans mouvement pour ceux qui l ont refuse.
 * ===================================================================== */

.vcc-root .vcc-amorce {
	position: fixed;
	right: 20px;
	bottom: calc(var(--vcc-bas) + 66px);
	z-index: var(--vcc-z-fab);

	display: flex;
	align-items: flex-start;
	gap: 8px;
	max-width: min(300px, calc(100vw - 40px));
	padding: 11px 12px 11px 14px;

	border: 1px solid var(--vcc-marque);
	border-radius: 14px 14px 4px 14px;
	background: var(--vcc-surface);
	color: var(--vcc-encre);
	font-size: 13px;
	line-height: 1.45;
	box-shadow: var(--vcc-ombre);
	cursor: pointer;
	animation: vcc-amorce-in .3s ease both;
}

.vcc-root .vcc-amorce[hidden] {
	display: none;
}

.vcc-root .vcc-amorce__texte {
	flex: 1 1 auto;
}

.vcc-root .vcc-amorce__fermer,
.vcc-root .vcc-amorce__fermer:hover,
.vcc-root .vcc-amorce__fermer:focus {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	min-width: 0;
	margin-top: -1px;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: var(--vcc-encre-douce);
	cursor: pointer;
	line-height: 0;
}

.vcc-root .vcc-amorce__fermer:hover {
	background: var(--vcc-surface-2);
	color: var(--vcc-encre);
}

@keyframes vcc-amorce-in {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: none; }
}

/* Le lanceur pulse : un halo qui bat six fois, puis s arrete. Un halo infini
   deviendrait une alarme ; six battements attirent l oeil et se taisent. */
.vcc-root .vcc-fab.is-pulse {
	animation: vcc-pulse 1.6s ease-out 6;
}

@keyframes vcc-pulse {
	0%   { box-shadow: var(--vcc-ombre), 0 0 0 0 rgba(79, 70, 229, .45); }
	70%  { box-shadow: var(--vcc-ombre), 0 0 0 14px rgba(79, 70, 229, 0); }
	100% { box-shadow: var(--vcc-ombre), 0 0 0 0 rgba(79, 70, 229, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.vcc-root .vcc-fab.is-pulse {
		animation: none;
	}

	.vcc-root .vcc-amorce {
		animation: none;
	}
}

/* =====================================================================
 * MISE EN FORME DES RÉPONSES + QUESTIONS SUGGÉRÉES
 * ---------------------------------------------------------------------
 * Retour de Simon : les réponses manquaient de gras/italique, et Camille
 * devrait proposer d autres questions. Le gras/italique est rendu par un
 * parseur sûr côté JS ; ces règles lui donnent du style. Les suggestions
 * sont des questions cliquables (on interroge Camille), distinctes des
 * raccourcis (on quitte le chat pour une page).
 * ===================================================================== */

.vcc-root .vcc-msg--bot strong {
	font-weight: 700;
	color: var(--vcc-encre);
}

.vcc-root .vcc-msg--bot em {
	font-style: italic;
}

.vcc-root .vcc-msg--bot p {
	margin: 0 0 8px;
}

.vcc-root .vcc-msg--bot p:last-child {
	margin-bottom: 0;
}

.vcc-root .vcc-msg--bot ul {
	margin: 6px 0;
	padding-left: 18px;
}

.vcc-root .vcc-msg--bot li {
	margin: 3px 0;
}

.vcc-root .vcc-suggestions {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	align-self: flex-start;
	max-width: 100%;
	margin-top: 2px;
}

.vcc-root .vcc-suggestion,
.vcc-root .vcc-suggestion:hover,
.vcc-root .vcc-suggestion:focus,
.vcc-root .vcc-suggestion:active {
	padding: 7px 12px;
	border: 1px solid var(--vcc-marque);
	border-radius: 999px;
	background: var(--vcc-surface);
	color: var(--vcc-marque);
	font: inherit;
	font-size: 12.5px;
	line-height: 1.3;
	text-align: left;
	cursor: pointer;
}

.vcc-root .vcc-suggestion:hover {
	background: var(--vcc-marque-douce);
}

/* =====================================================================
 * VERROU DU FOND QUAND LE CHAT EST OUVERT (téléphone)
 * ---------------------------------------------------------------------
 * Demande de Simon : empêcher l arrière-plan de défiler pendant qu on
 * discute. Le panneau est une feuille sous 640 px ; le verrou n agit que
 * là — sur grand écran c est une carte de coin, bloquer la page serait
 * penible. `position: fixed` sur la racine plutot qu un simple
 * `overflow: hidden` : sur iOS, overflow seul ne retient pas le geste.
 * ===================================================================== */

@media (max-width: 640px) {
	html.vcc-verrou,
	html.vcc-verrou body {
		overflow: hidden;
		overscroll-behavior: none;
		touch-action: none;
	}
}

/* Le défilement du fil ne se propage jamais a la page derriere. */
.vcc-root .vcc-fil {
	overscroll-behavior: contain;
}

/* Le voile absorbe le geste : un glissement dessus ne doit rien faire bouger. */
.vcc-root .vcc-backdrop {
	touch-action: none;
	overscroll-behavior: none;
}

/* ------------------------------------------------------------------
   Le formulaire de demande, ouvert DANS le fil
   ------------------------------------------------------------------
   Il remplace le renvoi vers la page de contact (06/09/2026) : la
   personne vient d'écrire sa question, elle ne doit pas la retaper
   ailleurs. Tout est en jetons `--vcc-*` : le mode sombre suit sans
   une seule règle dédiée. */

.vcc-demande {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 6px 0 2px;
	padding: 12px;
	border: 1px solid var(--vcc-bord);
	border-radius: 14px;
	background: var(--vcc-surface-2);
}

.vcc-demande__titre {
	margin: 0;
	color: var(--vcc-encre);
	font-size: 13.5px;
	font-weight: 600;
}

.vcc-demande__texte {
	margin: 0;
	color: var(--vcc-encre-douce);
	font-size: 12.5px;
	line-height: 1.45;
}

.vcc-demande__champ {
	width: 100%;
	box-sizing: border-box;
	padding: 9px 12px;
	border: 1px solid var(--vcc-bord);
	border-radius: 10px;
	background: var(--vcc-surface);
	color: var(--vcc-encre);
	font: inherit;
	font-size: 13.5px;
	line-height: 1.5;
}

.vcc-demande__champ--long {
	min-height: 72px;
	resize: vertical;
}

.vcc-demande__champ:focus {
	outline: 2px solid var(--vcc-marque);
	outline-offset: -1px;
}

/* Le pot de miel : hors de l'écran ET hors de l'arbre d'accessibilité,
   jamais `display: none` — certains robots ignorent les champs cachés
   ainsi, et un lecteur d'écran ne doit pas l'annoncer. */
.vcc-demande__piege {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.vcc-demande__envoi {
	align-self: flex-start;
	border: 0;
	cursor: pointer;
	font: inherit;
}

.vcc-demande__envoi[disabled] {
	opacity: .55;
	cursor: default;
}

.vcc-demande__etat {
	margin: 0;
	min-height: 1em;
	color: var(--vcc-encre-douce);
	font-size: 12.5px;
}

/* L'erreur porte un MOT, pas seulement une couleur (WCAG 1.4.1) : le
   texte dit ce qui ne va pas, la couleur ne fait que le souligner. */
.vcc-demande__etat--erreur {
	color: #B91C1C;
}

.vcc-demande__merci {
	margin: 6px 0 2px;
	padding: 12px;
	border: 1px solid var(--vcc-bord);
	border-radius: 14px;
	background: var(--vcc-marque-douce);
	color: var(--vcc-encre);
	font-size: 13px;
	line-height: 1.5;
}