/* Visite guidée de la page d'un voyage (couloir T, 12/11/2026). Forme des planches de M (canevas KkV94JuJMatYzSGVfCNqJT,
   VG-00 à VG-08) : bulle blanche à liseré vert, surtitre en capitales, croix en haut à droite, points de progression,
   bouton secondaire gris et bouton principal en dégradé ; carte d'accueil centrée, avatar de Pixi qui déborde en haut,
   boutons empilés ; trou du voile à bord blanc et halo vert. Style des itinéraires (pxd-, #0fa36b vers #38c19c, Urbanist).
   Tout est sous .pxvg : aucun sélecteur global ; le bouton #hero-tour-btn n'a que le style .pxd-btn-icon de la page.
   Empilement : sous PixidiaToast (2147483000), au-dessus de la page, de la bulle Pixi et des fenêtres du voyage.
   Boutons : quatre états réécrits (conflits G4/G5 de 10-web/40-design-system/conflicts.md). */

.pxvg {
	--pxvg-ink: #012827;
	--pxvg-ink-2: #29433f;
	--pxvg-mute: #4b6361;
	--pxvg-green: #0fa36b;
	--pxvg-green-2: #38c19c;
	--pxvg-deep: #0b7f56;
	--pxvg-dim: rgba(1, 40, 39, .52);
	--pxvg-ease: cubic-bezier(.2, .8, .2, 1);
	position: fixed;
	inset: 0;
	z-index: 2147482500;
	pointer-events: none;
	font-family: Urbanist, system-ui, -apple-system, "Segoe UI", sans-serif;
	-webkit-font-smoothing: antialiased;
}
.pxvg[hidden] { display: none !important; }
.pxvg.pxvg--attente { visibility: hidden; }

.pxvg .pxvg-veil {
	position: absolute;
	inset: 0;
	pointer-events: auto;
	background: transparent;
}
.pxvg.pxvg--centre .pxvg-veil {
	background: var(--pxvg-dim);
	animation: pxvg-fade .25s ease-out;
}

/* Trou du voile : bord blanc et halo vert, le reste de la page assombri */
.pxvg .pxvg-ring {
	position: fixed;
	pointer-events: none;
	border-radius: 16px;
	box-shadow: 0 0 0 2.5px #fff, 0 0 12px 3px rgba(56, 193, 156, .9), 0 0 0 200vmax var(--pxvg-dim);
	transition: left .34s var(--pxvg-ease), top .34s var(--pxvg-ease), width .34s var(--pxvg-ease), height .34s var(--pxvg-ease), border-radius .34s var(--pxvg-ease);
}
.pxvg .pxvg-ring[hidden] { display: none; }
.pxvg.pxvg--action .pxvg-ring { animation: pxvg-pulse 1.8s ease-in-out infinite; }

/* Bulle d'une étape */
.pxvg .pxvg-pop {
	position: fixed;
	box-sizing: border-box;
	width: min(400px, calc(100vw - 24px));
	padding: 16px 18px 16px;
	pointer-events: auto;
	color: var(--pxvg-ink);
	text-align: left;
	background: rgba(255, 255, 255, .97);
	border: 1px solid rgba(15, 163, 107, .22);
	border-radius: 16px;
	box-shadow: 0 22px 56px -12px rgba(1, 40, 39, .45), 0 4px 14px rgba(15, 163, 107, .12);
	transition: opacity .22s ease-out, transform .22s var(--pxvg-ease);
}
.pxvg.pxvg--cache .pxvg-pop { opacity: 0; transform: translateY(6px); }
.pxvg .pxvg-pop.pxvg-pop--appel { animation: pxvg-appel .42s var(--pxvg-ease); }

.pxvg .pxvg-pop[data-place="bas"],
.pxvg .pxvg-pop[data-place="haut"] {
	left: max(12px, env(safe-area-inset-left));
	right: max(12px, env(safe-area-inset-right));
	width: auto;
	max-width: 520px;
	margin: 0 auto;
}
.pxvg .pxvg-pop[data-place="bas"] { bottom: calc(12px + env(safe-area-inset-bottom)); }
.pxvg .pxvg-pop[data-place="haut"] { top: calc(12px + env(safe-area-inset-top)); }

