@font-face{font-family:Urbanist;font-style:normal;font-weight:100 900;font-display:swap;src:url('../pixidia-public-pages/assets/fonts/urbanist-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Urbanist;font-style:normal;font-weight:100 900;font-display:swap;src:url('../pixidia-public-pages/assets/fonts/urbanist-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
html{scroll-behavior:smooth}
body.pxsa-page{margin:0;background:#f7f7f9;font-family:Urbanist,-apple-system,sans-serif;color:#0a3d3a}
body.pxsa-page a:hover{color:#178440}
/* --- Jetons du design system (valeurs exactes de tokens.css) --- */
.pxhome {
  color-scheme: light;
  --pxd-primary: #0a3d3a;
  --pxd-primary-dark: #072b28;
  --pxd-secondary: #1e9b52;
  --pxd-secondary-hover: #178440;
  --pxd-secondary-light: #3dbe73;
  --pxd-main: #0fa36b;
  --pxd-fg: #0a3d3a;
  --pxd-fg-title: #072b28;
  --pxd-fg-tertiary: #5d7070;
  --pxd-fg-inverse: #ffffff;
  --pxd-gray-50: #f5f7f7;
  --pxd-gray-100: #eef2f2;
  --pxd-gray-200: #dce4e4;
  --pxd-gray-300: #b8c5c5;
  --pxd-gray-400: #8a9c9c;
  --pxd-gray-500: #5d7070;
  --pxd-cpt-logement: #388e3c;
  --pxd-cpt-transport: #1976d2;
  --pxd-cpt-restauration: #d32f2f;
  --pxd-cpt-experience: #ff9800;
  --pxd-cpt-location: #9c27b0;
  --pxd-badge-gold: #ad8800;
  --pxd-badge-gold-bg: rgba(236, 171, 0, 0.12);
  --pxd-badge-gold-border: rgba(236, 171, 0, 0.15);
  --pxd-bg-page: #f7f7f9;
  --pxd-glass-card: rgba(255, 255, 255, 0.65);
  --pxd-glass-section: rgba(255, 255, 255, 0.78);
  --pxd-glass-section-hv: rgba(255, 255, 255, 0.92);
  --pxd-glass-popup: rgba(255, 255, 255, 0.96);
  --pxd-border-glass: rgba(255, 255, 255, 0.65);
  --pxd-border-popup: rgba(1, 40, 39, 0.10);
  --pxd-tint-secondary-8: rgba(30, 155, 82, 0.08);
  --pxd-tint-secondary-15: rgba(30, 155, 82, 0.15);
  --pxd-tint-secondary-30: rgba(30, 155, 82, 0.30);
  --pxd-tint-main-8: rgba(15, 163, 107, 0.08);
  --pxd-tint-main-15: rgba(15, 163, 107, 0.15);
  --pxd-shadow-sm: 0 4px 10px rgba(15, 163, 107, 0.07);
  --pxd-shadow: 0 10px 30px -5px rgba(15, 163, 107, 0.12), 0 2px 8px rgba(15, 163, 107, 0.06);
  --pxd-shadow-hover: 0 15px 40px -5px rgba(15, 163, 107, 0.25), 0 5px 15px rgba(15, 163, 107, 0.10);
  --pxd-shadow-popup: 0 16px 48px rgba(1, 40, 39, 0.18), 0 0 0 1px rgba(1, 40, 39, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  --pxd-shadow-neon: 0 0 8px rgba(15, 163, 107, 0.25);
  --pxd-shadow-icon: 0 0 0 3px rgba(255, 255, 255, 0.9), 0 6px 12px rgba(15, 163, 107, 0.2);
  --pxd-space-1: 0.3rem;
  --pxd-space-2: 0.5rem;
  --pxd-space-3: 0.8rem;
  --pxd-space-4: 1rem;
  --pxd-space-5: 1.2rem;
  --pxd-space-6: 1.5rem;
  --pxd-space-7: 2rem;
  --pxd-radius-xs: 6px;
  --pxd-radius-sm: 8px;
  --pxd-radius-md: 12px;
  --pxd-radius-lg: 16px;
  --pxd-radius-xl: 18px;
  --pxd-radius-2xl: 20px;
  --pxd-radius-full: 9999px;
  --pxd-blur-card: blur(16px);
  --pxd-blur-popup: blur(24px);
  --font-sans: 'Urbanist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  /* Dégradés et courbes du design system (bundle.css) */
  --pxd-gradient: linear-gradient(135deg, #0a3d3a, #1e9b52);
  --pxd-gradient-icon: linear-gradient(135deg, #1e9b52 25%, #3dbe73 100%);
  --pxd-gradient-reflet: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, transparent 100%);
  --pxd-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --pxd-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* --- Échelle propre à la home (au-delà du DS : demande de Léo) --- */
  --hx-h: 77px;
  --pxhome-gutter: clamp(16px, 3.5vw, 56px);
  --pxhome-wrap: min(1340px, calc(100% - 2 * var(--pxhome-gutter)));
  --pxhome-section: clamp(52px, min(7.5vw, 11svh), 112px);
  --pxhome-fs-display: clamp(1.75rem, 11.5vw, 6.75rem);
  --pxhome-fs-display-wide: min(6vw, 6rem);
  --pxhome-fs-statement: clamp(2.1rem, min(7.6vw, 13svh), 7rem);
  --pxhome-fs-h2: clamp(1.9rem, min(5.6vw, 9.5svh), 4.75rem);
  --pxhome-fs-lead: clamp(1.0625rem, 0.95rem + 0.45vw, 1.3125rem);
  --pxhome-tight: -0.035em;

  font-family: var(--font-sans);
  color: var(--pxd-fg);
  background: var(--pxd-bg-page);
  font-size: 1rem;
  line-height: 1.6;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  text-rendering: optimizeLegibility;
}
@media (max-width: 780px) { .pxhome { --hx-h: 65px; } }

:where(.pxhome) *, :where(.pxhome) *::before, :where(.pxhome) *::after { box-sizing: border-box; }
:where(.pxhome) img, :where(.pxhome) svg { display: block; max-width: 100%; }
:where(.pxhome) :is(p, h1, h2, h3, figure, ul, ol, blockquote) { margin: 0; padding: 0; }
:where(.pxhome) :is(ul, ol) { list-style: none; }
:where(.pxhome) :is(h1, h2, h3) { border: 0; text-align: left; font-family: var(--font-sans); text-transform: none; }
:where(.pxhome) a { color: inherit; text-decoration: none; }
.pxhome :focus-visible { outline: 2px solid var(--pxd-secondary); outline-offset: 3px; border-radius: var(--pxd-radius-sm); }

.pxhome-wrap { width: var(--pxhome-wrap); margin-inline: auto; position: relative; }
.pxhome-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pxhome-ic { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* --- Typo --- */
.pxhome-eyebrow {
  display: inline-flex; align-items: center; gap: var(--pxd-space-2);
  font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--pxd-secondary-hover);
}
.pxhome-eyebrow::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: var(--pxd-gradient-icon); }
.pxhome-h2 {
  font-size: var(--pxhome-fs-h2); font-weight: 800; line-height: 1.02; letter-spacing: var(--pxhome-tight);
  color: var(--pxd-fg-title); text-wrap: balance;
}
.pxhome-lead { font-size: var(--pxhome-fs-lead); line-height: 1.55; color: var(--pxd-fg-tertiary); font-weight: 500; text-wrap: pretty; max-width: 40em; }
.pxhome-lead strong { color: var(--pxd-fg); font-weight: 700; }
.pxhome-accent {
  background: linear-gradient(120deg, var(--pxd-primary) 0%, var(--pxd-secondary) 70%, var(--pxd-secondary-light) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* --- Boutons (pill, signature) --- */
.pxhome-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--pxd-space-3);
  min-height: 56px; padding: 0 var(--pxd-space-7); border-radius: var(--pxd-radius-full); border: 0;
  font: 700 1.0625rem/1 var(--font-sans); letter-spacing: -0.01em; cursor: pointer;
  color: var(--pxd-fg-inverse); background: var(--pxd-gradient);
  box-shadow: 0 10px 30px -5px rgba(15, 163, 107, 0.35), 0 2px 8px rgba(15, 163, 107, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: transform 0.35s var(--pxd-bounce), box-shadow 0.35s var(--pxd-ease), filter 0.25s var(--pxd-ease);
  text-decoration: none;
}
.pxhome-btn .pxhome-ic { font-size: 1.15em; transition: transform 0.35s var(--pxd-bounce); }
.pxhome-btn:hover { transform: translateY(-3px); box-shadow: var(--pxd-shadow-hover); filter: saturate(1.1); color: var(--pxd-fg-inverse); }
.pxhome-btn:hover .pxhome-ic { transform: translateX(4px); }
.pxhome-btn:focus-visible { outline: 2px solid var(--pxd-secondary); outline-offset: 3px; color: var(--pxd-fg-inverse); }
.pxhome-btn:active { transform: scale(0.97); }
.pxhome-btn--light { background: var(--pxd-fg-inverse); color: var(--pxd-primary-dark); box-shadow: 0 16px 48px rgba(1, 40, 39, 0.35); }
.pxhome-btn--light:hover, .pxhome-btn--light:focus-visible { color: var(--pxd-primary-dark); }
.pxhome-link {
  display: inline-flex; align-items: center; gap: var(--pxd-space-2); min-height: 44px;
  font-weight: 700; color: var(--pxd-primary); border-bottom: 2px solid var(--pxd-tint-secondary-30);
  transition: color 0.25s var(--pxd-ease), border-color 0.25s var(--pxd-ease);
}
.pxhome-link:hover, .pxhome-link:focus-visible { color: var(--pxd-secondary-hover); border-color: var(--pxd-secondary); }

/* --- Verre (L1 carte / L2 section), toujours avec reflet + bordure --- */
.pxhome-glass {
  position: relative; isolation: isolate;
  background: var(--pxd-glass-card); -webkit-backdrop-filter: var(--pxd-blur-card); backdrop-filter: var(--pxd-blur-card);
  border: 1px solid var(--pxd-border-glass); border-radius: var(--pxd-radius-xl); box-shadow: var(--pxd-shadow);
}
.pxhome-glass::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  background: var(--pxd-gradient-reflet); opacity: 0.5;
}
.pxhome-glass--strong { background: var(--pxd-glass-section); }

/* --- Pastille d'icône du DS --- */
.pxhome-icon {
  display: inline-grid; place-items: center; width: 36px; height: 36px; flex: none;
  border-radius: var(--pxd-radius-md); color: var(--pxd-fg-inverse); background: var(--pxd-gradient-icon);
  box-shadow: var(--pxd-shadow-icon); font-size: 18px;
}
.pxhome-icon--logement { background: var(--pxd-cpt-logement); }
.pxhome-icon--transport { background: var(--pxd-cpt-transport); }
.pxhome-icon--restauration { background: var(--pxd-cpt-restauration); }
.pxhome-icon--experience { background: var(--pxd-cpt-experience); }

.pxhome-badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--pxd-radius-full);
  font-size: 0.75rem; font-weight: 700; white-space: nowrap;
  color: var(--pxd-secondary-hover); background: var(--pxd-tint-secondary-8); border: 1px solid var(--pxd-tint-secondary-15);
}
.pxhome-badge--ia { color: var(--pxd-primary); background: var(--pxd-gray-100); border-color: var(--pxd-border-popup); }
.pxhome-fine { font-size: 0.8125rem; font-weight: 600; color: var(--pxd-fg-tertiary); }
.pxhome-topo { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; color: var(--pxd-primary); opacity: 0.12; }



/* =====================================================================
   v4 : refonte complète. Même design system, mouvement piloté par le scroll.
   Règles d'accessibilité de l'audit v3 conservées : contraste AA, texte >= 14 px,
   cibles 44 px, aucun texte estompé, animations forcées (voir app.js).
   ===================================================================== */
.pxhome {
  --pxd-gradient: linear-gradient(135deg, #0a3d3a, #178440);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --pxd-primary-dark: #072b28;
}
.pxhome-accent { background-image: linear-gradient(120deg, #0a3d3a 0%, #178440 100%); }
.pxhome-eyebrow, .pxhome-badge, .pxhome-fine { color: #0a3d3a; }
.pxhome-eyebrow, .pxhome-fine { font-size: 0.875rem; }
.pxhome :is(a, button):focus-visible { outline: 2px solid #0a3d3a; outline-offset: 3px; box-shadow: 0 0 0 3px #fff; }
.pxhome .pxhome-dark :is(a, button):focus-visible { outline-color: #fff; box-shadow: 0 0 0 3px #072b28; }
.pxhome section { position: relative; }

/* --- Boutons complémentaires --- */
.pxhome-btn--ghost { background: var(--pxd-glass-section-hv); color: var(--pxd-primary-dark); border: 1px solid var(--pxd-border-popup); box-shadow: var(--pxd-shadow-sm); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.pxhome-btn--ghost:hover, .pxhome-btn--ghost:focus-visible { color: var(--pxd-primary-dark); background: #fff; }
.pxhome-btn--sm { min-height: 44px; padding: 0 var(--pxd-space-5); font-size: 0.9375rem; }
.pxhome-btn--ghost-dark { background: rgba(255, 255, 255, 0.08); color: #fff; border: 1px solid rgba(255, 255, 255, 0.4); box-shadow: none; }
.pxhome-btn--ghost-dark:hover, .pxhome-btn--ghost-dark:focus-visible { color: #fff; background: rgba(255, 255, 255, 0.18); }
.pxhome-btn--shine { position: relative; overflow: hidden; }
.pxhome-btn--shine::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.45) 50%, transparent 70%); transform: translateX(-120%); }
@media all {
  .pxhome-btn--shine::after { animation: pxhome-shine 4.5s var(--pxd-ease) 1.6s infinite; }
}
@keyframes pxhome-shine { 0%, 55% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }

/* --- Révélations --- */
.pxhome-js [data-reveal] { opacity: 0; transform: translateY(32px) scale(0.985); transition: opacity 0.9s var(--ease-out), transform 1s var(--ease-out); transition-delay: calc(var(--i, 0) * 90ms); }
.pxhome-js [data-reveal].is-in { opacity: 1; transform: none; }
.pxhome-js [data-reveal="left"] { transform: translateX(-40px); }
.pxhome-js [data-reveal="right"] { transform: translateX(40px); }
.pxhome-js [data-reveal="zoom"] { transform: scale(0.9); }
.pxhome-js [data-reveal].is-in { transform: none; }
.pxhome-still [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }

/* --- Pixi (image + vidéo optionnelle superposée) --- */
.pxhome-pixi { position: relative; display: block; }
.pxhome-pixi > img { width: 100%; height: auto; transition: opacity 0.5s var(--pxd-ease); filter: drop-shadow(0 24px 30px rgba(1, 40, 39, 0.28)); }
.pxhome-pixi > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; pointer-events: none; transition: opacity 0.5s var(--pxd-ease); }
.pxhome-pixi.has-video > video { opacity: 1; }
.pxhome-pixi.has-video > img { opacity: 0; }

/* =====================================================================
   1. HERO
   ===================================================================== */
.pxhome-hero { overflow: clip; display: flex; min-height: min(calc(100svh - var(--hx-h)), 940px); background: var(--pxd-gray-100); isolation: isolate; }
.pxhome-hero-map { position: absolute; inset: -3%; z-index: 0; transform: scale(calc(1 + var(--hp, 0) * 0.14)) translateY(calc(var(--hp, 0) * 50px)); transform-origin: 70% 40%; will-change: transform; }
.pxhome-layer { position: absolute; inset: 0; display: none; }
.pxhome-layer.is-on { display: block; }
.pxcv-d, .pxcv-m { position: absolute; inset: 0; }
.pxcv-m { display: none; }
.pxcv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
@media (max-width: 999px) { .pxcv-d { display: none; } .pxcv-m { display: block; } }
.pxcv-seg { stroke-dasharray: 1; stroke-dashoffset: 0; }
.pxcv-pin { transform-box: fill-box; transform-origin: 50% 100%; filter: drop-shadow(0 4px 5px rgba(1, 40, 39, 0.28)); }
@keyframes pxcv-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes pxhome-drop { 0% { opacity: 0; transform: translateY(-22px) scale(0.6); } 60% { opacity: 1; transform: translateY(2px) scale(1.04); } 100% { opacity: 1; transform: none; } }
@media all {
  .pxhome:not(.pxhome-still) .pxcv--temps .pxcv-seg { animation: pxcv-draw var(--t) linear var(--s) both; }
  .pxhome:not(.pxhome-still) .pxcv--temps .pxcv-pin { animation: pxhome-drop 0.6s var(--pxd-bounce) var(--s) both; }
  .pxhome.is-paused .pxcv--temps .pxcv-seg, .pxhome.is-paused .pxcv--temps .pxcv-pin { animation-play-state: paused; }
}
.pxhome-hero-veil { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(247, 247, 249, 0.97) 0%, rgba(247, 247, 249, 0.9) 32%, rgba(247, 247, 249, 0.4) 55%, rgba(247, 247, 249, 0) 72%),
    linear-gradient(0deg, rgba(247, 247, 249, 1) 0%, rgba(247, 247, 249, 0) 20%); }
.pxhome-hero-inner { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: var(--pxd-space-6); padding-block: clamp(28px, 6vh, 72px) clamp(40px, 8vh, 96px); }
.pxhome-hero-copy { display: flex; flex-direction: column; gap: clamp(18px, 2.2vw, 28px); max-width: 680px; }
.pxhome-kicker { display: inline-flex; align-self: flex-start; align-items: center; gap: var(--pxd-space-3); min-height: 40px; padding: 4px var(--pxd-space-4) 4px 4px; border-radius: var(--pxd-radius-full); font-size: 0.9375rem; font-weight: 700; color: var(--pxd-primary); }
.pxhome-kicker img { width: 32px; height: 32px; border-radius: 50%; background: var(--pxd-gray-100); }
.pxhome-h1 { font-size: clamp(2.3rem, 9.6vw, 3.9rem); font-weight: 800; line-height: 1; letter-spacing: -0.045em; color: var(--pxd-fg-title); }
.pxhome-h1 .pxhome-line { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.pxhome-h1 .pxhome-w { display: inline-block; }
@media all {
  .pxhome-h1 .pxhome-w { transform: translateY(115%) rotate(4deg); animation: pxhome-rise 1s var(--ease-out) both; animation-delay: calc(var(--i) * 80ms + 200ms); }
  .pxhome-hero-copy > *:not(h1) { animation: pxhome-fade 0.9s var(--ease-out) both; animation-delay: calc(var(--d, 0) * 1ms + 700ms); }
}
@keyframes pxhome-rise { to { transform: none; } }
@keyframes pxhome-fade { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.pxhome-hero-copy .pxhome-lead { color: #0a3d3a; max-width: 30em; }
.pxhome-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pxd-space-4) var(--pxd-space-6); }
.pxhome-reassure { display: flex; align-items: center; gap: var(--pxd-space-2); font-size: 0.9375rem; font-weight: 600; color: #0a3d3a; }
.pxhome-reassure .pxhome-ic { color: var(--pxd-secondary); font-size: 1.1em; }

.pxhome-hero-stage { position: relative; height: clamp(400px, 92vw, 520px); margin-top: var(--pxd-space-2); }
.pxhome-hero-pixi-wrap { position: absolute; right: -6%; bottom: 0; width: min(92%, 560px); transform: translate3d(calc(var(--mx, 0) * 16px), calc(var(--my, 0) * 10px + var(--hp, 0) * -70px), 0) rotate(calc(var(--mx, 0) * 1.4deg)); transition: transform 0.5s var(--ease-out); will-change: transform; }
.pxhome-hero-pixi-wrap .pxhome-pixi { animation: pxhome-float 6s ease-in-out infinite; }
@keyframes pxhome-float { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-12px) rotate(-0.6deg); } }
.pxhome-float { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: var(--pxd-radius-full); font-size: 0.9375rem; font-weight: 800; color: var(--pxd-fg-title); background: var(--pxd-glass-section); -webkit-backdrop-filter: var(--pxd-blur-card); backdrop-filter: var(--pxd-blur-card); border: 1px solid var(--pxd-border-glass); box-shadow: var(--pxd-shadow-popup); white-space: nowrap; transform: translate3d(calc(var(--mx, 0) * var(--dp, 20) * 1px), calc(var(--my, 0) * var(--dp, 20) * 1px + var(--hp, 0) * var(--dp, 20) * -4px), 0); transition: transform 0.5s var(--ease-out); }
.pxhome-float .pxhome-icon { width: 32px; height: 32px; font-size: 16px; border-radius: 50%; }
.pxhome-float i { font-style: normal; display: block; animation: pxhome-bob 5s ease-in-out infinite; animation-delay: var(--bd, 0s); }
@keyframes pxhome-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.pxhome-float--a { left: 2%; top: 12%; --dp: 34; }
.pxhome-float--b { right: 4%; top: 4%; --dp: 22; --bd: -1.5s; }
.pxhome-float--c { left: 8%; top: 46%; --dp: 46; --bd: -3s; }

.pxhome-trip-chip { position: absolute; z-index: 4; left: 0; bottom: 0; width: min(100%, 340px); padding: var(--pxd-space-4) var(--pxd-space-5); display: flex; flex-direction: column; gap: 4px; background: var(--pxd-glass-section-hv); box-shadow: var(--pxd-shadow-popup); }
.pxhome-chip-kicker { display: flex; align-items: center; gap: 8px; font-size: 0.875rem; font-weight: 700; color: #0a3d3a; }
.pxhome-chip-kicker img { width: 22px; height: 22px; border-radius: 50%; }
.pxhome-chip-title { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; color: var(--pxd-fg-title); line-height: 1.15; }
.pxhome-chip-sub { font-size: 0.9375rem; font-weight: 600; color: #3f5a58; }
.pxhome-chip-stats { display: flex; gap: var(--pxd-space-3); flex-wrap: wrap; font-size: 0.9375rem; font-weight: 800; color: #0a3d3a; margin-top: 2px; }
.pxhome-chip-stats span + span::before { content: "·"; margin-right: var(--pxd-space-3); color: var(--pxd-gray-400); font-weight: 700; }
.pxhome-chip-cta { margin-top: var(--pxd-space-2); align-self: flex-start; }
.pxhome-chip-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--pxd-gray-100); }
.pxhome-dots-nav { display: inline-flex; gap: 0; }
.pxhome-dots-nav button { position: relative; width: 44px; height: 44px; border: 0; background: none; cursor: pointer; }
.pxhome-dots-nav button::before { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px; border-radius: 99px; background: var(--pxd-gray-300); transition: width 0.4s var(--pxd-ease), background 0.3s; }
.pxhome-dots-nav button[aria-pressed="true"]::before { width: 26px; margin-left: -13px; background: var(--pxd-gradient); }
.pxhome-pause { width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--pxd-gray-100); color: #0a3d3a; display: grid; place-items: center; cursor: pointer; }
.pxhome-pause .pxhome-ic { fill: currentColor; }
.pxhome-pause .pxhome-ic--play { display: none; }
.pxhome-pause[aria-pressed="true"] .pxhome-ic--play { display: block; }
.pxhome-pause[aria-pressed="true"] .pxhome-ic--pause { display: none; }
.pxhome-scrollhint { display: none; }
@media (min-width: 1000px) {
  .pxhome-hero-inner { grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr); gap: var(--pxd-space-7); }
  .pxhome-h1 { font-size: min(5.1vw, 5.1rem); }
  .pxhome-hero-stage { height: min(74vh, 680px); margin-top: 0; }
  .pxhome-hero-pixi-wrap { right: -3%; width: min(100%, 640px); }
  .pxhome-float--a { left: -2%; top: 14%; }
  .pxhome-float--c { left: 6%; top: 44%; }
  .pxhome-trip-chip { left: auto; right: 2%; bottom: 2%; }
  .pxhome-scrollhint { display: inline-flex; align-items: center; gap: 10px; position: absolute; left: 50%; bottom: 14px; z-index: 5; transform: translateX(-50%); font-size: 0.875rem; font-weight: 700; color: #0a3d3a; }
  .pxhome-scrollhint i { width: 22px; height: 34px; border: 2px solid #0a3d3a; border-radius: 99px; position: relative; }
  .pxhome-scrollhint i::after { content: ""; position: absolute; left: 50%; top: 6px; width: 4px; height: 8px; margin-left: -2px; border-radius: 4px; background: #0a3d3a; animation: pxhome-wheel 1.8s var(--pxd-ease) infinite; }
}
@keyframes pxhome-wheel { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(12px); } }

/* =====================================================================
   2. PROBLÈME : le chaos (4 envies) qui s'aligne au scroll
   ===================================================================== */
.pxhome-problem { height: 340vh; background: linear-gradient(180deg, var(--pxd-bg-page) 0%, #eef6f2 100%); }
.pxhome-pin { position: sticky; top: var(--hx-h); height: calc(100svh - var(--hx-h)); display: flex; flex-direction: column; justify-content: center; gap: clamp(14px, 2.5vh, 28px); overflow: clip; }
.pxhome-problem .pxhome-h2 { max-width: 15em; font-size: clamp(1.7rem, min(6.4vw, 8.5svh), 4rem); }
.pxhome-sub { position: relative; font-size: var(--pxhome-fs-lead); font-weight: 600; color: #0a3d3a; min-height: 2.9em; }
.pxhome-sub > span { display: block; transition: opacity 0.5s var(--pxd-ease), transform 0.6s var(--ease-out); }
.pxhome-sub .pxhome-sub-b { position: absolute; inset: 0; opacity: 0; transform: translateY(14px); font-weight: 800; }
.pxhome-problem.is-aligned .pxhome-sub-a { opacity: 0; transform: translateY(-14px); }
.pxhome-problem.is-aligned .pxhome-sub-b { opacity: 1; transform: none; }
.pxhome-clash { position: relative; height: clamp(230px, 42svh, 420px); }
.pxhome-clash-b { position: absolute; left: calc((var(--x0) * (1 - var(--q, 0)) + var(--x1) * var(--q, 0)) * 1%); top: calc((var(--y0) * (1 - var(--q, 0)) + var(--y1) * var(--q, 0)) * 1%); transform: translate(-50%, -50%) rotate(calc(var(--r0) * (1 - var(--q, 0)) * 1deg)) scale(calc(1 - var(--q, 0) * 0.08)); will-change: left, top, transform; z-index: 2; }
.pxhome-clash-in { display: flex; align-items: center; gap: calc(10px * (1 - var(--q, 0))); padding: 8px calc(18px * (1 - var(--q, 0)) + 8px) 8px 8px; border-radius: 26px; background: #fff; border: 2px solid var(--c); box-shadow: 0 12px 28px -8px rgba(1, 40, 39, 0.22); }
@media all { .pxhome-problem:not(.is-aligned) .pxhome-clash-in { animation: pxhome-shake 2.4s ease-in-out infinite; animation-delay: var(--sd, 0s); } }
@keyframes pxhome-shake { 0%, 100% { transform: translate(0, 0) rotate(0); } 25% { transform: translate(3px, -3px) rotate(1deg); } 50% { transform: translate(-3px, 2px) rotate(-1.2deg); } 75% { transform: translate(2px, 3px) rotate(0.8deg); } }
.pxhome-face { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%; font-weight: 800; font-size: 1rem; background: var(--c); color: #fff; }
.pxhome-clash-t { display: block; width: calc(var(--w, 200) * (1 - var(--q, 0)) * 1px); overflow: hidden; opacity: calc(1 - var(--q, 0) * 3.2); font-size: 0.9375rem; font-weight: 700; line-height: 1.25; color: var(--pxd-fg-title); }
.pxhome-clash-ti { display: block; width: calc(var(--w, 200) * 1px); }
.pxhome-clash-t b { display: block; font-size: 0.875rem; font-weight: 800; color: var(--c-dark, var(--pxd-fg-title)); }
.pxhome-clash-plan { position: absolute; left: 50%; top: 40%; z-index: 1; width: min(88%, 360px); padding: var(--pxd-space-4) var(--pxd-space-5); background: var(--pxd-glass-popup); box-shadow: var(--pxd-shadow-popup); opacity: calc((var(--q, 0) - 0.55) * 2.6); transform: translate(-50%, calc(-50% + (1 - var(--q, 0)) * 40px)) scale(calc(0.9 + var(--q, 0) * 0.1)); pointer-events: none; }
.pxhome-clash-plan h3 { font-size: 0.875rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #0a3d3a; margin-bottom: 8px; }
.pxhome-clash-plan ol { display: flex; flex-direction: column; gap: 8px; }
.pxhome-clash-plan li { display: flex; align-items: center; gap: 10px; font-size: 1rem; font-weight: 800; color: var(--pxd-fg-title); }
.pxhome-clash-plan li i { width: 12px; height: 12px; border-radius: 50%; background: var(--c); flex: none; box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 18%, transparent); }
.pxhome-clash-pixi { position: absolute; right: -2%; bottom: -3%; z-index: 3; width: clamp(130px, 28vw, 300px); pointer-events: none; }
.pxhome-clash-pixi img { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; filter: drop-shadow(0 18px 22px rgba(1, 40, 39, 0.25)); transform-origin: 50% 100%; }
.pxhome-clash-pixi img:first-child { position: relative; opacity: calc(1 - var(--q, 0) * 2.4); filter: drop-shadow(0 18px 22px rgba(1, 40, 39, 0.25)); }
.pxhome-clash-pixi img + img { opacity: calc((var(--q, 0) - 0.4) * 2.4); transform: translateY(calc((1 - var(--q, 0)) * 30px)) scale(calc(0.92 + var(--q, 0) * 0.08)); }
.pxhome-pains { display: grid; grid-template-columns: 1fr; gap: var(--pxd-space-3); }
.pxhome-pain { display: flex; gap: var(--pxd-space-3); align-items: flex-start; padding: var(--pxd-space-3) var(--pxd-space-4); background: var(--pxd-glass-section-hv); }
.pxhome-pain-ic { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: var(--pxd-radius-md); background: var(--c); color: #fff; font-size: 18px; }
.pxhome-pain h3 { font-size: 1rem; font-weight: 800; color: var(--pxd-fg-title); line-height: 1.2; }
.pxhome-pain p { font-size: 0.9375rem; font-weight: 600; color: #3f5a58; line-height: 1.35; }
@media (max-width: 999px) { .pxhome-pains { display: none; } .pxhome-problem { height: 300vh; } }
@media (min-width: 1000px) {
  .pxhome-pains { grid-template-columns: repeat(3, 1fr); }
  .pxhome-clash { height: clamp(220px, 36svh, 380px); }
}

/* =====================================================================
   3. COMMENT ÇA MARCHE : étapes épinglées, Pixi change de pose
   ===================================================================== */
.pxhome-how { background: var(--pxd-bg-page); padding-block: var(--pxhome-section) 0; }
.pxhome-how-head { display: flex; flex-direction: column; gap: var(--pxd-space-3); margin-bottom: clamp(28px, 4vw, 56px); }
.pxhome-steps { display: flex; flex-direction: column; gap: var(--pxd-space-6); counter-reset: st; }
.pxhome-step { position: relative; display: flex; flex-direction: column; gap: var(--pxd-space-4); padding: var(--pxd-space-5); }
.pxhome-step-n { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--pxd-gradient); color: #fff; font-weight: 800; box-shadow: var(--pxd-shadow-icon); }
.pxhome-step h3 { font-size: clamp(1.5rem, 4.2vw, 2.2rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.08; color: var(--pxd-fg-title); }
.pxhome-step-text p { font-size: 1.0625rem; font-weight: 600; color: #3f5a58; line-height: 1.5; max-width: 26em; }
.pxhome-step-text { display: flex; flex-direction: column; gap: var(--pxd-space-3); }
.pxhome-step-visual { position: relative; padding: var(--pxd-space-4); border-radius: var(--pxd-radius-xl); background: linear-gradient(160deg, #fff 0%, #eef6f2 100%); border: 1px solid var(--pxd-border-popup); display: flex; flex-direction: column; gap: 10px; min-height: 230px; justify-content: center; overflow: hidden; }
.pxhome-step-pixi { width: clamp(150px, 42vw, 220px); align-self: flex-end; margin-top: -60px; position: relative; z-index: 2; pointer-events: none; }
.pxhome-step-pixi img { width: 100%; height: auto; filter: drop-shadow(0 18px 22px rgba(1, 40, 39, 0.25)); }

.pxhome-bubble { max-width: 86%; padding: 12px 16px; border-radius: 20px; font-size: 1rem; font-weight: 700; line-height: 1.35; }
.pxhome-bubble--pixi { align-self: flex-start; background: #fff; color: var(--pxd-fg-title); border-top-left-radius: 6px; box-shadow: var(--pxd-shadow-sm); border: 1px solid var(--pxd-gray-100); }
.pxhome-bubble--me { align-self: flex-end; background: var(--pxd-gradient); color: #fff; border-top-right-radius: 6px; }
.pxhome-traits { display: flex; flex-wrap: wrap; gap: 8px; }
.pxhome-trait { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 99px; font-size: 0.875rem; font-weight: 800; color: #0a3d3a; background: var(--pxd-tint-secondary-8); border: 1px solid var(--pxd-tint-secondary-30); }
.pxhome-trait .pxhome-ic { font-size: 14px; }
.pxhome-trait--edit { background: #fff; border-style: dashed; }
.pxhome-faces { display: flex; align-items: center; justify-content: center; gap: 0; }
.pxhome-faces .pxhome-face { width: 56px; height: 56px; font-size: 1.25rem; border: 4px solid #fff; margin-left: -10px; box-shadow: 0 8px 16px -6px rgba(1, 40, 39, 0.3); }
.pxhome-faces .pxhome-face:first-child { margin-left: 0; }
.pxhome-mini-plan { display: flex; flex-direction: column; gap: 8px; }
.pxhome-mini-plan li { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: var(--pxd-radius-lg); background: #fff; border: 1px solid var(--pxd-gray-100); font-size: 1rem; font-weight: 800; color: var(--pxd-fg-title); box-shadow: var(--pxd-shadow-sm); }
.pxhome-mini-plan li i { width: 12px; height: 12px; border-radius: 50%; background: var(--c); flex: none; box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 18%, transparent); }
.pxhome-mini-route { width: 100%; height: auto; overflow: visible; }
.pxhome-mini-route .pxhome-draw { stroke-dasharray: 1; stroke-dashoffset: 1; }
.pxhome-mini-route .pxhome-pop { transform-box: fill-box; transform-origin: center; opacity: 0; transform: scale(0.3); }
.pxhome-step.is-active .pxhome-mini-route .pxhome-draw { stroke-dashoffset: 0; transition: stroke-dashoffset 1.8s var(--pxd-ease) 0.3s; }
.pxhome-step.is-active .pxhome-mini-route .pxhome-pop { opacity: 1; transform: none; transition: opacity 0.4s, transform 0.6s var(--pxd-bounce); transition-delay: var(--d, 0s); }
.pxhome-js .pxhome-step .pxhome-bubble, .pxhome-js .pxhome-step .pxhome-trait, .pxhome-js .pxhome-step .pxhome-face, .pxhome-js .pxhome-step .pxhome-mini-plan li { opacity: 0; transform: translateY(14px) scale(0.96); transition: opacity 0.5s var(--ease-out), transform 0.7s var(--ease-out); transition-delay: calc(var(--k, 0) * 140ms + 200ms); }
.pxhome-js .pxhome-step.is-active .pxhome-bubble, .pxhome-js .pxhome-step.is-active .pxhome-trait, .pxhome-js .pxhome-step.is-active .pxhome-face, .pxhome-js .pxhome-step.is-active .pxhome-mini-plan li { opacity: 1; transform: none; }
.pxhome-still .pxhome-step .pxhome-bubble, .pxhome-still .pxhome-step .pxhome-trait, .pxhome-still .pxhome-step .pxhome-face, .pxhome-still .pxhome-step .pxhome-mini-plan li, .pxhome-still .pxhome-mini-route .pxhome-draw, .pxhome-still .pxhome-mini-route .pxhome-pop { opacity: 1 !important; transform: none !important; stroke-dashoffset: 0 !important; transition: none !important; }
.pxhome-budget-chip { align-self: flex-start; }

@media (min-width: 1000px) {
  .pxhome-how { height: 420vh; padding-block: 0; }
  .pxhome-how .pxhome-pin { gap: clamp(18px, 3vh, 36px); justify-content: center; }
  .pxhome-how-head { margin-bottom: 0; max-width: 40em; }
  .pxhome-how .pxhome-h2 { font-size: clamp(1.7rem, min(4.2vw, 7svh), 3.6rem); }
  .pxhome-steps { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); grid-template-rows: repeat(3, auto); column-gap: clamp(36px, 6vw, 110px); row-gap: var(--pxd-space-3); position: relative; }
  .pxhome-step { display: contents; }
  .pxhome-step-n { display: none; }
  .pxhome-step-text { grid-column: 1; position: relative; padding: 16px 20px 16px 28px; border-radius: var(--pxd-radius-xl); transition: background 0.5s var(--pxd-ease), box-shadow 0.5s var(--pxd-ease); }
  .pxhome-step-text::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 5px; border-radius: 5px; background: var(--pxd-gray-200); transition: background 0.4s; }
  .pxhome-step-text h3 { font-size: clamp(1.35rem, 2.1vw, 1.9rem); }
  .pxhome-step-text h3 span { display: inline-block; margin-right: 10px; color: var(--pxd-secondary); font-weight: 800; }
  .pxhome-step-text p { font-size: 1rem; }
  .pxhome-step.is-active .pxhome-step-text { background: var(--pxd-glass-section-hv); box-shadow: var(--pxd-shadow); }
  .pxhome-step.is-active .pxhome-step-text::before { background: var(--pxd-gradient); }
  .pxhome-step-visual { grid-column: 2; grid-row: 1 / 4; align-self: stretch; opacity: 0; transform: translateY(24px) scale(0.97); transition: opacity 0.6s var(--ease-out), transform 0.8s var(--ease-out); pointer-events: none; min-height: 0; padding: clamp(18px, 2.4vw, 36px) clamp(18px, 2.4vw, 36px) clamp(70px, 8vw, 120px); gap: 14px; border-radius: 28px; box-shadow: var(--pxd-shadow-popup); }
  .pxhome-step.is-active .pxhome-step-visual { opacity: 1; transform: none; }
  .pxhome-step-pixi { grid-column: 2; grid-row: 1 / 4; align-self: end; justify-self: end; width: clamp(190px, 19vw, 290px); margin: 0 -2.4% -4% 0; opacity: 0; transform: translateY(40px) scale(0.9); transition: opacity 0.5s var(--ease-out) 0.15s, transform 0.8s var(--pxd-bounce) 0.15s; z-index: 3; }
  .pxhome-step.is-active .pxhome-step-pixi { opacity: 1; transform: none; }
  .pxhome-bubble { font-size: 1.125rem; }
  .pxhome-faces .pxhome-face { width: 76px; height: 76px; font-size: 1.6rem; margin-left: -14px; }
  .pxhome-mini-plan li { font-size: 1.125rem; padding: 14px 18px; }
  .pxhome-step-visual--route { justify-content: center; }
}
@media (max-width: 999px) {
  .pxhome-step-text .pxhome-step-n { display: none; }
  .pxhome-step-text h3 span { display: none; }
  .pxhome-step { background: var(--pxd-glass-section-hv); }
  .pxhome-step::before { content: counter(st); counter-increment: st; position: absolute; top: 14px; right: 18px; font-size: 3.4rem; font-weight: 800; line-height: 1; color: var(--pxd-tint-secondary-15); }
}

/* =====================================================================
   4. VOYAGE : la carte suit les jours (progression pilotée par le scroll)
   ===================================================================== */
.pxhome-trip { padding-block: var(--pxhome-section); background: linear-gradient(180deg, var(--pxd-bg-page), #fff 12%, #fff 88%, var(--pxd-bg-page)); }
.pxhome-trip-head { display: flex; flex-direction: column; gap: var(--pxd-space-4); margin-bottom: clamp(28px, 5vw, 64px); }
.pxhome-trip-head .pxhome-h2 { max-width: 14em; }
.pxhome-trip-head .pxhome-lead { color: #0a3d3a; }
.pxhome-stats { display: flex; flex-wrap: wrap; gap: var(--pxd-space-3); }
.pxhome-stats > span { padding: 10px 18px; border-radius: 99px; font-size: 1rem; font-weight: 800; color: #0a3d3a; background: var(--pxd-tint-secondary-8); border: 1px solid var(--pxd-tint-secondary-15); }
.pxhome-stats b { font-weight: 800; font-variant-numeric: tabular-nums; }
.pxhome-trip-scene { display: grid; gap: clamp(20px, 4vw, 56px); grid-template-columns: minmax(0, 1fr); }
.pxhome-trip-stage { position: sticky; top: calc(var(--hx-h) + 12px); z-index: 2; align-self: start; }
.pxhome-map { position: relative; overflow: hidden; padding: 0; height: min(46svh, 420px); box-shadow: var(--pxd-shadow-popup); border-radius: 28px; }
.pxhome-map .pxhome-map-canvas { position: absolute; inset: 0; border-radius: inherit; }
.pxhome-map-day { position: absolute; left: 14px; top: 14px; z-index: 5; padding: 9px 16px; border-radius: 99px; font-size: 0.9375rem; font-weight: 800; color: #fff; background: var(--pxd-gradient); box-shadow: var(--pxd-shadow); white-space: nowrap; transition: transform 0.4s var(--pxd-bounce); }
.pxhome-map-day.is-bump { transform: scale(1.08); }
.pxhome-map-legend { position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 5; display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 8px 14px; border-radius: 16px; font-size: 0.875rem; font-weight: 700; color: var(--pxd-fg-title); background: rgba(255, 255, 255, 0.88); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); width: fit-content; max-width: calc(100% - 28px); }
.pxhome-map-legend span { display: inline-flex; align-items: center; gap: 6px; }
.pxhome-map-legend i { width: 10px; height: 10px; border-radius: 50%; }

.pxhome-pixihead { filter: drop-shadow(0 6px 10px rgba(1, 40, 39, 0.4)); }

.pxhome-footer-stub { padding: 40px 0; background: var(--pxd-primary-dark); border-top: 1px solid rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.8); font-size: 0.875rem; font-weight: 600; text-align: center; }

/* --- CTA collant mobile --- */
.pxhome-sticky-cta { position: fixed; left: 50%; bottom: 14px; z-index: 150; transform: translate(-50%, 160%); transition: transform 0.5s var(--ease-out); }
.pxhome-sticky-cta.is-on { transform: translate(-50%, 0); }
@media (min-width: 900px) { .pxhome-sticky-cta { display: none; } }

/* --- Pas d'animation : état final lisible --- */
.pxhome-still .pxhome-hero { min-height: 0; }
.pxhome-still .pxhome-problem, .pxhome-still .pxhome-how { height: auto; padding-block: var(--pxhome-section); }
.pxhome-still .pxhome-pin { position: static; height: auto; }
.pxhome-still .pxhome-clash { --q: 0; height: auto; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.pxhome-still .pxhome-clash-b { position: static; transform: none; }
.pxhome-still .pxhome-clash-t, .pxhome-still .pxhome-clash-ti { width: auto; max-width: none; opacity: 1; }
.pxhome-still .pxhome-clash-plan, .pxhome-still .pxhome-clash-pixi { display: none; }
.pxhome-still .pxhome-step-visual, .pxhome-still .pxhome-step-pixi { opacity: 1; transform: none; }
.pxhome-still .pxhome-sub .pxhome-sub-b { position: static; opacity: 1; transform: none; }
.pxhome-still .pxhome-sub .pxhome-sub-a { display: none; }
@media (min-width: 1000px) {
  .pxhome-still .pxhome-steps { display: flex; flex-direction: column; }
  .pxhome-still .pxhome-step { display: flex; }
  .pxhome-still .pxhome-step-visual { grid-row: auto; }
}

@media (max-width: 999px) {
  .pxhome-clash-b { --x0: var(--mx0) !important; --y0: var(--my0) !important; }
  .pxhome-clash { height: clamp(320px, 54vh, 440px); }
  .pxhome-clash-t { --w: 150 !important; }
  .pxhome-clash-in { padding-right: 14px; }
}


@media (max-width: 999px) {
  .pxhome-how .pxhome-pin { position: static; height: auto; overflow: visible; }
  .pxhome-step::before { width: auto; height: auto; inset: auto; background: none; opacity: 1; z-index: 0; border-radius: 0; top: 10px; right: 18px; pointer-events: none; }
  .pxhome-step-pixi { margin-top: -30px; }
}
.pxhome-sticky-cta { white-space: nowrap; }

@media (max-width: 999px) {
  .pxhome-hero-inner { display: flex; flex-direction: column; align-items: stretch; gap: var(--pxd-space-5); padding-top: 8px; }
  .pxhome-hero-stage { display: contents; }
  .pxhome-hero-pixi-wrap { order: -1; position: relative; right: auto; bottom: auto; width: min(72vw, 320px); align-self: flex-end; margin-right: -3%; margin-bottom: -34px; }
  .pxhome-hero-copy { order: 0; }
  .pxhome-trip-chip { order: 2; position: relative; left: auto; right: auto; bottom: auto; width: 100%; }
  .pxhome-float--a { left: 0; top: 34px; }
  .pxhome-float--c { left: 10px; top: 112px; }
  .pxhome-float--b { display: none; }
  .pxhome-hero-copy .pxhome-kicker { margin-top: 0; }
}


/* ---- 4. VOYAGE : étapes en verre, carte, budget (v5) ---- */
.pxhome-trip { position: relative; isolation: isolate; }
.pxhome-trip::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(46% 22% at 88% 18%, rgba(30, 155, 82, 0.20), transparent 70%),
    radial-gradient(40% 20% at 78% 50%, rgba(25, 118, 210, 0.13), transparent 70%),
    radial-gradient(38% 20% at 92% 80%, rgba(255, 152, 0, 0.15), transparent 70%),
    radial-gradient(40% 18% at 6% 36%, rgba(15, 163, 107, 0.12), transparent 70%); }
.pxhome-trip-head .pxhome-lead { max-width: 34em; }
.pxhome-stats > span:last-child { background: var(--pxd-badge-gold-bg); border: 1px solid var(--pxd-badge-gold-border); color: #6b5400; }

.pxhome-trip-scene { gap: clamp(18px, 3vw, 28px); }
.pxhome-trip-stage { top: calc(var(--hx-h) + 8px); }
.pxhome-map { height: min(40svh, 360px); border-radius: 26px; border: 1px solid rgba(255, 255, 255, 0.9); }
.pxhome-map-day { left: 12px; top: 12px; max-width: calc(100% - 24px); overflow: hidden; text-overflow: ellipsis; }
.pxhome-map-legend { left: 12px; right: 12px; bottom: 12px; padding: 7px 12px; }
.pxhome-map-canvas .pxcv svg, .pxhome-map-canvas svg { display: block; }
.pxcv--trip .pxcv-pin { transform-box: fill-box; transform-origin: 50% 50%; filter: none; }
.pxcv--trip .pxcv-dot { transform-origin: 50% 50%; }

.pxhome-days { gap: clamp(18px, 3vw, 28px); }

/* carte d'étape : verre, photo, frise */
.pxhome-leg { list-style: none; position: relative; display: flex; flex-direction: column; overflow: hidden; padding: 0; border-radius: 28px;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.58));
  -webkit-backdrop-filter: blur(22px) saturate(1.5); backdrop-filter: blur(22px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, 0.92);
  box-shadow: 0 26px 54px -22px rgba(7, 43, 40, 0.34), 0 2px 10px rgba(7, 43, 40, 0.06), inset 0 1px 0 #fff;
  transition: transform 0.6s var(--ease-out), box-shadow 0.6s var(--ease-out); }
.pxhome-leg::before { display: none; }
.pxhome-leg.is-active { transform: translateX(6px); box-shadow: 0 34px 64px -22px rgba(23, 132, 64, 0.5), 0 0 0 2px var(--pxd-tint-secondary-30), inset 0 1px 0 #fff; }
.pxhome-leg-photo { position: relative; aspect-ratio: 16 / 8.6; overflow: hidden; background: var(--pxd-gray-100); }
.pxhome-leg-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.04); transition: transform 1.4s var(--ease-out); }
.pxhome-leg.is-active .pxhome-leg-photo img { transform: scale(1.12); }
.pxhome-leg-photo::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(4, 28, 26, 0.84) 0%, rgba(4, 28, 26, 0.34) 46%, transparent 74%); }
.pxhome-leg-num { position: absolute; z-index: 2; top: 12px; left: 12px; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; font-size: 1.1rem; font-weight: 900; color: #fff; background: var(--pxd-gradient-icon); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.95), 0 8px 16px rgba(7, 43, 40, 0.3); }
.pxhome-leg.is-active .pxhome-leg-num { animation: pxhome-pulse 2.6s ease-in-out infinite; }
@keyframes pxhome-pulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.95), 0 8px 16px rgba(7, 43, 40, 0.3), 0 0 0 3px rgba(61, 190, 115, 0); } 50% { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.95), 0 8px 16px rgba(7, 43, 40, 0.3), 0 0 0 11px rgba(61, 190, 115, 0.3); } }
.pxhome-leg-cc { position: absolute; z-index: 2; top: 14px; right: 14px; padding: 6px 12px; border-radius: 99px; font-size: 0.875rem; font-weight: 800; letter-spacing: 0.08em; color: #072b28; background: rgba(255, 255, 255, 0.82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.pxhome-leg-cap { position: absolute; z-index: 2; left: 16px; right: 16px; bottom: 14px; color: #fff; }
.pxhome-leg-cap h3 { font-size: clamp(1.55rem, 2.2vw, 2rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; color: #fff; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35); }
.pxhome-leg-cap p { margin-top: 4px; font-size: 0.9375rem; font-weight: 600; line-height: 1.3; color: rgba(255, 255, 255, 0.96); text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4); }
.pxhome-leg-body { display: flex; flex-direction: column; gap: 14px; padding: 16px clamp(14px, 2vw, 20px) clamp(14px, 2vw, 20px); }
.pxhome-leg-when { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; font-size: 0.9375rem; font-weight: 600; color: #3f5a58; }
.pxhome-leg-when .pxhome-ic { color: var(--pxd-secondary); font-size: 18px; }
.pxhome-leg-when b { font-weight: 800; color: var(--pxd-fg-title); }
.pxhome-tl { display: flex; flex-direction: column; position: relative; }
.pxhome-tl-i { position: relative; display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 9px 0; font-size: 1rem; font-weight: 800; line-height: 1.25; color: var(--pxd-fg-title); }
.pxhome-tl-i + .pxhome-tl-i { border-top: 1px dashed rgba(10, 61, 58, 0.14); }
.pxhome-tl-i .pxhome-icon { width: 38px; height: 38px; font-size: 17px; border-radius: 12px; box-shadow: 0 8px 14px -6px rgba(7, 43, 40, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.35); }
.pxhome-tl-i small { display: block; margin-top: 2px; font-size: 0.875rem; font-weight: 600; color: #3f5a58; }
.pxhome-tl-p { font-size: 1rem; font-weight: 800; white-space: nowrap; padding: 5px 11px; border-radius: 99px; background: rgba(10, 61, 58, 0.07); color: var(--pxd-fg-title); font-variant-numeric: tabular-nums; }
.pxhome-leg-next { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 18px; font-size: 1rem; font-weight: 800; line-height: 1.25; color: var(--pxd-fg-title);
  background: linear-gradient(135deg, rgba(25, 118, 210, 0.12), rgba(25, 118, 210, 0.04)); border: 1px solid rgba(25, 118, 210, 0.26); }
.pxhome-leg-next .pxhome-icon { width: 38px; height: 38px; font-size: 17px; border-radius: 12px; }
.pxhome-leg-next em { display: block; font-style: normal; font-size: 0.875rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #0d47a1; }
.pxhome-leg-next small { display: block; margin-top: 2px; font-size: 0.875rem; font-weight: 600; color: #3f5a58; }
.pxhome-leg-next b { font-weight: 800; white-space: nowrap; color: #0d47a1; font-variant-numeric: tabular-nums; }
.pxhome-leg-next--end { grid-template-columns: 38px minmax(0, 1fr); background: linear-gradient(135deg, rgba(30, 155, 82, 0.14), rgba(30, 155, 82, 0.04)); border-color: var(--pxd-tint-secondary-30); }
.pxhome-leg-next--end > .pxhome-ic { width: 38px; height: 38px; padding: 9px; border-radius: 12px; color: #fff; background: var(--pxd-gradient-icon); }
.pxhome-leg-next--end em { color: #0a5a2c; }

/* carte d'introduction */
.pxhome-leg--intro { padding: clamp(18px, 2.4vw, 28px); gap: 12px; background: linear-gradient(150deg, rgba(10, 61, 58, 0.94), rgba(23, 132, 64, 0.88)); border-color: rgba(255, 255, 255, 0.28); color: #fff; }
.pxhome-leg--intro::before { display: block; content: ""; position: absolute; inset: auto -40px -60px auto; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(circle, rgba(126, 226, 171, 0.35), transparent 70%); pointer-events: none; }
.pxhome-leg-kicker { display: inline-flex; align-items: center; align-self: flex-start; gap: 8px; padding: 6px 13px; border-radius: 99px; font-size: 0.875rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #bff3d6; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.24); }
.pxhome-leg--intro h3 { font-size: clamp(1.5rem, 2.4vw, 2.1rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; color: #fff; text-wrap: balance; }
.pxhome-leg-sub { font-size: 1rem; font-weight: 600; line-height: 1.45; color: rgba(255, 255, 255, 0.92); }
.pxhome-leg-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 4px; }
.pxhome-leg-facts li { display: flex; flex-direction: column; gap: 2px; padding: 12px 10px; border-radius: 16px; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.2); }
.pxhome-leg-facts b { font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.pxhome-leg-facts span { font-size: 0.875rem; font-weight: 700; color: rgba(255, 255, 255, 0.92); }
.pxhome-leg--intro.is-active { transform: none; }

/* bloc budget */
.pxhome-budget { margin-top: clamp(40px, 7vw, 96px); padding: clamp(20px, 3vw, 36px); border-radius: 32px; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(16px, 2.4vw, 28px); align-items: center; overflow: visible;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.66)); box-shadow: 0 30px 70px -26px rgba(7, 43, 40, 0.4), inset 0 1px 0 #fff; }
.pxhome-budget-pixi { width: clamp(130px, 26vw, 220px); margin: calc(-1 * clamp(60px, 12vw, 104px)) 0 -6px; justify-self: center; }
.pxhome-budget-main { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pxhome-budget-kicker { font-size: 0.875rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #0a3d3a; }
.pxhome-budget-num { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.pxhome-budget-num span { font-size: clamp(1.6rem, 4vw, 2.6rem); font-weight: 800; color: var(--pxd-secondary-hover); }
.pxhome-budget-num strong { font-size: clamp(3rem, 9vw, 5.6rem); font-weight: 800; letter-spacing: -0.05em; line-height: 0.95; background: var(--pxd-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
.pxhome-budget-num small { font-size: 1.0625rem; font-weight: 700; color: #3f5a58; }
.pxhome-budget-sub { font-size: 1rem; font-weight: 600; line-height: 1.5; color: #3f5a58; }
.pxhome-budget-sub b { font-weight: 800; color: var(--pxd-fg-title); }
.pxhome-split { display: flex; gap: 4px; height: 16px; margin-top: 6px; border-radius: 99px; overflow: hidden; background: var(--pxd-gray-100); padding: 2px; }
.pxhome-split span { display: block; width: var(--w); height: 100%; border-radius: 99px; background: var(--c); transform-origin: left; }
.pxhome-js .pxhome-split span { transform: scaleX(0); transition: transform 1.1s var(--ease-out); }
.pxhome-js .is-in .pxhome-split span { transform: scaleX(1); }
.pxhome-js .is-in .pxhome-split span:nth-child(2) { transition-delay: 0.12s; }
.pxhome-js .is-in .pxhome-split span:nth-child(3) { transition-delay: 0.24s; }
.pxhome-js .is-in .pxhome-split span:nth-child(4) { transition-delay: 0.36s; }
.pxhome-split-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 0.9375rem; font-weight: 700; color: #3f5a58; }
.pxhome-split-legend li { display: inline-flex; align-items: center; gap: 7px; }
.pxhome-split-legend i { width: 11px; height: 11px; border-radius: 50%; }
.pxhome-split-legend b { font-weight: 800; color: var(--pxd-fg-title); }
.pxhome-budget-side { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.pxhome-budget-side .pxhome-fine { max-width: 24em; }
.pxhome-budget .pxhome-btn { justify-self: auto; }
.pxhome-pixihead { filter: drop-shadow(0 6px 10px rgba(1, 40, 39, 0.4)); }

@media (min-width: 600px) {
  .pxhome-map { height: min(44svh, 420px); }
  .pxhome-leg-photo { aspect-ratio: 16 / 7.4; }
}
@media (min-width: 760px) and (max-width: 999px) {
  .pxhome-budget { grid-template-columns: auto minmax(0, 1fr); }
  .pxhome-budget-pixi { grid-row: span 2; margin: -90px 0 0; justify-self: start; }
  .pxhome-budget-side { grid-column: 2; }
}
@media (min-width: 1000px) {
  .pxhome-trip-scene { grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); }
  .pxhome-trip-stage { top: calc(var(--hx-h) + 24px); }
  .pxhome-map { height: min(700px, calc(100svh - var(--hx-h) - 48px)); border-radius: 32px; }
  .pxhome-days { padding-block: 12vh 8vh; gap: 20vh; }
  .pxhome-leg-photo { aspect-ratio: 16 / 8.2; }
  .pxhome-budget { grid-template-columns: auto minmax(0, 1.25fr) minmax(0, 0.75fr); gap: clamp(24px, 4vw, 56px); }
  .pxhome-budget-pixi { margin: -104px 0 -18px; justify-self: start; width: clamp(160px, 15vw, 230px); }
}
@media (min-width: 1440px) {
  .pxhome-trip-scene { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
  .pxhome-leg-body { padding: 18px 22px 22px; }
}

@media (max-width: 599px) {
  .pxhome-leg { border-radius: 24px; }
  .pxhome-tl-i, .pxhome-leg-next { grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; }
  .pxhome-tl-p { padding: 4px 9px; }
  .pxhome-leg.is-active { transform: none; }
  .pxhome-leg-facts { gap: 8px; }
  .pxhome-leg-facts li { padding: 10px 8px; }
}
.pxhome-still .pxhome-split span { transform: none !important; }

/* ---- 5. CONFIANCE : bento (v5) ---- */
.pxhome-trust { position: relative; padding-block: var(--pxhome-section); background: linear-gradient(180deg, var(--pxd-bg-page), #eef7f2 55%, var(--pxd-bg-page)); overflow: clip; isolation: isolate; }
.pxhome-trust::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(34% 30% at 12% 20%, rgba(30, 155, 82, 0.16), transparent 70%), radial-gradient(30% 28% at 90% 70%, rgba(25, 118, 210, 0.12), transparent 70%), radial-gradient(26% 22% at 60% 100%, rgba(255, 152, 0, 0.12), transparent 70%); }
.pxhome-trust-head { max-width: 30em; margin-bottom: clamp(28px, 4.4vw, 60px); display: flex; flex-direction: column; gap: var(--pxd-space-4); }
.pxhome-trust-title { font-size: clamp(2.5rem, 8.4vw, 5.6rem); line-height: 0.98; letter-spacing: -0.045em; text-wrap: balance; }
.pxhome-trust-title .pxhome-accent { display: inline-block; }
.pxhome-trust-head .pxhome-lead { color: #0a3d3a; }
.pxhome-bento { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(14px, 1.8vw, 22px); }
.pxhome-bc { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 30px; overflow: hidden; list-style: none;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.6)); -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.95); box-shadow: 0 26px 56px -26px rgba(7, 43, 40, 0.38), inset 0 1px 0 #fff; transition: transform 0.6s var(--ease-out), box-shadow 0.6s var(--ease-out); }
.pxhome-bc:hover { transform: translateY(-5px); box-shadow: 0 36px 66px -24px rgba(23, 132, 64, 0.42), inset 0 1px 0 #fff; }
.pxhome-bc-viz { position: relative; height: clamp(190px, 26vw, 240px); border-radius: 22px; overflow: hidden; background: linear-gradient(160deg, #fff, #eef6f2); border: 1px solid var(--pxd-gray-100); }
.pxhome-bc-txt { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 14px 10px 10px; }
.pxhome-bc-ic { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 4px; border-radius: 14px; color: #fff; background: var(--pxd-gradient-icon); box-shadow: var(--pxd-shadow-icon); font-size: 20px; }
.pxhome-bc-txt h3 { font-size: clamp(1.5rem, 2.2vw, 2rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; color: var(--pxd-fg-title); }
.pxhome-bc-txt p { font-size: 1.0625rem; font-weight: 600; line-height: 1.45; color: #3f5a58; max-width: 30em; }
/* carte : lieux */
.pxhome-vmap svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.pxhome-vroute { stroke-dasharray: 1; stroke-dashoffset: 1; }
.pxhome-js .is-in .pxhome-vroute { animation: pxhome-vdraw 2.4s 0.3s var(--pxd-ease) forwards; }
.pxhome-still .pxhome-vroute { stroke-dashoffset: 0; animation: none; }
@keyframes pxhome-vdraw { to { stroke-dashoffset: 0; } }
.pxhome-vpin { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; gap: 4px; }
.pxhome-vpin i { display: block; width: 16px; height: 16px; border-radius: 50%; background: var(--c); border: 3px solid #fff; box-shadow: 0 4px 8px rgba(7, 43, 40, 0.35); order: 2; }
.pxhome-vpin em { order: 1; font-style: normal; font-size: 0.875rem; font-weight: 800; white-space: nowrap; padding: 5px 11px; border-radius: 99px; color: var(--pxd-fg-title); background: #fff; box-shadow: 0 6px 14px -4px rgba(7, 43, 40, 0.3); }
.pxhome-js .pxhome-vpin { opacity: 0; transform: translate(-50%, -80%) scale(0.7); }
.pxhome-js .is-in .pxhome-vpin { opacity: 1; transform: translate(-50%, -100%); transition: opacity 0.5s var(--d), transform 0.7s var(--pxd-bounce) var(--d); }
/* prix datés */
.pxhome-vprice { display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 16px; }
.pxhome-vrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n p" "t t"; align-items: center; gap: 6px 10px; padding: 11px 14px; border-radius: 16px; background: #fff; border: 1px solid var(--pxd-gray-100); box-shadow: var(--pxd-shadow-sm); }
.pxhome-vrow span { grid-area: n; font-size: 0.9375rem; font-weight: 800; color: var(--pxd-fg-title); }
.pxhome-vrow b { grid-area: p; font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; color: var(--pxd-fg-title); }
.pxhome-tag { grid-area: t; justify-self: start; display: inline-flex; align-items: center; gap: 5px; font-style: normal; font-size: 0.875rem; font-weight: 800; padding: 4px 11px; border-radius: 99px; color: #6b5400; background: var(--pxd-badge-gold-bg); border: 1px solid var(--pxd-badge-gold-border); }
.pxhome-tag--ok { color: #0a5a2c; background: var(--pxd-tint-secondary-15); border-color: var(--pxd-tint-secondary-30); }
.pxhome-tag .pxhome-ic { font-size: 14px; }
.pxhome-vrow--ok { border-color: var(--pxd-tint-secondary-30); }
.pxhome-stamp { position: absolute; right: 26px; bottom: 16px; padding: 6px 14px; border: 2px solid var(--pxd-secondary); border-radius: 12px; font-size: 0.875rem; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; color: #0a5a2c; background: rgba(255, 255, 255, 0.85); transform: rotate(-7deg); }
.pxhome-js .pxhome-stamp { opacity: 0; transform: rotate(-20deg) scale(1.8); }
.pxhome-js .is-in .pxhome-stamp { opacity: 1; transform: rotate(-7deg); transition: opacity 0.4s 0.9s, transform 0.6s var(--pxd-bounce) 0.9s; }
/* tu décides */
.pxhome-vchoose { display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 16px; }
.pxhome-vt { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 16px; background: #fff; border: 1px solid var(--pxd-gray-100); box-shadow: var(--pxd-shadow-sm); font-size: 0.9375rem; font-weight: 800; color: var(--pxd-fg-title); }
.pxhome-vt em { font-style: normal; font-size: 0.9375rem; font-weight: 800; padding: 4px 10px; border-radius: 99px; color: #0a5a2c; background: var(--pxd-tint-secondary-15); font-variant-numeric: tabular-nums; }
.pxhome-vt em.is-up { color: #6b5400; background: var(--pxd-badge-gold-bg); }
.pxhome-vt--sum { grid-template-columns: minmax(0, 1fr) auto; background: var(--pxd-gradient); border: 0; color: #fff; }
.pxhome-vt--sum b { font-weight: 800; color: #bff3d6; }
.pxhome-switch { position: relative; width: 46px; height: 26px; border-radius: 99px; background: var(--pxd-secondary); display: block; }
.pxhome-switch::after { content: ""; position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25); }
@media all {
  .pxhome-switch { animation: pxhome-swbg 5.2s ease-in-out var(--sd, 0s) infinite; }
  .pxhome-switch::after { animation: pxhome-swknob 5.2s ease-in-out var(--sd, 0s) infinite; }
}
@keyframes pxhome-swbg { 0%, 38% { background: var(--pxd-secondary); } 46%, 88% { background: var(--pxd-gray-300); } 96%, 100% { background: var(--pxd-secondary); } }
@keyframes pxhome-swknob { 0%, 38% { transform: translateX(0); } 46%, 88% { transform: translateX(-20px); } 96%, 100% { transform: translateX(0); } }
/* limites */
.pxhome-vlimits { display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 18px; background: linear-gradient(160deg, #fffaf0, #fff4de); border-color: var(--pxd-badge-gold-border); }
.pxhome-vflag { display: inline-flex; align-items: center; align-self: flex-start; gap: 8px; padding: 6px 13px; border-radius: 99px; font-size: 0.9375rem; font-weight: 800; color: #6b5400; background: rgba(236, 171, 0, 0.18); border: 1px solid rgba(236, 171, 0, 0.35); }
.pxhome-vflag .pxhome-ic { font-size: 18px; }
.pxhome-vlimits ul { display: flex; flex-direction: column; gap: 8px; }
.pxhome-vlimits li { position: relative; padding: 9px 14px 9px 34px; border-radius: 14px; font-size: 0.9375rem; font-weight: 700; line-height: 1.3; color: var(--pxd-fg-title); background: rgba(255, 255, 255, 0.85); border: 1px solid rgba(236, 171, 0, 0.22); }
.pxhome-vlimits li::before { content: ""; position: absolute; left: 13px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: #e8a900; box-shadow: 0 0 0 4px rgba(236, 171, 0, 0.2); }
@media (min-width: 700px) {
  .pxhome-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .pxhome-bento { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .pxhome-bc--map, .pxhome-bc--limits { grid-column: span 7; }
  .pxhome-bc--price, .pxhome-bc--choose { grid-column: span 5; }
  .pxhome-bc-viz { height: clamp(220px, 21vw, 290px); }
}

/* ---- 6. GALERIE : affiches de voyage (v6) ---- */
.pxhome-gallery { position: relative; padding-block: var(--pxhome-section); background: linear-gradient(180deg, var(--pxd-bg-page), #e6f3ec); overflow: clip; }
.pxhome-gallery-head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--pxd-space-4); margin-bottom: clamp(24px, 4vw, 52px); }
.pxhome-gallery-head .pxhome-lead { color: #0a3d3a; max-width: 28em; }
.pxhome-gcards { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px var(--pxhome-gutter) 26px; margin: 0 calc(-1 * var(--pxhome-gutter)); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.pxhome-gcards::-webkit-scrollbar { display: none; }
.pxhome-gcard { flex: 0 0 82%; max-width: 380px; scroll-snap-align: center; list-style: none; }
.pxhome-gcard-link { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: 30px; overflow: hidden; text-decoration: none; color: #fff; isolation: isolate; background: var(--pxd-gray-200);
  box-shadow: 0 30px 56px -26px rgba(7, 43, 40, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.5);
  transition: transform 0.6s var(--ease-out), box-shadow 0.6s var(--ease-out); }
.pxhome-gcard-link:hover { transform: translateY(-8px); box-shadow: 0 44px 70px -26px rgba(23, 132, 64, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.6); color: #fff; }
.pxhome-gcard-link:focus-visible { outline: 3px solid var(--pxd-secondary); outline-offset: 4px; }
.pxhome-gcard-img { position: absolute; inset: -3% 0; width: 100%; height: 106%; object-fit: cover; z-index: -2; transition: scale 1.4s var(--ease-out); scale: 1.02; }
.pxhome-gcard-link:hover .pxhome-gcard-img { scale: 1.12; }
.pxhome-gcard-link::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(4, 28, 26, 0.72) 0%, rgba(4, 28, 26, 0.1) 46%, rgba(4, 28, 26, 0.18) 100%); }
.pxhome-gcard-top { position: absolute; z-index: 2; left: 14px; right: 14px; top: 14px; display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.pxhome-gcard-days, .pxhome-gcard-tag { padding: 7px 14px; border-radius: 99px; font-size: 0.875rem; font-weight: 800; -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4); }
.pxhome-gcard-days { color: #072b28; background: rgba(255, 255, 255, 0.88); }
.pxhome-gcard-tag { color: #fff; background: rgba(10, 61, 58, 0.55); border: 1px solid rgba(255, 255, 255, 0.35); }
.pxhome-gcard-panel { position: absolute; z-index: 2; left: 10px; right: 10px; bottom: 10px; display: flex; flex-direction: column; gap: 4px; padding: 16px 16px 14px; border-radius: 22px;
  background: linear-gradient(165deg, rgba(10, 45, 43, 0.62), rgba(10, 45, 43, 0.38)); border: 1px solid rgba(255, 255, 255, 0.28); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5); transition: transform 0.55s var(--ease-out); }
.pxhome-gcard-link:hover .pxhome-gcard-panel { transform: translateY(-4px); }
.pxhome-gcard-sub { font-size: 0.9375rem; font-weight: 600; line-height: 1.3; color: rgba(255, 255, 255, 0.94); }
.pxhome-gcard-title { font-size: clamp(1.8rem, 2.4vw, 2.3rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.02; color: #fff; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35); order: -1; }
.pxhome-gcard-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 12px; margin-top: 8px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.22); }
.pxhome-gcard-price { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.pxhome-gcard-price b { font-size: 1.45rem; font-weight: 800; letter-spacing: -0.02em; color: #fff; font-variant-numeric: tabular-nums; }
.pxhome-gcard-price small { font-size: 0.875rem; font-weight: 700; color: rgba(255, 255, 255, 0.88); }
.pxhome-gcard-cta { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 99px; font-size: 0.9375rem; font-weight: 800; color: #0a3d3a; background: #fff; box-shadow: 0 12px 22px -10px rgba(0, 0, 0, 0.5); transition: background 0.4s, color 0.4s, gap 0.4s var(--pxd-bounce); white-space: nowrap; }
.pxhome-gcard-cta .pxhome-ic { transition: transform 0.4s var(--pxd-bounce); }
.pxhome-gcard-link:hover .pxhome-gcard-cta { background: var(--pxd-gradient); color: #fff; gap: 12px; }
.pxhome-gcard-link:hover .pxhome-gcard-cta .pxhome-ic { transform: translateX(3px); }
/* tuile finale : mosaïque de couvertures */
.pxhome-gcard--more .pxhome-gcard-link { display: flex; flex-direction: column; justify-content: space-between; padding: 22px; background: var(--pxd-gradient); box-shadow: 0 30px 56px -26px rgba(10, 61, 58, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.25); }
.pxhome-gcard--more .pxhome-gcard-link::before { inset: auto; right: -70px; top: -70px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(126, 226, 171, 0.5), transparent 70%); z-index: 0; }
.pxhome-gmore-mosaic { position: relative; z-index: 1; display: flex; justify-content: center; padding-top: 10px; }
.pxhome-gmore-mosaic img { width: 38%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 18px; border: 3px solid #fff; box-shadow: 0 18px 30px -12px rgba(0, 0, 0, 0.5); transition: transform 0.7s var(--ease-out); }
.pxhome-gmore-mosaic img:nth-child(1) { transform: rotate(-9deg) translateX(14%); }
.pxhome-gmore-mosaic img:nth-child(2) { transform: translateY(-10%); z-index: 2; }
.pxhome-gmore-mosaic img:nth-child(3) { transform: rotate(9deg) translateX(-14%); }
.pxhome-gcard--more .pxhome-gcard-link:hover .pxhome-gmore-mosaic img:nth-child(1) { transform: rotate(-14deg) translateX(8%) translateY(-6px); }
.pxhome-gcard--more .pxhome-gcard-link:hover .pxhome-gmore-mosaic img:nth-child(2) { transform: translateY(-18%) scale(1.04); }
.pxhome-gcard--more .pxhome-gcard-link:hover .pxhome-gmore-mosaic img:nth-child(3) { transform: rotate(14deg) translateX(-8%) translateY(-6px); }
.pxhome-gmore-body { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.pxhome-gmore-body strong { font-size: clamp(1.7rem, 2.4vw, 2.2rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; color: #fff; text-wrap: balance; }
.pxhome-gmore-go { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 20px; border-radius: 99px; font-size: 1rem; font-weight: 800; color: #0a3d3a; background: #fff; box-shadow: 0 14px 26px -10px rgba(0, 0, 0, 0.45); transition: gap 0.4s var(--pxd-bounce); }
.pxhome-gcard--more .pxhome-gcard-link:hover .pxhome-gmore-go { gap: 16px; }
@media (min-width: 600px) {
  .pxhome-gcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; overflow: visible; padding: 6px 0 0; margin: 0; }
  .pxhome-gcard { flex: none; max-width: none; }
}
@media (min-width: 960px) {
  .pxhome-gallery-head { flex-direction: row; align-items: flex-end; justify-content: space-between; }
  .pxhome-gcards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2vw, 28px); }
  .pxhome-gcard:nth-child(3n + 2) { margin-top: 44px; }
}

/* ---- 7. FINAL : Pixi t'attend (v5) ---- */
.pxhome-final { position: relative; overflow: clip; padding: calc(var(--pxhome-section) * 1.05) 0; color: var(--pxd-fg); background: linear-gradient(180deg, #e6f3ec 0%, #f2faf6 38%, #e3f3ea 100%); isolation: isolate; }
.pxhome-final-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.pxhome-final-bg span { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.7; }
.pxhome-final-bg span:nth-child(1) { width: 52vmax; height: 52vmax; left: -16vmax; top: -18vmax; background: rgba(61, 190, 115, 0.34); }
.pxhome-final-bg span:nth-child(2) { width: 40vmax; height: 40vmax; right: -12vmax; top: 12%; background: rgba(25, 118, 210, 0.2); }
.pxhome-final-bg span:nth-child(3) { width: 34vmax; height: 34vmax; left: 30%; bottom: -16vmax; background: rgba(255, 152, 0, 0.2); }
@media all {
  .pxhome-final-bg span:nth-child(1) { animation: pxhome-drift 18s ease-in-out infinite alternate; }
  .pxhome-final-bg span:nth-child(2) { animation: pxhome-drift 22s ease-in-out infinite alternate-reverse; }
  .pxhome-final-bg span:nth-child(3) { animation: pxhome-drift 26s ease-in-out infinite alternate; }
}
@keyframes pxhome-drift { to { transform: translate3d(5vmax, 4vmax, 0) scale(1.1); } }
.pxhome-final-inner { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(30px, 5vw, 72px); align-items: center; }
.pxhome-final-inner > * { min-width: 0; }
.pxhome-final-copy { display: flex; flex-direction: column; gap: clamp(14px, 1.8vw, 22px); align-items: flex-start; }
.pxhome-statement { font-size: clamp(2.6rem, 11vw, 5.8rem); font-weight: 800; line-height: 0.96; letter-spacing: -0.05em; color: var(--pxd-fg-title); text-wrap: balance; }
.pxhome-statement .pxhome-w2 { background: linear-gradient(120deg, #0a3d3a, #1e9b52 70%); -webkit-background-clip: text; background-clip: text; color: transparent; white-space: nowrap; }
.pxhome-final-line { font-size: var(--pxhome-fs-lead); font-weight: 600; line-height: 1.5; color: #0a3d3a; max-width: 26em; }
.pxhome-who { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.pxhome-who-b { display: inline-flex; align-items: center; gap: 9px; min-height: 48px; padding: 0 20px 0 16px; border-radius: 99px; font: 800 1rem var(--font-sans); color: var(--pxd-fg-title); cursor: pointer;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.7)); border: 1px solid rgba(255, 255, 255, 0.95); box-shadow: 0 10px 22px -12px rgba(7, 43, 40, 0.4), inset 0 1px 0 #fff;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); transition: transform 0.35s var(--pxd-bounce), box-shadow 0.35s, background 0.35s, color 0.35s; }
.pxhome-who-b .pxhome-ic { font-size: 20px; color: var(--pxd-secondary-hover); transition: color 0.35s; }
.pxhome-who-b:hover { transform: translateY(-3px); box-shadow: 0 16px 28px -12px rgba(23, 132, 64, 0.5), inset 0 1px 0 #fff; }
.pxhome-who-b.is-on { color: #fff; background: var(--pxd-gradient); border-color: transparent; box-shadow: 0 16px 30px -12px rgba(10, 61, 58, 0.7); }
.pxhome-who-b.is-on .pxhome-ic { color: #bff3d6; }
.pxhome-flow { display: flex; flex-wrap: wrap; gap: 8px 18px; counter-reset: fl; }
.pxhome-flow li { display: inline-flex; align-items: center; gap: 9px; font-size: 1rem; font-weight: 700; color: #0a3d3a; }
.pxhome-flow b { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-size: 0.875rem; font-weight: 800; color: #fff; background: var(--pxd-gradient); }
.pxhome-flow li + li::before { content: ""; width: 22px; height: 2px; margin-right: 0; border-radius: 2px; background: var(--pxd-tint-secondary-30); }
.pxhome-final .pxhome-cta-row { display: flex; flex-wrap: wrap; gap: 12px; }
.pxhome-final .pxhome-fine { color: #3f5a58; font-size: 0.9375rem; }
.pxhome-final-stage { position: relative; padding-top: clamp(100px, 17vw, 150px); }
.pxhome-final-pixi { position: absolute; z-index: 5; right: -2%; top: 0; width: clamp(120px, 17vw, 200px); pointer-events: none; }
.pxhome-final-pixi .pxhome-pixi { animation: pxhome-float 5.5s ease-in-out infinite; }
.pxhome-chat { position: relative; z-index: 3; display: flex; flex-direction: column; border-radius: 30px; overflow: hidden; padding: 0; min-height: 0;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.7)); border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 40px 80px -30px rgba(7, 43, 40, 0.5), inset 0 1px 0 #fff; }
.pxhome-chat-bar { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid rgba(10, 61, 58, 0.08); background: rgba(255, 255, 255, 0.6); }
.pxhome-chat-bar img { width: 42px; height: 42px; border-radius: 50%; background: var(--pxd-gray-100); }
.pxhome-chat-bar b { display: block; font-size: 1.0625rem; font-weight: 800; color: var(--pxd-fg-title); line-height: 1.1; }
.pxhome-chat-bar small { display: flex; align-items: center; gap: 6px; font-size: 0.875rem; font-weight: 600; color: #3f5a58; }
.pxhome-chat-bar small::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--pxd-secondary); box-shadow: 0 0 0 3px var(--pxd-tint-secondary-15); }
.pxhome-chat-ex { margin-left: auto; font-size: 0.875rem; font-weight: 800; padding: 5px 12px; border-radius: 99px; background: var(--pxd-badge-gold-bg); color: #6b5400; border: 1px solid var(--pxd-badge-gold-border); }
.pxhome-chat-body { display: flex; flex-direction: column; padding: 16px; min-height: clamp(430px, 62vw, 470px); background: radial-gradient(120% 80% at 100% 0, rgba(30, 155, 82, 0.1), transparent 60%); }
.pxhome-set { display: none; flex-direction: column; gap: 12px; }
.pxhome-set.is-on { display: flex; }
.pxhome-chat .pxhome-bubble { max-width: 90%; font-size: 1rem; }
.pxhome-set.is-on > * { animation: pxhome-pop 0.55s var(--pxd-bounce) both; }
.pxhome-set.is-on > .pxhome-typing { animation: pxhome-typing 1.1s 0.5s both; }
.pxhome-set.is-on > .pxhome-bubble--pixi { animation-delay: 1.6s; }
.pxhome-set.is-on > .pxhome-chat-trip { animation-delay: 2.2s; }
@keyframes pxhome-pop { from { opacity: 0; transform: translateY(14px) scale(0.95); } to { opacity: 1; transform: none; } }
@keyframes pxhome-typing { 0% { opacity: 0; transform: translateY(8px); max-height: 60px; margin-bottom: 0; } 12%, 88% { opacity: 1; transform: none; max-height: 60px; } 100% { opacity: 0; max-height: 0; margin: -12px 0 0; padding-block: 0; } }
.pxhome-typing { align-self: flex-start; display: flex; gap: 5px; padding: 14px 18px; border-radius: 20px; border-top-left-radius: 6px; background: #fff; border: 1px solid var(--pxd-gray-100); overflow: hidden; }
.pxhome-typing i { width: 8px; height: 8px; border-radius: 50%; background: var(--pxd-secondary); animation: pxhome-dotb 1s ease-in-out infinite; }
.pxhome-typing i:nth-child(2) { animation-delay: 0.15s; }
.pxhome-typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes pxhome-dotb { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-6px); opacity: 1; } }
.pxhome-chat-trip { align-self: stretch; display: flex; flex-direction: column; border-radius: 22px; overflow: hidden; text-decoration: none; color: inherit; background: #fff; border: 1px solid var(--pxd-gray-100); box-shadow: 0 18px 34px -18px rgba(7, 43, 40, 0.4); transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out); }
.pxhome-chat-trip:hover { transform: translateY(-4px); box-shadow: 0 26px 44px -18px rgba(23, 132, 64, 0.5); color: inherit; }
.pxhome-chat-trip-ph { position: relative; display: block; aspect-ratio: 16 / 7.2; overflow: hidden; background: var(--pxd-gray-100); }
.pxhome-chat-trip-ph img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1s var(--ease-out); }
.pxhome-chat-trip:hover .pxhome-chat-trip-ph img { transform: scale(1.06); }
.pxhome-chat-trip-days { position: absolute; left: 10px; top: 10px; padding: 6px 12px; border-radius: 99px; font-size: 0.875rem; font-weight: 800; color: #072b28; background: rgba(255, 255, 255, 0.88); }
.pxhome-chat-trip-body { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; }
.pxhome-chat-trip-body b { display: block; font-size: 1.2rem; font-weight: 800; color: var(--pxd-fg-title); line-height: 1.1; letter-spacing: -0.02em; }
.pxhome-chat-trip-body small { display: block; margin-top: 3px; font-size: 0.9375rem; font-weight: 700; color: #0a3d3a; }
.pxhome-chat-trip-go { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 50%; color: #fff; background: var(--pxd-gradient); transition: transform 0.4s var(--pxd-bounce); }
.pxhome-chat-trip:hover .pxhome-chat-trip-go { transform: translateX(4px) rotate(-8deg); }
.pxhome-chat-note { padding: 0 18px 14px; font-size: 0.875rem; font-weight: 600; color: #3f5a58; }
.pxhome-still .pxhome-set.is-on > * { animation: none; opacity: 1; transform: none; }
.pxhome-still .pxhome-set .pxhome-typing { display: none; }
@media (min-width: 1000px) {
  .pxhome-final-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr); }
  .pxhome-statement { font-size: min(5.6vw, 5.8rem); }
  .pxhome-chat-body { min-height: 480px; }
}
@media (max-width: 599px) {
  .pxhome-who { gap: 8px; }
  .pxhome-who-b { padding: 0 16px 0 13px; min-height: 46px; font-size: 0.9375rem; }
  .pxhome-flow { gap: 8px 12px; }
  .pxhome-flow li + li::before { width: 12px; }
  .pxhome-final .pxhome-cta-row .pxhome-btn { width: 100%; justify-content: center; }
}

/* ---- v5 : retouches mobiles ---- */
@media (max-width: 599px) {
  .pxhome-map { height: auto; aspect-ratio: 700 / 640; max-height: 46svh; border-radius: 22px; }
  .pxhome-map-legend { display: none; }
  .pxhome-map-day { font-size: 0.875rem; padding: 6px 12px; }
  .pxhome-flow li + li::before { display: none; }
  .pxhome-bc--price .pxhome-bc-viz { height: 300px; }
  .pxhome-vprice { padding-bottom: 56px; }
  .pxhome-stamp { right: 16px; bottom: 12px; }
}
@media (min-width: 600px) and (max-width: 999px) {
  .pxhome-map { height: auto; aspect-ratio: 700 / 640; width: min(100%, 560px); margin-inline: auto; max-height: 52svh; }
}
@media (max-width: 999px) {
  .pxhome-map-day { top: auto; bottom: 10px; left: 10px; }
  .pxhome-map-legend { display: none; }
}
.pxhome-scrollhint { min-height: 44px; }

/* =====================================================================
   v5 : mouvements pilotés par le scroll (--sp = progression 0 à 1, posée par app.js)
   Sans JS ou en mouvement réduit : tout reste visible dans son état final.
   ===================================================================== */
.pxhome-js:not(.pxhome-still) {
  --sc: 1;
}
.pxhome-js:not(.pxhome-still) .pxhome-bc,
.pxhome-js:not(.pxhome-still) .pxhome-gcard,
.pxhome-js:not(.pxhome-still) .pxhome-budget { --e: var(--in, 1); opacity: var(--e); will-change: transform, opacity; }

/* Confiance : entrée en perspective, puis chaque visuel se joue avec le scroll */
.pxhome-js:not(.pxhome-still) .pxhome-bc {
  transform: perspective(1100px) translateY(calc((1 - var(--e)) * 90px + (0.5 - var(--sp, 0.5)) * var(--par, 26px))) rotateX(calc((1 - var(--e)) * 14deg)) scale(calc(0.92 + 0.08 * var(--e)));
  transform-origin: 50% 100%; transition: box-shadow 0.5s var(--ease-out);
}
.pxhome-js:not(.pxhome-still) .pxhome-bc:hover { transform: perspective(1100px) translateY(calc((1 - var(--e)) * 90px + (0.5 - var(--sp, 0.5)) * var(--par, 26px) - 4px)) scale(calc(0.92 + 0.08 * var(--e))); }
.pxhome-bc--price { --par: -18px; }
.pxhome-bc--limits { --par: 18px; }
.pxhome-js:not(.pxhome-still) .pxhome-bc { --a: var(--fit, 1); }
/* carte : le tracé se dessine et les lieux se posent un à un */
.pxhome-js:not(.pxhome-still) .pxhome-vroute { stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--a)); animation: none; }
.pxhome-js:not(.pxhome-still) .pxhome-vpin { --k: clamp(0, calc(var(--a) * 1.8 - var(--n, 0) * 0.35), 1); opacity: var(--k); transform: translate(-50%, calc(-100% - (1 - var(--k)) * 22px)) scale(calc(0.6 + 0.4 * var(--k))); transition: none; }
.pxhome-vpin:nth-of-type(1) { --n: 0; } .pxhome-vpin:nth-of-type(2) { --n: 1; } .pxhome-vpin:nth-of-type(3) { --n: 2; } .pxhome-vpin:nth-of-type(4) { --n: 3; }
.pxhome-js:not(.pxhome-still) .pxhome-vmap svg { scale: calc(1.18 - 0.14 * var(--a)); transform-origin: 20% 70%; }
/* prix : les lignes glissent, le tampon s'abat en fin de course */
.pxhome-js:not(.pxhome-still) .pxhome-vrow { --k: clamp(0, calc(var(--a) * 2 - var(--n, 0) * 0.5), 1); opacity: var(--k); transform: translateX(calc((1 - var(--k)) * 60px)); }
.pxhome-vrow:nth-child(1) { --n: 0; } .pxhome-vrow:nth-child(2) { --n: 1; }
.pxhome-js:not(.pxhome-still) .pxhome-stamp { --k: clamp(0, calc((var(--a) - 0.7) / 0.3), 1); opacity: var(--k); transform: rotate(calc(-7deg - (1 - var(--k)) * 14deg)) scale(calc(1 + (1 - var(--k)) * 0.9)); transition: none; }
/* tu décides : les interrupteurs basculent avec le scroll, la somme suit */
.pxhome-js:not(.pxhome-still) .pxhome-vt { --k: clamp(0, calc(var(--a) * 2.4 - var(--n, 0) * 0.5), 1); opacity: var(--k); transform: translateY(calc((1 - var(--k)) * 26px)); }
.pxhome-vt:nth-child(1) { --n: 0; } .pxhome-vt:nth-child(2) { --n: 1; } .pxhome-vt:nth-child(3) { --n: 2; }
.pxhome-js:not(.pxhome-still) .pxhome-switch { --t: clamp(0, calc((var(--a) - 0.55 - var(--sd2, 0) ) / 0.2), 1); animation: none; background: color-mix(in srgb, var(--pxd-secondary) calc((1 - var(--t)) * 100%), var(--pxd-gray-300)); }
.pxhome-js:not(.pxhome-still) .pxhome-switch::after { animation: none; transform: translateX(calc(var(--t) * -20px)); }
.pxhome-vt:nth-child(2) .pxhome-switch { --sd2: 0.12; }
.pxhome-js:not(.pxhome-still) .pxhome-vt--sum { scale: calc(0.94 + 0.06 * var(--k)); }
/* limites : les alertes tombent l'une après l'autre */
.pxhome-js:not(.pxhome-still) .pxhome-vflag { --k: clamp(0, calc(var(--a) * 3), 1); opacity: var(--k); transform: translateX(calc((1 - var(--k)) * -30px)); }
.pxhome-js:not(.pxhome-still) .pxhome-vlimits li { --k: clamp(0, calc(var(--a) * 2.2 - var(--n, 0) * 0.45 - 0.2), 1); opacity: var(--k); transform: translateY(calc((1 - var(--k)) * -28px)) rotate(calc((1 - var(--k)) * -2deg)); }
.pxhome-vlimits li:nth-child(1) { --n: 0; } .pxhome-vlimits li:nth-child(2) { --n: 1; } .pxhome-vlimits li:nth-child(3) { --n: 2; }
.pxhome-js:not(.pxhome-still) .pxhome-bc-txt { --k: clamp(0, calc(var(--in, 1) * 1.3), 1); opacity: var(--k); transform: translateY(calc((1 - var(--k)) * 24px)); }

/* Galerie : cartes qui montent à des vitesses différentes, photos en parallaxe */
.pxhome-js:not(.pxhome-still) .pxhome-gcard {
  transform: translateY(calc((1 - var(--e)) * 80px + (0.5 - var(--sp, 0.5)) * var(--par, 40px))) rotate(calc((1 - var(--e)) * var(--rot, 2deg)));
}
.pxhome-gcard:nth-child(3n + 1) { --par: 36px; --rot: -2deg; }
.pxhome-gcard:nth-child(3n + 2) { --par: 10px; --rot: 1.5deg; }
.pxhome-gcard:nth-child(3n) { --par: 56px; --rot: 2deg; }
@media (max-width: 599px) { .pxhome-gcard:nth-child(n) { --par: 24px; } }
@media (max-width: 959px) { .pxhome-gcard:nth-child(n) { --par: 36px; } }
.pxhome-js:not(.pxhome-still) .pxhome-gcard-img { translate: 0 calc((0.5 - var(--sp, 0.5)) * 36px); }

/* Budget : la barre se remplit et la mascotte flotte avec le scroll */
.pxhome-js:not(.pxhome-still) .pxhome-budget { transform: translateY(calc((1 - var(--e)) * 70px)) scale(calc(0.94 + 0.06 * var(--e))); }
.pxhome-js:not(.pxhome-still) .pxhome-split span { --k: clamp(0, calc(var(--fit, 1) * 1.2 - var(--n, 0) * 0.08), 1); transform: scaleX(var(--k)); transition: none; }
.pxhome-split span:nth-child(2) { --n: 1; } .pxhome-split span:nth-child(3) { --n: 2; } .pxhome-split span:nth-child(4) { --n: 3; }
.pxhome-js:not(.pxhome-still) .pxhome-budget-pixi { translate: 0 calc((0.5 - var(--sp, 0.5)) * 90px); rotate: calc((var(--sp, 0.5) - 0.5) * -16deg); }
.pxhome-js:not(.pxhome-still) .pxhome-budget-num strong { scale: calc(0.9 + 0.1 * var(--e)); transform-origin: left bottom; }

/* Étapes du voyage : photo en parallaxe, pastille qui tourne */
.pxhome-js:not(.pxhome-still) .pxhome-leg-photo img { transform: none; scale: 1.22; translate: 0 calc((0.5 - var(--sp, 0.5)) * 44px); transition: scale 1.4s var(--ease-out); }
.pxhome-js:not(.pxhome-still) .pxhome-leg.is-active .pxhome-leg-photo img { transform: none; scale: 1.3; }
.pxhome-js:not(.pxhome-still) .pxhome-leg-cap { translate: 0 calc((0.5 - var(--sp, 0.5)) * -18px); }

/* Final : fond, texte, Pixi et conversation suivent le scroll */
.pxhome-js:not(.pxhome-still) .pxhome-final-bg span:nth-child(1) { animation: none; translate: calc(var(--sp, 0) * 14vmax) calc(var(--sp, 0) * 22vmax); }
.pxhome-js:not(.pxhome-still) .pxhome-final-bg span:nth-child(2) { animation: none; translate: calc(var(--sp, 0) * -16vmax) calc(var(--sp, 0) * 18vmax); }
.pxhome-js:not(.pxhome-still) .pxhome-final-bg span:nth-child(3) { animation: none; translate: calc(var(--sp, 0) * 22vmax) calc(var(--sp, 0) * -14vmax); }
.pxhome-js:not(.pxhome-still) .pxhome-final-copy > * { --k: clamp(0, calc(var(--in, 1) * 1.6 - var(--n, 0) * 0.1), 1); opacity: var(--k); transform: translateY(calc((1 - var(--k)) * 40px)); }
.pxhome-final-copy > :nth-child(1) { --n: 0; } .pxhome-final-copy > :nth-child(2) { --n: 1; } .pxhome-final-copy > :nth-child(3) { --n: 2; } .pxhome-final-copy > :nth-child(4) { --n: 3; } .pxhome-final-copy > :nth-child(5) { --n: 4; } .pxhome-final-copy > :nth-child(6) { --n: 5; } .pxhome-final-copy > :nth-child(7) { --n: 6; }
.pxhome-js:not(.pxhome-still) .pxhome-final-stage { --k: var(--in, 1); opacity: var(--k); transform: perspective(1200px) translateY(calc((1 - var(--k)) * 90px)) rotateY(calc((1 - var(--k)) * -10deg)); }
.pxhome-js:not(.pxhome-still) .pxhome-final-pixi { translate: 0 calc((0.5 - var(--sp, 0.5)) * 70px); rotate: calc((var(--sp, 0.5) - 0.5) * 18deg); }
.pxhome-js:not(.pxhome-still) .pxhome-statement .pxhome-w2 { background-size: 200% 100%; background-position: calc(100% - var(--k, 1) * 100%) 0; }

/* =====================================================================
   v5 : étapes du voyage par format
   < 700 px : bandeau compact collant (mini-carte + étape en cours), les cartes défilent dessous
   700 px et plus : carte collante à côté des cartes
   ===================================================================== */
.pxhome-hud-info { position: absolute; left: 14px; top: 14px; z-index: 6; display: block; }
.pxhome-trip-stage { position: sticky; }
.pxhome-hud-info .pxhome-map-day { position: static; display: inline-flex; gap: 0; align-items: baseline; max-width: none; }
.pxhome-map-day .v::before { content: " \00b7  "; white-space: pre; }
.pxhome-map-day .v:empty::before { content: none; }
.pxhome-hud-dots { display: none; }
@media (min-width: 700px) and (max-width: 999px) {
  .pxhome-trip-scene { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: 20px; }
  .pxhome-map { width: 100%; max-height: none; margin: 0; height: auto; aspect-ratio: 700 / 640; }
  .pxhome-days { padding-block: 6vh 6vh; gap: 12vh; }
  .pxhome-leg-photo { aspect-ratio: 16 / 9; }
  .pxhome-leg-cap h3 { font-size: 1.5rem; }
}
@media (max-width: 699px) {
  .pxhome-trip-stage { display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 1fr); gap: 14px; align-items: center; padding: 10px; border-radius: 26px; top: calc(var(--hx-h) + 8px);
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.78)); -webkit-backdrop-filter: blur(22px) saturate(1.5); backdrop-filter: blur(22px) saturate(1.5);
    border: 1px solid rgba(255, 255, 255, 0.95); box-shadow: 0 22px 44px -18px rgba(7, 43, 40, 0.5), inset 0 1px 0 #fff; }
  .pxhome-trip-stage .pxhome-map { grid-column: 1; grid-row: 1; height: auto; max-height: none; width: 100%; aspect-ratio: 700 / 640; margin: 0; border-radius: 18px; box-shadow: inset 0 0 0 1px rgba(10, 61, 58, 0.08); }
  .pxhome-hud-info { position: static; grid-column: 2; grid-row: 1; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
  .pxhome-hud-info .pxhome-map-day { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 0; background: none; box-shadow: none; color: var(--pxd-fg-title); white-space: normal; border-radius: 0; font-size: inherit; }
  .pxhome-map-day .v::before { content: none; }
  .pxhome-map-day .k { font-size: 0.875rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--pxd-secondary-hover); }
  .pxhome-map-day .v { font-size: clamp(1.45rem, 6.6vw, 1.9rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; overflow-wrap: anywhere; }
  .pxhome-hud-dots { display: flex; gap: 7px; align-items: center; }
  .pxhome-hud-dots li { width: 12px; height: 12px; border-radius: 50%; background: var(--pxd-gray-200); transition: transform 0.4s var(--pxd-bounce), background 0.4s; }
  .pxhome-hud-dots li.is-done { background: var(--pxd-secondary); }
  .pxhome-hud-dots li.is-on { background: var(--pxd-secondary-hover); transform: scale(1.5); box-shadow: 0 0 0 4px var(--pxd-tint-secondary-30); }
  .pxhome-map-legend { display: none; }
  .pxcv--trip text, .pxcv--trip .pxcv-stop rect, .pxcv--trip .pxcv-dot { display: none; }
  .pxcv--trip .pxcv-seg[data-route] { stroke-width: 22px; }
  .pxcv--trip .pxcv-seg:not([data-route]) { stroke-width: 38px; }
  .pxcv--trip .pxcv-stop circle:nth-child(2) { stroke-width: 7px; }
  .pxcv--trip .pxhome-pixihead { transform-box: fill-box; transform-origin: center; scale: 2.2; }
  .pxhome-days { padding-top: 18px; }
}

/* =====================================================================
   v5 : hero, Pixi n'est jamais masqué
   Pixi a sa propre colonne. Rien n'est posé par-dessus : pastilles à côté, carte du voyage dessous.
   ===================================================================== */
.pxhome .pxhome-hero-stage { display: flex; flex-direction: column; gap: 14px; height: auto; margin: 0; min-width: 0; align-self: stretch; justify-content: flex-end; }
.pxhome .pxhome-hero-zone { position: relative; flex: none; height: clamp(250px, 40svh, 470px); display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: minmax(0, 1fr); align-items: stretch; gap: 8px; }
.pxhome .pxhome-hero-pills { container-type: inline-size; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 14px; padding-top: 6%; min-width: 0; }
.pxhome .pxhome-hero-pills .pxhome-float { position: static; margin: 0; max-width: 100%; white-space: normal; line-height: 1.2; }
.pxhome .pxhome-hero-pills .pxhome-float--c { margin-left: 4%; }
@container (max-width: 135px) { .pxhome .pxhome-hero-pills .pxhome-float { display: none; } }
.pxhome .pxhome-hero-pixi-wrap { position: relative; top: auto; bottom: auto; right: auto; left: auto; width: auto; height: 100%; aspect-ratio: 720 / 537; max-width: 100%; margin: 0; justify-self: end; }
.pxhome .pxhome-hero-pixi-wrap .pxhome-pixi { height: 100%; }
.pxhome .pxhome-hero-pixi-wrap .pxhome-pixi > img { height: 100%; width: 100%; object-fit: contain; object-position: right bottom; }
.pxhome .pxhome-trip-chip { position: relative; left: auto; right: auto; bottom: auto; width: min(100%, 380px); align-self: flex-end; }
@media (min-width: 1000px) {
  .pxhome .pxhome-hero-inner { align-items: stretch; }
  .pxhome .pxhome-hero-copy { align-self: center; }
  .pxhome .pxhome-hero-stage { min-height: min(66svh, 640px); }
}
@media (max-width: 999px) {
  .pxhome .pxhome-hero-stage { display: contents; }
  .pxhome .pxhome-hero-zone { order: -1; height: auto; grid-template-rows: none; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; gap: 10px; padding-top: 4px; }
  .pxhome .pxhome-hero-pills { padding-top: 0; justify-content: center; gap: 10px; }
  .pxhome .pxhome-hero-pills .pxhome-float--c { margin-left: 0; }
  .pxhome .pxhome-hero-pixi-wrap { width: 100%; height: auto; aspect-ratio: auto; max-width: none; }
  .pxhome .pxhome-hero-pixi-wrap .pxhome-pixi { height: auto; }
  .pxhome .pxhome-hero-pixi-wrap .pxhome-pixi > img { height: auto; max-height: clamp(190px, 32svh, 340px); object-position: right center; }
  .pxhome .pxhome-trip-chip { order: 2; width: 100%; align-self: stretch; }
}
@media (max-width: 599px) {
  .pxhome .pxhome-hero-zone { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .pxhome .pxhome-hero-pixi-wrap { grid-row: 1; justify-self: center; width: min(100%, 360px); margin-right: 0; }
  .pxhome .pxhome-hero-pixi-wrap .pxhome-pixi > img { object-position: center bottom; max-height: clamp(170px, 28svh, 300px); }
  .pxhome .pxhome-hero-pills { grid-row: 2; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 8px; container-type: normal; }
  .pxhome .pxhome-hero-pills .pxhome-float { font-size: 0.875rem; padding: 6px 12px 6px 6px; }
  .pxhome .pxhome-hero-pills .pxhome-float .pxhome-icon { width: 28px; height: 28px; font-size: 14px; }
}
@media (max-width: 999px) and (max-height: 520px) {
  .pxhome .pxhome-hero-pixi-wrap .pxhome-pixi > img { max-height: 150px; }
}
@media (max-width: 599px) {
  .pxhome-vmap .pxhome-vpin:nth-of-type(1) { --x: 27%; }
  .pxhome-vmap .pxhome-vpin:nth-of-type(4) { --x: 78%; }
  .pxhome-vmap .pxhome-vpin:nth-of-type(3) { --x: 66%; }
}
@media (min-width: 600px) and (max-width: 999px) { .pxhome .pxhome-trip-chip { width: min(100%, 520px); align-self: flex-start; } }
@media (max-width: 999px) {
  .pxhome-step-visual { min-height: 180px; }
  .pxhome-step-visual--route { min-height: 170px; }
}

/* v6 : titre de la confiance sur toute la largeur */
.pxhome-trust-head { max-width: none; }
.pxhome-trust-title { max-width: none; font-size: clamp(2.3rem, 8.6vw, 6.4rem); line-height: 0.98; }
.pxhome-trust-head .pxhome-lead { max-width: 46em; font-size: clamp(1.1rem, 1.6vw, 1.35rem); }

/* =====================================================================
   v6 : hero sur petits écrans
   Texte d'abord, Pixi ensuite. Sur téléphone, pas de carte en fond : un fond clair en verre et couleurs.
   ===================================================================== */
@media (max-width: 999px) {
  .pxhome .pxhome-hero-zone { order: 1; margin-top: 6px; }
}
@media (max-width: 599px) {
  .pxhome .pxhome-hero-map, .pxhome .pxhome-hero-veil { display: none; }
  .pxhome .pxhome-hero { background: linear-gradient(180deg, #e8f4ee 0%, #f5faf7 52%, #e3f1ea 100%); }
  .pxhome .pxhome-hero::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: radial-gradient(70% 26% at 92% 6%, rgba(61, 190, 115, 0.34), transparent 70%), radial-gradient(56% 24% at 2% 48%, rgba(25, 118, 210, 0.14), transparent 70%), radial-gradient(70% 26% at 85% 96%, rgba(255, 152, 0, 0.2), transparent 70%); }
  .pxhome .pxhome-hero-zone { position: relative; margin-top: 10px; padding-top: 8px; }
  .pxhome .pxhome-hero-zone::before { content: ""; position: absolute; left: 50%; top: 0; width: min(120%, 460px); aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; z-index: -1; pointer-events: none;
    background: radial-gradient(circle, rgba(61, 190, 115, 0.36) 0%, rgba(61, 190, 115, 0.12) 45%, transparent 70%); }
  .pxhome .pxhome-hero-pixi-wrap { width: min(92%, 380px); }
  .pxhome .pxhome-hero-pixi-wrap .pxhome-pixi > img { max-height: clamp(210px, 34svh, 340px); }
}

/* =====================================================================
   v7 : carte du voyage verticale sur tablette, repères du hero proportionnels, cartes galerie plus vitrées
   ===================================================================== */
.pxcv-v { position: absolute; inset: 0; display: none; }
@media (min-width: 700px) and (max-width: 999px) {
  .pxhome-map-canvas .pxcv-d, .pxhome-map-canvas .pxcv-m { display: none; }
  .pxhome-map-canvas .pxcv-v { display: block; }
  .pxhome-trip-scene { grid-template-columns: minmax(0, 0.74fr) minmax(0, 1fr); gap: 16px; }
  .pxhome-trip-stage { z-index: 4; }
  .pxhome-map { height: clamp(380px, calc(100svh - var(--hx-h) - 36px), 720px); aspect-ratio: auto; border-radius: 28px; box-shadow: 0 30px 60px -24px rgba(7, 43, 40, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.7); }
  .pxcv--trip .pxcv-stop circle:nth-child(2) { stroke-width: 3.4px; }
}
/* paysage étroit : on garde la carte large du bureau, jamais la version portrait agrandie */
@media (max-width: 999px) and (min-aspect-ratio: 1/1) and (min-width: 600px) {
  .pxhome-hero-map .pxcv-d { display: block; }
  .pxhome-hero-map .pxcv-m { display: none; }
}
/* galerie : panneau réduit, plus clair, plus vitré */
.pxhome-gcard-panel { left: 12px; right: 12px; bottom: 12px; gap: 2px; padding: 11px 14px 11px; border-radius: 20px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.1) 60%, rgba(10, 61, 58, 0.16));
  border: 1px solid rgba(255, 255, 255, 0.5); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 14px 30px -14px rgba(0, 0, 0, 0.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.7) brightness(1.04); backdrop-filter: blur(14px) saturate(1.7) brightness(1.04); }
.pxhome-gcard-link::before { background: linear-gradient(to top, rgba(4, 28, 26, 0.55) 0%, rgba(4, 28, 26, 0.12) 34%, rgba(4, 28, 26, 0.04) 60%, rgba(4, 28, 26, 0.14) 100%); }
.pxhome-gcard-title { font-size: clamp(1.45rem, 1.9vw, 1.8rem); text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5); }
.pxhome-gcard-sub { font-size: 0.875rem; line-height: 1.25; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5); }
.pxhome-gcard-foot { margin-top: 6px; padding-top: 8px; gap: 6px 10px; border-top-color: rgba(255, 255, 255, 0.34); }
.pxhome-gcard-price b { font-size: 1.2rem; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45); }
.pxhome-gcard-price small { text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5); }
.pxhome-gcard-cta { min-height: 44px; padding: 0 14px; font-size: 0.875rem; background: rgba(255, 255, 255, 0.9); }
.pxhome-gcard-top { left: 12px; right: 12px; top: 12px; }
.pxhome-gcard-days, .pxhome-gcard-tag { padding: 5px 12px; }
.pxhome-gcard-tag { background: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.5); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45); }

/* =====================================================================
   v8 : hero sans pastilles, carte tablette qui se fond sous les cartes, note de confiance
   ===================================================================== */
.pxhome .pxhome-hero-zone { grid-template-columns: minmax(0, 1fr); }
.pxhome .pxhome-hero-pixi-wrap { grid-column: 1; justify-self: end; }
@media (max-width: 999px) {
  .pxhome .pxhome-hero-pixi-wrap { justify-self: center; width: min(100%, 420px); }
  .pxhome .pxhome-hero-pixi-wrap .pxhome-pixi > img { object-position: center bottom; }
}
.pxhome-trust-note { display: flex; align-items: flex-start; gap: 12px; max-width: 46em; margin: 4px 0 0; padding: 14px 18px; border-radius: 20px; font-size: 1rem; font-weight: 600; line-height: 1.45; color: #0a3d3a;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.55)); border: 1px solid rgba(255, 255, 255, 0.95); box-shadow: 0 14px 30px -18px rgba(7, 43, 40, 0.4), inset 0 1px 0 #fff;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.pxhome-trust-note .pxhome-ic { flex: none; width: 22px; height: 22px; margin-top: 1px; color: var(--pxd-secondary-hover, #178440); }
@media (min-width: 700px) and (max-width: 999px) {
  .pxhome-trip-scene { grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr); }
  .pxhome-trip-stage { z-index: 1; top: var(--hx-h); height: calc(100svh - var(--hx-h)); }
  .pxhome-days { position: relative; z-index: 2; }
  .pxhome-map { height: 100%; width: calc(100% + 56px); margin-left: -34px; border-radius: 0; box-shadow: none; background: transparent;
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 50%, rgba(0, 0, 0, 0.55) 78%, transparent 100%), linear-gradient(to bottom, #000 0, #000 90%, transparent 100%); -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, #000 0, #000 50%, rgba(0, 0, 0, 0.55) 78%, transparent 100%), linear-gradient(to bottom, #000 0, #000 90%, transparent 100%); mask-composite: intersect; }
  .pxhome-hud-info { left: 44px; top: 18px; }
}

/* v9 : carte « il explique chaque choix » en tons verts, Pixi retiré du hero en tablette portrait */
.pxhome-vlimits { background: linear-gradient(160deg, #f4fbf6, #e6f5ea); border-color: var(--pxd-tint-secondary-30, rgba(30, 155, 82, 0.3)); }
.pxhome-vflag { color: #0a5a2c; background: rgba(30, 155, 82, 0.14); border-color: rgba(30, 155, 82, 0.35); }
.pxhome-vlimits li { border-color: rgba(30, 155, 82, 0.22); }
.pxhome-vlimits li::before { background: #1e9b52; box-shadow: 0 0 0 4px rgba(30, 155, 82, 0.2); }
@media (min-width: 600px) and (max-width: 999px) and (orientation: portrait) {
  .pxhome .pxhome-hero-zone { display: none; }
}

/* v10 : plus de caméléon dans le hero sous 1000 px (téléphones et tablettes, portrait et paysage) */
@media (max-width: 999px) { .pxhome .pxhome-hero-zone { display: none; } }

/* v10 : tuile « Plus de 300 voyages » : contenu toujours entier, jamais rogné */
.pxhome-gcard--more { display: flex; }
.pxhome-gcard--more .pxhome-gcard-link { flex: 1; min-width: 0; aspect-ratio: auto; min-height: 100%; }
@media (max-width: 599px) {
  .pxhome-gcard--more .pxhome-gcard-link { padding: 16px; gap: 10px; }
  .pxhome-gmore-mosaic { padding-top: 4px; }
  .pxhome-gmore-mosaic img { width: 31%; border-width: 2px; border-radius: 14px; }
  .pxhome-gmore-body { gap: 10px; }
  .pxhome-gmore-body strong { font-size: 1.45rem; }
  .pxhome-gmore-go { min-height: 44px; padding: 0 16px; font-size: 0.9375rem; }
}
@media (max-width: 599px) {
  .pxhome-gcard { display: flex; }
  .pxhome-gcard .pxhome-gcard-link { flex: 1; min-width: 0; }
  .pxhome-gmore-mosaic img { width: 28%; }
}

/* v11 : vignettes de la tuile Discover au format normal (carré), recadrées */
.pxhome-gmore-mosaic img { aspect-ratio: 1 / 1; width: 34%; }
@media (max-width: 599px) { .pxhome-gmore-mosaic img { width: 36%; } }
.pxhome-gmore-mosaic { align-items: center; }
.pxhome-gmore-mosaic img { height: auto; align-self: center; }
.pxhome-gmore-mosaic { flex: 1; min-height: 0; }
.pxhome-gcard--more .pxhome-gcard-link { justify-content: flex-start; }

/* =====================================================================
   v12 : relecture du 19/10/2026 (repères, profil compris, doutes de Pixi, pause du chat, Pixi sur mobile)
   ===================================================================== */
.pxhome-proofband { background: var(--pxd-bg-page); }
.pxhome-proof { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 14px; padding-block: clamp(16px, 2.6vw, 26px); }
.pxhome-proof li { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border-radius: var(--pxd-radius-full); font-size: 0.9375rem; font-weight: 700; color: var(--pxd-fg); }
.pxhome-proof .pxhome-ic { font-size: 20px; color: var(--pxd-secondary-hover); }
.pxhome-understood { font-size: 0.8125rem; font-weight: 700; color: var(--pxd-fg-tertiary); margin-top: 2px; }
.pxhome-vrow:nth-child(3) { --n: 2; }
.pxhome-vlimits li:nth-child(4) { --n: 3; }
.pxhome-vlimits li.is-warn { border-color: rgba(236, 171, 0, 0.4); }
.pxhome-vlimits li.is-warn::before { background: #e8a900; box-shadow: 0 0 0 4px rgba(236, 171, 0, 0.2); }
.pxhome-chat-pause { width: 40px; height: 40px; flex: none; margin-left: 4px; }
.pxhome-still .pxhome-chat-pause { display: none; }
.pxhome-trust-head { gap: var(--pxd-space-3); }
@media (max-width: 999px) { .pxhome-bc--map .pxhome-bc-viz { height: 300px; } }

/* =====================================================================
   v13 : retours du test sur appareils (20/10/2026)
   Rien ne se coupe : les blocs épinglés se mettent à l'échelle de la hauteur de l'écran (app.js, fitPins),
   la carte du voyage montre toujours le trajet entier, plus de grand vide avant le final.
   ===================================================================== */
.pxhome-pin > .pxhome-wrap { flex: none; }
@media (min-width: 1000px) {
  /* carte au format du dessin (800 x 780) : Lisbonne et Marrakech toujours dans le cadre */
  .pxhome-map { height: auto; aspect-ratio: 800 / 780; width: min(100%, calc((100svh - var(--hx-h) - 56px) * 1.0256)); margin-inline: auto; }
  .pxhome-hud-info { left: auto; right: 14px; }
  .pxhome-map-legend { left: auto; right: 14px; }
}
/* final : moins de hauteur perdue, la conversation et le texte tiennent mieux dans l'écran */
.pxhome-final-stage { padding-top: clamp(96px, min(17vw, 14svh), 150px); }
@media (min-width: 1000px) and (max-height: 860px) {
  .pxhome-chat-trip-ph { aspect-ratio: 16 / 5.4; }
  .pxhome-chat-body { min-height: 0; }
}
@media (min-width: 1000px) {
  /* la pastille d'étape et la légende se calent sur la carte elle-même, pas sur la colonne */
  .pxhome-trip-stage { width: min(100%, calc((100svh - var(--hx-h) - 56px) * 1.0256)); margin-inline: auto; }
  .pxhome-map { width: 100%; }
}
/* Pixi du final : sa taille suit la hauteur de l'écran et ne recouvre plus la barre de la conversation */
.pxhome-final-pixi { width: clamp(110px, min(17vw, 21svh), 200px); }
.pxhome-final-stage { padding-top: calc(clamp(110px, min(17vw, 21svh), 200px) * 0.74); }

/* légende de la carte : 2 colonnes, elle ne recouvre plus Marrakech sur les écrans bas */
.pxhome-map-legend { display: grid; grid-template-columns: auto auto; gap: 4px 16px; width: fit-content; }
@media (max-width: 999px) { .pxhome-map-legend { display: none; } }
/* petits écrans en paysage (téléphone couché) : la carte garde son format et reste collée, calée sur la hauteur de l'écran */
@media (min-width: 700px) and (max-width: 999px) and (orientation: landscape) {
  .pxhome-map-canvas .pxcv-v { display: none; }
  .pxhome-map-canvas .pxcv-m { display: block; }
  .pxhome-trip-stage { height: auto; top: calc(var(--hx-h) + 12px); }
  .pxhome-map { height: auto; aspect-ratio: 700 / 640; width: min(100%, calc((100svh - var(--hx-h) - 32px) * 1.094)); margin: 0 auto; border-radius: 22px;
    -webkit-mask-image: none; mask-image: none; box-shadow: var(--pxd-shadow-popup); }
  .pxhome-hud-info { left: 12px; top: 12px; }
}
@media (min-width: 700px) and (max-width: 999px) and (orientation: landscape) {
  .pxhome-hud-info { left: auto; right: 8px; top: 8px; }
  .pxhome-hud-info .pxhome-map-day { font-size: 0.75rem; padding: 6px 10px; }
}
/* mobile : les 4 avatars du plan se rangent côte à côte au lieu de s'empiler */
@media (max-width: 999px) {
  .pxhome-clash-b:nth-child(1) { --x1: 20 !important; }
  .pxhome-clash-b:nth-child(2) { --x1: 40 !important; }
  .pxhome-clash-b:nth-child(3) { --x1: 60 !important; }
  .pxhome-clash-b:nth-child(4) { --x1: 80 !important; }
}

/* =====================================================================
   v14 : hero sur téléphone (moins de 600 px)
   Pixi n'est plus une image dans le flux : il passe en fond, à droite, en miroir (queue à droite),
   en partie hors de l'écran et en transparence pour laisser la place au texte et garder le contraste.
   ===================================================================== */
@media (max-width: 599px) {
  .pxhome .pxhome-hero-zone { display: block; position: absolute; inset: 0; z-index: 0; height: auto; margin: 0; padding: 0; pointer-events: none; }
  .pxhome .pxhome-hero-zone::before { display: none; }
  .pxhome .pxhome-hero-pixi-wrap { position: absolute; top: 24%; right: -34%; bottom: auto; left: auto; width: min(88vw, 520px); height: auto; margin: 0; max-width: none; aspect-ratio: auto;
    transform: scaleX(-1); transition: none; opacity: 0.32; }
  .pxhome .pxhome-hero-pixi-wrap .pxhome-pixi { height: auto; }
  .pxhome .pxhome-hero-pixi-wrap .pxhome-pixi > img { height: auto; max-height: none; width: 100%; object-position: center; filter: none; }
  .pxhome .pxhome-hero-copy, .pxhome .pxhome-trip-chip { position: relative; z-index: 2; }
}
/* footer du site collé au dernier bloc (le footer d'origine ajoute 64 px de marge haute) */
.pxhome .pxd-footer { margin-top: 0; }

/* =====================================================================
   v15 : fluidité à basse vitesse (voir le moteur de défilement de app.js)
   ===================================================================== */
/* flous de verre suspendus pendant le défilement sur les grands blocs : rien de texturé derrière, le rendu est identique,
   et le verre complet revient dès l'arrêt */
.pxhome.is-scrolling :is(.pxhome-bc, .pxhome-budget, .pxhome-chat, .pxhome-trust-note, .pxhome-pain, .pxhome-step, .pxhome-clash-plan, .pxd-footer__top, .pxd-footer__bottom) {
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
@media (min-width: 1000px) {
  .pxhome.is-scrolling .pxhome-leg { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}
/* le hero ne dessine ni n'anime plus rien quand il est hors de l'écran */
.pxhome.hero-off .pxhome-hero-map, .pxhome.hero-off .pxhome-hero-veil { visibility: hidden; }
.pxhome.hero-off .pxhome-hero * { animation-play-state: paused !important; }
/* les marques et traits de la carte de fond sont rasterisés une fois, puis seulement déplacés */
.pxhome-hero-map .pxhome-layer { contain: layout paint; }
/* les cartes du scroll se composent sur leur propre calque sans repeindre leurs voisines */
.pxhome-trip-stage { contain: layout; }
.pxhome-map { contain: layout paint; }

/* fond des cartes : calque propre, rasterisé une seule fois (les traits animés sont dans un second calque) */
.pxcv--base { transform: translateZ(0); }

/* v15 (suite) : coûts mesurés par test de suppression */
/* 1. final : les 3 taches de couleur étaient des disques flous (filter: blur 60px) repeints à chaque image.
      Un dégradé radial donne le même rendu doux, sur un calque propre qui ne fait que se déplacer. */
.pxhome-final-bg span { filter: none; will-change: transform; opacity: 1; }
.pxhome-final-bg span:nth-child(1) { background: radial-gradient(closest-side, rgba(61, 190, 115, 0.30) 0%, rgba(61, 190, 115, 0.22) 38%, rgba(61, 190, 115, 0.08) 72%, rgba(61, 190, 115, 0) 100%); width: 70vmax; height: 70vmax; left: -26vmax; top: -28vmax; }
.pxhome-final-bg span:nth-child(2) { background: radial-gradient(closest-side, rgba(25, 118, 210, 0.19) 0%, rgba(25, 118, 210, 0.14) 38%, rgba(25, 118, 210, 0.05) 72%, rgba(25, 118, 210, 0) 100%); width: 56vmax; height: 56vmax; right: -20vmax; top: 4%; }
.pxhome-final-bg span:nth-child(3) { background: radial-gradient(closest-side, rgba(255, 152, 0, 0.19) 0%, rgba(255, 152, 0, 0.14) 38%, rgba(255, 152, 0, 0.05) 72%, rgba(255, 152, 0, 0) 100%); width: 50vmax; height: 50vmax; left: 22%; bottom: -24vmax; }
/* 2. éléments dont la position est pilotée par le défilement : un calque chacun, pas de repeinture du voisinage */
.pxhome-leg-photo img, .pxhome-gcard-img, .pxhome-budget-pixi, .pxhome-final-pixi, .pxhome-leg-cap { will-change: transform; }
.pxhome-final-copy > *, .pxhome-final-stage { will-change: transform, opacity; }
/* 3. pendant le défilement : traits animés du hero en pause, flous de verre des cartes de la galerie remplacés par une teinte */
.pxhome.is-scrolling .pxhome-hero-map * { animation-play-state: paused !important; }
.pxhome.is-scrolling .pxhome-gcard-panel { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: linear-gradient(160deg, rgba(10, 45, 43, 0.46), rgba(10, 45, 43, 0.3)) !important; }
.pxhome.is-scrolling :is(.pxhome-gcard-days, .pxhome-gcard-tag, .pxhome-leg-cc) { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }