/* ═══════════════════════════════════════════════════════════════════════════════════════════
   LA FENETRE PIXI DU HEADER — repris de la maquette « Header V2 adaptatif » (v2/header-v2.css,
   bloc .pxi-*), adapte a son ancre reelle.

   🔴 TROIS `!important` DANS TOUT LE FICHIER, ET PAS UN DE PLUS. Les voici, tous les deux
   motifs ecrits sur place :
     - 2 sur `.pxi-c textarea:focus` — ils battent l'anneau bleu de `buddyx/_accessibility.css`.
       Acceptables PARCE QUE l'indicateur de focus est DEPLACE sur le conteneur, pas supprime ;
       le bloc concerne porte la condition qui l'annule.
     - 1 dans `prefers-reduced-motion`, ou il coupe des animations qui sont les MIENNES et plus
       specifiques (1,2,0 contre 1,1,0).
   Partout ailleurs : ZERO, ET C'EST TENU PAR LA STRUCTURE, PAS PAR LA FORCE.
   Deux adversaires connus sur ce site, tous deux battus a la loyale :
     - `.elementor-kit-1489 button` (0,2,1) impose fond, ombre, rayon et police a TOUT bouton de
       la page. `#pxd-pixi-anchor .pxi-…` vaut (1,1,0) et gagne sans discussion.
     - `header.css` neutralisait aussi le contenu de l'ancre via `.hx-portal button` — corrige
       en amont le 31/08 par `:not(#pxd-pixi-anchor *)`, puisque le header declare lui-meme
       « ne pas connaitre le contenu » de cette ancre.
   Si un `!important` devenait necessaire ici, c'est le signe qu'il faut RE-SCOPER, pas forcer.

   ⚠️ POSITION. La maquette pose le panneau en `absolute; top:100%` sous le bouton parce qu'elle
   vit DANS le header. Ici l'ancre est enfant du portail, donc de <body> — deliberé : elle
   echappe a l'overflow du bandeau et a son contexte d'empilement. D'ou `fixed` + une position
   calculee en JS depuis le rect du bouton (fonction `place()`).
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

#pxd-pixi-anchor {
	position: fixed;
	top: 76px;
	right: 16px;
	z-index: 2147483000;
	pointer-events: none;
}

#pxd-pixi-anchor .pxi {
	--pxi-acc: #1E9B52;
	--pxi-ink: #0A3D3A;
	--pxi-ink2: #3d5555;
	--pxi-muted: #5d7070;
	--pxi-sm: cubic-bezier(.32, .72, 0, 1);
	--pxi-bo: cubic-bezier(.34, 1.56, .64, 1);

	pointer-events: auto;
	display: none;
	flex-direction: column;
	text-align: left;
	width: min(408px, calc(100vw - 32px));
	/* `--pxi-vh` est posee par le JS depuis `visualViewport` : c est la SEULE mesure qui
	   retrecit quand le clavier virtuel s ouvre. `dvh` gere la barre d URL d iOS (100vh la
	   compte comme si elle etait toujours retractee, soit ~60 px de trop), mais pas le
	   clavier. Il faut les deux, et la plus petite gagne. */
	max-height: calc(100vh - 92px);
	max-height: min(calc(100dvh - 92px), var(--pxi-vh, 100dvh));
	font-family: Urbanist, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	color: var(--pxi-ink);
	/* 🔴 FOND OPAQUE, ET C'EST UN ECART ASSUME A LA MAQUETTE.
	   Elle pose `rgba(255,255,255,.97)` + `backdrop-filter: blur(24px) saturate(160%)` — un effet
	   de verre invisible sur son fond clair de demo. Mesure du 01/09 sur la vraie page d'accueil :
	   le panneau s'ouvre AU-DESSUS DU HERO VERT FONCE, et `saturate(160%)` amplifie ce vert a
	   travers les 3 % de transparence. Resultat a l'ecran : la moitie haute du panneau virait au
	   vert sombre et le texte d'intro devenait illisible.
	   La lisibilite passe avant l'effet : fond plein, et pas de `backdrop-filter` du tout (inutile
	   derriere un fond opaque, et c'est autant de travail GPU en moins a chaque ouverture).
	   Le degrade de teinte de la maquette, lui, est conserve : il est LISIBLE sur du blanc. */
	background:
		linear-gradient(180deg, rgba(32, 201, 184, .1), rgba(30, 155, 82, .045) 42%, rgba(255, 255, 255, 0) 195px),
		#ffffff;
	border: 1px solid rgba(10, 61, 58, .1);
	border-radius: 18px;
	box-shadow:
		0 16px 48px rgba(1, 40, 39, .18),
		0 0 0 1px rgba(1, 40, 39, .05),
		inset 0 1px 0 rgba(255, 255, 255, .6);
	overflow: hidden;
	animation: pxi-drop .26s var(--pxi-sm);
}

