/*
 * Chatbot Ad'on IA — habillage du widget public.
 *
 * Servi comme fichier, pas en ligne dans la page : voir la note de
 * `assets/chatbot.js`, la raison est la même.
 *
 * ── Les couleurs viennent de la charte du site ───────────────────────────
 *
 * Chaque jeton se lit de gauche à droite, du plus spécifique au plus général :
 *
 *     var(--adon-accent, var(--accent1, #008996))
 *          │                  │           └── repli, si le site n'a pas de charte
 *          │                  └── la variable de charte Ad'on : le cas normal
 *          └── surcharge propre au chatbot, si l'on veut l'en écarter
 *
 * Le chatbot suit donc la charte sans qu'on ait rien à recopier, et un site qui
 * veut un chatbot d'une autre couleur que son accent1 pose `--adon-accent` sans
 * toucher au plugin. Aucune couleur en dur ailleurs dans cette feuille.
 */
.adon-ai-chat,.adon-ai-scene{
		--adon-ai-accent:var(--adon-accent,var(--accent1,#008996));
		--adon-ai-accent-survol:var(--adon-accent-survol,var(--accent1hover,var(--accent1,#10b1c0)));
		--adon-ai-fond:var(--adon-fond,var(--blanc,#fff));
		--adon-ai-bulle:var(--adon-bulle,var(--clair,rgb(240,240,240)));
		--adon-ai-texte:var(--adon-texte,var(--fonce,#181B24));
		--adon-ai-attenue:var(--adon-attenue,var(--moyen,#666));
		/* Le bord n'a pas de variable de charte : c'est l'atténué très dilué,
		   ce qui le fait suivre la charte sans en inventer une septième. */
		--adon-ai-bord:var(--adon-bord,color-mix(in srgb,var(--adon-ai-attenue) 28%,transparent));
		--adon-ai-rayon:var(--adon-rayon,16px);
		/*
		 * Trois largeurs, et leur partage a changé en 3.22.0.
		 *
		 * `large` est désormais celle de **toute** la conversation : rangées de
		 * messages comme grille de cartes. C'est ce qui aligne le bord gauche de
		 * la réponse sur celui de la première carte. Tant que les messages
		 * vivaient dans une colonne plus étroite, centrée, la bulle démarrait
		 * neuf rems à droite des cartes — deux blocs qui parlent de la même
		 * chose et ne partagent aucun bord.
		 *
		 * `bulle-largeur` empêche la bulle de s'étaler pour autant : elle garde
		 * la largeur de lecture qu'elle avait, elle change seulement de point
		 * d'appui. Sans elle, suivre la rangée l'aurait fait grandir d'un tiers,
		 * et une ligne de texte de 64 rem est pénible à suivre.
		 *
		 * `colonne` ne sert plus qu'au pied : le champ de saisie, le recours
		 * humain et la mention. Un champ d'une ligne large de 64 rem se remplit
		 * mal, et rien ne demande qu'il s'aligne sur le fil.
		 *
		 * Un site peut resserrer ou élargir les trois sans toucher au reste.
		 */
		--adon-ai-large:var(--adon-large,64rem);
		--adon-ai-colonne:var(--adon-colonne,46rem);
		--adon-ai-bulle-largeur:var(--adon-bulle-largeur,38rem);
		--adon-ai-police:var(--adon-police,var(--fonttextes,inherit));
		--adon-ai-police-titres:var(--adon-police-titres,var(--fonttitres,var(--adon-ai-police)));
		font-family:var(--adon-ai-police);
	}
	/*
	 * Le modèle de boîte, posé ici plutôt que supposé acquis.
	 *
	 * Le fil porte `width:100%` et un rembourrage : sans `border-box`, il fait
	 * 100 % **plus** 40 px, et déborde son propre parent. Sur un large écran
	 * cela ne se voyait pas — la colonne de lecture était plus étroite que la
	 * fenêtre —, sur téléphone la conversation gagnait une barre de défilement
	 * horizontale de deux centimètres, et la grille de cartes se coupait au
	 * bord de l'écran.
	 *
	 * La plupart des thèmes posent `border-box` partout, et c'est bien pour ça
	 * que le défaut a vécu si longtemps : il ne se réveille que chez ceux qui
	 * ne le font pas. Le reste de cette feuille se garde de dépendre de la
	 * charte du site ; cette règle ferme le dernier endroit où elle le faisait.
	 */
	.adon-ai-chat,.adon-ai-chat *,.adon-ai-scene,.adon-ai-scene *{box-sizing:border-box}
	.adon-ai-cache{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

	/* ── Accroche dans la page : rien d'autre qu'un champ ── */
	.adon-ai-chat{max-width:40rem;margin-inline:auto;color:var(--adon-ai-texte);font-size:1rem;line-height:1.55}
	.adon-ai-accroche{position:relative;display:flex;align-items:center}
	.adon-ai-accroche .adon-ai-loupe{position:absolute;left:1.15rem;width:20px;height:20px;
		color:var(--adon-ai-attenue);pointer-events:none}
	.adon-ai-accroche input{width:100%;padding:1.15rem 4.2rem 1.15rem 3.1rem;font:inherit;font-size:1.05rem;
		color:inherit;background:var(--adon-ai-fond);border:1px solid var(--adon-ai-bord);
		border-radius:999px;box-shadow:0 1px 2px rgba(0,0,0,.04);transition:box-shadow .18s,border-color .18s;
		-webkit-appearance:none;appearance:none}
	.adon-ai-accroche input::-webkit-search-cancel-button{display:none}
	/*
	 * L'arrondi est redit sur chaque état, et ce n'est pas une redondance.
	 *
	 * La charte du site règle ses champs de formulaire, et beaucoup de thèmes
	 * posent leur rayon sur `input:focus` ou `input:hover` — deux sélecteurs
	 * plus spécifiques que le `.adon-ai-accroche input` d'au-dessus. Le champ
	 * partait donc en pilule et redevenait carré au clic, exactement au moment
	 * où l'œil est dessus. Réaffirmer le rayon sur les mêmes états règle la
	 * question par la spécificité plutôt que par un `!important`, qui aurait
	 * aussi interdit à un intégrateur de choisir un autre rayon.
	 */
	.adon-ai-accroche input:hover{border-radius:999px;border-color:var(--adon-ai-attenue)}
	.adon-ai-accroche input:focus,.adon-ai-accroche input:focus-visible{border-radius:999px;outline:0;
		border-color:var(--adon-ai-accent);
		box-shadow:0 0 0 3px color-mix(in srgb,var(--adon-ai-accent) 18%,transparent)}
	.adon-ai-accroche button{position:absolute;right:.5rem;display:inline-flex;align-items:center;
		justify-content:center;width:2.7rem;height:2.7rem;color:#fff;background:var(--adon-ai-accent);
		border:0;border-radius:50%;cursor:pointer}
	.adon-ai-accroche button:hover,.adon-ai-form button:hover:not(:disabled){background:var(--adon-ai-accent-survol)}

	.adon-ai-amorces{display:flex;flex-wrap:wrap;justify-content:center;gap:.45rem;margin:.9rem 0 0}
	.adon-ai-amorce{background:none;border:1px solid var(--adon-ai-bord);border-radius:999px;
		padding:.4rem .9rem;font:inherit;font-size:.88rem;color:var(--adon-ai-attenue);cursor:pointer;line-height:1.3}
	.adon-ai-amorce:hover,.adon-ai-amorce:focus-visible{border-color:var(--adon-ai-accent);color:var(--adon-ai-accent)}

	/* ── Scène : le dialogue recouvre le site ── */
	.adon-ai-scene[hidden]{display:none}
	.adon-ai-scene{position:fixed;inset:0;z-index:100000;display:flex;flex-direction:column;
		background:var(--adon-ai-fond);color:var(--adon-ai-texte);font-size:1rem;line-height:1.6;
		animation:adon-ai-entree .22s ease-out}
	@keyframes adon-ai-entree{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
	@media (prefers-reduced-motion:reduce){.adon-ai-scene{animation:none}}

	.adon-ai-entete{flex:none;display:flex;align-items:center;justify-content:space-between;gap:1rem;
		padding:1rem 1.25rem;border-bottom:1px solid var(--adon-ai-bord)}
	.adon-ai-titre{margin:0;font-family:var(--adon-ai-police-titres);font-weight:600;font-size:1.05rem}
	.adon-ai-fermer{display:inline-flex;align-items:center;gap:.4rem;padding:.45rem .9rem;font:inherit;
		font-size:.9rem;color:var(--adon-ai-attenue);background:none;border:1px solid var(--adon-ai-bord);
		border-radius:999px;cursor:pointer}
	.adon-ai-fermer:hover,.adon-ai-fermer:focus-visible{color:var(--adon-ai-texte);border-color:var(--adon-ai-attenue)}

	/* Le fil prend toute la largeur ; ce sont les rangées qui portent la
	   colonne de lecture. Sans cette bascule, une grille plus large que la
	   conversation ne pouvait s'obtenir qu'à coups de marges négatives
	   recalculées, qui se décalent dès que la fenêtre change. */
	.adon-ai-fil{flex:1;min-height:0;overflow-y:auto;scroll-behavior:smooth;
		display:flex;flex-direction:column;gap:.85rem;
		width:100%;padding:1.5rem 1.25rem}
	.adon-ai-rang{display:flex;width:100%;max-width:var(--adon-ai-large);margin-inline:auto}
	.adon-ai-rang--usager{justify-content:flex-end}
	/* `--large` ne porte plus de largeur propre — toutes les rangées ont la
	   même depuis la 3.22.0 — mais la classe reste : c'est le seul crochet par
	   lequel un site peut viser la rangée des cartes et non celle d'un message. */
	.adon-ai-msg{max-width:min(100%,var(--adon-ai-bulle-largeur));
		padding:.8rem 1.05rem;border-radius:var(--adon-ai-rayon)}
	.adon-ai-msg p{margin:0 0 .6rem}
	.adon-ai-msg p:last-child{margin-bottom:0}
	.adon-ai-usager{align-self:flex-end;background:var(--adon-ai-accent);color:#fff;border-bottom-right-radius:5px}
	.adon-ai-agent{align-self:flex-start;background:var(--adon-ai-bulle);border-bottom-left-radius:5px}
	.adon-ai-erreur{background:color-mix(in srgb,#b3261e 8%,var(--adon-ai-fond));color:#8a1f24}

	/* ── Les pages proposées, en cartes ───────────────────────────────────
	 *
	 * La liste de liens qui vivait sous la réponse demandait à être lue avant
	 * de pouvoir être choisie. Une carte se reconnaît : sur un site de
	 * collectivité, où les pages s'appellent « Démarches administratives » et
	 * « Formalités », l'image mise en avant porte souvent plus d'information
	 * que le titre.
	 *
	 * La grille occupe une rangée `--large`, plus large que la conversation :
	 * trois colonnes dans une colonne de 46 rem donnent des vignettes de la
	 * taille d'un timbre.
	 */
	.adon-ai-cartes{width:100%}
	.adon-ai-cartes-titre{margin:.1rem 0 .7rem;font-size:.78rem;font-weight:700;
		letter-spacing:.05em;text-transform:uppercase;color:var(--adon-ai-attenue)}
	/* `align-items:start` : chaque carte s'arrête à son contenu.
	   Par défaut une grille étire ses éléments à la hauteur de la rangée, ce qui
	   convenait tant qu'une carte sans image portait un aplat de remplacement —
	   les hauteurs se ressemblaient. Depuis qu'elle n'en a plus, une carte de
	   deux lignes de texte à côté d'une carte illustrée devenait un grand cadre
	   vide aux trois quarts. */
	.adon-ai-grille{list-style:none;margin:0;padding:0;display:grid;gap:.9rem;
		align-items:start;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr))}
	.adon-ai-carte{margin:0}
	.adon-ai-carte-lien{display:flex;flex-direction:column;overflow:hidden;
		color:inherit;text-decoration:none;background:var(--adon-ai-fond);
		border:1px solid var(--adon-ai-bord);border-radius:var(--adon-ai-rayon);
		transition:border-color .18s,box-shadow .18s,transform .18s}
	.adon-ai-carte-lien:hover{border-color:var(--adon-ai-accent);
		box-shadow:0 6px 18px rgba(0,0,0,.08);transform:translateY(-2px)}
	.adon-ai-carte-lien:focus-visible{outline:2px solid var(--adon-ai-accent);outline-offset:2px}
	@media (prefers-reduced-motion:reduce){
		.adon-ai-carte-lien{transition:none}
		.adon-ai-carte-lien:hover{transform:none}
	}
	/* La vignette est en pied de carte, sous le texte : c'est ce qui fait
	   démarrer tous les titres d'une rangée à la même hauteur, qu'une carte soit
	   illustrée ou non. Une carte sans image n'a pas ce cadre du tout — voir
	   `vignette()` dans `chatbot.js`.

	   Le rapport reste fixe, et non la hauteur propre de l'image : trois images
	   de proportions différentes donneraient trois pieds de cartes inégaux. */
	.adon-ai-vignette{aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;
		overflow:hidden;background:color-mix(in srgb,var(--adon-ai-attenue) 12%,transparent)}
	.adon-ai-vignette img{display:block;width:100%;height:100%;object-fit:cover}
	.adon-ai-carte-corps{display:flex;flex-direction:column;gap:.15rem;padding:.75rem .85rem .9rem}
	/* Le texte respire au-dessus de l'image sans doubler l'écart : le
	   rembourrage bas du corps suffit, inutile d'en ajouter un au cadre. */
	.adon-ai-carte-corps:has(+ .adon-ai-vignette){padding-bottom:.75rem}
	.adon-ai-carte-type{font-size:.7rem;font-weight:700;letter-spacing:.05em;
		text-transform:uppercase;color:var(--adon-ai-accent)}
	.adon-ai-carte-titre{font-family:var(--adon-ai-police-titres);font-weight:600;line-height:1.3;
		text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px;
		text-decoration-color:color-mix(in srgb,var(--adon-ai-accent) 45%,transparent)}
	.adon-ai-carte-lien:hover .adon-ai-carte-titre{text-decoration-color:var(--adon-ai-accent)}
	.adon-ai-carte-detail{font-size:.78rem;color:var(--adon-ai-attenue)}
	.adon-ai-carte-resume{margin:.35rem 0 0;font-size:.85rem;line-height:1.45;color:var(--adon-ai-attenue)}
	.adon-ai-carte--product .adon-ai-carte-detail{font-weight:600;color:var(--adon-ai-accent)}

	/* ── L'attente, étape par étape ───────────────────────────────────────
	 *
	 * Les libellés viennent du serveur, qui les tient du scénario. La feuille
	 * ne connaît que deux états : franchie, en cours.
	 */
	.adon-ai-attente{min-width:min(19rem,84%)}
	.adon-ai-etapes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.28rem}
	.adon-ai-etape{display:flex;align-items:center;gap:.45rem;margin:0;font-size:.93rem;line-height:1.35}
	.adon-ai-etape::before{flex:none;width:1em;text-align:center;color:var(--adon-ai-accent)}
	.adon-ai-etape--faite{color:var(--adon-ai-attenue)}
	.adon-ai-etape--faite::before{content:"\2713";font-size:.85em}
	.adon-ai-etape--courante::before{content:"\203A";font-weight:700}
	.adon-ai-detail{margin:.4rem 0 0;font-size:.78rem;opacity:.85}

	.adon-ai-points{display:inline-flex;gap:.28rem;align-items:center;margin-left:.15rem}
	.adon-ai-points i{width:.35rem;height:.35rem;border-radius:50%;background:var(--adon-ai-attenue);
		animation:adon-ai-pulse 1.2s infinite ease-in-out}
	.adon-ai-points i:nth-child(2){animation-delay:.15s}
	.adon-ai-points i:nth-child(3){animation-delay:.3s}
	@keyframes adon-ai-pulse{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
	@media (prefers-reduced-motion:reduce){.adon-ai-points i{animation:none;opacity:.6}}

	.adon-ai-pied{flex:none;border-top:1px solid var(--adon-ai-bord);padding:1rem 1.25rem calc(1rem + env(safe-area-inset-bottom))}
	.adon-ai-form{display:flex;gap:.6rem;width:100%;max-width:var(--adon-ai-colonne);margin-inline:auto}
	.adon-ai-form input{flex:1;min-width:0;padding:.9rem 1.1rem;font:inherit;color:inherit;
		background:var(--adon-ai-fond);border:1px solid var(--adon-ai-bord);border-radius:999px}
	/* Même raison qu'à l'accroche : la charte du site règle `input:focus`. */
	.adon-ai-form input:focus,.adon-ai-form input:focus-visible{border-radius:999px;outline:0;
		border-color:var(--adon-ai-accent);
		box-shadow:0 0 0 3px color-mix(in srgb,var(--adon-ai-accent) 18%,transparent)}
	.adon-ai-form button{display:inline-flex;align-items:center;gap:.45rem;padding:.9rem 1.35rem;
		font:inherit;font-weight:600;color:#fff;background:var(--adon-ai-accent);
		border:0;border-radius:999px;cursor:pointer}
	.adon-ai-form button:disabled{opacity:.5;cursor:default}
	.adon-ai-form svg{flex:none}
	.adon-ai-recours{width:100%;max-width:var(--adon-ai-colonne);margin:.75rem auto 0;font-size:.9rem;text-align:center}
	.adon-ai-recours a{color:var(--adon-ai-accent);text-decoration:underline;text-underline-offset:2px;margin-inline:.15rem}
	.adon-ai-mention{width:100%;max-width:var(--adon-ai-colonne);margin:.5rem auto 0;font-size:.78rem;
		color:var(--adon-ai-attenue);line-height:1.45;text-align:center}
	/* Le `:not(.adon-ai-sources)` qui protégeait la liste de sources n'a plus
	   d'objet : les sources ont quitté la bulle pour la grille de cartes. */
	.adon-ai-msg ul{margin:.15rem 0 .5rem;padding-left:1.15rem}
	.adon-ai-msg li{margin:0 0 .3rem}

	@media (max-width:560px){
		.adon-ai-msg{max-width:92%}
		/* Deux colonnes plutôt qu'une : une carte pleine largeur sur téléphone
		   donne une pile qu'on ne parcourt plus, on la fait défiler. */
		.adon-ai-grille{gap:.6rem;grid-template-columns:repeat(auto-fill,minmax(9rem,1fr))}
		.adon-ai-carte-corps{padding:.6rem .7rem .75rem}
		.adon-ai-carte-titre{font-size:.92rem}
		.adon-ai-carte-detail{font-size:.75rem}
		/* Le résumé sort : dans une carte de neuf rems, il pousse le titre hors
		   de l'écran sans rien ajouter que le titre ne dise déjà. */
		.adon-ai-carte-resume{display:none}
		.adon-ai-envoyer{display:none}
		.adon-ai-form button{padding:.9rem 1.05rem}
		.adon-ai-fil{padding:1.1rem .9rem}
		.adon-ai-pied{padding-inline:.9rem}
	}

	/* ── Contraste élevé ──────────────────────────────────────────────────
	 *
	 * La version accessible du socle neutralise la charte : noir et blanc,
	 * liens soulignés, focus jaune épais. Le chatbot doit suivre, sinon il
	 * reste le seul îlot coloré d'une page passée en contraste élevé — et
	 * l'accent1 sur blanc ne tient pas les rapports exigés par le RGAA.
	 *
	 * On ne redéfinit que les jetons : tout le reste de la feuille en découle.
	 */
	body.contraste-eleve .adon-ai-chat,
	body.contraste-eleve .adon-ai-scene{
		--adon-ai-accent:#000;
		--adon-ai-accent-survol:#000;
		--adon-ai-fond:#fff;
		--adon-ai-bulle:#f2f2f2;
		--adon-ai-texte:#000;
		--adon-ai-attenue:#000;
		--adon-ai-bord:#000;
	}
	body.contraste-eleve .adon-ai-recours a{text-decoration:underline}
	body.contraste-eleve .adon-ai-carte-lien{border:2px solid #000;box-shadow:none}
	body.contraste-eleve .adon-ai-carte-titre{text-decoration:underline;text-decoration-color:#000}
	body.contraste-eleve .adon-ai-vignette{background:#f2f2f2}
	body.contraste-eleve .adon-ai-chat :focus-visible,
	body.contraste-eleve .adon-ai-scene :focus-visible{outline:3px solid #ff0;outline-offset:2px}
	body.contraste-eleve .adon-ai-erreur{background:#fff;color:#000;border:2px solid #000}

	/* ── Enchaînement attente → réponse → pages ─────────────────────────────
	 *
	 * Trois temps, et ils ne sont pas décoratifs. Avant, le bloc d'étapes et le
	 * premier paragraphe se succédaient au même pixel à une image d'intervalle,
	 * et le fil descendait jusqu'en bas dans la foulée : la seule chose que
	 * l'œil voyait apparaître, c'était la grille de cartes. Le visiteur lisait
	 * les titres des pages sans avoir lu la réponse.
	 *
	 * L'échelonnement est porté par `--i`, posé par le script sur chaque
	 * paragraphe puis sur la rangée des cartes. Le document, lui, est complet
	 * d'un coup — ce qui laisse la région `aria-live` du fil annoncer la
	 * réponse une seule fois. Voir `echelonner()` dans chatbot.js.
	 */
	.adon-ai-rang.adon-ai-sortie{opacity:0;transform:translateY(-4px);
		transition:opacity .2s ease-out,transform .2s ease-out}

	.adon-ai-apparition > *{animation:adon-ai-paraitre .3s ease-out backwards;
		animation-delay:calc(var(--i,0) * 110ms)}
	@keyframes adon-ai-paraitre{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

	@media (prefers-reduced-motion:reduce){
		.adon-ai-rang.adon-ai-sortie{transition:none}
		.adon-ai-apparition > *{animation:none}
		/* Le fil porte `scroll-behavior:smooth` : le cadrage doit être sec ici. */
		.adon-ai-fil{scroll-behavior:auto}
	}