/* Flèche vers la cible : seule la moitié extérieure du losange est dessinée */
.pxvg .pxvg-arrow {
	position: absolute;
	width: 14px;
	height: 14px;
	display: none;
	background: #fff;
	border: 1px solid rgba(15, 163, 107, .22);
	transform: rotate(45deg);
}
.pxvg .pxvg-pop[data-place="dessous"] .pxvg-arrow { display: block; top: -8px; left: calc(var(--pxvg-arrow-x, 40px) - 7px); clip-path: polygon(0 0, 100% 0, 0 100%); }
.pxvg .pxvg-pop[data-place="dessus"] .pxvg-arrow { display: block; bottom: -8px; left: calc(var(--pxvg-arrow-x, 40px) - 7px); clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.pxvg .pxvg-pop[data-place="droite"] .pxvg-arrow { display: block; left: -8px; top: calc(var(--pxvg-arrow-y, 40px) - 7px); clip-path: polygon(0 0, 100% 100%, 0 100%); }
.pxvg .pxvg-pop[data-place="gauche"] .pxvg-arrow { display: block; right: -8px; top: calc(var(--pxvg-arrow-y, 40px) - 7px); clip-path: polygon(0 0, 100% 0, 100% 100%); }

/* En-tête : surtitre en capitales et croix en haut à droite */
.pxvg .pxvg-head { display: block; margin: 0; }
.pxvg .pxvg-pixi[hidden] { display: none; }
.pxvg .pxvg-count {
	margin: 0 40px 6px 0;
	font-size: 11.5px;
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--pxvg-deep);
}
.pxvg .pxvg-count:empty { display: none; }

.pxvg .pxvg-title {
	margin: 0 36px 6px 0;
	padding: 0;
	font-family: inherit;
	font-size: 19px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -.01em;
	color: var(--pxvg-ink);
	text-transform: none;
	outline: none;
}
.pxvg .pxvg-text {
	margin: 0 0 14px;
	font-size: 14.5px;
	font-weight: 500;
	line-height: 1.45;
	color: var(--pxvg-ink-2);
}
.pxvg .pxvg-hint,
.pxvg .pxvg-status {
	margin: -4px 0 14px;
	padding: 8px 12px;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--pxvg-deep);
	background: rgba(15, 163, 107, .1);
	border-radius: 12px;
}
.pxvg .pxvg-hint[hidden],
.pxvg .pxvg-status:empty { display: none; }

/* Pied : points de progression, puis Précédent et le bouton principal */
.pxvg .pxvg-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.pxvg .pxvg-dots { display: flex; gap: 5px; margin-right: auto; }
.pxvg .pxvg-dots:empty { display: none; }
.pxvg .pxvg-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #cfdcd9;
	transition: width .3s var(--pxvg-ease), background-color .3s ease;
}
.pxvg .pxvg-dot.is-on { width: 18px; border-radius: 4px; background: var(--pxvg-green); }
.pxvg .pxvg-actions { display: flex; gap: 10px; align-items: center; justify-content: flex-end; margin-left: auto; }