#pxd-pixi-anchor .pxi.is-open { display: flex; }

@keyframes pxi-drop { from { opacity: 0; transform: translateY(-10px) scale(.98); } }

/* ── en-tete ─────────────────────────────────────────────────────────────────────────────── */

#pxd-pixi-anchor .pxi-h { display: flex; align-items: center; gap: 11px; padding: 15px 16px 13px; flex-shrink: 0; }

#pxd-pixi-anchor .pxi-av { position: relative; width: 42px; height: 42px; flex-shrink: 0; }
#pxd-pixi-anchor .pxi-av > i {
	position: absolute; inset: -3px; border-radius: 50%;
	background: conic-gradient(from 0deg, #1E9B52, #20c9b8, #3DBE73, #1E9B52);
	filter: blur(6px); opacity: .5; animation: pxi-spin 7s linear infinite;
}
/* Le fond suit le bouton Pixi DU HEADER tel qu'il est en ligne : `header.css` l'a repeint en
   vert pale (vague « contraste WCAG ») parce que sur son degrade sombre d'origine le contraste
   tombait a 1,43 et que Pixi s'y fondait. Reprendre `#0a4a47` ici aurait refait exactement
   l'erreur que cette vague a corrigee — et donne un rond bleu-vert sombre en tete de fenetre. */
#pxd-pixi-anchor .pxi-av > span {
	position: absolute; inset: 0; border-radius: 50%; overflow: hidden;
	display: grid; place-items: center;
	background: linear-gradient(160deg, #F2FBF6, #E1F4EA);
	box-shadow: inset 0 0 0 2px rgba(30, 155, 82, .55), 0 4px 12px rgba(15, 163, 107, .28);
}
#pxd-pixi-anchor .pxi-av img { display: block; width: 34px; height: 34px; object-fit: contain; }
@keyframes pxi-spin { to { transform: rotate(360deg); } }

#pxd-pixi-anchor .pxi-id { min-width: 0; flex: 1; }
#pxd-pixi-anchor .pxi-id b { display: block; font-size: 15px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
#pxd-pixi-anchor .pxi-id small {
	display: flex; align-items: center; gap: 6px; font-size: 11.4px; font-weight: 600;
	color: var(--pxi-muted); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#pxd-pixi-anchor .pxi-live {
	width: 6px; height: 6px; border-radius: 50%; background: var(--pxi-acc); flex-shrink: 0;
	box-shadow: 0 0 0 3px rgba(30, 155, 82, .18); animation: pxi-pulse 2.6s ease-out infinite;
}
@keyframes pxi-pulse { 0%, 70%, 100% { box-shadow: 0 0 0 3px rgba(30, 155, 82, .18); } 35% { box-shadow: 0 0 0 7px rgba(30, 155, 82, 0); } }

/* ── corps ───────────────────────────────────────────────────────────────────────────────── */

#pxd-pixi-anchor .pxi-body { display: flex; flex-direction: column; min-height: 0; flex: 1; }
#pxd-pixi-anchor .pxi-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }

#pxd-pixi-anchor .pxi-intro { padding: 0 16px 11px; flex-shrink: 0; }
#pxd-pixi-anchor .pxi-intro b { display: block; font-size: 16.5px; font-weight: 800; letter-spacing: -.025em; line-height: 1.2; }
/* 2026-09-22 : le sous-titre de l'intro a disparu (fenetre allegee). Le `<small data-pxi-err>` qui
   reste sous le titre est la zone de message de `send()` : cache par defaut, visible seulement
   quand sessionStorage refuse l'enveloppe (`handover_failed`). */
#pxd-pixi-anchor .pxi-intro [data-pxi-err] { display: none; font-size: 12.2px; font-weight: 600; line-height: 1.45; color: #b3261e; margin-top: 4px; }
#pxd-pixi-anchor .pxi-intro [data-pxi-err]:not([hidden]) { display: block; }

/* ── la saisie ───────────────────────────────────────────────────────────────────────────── */

#pxd-pixi-anchor .pxi-c {
	margin: 0 14px 1px; flex-shrink: 0; border-radius: 16px; background: #fff;
	border: 1.5px solid rgba(10, 61, 58, .11); box-shadow: 0 3px 10px -4px rgba(15, 163, 107, .14);
	transition: border-color .22s var(--pxi-sm), box-shadow .28s var(--pxi-sm);
}
#pxd-pixi-anchor .pxi-c[data-on="1"] {
	border-color: rgba(30, 155, 82, .48);
	box-shadow: 0 0 0 4px rgba(30, 155, 82, .1), 0 10px 24px -12px rgba(15, 163, 107, .5);
}
#pxd-pixi-anchor .pxi-ta { position: relative; padding: 12px 14px 0; }
#pxd-pixi-anchor .pxi-c textarea {
	display: block; width: 100%; min-height: 40px; max-height: 104px; border: 0; outline: 0;
	background: none; resize: none; font-family: inherit; font-size: 13.8px; font-weight: 500;
	line-height: 1.5; letter-spacing: -.005em; color: var(--pxi-ink); overflow-y: auto; scrollbar-width: thin;
	box-shadow: none; padding: 0; border-radius: 0;
}
#pxd-pixi-anchor .pxi-ph {
	position: absolute; top: 12px; left: 14px; right: 14px; font-size: 13.8px; font-weight: 500;
	line-height: 1.5; letter-spacing: -.005em; color: #93a5a5; pointer-events: none;
	animation: pxi-ph .4s var(--pxi-sm);
}
/* 🔴 L'ANNEAU BLEU DU THEME EST RETIRE ICI — ET L'INDICATEUR DE FOCUS N'EST PAS SUPPRIME
   POUR AUTANT, IL EST DEPLACE. C'est la seule raison pour laquelle ce `!important` est
   acceptable, et il faut la lire avant de toucher a ce bloc.

   `buddyx/assets/css/_accessibility.css` pose `:focus-visible { outline: 2px solid #2271b1
   !important }` pour contrer les `outline: 0` qui font DISPARAITRE tout repere clavier. Le
   danger qu'elle vise est reel ; ici il n'existe pas : au focus de la saisie, le conteneur
   `.pxi-c` passe en `data-on="1"` et s'entoure d'un anneau vert de 4 px, parfaitement visible.
   On remplace donc un indicateur par un autre — WCAG 2.4.7 reste tenu — au lieu d'en retirer un.
   🚫 Si l'anneau vert du conteneur venait a disparaitre, CE BLOC DOIT PARTIR AVEC LUI. */
#pxd-pixi-anchor .pxi-c textarea:focus,
#pxd-pixi-anchor .pxi-c textarea:focus-visible {
	outline: none !important;
	outline-offset: 0 !important;
	box-shadow: none;
}


@keyframes pxi-ph { from { opacity: 0; transform: translateY(4px); } }