.pxvg .pxvg-btn,
.pxvg .pxvg-btn:hover,
.pxvg .pxvg-btn:focus,
.pxvg .pxvg-btn:active {
	-webkit-appearance: none;
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	min-width: 44px;
	margin: 0;
	font-family: inherit !important;
	line-height: 1 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	white-space: nowrap;
	border-radius: 22px !important;
	cursor: pointer;
	text-decoration: none !important;
	transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease;
}
.pxvg .pxvg-btn[hidden] { display: none !important; }
.pxvg .pxvg-btn--primary,
.pxvg .pxvg-btn--primary:hover,
.pxvg .pxvg-btn--primary:focus,
.pxvg .pxvg-btn--primary:active {
	padding: 0 20px;
	font-size: 14.5px !important;
	font-weight: 800 !important;
	color: #fff !important;
	background: linear-gradient(135deg, var(--pxvg-green) 25%, var(--pxvg-green-2) 100%) !important;
	border: 0 !important;
	box-shadow: 0 6px 16px -4px rgba(15, 163, 107, .5) !important;
}
.pxvg .pxvg-btn--primary:hover { transform: translateY(-1px); box-shadow: 0 10px 20px -6px rgba(15, 163, 107, .6) !important; }
.pxvg .pxvg-btn--primary:active { transform: translateY(0) scale(.98); }
.pxvg .pxvg-btn--ghost,
.pxvg .pxvg-btn--ghost:focus,
.pxvg .pxvg-btn--ghost:active {
	padding: 0 16px;
	font-size: 14px !important;
	font-weight: 700 !important;
	color: #1a2e2e !important;
	background: #f0f4f4 !important;
	border: 1px solid rgba(1, 40, 39, .08) !important;
	box-shadow: none !important;
}
.pxvg .pxvg-btn--ghost:hover { color: #012827 !important; background: #e6eeed !important; border: 1px solid rgba(1, 40, 39, .12) !important; box-shadow: none !important; }

.pxvg .pxvg-close,
.pxvg .pxvg-close:hover,
.pxvg .pxvg-close:focus,
.pxvg .pxvg-close:active {
	-webkit-appearance: none;
	appearance: none;
	position: absolute;
	right: 8px;
	top: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	margin: 0;
	padding: 0;
	color: var(--pxvg-mute) !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 50% !important;
	box-shadow: none !important;
	cursor: pointer;
}
.pxvg .pxvg-close:hover { background: rgba(1, 40, 39, .07) !important; }

.pxvg .pxvg-btn:focus-visible,
.pxvg .pxvg-close:focus-visible {
	outline: 3px solid rgba(15, 163, 107, .6) !important;
	outline-offset: 2px !important;
}
.pxvg .pxvg-btn:focus:not(:focus-visible),
.pxvg .pxvg-close:focus:not(:focus-visible) { outline: none !important; }

/* Carte d'accueil (VG-00) : centrée, avatar de Pixi qui déborde en haut, boutons empilés pleine largeur */
.pxvg .pxvg-pop[data-place="centre"] {
	left: 50%;
	top: 50%;
	width: min(400px, calc(100vw - 32px));
	padding: 26px 26px 22px;
	text-align: center;
	border: 1px solid rgba(255, 255, 255, .9);
	border-radius: 22px;
	box-shadow: 0 30px 70px -14px rgba(1, 40, 39, .5);
	transform: translate(-50%, -50%);
}
.pxvg.pxvg--cache .pxvg-pop[data-place="centre"] { transform: translate(-50%, calc(-50% + 6px)); }
.pxvg .pxvg-pixi {
	display: block;
	box-sizing: border-box;
	width: 76px;
	height: 76px;
	margin: -64px auto 12px;
	padding: 3px;
	border: 3px solid var(--pxvg-green);
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 8px 22px rgba(15, 163, 107, .35);
}
.pxvg .pxvg-pixi img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.pxvg .pxvg-pixi--vide { display: none; }
.pxvg.pxvg--centre .pxvg-title { margin: 0 0 8px; font-size: 23px; text-align: center; }
/* Titre focalisé par programme (tabindex -1) : aucun contour, la règle globale du site (bleu #2271b1) ne doit pas passer */
.pxvg .pxvg-title:focus,
.pxvg .pxvg-title:focus-visible { outline: none !important; box-shadow: none !important; }
.pxvg.pxvg--centre .pxvg-text { margin: 0 0 20px; font-size: 15px; text-align: center; }
.pxvg.pxvg--centre .pxvg-dots { display: none; }
.pxvg.pxvg--centre .pxvg-actions { flex-direction: column; align-items: stretch; width: 100%; margin: 0; }
.pxvg.pxvg--centre .pxvg-next { order: -1; }
.pxvg.pxvg--centre .pxvg-btn { min-height: 48px; width: 100%; font-size: 16px !important; border-radius: 24px !important; }

/* Téléphone : boutons de 44 px, bouton principal qui prend la place restante, croix de 44 px */
@media (max-width: 599px) {
	.pxvg .pxvg-btn { font-size: 15px !important; }
	.pxvg .pxvg-actions { flex: 1; }
	.pxvg .pxvg-next { flex: 1; }
	.pxvg .pxvg-close,
	.pxvg .pxvg-close:hover,
	.pxvg .pxvg-close:focus,
	.pxvg .pxvg-close:active { width: 44px; height: 44px; right: 2px; top: 2px; }
}

@keyframes pxvg-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pxvg-pulse {
	0%, 100% { box-shadow: 0 0 0 2.5px #fff, 0 0 12px 3px rgba(56, 193, 156, .9), 0 0 0 200vmax var(--pxvg-dim); }
	50% { box-shadow: 0 0 0 2.5px #fff, 0 0 22px 7px rgba(56, 193, 156, .7), 0 0 0 200vmax var(--pxvg-dim); }
}
@keyframes pxvg-appel {
	0%, 100% { translate: 0 0; }
	30% { translate: 0 -4px; }
	60% { translate: 0 2px; }
}

.pxvg.pxvg--calme *,
.pxvg.pxvg--calme .pxvg-ring { transition: none !important; animation: none !important; }
@media (prefers-reduced-motion: reduce) {
	.pxvg *,
	.pxvg .pxvg-ring { transition: none !important; animation: none !important; }
}