/* 2026-09-22 : plus de puces « mes voyages » (`.pxi-tr` / `.pxi-chip`) : le bouton d'envoi est seul
   dans la rangee, cale a droite par sa marge auto. */
#pxd-pixi-anchor .pxi-c-b { display: flex; align-items: center; gap: 8px; padding: 6px 10px 10px 12px; }

#pxd-pixi-anchor .pxi-send {
	margin-left: auto; width: 34px; height: 34px; border-radius: 50%; display: grid;
	place-items: center; flex-shrink: 0; border: 0; cursor: pointer; color: #fff;
	background: linear-gradient(135deg, #1E9B52, #3DBE73);
	box-shadow: 0 6px 14px -5px rgba(30, 155, 82, .65), inset 0 1px 0 rgba(255, 255, 255, .3);
	transition: transform .3s var(--pxi-bo), box-shadow .3s, opacity .2s;
}
#pxd-pixi-anchor .pxi-send:disabled { opacity: .3; box-shadow: none; cursor: default; background: linear-gradient(135deg, #5d7070, #8a9c9c); }
#pxd-pixi-anchor .pxi-send:not(:disabled):hover { transform: scale(1.08); }
#pxd-pixi-anchor .pxi-send:not(:disabled):active { transform: scale(.95); }

/* ── onglets et suggestions ──────────────────────────────────────────────────────────────── */

#pxd-pixi-anchor .pxi-tabs { display: flex; gap: 3px; padding: 3px; margin: 13px 14px 0; border-radius: 9999px; background: rgba(10, 61, 58, .05); }
#pxd-pixi-anchor .pxi-tab {
	flex: 1; min-width: 0; height: 29px; border: 0; cursor: pointer; border-radius: 9999px;
	background: transparent; background-image: none; box-shadow: none;
	font-family: inherit; font-size: 11.6px; font-weight: 700; letter-spacing: -.005em;
	color: var(--pxi-muted); transition: background-color .22s, color .22s, box-shadow .22s;
}
#pxd-pixi-anchor .pxi-tab:hover { color: var(--pxi-ink2); }
#pxd-pixi-anchor .pxi-tab[data-on="1"] {
	background: #fff; color: var(--pxi-ink);
	box-shadow: 0 2px 8px rgba(15, 163, 107, .16), inset 0 0 0 1px rgba(30, 155, 82, .14);
}

#pxd-pixi-anchor .pxi-list { display: grid; gap: 2px; padding: 8px 10px 2px; }
#pxd-pixi-anchor .pxi-s {
	display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0;
	cursor: pointer; border-radius: 12px; text-align: left; background: transparent;
	background-image: none; box-shadow: none; font-family: inherit;
	animation: pxi-in .34s var(--pxi-sm) both; transition: background-color .18s;
}
#pxd-pixi-anchor .pxi-s:hover { background: rgba(30, 155, 82, .07); }
#pxd-pixi-anchor .pxi-s > i {
	width: 27px; height: 27px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0;
	background: rgba(10, 61, 58, .055); color: var(--pxi-ink2); transition: background-color .2s, color .2s;
}
#pxd-pixi-anchor .pxi-s:hover > i { background: rgba(30, 155, 82, .12); color: var(--pxi-acc); }
#pxd-pixi-anchor .pxi-s > span { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; letter-spacing: -.005em; line-height: 1.35; color: var(--pxi-ink); }
#pxd-pixi-anchor .pxi-s > em {
	display: grid; place-items: center; flex-shrink: 0; color: var(--pxi-acc);
	opacity: 0; transform: translateX(-5px); transition: opacity .2s, transform .25s var(--pxi-sm);
}
#pxd-pixi-anchor .pxi-s:hover > em { opacity: 1; transform: none; }
@keyframes pxi-in { from { opacity: 0; transform: translateY(7px); } }

/* ── pied ────────────────────────────────────────────────────────────────────────────────── */

#pxd-pixi-anchor .pxi-f {
	flex-shrink: 0; display: flex; align-items: center; gap: 10px; padding: 9px 10px 9px 15px;
	border-top: 1px solid #eef2f2; background: #fafbfb;
}
#pxd-pixi-anchor .pxi-f small { display: flex; align-items: center; gap: 7px; font-size: 11.2px; font-weight: 600; color: var(--pxi-muted); }
#pxd-pixi-anchor .pxi-kbd {
	display: inline-grid; place-items: center; width: 19px; height: 19px; border-radius: 6px;
	background: #fff; border: 1px solid rgba(10, 61, 58, .12); color: var(--pxi-muted);
	box-shadow: 0 1px 0 rgba(10, 61, 58, .06);
}
#pxd-pixi-anchor .pxi-f a {
	margin-left: auto; display: inline-flex; align-items: center; gap: 6px; height: 30px;
	padding: 0 11px; border-radius: 9999px; text-decoration: none;
	background: transparent; background-image: none; box-shadow: none;
	font-family: inherit; font-size: 12.2px; font-weight: 700; letter-spacing: -.005em;
	color: var(--pxi-ink); transition: background-color .2s, color .2s;
}
#pxd-pixi-anchor .pxi-f a:hover { background: rgba(30, 155, 82, .1); color: #177c43; }

/* ── etat « envoi en cours » ─────────────────────────────────────────────────────────────── */

#pxd-pixi-anchor .pxi-go { display: grid; gap: 13px; padding: 4px 16px 18px; animation: pxi-in .3s var(--pxi-sm); }
#pxd-pixi-anchor .pxi-bub {
	justify-self: end; max-width: 84%; margin: 0; padding: 10px 14px;
	border-radius: 15px 15px 5px 15px; background: linear-gradient(135deg, #1E9B52, #2FB268);
	color: #fff; font-size: 13.2px; font-weight: 600; line-height: 1.45; letter-spacing: -.005em;
	box-shadow: 0 10px 20px -10px rgba(30, 155, 82, .7);
}
#pxd-pixi-anchor .pxi-th { display: flex; align-items: center; gap: 9px; font-size: 12.8px; font-weight: 600; color: var(--pxi-ink2); }
#pxd-pixi-anchor .pxi-dots { display: flex; gap: 4px; }
#pxd-pixi-anchor .pxi-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--pxi-acc); animation: pxi-bounce 1.15s ease-in-out infinite; }
@keyframes pxi-bounce { 0%, 65%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-4px); } }
#pxd-pixi-anchor .pxi-bar { display: block; height: 3px; border-radius: 9999px; background: rgba(10, 61, 58, .07); overflow: hidden; }
#pxd-pixi-anchor .pxi-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #1E9B52, #20c9b8); animation: pxi-load 1.4s var(--pxi-sm) forwards; }
@keyframes pxi-load { to { width: 100%; } }

#pxd-pixi-anchor .pxi-card {
	display: flex; align-items: center; gap: 11px; padding: 12px; border-radius: 15px;
	text-decoration: none; color: var(--pxi-ink);
	background: linear-gradient(135deg, rgba(30, 155, 82, .11), rgba(32, 201, 184, .08));
	box-shadow: inset 0 0 0 1px rgba(30, 155, 82, .2);
	transition: transform .3s var(--pxi-bo), box-shadow .3s;
}
#pxd-pixi-anchor .pxi-card:hover { color: var(--pxi-ink); transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgba(30, 155, 82, .34), 0 12px 24px -12px rgba(15, 163, 107, .5); }
#pxd-pixi-anchor .pxi-card > span:first-child {
	width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0;
	color: #fff; background: linear-gradient(135deg, #1E9B52, #3DBE73); box-shadow: 0 4px 10px -3px rgba(30, 155, 82, .5);
}
#pxd-pixi-anchor .pxi-card > span:nth-child(2) { flex: 1; min-width: 0; }
#pxd-pixi-anchor .pxi-card b { display: block; font-size: 13.5px; font-weight: 800; letter-spacing: -.015em; }
#pxd-pixi-anchor .pxi-card small { display: block; font-size: 11.5px; font-weight: 500; color: var(--pxi-muted); margin-top: 2px; }

#pxd-pixi-anchor .pxi-back {
	justify-self: start; display: inline-flex; align-items: center; gap: 5px; border: 0;
	cursor: pointer; background: transparent; background-image: none; box-shadow: none;
	font-family: inherit; font-size: 12.2px; font-weight: 700; color: var(--pxi-muted);
	transition: color .2s;
}
#pxd-pixi-anchor .pxi-back:hover { color: var(--pxi-ink); }

/* ── le voile ─────────────────────────────────────────────────────────────────────────────
   Il n existe QUE sous 780 px, et c est deliberé. Au-dessus, la fenetre est un panneau ancre
   sous son bouton : un panneau ancre ne rend pas la page inerte, on le ferme en cliquant a
   cote. En dessous, c est une feuille modale qui couvre la moitie de l ecran — sans voile,
   rien ne dit qu on est sorti de la page, et le premier geste de fermeture (toucher a cote)
   n a aucune cible visible.
   `pointer-events: auto` est indispensable : l ancre pose `none` et l heritage l emporterait. */

#pxd-pixi-anchor .pxi-scrim { display: none; }

/* ── adaptations ─────────────────────────────────────────────────────────────────────────── */

/* Entre 780 et 900 px la fenetre reste ancree, simplement plus etroite. */
@media (min-width: 781px) and (max-width: 900px) {
	#pxd-pixi-anchor .pxi { width: min(360px, calc(100vw - 28px)); }
	#pxd-pixi-anchor .pxi-intro b { font-size: 15.5px; }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   🔴 SOUS 780 px : UNE FEUILLE PAR LE BAS, PAS UNE FENETRE — 2026-09-01
   ═══════════════════════════════════════════════════════════════════════════════════════════
   Ce qui etait casse : `place()` alignait le bord DROIT du panneau sur celui du bouton, et ne
   bornait QUE la droite (`Math.max(10, innerWidth - r.right)`). Or le bouton Pixi n est pas le
   dernier du bandeau — l avatar le suit. A 390 px de viewport son bord droit tombe vers 300 px,
   donc `right = 90 px`, et le bord gauche d un panneau de 360 px se posait a
   `390 - 90 - 360 = -60 px`. La fenetre sortait de l ecran par la gauche, tronquee. Signale par
   Leo le 2026-09-01, capture a l appui.

   Le clamp est corrige cote JS, mais la feuille par le bas regle trois choses qu un clamp ne
   reglera jamais sur un telephone :
     1. LE CLAVIER. Une fenetre ancree en haut se fait recouvrir par le clavier virtuel des que
        l on touche la saisie — c est-a-dire au premier geste utile. Une feuille ancree en bas
        remonte avec lui (voir `--pxi-vh`).
     2. LE POUCE. La saisie et le bouton d envoi tombent dans la zone atteignable d une main ;
        en haut d un ecran de 6 pouces, ils ne le sont pas.
     3. LE CALCUL. Il n y a plus de position a calculer : la feuille est collee a trois bords.
        Le defaut ne peut donc pas revenir par une autre voie.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 780px) {

	#pxd-pixi-anchor {
		top: auto;
		right: 0;
		left: 0;
		bottom: 0;
	}

	#pxd-pixi-anchor .pxi-scrim {
		display: block;
		position: fixed;
		inset: 0;
		z-index: -1;                       /* sous la feuille, au-dessus de la page */
		pointer-events: auto;
		background: rgba(10, 61, 58, .38);
		-webkit-backdrop-filter: blur(2px);
		backdrop-filter: blur(2px);
		animation: pxi-veil .22s ease;
	}

	#pxd-pixi-anchor .pxi {
		width: 100%;
		max-width: none;
		max-height: calc(100vh - 56px);
		max-height: min(calc(100dvh - 56px), var(--pxi-vh, 88dvh));
		border-radius: 20px 20px 0 0;
		border-bottom: 0;
		/* La feuille touche le bas de l ecran : sur un telephone a barre gestuelle, le pied
		   passerait dessous. ⚠️ `env(safe-area-inset-bottom)` rend 0 tant qu aucune page ne
		   pose `viewport-fit=cover` — et AUCUNE de celles qui servent ce header ne le fait
		   (mesure du 2026-09-01). Le `max()` garantit donc un vrai retrait : c est lui qui
		   travaille aujourd hui, l `env()` prendra le relais le jour ou le meta changera. */
		padding-bottom: max(6px, env(safe-area-inset-bottom));
		box-shadow: 0 -14px 44px rgba(1, 40, 39, .26), 0 0 0 1px rgba(1, 40, 39, .06);
		animation: pxi-rise .3s var(--pxi-sm);
	}

	/* La poignee : elle ne fait rien, et c est assume. Elle DIT que l objet est une feuille et
	   qu il se ferme vers le bas — la convention est assez etablie pour que le seul dessin
	   suffise a l annoncer. La fermeture reelle passe par le voile, la croix et Echap. */
	#pxd-pixi-anchor .pxi::before {
		content: "";
		display: block;
		flex-shrink: 0;
		width: 36px;
		height: 4px;
		margin: 8px auto 2px;
		border-radius: 9999px;
		background: rgba(10, 61, 58, .16);
	}

	#pxd-pixi-anchor .pxi-h { padding: 8px 16px 10px; }
	#pxd-pixi-anchor .pxi-av { width: 38px; height: 38px; }
	#pxd-pixi-anchor .pxi-av img { width: 30px; height: 30px; }
	#pxd-pixi-anchor .pxi-intro b { font-size: 16px; }

	/* Cibles tactiles : les suggestions passent au-dessus de 40 px de haut, le bouton d envoi
	   a 40. Meme plancher que les controles du bandeau. */
	#pxd-pixi-anchor .pxi-send { width: 40px; height: 40px; }
	#pxd-pixi-anchor .pxi-s { padding: 11px 10px; min-height: 44px; }
	#pxd-pixi-anchor .pxi-tab { height: 34px; font-size: 12px; }
	#pxd-pixi-anchor .pxi-f a { height: 36px; padding: 0 14px; }

	/* 🔴 16 px MINIMUM DANS LA SAISIE : en dessous, iOS Safari ZOOME sur le champ au focus
	   et l on ne peut plus dezoomer. C est la seule raison de cette valeur — pas un choix
	   typographique. */
	#pxd-pixi-anchor .pxi-c textarea,
	#pxd-pixi-anchor .pxi-ph { font-size: 16px; }
	#pxd-pixi-anchor .pxi-c textarea { max-height: 88px; }
}

/* Le clavier est ouvert (pose par le JS quand le viewport visuel perd plus de 120 px) : ce qui
   est de la presentation cede la place a ce qui sert — la saisie et les suggestions. */
#pxd-pixi-anchor .pxi.is-kb .pxi-intro { display: none; }
#pxd-pixi-anchor .pxi.is-kb .pxi-h { padding-top: 4px; padding-bottom: 8px; }

@keyframes pxi-rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes pxi-veil { from { opacity: 0; } }

/* Ecran bas (paysage sur telephone, petite fenetre) : l intro se resserre. */
@media (max-height: 660px) {
	#pxd-pixi-anchor .pxi-intro { padding-bottom: 9px; }
}
@media (hover: none) {
	#pxd-pixi-anchor .pxi-s > em { opacity: 1; transform: none; }
	#pxd-pixi-anchor .pxi-card:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	#pxd-pixi-anchor .pxi,
	#pxd-pixi-anchor .pxi-scrim,
	#pxd-pixi-anchor .pxi * { animation: none !important; transition: none; }
}