/**
 * variables.css - Pixidia Design System Tokens
 * Source: maquette-wizard-transport.html
 */

/* ============================================
   SELF-HOSTED URBANIST FONT (Phase F)
   Files: assets/fonts/urbanist/urbanist-latin.woff2
          assets/fonts/urbanist/urbanist-latin-ext.woff2
   Source: Google Fonts v18 (variable font — weights 400-800)
   NOTE: These @font-face declarations use a relative path.
   In production, the CSS is loaded from dist/itinerary.css,
   and the path ../fonts/urbanist/ resolves correctly relative
   to assets/css/dist/itinerary.css.
   ============================================ */

/* latin-ext */
@font-face {
    font-family: 'Urbanist';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('../../fonts/urbanist/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;
}

/* latin */
@font-face {
    font-family: 'Urbanist';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('../../fonts/urbanist/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;
}

:root {
    /* === Brand Colors === */
    --pixidia-blue: #012827;
    --pixidia-blue-light: #023d3b;
    --pixidia-blue-alpha: rgba(1, 40, 39, 0.08);
    --pixidia-green: #208D3E;
    --pixidia-green-light: #2ba84a;
    --pixidia-green-alpha: rgba(32, 141, 62, 0.1);
    --pixidia-turquoise: #20c9b8;
    --pixidia-turquoise-light: #3dd4c5;
    --pixidia-turquoise-alpha: rgba(32, 201, 184, 0.1);

    /* === CPT Category Colors === */
    --pxd-color-logement: #388e3c;
    --pxd-color-transport: #1976d2;
    --pxd-color-restauration: #d32f2f;
    --pxd-color-activite: #ff9800;
    --pxd-color-location: #9c27b0;

    /* === Neutrals === */
    --pixidia-white: #ffffff;
    --pixidia-off-white: #f8fafa;
    --pixidia-bg: #f0f4f4;
    --pixidia-gray-50: #f5f7f7;
    --pixidia-gray-100: #eef2f2;
    --pixidia-gray-200: #dce4e4;
    --pixidia-gray-300: #b8c5c5;
    --pixidia-gray-400: #8a9c9c;
    --pixidia-gray-500: #5d7070;
    --pixidia-text: #1a2e2e;
    --pixidia-text-muted: rgba(1, 40, 39, 0.55);

    /* === Status Colors === */
    --pixidia-red: #e53935;
    --pixidia-red-alpha: rgba(229, 57, 53, 0.1);
    --pixidia-orange: #f59e0b;
    --pixidia-orange-alpha: rgba(245, 158, 11, 0.1);

    /* === Gradients === */
    --gradient-primary: linear-gradient(135deg, var(--pixidia-blue) 0%, #0a4a47 100%);
    --gradient-accent: linear-gradient(135deg, var(--pixidia-green) 0%, var(--pixidia-turquoise) 100%);
    --gradient-card: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(248, 250, 250, 1) 100%);

    /* === Shadows === */
    --shadow-xs: 0 1px 2px rgba(1, 40, 39, 0.04);
    --shadow-sm: 0 2px 8px rgba(1, 40, 39, 0.06);
    --shadow-md: 0 4px 16px rgba(1, 40, 39, 0.08);
    --shadow-lg: 0 8px 32px rgba(1, 40, 39, 0.12);
    --shadow-xl: 0 16px 48px rgba(1, 40, 39, 0.16);
    --shadow-glow: 0 0 24px rgba(32, 201, 184, 0.2);
    --shadow-glow-green: 0 0 24px rgba(32, 141, 62, 0.2);

    /* === Border Radius === */
    --radius-xs: 6px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2xl: 28px;
    --radius-full: 100px;

    /* === Timing === */
    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --duration-fast: 150ms;
    --duration-normal: 250ms;
    --duration-slow: 400ms;

    /* === Active state ===
       One single signal for "this control is on", shared by the panel tabs, the map
       buttons and the locate button. Measured from .pxd-panel-tab--active, which was
       the only place that had it right. */
    --pxd-active-grad: linear-gradient(135deg, #0fa36b 25%, #38c19c 100%);
    --pxd-active-shadow: 0 4px 12px rgba(15, 163, 107, 0.25);
    --pxd-active-shadow-hover: 0 6px 16px rgba(15, 163, 107, 0.3);
    --pxd-active-ring: 0 0 0 2px #0fa36b;

    /* === Layout === */
    --pxd-header-height: 60px;
    --pxd-nav-height: 48px;
    --pxd-sidebar-width: 64px;
    --pxd-right-width: 35%;
    --pxd-left-width: 60.6%;
    --pxd-bottom-nav-height: 0px;
}

/* ============================================
   RESPONSIVE TOKEN OVERRIDES
   ============================================ */

@media (max-width: 1200px) {
    :root {
        --pxd-header-height: 56px;
        --pxd-sidebar-width: 52px;
        --pxd-right-width: 40%;
    }
}

@media (max-width: 768px) {
    :root {
        --pxd-header-height: 52px;
        --pxd-nav-height: 44px;
        --pxd-sidebar-width: 0px;
        --pxd-right-width: 0%;
        --pxd-left-width: 100%;
        --pxd-bottom-nav-height: 56px;
    }
}

@media (max-width: 480px) {
    :root {
        --pxd-header-height: 48px;
        --pxd-bottom-nav-height: 56px;
    }
}

/**
 * 01-reset.css - CSS Reset
 * Scoped to .pxd-page to avoid conflicting with WordPress/BuddyX global styles.
 */

.pxd-page *,
.pxd-page *::before,
.pxd-page *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ul/ol reset — BuddyX removes list-style but may also affect spacing */
.pxd-page ul,
.pxd-page ol {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Heading reset — BuddyX sets h1 { font-size: 2em } which leaks through.
   Use :where() for zero specificity so component classes (.pxd-hero-title, .pxd-card-title, etc.) can override. */
.pxd-page :where(h1, h2, h3, h4, h5, h6) {
    font-size: inherit;
    font-weight: inherit;
    margin: 0;
    line-height: inherit;
}

/* Image reset — :where() for zero specificity so .pxd-avatar etc. can set explicit dimensions */
.pxd-page :where(img) {
    display: block;
    max-width: 100%;
    height: auto;
    border: none;
}

/* ── Override BuddyX link styles in header ── */
.pxd-site-header a {
    color: inherit;
    text-decoration: none;
}
.pxd-site-header a:hover,
.pxd-site-header a:focus,
.pxd-site-header a:active {
    color: inherit;
    text-decoration: none;
}

/* ── External plugin elements — hide floating widgets injected via wp_footer ── */
body.pxd-itinerary-single #gt_float_wrapper,
body.pxd-itinerary-single .gt_float_switcher {
    display: none !important;
}

body.pxd-itinerary-single #pixidia-chat-drawer {
    display: none !important;
}

/**
 * 02-base.css - Base Styles (scoped to .pxd-page)
 * Font, colors, links, headings, focus — fully isolated from BuddyX/Elementor cascade.
 */

/* ── Body/html reset — BuddyX parent style is dequeued on itinerary pages,
   so we must provide our own body reset to avoid browser default margin: 8px ── */
html:has(body.pxd-itinerary-single),
body.pxd-itinerary-single {
    margin: 0;
    padding: 0;
    overflow: hidden;       /* Desktop: scrolling handled by .pxd-panel-left, not the body */
    background: var(--pixidia-bg, #f0f4f4);
}

/* Mobile: switch to body scroll — the panel is no longer a fixed-height scroll container */
@media (max-width: 768px) {
    html:has(body.pxd-itinerary-single),
    body.pxd-itinerary-single {
        overflow-x: hidden;
        overflow-y: auto;
        /* Smooth momentum scroll on iOS */
        -webkit-overflow-scrolling: touch;
    }
}

/* ── Body override — ensures Urbanist on body itself (overrides BuddyX "Open Sans") ── */
body.pxd-itinerary-single {
    font-family: 'Urbanist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* ── Root font + colors ── */
.pxd-page {
    font-family: 'Urbanist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--pixidia-bg);
    color: var(--pixidia-text);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

/* Force Urbanist inheritance throughout — overrides BuddyX "Open Sans" */
.pxd-page * {
    font-family: inherit;
}

/* ── Links — BuddyX/Elementor context sets color:white + underline ── */
.pxd-page a {
    color: var(--pixidia-text);
    text-decoration: none;
}

.pxd-page a:hover {
    text-decoration: none;
    color: var(--pixidia-blue);
}

/* ── Focus-visible — override child theme green outline on all pxd buttons ── */
.pxd-page button:focus-visible,
.pxd-page .pxd-btn:focus-visible,
.pxd-page .pxd-btn-icon:focus-visible,
.pxd-page .pxd-nav-item:focus-visible,
.pxd-page .pxd-header-icon-btn:focus-visible,
.pxd-page .pxd-header-profile:focus-visible {
    outline: 2px solid var(--pixidia-green);
    outline-offset: 2px;
}

/* ── Smooth scrolling on the scrollable left panel (not globally on html) ── */
.pxd-panel-left {
    scroll-behavior: smooth;
}

/**
 * 10-layout-grid.css - Split-view CSS Grid Layout
 * Main page grid, header, sidebar, panels
 */

/* ============================================
   SPLIT-VIEW LAYOUT (CSS Grid)
   ============================================ */

.pxd-page {
    display: grid;
    grid-template-columns: var(--pxd-sidebar-width) 1fr var(--pxd-right-width);
    grid-template-rows: var(--pxd-header-height) 1fr;
    height: 100vh;
    height: 100svh;
    overflow: hidden;
}

/* Header: full width, always visible */
.pxd-site-header {
    grid-column: 1 / -1;
    grid-row: 1;
    z-index: 200;
}

/* Sidebar nav: vertical icon column below header */
.pxd-sidebar-nav {
    grid-column: 1;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 6px;
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-right: 1px solid rgba(255, 255, 255, 0.5);
    overflow: visible;
    z-index: 100;
    box-shadow: 4px 0 20px rgba(15, 163, 107, 0.04);
}

.pxd-sidebar-nav::-webkit-scrollbar {
    display: none;
}

/* (Section nav is now the sidebar column - see .pxd-sidebar-nav above) */

/* ============================================
   CONTENT SECTIONS GRID
   ============================================ */

.pxd-cards-grid {
    display: grid;
    gap: 12px;
    align-items: stretch;
}
.pxd-cards-grid > .pxd-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.pxd-cards-grid--2col {
    grid-template-columns: repeat(2, 1fr);
}

/* Transport grid: 2col for simple trips, A/R spans full width */
.pxd-cards-grid--2col-transport {
    grid-template-columns: repeat(2, 1fr);
}
/* Wide cards span full width in any grid */
.pxd-cards-grid > .pxd-card--wide {
    grid-column: 1 / -1;
}
/* Vehicle cards: 2-column details to limit card height */
.pxd-card--wide .pxd-card-details--2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 24px;
}

.pxd-cards-grid--3col {
    grid-template-columns: repeat(3, 1fr);
}

.pxd-cards-grid--1col {
    grid-template-columns: 1fr;
}

/* ============================================
   COMMON ELEMENTS
   ============================================ */

.pxd-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    border-radius: var(--radius-full);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.65);
    text-decoration: none;
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 2px 8px rgba(15, 163, 107, 0.08);
    color: var(--pixidia-blue, #012827);
    transition: all 0.25s ease;
}

.pxd-btn svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.pxd-btn:hover {
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 4px 14px rgba(15, 163, 107, 0.15);
    transform: translateY(-1px);
}

.pxd-btn--primary {
    background: linear-gradient(135deg, #0fa36b 25%, #38c19c 100%);
    color: white;
    border-color: transparent;
    box-shadow: 0 3px 10px rgba(15, 163, 107, 0.25);
}

.pxd-btn--primary:hover {
    box-shadow: 0 6px 18px rgba(15, 163, 107, 0.35);
    transform: translateY(-2px);
}

.pxd-btn--outline {
    background: rgba(255, 255, 255, 0.65);
    color: var(--pixidia-gray-500, #5a6578);
    border: 1px solid rgba(1, 40, 39, 0.08);
}

.pxd-btn--outline:hover {
    background: rgba(255, 255, 255, 0.92);
    color: var(--pixidia-blue, #012827);
    border-color: rgba(15, 163, 107, 0.15);
}

.pxd-btn--sm {
    padding: 8px 16px;
    font-size: 13px;
}

.pxd-btn--icon {
    width: 36px;
    height: 36px;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
}

.pxd-btn svg,
.pxd-btn i {
    width: 16px;
    height: 16px;
}

/* Avatar sizes */
.pxd-avatar--sm {
    width: 32px;
    height: 32px;
}

.pxd-avatar--xs {
    width: 24px;
    height: 24px;
}

/* Input */
.pxd-input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--pixidia-gray-200);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 14px;
    color: var(--pixidia-text);
    background: white;
}

.pxd-input:focus {
    outline: none;
    border-color: var(--pixidia-green);
    box-shadow: 0 0 0 3px rgba(32, 141, 62, 0.1);
}

.pxd-input--sm {
    width: 120px;
}

.pxd-textarea {
    min-height: 80px;
    resize: vertical;
}

/* Stars */
.pxd-star {
    width: 16px;
    height: 16px;
}

.pxd-star--filled {
    color: #ffc107;
    fill: #ffc107;
}

.pxd-star--half {
    color: #ffc107;
}

.pxd-star--empty {
    color: var(--pixidia-gray-200);
}

/* Badge variants used by app.js */
.pxd-badge--confirmed {
    background: rgba(56, 142, 60, 0.1);
    color: #388e3c;
}

.pxd-badge--pending {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.pxd-badge--cancelled {
    background: rgba(229, 57, 53, 0.1);
    color: #e53935;
}

.pxd-badge--budget {
    background: rgba(32, 141, 62, 0.7);
}

.pxd-badge--solo {
    background: rgba(255, 255, 255, 0.2);
}

.pxd-badge--type {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    font-size: 11px;
    padding: 2px 10px;
    border-radius: var(--radius-full);
}

/* Card inner elements used by app.js */
.pxd-card-cat {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: 600;
    color: white;
}

.pxd-card-cat svg,
.pxd-card-cat i {
    width: 12px;
    height: 12px;
}

.pxd-card-day {
    font-size: 12px;
    font-weight: 600;
    color: var(--pixidia-text-muted);
    background: var(--pixidia-gray-50);
    padding: 2px 8px;
    border-radius: var(--radius-full);
}

.pxd-card-details {
    margin-top: 8px;
}

.pxd-card-detail {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--pixidia-text-muted);
    margin-top: 4px;
}

.pxd-card-detail i,
.pxd-card-detail svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.pxd-card-cost {
    font-weight: 700;
    color: var(--pixidia-green);
}

.pxd-card-free {
    color: var(--pixidia-green);
}

.pxd-card-separator {
    height: 1px;
    background: var(--pixidia-gray-100);
    margin: 12px 0;
}

.pxd-card-sub {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--pixidia-text-muted);
    margin-bottom: 6px;
}

.pxd-card-segment {
    padding: 6px 12px;
    margin-top: 6px;
    background: rgba(25, 118, 210, 0.05);
    border-radius: var(--radius-sm);
    font-size: 12px;
    color: var(--pixidia-text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}

.pxd-card-segment i,
.pxd-card-segment svg {
    width: 14px;
    height: 14px;
}

.pxd-card-actions {
    margin-top: 12px;
    display: flex;
    gap: 8px;
}

.pxd-card--hover {
    box-shadow: var(--shadow-md);
    border-left-width: 6px;
}

/* Card comment */
.pxd-card-comment {
    margin-top: 10px;
    padding: 10px 12px;
    background: var(--pixidia-gray-50);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--pixidia-green);
    font-size: 13px;
    font-style: italic;
    color: var(--pixidia-text-muted);
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

.pxd-card-comment i,
.pxd-card-comment svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    margin-top: 2px;
}

/* Timeline elements used by app.js */
.pxd-timeline-empty {
    padding: 24px;
    text-align: center;
    color: var(--pixidia-text-muted);
    font-style: italic;
}

.pxd-timeline-day-header {
    padding: 12px 0 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--pixidia-blue);
    border-bottom: 1px solid var(--pixidia-gray-100);
    margin-bottom: 4px;
}

.pxd-timeline-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--pixidia-text);
}

/* Budget elements used by app.js */
.pxd-budget-donut {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    position: relative;
}

.pxd-budget-donut-center {
    position: absolute;
    inset: 30px;
    border-radius: 50%;
    background: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.05);
}

.pxd-budget-total {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--pixidia-blue);
    line-height: 1;
}

.pxd-budget-label {
    font-size: 12px;
    color: var(--pixidia-text-muted);
    margin-top: 4px;
}

.pxd-budget-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--pixidia-gray-100);
}

.pxd-budget-row:last-child {
    border-bottom: none;
}

.pxd-budget-row-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.pxd-budget-row-label {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
}

.pxd-budget-row-amount {
    font-size: 14px;
    font-weight: 700;
    color: var(--pixidia-blue);
    min-width: 70px;
    text-align: right;
}

.pxd-budget-row-percent {
    font-size: 12px;
    color: var(--pixidia-text-muted);
    min-width: 40px;
    text-align: right;
}

.pxd-budget-row-bar {
    width: 60px;
    height: 6px;
    border-radius: 3px;
    background: var(--pixidia-gray-100);
    overflow: hidden;
}

.pxd-budget-row-fill {
    height: 100%;
    border-radius: 3px;
}

/* Reservation elements used by app.js */
.pxd-res-empty {
    font-size: 12.5px;
    color: #778494;
    font-style: italic;
    padding: 12px 6px;
    text-align: center;
}

.pxd-res-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 8px;
    margin-bottom: 4px;
    cursor: pointer;
    font-size: 12.5px;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    min-width: 0;
}

.pxd-res-item::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 100%);
    opacity: 0.5;
    border-radius: inherit;
    transition: opacity 0.25s ease;
}

.pxd-res-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px -4px rgba(15, 163, 107, 0.14), 0 3px 8px rgba(15, 163, 107, 0.06);
    background: rgba(255, 255, 255, 0.92);
}

.pxd-res-item:hover::before { opacity: 0.9; }

.pxd-res-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.9);
}

.pxd-res-title {
    flex: 1;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--pixidia-blue, #012827);
    position: relative;
    z-index: 1;
}

.pxd-res-type {
    font-size: 10.5px;
    font-weight: 600;
    color: #778494;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    position: relative;
    z-index: 1;
}

/* Expense elements used by app.js */
.pxd-expense-summary {
    margin-bottom: 16px;
}

.pxd-expense-total {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
}

.pxd-expense-total i,
.pxd-expense-total svg {
    width: 20px;
    height: 20px;
    color: var(--pixidia-green);
}

.pxd-expense-participants {
    display: grid;
    gap: 8px;
}

.pxd-expense-participant {
    background: var(--pixidia-gray-50);
    border-radius: var(--radius-sm);
    padding: 12px;
}

.pxd-expense-participant-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    font-size: 14px;
}

.pxd-expense-items {
    display: grid;
    gap: 4px;
}

.pxd-expense-item {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: var(--pixidia-text-muted);
    padding: 4px 0;
}

.pxd-expense-desc {
    flex: 1;
}

.pxd-expense-amount {
    font-weight: 600;
    color: var(--pixidia-text);
}

.pxd-expense-form-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* Review elements used by app.js */
.pxd-reviews-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    font-size: 15px;
    font-weight: 600;
}

.pxd-star-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px;
    color: var(--pixidia-gray-300);
    transition: transform 0.15s ease, color 0.15s ease;
}

.pxd-star-btn:hover {
    transform: scale(1.2);
}

.pxd-star-btn.active {
    color: #ffc107;
}

.pxd-star-btn.active svg {
    fill: #ffc107;
    filter: drop-shadow(0 1px 4px rgba(255, 193, 7, 0.4));
}

.pxd-star-btn i,
.pxd-star-btn svg {
    width: 24px;
    height: 24px;
    transition: fill 0.15s ease, filter 0.15s ease;
}

/* Chat elements used by app.js */
.pxd-chat-messages {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pxd-chat-bubble {
    padding: 8px 12px;
    border-radius: 12px 12px 12px 4px;
    background: var(--pixidia-gray-50);
    font-size: 13px;
    max-width: 250px;
    line-height: 1.4;
}

.pxd-chat-message--own .pxd-chat-bubble {
    background: rgba(32, 141, 62, 0.1);
    border-radius: 12px 12px 4px 12px;
}

.pxd-chat-meta {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 11px;
    margin-bottom: 4px;
}

.pxd-chat-meta span {
    color: var(--pixidia-text-muted);
}

/* Legend elements used by map.js */
.pxd-legend-count {
    grid-column: 3;
    font-size: 0.6rem;
    font-weight: 700;
    color: #ad8800;
    background: rgba(236, 171, 0, 0.12);
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    position: relative;
    z-index: 1;
}

.pxd-legend-label {
    grid-column: 2;
    font-size: 0.6rem;
    font-weight: 600;
    color: #778494;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
    position: relative;
    z-index: 1;
    transition: color 0.3s ease;
}

.pxd-legend-item:hover .pxd-legend-label {
    color: #0d8c5a;
}

.pxd-legend-item svg,
.pxd-legend-item i {
    grid-column: 1;
    grid-row: 1;
    justify-self: center;
    width: 14px;
    height: 14px;
    color: #fff;
    position: relative;
    z-index: 2;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Popup elements used by map.js */
.pxd-popup-content {
    padding: 14px;
}

.pxd-popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.pxd-popup-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.pxd-popup-day {
    font-size: 11px;
    color: var(--pixidia-text-muted);
}

.pxd-popup-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--pixidia-blue);
    margin: 0 0 4px;
    line-height: 1.3;
}

.pxd-popup-time,
.pxd-popup-address {
    font-size: 12px;
    color: var(--pixidia-text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
}

/* Leaflet zoom controls override */
.leaflet-bar {
    border: none !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
    border-radius: 12px !important;
    overflow: hidden;
}

.leaflet-bar a {
    width: 36px !important;
    height: 36px !important;
    line-height: 36px !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    color: var(--pixidia-text) !important;
    background: white !important;
    border: none !important;
    border-bottom: 1px solid var(--pixidia-gray-100) !important;
    transition: background 0.15s, color 0.15s;
}

.leaflet-bar a:last-child {
    border-bottom: none !important;
}

.leaflet-bar a:hover {
    background: var(--pixidia-gray-50) !important;
    color: var(--pixidia-green) !important;
}

/* Leaflet marker classes used by map.js */
.pxd-marker-icon {
    background: none !important;
    border: none !important;
}

.pxd-marker-bounce {
    animation: pxd-marker-bounce 0.6s var(--ease-bounce);
}

/* ============================================
   RESPONSIVE: TABLET (768px - 1200px)
   ============================================ */

@media (max-width: 1200px) {
    .pxd-cards-grid--2col {
        grid-template-columns: 1fr;
    }

    .pxd-cards-grid--3col {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================
   RESPONSIVE: MOBILE (< 768px)
   ============================================ */

@media (max-width: 768px) {
    /* Switch from fixed split-view to scrollable single-column layout */
    .pxd-page {
        display: block;           /* Disable CSS grid — content stacks naturally */
        height: auto;             /* No longer 100vh; page grows with content */
        min-height: 100vh;
        min-height: 100svh;
        overflow: visible;        /* Allow body scroll instead of panel scroll */
        overflow-x: hidden;       /* Prevent horizontal overflow */
    }

    .pxd-sidebar-nav {
        display: none;
    }

    .pxd-panel-left {
        grid-column: 1;           /* Kept for grid fallback safety */
        height: auto;
        overflow-y: visible;      /* Body scrolls — panel does not need its own scroll */
        overflow-x: hidden;       /* Prevent horizontal overflow */
    }

    .pxd-panel-right {
        grid-column: 1;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 0;
        z-index: 600;
        transition: height 400ms cubic-bezier(0.4, 0, 0.2, 1);
    }

    .pxd-mobile-map-toggle {
        display: flex !important;
    }

    .pxd-cards-grid--2col,
    .pxd-cards-grid--3col,
    .pxd-cards-grid--2col-transport {
        grid-template-columns: 1fr;
    }

    /* Vehicle card: collapse 2-col details to 1 col on mobile */
    .pxd-card--wide .pxd-card-details--2col {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .pxd-expense-form-row {
        flex-direction: column;
    }

    .pxd-input--sm {
        width: 100%;
    }
}

/**
 * 11-layout-panels.css - Left and Right Panel Styles
 * Scrollable content panel + sticky map panel
 */

/* Left panel: scrollable content */
.pxd-panel-left {
    grid-column: 2;
    grid-row: 2;
    overflow-y: auto;
    padding-bottom: 12vh;              /* fallback for browsers without svh */
    padding-bottom: 12svh;             /* modern — enough scroll overrun for map viewing */
    scrollbar-width: thin;
    scrollbar-color: var(--pixidia-gray-300) transparent;
}

.pxd-panel-left::-webkit-scrollbar {
    width: 6px;
}

.pxd-panel-left::-webkit-scrollbar-track {
    background: transparent;
}

.pxd-panel-left::-webkit-scrollbar-thumb {
    background: var(--pixidia-gray-300);
    border-radius: 3px;
}

.pxd-panel-left::-webkit-scrollbar-thumb:hover {
    background: var(--pixidia-gray-400);
}

/* Right panel: map */
.pxd-panel-right {
    grid-column: 3;
    grid-row: 2;
    overflow: hidden;
}

/* ============================================
   TABLET PANEL REFINEMENT (768-1200px)
   ============================================ */

@media (max-width: 1200px) and (min-width: 769px) {
    .pxd-panel-left {
        padding-left: 4px;
        padding-right: 4px;
        padding-bottom: 10vh;
        padding-bottom: 10svh;
    }
}

/* ============================================
   MOBILE PANEL (<768px)
   ============================================ */

@media (max-width: 768px) {
    .pxd-panel-left {
        grid-column: 1;
        width: 100%;
        max-width: 100vw;
        box-sizing: border-box;
        /* Override 30vh desktop padding — replaced by safe-area + bottom-nav in 21-sidebar.css */
        padding-bottom: 0;
        /* Scrollbar hidden on mobile for cleaner UX */
        scrollbar-width: none;
    }

    .pxd-panel-left::-webkit-scrollbar {
        display: none;
    }

    .pxd-panel-right {
        grid-column: 1;
    }
}

/* ============================================
   2. HEADER — Glassmorphism Pill (adapté Elementor)
   ============================================ */

.pxd-site-header {
    height: var(--pxd-header-height, 60px);
    background: var(--gradient-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    position: relative;
    z-index: 200;
}

/* --- Pill container (glassmorphism) --- */
.pxd-header-pill {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 98%;
    max-width: 1600px;
    height: 44px;
    padding: 0 8px 0 6px;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
    transition: all 0.3s ease;
    overflow: visible;
}

.pxd-header-pill:hover {
    background: rgba(255, 255, 255, 0.22);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.15);
}

/* --- Left: logo + search --- */
.pxd-header-left {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
    min-width: 0;
}

.pxd-header-logo-link {
    text-decoration: none;
    flex-shrink: 0;
}

.pxd-header-logo-wrap {
    background: rgba(255, 255, 255, 0.5);
    border-radius: 14px;
    padding: 5px 14px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.pxd-header-logo-wrap:hover {
    background: rgba(255, 255, 255, 0.65);
}

.pxd-header-logo-wrap:hover .pxd-header-logo {
    transform: scale(1.05);
}

.pxd-header-logo {
    height: 22px !important;
    width: auto !important;
    max-width: 120px !important;
    display: block;
    object-fit: contain;
    transition: transform 0.3s ease;
    border: none !important;
    background: transparent !important;
}

/* --- Search bar --- */
.pxd-header-search-wrap {
    position: relative;
    flex: 1;
    max-width: 480px;
    height: 34px;
    display: flex;
    align-items: center;
}

.pxd-header-search-icon {
    position: absolute;
    left: 12px;
    font-size: 12px;
    color: rgba(1, 40, 39, 0.5);
    z-index: 2;
    pointer-events: none;
}

.pxd-header-search {
    width: 100%;
    height: 34px;
    padding: 0 38px 0 34px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.5);
    font-family: inherit;
    font-size: 13px;
    color: var(--pixidia-text);
    transition: all 0.3s ease;
}

.pxd-header-search::placeholder {
    color: rgba(1, 40, 39, 0.5);
    font-weight: 300;
}

.pxd-header-search:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.pxd-header-search-btn {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #012827, #025b59);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 11px;
    box-shadow: 0 2px 8px rgba(1, 40, 39, 0.3);
    transition: all 0.3s ease;
}

.pxd-header-search-btn:hover {
    transform: translateY(-50%) scale(1.1);
}

/* --- User actions --- */
.pxd-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    margin-left: 20px;
}

/* "Nouvel itinéraire" button */
.pxd-header-btn-new {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 16px;
    height: 34px;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: var(--pixidia-blue);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.pxd-header-btn-new i {
    font-size: 13px;
}

.pxd-header-btn-new:hover {
    background: rgba(255, 255, 255, 0.7);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* --- "Nos offres" button (logged-out) --- */
.pxd-site-header .pxd-header-btn-offers {
    display: flex !important;
    align-items: center;
    gap: 8px;
    padding: 0 16px !important;
    height: 34px;
    border-radius: 100px !important;
    background: rgba(255, 255, 255, 0.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: var(--pixidia-blue) !important;
    text-decoration: none !important;
    font-size: 13px !important;
    font-weight: 500;
    font-family: inherit;
    white-space: nowrap;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
    line-height: 1.2 !important;
}

.pxd-site-header .pxd-header-btn-offers i {
    font-size: 13px;
    color: var(--pixidia-blue) !important;
}

.pxd-site-header .pxd-header-btn-offers:hover,
.pxd-site-header .pxd-header-btn-offers:focus,
.pxd-site-header .pxd-header-btn-offers:active {
    background: rgba(255, 255, 255, 0.65) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12) !important;
    color: var(--pixidia-blue) !important;
    text-decoration: none !important;
}

/* Glow sweep effect on "Nos offres" */
.pxd-header-btn-glow {
    position: absolute;
    top: 0;
    left: -60px;
    width: 40px;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    filter: blur(4px);
    transition: left 0.8s ease;
    pointer-events: none;
}

.pxd-site-header .pxd-header-btn-offers:hover .pxd-header-btn-glow {
    left: calc(100% + 20px);
}

/* --- Connexion pill button (logged-out) --- */
.pxd-site-header .pxd-header-login-pill {
    display: flex !important;
    align-items: center;
    gap: 8px;
    padding: 3px 4px 3px 14px !important;
    height: 34px;
    border-radius: 100px !important;
    background: rgba(255, 255, 255, 0.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: var(--pixidia-blue) !important;
    text-decoration: none !important;
    font-size: 13px !important;
    font-weight: 500;
    font-family: inherit;
    white-space: nowrap;
    transition: all 0.3s ease;
    cursor: pointer;
    line-height: 1.2 !important;
}

.pxd-site-header .pxd-header-login-pill:hover,
.pxd-site-header .pxd-header-login-pill:focus,
.pxd-site-header .pxd-header-login-pill:active {
    background: rgba(255, 255, 255, 0.7) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    color: var(--pixidia-blue) !important;
    text-decoration: none !important;
}

.pxd-header-login-text {
    font-size: 13px;
    font-weight: 500;
    color: var(--pixidia-blue) !important;
}

.pxd-header-login-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    border: 2px solid rgba(255, 255, 255, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.3s ease;
    color: var(--pixidia-blue) !important;
}

.pxd-site-header .pxd-header-login-pill:hover .pxd-header-login-avatar {
    transform: scale(1.08);
    border-color: rgba(255, 255, 255, 0.8);
}

.pxd-header-login-avatar svg {
    width: 16px;
    height: 16px;
    color: var(--pixidia-blue) !important;
    stroke: var(--pixidia-blue) !important;
}

/* --- Focus/active overrides for icon buttons (prevent BuddyX conflicts) --- */
.pxd-site-header button.pxd-header-icon-btn:focus,
.pxd-site-header button.pxd-header-icon-btn:active,
.pxd-site-header button.pxd-header-icon-btn:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    background: rgba(255, 255, 255, 0.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 50% !important;
    color: var(--pixidia-blue) !important;
}

/* --- Drawer highlight style (logged-out Connexion) --- */
@media (max-width: 768px) {
    .pxd-header-drawer .pxd-header-drawer-nav a.pxd-header-drawer-nav-item--highlight,
    .pxd-header-drawer-nav-item--highlight {
        color: var(--pixidia-green, #1E9B52) !important;
        -webkit-text-fill-color: var(--pixidia-green, #1E9B52) !important;
        font-weight: 600;
    }
    .pxd-header-drawer .pxd-header-drawer-nav a.pxd-header-drawer-nav-item--highlight svg,
    .pxd-header-drawer-nav-item--highlight svg {
        color: var(--pixidia-green, #1E9B52) !important;
        stroke: var(--pixidia-green, #1E9B52) !important;
    }
}

/* Icon buttons (fav, notif, lang) */
.pxd-header-icon-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    color: var(--pixidia-blue);
    text-decoration: none;
    font-size: 14px;
}

.pxd-header-icon-btn:hover {
    background: rgba(255, 255, 255, 0.7);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.pxd-header-fav {
    color: #ff3b5c;
}

/* Notification badge */
.pxd-header-notif-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 16px;
    height: 16px;
    border-radius: 10px;
    background: #ff3b5c;
    color: white;
    font-size: 9px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    border: 2px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 0 6px rgba(255, 59, 92, 0.4);
    animation: pxd-header-pulse 2s infinite;
}

@keyframes pxd-header-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* Language button */
.pxd-header-lang-wrap {
    position: relative;
}

.pxd-header-lang {
    font-size: 14px;
}

.pxd-header-lang svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.pxd-header-lang-code {
    position: absolute;
    bottom: -2px;
    right: -2px;
    font-size: 7px;
    font-weight: 700;
    background: rgba(1, 40, 39, 0.8);
    color: white;
    padding: 1px 3px;
    border-radius: 3px;
    line-height: 1;
}

/* Language dropdown */
.pxd-header-lang-dropdown {
    width: 200px;
}

.pxd-header-lang-dropdown li a {
    justify-content: space-between;
}

.pxd-lang-name {
    flex: 1;
}

.pxd-lang-badge {
    font-size: 10px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: 0.5px;
}

.pxd-header-lang-dropdown li.is-active {
    background: rgba(255, 255, 255, 0.1);
}

.pxd-header-lang-dropdown li.is-active::before {
    opacity: 1;
}

.pxd-header-lang-dropdown li.is-active .pxd-lang-badge {
    background: var(--pixidia-green);
    color: white;
}

/* --- Profile button --- */
.pxd-header-profile-wrap {
    position: relative;
}

.pxd-header-profile {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 4px 3px 12px;
    height: 34px;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    font-family: inherit;
    color: var(--pixidia-blue);
}

.pxd-header-profile:hover {
    background: rgba(255, 255, 255, 0.7);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.pxd-header-profile-name {
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}

.pxd-header-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.5);
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.pxd-header-profile:hover .pxd-header-avatar {
    transform: scale(1.08);
    border-color: rgba(255, 255, 255, 0.8);
}

.pxd-header-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pxd-header-profile-status {
    position: absolute;
    bottom: 3px;
    right: 5px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4AD66D;
    border: 2px solid rgba(255, 255, 255, 0.6);
}

/* --- Dropdown menu --- */
.pxd-header-dropdown {
    position: fixed;
    width: 240px;
    background: var(--pixidia-blue);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px) scale(0.96);
    transition: opacity 0.25s var(--ease-smooth), transform 0.25s var(--ease-smooth), visibility 0.25s;
    pointer-events: none;
    z-index: 9999;
    overflow: hidden;
}

.pxd-header-dropdown::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,0.25), rgba(255,255,255,0));
}

.pxd-header-dropdown.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.pxd-header-dropdown ul {
    list-style: none;
    padding: 8px;
    margin: 0;
}

.pxd-header-dropdown li {
    border-radius: 10px;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.pxd-header-dropdown li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 3px;
    height: 100%;
    background: var(--pixidia-green);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.pxd-header-dropdown li:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateX(2px);
}

.pxd-header-dropdown li:hover::before {
    opacity: 1;
}

.pxd-header-dropdown li a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    color: white;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
}

.pxd-dropdown-icon {
    display: block;
    width: 18px;
    height: 18px;
    border-radius: 6px;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.pxd-dropdown-icon--green {
    background: rgba(32, 141, 62, 0.3);
}

.pxd-dropdown-icon--red {
    background: rgba(244, 67, 54, 0.3);
}

.pxd-header-dropdown li:hover .pxd-dropdown-icon--green {
    background: rgba(32, 141, 62, 0.7);
}

.pxd-header-dropdown li:hover .pxd-dropdown-icon--red {
    background: rgba(244, 67, 54, 0.7);
}

.pxd-dropdown-logout:hover a {
    color: #f44336;
}

/* --- Hamburger button (hidden on desktop) --- */
.pxd-header-hamburger {
    display: none;
}

/* --- Header Drawer (hidden on desktop) --- */
.pxd-header-drawer-overlay {
    display: none;
}

.pxd-header-drawer {
    display: none;
}

/* --- Header responsive --- */
@media (max-width: 1100px) {
    .pxd-header-btn-text,
    .pxd-header-profile-name,
    .pxd-header-login-text {
        display: none;
    }
    .pxd-header-btn-new {
        width: 34px;
        height: 34px;
        padding: 0;
        border-radius: 50%;
        justify-content: center;
    }
    /* Collapse "Nos offres" to circle icon */
    .pxd-site-header .pxd-header-btn-offers {
        width: 34px;
        height: 34px;
        padding: 0 !important;
        border-radius: 50% !important;
        justify-content: center;
    }
    .pxd-header-btn-offers .pxd-header-btn-glow {
        display: none;
    }
    /* Collapse login pill */
    .pxd-site-header .pxd-header-login-pill {
        padding: 3px !important;
    }
    .pxd-header-profile {
        padding: 3px;
    }
}

@media (max-width: 1000px) {
    .pxd-header-search-wrap {
        display: none;
    }
    .pxd-header-actions {
        gap: 8px;
    }
}

/* ============================================
   MOBILE HEADER (<768px)
   ============================================ */

@media (max-width: 768px) {
    .pxd-site-header {
        /* Add safe-area-inset-top so the header doesn't hide under the iPhone notch/Dynamic Island */
        height: calc(var(--pxd-header-height, 52px) + env(safe-area-inset-top, 0px));
        padding-top: env(safe-area-inset-top, 0px);
    }

    .pxd-header-pill {
        height: 40px;
        padding: 0 6px;
    }

    .pxd-header-logo {
        height: 18px;
    }

    .pxd-header-logo-wrap {
        height: 30px;
        padding: 4px 10px;
        border-radius: 10px;
    }

    /* Hide desktop-only elements on mobile */
    .pxd-header-search-wrap,
    .pxd-header-btn-new,
    .pxd-header-fav,
    .pxd-header-notif,
    .pxd-header-lang-wrap,
    .pxd-header-profile-wrap {
        display: none !important;
    }
    /* Hide logged-out desktop buttons on mobile (doubled selector for specificity) */
    .pxd-site-header.pxd-site-header .pxd-header-btn-offers,
    .pxd-site-header.pxd-site-header .pxd-header-login-pill {
        display: none !important;
    }

    /* Show hamburger — fits inside 40px pill, touch target via ::after */
    .pxd-header-hamburger {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 4px;
        width: 32px;
        height: 32px;
        padding: 0;
        border: none;
        background: rgba(255, 255, 255, 0.35);
        border-radius: 8px;
        cursor: pointer;
        transition: background 0.2s ease;
        position: relative;
        flex-shrink: 0;
    }

    /* Invisible 44×44 touch target */
    .pxd-header-hamburger::after {
        content: "";
        position: absolute;
        inset: -6px;
        min-width: 44px;
        min-height: 44px;
    }

    .pxd-header-hamburger span {
        display: block;
        width: 18px;
        height: 2px;
        background: white;
        border-radius: 1px;
        transition: all 0.3s ease;
    }

    .pxd-header-hamburger:active {
        background: rgba(255, 255, 255, 0.5);
    }

    .pxd-header-actions {
        gap: 6px;
        margin-left: auto;
    }

    /* Drawer overlay */
    .pxd-header-drawer-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: 9998;
        opacity: 0;
        transition: opacity 300ms var(--ease-smooth);
    }

    .pxd-header-drawer-overlay.is-open {
        display: block;
        opacity: 1;
    }

    /* Drawer panel */
    .pxd-header-drawer {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: 280px;
        max-width: 85vw;
        z-index: 9999;
        background: var(--pixidia-blue, #012827);
        box-shadow: -8px 0 32px rgba(0, 0, 0, 0.3);
        transform: translateX(100%);
        transition: transform 300ms var(--ease-smooth);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .pxd-header-drawer.is-open {
        transform: translateX(0);
    }

    .pxd-header-drawer-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .pxd-header-drawer-profile {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .pxd-header-drawer .pxd-header-avatar {
        width: 36px;
        height: 36px;
    }

    .pxd-header-drawer-profile-info {
        display: flex;
        flex-direction: column;
    }

    .pxd-header-drawer-profile-name {
        font-size: 14px;
        font-weight: 600;
        color: white;
    }

    .pxd-header-drawer-profile-status {
        font-size: 11px;
        color: #4AD66D;
    }

    .pxd-header-drawer-close {
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.1);
        border: none;
        border-radius: 8px;
        color: white;
        font-size: 16px;
        cursor: pointer;
        transition: background 0.2s ease;
        position: relative;
        flex-shrink: 0;
    }

    /* Touch target for drawer close */
    .pxd-header-drawer-close::after {
        content: "";
        position: absolute;
        inset: -4px;
        min-width: 44px;
        min-height: 44px;
    }

    .pxd-header-drawer-close:active {
        background: rgba(255, 255, 255, 0.2);
    }

    .pxd-header-drawer-search {
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 12px 16px;
        padding: 10px 14px;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 10px;
        border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .pxd-header-drawer-search i,
    .pxd-header-drawer-search svg {
        color: #ffffff !important;
        stroke: #ffffff !important;
        font-size: 13px;
        width: 18px;
        height: 18px;
        flex-shrink: 0;
    }

    .pxd-header-drawer-search input {
        flex: 1;
        background: none;
        border: none;
        outline: none;
        color: white;
        font-family: inherit;
        font-size: 13px;
    }

    .pxd-header-drawer-search input::placeholder {
        color: rgba(255, 255, 255, 0.4);
    }

    .pxd-header-drawer-nav {
        display: flex;
        flex-direction: column;
        padding: 8px;
    }

    .pxd-header-drawer .pxd-header-drawer-nav a.pxd-header-drawer-nav-item,
    .pxd-header-drawer .pxd-header-drawer-nav button.pxd-header-drawer-nav-item,
    .pxd-header-drawer-nav-item,
    .pxd-header-drawer nav a,
    .pxd-header-drawer nav button {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 14px;
        color: #ffffff !important;
        text-decoration: none !important;
        font-size: 14px;
        font-weight: 500;
        border-radius: 10px;
        transition: background 0.2s ease;
        min-height: 44px;
        -webkit-text-fill-color: #ffffff !important;
    }

    .pxd-header-drawer .pxd-header-drawer-nav a.pxd-header-drawer-nav-item:visited,
    .pxd-header-drawer nav a:visited {
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
    }

    .pxd-header-drawer .pxd-header-drawer-nav .pxd-header-drawer-nav-item i,
    .pxd-header-drawer .pxd-header-drawer-nav .pxd-header-drawer-nav-item svg,
    .pxd-header-drawer nav a svg,
    .pxd-header-drawer nav button svg {
        width: 18px;
        height: 18px;
        text-align: center;
        font-size: 14px;
        flex-shrink: 0;
        color: #ffffff !important;
    }

    .pxd-header-drawer .pxd-header-drawer-nav .pxd-header-drawer-nav-item svg,
    .pxd-header-drawer nav a svg,
    .pxd-header-drawer nav button svg {
        stroke: #ffffff !important;
        fill: none;
    }

    .pxd-header-drawer-nav-item:active {
        background: rgba(255, 255, 255, 0.08);
    }

    .pxd-header-drawer .pxd-header-drawer-nav a.pxd-header-drawer-nav-item--danger,
    .pxd-header-drawer-nav-item--danger {
        color: #f44336 !important;
        -webkit-text-fill-color: #f44336 !important;
    }

    .pxd-header-drawer .pxd-header-drawer-nav a.pxd-header-drawer-nav-item--danger svg,
    .pxd-header-drawer-nav-item--danger svg {
        color: #f44336 !important;
        stroke: #f44336 !important;
    }

    .pxd-header-drawer-badge {
        margin-left: auto;
        min-width: 20px;
        height: 20px;
        border-radius: 10px;
        background: #ff3b5c;
        color: white;
        font-size: 11px;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 6px;
    }

    .pxd-header-drawer-lang {
        margin-left: auto;
        font-size: 12px;
        font-weight: 700;
        color: rgba(255, 255, 255, 0.5);
        background: rgba(255, 255, 255, 0.1);
        padding: 2px 8px;
        border-radius: 4px;
    }

    /* Drawer language toggle button */
    .pxd-header-drawer-lang-item,
    .pxd-header-drawer .pxd-header-drawer-nav button.pxd-header-drawer-lang-item {
        background: none !important;
        background-color: transparent !important;
        border: none !important;
        width: 100%;
        cursor: pointer;
        font-family: inherit;
        text-align: left;
        -webkit-appearance: none !important;
        appearance: none !important;
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
    }

    .pxd-header-drawer-lang-item svg,
    .pxd-header-drawer .pxd-header-drawer-nav button.pxd-header-drawer-lang-item svg {
        fill: #ffffff !important;
        stroke: none !important;
    }

    /* Drawer language sub-list */
    .pxd-header-drawer-lang-list {
        padding: 0 0 0 30px;
    }

    .pxd-header-drawer-lang-option,
    .pxd-header-drawer .pxd-header-drawer-nav a.pxd-header-drawer-lang-option {
        padding: 10px 14px !important;
        min-height: 40px !important;
        font-size: 13px !important;
        color: rgba(255, 255, 255, 0.7) !important;
        -webkit-text-fill-color: rgba(255, 255, 255, 0.7) !important;
    }

    .pxd-header-drawer-lang-option:active,
    .pxd-header-drawer .pxd-header-drawer-nav a.pxd-header-drawer-lang-option:active {
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
        background: rgba(255, 255, 255, 0.08);
    }

    .pxd-header-drawer-lang-option.is-active,
    .pxd-header-drawer .pxd-header-drawer-nav a.pxd-header-drawer-lang-option.is-active {
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
        font-weight: 600;
    }

    .pxd-header-drawer-lang-option.is-active .pxd-header-drawer-lang {
        background: var(--pixidia-green);
        color: #fff;
    }

    .pxd-header-drawer-divider {
        height: 1px;
        background: rgba(255, 255, 255, 0.08);
        margin: 4px 14px;
    }
}


/* ============================================
   5. SIDEBAR NAVIGATION (vertical icon column)
   ============================================ */

.pxd-nav-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    color: #778494;
    cursor: pointer;
    font-family: inherit;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 2px 6px rgba(15, 163, 107, 0.04);
    transition: all 0.35s ease;
    overflow: visible;
}

.pxd-nav-item::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 100%);
    border-radius: inherit;
    pointer-events: none;
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

.pxd-nav-item svg {
    width: 19px;
    height: 19px;
    position: relative;
    z-index: 1;
}

/* Tooltip */
.pxd-nav-label {
    position: absolute;
    left: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%) translateX(-4px);
    background: linear-gradient(135deg, #0fa36b 25%, #38c19c 100%);
    color: white;
    font-size: 11.5px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 8px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 200;
    box-shadow: 0 4px 12px rgba(15, 163, 107, 0.25);
    letter-spacing: 0.01em;
}

.pxd-nav-label::before {
    content: '';
    position: absolute;
    left: -4px;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    width: 8px;
    height: 8px;
    background: #0fa36b;
}

.pxd-nav-item:hover .pxd-nav-label {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

/* Hover state */
.pxd-nav-item:hover {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(15, 163, 107, 0.2);
    color: var(--pixidia-blue);
    box-shadow: 0 6px 16px rgba(15, 163, 107, 0.12);
}

.pxd-nav-item:hover::before {
    opacity: 0.9;
}

/* Active state */
.pxd-nav-item.active {
    color: white;
    background: linear-gradient(135deg, #0fa36b 25%, #38c19c 100%);
    border-color: transparent;
    box-shadow: 0 4px 14px rgba(15, 163, 107, 0.3);
}

.pxd-nav-item.active::before {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
    opacity: 1;
}

/* Active indicator bar on the right edge */
.pxd-nav-item.active::after {
    content: '';
    position: absolute;
    right: -7px;
    top: 10px;
    bottom: 10px;
    width: 3px;
    border-radius: 3px 0 0 3px;
    background: linear-gradient(to bottom, #0fa36b, #38c19c);
    box-shadow: 0 0 8px rgba(15, 163, 107, 0.4);
}

/* ============================================
   6. PANNEAU ENRICHIR (auteur only)
   ============================================ */

.pxd-enrichir {
    margin: 16px;
    padding: 24px;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, rgba(32, 141, 62, 0.04) 0%, rgba(32, 201, 184, 0.04) 100%);
    border: 1px dashed var(--pixidia-green);
}

.pxd-enrichir-header h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--pixidia-blue);
    margin: 0 0 4px;
}

.pxd-enrichir-header p {
    font-size: 13px;
    color: var(--pixidia-text-muted);
    margin: 0 0 16px;
}

.pxd-enrichir-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.pxd-enrichir-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: var(--radius-md);
    background: white;
    border: 1px solid var(--pixidia-gray-200);
    font-size: 13px;
    font-weight: 600;
    color: var(--pixidia-text);
    text-decoration: none;
    cursor: pointer;
    font-family: inherit;
}

.pxd-enrichir-btn:hover {
    border-color: var(--pixidia-green);
    box-shadow: var(--shadow-sm);
}

.pxd-enrichir-btn svg {
    width: 18px;
    height: 18px;
    color: var(--pixidia-green);
}

/* ============================================
   MOBILE BOTTOM NAVIGATION BAR (<768px)
   ============================================ */

.pxd-bottom-nav {
    display: none;
}

.pxd-more-drawer-overlay {
    display: none;
}

.pxd-more-drawer {
    display: none;
}

@media (max-width: 768px) {
    .pxd-bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        /* Total height = nav content (56px) + safe-area-inset-bottom for iPhone X home indicator */
        height: calc(var(--pxd-bottom-nav-height, 56px) + env(safe-area-inset-bottom, 0px));
        padding-bottom: env(safe-area-inset-bottom, 0px);
        padding-left: env(safe-area-inset-left, 0px);
        padding-right: env(safe-area-inset-right, 0px);
        background: rgba(255, 255, 255, 0.78);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-top: 1px solid rgba(255, 255, 255, 0.5);
        box-shadow: 0 -4px 20px rgba(15, 163, 107, 0.08);
        z-index: 1000;
        align-items: flex-start;
        justify-content: space-around;
    }

    .pxd-bottom-nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        flex: 1;
        /* Fixed height = 56px so safe-area doesn't shrink the touch target */
        height: var(--pxd-bottom-nav-height, 56px);
        min-height: 44px;
        min-width: 44px;
        padding: 6px 4px;
        background: none;
        border: none;
        cursor: pointer;
        font-family: inherit;
        font-size: 10px;
        font-weight: 500;
        color: var(--pixidia-gray-400, #8a9c9c);
        transition: color var(--duration-fast) var(--ease-smooth);
        position: relative;
    }

    .pxd-bottom-nav-item svg {
        width: 22px;
        height: 22px;
        flex-shrink: 0;
        transition: transform var(--duration-fast) var(--ease-smooth);
    }

    .pxd-bottom-nav-item span {
        line-height: 1;
        white-space: nowrap;
    }

    .pxd-bottom-nav-item.active {
        color: var(--pixidia-green, #208D3E);
    }

    .pxd-bottom-nav-item.active svg {
        transform: scale(1.1);
    }

    .pxd-bottom-nav-item.active::after {
        content: '';
        position: absolute;
        top: 2px;
        left: 50%;
        transform: translateX(-50%);
        width: 20px;
        height: 2px;
        border-radius: 2px;
        background: var(--pixidia-green, #208D3E);
    }

    /* "More" drawer overlay */
    .pxd-more-drawer-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.3);
        z-index: 999;
        opacity: 0;
        transition: opacity var(--duration-normal) var(--ease-smooth);
    }

    .pxd-more-drawer-overlay.is-open {
        display: block;
        opacity: 1;
    }

    /* "More" drawer */
    .pxd-more-drawer {
        display: block;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1001;
        background: rgba(255, 255, 255, 0.92);
        backdrop-filter: blur(24px);
        -webkit-backdrop-filter: blur(24px);
        border-top: 1px solid rgba(255, 255, 255, 0.5);
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.12);
        /* Extra bottom padding clears the bottom nav bar (safe-area-aware) */
        padding: 8px 16px calc(var(--pxd-bottom-nav-height, 56px) + env(safe-area-inset-bottom, 0px) + 16px);
        transform: translateY(100%);
        transition: transform 300ms var(--ease-smooth);
    }

    .pxd-more-drawer.is-open {
        transform: translateY(0);
    }

    .pxd-more-drawer-handle {
        width: 40px;
        height: 4px;
        border-radius: 2px;
        background: var(--pixidia-gray-300, #b8c5c5);
        margin: 0 auto 12px;
    }

    .pxd-more-drawer-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
    }

    .pxd-more-drawer-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        padding: 12px 4px;
        background: none;
        border: none;
        cursor: pointer;
        font-family: inherit;
        font-size: 11px;
        font-weight: 500;
        color: var(--pixidia-text, #1a2e2e);
        border-radius: var(--radius-md, 12px);
        transition: background var(--duration-fast) var(--ease-smooth);
        min-height: 44px;
    }

    .pxd-more-drawer-item:active {
        background: rgba(0, 0, 0, 0.04);
    }

    .pxd-more-drawer-icon {
        width: 44px;
        height: 44px;
        border-radius: var(--radius-md, 12px);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .pxd-more-drawer-icon svg {
        width: 22px;
        height: 22px;
    }

    /* Adjust content panel bottom padding to clear the bottom nav (including safe-area) */
    .pxd-panel-left {
        padding-bottom: calc(var(--pxd-bottom-nav-height, 56px) + env(safe-area-inset-bottom, 0px) + 16px);
    }

    /* Mobile map toggle — positioned bottom-right (no bottom nav present) */
    .pxd-mobile-map-toggle {
        bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important;
    }

    body.pxd-map-visible .pxd-mobile-map-toggle {
        bottom: calc(60vh + 12px) !important;
    }
}


/* ============================================
   3. HERO SECTION
   ============================================ */

/* ── Hero banner ── */
.pxd-hero {
    position: relative;
    height: 320px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin: 16px;
}

.pxd-hero-image {
    position: absolute;
    inset: 0;
}

.pxd-hero-picture {
    display: block;
    width: 100%;
    height: 100%;
}

.pxd-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.pxd-hero-image--empty {
    background: linear-gradient(135deg, #0A3D3A 0%, #1E9B52 50%, #0A3D3A 100%);
}

.pxd-hero-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.15) 100%);
}

/* ── Hero content — glass panel at bottom ── */
.pxd-hero-content {
    position: absolute;
    z-index: 1;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    padding: 14px 24px 16px;
    color: var(--pixidia-blue, #012827);
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-top: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 16px 16px 0 0;
}

.pxd-hero-badges {
    display: none;
}

.pxd-hero-title {
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.25;
    margin-bottom: 8px;
    color: var(--pixidia-blue, #012827);
}

/* Badges — tinted glass pills */
.pxd-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 13px;
    border-radius: var(--radius-full);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.2px;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 2px 6px rgba(15, 163, 107, 0.06);
    color: var(--pixidia-blue, #012827);
    transition: all 0.25s ease;
}

.pxd-badge svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}

.pxd-badge--destination {
    background: rgba(15, 163, 107, 0.12);
    border-color: rgba(15, 163, 107, 0.22);
    color: #0a7a4f;
}

.pxd-badge--destination svg { color: #0fa36b; }

.pxd-badge--duration {
    background: rgba(25, 118, 210, 0.1);
    border-color: rgba(25, 118, 210, 0.2);
    color: #1565c0;
}

.pxd-badge--duration svg { color: #1976d2; }

.pxd-badge--budget {
    background: rgba(212, 160, 0, 0.1);
    border-color: rgba(212, 160, 0, 0.2);
    color: #ad8800;
}

.pxd-badge--budget svg { color: #d4a000; }

.pxd-badge--profile {
    background: rgba(255, 152, 0, 0.1);
    border-color: rgba(255, 152, 0, 0.2);
    color: #e65100;
}

.pxd-badge--ai {
    background: rgba(32, 201, 184, 0.1);
    border-color: rgba(32, 201, 184, 0.2);
    color: #00897b;
}

.pxd-badge--type {
    font-size: 10px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 100px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    background: rgba(25, 118, 210, 0.10);
    border: 1px solid rgba(25, 118, 210, 0.18);
    color: #1565c0;
}

/* Actions hero — icon buttons row */
.pxd-hero-actions {
    display: flex;
    gap: 6px;
    margin-top: 10px;
    align-items: center;
    position: relative;
    z-index: 10;
}

/* Scroll-fade wrapper for hero actions */
.pxd-hero-actions-wrap {
    position: relative;
}

.pxd-hero-actions-wrap::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 32px;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.85));
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.pxd-hero-actions-sep {
    width: 1px;
    height: 22px;
    background: rgba(1, 40, 39, 0.12);
    margin: 0 4px;
    flex-shrink: 0;
}

.pxd-btn-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(1, 40, 39, 0.08);
    background: rgba(255, 255, 255, 0.6);
    color: var(--pixidia-gray-500, #5a6578);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
    flex-shrink: 0;
    position: relative;
}

.pxd-btn-icon:hover {
    background: rgba(255, 255, 255, 0.95);
    color: var(--pixidia-blue, #012827);
    box-shadow: 0 3px 10px rgba(15, 163, 107, 0.12);
    transform: translateY(-1px);
}

.pxd-btn-icon svg,
.pxd-btn-icon i {
    width: 16px;
    height: 16px;
    font-size: 15px;
    line-height: 1;
}

/* ── Custom tooltip ── */
[data-tooltip] {
    position: relative;
}

[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    padding: 6px 14px;
    border-radius: 8px;
    background: linear-gradient(135deg, #0fa36b 25%, #38c19c 100%);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 50;
    box-shadow: 0 4px 12px rgba(15, 163, 107, 0.25);
}

[data-tooltip]::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    border: 5px solid transparent;
    border-top-color: #0fa36b;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 50;
}

[data-tooltip]:hover::after,
[data-tooltip]:hover::before {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Favorite — heart fill red */
.pxd-hero-fav--active {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.25);
    color: #ef4444;
}

.pxd-hero-fav--active:hover {
    background: rgba(239, 68, 68, 0.18);
    color: #dc2626;
    box-shadow: 0 3px 10px rgba(239, 68, 68, 0.15);
}

.pxd-hero-fav--active svg {
    fill: #ef4444;
}

/* Active state (e.g. chat open) */
.pxd-btn-icon--active {
    background: rgba(15, 163, 107, 0.1);
    border-color: rgba(15, 163, 107, 0.25);
    color: #0fa36b;
}

.pxd-btn-icon--active:hover {
    background: rgba(15, 163, 107, 0.18);
}

/* Danger button (delete) */
.pxd-btn-icon--danger:hover {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.2);
    color: #ef4444;
    box-shadow: 0 3px 10px rgba(239, 68, 68, 0.1);
}

/* Author + rating */
.pxd-hero-meta {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pxd-hero-author {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13.5px;
    color: var(--pixidia-blue, #012827);
}

.pxd-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid rgba(15, 163, 107, 0.3);
    object-fit: cover;
    box-shadow: 0 2px 8px rgba(15, 163, 107, 0.12);
}

.pxd-hero-author span {
    font-weight: 500;
}

.pxd-hero-author strong {
    font-weight: 700;
    color: var(--pixidia-blue, #012827);
}

/* --- Badge abonnement (premium/standard) --- */
.pixidia-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 5px;
    vertical-align: middle;
    line-height: 1;
    cursor: pointer;
    position: relative;
}
.pixidia-badge-img {
    max-width: 20px;
    max-height: 20px;
    width: auto;
    height: auto;
    display: inline-block;
}
/* Espacement badge ↔ profils voyageurs */
.pxd-hero-author + .pxd-hero-profiles {
    margin-left: 6px;
}

/* --- Profils voyageurs (hero meta pills) --- */
.pxd-hero-profiles {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.pxd-profile-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: rgba(255, 152, 0, 0.18);
    border: 1px solid rgba(255, 152, 0, 0.35);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    color: #e65100;
    white-space: nowrap;
    line-height: 1.3;
}
.pxd-profile-pill-emoji {
    font-size: 13px;
}

.pxd-hero-date {
    color: var(--pixidia-gray-500, #5a6a7a);
    font-size: 12.5px;
    font-weight: 500;
}

.pxd-hero-author-name {
    font-size: 14px;
    font-weight: 500;
}

.pxd-hero-rating {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 193, 7, 0.08);
    border: 1px solid rgba(255, 193, 7, 0.18);
    border-radius: 20px;
    padding: 5px 14px 5px 10px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.pxd-hero-rating-score {
    font-size: 18px;
    font-weight: 800;
    color: var(--pixidia-blue, #012827);
    line-height: 1;
    letter-spacing: -0.02em;
}

.pxd-hero-rating-stars {
    display: flex;
    align-items: center;
    gap: 1px;
    filter: drop-shadow(0 1px 3px rgba(255, 193, 7, 0.35));
}

.pxd-hero-rating-stars .pxd-star {
    width: 14px;
    height: 14px;
}

.pxd-hero-rating-count {
    font-size: 12px;
    font-weight: 600;
    color: var(--pixidia-gray-400, #778494);
    padding-left: 4px;
    border-left: 1px solid rgba(1, 40, 39, 0.1);
    line-height: 1;
}

.pxd-stars {
    color: #ffc107;
    letter-spacing: 2px;
    font-size: 14px;
}

/* --- Hero rating empty state --- */
.pxd-hero-rating--empty {
    background: rgba(1, 40, 39, 0.04);
    border: 1px dashed rgba(1, 40, 39, 0.12);
}

.pxd-hero-rating--empty .pxd-hero-rating-stars {
    filter: none;
    opacity: 0.3;
}

.pxd-hero-rating--empty .pxd-hero-rating-stars .pxd-star {
    color: var(--pixidia-gray-400, #778494);
}

.pxd-hero-rating--empty .pxd-hero-rating-count {
    color: var(--pixidia-gray-400, #778494);
    border-left: none;
    font-size: 11.5px;
    font-weight: 500;
    font-style: italic;
    padding-left: 0;
}

/* ============================================
   HERO — RESPONSIVE
   ============================================ */

/* --- Tablet (768-1200px) --- */
@media (max-width: 1200px) and (min-width: 769px) {
    .pxd-hero {
        height: 280px;
    }
    .pxd-hero-title {
        font-size: 1.3rem;
    }
    .pxd-hero-content {
        padding: 12px 20px 14px;
    }
}

/* --- Mobile (<768px) --- */
@media (max-width: 768px) {
    .pxd-hero {
        height: 260px;
        margin: 8px;
        border-radius: var(--radius-md, 12px);
    }
    .pxd-hero-content {
        padding: 10px 16px 12px;
        background: rgba(255, 255, 255, 0.76);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
    }
    .pxd-hero-title {
        font-size: 1.05rem;
        margin-bottom: 4px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .pxd-hero-meta {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 6px;
        align-items: center;
    }
    .pxd-hero-author {
        font-size: 13px;
        gap: 6px;
    }
    .pxd-avatar {
        width: 28px;
        height: 28px;
    }
    /* Hide profile badges on mobile — user request */
    .pxd-hero-profiles {
        display: none;
    }
    .pxd-hero-rating {
        padding: 3px 10px 3px 8px;
    }
    .pxd-hero-rating-score {
        font-size: 15px;
    }
    .pxd-hero-rating-stars .pxd-star {
        width: 12px;
        height: 12px;
    }
    .pxd-hero-actions-wrap {
        overflow: hidden;
    }
    .pxd-hero-actions {
        margin-top: 6px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        flex-wrap: nowrap;
    }
    .pxd-hero-actions::-webkit-scrollbar {
        display: none;
    }
    .pxd-btn-icon {
        width: 38px;
        height: 38px;
        flex-shrink: 0;
    }
    /* Tooltips hidden on touch */
    [data-tooltip]::after,
    [data-tooltip]::before {
        display: none;
    }
    /* Keep the actions unobscured while the row scrolls horizontally. */
    .pxd-hero-actions-wrap::after {
        content: none;
    }
}

/* --- Small mobile (<=480px) --- */
@media (max-width: 480px) {
    .pxd-hero {
        height: 220px;
    }
    .pxd-hero-content {
        padding: 8px 12px 10px;
        background: rgba(255, 255, 255, 0.80);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }
    .pxd-hero-title {
        font-size: 0.95rem;
        margin-bottom: 3px;
        -webkit-line-clamp: 2;
    }
    .pxd-hero-meta {
        gap: 4px;
    }
    .pxd-hero-author-name {
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 13px;
    }
    .pxd-avatar {
        width: 26px;
        height: 26px;
    }
    /* Hide rating score/count at 480px, keep stars only */
    .pxd-hero-rating-score,
    .pxd-hero-rating-count {
        display: none;
    }
    .pxd-hero-rating {
        padding: 3px 6px;
        background: transparent;
        border: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    .pxd-hero-actions {
        gap: 4px;
        margin-top: 4px;
    }
    .pxd-btn-icon {
        width: 34px;
        height: 34px;
    }
    /* Buttons become icon-only circular (text already hidden via pxd-hero-action-btn span) */
    .pxd-hero-actions-wrap::after {
        width: 28px;
    }
}

/* --- Tiny mobile (<=375px) --- */
@media (max-width: 375px) {
    .pxd-hero {
        height: 200px;
        margin: 6px;
    }
    .pxd-hero-content {
        padding: 8px 10px;
    }
    .pxd-hero-title {
        font-size: 0.95rem;
    }
    .pxd-hero-author-name {
        max-width: 100px;
    }
}

/* Scope hover-only styles for desktop */
@media (hover: hover) {
    .pxd-btn-icon:hover {
        background: rgba(255, 255, 255, 0.95);
        color: var(--pixidia-blue, #012827);
        box-shadow: 0 3px 10px rgba(15, 163, 107, 0.12);
        transform: translateY(-1px);
    }
}

/* ============================================
   HERO SSR — Additional classes for server-side rendered hero
   ============================================ */

/* Hero badges (destination + duration pills above title) */
.pxd-hero-badges {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.pxd-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.2px;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: var(--pixidia-blue, #012827);
}

.pxd-hero-badge svg,
.pxd-hero-badge i {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}

.pxd-hero-badge--destination {
    background: rgba(15, 163, 107, 0.12);
    border-color: rgba(15, 163, 107, 0.22);
    color: #0a7a4f;
}

.pxd-hero-badge--duration {
    background: rgba(25, 118, 210, 0.1);
    border-color: rgba(25, 118, 210, 0.2);
    color: #1565c0;
}

/* Hero image edit button (author only) */
.pxd-hero-image-edit {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.65);
    background: rgba(255, 255, 255, 0.8);
    color: var(--pixidia-blue, #012827);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: all 0.2s ease;
}

.pxd-hero-image-edit:hover {
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.pxd-hero-image-edit svg,
.pxd-hero-image-edit i {
    width: 15px;
    height: 15px;
}

/* Hero author avatar */
.pxd-hero-author-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid rgba(15, 163, 107, 0.3);
    object-fit: cover;
    box-shadow: 0 2px 8px rgba(15, 163, 107, 0.12);
    flex-shrink: 0;
}

/* Hero profile badges */
.pxd-hero-profile-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 8px;
    background: rgba(255, 152, 0, 0.18);
    border: 1px solid rgba(255, 152, 0, 0.35);
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    color: #e65100;
    white-space: nowrap;
    line-height: 1.3;
}

/* Hero action buttons row */
.pxd-hero-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: var(--radius-full);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid rgba(1, 40, 39, 0.1);
    background: rgba(255, 255, 255, 0.75);
    color: var(--pixidia-blue, #012827);
    transition: all 0.2s ease;
    text-decoration: none;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.pxd-hero-action-btn:hover {
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 3px 10px rgba(15, 163, 107, 0.12);
    transform: translateY(-1px);
}

.pxd-hero-action-btn svg,
.pxd-hero-action-btn i {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.pxd-hero-action-btn--pdf {
    background: rgba(32, 141, 62, 0.08);
    border-color: rgba(32, 141, 62, 0.2);
    color: #208D3E;
}

.pxd-hero-action-btn--invite {
    background: rgba(25, 118, 210, 0.08);
    border-color: rgba(25, 118, 210, 0.2);
    color: #1565c0;
}

.pxd-hero-action-btn--edit {
    background: rgba(255, 152, 0, 0.08);
    border-color: rgba(255, 152, 0, 0.2);
    color: #e65100;
}

.pxd-hero-action-btn--delete {
    background: rgba(229, 57, 53, 0.06);
    border-color: rgba(229, 57, 53, 0.15);
    color: #e53935;
}

.pxd-hero-action-btn--delete:hover {
    background: rgba(229, 57, 53, 0.12);
    box-shadow: 0 3px 10px rgba(229, 57, 53, 0.12);
}

.pxd-hero-action-btn--leave {
    background: rgba(229, 57, 53, 0.06);
    border-color: rgba(229, 57, 53, 0.15);
    color: #e53935;
}

/* Responsive: hide action button text on small mobile */
@media (max-width: 480px) {
    .pxd-hero-action-btn span {
        display: none;
    }

    .pxd-hero-action-btn {
        width: 34px;
        height: 34px;
        padding: 0;
        justify-content: center;
        border-radius: 50%;
    }
}




/* ── Badge transparence IA (EU AI Act art. 50) ── */
.pxd-ai-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em;
    line-height: 1.5;
    white-space: nowrap;
    color: #0b7a52;
    background: rgba(15, 163, 107, .10);
    border: 1px solid rgba(15, 163, 107, .35);
    vertical-align: middle;
    cursor: default;
}

.pxd-ai-badge svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

/* ============================================
   4. INFO CARD (Glassmorphism - adapted from pixidia-itinerary-infocard)
   ============================================ */

.pxd-glass {
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: var(--shadow-sm);
}

/* Infocard variables */
.pxditcrd-container {
    --pxditcrd-main: #0fa36b;
    --pxditcrd-main-hover: #0d8c5a;
    --pxditcrd-main-light: rgba(15, 163, 107, 0.08);
    --pxditcrd-main-medium: rgba(15, 163, 107, 0.15);
    --pxditcrd-dark: #012827;
    --pxditcrd-glass-bg: rgba(255, 255, 255, 0.65);
    --pxditcrd-section-glass: rgba(255, 255, 255, 0.78);
    --pxditcrd-section-glass-hover: rgba(255, 255, 255, 0.92);
    --pxditcrd-border-light: rgba(255, 255, 255, 0.65);
    --pxditcrd-shadow-sm: 0 4px 10px rgba(15, 163, 107, 0.07);
    --pxditcrd-shadow: 0 10px 30px -5px rgba(15, 163, 107, 0.12), 0 2px 8px rgba(15, 163, 107, 0.06);
    --pxditcrd-shadow-hover: 0 15px 40px -5px rgba(15, 163, 107, 0.25), 0 5px 15px rgba(15, 163, 107, 0.1);
    --pxditcrd-badge-bg: rgba(236, 171, 0, 0.12);
    --pxditcrd-badge-color: #ad8800;
    --pxditcrd-label: #778494;
    --pxditcrd-glass-blur: blur(16px);
    --transition-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --transition-smooth: cubic-bezier(0.4, 0.2, 0.2, 1);

    width: 100%;
    margin: 0;
    padding: 0 16px 8px;
    font-family: 'Urbanist', 'Inter', sans-serif;
    color: var(--pxditcrd-dark);
}

.pxditcrd-card {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.6rem;
    background: var(--pxditcrd-glass-bg);
    border-radius: 14px;
    box-shadow: var(--pxditcrd-shadow);
    padding: 0.8rem;
    backdrop-filter: var(--pxditcrd-glass-blur);
    border: 1px solid var(--pxditcrd-border-light);
    transition: box-shadow 0.4s var(--transition-smooth);
    position: relative;
    overflow: visible;
}

.pxditcrd-card:hover {
    box-shadow: var(--pxditcrd-shadow-hover);
}

.pxditcrd-section {
    background: var(--pxditcrd-section-glass);
    border-radius: 10px;
    box-shadow: var(--pxditcrd-shadow-sm);
    border: 1px solid var(--pxditcrd-border-light);
    position: relative;
    z-index: 1;
    transition: all 0.35s var(--transition-bounce);
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: pxditcrd-fadeSlideUp 0.5s ease forwards;
    opacity: 0;
}

.pxditcrd-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 100%);
    z-index: -1;
    opacity: 0.6;
    border-radius: inherit;
    transition: opacity 0.3s ease;
}

.pxditcrd-section:hover {
    transform: translateY(-3px);
    box-shadow: var(--pxditcrd-shadow-hover);
    background: var(--pxditcrd-section-glass-hover);
}

.pxditcrd-section:hover::before { opacity: 0.9; }

.pxditcrd-section:nth-child(1) { animation-delay: 0.1s; }
.pxditcrd-section:nth-child(2) { animation-delay: 0.15s; }
.pxditcrd-section:nth-child(3) { animation-delay: 0.2s; }
.pxditcrd-section:nth-child(4) { animation-delay: 0.25s; }
.pxditcrd-section:nth-child(5) { animation-delay: 0.3s; }

@keyframes pxditcrd-fadeSlideUp {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

.pxditcrd-section-inner {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.7rem;
    height: 100%;
    position: relative;
    z-index: 2;
}

/* Icon */
.pxditcrd-icon-wrapper {
    display: flex;
    align-items: center;
    margin-bottom: 0.1rem;
}

.pxditcrd-icon {
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, var(--pxditcrd-main) 25%, #38c19c 100%);
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.9), 0 4px 8px rgba(15,163,107,0.2);
    font-size: 14px;
    color: #fff;
    transition: all 0.3s var(--transition-bounce);
}

.pxditcrd-section:hover .pxditcrd-icon {
    transform: scale(1.1) rotate(-5deg);
    box-shadow: 0 0 0 2px rgba(255,255,255,1), 0 6px 12px rgba(15,163,107,0.3);
}

.pxditcrd-vis-public { background: linear-gradient(135deg, var(--pxditcrd-main) 25%, #38c19c 100%); }
.pxditcrd-vis-prive { background: linear-gradient(135deg, #333 25%, #666 100%); }
.pxditcrd-vis-friends { background: linear-gradient(135deg, #f4c542 25%, #fba823 100%); }
.pxditcrd-vis-some { background: linear-gradient(135deg, #5b9df9 25%, #6c67e0 100%); }

/* Content */
.pxditcrd-content {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    flex-grow: 1;
}

.pxditcrd-label {
    color: var(--pxditcrd-label);
    text-transform: uppercase;
    font-weight: 600;
    font-size: 0.6rem;
    letter-spacing: 0.8px;
    opacity: 0.84;
    transition: all 0.3s ease;
}

.pxditcrd-section:hover .pxditcrd-label {
    color: var(--pxditcrd-main-hover);
    opacity: 1;
}

/* Location flow */
.pxditcrd-location-flow {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex-wrap: wrap;
}

.pxditcrd-departure-name,
.pxditcrd-destination-name {
    color: var(--pxditcrd-main);
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1.2;
}

.pxditcrd-arrow {
    color: var(--pxditcrd-label);
    font-size: 0.65rem;
}

/* Dates */
.pxditcrd-date-range {
    color: var(--pxditcrd-dark);
    font-size: 0.75rem;
    font-weight: 700;
    background: var(--pxditcrd-main-light);
    border-radius: 6px;
    padding: 0.3rem 0.5rem;
    display: inline-block;
    border: 1px solid var(--pxditcrd-main-medium);
    transition: all 0.3s ease;
}

.pxditcrd-section:hover .pxditcrd-date-range {
    background: var(--pxditcrd-main-medium);
    transform: translateY(-2px);
}

.pxditcrd-duration {
    font-size: 0.65rem;
    color: var(--pxditcrd-badge-color);
    background: var(--pxditcrd-badge-bg);
    border-radius: 5px;
    padding: 0.2rem 0.5rem;
    font-weight: 600;
    margin-top: 0.25rem;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    border: 1px solid rgba(236, 171, 0, 0.15);
    transition: all 0.3s ease;
}

.pxditcrd-duration svg { width: 11px; height: 11px; opacity: 0.7; }

.pxditcrd-section:hover .pxditcrd-duration {
    transform: translateY(-2px);
    background: rgba(236, 171, 0, 0.18);
}

/* Budget */
.pxditcrd-budget-total {
    color: var(--pxditcrd-main);
    font-size: 0.85rem;
    font-weight: 800;
    background: var(--pxditcrd-main-light);
    border-radius: 6px;
    padding: 0.3rem 0.5rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: 1px solid var(--pxditcrd-main-medium);
    transition: all 0.3s ease;
}

.pxditcrd-budget-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background: var(--pxditcrd-main);
    border-radius: 50%;
    color: white;
    font-size: 0.55rem;
    transition: all 0.3s ease;
}

.pxditcrd-section:hover .pxditcrd-budget-total {
    background: var(--pxditcrd-main-medium);
    transform: translateY(-2px);
}

.pxditcrd-section:hover .pxditcrd-budget-icon {
    transform: rotate(15deg) scale(1.1);
}

.pxditcrd-budget-per-day {
    color: var(--pxditcrd-label);
    font-size: 0.65rem;
    margin-top: 0.2rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    opacity: 0.9;
}

.pxditcrd-budget-per-day svg {
    width: 10px;
    height: 10px;
    color: var(--pxditcrd-main);
    opacity: 0.7;
}

.pxditcrd-section:hover .pxditcrd-budget-per-day {
    opacity: 1;
}

/* Visibility */
.pxditcrd-visibility-badge { margin-top: 0.15rem; }

.pxditcrd-visibility-text {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: var(--pxditcrd-badge-bg);
    color: var(--pxditcrd-badge-color);
    font-size: 0.65rem;
    font-weight: 600;
    padding: 0.3rem 0.5rem;
    border-radius: 14px;
    border: 1px solid rgba(236, 171, 0, 0.15);
    transition: all 0.3s var(--transition-bounce);
}

.pxditcrd-section:hover .pxditcrd-visibility-text {
    transform: translateY(-2px) scale(1.03);
    background: rgba(236, 171, 0, 0.18);
}

/* Travelers */
.pxditcrd-travelers-label {
    color: var(--pxditcrd-label);
    text-transform: uppercase;
    font-weight: 600;
    font-size: 0.6rem;
    letter-spacing: 0.8px;
    margin-bottom: 0.3rem;
    opacity: 0.84;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    transition: all 0.3s ease;
}

.pxditcrd-travelers-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--pxditcrd-main-light);
    color: var(--pxditcrd-main);
    width: 17px;
    height: 17px;
    border-radius: 50%;
    font-size: 0.65rem;
    font-weight: 700;
    transition: all 0.3s ease;
}

.pxditcrd-section:hover .pxditcrd-travelers-label {
    color: var(--pxditcrd-main-hover);
    opacity: 1;
}

.pxditcrd-section:hover .pxditcrd-travelers-number {
    background: var(--pxditcrd-main);
    color: white;
    transform: scale(1.1);
}

.pxditcrd-travelers-wrapper { margin-top: 0.1rem; }

.pxditcrd-travelers-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-left: 0.5rem;
}

.pxditcrd-traveler {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgba(15, 163, 107, 0.1), 0 2px 6px rgba(15, 163, 107, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: -0.5rem;
    overflow: visible;
    position: relative;
    transition: all 0.4s var(--transition-bounce);
    z-index: 1;
    cursor: pointer;
    text-decoration: none;
}

.pxditcrd-traveler:hover {
    box-shadow: 0 0 0 2px var(--pxditcrd-main), 0 4px 12px rgba(15, 163, 107, 0.25);
    z-index: 3;
    transform: scale(1.15) translateY(-3px);
}

.pxditcrd-traveler img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

.pxditcrd-traveler-tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: linear-gradient(135deg, #0fa36b 25%, #38c19c 100%);
    color: white;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 10.5px;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(15, 163, 107, 0.25);
    opacity: 0;
    pointer-events: none;
    white-space: nowrap;
    z-index: 10;
    transition: opacity 0.2s ease, transform 0.2s ease;
    letter-spacing: 0.01em;
}

.pxditcrd-traveler-tooltip::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 6px;
    height: 6px;
    background: #38c19c;
}

.pxditcrd-traveler:hover .pxditcrd-traveler-tooltip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Allow tooltip to escape section + card overflow */
.pxditcrd-section:has(.pxditcrd-travelers-wrapper) {
    overflow: visible;
}
.pxditcrd-section:has(.pxditcrd-travelers-wrapper)::before {
    border-radius: inherit;
}

/* --- Add traveler "+" button --- */
.pxditcrd-add-traveler {
    background: rgba(15, 163, 107, 0.08);
    border: 2px dashed rgba(15, 163, 107, 0.3);
    box-shadow: none;
}
.pxditcrd-add-traveler:hover {
    background: rgba(15, 163, 107, 0.15);
    border-color: #0fa36b;
    box-shadow: 0 0 0 2px rgba(15, 163, 107, 0.2);
}

/* ============================================
   INFOCARD — RESPONSIVE
   ============================================ */

/* --- Tablet (768-1200px) --- */
@media (max-width: 1200px) and (min-width: 769px) {
    .pxditcrd-card {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5rem;
        padding: 0.7rem;
    }
    .pxditcrd-section-inner {
        padding: 0.6rem;
    }
}

/* --- Mobile: every trip detail stays visible without horizontal scrolling. --- */
@media (max-width: 768px) {
    .pxditcrd-container {
        padding: 0 8px 6px;
    }
    .pxditcrd-container .pxditcrd-card {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
        padding: 6px;
        border-radius: 16px;
        overflow: visible;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }
    .pxditcrd-container .pxditcrd-section {
        width: auto;
        min-width: 0;
        border-radius: 12px;
    }
    .pxditcrd-container .pxditcrd-section:first-child {
        grid-column: 1 / -1;
    }
    .pxditcrd-container .pxditcrd-section-inner {
        padding: 8px;
        gap: 0;
        align-items: stretch;
        text-align: left;
    }
    /* Keep the icon beside the label rather than using an extra row. */
    .pxditcrd-container .pxditcrd-icon-wrapper {
        position: absolute;
        top: 7px;
        right: 8px;
        margin: 0;
    }
    .pxditcrd-container .pxditcrd-icon {
        width: 20px;
        height: 20px;
        border-radius: 8px;
        box-shadow: 0 0 0 1px rgba(255,255,255,.9), 0 2px 5px rgba(15,163,107,.12);
    }
    .pxditcrd-container .pxditcrd-icon :is(svg, i) {
        width: 13px;
        height: 13px;
    }
    .pxditcrd-container .pxditcrd-content {
        min-width: 0;
        gap: 4px;
        align-items: stretch;
    }
    .pxditcrd-container :is(.pxditcrd-label, .pxditcrd-travelers-label) {
        display: flex;
        align-items: center;
        min-height: 20px;
        padding-right: 24px;
        margin: 0;
        font-size: 10px;
        line-height: 1.2;
        letter-spacing: .7px;
    }
    .pxditcrd-container .pxditcrd-section:first-child .pxditcrd-content {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 4px 8px;
    }
    .pxditcrd-container .pxditcrd-section:first-child .pxditcrd-label {
        grid-column: 1 / -1;
    }
    .pxditcrd-container .pxditcrd-location-flow {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 6px;
        align-items: center;
    }
    .pxditcrd-container :is(.pxditcrd-departure-name, .pxditcrd-destination-name) {
        min-width: 0;
        font-size: 14px;
        line-height: 1.35;
        overflow-wrap: anywhere;
    }
    .pxditcrd-container .pxditcrd-arrow {
        display: inline-flex;
        flex-shrink: 0;
    }
    .pxditcrd-container .pxditcrd-arrow svg {
        width: 15px;
        height: 15px;
    }
    .pxditcrd-container :is(.pxditcrd-date-range, .pxditcrd-budget-total) {
        padding: 4px 5px;
        min-height: 32px;
        font-size: 13px;
        line-height: 1.4;
        white-space: normal;
        overflow-wrap: anywhere;
    }
    .pxditcrd-container .pxditcrd-duration {
        align-self: flex-start;
        margin-top: 0;
        padding: 2px 5px;
        font-size: 11px;
        line-height: 1.35;
    }
    .pxditcrd-container .pxditcrd-budget-per-day {
        margin-top: 0;
        font-size: 11px;
        line-height: 1.35;
        overflow-wrap: anywhere;
    }
    .pxditcrd-container .pxditcrd-visibility-badge {
        margin-top: 0;
    }
    .pxditcrd-container .pxditcrd-visibility-text {
        max-width: 100%;
        min-height: 32px;
        padding: 4px 5px;
        font-size: 12px;
        line-height: 1.35;
        overflow-wrap: anywhere;
    }
    .pxditcrd-container .pxditcrd-visibility-text svg {
        width: 13px;
        height: 13px;
        flex-shrink: 0;
    }
    .pxditcrd-container .pxditcrd-travelers-number {
        min-width: 19px;
        width: auto;
        height: 19px;
        padding: 0 4px;
        font-size: 11px;
        letter-spacing: normal;
        flex-shrink: 0;
    }
    .pxditcrd-container .pxditcrd-travelers-wrapper {
        margin-top: 0;
    }
    .pxditcrd-container .pxditcrd-travelers-list {
        flex-wrap: wrap;
        gap: 5px;
        margin-left: 0;
    }
    .pxditcrd-container .pxditcrd-traveler {
        width: 32px;
        height: 32px;
        flex: 0 0 32px;
        margin-left: 0;
        position: static;
    }
    .pxditcrd-container .pxditcrd-traveler:hover {
        transform: none;
    }
    /* Anchor names to the whole travelers row: long names cannot extend
       beyond the tile when the hovered avatar is at its right edge. */
    .pxditcrd-container .pxditcrd-traveler-tooltip {
        left: 8px;
        right: 8px;
        transform: translateY(4px);
        white-space: normal;
        overflow-wrap: anywhere;
        text-align: center;
    }
    .pxditcrd-container .pxditcrd-traveler:is(:hover, :focus-visible) .pxditcrd-traveler-tooltip {
        opacity: 1;
        transform: translateY(0);
    }
    .pxditcrd-container .pxditcrd-add-traveler {
        padding: 0;
        min-height: 32px;
    }
    .pxditcrd-container .pxdie-badges {
        margin-top: 0;
    }
    .pxditcrd-container .pxdie-badges .pxdie-badge {
        min-height: 32px;
    }
    .pxditcrd-container .pxditcrd-section:hover {
        transform: none;
    }
    .pxditcrd-container .pxditcrd-traveler:focus-visible {
        outline: 2px solid #1E9B52;
        outline-offset: 2px;
    }
}

/* Scope hover effects for desktop only */
@media (hover: hover) {
    .pxditcrd-section:hover {
        transform: translateY(-3px);
        box-shadow: var(--pxditcrd-shadow-hover);
        background: var(--pxditcrd-section-glass-hover);
    }
}

/* ============================================
   INFOCARD SSR — New flat item structure
   Used in production infocard.php SSR rendering
   ============================================ */

.pxditcrd-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 0.7rem;
    background: var(--pxditcrd-section-glass, rgba(255, 255, 255, 0.78));
    border-radius: 10px;
    box-shadow: var(--pxditcrd-shadow-sm, 0 4px 10px rgba(15, 163, 107, 0.07));
    border: 1px solid var(--pxditcrd-border-light, rgba(255, 255, 255, 0.65));
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    overflow: hidden;
}

.pxditcrd-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--pxditcrd-shadow-hover, 0 15px 40px -5px rgba(15, 163, 107, 0.25), 0 5px 15px rgba(15, 163, 107, 0.1));
    background: var(--pxditcrd-section-glass-hover, rgba(255, 255, 255, 0.92));
}

.pxditcrd-item .pxditcrd-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, var(--pxditcrd-main, #0fa36b) 25%, #38c19c 100%);
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.9), 0 4px 8px rgba(15,163,107,0.2);
    font-size: 14px;
    color: #fff;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.pxditcrd-item:hover .pxditcrd-icon {
    transform: scale(1.1) rotate(-5deg);
    box-shadow: 0 0 0 2px rgba(255,255,255,1), 0 6px 12px rgba(15,163,107,0.3);
}

.pxditcrd-item .pxditcrd-icon svg,
.pxditcrd-item .pxditcrd-icon i {
    width: 15px;
    height: 15px;
}

.pxditcrd-data {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.pxditcrd-value {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--pxditcrd-dark, #012827);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pxditcrd-sub {
    font-size: 0.65rem;
    color: var(--pxditcrd-label, #778494);
    font-weight: 500;
}

/* Avatars row (participants) */
.pxditcrd-avatars {
    display: flex;
    align-items: center;
    gap: -4px;
    margin-top: 2px;
}

.pxditcrd-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid white;
    object-fit: cover;
    margin-left: -4px;
    box-shadow: 0 0 0 1px rgba(15, 163, 107, 0.1);
}

.pxditcrd-avatar:first-child {
    margin-left: 0;
}

.pxditcrd-avatar--more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--pxditcrd-main-light, rgba(15, 163, 107, 0.08));
    color: var(--pxditcrd-main, #0fa36b);
    font-size: 9px;
    font-weight: 700;
    border: 2px solid white;
    margin-left: -4px;
}

/* ============================================
   INFOCARD SSR — RESPONSIVE
   ============================================ */

@media (max-width: 1200px) and (min-width: 769px) {
    .pxditcrd-item {
        padding: 0.6rem;
        gap: 7px;
    }
}

@media (max-width: 768px) {
    .pxditcrd-item {
        padding: 0.5rem;
        gap: 6px;
    }

    .pxditcrd-item .pxditcrd-icon {
        width: 26px;
        height: 26px;
        border-radius: 7px;
        font-size: 12px;
    }

    .pxditcrd-value {
        font-size: 0.72rem;
    }

    .pxditcrd-item:hover {
        transform: none;
    }
}

@media (max-width: 480px) {
    .pxditcrd-item .pxditcrd-icon {
        width: 24px;
        height: 24px;
    }

    .pxditcrd-value {
        font-size: 0.68rem;
    }
}

/* Disable hover effects on touch */
@media (hover: none) {
    .pxditcrd-item:hover {
        transform: none;
        box-shadow: var(--pxditcrd-shadow-sm);
        background: var(--pxditcrd-section-glass);
    }
}



/* Trip diagnostics: a separate editor row after each Infocard render. */
.pxditcrd-card > .pxditcrd-trip-status {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px 12px;
    padding: 6px 10px;
    border: 1px solid rgba(236,171,0,.15);
    border-radius: 12px;
    background: var(--pxditcrd-badge-bg);
}
.pxditcrd-trip-status-label {
    color: var(--pxditcrd-dark);
    font-size: 12px;
    font-weight: 700;
}
.pxditcrd-trip-status .pxdie-badges {
    margin-top: 0;
}
.pxditcrd-trip-status .pxdie-badges .pxdie-badge--review {
    min-height: 36px;
    padding: 5px 10px;
    font-size: 12px;
}
@media (max-width: 768px) {
    .pxditcrd-trip-status .pxdie-badges .pxdie-badge--review {
        min-height: 40px;
    }
}

/* ============================================
   7. PROGRAMME — CALENDRIER & DATE PICKER
   ============================================ */

/* --- Programme glass variables --- */
.pxd-section--programme {
    --prog-glass-bg: rgba(255, 255, 255, 0.65);
    --prog-section-glass: rgba(255, 255, 255, 0.78);
    --prog-section-glass-hover: rgba(255, 255, 255, 0.92);
    --prog-border: rgba(255, 255, 255, 0.65);
    --prog-shadow: 0 10px 30px -5px rgba(15, 163, 107, 0.10), 0 2px 8px rgba(15, 163, 107, 0.05);
    --prog-shadow-hover: 0 15px 40px -5px rgba(15, 163, 107, 0.20), 0 5px 15px rgba(15, 163, 107, 0.08);
    --prog-blur: blur(16px);
}

/* 2026-09-21 — cette regle masquait l'en-tete standard du Programme :
   « pas d'accordeon » etait vrai tant que Programme avait son propre en-tete
   (.pxd-programme-header) et echappait a initAccordions(). Depuis le 20/09 il
   EST un volet comme les autres et porte un vrai .pxd-section-header : la regle
   le faisait disparaitre -- icone, titre et chevron compris -- et la section
   s'ouvrait sur sa timeline, sans rien pour la replier.
   La regle qui posait display:none sur cet en-tete a donc ete supprimee. */

/* 2026-09-21 — cette regle masquait l'en-tete standard du Programme :
   « pas d'accordeon » etait vrai tant que Programme avait son propre en-tete
   (.pxd-programme-header) et echappait a initAccordions(). Depuis le 20/09 il
   EST un volet comme les autres et porte un vrai .pxd-section-header : la regle
   le faisait disparaitre -- icone, titre et chevron compris -- et la section
   s'ouvrait sur sa timeline, sans rien pour la replier.
   La regle qui posait display:none sur cet en-tete a donc ete supprimee. */

/* 2026-09-21 — le fond « glass » propre au Programme a ete retire.
   Il etait plus opaque, plus haut et plus large que celui des autres volets
   (margin 12px / padding 14px / radius 14px, contre 8px / 10px replie / 16px),
   ce qui le faisait detonner dans la pile des sections une fois devenu un volet
   ordinaire. `.pxd-section` de 26-section-headers.css lui donne desormais
   exactement le meme fond qu'aux autres. Regles supprimees : `.pxd-programme-glass`,
   son `::before` de degrade, son `> *` de z-index et l'override de geometrie du
   20/09 -- ainsi que leurs variantes responsive plus bas. */

/* Volet ferme : on ne garde que « Vue globale ». Le selecteur de date ouvre un
   calendrier qui piloterait une timeline masquee -- il n'a pas de sens ici. */
.pxd-section--programme.pxd-section--collapsed .pxd-date-picker {
    display: none;
}

/* Complement au .pxd-section-header commun : seul le retour a la ligne des
   commandes (selecteur de date, « Vue globale ») est propre au Programme. Le
   padding d'origine ajoutait 12px sous l'en-tete et rendait le volet replie plus
   haut que les autres. */
.pxd-programme-header {
    flex-wrap: wrap;
}

.pxd-programme-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.pxd-programme-header-left h2 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--pixidia-blue);
}

/* --- Date Picker Button --- */
.pxd-date-picker {
    position: relative;
}

.pxd-date-picker-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: rgba(15, 163, 107, 0.08);
    border: 1px solid rgba(15, 163, 107, 0.15);
    border-radius: var(--radius-full);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--pixidia-blue);
    cursor: pointer;
    transition: all 0.3s ease;
}

.pxd-date-picker-btn:hover {
    background: rgba(15, 163, 107, 0.15);
    border-color: rgba(15, 163, 107, 0.3);
    box-shadow: 0 2px 8px rgba(15, 163, 107, 0.12);
}

.pxd-date-picker-btn svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.pxd-date-picker-chevron {
    transition: transform 0.25s ease;
}

.pxd-date-picker.open .pxd-date-picker-chevron {
    transform: rotate(180deg);
}

/* --- Calendar Popup (glassmorphism, portaled to body) --- */
.pxd-calendar-popup {
    position: fixed;
    width: 320px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(1, 40, 39, 0.10);
    border-radius: var(--radius-lg);
    box-shadow:
        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);
    z-index: 10000;
    display: none;
}

.pxd-calendar-popup.show {
    display: block;
    animation: pxd-dropIn 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes pxd-dropIn {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Calendar header (nav arrows + month title) */
.pxd-calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.pxd-calendar-nav {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: none;
    background: var(--pixidia-gray-50, #f5f7f7);
    cursor: pointer;
    transition: all 0.2s var(--ease-smooth);
    color: var(--pixidia-blue);
}

.pxd-calendar-nav:hover {
    background: rgba(32, 201, 184, 0.12);
    color: var(--pixidia-turquoise);
}

.pxd-calendar-nav:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.pxd-calendar-nav svg {
    width: 16px;
    height: 16px;
}

.pxd-calendar-title {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--pixidia-blue);
}

/* Weekday headers */
.pxd-calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    margin-bottom: 8px;
}

.pxd-calendar-weekdays span {
    text-align: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--pixidia-gray-400, #8a9c9c);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 4px 0;
}

/* Days grid */
.pxd-calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
}

.pxd-cal-day {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s var(--ease-smooth);
    background: transparent;
    color: var(--pixidia-text);
    border: none;
    font-family: inherit;
}

.pxd-cal-day:hover:not(:disabled):not(.selected) {
    background: var(--pixidia-gray-100, #eef2f2);
}

/* Date dans la plage du séjour (sélectionnable) */
.pxd-cal-day.in-range {
    background: rgba(32, 201, 184, 0.08);
    font-weight: 600;
}

.pxd-cal-day.in-range:hover:not(.selected) {
    background: rgba(32, 201, 184, 0.18);
}

/* Date sélectionnée */
.pxd-cal-day.selected {
    background: linear-gradient(135deg, #208D3E, #20c9b8);
    color: white;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(32, 141, 62, 0.3);
}

/* Début et fin de plage : coins arrondis accentués */
.pxd-cal-day.range-start {
    border-radius: 10px 4px 4px 10px;
}

.pxd-cal-day.range-end {
    border-radius: 4px 10px 10px 4px;
}

/* Jours du mois précédent/suivant */
.pxd-cal-day.other-month {
    color: var(--pixidia-gray-200, #dce4e4);
}

/* Date hors séjour (non-sélectionnable) */
.pxd-cal-day:disabled {
    color: var(--pixidia-gray-300, #b8c5c5);
    cursor: default;
}

.pxd-cal-day:disabled:hover {
    background: transparent;
}

/* --- Day Info Bar (glass section like pxditcrd) --- */
.pxd-programme-day-info {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    padding: 12px 16px;
    background: var(--prog-section-glass);
    border-radius: 10px;
    border: 1px solid var(--prog-border);
    box-shadow: 0 4px 10px rgba(15, 163, 107, 0.06);
    position: relative;
    overflow: hidden;
    transition: all 0.35s ease;
}

.pxd-programme-day-info::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
    opacity: 0.6;
}

.pxd-programme-day-info > * {
    position: relative;
    z-index: 1;
}

.pxd-programme-day-info:hover {
    background: var(--prog-section-glass-hover);
    box-shadow: var(--prog-shadow-hover);
}

.pxd-day-info-badge {
    padding: 5px 12px;
    background: linear-gradient(135deg, #0fa36b 25%, #38c19c 100%);
    color: white;
    border-radius: var(--radius-full);
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
    letter-spacing: 0.02em;
    box-shadow: 0 2px 6px rgba(15, 163, 107, 0.25);
}

.pxd-day-info-city {
    font-weight: 700;
    color: #0fa36b;
    font-size: 14px;
}

.pxd-day-info-date {
    color: #778494;
    font-size: 12.5px;
    margin-left: auto;
    white-space: nowrap;
}

/* --- Bouton Vue Globale --- */
.pxd-global-view-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    margin-left: auto;
    background: var(--prog-section-glass);
    border: 1px solid var(--prog-border);
    border-radius: var(--radius-full);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    color: var(--pixidia-gray-500, #5d7070);
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(15, 163, 107, 0.05);
}

.pxd-global-view-btn svg {
    width: 15px;
    height: 15px;
}

.pxd-global-view-btn:hover {
    background: var(--prog-section-glass-hover);
    border-color: rgba(15, 163, 107, 0.25);
    color: var(--pixidia-blue);
    box-shadow: 0 4px 12px rgba(15, 163, 107, 0.12);
}

.pxd-global-view-btn.active {
    background: linear-gradient(135deg, #0fa36b 25%, #38c19c 100%);
    color: white;
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(15, 163, 107, 0.25);
}

/* ============================================
   PROGRAMME/CALENDAR — RESPONSIVE
   ============================================ */

/* --- Mobile (<768px) --- */
@media (max-width: 768px) {
    .pxd-programme-header {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 2px 2px 10px;
    }
    .pxd-programme-header-left h2 {
        font-size: 1rem;
    }
    .pxd-date-picker-btn {
        width: 100%;
        justify-content: center;
        padding: 10px 14px;
    }
    .pxd-global-view-btn {
        margin-left: 0;
        width: 100%;
        justify-content: center;
        order: 3;
    }

    /* Calendar popup becomes bottom-sheet */
    .pxd-calendar-popup {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        top: auto !important; /* override JS positioning on mobile */
        width: 100%;
        max-width: 100%;
        border-radius: 20px 20px 0 0;
        padding: 24px 16px 20px;
        box-shadow:
            0 -8px 32px rgba(1, 40, 39, 0.18),
            0 0 0 1px rgba(1, 40, 39, 0.05);
        max-height: 72vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    /* Drag handle */
    .pxd-calendar-popup::before {
        content: '';
        position: absolute;
        top: 10px;
        left: 50%;
        transform: translateX(-50%);
        width: 36px;
        height: 4px;
        border-radius: 2px;
        background: rgba(1, 40, 39, 0.18);
    }
    /* Backdrop behind bottom-sheet */
    .pxd-calendar-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(1, 40, 39, 0.35);
        z-index: 9999;
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
    }
    .pxd-calendar-backdrop.show {
        display: block;
        animation: pxd-backdropIn 0.25s ease;
    }
    @keyframes pxd-backdropIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }
    .pxd-calendar-popup.show {
        animation: pxd-slideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 10001;
    }

    /* Day info bar */
    .pxd-programme-day-info {
        gap: 8px;
        padding: 10px 12px;
    }
    .pxd-day-info-badge {
        font-size: 10.5px;
        padding: 4px 10px;
    }
    .pxd-day-info-city {
        font-size: 13px;
    }
    .pxd-day-info-date {
        font-size: 11.5px;
    }
}

@keyframes pxd-slideUp {
    from { opacity: 0; transform: translateY(100%); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- Small mobile (<=480px) --- */
@media (max-width: 480px) {
    .pxd-programme-header-left h2 {
        font-size: 0.95rem;
    }

    /* Day info stacks vertically */
    .pxd-programme-day-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        padding: 10px 12px;
    }
    .pxd-day-info-date {
        margin-left: 0;
    }
    .pxd-day-info-badge {
        font-size: 10px;
        padding: 3px 8px;
    }
    .pxd-day-info-city {
        font-size: 12.5px;
    }

    /* Calendar popup compact */
    .pxd-calendar-popup {
        padding: 16px 12px;
    }
    .pxd-cal-day {
        width: 34px;
        height: 34px;
        font-size: 0.8rem;
        border-radius: 8px;
    }
    .pxd-calendar-nav {
        width: 36px;
        height: 36px;
    }
}


/* ============================================
   8. TIMELINE VERTICALE
   ============================================ */

/* --- Timeline container --- */
.pxd-timeline {
    padding: 4px 0 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* --- Timeline item (row) --- */
.pxd-tl-item {
    display: flex;
    gap: 0;
    cursor: pointer;
    animation: pxd-tl-fadeIn 0.5s ease both;
    opacity: 0;
}

@keyframes pxd-tl-fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* --- Gutter: time + node + vertical line --- */
.pxd-tl-gutter {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 64px;
    flex-shrink: 0;
    position: relative;
}

.pxd-tl-time {
    font-size: 11.5px;
    font-weight: 700;
    color: #778494;
    letter-spacing: 0.02em;
    margin-bottom: 5px;
    font-variant-numeric: tabular-nums;
}

/* Circular icon node */
.pxd-tl-node {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--tl-color) 25%, color-mix(in srgb, var(--tl-color) 70%, #38c19c) 100%);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    z-index: 2;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 1), 0 2px 8px color-mix(in srgb, var(--tl-color) 30%, transparent);
    transition: all 0.35s ease;
}

.pxd-tl-item:hover .pxd-tl-node {
    transform: scale(1.15);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 1), 0 4px 14px color-mix(in srgb, var(--tl-color) 40%, transparent);
}

.pxd-tl-node svg {
    width: 14px;
    height: 14px;
    color: white;
    stroke-width: 2.2;
}

/* Vertical connector line */
.pxd-tl-line {
    flex: 1;
    width: 2px;
    background: linear-gradient(to bottom, color-mix(in srgb, var(--tl-color) 40%, transparent), color-mix(in srgb, var(--tl-color) 10%, transparent));
    border-radius: 1px;
    min-height: 12px;
}

.pxd-tl-item--last .pxd-tl-line {
    display: none;
}

/* --- Card (right side, glass section) --- */
.pxd-tl-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px 14px;
    margin: 0 0 0 0;
    background: var(--prog-section-glass);
    border: 1px solid var(--prog-border);
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(15, 163, 107, 0.05);
    transition: all 0.35s ease;
    position: relative;
    overflow: hidden;
}

.pxd-tl-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

.pxd-tl-item:hover .pxd-tl-card {
    background: var(--prog-section-glass-hover);
    box-shadow: var(--prog-shadow-hover);
    border-color: rgba(15, 163, 107, 0.2);
}

.pxd-tl-item:hover .pxd-tl-card::before {
    opacity: 0.9;
}

.pxd-tl-card-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--pixidia-blue);
    line-height: 1.3;
    position: relative;
    z-index: 1;
}

.pxd-tl-card-cat {
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    position: relative;
    z-index: 1;
}

/* --- Empty state --- */
.pxd-timeline-empty {
    text-align: center;
    padding: 32px 16px;
    color: #778494;
    font-size: 13px;
}

/* --- Timeline card subtitle --- */
.pxd-tl-card-subtitle {
    font-size: 11px;
    font-weight: 500;
    color: #778494;
    line-height: 1.3;
    position: relative;
    z-index: 1;
}

/* --- Timeline muted variant (night / in-use) --- */
.pxd-tl-item--muted .pxd-tl-node {
    width: 24px;
    height: 24px;
    opacity: 0.55;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8);
}
.pxd-tl-item--muted .pxd-tl-node svg {
    width: 11px;
    height: 11px;
}
.pxd-tl-item--muted .pxd-tl-card {
    opacity: 0.6;
    background: rgba(255, 255, 255, 0.25);
    border-style: dashed;
}
.pxd-tl-item--muted .pxd-tl-time {
    opacity: 0.5;
}

/* --- Timeline layover variant --- */
.pxd-tl-item--layover .pxd-tl-node {
    background: linear-gradient(135deg, #ff9800 25%, #ffb74d 100%);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 1), 0 2px 8px rgba(255, 152, 0, 0.25);
}
.pxd-tl-item--layover .pxd-tl-card {
    border-left: 3px dashed rgba(255, 152, 0, 0.3);
}

/* ============================================
   TIMELINE — RESPONSIVE
   ============================================ */

/* --- Mobile (<768px) --- */
@media (max-width: 768px) {
    .pxd-tl-gutter {
        width: 48px;
    }
    .pxd-tl-node {
        width: 24px;
        height: 24px;
    }
    .pxd-tl-node svg {
        width: 12px;
        height: 12px;
    }
    /* Hide time label and move it inside the card as a subtle tag */
    .pxd-tl-time {
        display: none;
    }
    .pxd-tl-card {
        padding: 8px 12px;
    }
    .pxd-tl-card::after {
        content: attr(data-time);
        display: inline-block;
        font-size: 10px;
        font-weight: 600;
        color: #778494;
        background: rgba(10, 61, 58, 0.04);
        padding: 2px 6px;
        border-radius: 4px;
        margin-top: 4px;
        font-variant-numeric: tabular-nums;
    }
    .pxd-tl-card-title {
        font-size: 14px;
    }
    .pxd-tl-card-cat {
        font-size: 10px;
    }
    .pxd-tl-card-subtitle {
        font-size: 11px;
    }
    .pxd-tl-item--muted .pxd-tl-node {
        width: 20px;
        height: 20px;
    }
    .pxd-tl-item--muted .pxd-tl-node svg {
        width: 9px;
        height: 9px;
    }
}

/* --- Small mobile (<=480px) --- */
@media (max-width: 480px) {
    .pxd-tl-gutter {
        width: 40px;
    }
    .pxd-tl-card {
        padding: 7px 10px;
    }
    .pxd-tl-node {
        width: 22px;
        height: 22px;
    }
    .pxd-tl-node svg {
        width: 11px;
        height: 11px;
    }
    .pxd-tl-card-title {
        font-size: 13px;
    }
}


/* ============================================
   9. SECTION HEADERS
   ============================================ */

.pxd-section {
    padding: 24px 16px 16px;
    transition: padding var(--duration-normal) var(--ease-smooth),
                background 0.4s ease,
                border-color 0.4s ease,
                box-shadow 0.4s ease,
                margin 0.3s ease,
                transform 0.25s ease;
}

/* Glass container — toutes les sections de contenu, Programme compris depuis le
   2026-09-21 : il avait son propre fond (.pxd-programme-glass), plus opaque et
   plus haut que les autres, ce qui le faisait detonner dans la pile une fois
   devenu un volet ordinaire. */
.pxd-section {
    margin: 0 8px 10px;
    background: rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(1, 40, 39, 0.04),
                inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.pxd-section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    cursor: pointer;
    user-select: none;
    transition: margin-bottom var(--duration-normal) var(--ease-smooth);
}

.pxd-section-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.pxd-section-icon--logement {
    background: var(--pxd-color-logement);
}

.pxd-section-icon--transport {
    background: var(--pxd-color-transport);
}

.pxd-section-icon--restauration {
    background: var(--pxd-color-restauration);
}

.pxd-section-icon--activite {
    background: var(--pxd-color-activite);
}

.pxd-section-icon--location {
    background: var(--pxd-color-location);
}

.pxd-section-icon--budget {
    background: var(--pixidia-green);
}

.pxd-section-icon--reservation {
    background: var(--pixidia-turquoise);
}

.pxd-section-icon--avis {
    background: #ffc107;
}

.pxd-section-icon--comments {
    background: linear-gradient(135deg, #0A3D3A 25%, #0fa36b 100%);
}

.pxd-section-icon svg {
    width: 20px;
    height: 20px;
}

.pxd-section-header h2 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--pixidia-blue);
    flex: 1;
    margin: 0;
}

.pxd-section-count {
    padding: 4px 12px;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.4);
    font-size: 13px;
    font-weight: 600;
    color: var(--pixidia-text-muted);
}

.pxd-section-header-sub {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--pixidia-text-muted);
    white-space: nowrap;
}

.pxd-section-header-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 7px 14px;
    margin-left: auto;
    background: linear-gradient(135deg, #0fa36b 25%, #38c19c 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    box-shadow: 0 3px 8px rgba(15, 163, 107, 0.25);
    flex-shrink: 0;
}

.pxd-section-header-btn svg {
    width: 14px;
    height: 14px;
}

.pxd-section-header-btn:hover {
    box-shadow: 0 6px 16px rgba(15, 163, 107, 0.35);
    transform: translateY(-1px);
}

/* --- Accordion behavior --- */

.pxd-section--collapsed {
    padding: 10px 16px 10px;
    margin-bottom: 6px;
}

.pxd-section--collapsed:hover {
    background: rgba(255, 255, 255, 0.55);
    box-shadow: 0 4px 20px rgba(1, 40, 39, 0.07),
                inset 0 1px 0 rgba(255, 255, 255, 0.6);
    transform: translateY(-1px);
}

.pxd-section--collapsed .pxd-section-header {
    margin-bottom: 0;
}

.pxd-section--collapsed .pxd-section-header-btn {
    display: none;
}

.pxd-section-header:hover .pxd-section-chevron {
    color: var(--pixidia-green);
}

.pxd-section-chevron {
    width: 20px;
    height: 20px;
    color: var(--pixidia-gray-400);
    transition: transform var(--duration-normal) var(--ease-smooth),
                color var(--duration-fast);
    flex-shrink: 0;
}

.pxd-section--collapsed .pxd-section-chevron {
    transform: rotate(-90deg);
}

.pxd-section-body {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows var(--duration-normal) var(--ease-smooth);
}

.pxd-section--collapsed .pxd-section-body {
    grid-template-rows: 0fr;
}

.pxd-section-body-inner {
    overflow: hidden;
    min-height: 0;
}
/* Allow tooltips to overflow when section is expanded */
.pxd-section:not(.pxd-section--collapsed) .pxd-section-body-inner {
    overflow: visible;
}

/* ============================================
   COMMENT CARDS
   ============================================ */

.pxd-comments-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* --- Card --- */
.pxd-cc {
    position: relative;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 16px;
    padding: 20px 20px 20px 24px;
    box-shadow:
        0 4px 16px rgba(1, 40, 39, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275),
                box-shadow 0.3s ease;
    opacity: 0;
    animation: pxd-ccSlideIn 0.5s ease forwards;
    animation-delay: calc(var(--card-index, 0) * 0.1s + 0.15s);
}

@keyframes pxd-ccSlideIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

.pxd-cc:hover {
    transform: translateY(-3px);
    box-shadow:
        0 8px 28px rgba(1, 40, 39, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* Left accent bar */
.pxd-cc-accent {
    position: absolute;
    top: 12px;
    left: 0;
    width: 4px;
    height: 0;
    background: linear-gradient(180deg, #0fa36b, #38c19c);
    border-radius: 0 4px 4px 0;
    transition: height 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.pxd-cc:hover .pxd-cc-accent {
    height: calc(100% - 24px);
}

/* --- Header --- */
.pxd-cc-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.pxd-cc-avatar img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid white;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease;
}
.pxd-cc:hover .pxd-cc-avatar img {
    transform: scale(1.05);
}

.pxd-cc-meta {
    flex: 1;
    min-width: 0;
}

.pxd-cc-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--pixidia-blue);
    line-height: 1.3;
}

.pxd-cc-date {
    font-size: 12px;
    color: var(--pixidia-text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}
.pxd-cc-date::before {
    content: '';
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #0fa36b;
    opacity: 0.5;
}

.pxd-cc-updated {
    font-size: 11px;
    color: var(--pixidia-text-muted);
    font-style: italic;
    margin-top: 1px;
}

/* --- Actions (edit/delete) --- */
.pxd-cc-actions {
    display: flex;
    gap: 6px;
    opacity: 0;
    transition: opacity 0.25s ease;
}
.pxd-cc:hover .pxd-cc-actions {
    opacity: 1;
}

.pxd-cc-action-btn {
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}
.pxd-cc-action-btn svg {
    width: 14px;
    height: 14px;
}

.pxd-cc-edit {
    background: rgba(15, 163, 107, 0.08);
    color: #0fa36b;
}
.pxd-cc-edit:hover {
    background: rgba(15, 163, 107, 0.18);
    transform: translateY(-1px);
}

.pxd-cc-delete {
    background: rgba(220, 53, 69, 0.06);
    color: #dc3545;
}
.pxd-cc-delete:hover {
    background: rgba(220, 53, 69, 0.15);
    transform: translateY(-1px);
}

/* --- Content & truncation --- */
.pxd-cc-body {
    position: relative;
}

.pxd-cc-content {
    font-size: 14px;
    line-height: 1.7;
    color: #444;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* Truncation: clamped state */
.pxd-cc-content--clamped {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Expanded state */
.pxd-cc-content--expanded {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
}

/* Toggle button */
.pxd-cc-toggle-btn {
    display: none;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
    padding: 0;
    border: none;
    background: none;
    color: #0fa36b;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.2s;
}
.pxd-cc-toggle-btn:hover {
    color: #0A3D3A;
}
.pxd-cc-toggle-icon {
    width: 14px;
    height: 14px;
    transition: transform 0.3s ease;
}

/* ============================================
   SECTION HEADERS — RESPONSIVE
   ============================================ */

/* --- Mobile (<768px) --- */
@media (max-width: 768px) {
    .pxd-section {
        padding: 16px 12px 12px;
    }
    .pxd-section:not(.pxd-section--programme) {
        margin: 0 6px 8px;
        border-radius: 14px;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }
    .pxd-section-icon {
        width: 32px;
        height: 32px;
        border-radius: 8px;
    }
    .pxd-section-icon svg {
        width: 16px;
        height: 16px;
    }
    .pxd-section-header {
        gap: 10px;
        margin-bottom: 12px;
    }
    .pxd-section-header h2 {
        font-size: 1rem;
    }
    /* Hide count badge on mobile */
    .pxd-section-count {
        display: none;
    }
    .pxd-section-header-sub {
        display: none;
    }
    /* Compact icon button, with a true 44×44 touch target. */
    .pxd-section-header-btn {
        padding: 8px;
        border-radius: 8px;
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        justify-content: center;
        flex-shrink: 0;
        box-sizing: border-box;
    }
    .pxd-section-header-btn span {
        display: none;
    }
    .pxd-section-header-btn svg {
        width: 16px;
        height: 16px;
    }
    /* The button carries the touch target; its SVG stays centered and unpadded. */
    .pxd-section-toggle {
        display: grid;
        place-items: center;
        width: 44px;
        height: 44px;
        flex: 0 0 44px;
        padding: 0;
        box-sizing: border-box;
        align-self: center;
    }
    .pxd-section-chevron {
        width: 20px;
        height: 20px;
        padding: 0;
        margin: 0;
        box-sizing: border-box;
        display: block;
        flex-shrink: 0;
    }
    .pxd-section--collapsed {
        padding: 8px 12px;
        margin-bottom: 4px;
    }

    /* Comment cards mobile */
    .pxd-cc {
        padding: 16px 16px 16px 20px;
        border-radius: 14px;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }
    .pxd-cc-header {
        gap: 10px;
        margin-bottom: 10px;
    }
    .pxd-cc-avatar img {
        width: 36px;
        height: 36px;
    }
    .pxd-cc-name {
        font-size: 13px;
    }
    .pxd-cc-content {
        font-size: 14px;
        line-height: 1.6;
    }
    /* Make comment actions always visible on mobile */
    .pxd-cc-actions {
        opacity: 1;
    }
    .pxd-cc-action-btn {
        width: 34px;
        height: 34px;
        padding: 5px;
        box-sizing: content-box;
    }
}

/* --- Small mobile (<=480px) --- */
@media (max-width: 480px) {
    .pxd-section {
        padding: 12px 10px 10px;
    }
    .pxd-section-header h2 {
        font-size: 0.95rem;
    }
    .pxd-section-icon {
        width: 30px;
        height: 30px;
    }
    .pxd-section--collapsed {
        padding: 8px 10px;
    }
    .pxd-cc {
        padding: 14px 14px 14px 18px;
    }
    .pxd-cc-avatar img {
        width: 32px;
        height: 32px;
    }
    .pxd-cc-content {
        font-size: 13px;
    }
    .pxd-cc-content--clamped {
        -webkit-line-clamp: 3;
    }
}

/* Scope hover effects */
@media (hover: hover) {
    .pxd-section--collapsed:hover {
        background: rgba(255, 255, 255, 0.55);
        box-shadow: 0 4px 20px rgba(1, 40, 39, 0.07),
                    inset 0 1px 0 rgba(255, 255, 255, 0.6);
        transform: translateY(-1px);
    }
    .pxd-cc:hover {
        transform: translateY(-3px);
    }
    .pxd-cc:hover .pxd-cc-accent {
        height: calc(100% - 24px);
    }
}


/* ============================================
   10. CARTES CONTENU (BASE COMMUNE)
   ============================================ */

.pxd-card {
    position: relative;
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-left: 4px solid transparent;
    border-radius: 14px;
    padding: 18px 18px 14px;
    box-shadow: 0 4px 16px rgba(1, 40, 39, 0.06),
                inset 0 1px 0 rgba(255, 255, 255, 0.5);
    cursor: pointer;
    overflow: visible;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275),
                box-shadow 0.3s ease;
}

.pxd-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(1, 40, 39, 0.10),
                inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* Gradient overlay */
.pxd-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 100%);
    z-index: 0;
    opacity: 0.5;
    border-radius: inherit;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.pxd-card:hover::before { opacity: 0.9; }

.pxd-card--hidden {
    display: none;
}

.pxd-card--highlighted {
    box-shadow: 0 0 0 3px var(--pixidia-green), 0 8px 28px rgba(1,40,39,0.12) !important;
}

/* Bordures CPT */
.pxd-card[data-item-type="logement"] {
    border-left-color: var(--pxd-color-logement);
}

.pxd-card[data-item-type="transport"] {
    border-left-color: var(--pxd-color-transport);
}

.pxd-card[data-item-type="restauration"] {
    border-left-color: var(--pxd-color-restauration);
}

.pxd-card[data-item-type="activite"] {
    border-left-color: var(--pxd-color-activite);
}

.pxd-card[data-item-type="location"] {
    border-left-color: var(--pxd-color-location);
}

/* --- Card Actions / Locate button --- */
.pxd-card-actions {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 4;
}

.pxd-card-locate {
    position: relative;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.06);
    background: rgba(255,255,255,0.8);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.25s ease;
}
.pxd-card:hover .pxd-card-locate { opacity: 1; }
.pxd-card-locate:hover {
    background: rgba(32, 141, 62, 0.08);
    border-color: var(--pixidia-green);
    transform: scale(1.1);
}
.pxd-card-locate:active {
    transform: scale(0.92);
    background: rgba(32, 141, 62, 0.15);
    border-color: var(--pixidia-green);
}
.pxd-card-locate:focus-visible {
    outline: 2px solid var(--pixidia-green);
    outline-offset: 2px;
    opacity: 1;
}
.pxd-card-locate::after {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 50%;
}
.pxd-card-locate img {
    width: 16px;
    height: 16px;
    pointer-events: none;
}

/* --- Card Header --- */
.pxd-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding-right: 36px;
    position: relative;
    z-index: 3;
    overflow: visible;
}

/* Category badge (Hotel, Location...) */
.pxd-card-cat {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    color: white;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 100%);
    box-shadow: 0 2px 8px rgba(0,0,0,0.10),
                inset 0 1px 0 rgba(255,255,255,0.25);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.pxd-card-cat svg, .pxd-card-cat i { width: 12px; height: 12px; opacity: 0.9; }

/* Day badge */
.pxd-card-day {
    margin-left: auto;
    padding: 4px 12px;
    border-radius: 100px;
    font-size: 10.5px;
    font-weight: 800;
    background: rgba(10, 61, 58, 0.06);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(10, 61, 58, 0.08);
    color: var(--pixidia-blue);
    letter-spacing: 0.5px;
}

/* Title */
.pxd-card-title {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--pixidia-blue);
    margin: 0 0 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(10, 61, 58, 0.06);
    position: relative;
    z-index: 1;
    line-height: 1.3;
}

/* Permalink link on card title */
.pxd-card-link {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}
.pxd-card-link:hover {
    color: var(--pixidia-green, #1E9B52);
    text-decoration: underline;
    text-decoration-color: rgba(30, 155, 82, 0.4);
    text-underline-offset: 2px;
}

/* --- Details list --- */
.pxd-card-details {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
    z-index: 1;
    flex: 1;
    background: rgba(10, 61, 58, 0.02);
    border-radius: 10px;
    padding: 4px 0;
    border: 1px solid rgba(10, 61, 58, 0.04);
}

.pxd-card-detail {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 12px;
    color: var(--pixidia-text-muted);
    line-height: 1.4;
    padding: 6px 12px;
    border-radius: 8px;
    transition: background 0.2s ease;
}
.pxd-card-detail:hover {
    background: rgba(10, 61, 58, 0.03);
}
.pxd-card-detail svg, .pxd-card-detail i {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    color: var(--pixidia-gray-400);
    opacity: 0.7;
}

/* Cost line (highlighted) */
.pxd-card-cost {
    font-weight: 700;
    color: var(--pixidia-green);
    margin-top: 2px;
    padding-top: 7px;
    border-top: 1px dashed rgba(32, 141, 62, 0.15);
}
.pxd-card-cost svg, .pxd-card-cost i { color: var(--pixidia-green); opacity: 1; }



.pxd-card-price {
    font-size: 16px;
    font-weight: 700;
    color: var(--pixidia-green);
    white-space: nowrap;
}

.pxd-card-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: white;
    line-height: 1;
}
.pxd-card-type-badge svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.pxd-card-type-badge--logement {
    background: var(--pxd-color-logement);
}

.pxd-card-type-badge--transport {
    background: var(--pxd-color-transport);
}

.pxd-card-type-badge--restauration {
    background: var(--pxd-color-restauration);
}

.pxd-card-type-badge--activite {
    background: var(--pxd-color-activite);
}

.pxd-card-type-badge--location {
    background: var(--pxd-color-location);
}

.pxd-card-address,
.pxd-card-date,
.pxd-card-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--pixidia-text-muted);
    margin-top: 6px;
}

.pxd-card-address svg,
.pxd-card-date svg,
.pxd-card-meta svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.pxd-card-comment {
    margin-top: 10px;
    padding: 10px 12px;
    background: var(--pixidia-gray-50);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--pixidia-green);
    font-size: 13px;
    font-style: italic;
    color: var(--pixidia-text-muted);
}

/* --- Reservation status icons (badge = <button> collab-only, ouvre le modal rapide) --- */
.pxd-status-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: visible;
    z-index: 10;
    /* reset natif du <button> */
    margin: 0;
    padding: 0;
    font: inherit;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.pxd-status-icon:hover {
    transform: scale(1.12);
}
.pxd-status-icon:focus-visible {
    outline: 2px solid #0fa36b;
    outline-offset: 2px;
}
.pxd-status-icon svg { width: 14px; height: 14px; stroke-width: 2.5; }

.pxd-status-icon--reserved {
    background: rgba(56, 142, 60, 0.12);
    border: 1px solid rgba(56, 142, 60, 0.2);
    color: #388e3c;
    box-shadow: 0 2px 8px rgba(56, 142, 60, 0.12);
}
.pxd-status-icon--reserved:hover {
    box-shadow: 0 4px 14px rgba(56, 142, 60, 0.2);
}
.pxd-status-icon--pending {
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.2);
    color: #f59e0b;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.12);
}
.pxd-status-icon--pending:hover {
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.2);
}
.pxd-status-icon--non-reservable {
    background: rgba(158, 158, 158, 0.10);
    border: 1px solid rgba(158, 158, 158, 0.15);
    color: var(--pixidia-gray-400);
    box-shadow: 0 2px 8px rgba(158, 158, 158, 0.08);
}

/* ============================================
   BASE CARDS — RESPONSIVE
   ============================================ */

/* Scope hover-only styles for desktop */
@media (hover: hover) {
    .pxd-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 28px rgba(1, 40, 39, 0.10),
                    inset 0 1px 0 rgba(255, 255, 255, 0.5);
    }
    .pxd-card:hover::before { opacity: 0.9; }
    .pxd-card:hover .pxd-card-locate { opacity: 1; }
}

/* On touch devices, always show locate button */
@media (hover: none) {
    .pxd-card-locate {
        opacity: 1;
    }
}

/* --- Mobile (<768px) --- */
@media (max-width: 768px) {
    .pxd-card {
        padding: 14px 14px 12px;
        border-radius: 12px;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        box-shadow: 0 2px 10px rgba(1, 40, 39, 0.05),
                    inset 0 1px 0 rgba(255, 255, 255, 0.4);
    }
    .pxd-card-header {
        padding-right: 40px;
    }
    /* Locate button always visible on mobile — 44×44 touch target via padding */
    .pxd-card-locate {
        opacity: 1;
        width: 36px;
        height: 36px;
        padding: 4px;
        box-sizing: content-box;
    }
    .pxd-card-title {
        font-size: 14px;
    }
    .pxd-card-detail {
        font-size: 13px;
        padding: 5px 10px;
    }
    .pxd-card-cat {
        font-size: 10.5px;
        padding: 4px 9px;
    }
    .pxd-card-day {
        font-size: 10px;
    }
    .pxd-card-comment {
        font-size: 12.5px;
        padding: 8px 10px;
    }
    .pxd-status-icon {
        width: 32px;
        height: 32px;
        padding: 6px;
        box-sizing: content-box;
    }
}

/* --- Small mobile (<=480px) --- */
@media (max-width: 480px) {
    .pxd-card {
        padding: 12px 12px 10px;
        border-radius: 12px;
        border-left-width: 3px;
    }
    .pxd-card-title {
        font-size: 13.5px;
        margin-bottom: 10px;
        padding-bottom: 8px;
    }
    .pxd-card-detail {
        font-size: 12.5px;
        gap: 7px;
    }
    .pxd-card-price {
        font-size: 14px;
    }
}


/* ============================================
   11. CARTE TRANSPORT (layout special)
   ============================================ */

/* Transport cards inherit glassmorphism from .pxd-card — no override needed */

.pxd-transport-legs {
    position: relative;
    z-index: 1;
    margin-top: 4px;
}

/* A/R mode: legs side by side */
.pxd-transport-legs--ar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}
.pxd-transport-legs--ar > .pxd-transport-leg {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}
.pxd-transport-legs--ar > .pxd-transport-leg:first-child {
    padding-right: 10px;
    border-right: 1px dashed rgba(25, 118, 210, 0.12);
}
.pxd-transport-legs--ar > .pxd-transport-leg:last-child {
    padding-left: 10px;
}

/* Single-leg stacked mode */
.pxd-transport-leg {
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px dashed rgba(25, 118, 210, 0.12);
}

.pxd-transport-leg:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.pxd-transport-leg-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--pxd-color-transport);
    margin-bottom: 8px;
    padding: 2px 8px;
    background: rgba(25, 118, 210, 0.06);
    border-radius: 6px;
    border: 1px solid rgba(25, 118, 210, 0.10);
}

.pxd-transport-route {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.pxd-transport-point {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: var(--pixidia-text);
    line-height: 1.3;
    flex: 1;
    min-width: 0;
}
.pxd-transport-point svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: var(--pixidia-gray-400);
    opacity: 0.7;
}

.pxd-transport-arrow {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--pixidia-gray-400);
    opacity: 0.5;
}

.pxd-leg-label {
    display: block;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--pxd-color-transport);
    margin-bottom: 6px;
}

.pxd-transport-city {
    text-align: center;
    min-width: 60px;
}

.pxd-transport-city-code {
    font-size: 24px;
    font-weight: 800;
    color: var(--pixidia-text);
    letter-spacing: -0.5px;
    line-height: 1;
}

.pxd-transport-city-name {
    font-size: 13px;
    color: var(--pixidia-gray-400);
    font-weight: 500;
    margin-top: 4px;
}

.pxd-transport-line {
    flex: 1;
    height: 2px;
    background: rgba(25, 118, 210, 0.15);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.pxd-transport-line::before,
.pxd-transport-line::after {
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    border: 2px solid rgba(25, 118, 210, 0.35);
    background: rgba(255, 255, 255, 0.9);
}

.pxd-transport-line::before {
    left: -3px;
}

.pxd-transport-line::after {
    right: -3px;
}

.pxd-transport-line-icon {
    width: 16px;
    height: 16px;
    color: var(--pixidia-gray-400);
    transform: rotate(0deg);
    position: absolute;
    top: -20px;
}

.pxd-transport-duration {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--pixidia-text-muted);
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    padding: 2px 8px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    position: absolute;
    top: 6px;
    white-space: nowrap;
    z-index: 1;
}

.pxd-transport-times {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    font-weight: 600;
    color: var(--pixidia-text);
    margin-bottom: 8px;
}

.pxd-transport-details {
    display: flex;
    gap: 12px;
    font-size: 12px;
    color: var(--pixidia-gray-500);
    background: rgba(10, 61, 58, 0.02);
    border: 1px solid rgba(10, 61, 58, 0.04);
    padding: 8px 12px;
    border-radius: 10px;
    flex-wrap: wrap;
}

.pxd-transport-details span {
    display: flex;
    align-items: center;
    gap: 4px;
}

.pxd-transport-details svg {
    width: 14px;
    height: 14px;
}

.pxd-transport-segment {
    padding: 6px 12px;
    margin-top: 6px;
    background: rgba(25, 118, 210, 0.04);
    border: 1px solid rgba(25, 118, 210, 0.08);
    border-radius: 8px;
    font-size: 11.5px;
    color: var(--pixidia-text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}

.pxd-transport-segment svg {
    width: 14px;
    height: 14px;
}

/* Transport price removed — uses shared .pxd-card-cost */

/* Compact transport card (metro, bus) — no city codes */
.pxd-transport-compact .pxd-transport-city {
    min-width: auto;
}
.pxd-transport-compact .pxd-transport-city-code {
    display: none;
}
.pxd-transport-compact .pxd-transport-city-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--pixidia-text);
    margin-top: 0;
}
.pxd-transport-compact .pxd-transport-times {
    font-size: 12.5px;
}

/* ============================================
   TRANSPORT CARDS — RESPONSIVE
   ============================================ */

/* --- Mobile (<768px) --- */
@media (max-width: 768px) {
    /* Transport route: allow city names to wrap */
    .pxd-transport-city-name {
        word-break: break-word;
        overflow-wrap: break-word;
    }

    /* A/R grid stacks into single column */
    .pxd-transport-legs--ar {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .pxd-transport-legs--ar > .pxd-transport-leg:first-child {
        padding-right: 0;
        border-right: none;
        padding-bottom: 10px;
        border-bottom: 1px dashed rgba(25, 118, 210, 0.12);
    }
    .pxd-transport-legs--ar > .pxd-transport-leg:last-child {
        padding-left: 0;
    }
    .pxd-transport-legs--ar > .pxd-transport-leg {
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: none;
    }
    .pxd-transport-city-code {
        font-size: 18px;
    }
    .pxd-transport-city {
        min-width: 48px;
    }
    .pxd-transport-city-name {
        font-size: 12px;
    }
    .pxd-transport-route {
        gap: 8px;
    }
    .pxd-transport-times {
        font-size: 13px;
    }
    .pxd-transport-details {
        gap: 8px;
        padding: 6px 10px;
        font-size: 11.5px;
    }
    .pxd-transport-duration {
        font-size: 10px;
    }
    .pxd-transport-leg-label {
        font-size: 9.5px;
    }
}

/* --- Small mobile (<=480px) --- */
@media (max-width: 480px) {
    .pxd-transport-city-code {
        font-size: 16px;
        letter-spacing: -0.3px;
    }
    .pxd-transport-city {
        min-width: 40px;
    }
    .pxd-transport-city-name {
        font-size: 11px;
        margin-top: 2px;
    }
    .pxd-transport-route {
        gap: 6px;
    }
    .pxd-transport-times {
        font-size: 12px;
    }
    .pxd-transport-details {
        flex-wrap: wrap;
        gap: 6px;
        padding: 5px 8px;
        font-size: 11px;
    }
    .pxd-transport-line-icon {
        width: 14px;
        height: 14px;
    }
    .pxd-transport-segment {
        padding: 5px 10px;
        font-size: 11px;
    }
}


/* ============================================
   12. BUDGET
   ============================================ */

/* --- Budget section --- */

/* --- Budget glass wrapper --- */
.pxd-budget-glass {
    margin: 0 12px;
    padding: 14px;
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 14px;
    box-shadow: 0 10px 30px -5px rgba(15, 163, 107, 0.10), 0 2px 8px rgba(15, 163, 107, 0.05);
    position: relative;
    overflow: hidden;
}

.pxd-budget-glass::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
    z-index: 0;
    opacity: 0.7;
}

.pxd-budget-glass > * {
    position: relative;
    z-index: 1;
}

/* --- Budget header --- */
.pxd-budget-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 2px 4px 14px;
}

.pxd-budget-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pxd-budget-header-left h2 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--pixidia-blue);
}

/* --- Budget content: donut + breakdown side by side --- */
.pxd-budget-content {
    display: grid;
    grid-template-columns: 2fr 3fr;
    gap: 20px;
    align-items: center;
}

/* --- Donut chart --- */
.pxd-budget-chart-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px;
}

.pxd-budget-donut {
    /* Responsive donut: scales with container, clamped between 140-190px */
    width: clamp(140px, 100%, 190px);
    aspect-ratio: 1;
    border-radius: 50%;
    position: relative;
    box-shadow: 0 6px 20px rgba(15, 163, 107, 0.12);
}

.pxd-budget-donut-center {
    position: absolute;
    inset: 18%;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(8px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 10px rgba(15, 163, 107, 0.06);
}

.pxd-budget-total {
    font-size: clamp(1.1rem, 2.5vw, 1.4rem);
    font-weight: 800;
    color: var(--pixidia-blue);
    line-height: 1;
}

.pxd-budget-sublabel {
    font-size: 11px;
    color: #778494;
    margin-top: 3px;
    font-weight: 600;
}

/* --- Breakdown rows (glass sections) --- */
.pxd-budget-breakdown {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pxd-budget-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(15, 163, 107, 0.05);
    transition: all 0.35s ease;
    animation: pxd-tl-fadeIn 0.5s ease both;
    opacity: 0;
    position: relative;
    overflow: hidden;
}

.pxd-budget-row::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 100%);
    border-radius: inherit;
    pointer-events: none;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

.pxd-budget-row:hover {
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 15px 40px -5px rgba(15, 163, 107, 0.20), 0 5px 15px rgba(15, 163, 107, 0.08);
    border-color: rgba(15, 163, 107, 0.2);
}

.pxd-budget-row:hover::before {
    opacity: 0.9;
}

/* Icon circle */
.pxd-budget-row-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    box-shadow: 0 2px 6px color-mix(in srgb, var(--row-color) 30%, transparent);
    position: relative;
    z-index: 1;
}

.pxd-budget-row-icon svg {
    width: 14px;
    height: 14px;
    color: white;
    stroke-width: 2.2;
}

/* Label + bar */
.pxd-budget-row-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    position: relative;
    z-index: 1;
}

.pxd-budget-row-label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--pixidia-blue);
}

.pxd-budget-row-bar {
    width: 100%;
    height: 4px;
    border-radius: 2px;
    background: rgba(1, 40, 39, 0.06);
    overflow: hidden;
}

.pxd-budget-row-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.6s ease;
}

/* Amount + percent */
.pxd-budget-row-values {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.pxd-budget-row-amount {
    font-size: 13px;
    font-weight: 700;
    color: var(--pixidia-blue);
}

.pxd-budget-row-percent {
    font-size: 10.5px;
    font-weight: 600;
    color: #778494;
}

/* --- Footer: stats bar (glass) --- */
.pxd-budget-footer {
    display: flex;
    justify-content: space-around;
    gap: 12px;
    margin-top: 12px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(15, 163, 107, 0.05);
}

.pxd-budget-stat {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: #0fa36b;
}

.pxd-budget-stat svg {
    width: 15px;
    height: 15px;
    color: #778494;
}

.pxd-budget-stat small {
    font-weight: 500;
    color: #778494;
    font-size: 11px;
}

/* --- Budget customize button (author only) --- */
.pxd-budget-customize-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    margin-left: auto;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: var(--radius-full);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    color: var(--pixidia-blue);
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 6px rgba(15, 163, 107, 0.05);
}

.pxd-budget-customize-btn svg {
    width: 15px;
    height: 15px;
}

.pxd-budget-customize-btn:hover {
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(15, 163, 107, 0.25);
    box-shadow: 0 4px 12px rgba(15, 163, 107, 0.12);
    color: #0fa36b;
}

/* ============================================
   12b. BUDGET ALLOCATION MODAL
   ============================================ */

/* Overlay */
.pxd-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(1, 40, 39, 0.45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 20000;
    display: none;
    place-items: center;
}

.pxd-modal-overlay.open {
    display: grid;
    animation: pxd-modalFadeIn 0.25s ease;
}

@keyframes pxd-modalFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Modal container */
.pxd-modal {
    position: relative;
    width: 90%;
    max-width: 520px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 18px;
    box-shadow:
        0 24px 64px rgba(1, 40, 39, 0.20),
        0 0 0 1px rgba(1, 40, 39, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
    animation: pxd-modalSlideUp 0.3s ease;
    overflow: hidden;
}

@keyframes pxd-modalSlideUp {
    from { opacity: 0; transform: translateY(20px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Modal header */
.pxd-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    border-bottom: 1px solid rgba(1, 40, 39, 0.06);
}

.pxd-modal-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pxd-modal-header-left h3 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--pixidia-blue);
}

.pxd-modal-close {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: none;
    background: rgba(1, 40, 39, 0.05);
    color: #778494;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pxd-modal-close:hover {
    background: rgba(1, 40, 39, 0.1);
    color: var(--pixidia-blue);
}

.pxd-modal-close svg {
    width: 16px;
    height: 16px;
}

/* Modal body (scrollable) */
.pxd-modal-body {
    padding: 16px 22px;
    overflow-y: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Category slider row */
.pxd-alloc-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 10px;
    box-shadow: 0 3px 8px rgba(15, 163, 107, 0.04);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.pxd-alloc-row::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 100%);
    border-radius: inherit;
    pointer-events: none;
    opacity: 0.5;
}

.pxd-alloc-row:hover {
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 6px 16px rgba(15, 163, 107, 0.10);
}

/* Category icon circle */
.pxd-alloc-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.pxd-alloc-icon svg {
    width: 14px;
    height: 14px;
    color: white;
    stroke-width: 2.2;
}

/* Category info: label + slider */
.pxd-alloc-info {
    flex: 1;
    min-width: 0;
    position: relative;
    z-index: 1;
}

.pxd-alloc-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--pixidia-blue);
    margin-bottom: 6px;
}

/* Range slider styling */
.pxd-alloc-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: rgba(1, 40, 39, 0.08);
    outline: none;
    cursor: pointer;
}

.pxd-alloc-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--alloc-color) 25%, color-mix(in srgb, var(--alloc-color) 70%, #38c19c) 100%);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.pxd-alloc-slider::-webkit-slider-thumb:hover {
    transform: scale(1.15);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
}

.pxd-alloc-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, var(--alloc-color) 25%, color-mix(in srgb, var(--alloc-color) 70%, #38c19c) 100%);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
    cursor: pointer;
}

/* Percent input */
.pxd-alloc-percent {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.pxd-alloc-input {
    width: 48px;
    padding: 5px 4px;
    text-align: center;
    border: 1px solid rgba(1, 40, 39, 0.1);
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    color: var(--pixidia-blue);
    background: rgba(255, 255, 255, 0.6);
    transition: border-color 0.2s ease;
}

.pxd-alloc-input:focus {
    outline: none;
    border-color: #0fa36b;
    box-shadow: 0 0 0 2px rgba(15, 163, 107, 0.15);
}

.pxd-alloc-unit {
    font-size: 12px;
    font-weight: 600;
    color: #778494;
}

/* Modal footer */
.pxd-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 22px;
    border-top: 1px solid rgba(1, 40, 39, 0.06);
    gap: 16px;
}

/* Total display */
.pxd-modal-total {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pxd-modal-total-label {
    font-size: 13px;
    font-weight: 600;
    color: #778494;
}

.pxd-modal-total-value {
    font-size: 15px;
    font-weight: 800;
    color: #0fa36b;
    transition: color 0.2s ease;
}

.pxd-modal-total-value.error {
    color: #e53935;
    animation: pxd-totalPulse 1s ease infinite;
}

@keyframes pxd-totalPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Action buttons */
.pxd-modal-actions {
    display: flex;
    gap: 8px;
}

.pxd-modal-btn {
    padding: 8px 18px;
    border-radius: var(--radius-full);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    display: flex;
    align-items: center;
    gap: 5px;
    border: none;
}

.pxd-modal-btn svg {
    width: 15px;
    height: 15px;
}

.pxd-modal-btn--cancel {
    background: rgba(1, 40, 39, 0.05);
    color: #778494;
}

.pxd-modal-btn--cancel:hover {
    background: rgba(1, 40, 39, 0.1);
    color: var(--pixidia-blue);
}

.pxd-modal-btn--save {
    background: linear-gradient(135deg, #0fa36b 25%, #38c19c 100%);
    color: white;
    box-shadow: 0 3px 10px rgba(15, 163, 107, 0.25);
}

.pxd-modal-btn--save:hover {
    box-shadow: 0 6px 16px rgba(15, 163, 107, 0.35);
    transform: translateY(-1px);
}

.pxd-modal-btn--save:disabled {
    background: #ccc;
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
}

/* --- Confirm modal variant --- */

.pxd-modal--confirm {
    max-width: 400px;
    text-align: center;
    padding: 32px 28px 24px;
}

.pxd-confirm-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    margin: 0 auto 16px;
}

.pxd-confirm-icon svg {
    width: 26px;
    height: 26px;
}

.pxd-confirm-icon--warning {
    background: rgba(245, 158, 11, 0.12);
    color: #d97706;
}

.pxd-confirm-icon--danger {
    background: rgba(220, 38, 38, 0.10);
    color: #dc2626;
}

.pxd-confirm-title {
    margin: 0 0 10px;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--pixidia-blue);
}

.pxd-confirm-text {
    margin: 0 0 24px;
    font-size: 0.88rem;
    line-height: 1.55;
    color: #5a6a7a;
}

.pxd-confirm-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.pxd-modal-btn--danger {
    background: linear-gradient(135deg, #dc2626 25%, #ef4444 100%);
    color: white;
    box-shadow: 0 3px 10px rgba(220, 38, 38, 0.25);
}

.pxd-modal-btn--danger:hover {
    box-shadow: 0 6px 16px rgba(220, 38, 38, 0.35);
    transform: translateY(-1px);
}

/* --- Image modal variant --- */

.pxd-modal--image {
    max-width: 620px;
}

/* --- PDF Export modal: radio options --- */
.pxd-modal--pdf {
    max-width: 480px;
}
.pxd-pdf-subtitle {
    color: #555;
    font-size: 14px;
    margin: 0 0 20px;
}
.pxd-pdf-option-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.pxd-pdf-option-label {
    font-size: 13px;
    font-weight: 700;
    color: #333;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.pxd-pdf-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pxd-pdf-option {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border: 1.5px solid #e0e0e0;
    border-radius: 12px;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}
.pxd-pdf-option:hover {
    border-color: #0fa36b;
    background: rgba(15, 163, 107, 0.04);
}
.pxd-pdf-option input[type="radio"] {
    display: none;
}
.pxd-pdf-option-radio {
    width: 20px;
    height: 20px;
    min-width: 20px;
    border: 2px solid #ccc;
    border-radius: 50%;
    margin-top: 2px;
    position: relative;
    transition: border-color 0.2s;
}
.pxd-pdf-option input[type="radio"]:checked ~ .pxd-pdf-option-radio {
    border-color: #0fa36b;
}
.pxd-pdf-option input[type="radio"]:checked ~ .pxd-pdf-option-radio::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
    background: #0fa36b;
    border-radius: 50%;
}
.pxd-pdf-option input[type="radio"]:checked ~ .pxd-pdf-option-content .pxd-pdf-option-title {
    color: #0fa36b;
}
.pxd-pdf-option-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.pxd-pdf-option-title {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    transition: color 0.2s;
}
.pxd-pdf-option-desc {
    font-size: 12px;
    color: #888;
    line-height: 1.4;
}

/* --- Invite travelers modal --- */
.pxd-modal--invite {
    max-width: 520px;
}
.pxd-invite-section {
    margin-bottom: 20px;
}
.pxd-invite-section:last-child { margin-bottom: 0; }
.pxd-invite-section-label {
    font-size: 13px;
    font-weight: 700;
    color: #333;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 4px;
}
.pxd-invite-section-hint {
    font-size: 12px;
    color: #888;
    margin: 0 0 12px;
}
.pxd-invite-friends-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.pxd-invite-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1.5px solid #e0e0e0;
    border-radius: 12px;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    position: relative;
}
.pxd-invite-card:hover {
    border-color: #0fa36b;
    background: rgba(15, 163, 107, 0.04);
}
.pxd-invite-card.selected {
    border-color: #0fa36b;
    background: rgba(15, 163, 107, 0.08);
}
.pxd-invite-card-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
}
.pxd-invite-card-info {
    flex: 1;
    min-width: 0;
}
.pxd-invite-card-name {
    font-size: 13px;
    font-weight: 600;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pxd-invite-card-username {
    font-size: 11px;
    color: #999;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pxd-invite-card-check {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.pxd-invite-card-check svg {
    width: 13px;
    height: 13px;
    color: white;
    opacity: 0;
    transition: opacity 0.2s;
}
.pxd-invite-card.selected .pxd-invite-card-check {
    background: #0fa36b;
    border-color: #0fa36b;
}
.pxd-invite-card.selected .pxd-invite-card-check svg {
    opacity: 1;
}
.pxd-invite-others-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pxd-invite-other-row {
    display: flex;
    gap: 8px;
    align-items: center;
}
.pxd-invite-other-input {
    flex: 1;
    min-width: 0;
    box-sizing: border-box;
    padding: 10px 14px;
    border: 1.5px solid #e0e0e0;
    border-radius: 10px;
    font-size: 13px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s;
}
.pxd-invite-other-input:focus {
    border-color: #0fa36b;
}
.pxd-invite-other-remove {
    width: 32px;
    height: 32px;
    border: none;
    background: rgba(220, 53, 69, 0.08);
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}
.pxd-invite-other-remove:hover {
    background: rgba(220, 53, 69, 0.18);
}
.pxd-invite-other-remove svg {
    width: 14px;
    height: 14px;
    color: #dc3545;
}
.pxd-invite-add-other {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 8px 14px;
    border: 1.5px dashed #ccc;
    border-radius: 10px;
    background: none;
    color: #666;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s;
}
.pxd-invite-add-other:hover {
    border-color: #0fa36b;
    color: #0fa36b;
}
.pxd-invite-add-other svg {
    width: 14px;
    height: 14px;
}
.pxd-modal--invite .pxd-modal-body {
    overflow-x: hidden;
}

/* --- Comment Card Editor Modal --- */
.pxd-modal--comment-editor {
    max-width: 560px;
}

.pxd-comment-textarea {
    width: 100%;
    box-sizing: border-box;
    min-height: 140px;
    padding: 14px 16px;
    border: 1.5px solid #e0e0e0;
    border-radius: 12px;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.7;
    color: #333;
    resize: vertical;
    outline: none;
    transition: border-color 0.2s;
    background: rgba(255, 255, 255, 0.6);
}
.pxd-comment-textarea:focus {
    border-color: #0fa36b;
    box-shadow: 0 0 0 3px rgba(15, 163, 107, 0.08);
}
.pxd-comment-textarea::placeholder {
    color: #aaa;
    font-style: italic;
}

.pxd-comment-editor-hint {
    margin-top: 6px;
    font-size: 11.5px;
    color: #999;
    text-align: right;
}

/* Tabs */
.pxd-img-tabs {
    display: flex;
    border-bottom: 1px solid rgba(1, 40, 39, 0.08);
    padding: 0 20px;
}

.pxd-img-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 0;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: #778494;
    border: none;
    background: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s;
}

.pxd-img-tab svg {
    width: 15px;
    height: 15px;
}

.pxd-img-tab:hover {
    color: var(--pixidia-blue);
}

.pxd-img-tab.active {
    color: #0fa36b;
    border-bottom-color: #0fa36b;
}

.pxd-img-tab-content {
    display: none;
    padding: 20px;
    max-height: 55vh;
    overflow-y: auto;
}

.pxd-img-tab-content.active {
    display: block;
}

.pxd-img-tab-content::-webkit-scrollbar {
    width: 6px;
}

.pxd-img-tab-content::-webkit-scrollbar-track {
    background: transparent;
}

.pxd-img-tab-content::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.12);
    border-radius: 3px;
}

.pxd-img-tab-content::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.2);
}

/* Search */
.pxd-img-search {
    position: relative;
    margin-bottom: 16px;
}

.pxd-img-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: #778494;
    pointer-events: none;
}

.pxd-img-search input {
    width: 100%;
    padding: 10px 14px 10px 36px;
    border: 2px solid rgba(1, 40, 39, 0.08);
    border-radius: 10px;
    font-family: inherit;
    font-size: 13.5px;
    color: var(--pixidia-blue);
    background: rgba(255, 255, 255, 0.6);
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

.pxd-img-search input:focus {
    outline: none;
    border-color: #0fa36b;
    box-shadow: 0 0 0 3px rgba(15, 163, 107, 0.1);
}

/* Image grid */
.pxd-img-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding: 2px;
}

.pxd-img-grid-item {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    border: 3px solid transparent;
    transition: all 0.2s;
}

.pxd-img-grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pxd-img-grid-item:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-color: rgba(15, 163, 107, 0.3);
}

.pxd-img-grid-item.selected {
    border-color: #0fa36b;
    box-shadow: 0 0 0 2px rgba(15, 163, 107, 0.25);
}

.pxd-img-grid-item.selected::after {
    content: '\2713';
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    background: #0fa36b;
    color: white;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 13px;
    font-weight: 700;
}

.pxd-img-grid-item-credit {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 6px 8px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.55));
    color: white;
    font-size: 10.5px;
    opacity: 0;
    transition: opacity 0.2s;
}

.pxd-img-grid-item:hover .pxd-img-grid-item-credit {
    opacity: 1;
}

/* Load more button */
.pxd-img-load-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    margin-top: 12px;
    padding: 10px 0;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: #0fa36b;
    background: rgba(15, 163, 107, 0.06);
    border: 1.5px dashed rgba(15, 163, 107, 0.3);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
}

.pxd-img-load-more:hover {
    background: rgba(15, 163, 107, 0.1);
    border-color: #0fa36b;
}

.pxd-img-load-more svg {
    width: 16px;
    height: 16px;
}

/* Credit line */
.pxd-img-credit {
    font-size: 11px;
    color: #778494;
    text-align: center;
    margin-top: 10px;
    min-height: 16px;
}

.pxd-img-credit a {
    color: #0fa36b;
    text-decoration: none;
}

/* Dropzone */
.pxd-img-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 48px 32px;
    border: 2px dashed rgba(1, 40, 39, 0.15);
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.25s;
}

.pxd-img-dropzone:hover,
.pxd-img-dropzone.dragover {
    border-color: #0fa36b;
    background: rgba(15, 163, 107, 0.04);
}

.pxd-img-dropzone-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(15, 163, 107, 0.1);
    display: grid;
    place-items: center;
    margin-bottom: 16px;
    color: #0fa36b;
}

.pxd-img-dropzone-icon svg {
    width: 26px;
    height: 26px;
}

.pxd-img-dropzone-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--pixidia-blue);
    margin-bottom: 4px;
}

.pxd-img-dropzone-subtitle {
    font-size: 13px;
    color: #778494;
    margin-bottom: 12px;
}

.pxd-img-dropzone-info {
    font-size: 11.5px;
    color: #adb5bd;
}

/* ============================================
   BUDGET — RESPONSIVE (Tablet & Mobile)
   ============================================ */

/* --- Tablet (768-1200px) --- */
@media (max-width: 1200px) and (min-width: 769px) {
    .pxd-budget-content {
        gap: 16px;
    }

    .pxd-budget-donut {
        width: clamp(130px, 100%, 170px);
    }
}

/* --- Mobile (<768px) --- */
@media (max-width: 768px) {
    .pxd-budget-glass {
        margin: 0 8px;
        padding: 12px;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        /* Allow content to be visible, clipping handled by parent */
        overflow: visible;
    }

    .pxd-budget-content {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 16px;
    }

    .pxd-budget-chart-wrapper {
        padding: 4px;
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .pxd-budget-donut {
        /* Responsive donut: relative to viewport for true mobile */
        width: clamp(130px, 35vw, 170px);
        height: clamp(130px, 35vw, 170px);
    }

    /* Donut center text: larger font at true phone sizes */
    .pxd-budget-total {
        font-size: clamp(1rem, 4vw, 1.4rem);
    }

    .pxd-budget-sublabel {
        font-size: clamp(9px, 2.5vw, 11px);
    }

    .pxd-budget-breakdown {
        width: 100%;
    }

    .pxd-budget-row {
        padding: 8px 10px;
        gap: 8px;
        /* Prevent layout overflow within tight containers */
        min-width: 0;
        overflow: hidden;
    }

    /* Ensure label truncates rather than overflows */
    .pxd-budget-row-label {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
    }

    .pxd-budget-row:hover {
        box-shadow: 0 8px 24px -5px rgba(15, 163, 107, 0.15), 0 3px 10px rgba(15, 163, 107, 0.06);
    }

    .pxd-budget-footer {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        padding: 10px 12px;
    }

    .pxd-budget-stat {
        font-size: 12px;
        justify-content: center;
    }

    /* Modal: larger slider thumbs for touch */
    .pxd-alloc-slider::-webkit-slider-thumb {
        width: 24px;
        height: 24px;
    }

    .pxd-alloc-slider::-moz-range-thumb {
        width: 24px;
        height: 24px;
    }

    /* Allocation input: 44px min touch target */
    .pxd-alloc-input {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    .pxd-modal {
        width: 95%;
        max-height: 90vh;
        border-radius: 14px;
    }

    .pxd-modal-header {
        padding: 14px 16px;
    }

    .pxd-modal-body {
        padding: 14px 16px;
    }

    .pxd-modal-footer {
        padding: 12px 16px;
        flex-direction: column;
        gap: 10px;
    }

    .pxd-modal-actions {
        width: 100%;
        justify-content: stretch;
    }

    .pxd-modal-actions .pxd-modal-btn {
        flex: 1;
        justify-content: center;
        min-height: 44px;
    }

    /* Invite friends grid stacks */
    .pxd-invite-friends-grid {
        grid-template-columns: 1fr;
    }

    /* Image grid 2 columns on mobile */
    .pxd-img-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
}

/* --- Small Mobile (<=480px) --- */
@media (max-width: 480px) {
    .pxd-budget-donut {
        width: clamp(110px, 38vw, 150px);
        height: clamp(110px, 38vw, 150px);
    }

    .pxd-budget-row-bar {
        display: none;
    }

    .pxd-budget-row-label {
        font-size: 12px;
    }

    .pxd-budget-row-amount {
        font-size: 12px;
    }

    .pxd-budget-row-percent {
        font-size: 10px;
    }

    .pxd-budget-total {
        font-size: clamp(0.9rem, 5vw, 1.1rem);
    }

    .pxd-budget-sublabel {
        font-size: 9px;
    }

    .pxd-budget-header-left h2 {
        font-size: 1.05rem;
    }

    .pxd-budget-stat {
        font-size: 11px;
    }

    .pxd-budget-stat small {
        font-size: 10px;
    }

    .pxd-alloc-row {
        padding: 8px 10px;
        gap: 8px;
    }

    .pxd-alloc-label {
        font-size: 11px;
    }

    .pxd-alloc-input {
        width: 42px;
        font-size: 12px;
    }
}


/* ============================================
   13. RESERVATIONS DASHBOARD
   ============================================ */

/* --- Reservations: glassmorphism dashboard --- */

.pxd-reservations-dashboard {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Progress bar */
.pxd-res-progress {
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 14px;
    padding: 16px 20px;
    border: 1px solid rgba(255, 255, 255, 0.65);
    box-shadow: 0 10px 30px -5px rgba(15, 163, 107, 0.12), 0 2px 8px rgba(15, 163, 107, 0.06);
}

.pxd-res-progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.pxd-res-progress-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--pixidia-blue, #012827);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pxd-res-progress-value {
    font-size: 13px;
    font-weight: 600;
    color: #388e3c;
}

.pxd-res-progress-bar {
    height: 8px;
    background: rgba(200, 205, 212, 0.25);
    border-radius: 4px;
    overflow: hidden;
    display: flex;
}

.pxd-res-progress-fill {
    height: 100%;
    transition: width 0.6s cubic-bezier(0.4, 0.2, 0.2, 1);
}

.pxd-res-progress-fill--confirmed {
    background: linear-gradient(90deg, #2e7d32, #43a047);
    border-radius: 4px 0 0 4px;
}

.pxd-res-progress-fill--pending {
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.pxd-res-progress-legend {
    display: flex;
    gap: 16px;
    margin-top: 10px;
}

.pxd-res-progress-legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    color: #778494;
}

.pxd-res-progress-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.pxd-res-progress-legend-dot--confirmed { background: #388e3c; }
.pxd-res-progress-legend-dot--pending { background: #f59e0b; }
.pxd-res-progress-legend-dot--none { background: #c8cdd4; }

/* Columns grid */
.pxd-res-columns {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

/* Column card */
.pxd-res-col {
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.65);
    box-shadow: 0 10px 30px -5px rgba(15, 163, 107, 0.12), 0 2px 8px rgba(15, 163, 107, 0.06);
    min-width: 0;
}

.pxd-res-col-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    font-size: 12.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    border-bottom: 1px solid rgba(200, 205, 212, 0.2);
}

.pxd-res-col-header svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.pxd-res-col-count {
    margin-left: auto;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 6px;
}

/* Column color variants */
.pxd-res-col--confirmed .pxd-res-col-header {
    color: #2e7d32;
}
.pxd-res-col--confirmed .pxd-res-col-count {
    background: rgba(56, 142, 60, 0.12);
    color: #2e7d32;
}

.pxd-res-col--pending .pxd-res-col-header {
    color: #d97706;
}
.pxd-res-col--pending .pxd-res-col-count {
    background: rgba(245, 158, 11, 0.12);
    color: #d97706;
}

.pxd-res-col--none .pxd-res-col-header {
    color: #778494;
}
.pxd-res-col--none .pxd-res-col-count {
    background: rgba(176, 184, 196, 0.15);
    color: #778494;
}

.pxd-res-col-body {
    padding: 8px;
}

/* Show more button */
.pxd-res-show-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 100%;
    padding: 8px;
    margin-top: 4px;
    background: none;
    border: 1px dashed rgba(200, 205, 212, 0.4);
    border-radius: 8px;
    color: #778494;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
}

.pxd-res-show-more svg {
    width: 13px;
    height: 13px;
    transition: transform 0.3s ease;
}

.pxd-res-show-more:hover {
    color: #0d8c5a;
    border-color: rgba(15, 163, 107, 0.3);
    background: rgba(15, 163, 107, 0.04);
}

/* Hidden items */
.pxd-res-hidden {
    display: none;
}

/* Toggle button (AJAX status change) */
.pxd-res-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    border: 1px solid rgba(200, 205, 212, 0.35);
    background: rgba(255, 255, 255, 0.6);
    color: #778494;
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
    transition: all 0.2s ease;
    padding: 0;
    margin-left: auto;
}

.pxd-res-toggle svg {
    width: 13px;
    height: 13px;
}

.pxd-res-toggle:hover {
    transform: scale(1.15);
}

/* Elevate stacking contexts when tooltip is visible */
.pxd-res-col:has(.pxd-res-toggle:hover) {
    z-index: 10;
}
.pxd-res-item:has(.pxd-res-toggle:hover) {
    z-index: 5;
}

/* Column-specific toggle hover colors */
.pxd-res-col--pending .pxd-res-toggle:hover {
    background: rgba(56, 142, 60, 0.12);
    border-color: rgba(56, 142, 60, 0.3);
    color: #2e7d32;
}

.pxd-res-col--confirmed .pxd-res-toggle:hover {
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.3);
    color: #d97706;
}

.pxd-res-col--none .pxd-res-toggle:hover {
    background: rgba(56, 142, 60, 0.12);
    border-color: rgba(56, 142, 60, 0.3);
    color: #2e7d32;
}

/* Loading state */
.pxd-res-toggle--loading {
    pointer-events: none;
    opacity: 0.5;
}

.pxd-res-toggle--loading svg {
    animation: pxd-res-spin 0.8s linear infinite;
}

@keyframes pxd-res-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ============================================
   RESERVATIONS — RESPONSIVE (Tablet & Mobile)
   ============================================ */

/* --- Tablet (768-1200px) --- */
@media (max-width: 1200px) and (min-width: 769px) {
    .pxd-res-columns {
        gap: 10px;
    }

    .pxd-res-col-header {
        padding: 10px 12px;
        font-size: 12px;
    }
}

/* --- Mobile (<768px) --- */
@media (max-width: 768px) {
    .pxd-res-progress {
        padding: 14px 16px;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    .pxd-res-progress-bar {
        height: 10px;
        border-radius: 5px;
    }

    .pxd-res-progress-value {
        font-size: 14px;
        font-weight: 700;
    }

    .pxd-res-columns {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .pxd-res-col {
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    /* Collapsible column headers on mobile */
    .pxd-res-col-header {
        padding: 12px 14px;
        cursor: pointer;
        min-height: 44px;
    }

    .pxd-res-col-body {
        padding: 6px;
    }

    /* Ensure touch targets */
    .pxd-res-show-more {
        min-height: 44px;
        font-size: 12px;
    }

    .pxd-res-toggle {
        width: 34px;
        height: 34px;
        min-width: 34px;
    }

    .pxd-res-toggle svg {
        width: 16px;
        height: 16px;
    }

    /* Reservation item cards: truncate type label on tight widths */
    .pxd-res-type {
        flex-shrink: 0;
        max-width: 80px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* --- Small Mobile (<=480px) --- */
@media (max-width: 480px) {
    .pxd-res-progress-legend {
        flex-wrap: wrap;
        gap: 8px;
    }

    .pxd-res-progress-legend-item {
        font-size: 11px;
    }

    .pxd-res-progress-label {
        font-size: 12px;
    }

    .pxd-res-col-header {
        font-size: 11.5px;
        padding: 10px 12px;
    }

    /* Hide type badge on very small screens to give more room to title */
    .pxd-res-type {
        display: none;
    }
}

/* ============================================================
   Drag & drop entre colonnes + bouton crayon (fallback clavier/tactile)
   ============================================================ */
.pxd-sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.pxd-res-item { cursor: grab; position: relative; }
.pxd-res-item[draggable="false"] { cursor: default; }
.pxd-res-item:active { cursor: grabbing; }
.pxd-res-item--dragging { opacity: 0.45; cursor: grabbing; }
.pxd-res-item:focus-visible { outline: 2px solid #0fa36b; outline-offset: 2px; }

.pxd-res-drag-handle {
    display: inline-flex; align-items: center;
    color: #9db3b3; flex-shrink: 0; cursor: grab;
}
.pxd-res-drag-handle svg { width: 14px; height: 14px; }

.pxd-res-col-body {
    min-height: 44px;
    border-radius: 10px;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}
.pxd-res-col-body.drag-over {
    background: rgba(15, 163, 107, 0.08);
    box-shadow: inset 0 0 0 2px rgba(15, 163, 107, 0.35);
}

.pxd-res-item-edit {
    border: none;
    background: rgba(1, 40, 39, 0.05);
    color: #778494;
    width: 26px; height: 26px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    box-shadow: none;
    flex-shrink: 0;
    padding: 0;
    font: inherit;
    -webkit-appearance: none;
    appearance: none;
    transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.pxd-res-item-edit:hover { background: rgba(1, 40, 39, 0.1); color: #012827; }
.pxd-res-item-edit:focus-visible { outline: 2px solid #0fa36b; outline-offset: 2px; }
.pxd-res-item-edit:active { transform: scale(0.94); }
.pxd-res-item-edit svg { width: 13px; height: 13px; }

/* Tactile : le HTML5 drag & drop ne fonctionne pas au toucher -> masquer la poignée décorative. */
@media (hover: none) and (pointer: coarse) {
    .pxd-res-item { cursor: default; }
    .pxd-res-drag-handle { display: none; }
}


/* ============================================
   14. GESTION DEPENSES (glassmorphism)
   ============================================ */

/* --- Glass wrapper --- */
.pxd-depenses-glass {
    margin: 0 12px;
    padding: 14px;
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 14px;
    box-shadow: 0 10px 30px -5px rgba(15, 163, 107, 0.10), 0 2px 8px rgba(15, 163, 107, 0.05);
    position: relative;
    overflow: hidden;
}

.pxd-depenses-glass::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
    z-index: 0;
    opacity: 0.7;
}

.pxd-depenses-glass > * {
    position: relative;
    z-index: 1;
}

/* --- Header --- */
.pxd-dep-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 2px 4px 14px;
}

.pxd-dep-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pxd-dep-header-left h2 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--pixidia-blue);
}

.pxd-dep-header-sub {
    font-size: 12px;
    color: #778494;
    font-weight: 500;
}

/* --- Summary: total + categories --- */
.pxd-dep-summary {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 14px;
}

.pxd-dep-total-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(15, 163, 107, 0.06);
    position: relative;
    overflow: hidden;
}

.pxd-dep-total-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
    opacity: 0.6;
}

.pxd-dep-total-card > * {
    position: relative;
    z-index: 1;
}

.pxd-dep-total-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: linear-gradient(135deg, #0fa36b 25%, #38c19c 100%);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    box-shadow: 0 3px 8px rgba(15, 163, 107, 0.25);
}

.pxd-dep-total-icon svg {
    width: 18px;
    height: 18px;
    color: white;
}

.pxd-dep-total-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.pxd-dep-total-label {
    font-size: 12px;
    color: #778494;
    font-weight: 500;
}

.pxd-dep-total-amount {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--pixidia-blue);
}

.pxd-dep-total-avg {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    background: rgba(15, 163, 107, 0.08);
    border-radius: var(--radius-full);
    font-size: 13px;
    font-weight: 700;
    color: #0fa36b;
    white-space: nowrap;
}

.pxd-dep-total-avg svg {
    width: 14px;
    height: 14px;
}

.pxd-dep-total-avg small {
    font-weight: 500;
    color: #778494;
    font-size: 11px;
}

/* Category chips */
.pxd-dep-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.pxd-dep-cat-chip {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: var(--radius-full);
    font-size: 11.5px;
    font-weight: 600;
    color: var(--cat-color);
    box-shadow: 0 2px 6px rgba(15, 163, 107, 0.05);
}

.pxd-dep-cat-chip svg {
    width: 13px;
    height: 13px;
}

.pxd-dep-cat-chip strong {
    font-weight: 700;
}

/* --- Participant cards --- */
.pxd-dep-participants {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 14px;
}

.pxd-dep-participant {
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(15, 163, 107, 0.05);
    overflow: hidden;
    transition: all 0.35s ease;
    animation: pxd-tl-fadeIn 0.5s ease both;
    opacity: 0;
    position: relative;
}

.pxd-dep-participant::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

.pxd-dep-participant:hover {
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 12px 36px -5px rgba(15, 163, 107, 0.18), 0 4px 12px rgba(15, 163, 107, 0.06);
    border-color: rgba(15, 163, 107, 0.15);
}

.pxd-dep-participant:hover::before {
    opacity: 0.9;
}

.pxd-dep-participant-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    position: relative;
    z-index: 1;
}

.pxd-dep-participant-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(15, 163, 107, 0.15);
    flex-shrink: 0;
}

.pxd-dep-participant-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.pxd-dep-participant-name {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--pixidia-blue);
}

.pxd-dep-participant-count {
    font-size: 11.5px;
    color: #778494;
    font-weight: 500;
}

.pxd-dep-participant-totals {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    flex-shrink: 0;
}

.pxd-dep-participant-amount {
    font-size: 14px;
    font-weight: 800;
    color: var(--pixidia-blue);
}

.pxd-dep-participant-balance {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: var(--radius-full);
}

.pxd-dep-participant-balance.positive {
    color: #0fa36b;
    background: rgba(15, 163, 107, 0.1);
}

.pxd-dep-participant-balance.negative {
    color: #d32f2f;
    background: rgba(211, 47, 47, 0.08);
}

/* Expense items inside a participant */
.pxd-dep-items {
    border-top: 1px solid rgba(1, 40, 39, 0.06);
    padding: 4px 14px 10px;
    position: relative;
    z-index: 1;
}

.pxd-dep-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
}

.pxd-dep-item + .pxd-dep-item {
    border-top: 1px solid rgba(1, 40, 39, 0.04);
}

.pxd-dep-item-icon {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.pxd-dep-item-icon svg {
    width: 13px;
    height: 13px;
    color: white;
    stroke-width: 2.2;
}

.pxd-dep-item-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.pxd-dep-item-desc {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--pixidia-blue);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pxd-dep-item-meta {
    font-size: 11px;
    color: #778494;
    font-weight: 500;
}

.pxd-dep-item-amount {
    font-size: 13px;
    font-weight: 700;
    color: var(--pixidia-blue);
    flex-shrink: 0;
}

/* --- Manage button (header) --- */
.pxd-dep-manage-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 7px 14px;
    background: linear-gradient(135deg, #0fa36b 25%, #38c19c 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    box-shadow: 0 3px 8px rgba(15, 163, 107, 0.25);
    margin-left: auto;
}

.pxd-dep-manage-btn svg {
    width: 14px;
    height: 14px;
}

.pxd-dep-manage-btn:hover {
    box-shadow: 0 6px 16px rgba(15, 163, 107, 0.35);
    transform: translateY(-1px);
}

/* --- Settlement section --- */
.pxd-dep-settlement {
    padding: 14px;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(15, 163, 107, 0.05);
}

.pxd-dep-settlement-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--pixidia-blue);
    margin-bottom: 10px;
}

.pxd-dep-settlement-header svg {
    width: 16px;
    height: 16px;
    color: #0fa36b;
}

.pxd-dep-settlement-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
}

.pxd-dep-settlement-row + .pxd-dep-settlement-row {
    border-top: 1px solid rgba(1, 40, 39, 0.06);
}

.pxd-dep-settlement-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(15, 163, 107, 0.15);
    flex-shrink: 0;
}

.pxd-dep-settlement-name {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--pixidia-blue);
}

.pxd-dep-settlement-arrow {
    font-size: 12px;
    color: #778494;
}

.pxd-dep-settlement-amount {
    font-size: 13px;
    font-weight: 800;
    color: #0fa36b;
}

/* --- Expense Modal overrides --- */
.pxd-modal--expenses {
    max-width: 580px;
}

/* Tabs */
.pxd-exp-tabs {
    display: flex;
    border-bottom: 1px solid rgba(1, 40, 39, 0.08);
    padding: 0 20px;
}

.pxd-exp-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 8px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    color: #778494;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pxd-exp-tab svg {
    width: 15px;
    height: 15px;
}

.pxd-exp-tab:hover {
    color: var(--pixidia-blue);
}

.pxd-exp-tab.active {
    color: #0fa36b;
    border-bottom-color: #0fa36b;
}

/* Tab content */
.pxd-exp-body {
    padding: 0 !important;
}

.pxd-exp-tab-content {
    display: none;
    padding: 20px;
}

.pxd-exp-tab-content.active {
    display: block;
}

/* Form fields */
.pxd-exp-field {
    margin-bottom: 16px;
}

.pxd-exp-field:last-child {
    margin-bottom: 0;
}

.pxd-exp-field label {
    font-size: 12px;
    font-weight: 700;
    color: var(--pixidia-blue);
    margin-bottom: 7px;
    display: flex;
    align-items: center;
    gap: 5px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.pxd-exp-field label svg {
    width: 13px;
    height: 13px;
    color: #0fa36b;
    stroke-width: 2.2;
}

.pxd-exp-label-hint {
    text-transform: none;
    font-weight: 500;
    color: #9ca3af;
    letter-spacing: 0;
    font-size: 11px;
}

/* Input wrapper with inline icon */
.pxd-exp-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.pxd-exp-input-icon {
    position: absolute;
    left: 12px;
    width: 16px;
    height: 16px;
    color: #9ca3af;
    stroke-width: 1.8;
    pointer-events: none;
    z-index: 1;
    transition: color 0.2s ease;
}

.pxd-exp-input-wrap:focus-within .pxd-exp-input-icon {
    color: #0fa36b;
}

/* Base input */
.pxd-exp-input {
    width: 100%;
    padding: 11px 14px;
    min-height: 44px;
    border: 1.5px solid rgba(1, 40, 39, 0.09);
    border-radius: 10px;
    font-family: inherit;
    font-size: 13.5px;
    color: var(--pixidia-text);
    background-color: rgba(248, 250, 252, 0.8);
    transition: all 0.25s ease;
    box-sizing: border-box;
}

.pxd-exp-input::placeholder {
    color: #b0b8c4;
    font-weight: 400;
}

.pxd-exp-input:hover {
    border-color: rgba(1, 40, 39, 0.18);
    background-color: rgba(255, 255, 255, 0.9);
}

.pxd-exp-input:focus {
    outline: none;
    border-color: #0fa36b;
    box-shadow: 0 0 0 3.5px rgba(15, 163, 107, 0.1);
    background-color: white;
}

/* Validation error states */
.pxd-exp-field--error .pxd-exp-input {
    border-color: #e74c3c;
    box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.1);
}

.pxd-exp-field--error .pxd-exp-input-icon {
    color: #e74c3c;
}

.pxd-exp-error-msg {
    display: block;
    color: #e74c3c;
    font-size: 12px;
    font-weight: 500;
    margin-top: 5px;
    padding-left: 2px;
    animation: pxd-exp-error-in 0.25s ease;
}

@keyframes pxd-exp-error-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Input with icon — left padding */
.pxd-exp-input--icon {
    padding-left: 38px;
}

/* Input with currency suffix */
.pxd-exp-input--currency {
    padding-right: 44px;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.3px;
}

.pxd-exp-input-suffix {
    position: absolute;
    right: 14px;
    font-size: 14px;
    font-weight: 800;
    color: #0fa36b;
    pointer-events: none;
    z-index: 1;
}

/* Category dot (color preview) */
.pxd-exp-cat-dot {
    position: absolute;
    left: 13px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #1976d2;
    z-index: 1;
    pointer-events: none;
    transition: background 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

/* Hide native selects — replaced by custom dropdowns */
select.pxd-exp-input { display: none; }

/* ─── Custom dropdown component ─── */
.pxd-exp-custom-select {
    position: relative;
    width: 100%;
}

.pxd-exp-select-trigger {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    padding-left: 38px;
    padding-right: 38px;
    border: 1.5px solid rgba(1, 40, 39, 0.09);
    border-radius: 10px;
    font-family: inherit;
    font-size: 13.5px;
    color: var(--pixidia-text);
    background-color: rgba(248, 250, 252, 0.8);
    cursor: pointer;
    transition: all 0.25s ease;
    user-select: none;
    min-height: 44px;
}

.pxd-exp-select-trigger:hover {
    border-color: rgba(1, 40, 39, 0.18);
    background-color: rgba(255, 255, 255, 0.95);
}

.pxd-exp-custom-select.open .pxd-exp-select-trigger {
    border-color: #0fa36b;
    box-shadow: 0 0 0 3.5px rgba(15, 163, 107, 0.1);
    background-color: white;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.pxd-exp-select-value {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pxd-exp-select-placeholder {
    color: #b0b8c4;
}

.pxd-exp-select-chevron {
    position: absolute;
    right: 12px;
    width: 16px;
    height: 16px;
    color: #9ca3af;
    stroke-width: 2;
    pointer-events: none;
    transition: transform 0.25s ease, color 0.25s ease;
}

.pxd-exp-custom-select.open .pxd-exp-select-chevron {
    transform: rotate(180deg);
    color: #0fa36b;
}

/* Dropdown panel */
.pxd-exp-select-options {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1.5px solid #0fa36b;
    border-top: none;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(15, 163, 107, 0.06);
    z-index: 200;
    max-height: 260px;
    overflow-y: auto;
    padding: 6px;
}

.pxd-exp-custom-select.open .pxd-exp-select-options {
    display: block;
    animation: pxd-dropdown-in 0.2s ease;
}

@keyframes pxd-dropdown-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Scrollbar styling */
.pxd-exp-select-options::-webkit-scrollbar {
    width: 5px;
}

.pxd-exp-select-options::-webkit-scrollbar-track {
    background: transparent;
}

.pxd-exp-select-options::-webkit-scrollbar-thumb {
    background: rgba(1, 40, 39, 0.12);
    border-radius: 10px;
}

/* Option item */
.pxd-exp-select-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13.5px;
    color: var(--pixidia-text);
    transition: background 0.15s ease;
}

.pxd-exp-select-option:hover {
    background: rgba(15, 163, 107, 0.06);
}

.pxd-exp-select-option.selected {
    background: rgba(15, 163, 107, 0.08);
    font-weight: 600;
    color: #0a7a50;
}

.pxd-exp-select-option.selected::after {
    content: '';
    margin-left: auto;
    width: 16px;
    height: 16px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230fa36b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") no-repeat center;
    flex-shrink: 0;
}

/* Category option dot */
.pxd-exp-opt-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

/* Category option emoji */
.pxd-exp-opt-emoji {
    font-size: 15px;
    line-height: 1;
    flex-shrink: 0;
}

/* Group headers (for linked posts) */
.pxd-exp-select-group {
    padding: 10px 12px 4px;
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--pixidia-blue);
    opacity: 0.7;
}

.pxd-exp-select-group:not(:first-child) {
    margin-top: 4px;
    border-top: 1px solid rgba(1, 40, 39, 0.05);
    padding-top: 10px;
}

/* Group option (indented) */
.pxd-exp-select-option--grouped {
    padding-left: 18px;
    font-size: 13px;
}

/* Payer / Shared avatar selectors */
.pxd-exp-payer-select,
.pxd-exp-shared-select {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.pxd-exp-avatar-btn {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 2.5px solid transparent;
    cursor: pointer;
    overflow: hidden;
    padding: 0;
    background: none;
    transition: all 0.2s ease;
    position: relative;
}

.pxd-exp-avatar-btn img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

.pxd-exp-avatar-btn.selected {
    border-color: #0fa36b;
    box-shadow: 0 0 0 3px rgba(15, 163, 107, 0.2);
}

.pxd-exp-avatar-btn.deselected {
    opacity: 0.35;
    filter: grayscale(40%);
}

.pxd-exp-avatar-btn .pxd-exp-avatar-name {
    position: absolute;
    bottom: -18px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 10px;
    font-weight: 600;
    color: var(--pixidia-blue);
    white-space: nowrap;
}

.pxd-exp-avatar-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.pxd-exp-avatar-wrap .pxd-exp-avatar-label {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--pixidia-blue);
}

/* Participant action buttons */
.pxd-exp-participants-actions {
    display: flex;
    gap: 10px;
    padding: 0 20px;
    margin-bottom: 2px;
}

.pxd-exp-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    border: 1.5px solid rgba(15, 163, 107, 0.2);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: all 0.2s ease;
    background: rgba(15, 163, 107, 0.06);
    color: var(--pixidia-blue);
}

.pxd-exp-action-btn svg {
    width: 14px;
    height: 14px;
    stroke-width: 2.2;
}

.pxd-exp-action-btn--add-participant {
    color: #0fa36b;
    border-color: rgba(15, 163, 107, 0.25);
}

.pxd-exp-action-btn--add-participant:hover {
    background: rgba(15, 163, 107, 0.12);
    border-color: rgba(15, 163, 107, 0.4);
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(15, 163, 107, 0.15);
}

.pxd-exp-action-btn--manage-users {
    color: var(--pixidia-gray-500);
    border-color: rgba(1, 40, 39, 0.1);
    background: rgba(1, 40, 39, 0.03);
}

.pxd-exp-action-btn--manage-users:hover {
    background: rgba(1, 40, 39, 0.07);
    border-color: rgba(1, 40, 39, 0.2);
    color: var(--pixidia-blue);
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(1, 40, 39, 0.08);
}

/* ── Sub-panels (Ajouter participant / Gérer utilisateurs) ── */
.pxd-exp-subpanel {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-radius: inherit;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}

.pxd-exp-subpanel.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.pxd-exp-subpanel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid rgba(15, 163, 107, 0.1);
}

.pxd-exp-subpanel-header h4 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--pixidia-blue);
    display: flex;
    align-items: center;
    gap: 8px;
}

.pxd-exp-subpanel-header h4 svg {
    width: 18px;
    height: 18px;
    color: #0fa36b;
}

.pxd-exp-subpanel-close {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: rgba(1, 40, 39, 0.05);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.pxd-exp-subpanel-close:hover {
    background: rgba(1, 40, 39, 0.1);
}

.pxd-exp-subpanel-close svg {
    width: 16px;
    height: 16px;
    color: var(--pixidia-gray-400);
}

.pxd-exp-subpanel-body {
    flex: 1;
    padding: 20px 24px;
    overflow-y: auto;
}

.pxd-exp-subpanel-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 24px;
    border-top: 1px solid rgba(15, 163, 107, 0.1);
}

/* New participant preview */
.pxd-exp-subpanel-preview {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
    padding: 12px 16px;
    background: rgba(15, 163, 107, 0.06);
    border: 1.5px solid rgba(15, 163, 107, 0.15);
    border-radius: 12px;
    animation: pxd-fadeSlideIn 0.25s ease;
}

.pxd-exp-subpanel-preview-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 2px solid rgba(15, 163, 107, 0.3);
    object-fit: cover;
}

.pxd-exp-subpanel-preview span {
    font-size: 14px;
    font-weight: 600;
    color: var(--pixidia-blue);
}

/* Users list (manage panel) */
.pxd-exp-users-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pxd-exp-user-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(1, 40, 39, 0.06);
    border-radius: 10px;
    transition: background 0.2s, box-shadow 0.2s;
}

.pxd-exp-user-item:hover {
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 2px 8px rgba(15, 163, 107, 0.08);
}

.pxd-exp-user-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pxd-exp-user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid rgba(15, 163, 107, 0.2);
    object-fit: cover;
}

.pxd-exp-user-name {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--pixidia-blue);
}

.pxd-exp-user-role {
    font-size: 11px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 20px;
    background: rgba(15, 163, 107, 0.1);
    color: #0fa36b;
}

.pxd-exp-user-role--author {
    background: rgba(212, 160, 0, 0.1);
    color: #d4a000;
}

.pxd-exp-user-remove {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: rgba(211, 47, 47, 0.06);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    opacity: 0;
}

.pxd-exp-user-item:hover .pxd-exp-user-remove {
    opacity: 1;
}

.pxd-exp-user-remove:hover {
    background: rgba(211, 47, 47, 0.15);
}

.pxd-exp-user-remove svg {
    width: 14px;
    height: 14px;
    color: #d32f2f;
}

@keyframes pxd-fadeSlideIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Expense footer */
.pxd-exp-footer .pxd-modal-btn--save {
    transition: opacity 0.2s ease;
}

.pxd-exp-footer.hide-save .pxd-modal-btn--save {
    display: none;
}

/* History tab */
#exp-tab-history {
    max-height: 420px;
    overflow-y: auto;
    padding: 12px 20px !important;
}

.pxd-exp-history-empty {
    text-align: center;
    padding: 40px 20px;
    color: #778494;
    font-size: 13px;
}

.pxd-exp-history-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
}

.pxd-exp-history-item + .pxd-exp-history-item {
    border-top: 1px solid rgba(1, 40, 39, 0.06);
}

.pxd-exp-history-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.pxd-exp-history-icon svg {
    width: 14px;
    height: 14px;
    color: white;
    stroke-width: 2.2;
}

.pxd-exp-history-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.pxd-exp-history-desc {
    font-size: 13px;
    font-weight: 600;
    color: var(--pixidia-blue);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pxd-exp-history-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #778494;
    font-weight: 500;
}

.pxd-exp-history-payer {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    object-fit: cover;
    border: 1.5px solid rgba(15, 163, 107, 0.15);
}

.pxd-exp-history-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
}

.pxd-exp-history-amount {
    font-size: 13.5px;
    font-weight: 800;
    color: var(--pixidia-blue);
}

.pxd-exp-history-shared {
    display: flex;
}

.pxd-exp-history-shared img {
    width: 20px;
    height: 20px;
    margin-left: -5px;
    border: 2px solid white;
    border-radius: 50%;
    object-fit: cover;
}

.pxd-exp-history-shared img:first-child {
    margin-left: 0;
}

.pxd-exp-history-delete {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: #d32f2f;
    opacity: 0;
    transition: opacity 0.2s ease;
    flex-shrink: 0;
}

.pxd-exp-history-item:hover .pxd-exp-history-delete {
    opacity: 0.6;
}

.pxd-exp-history-delete:hover {
    opacity: 1 !important;
}

.pxd-exp-history-delete svg {
    width: 14px;
    height: 14px;
}

/* ============================================
   EXPENSES — RESPONSIVE (Tablet & Mobile)
   ============================================ */

/* --- Tablet (768-1200px) --- */
@media (max-width: 1200px) and (min-width: 769px) {
    .pxd-dep-total-card {
        gap: 10px;
        padding: 12px 14px;
    }
}

/* --- Mobile (<768px) --- */
@media (max-width: 768px) {
    .pxd-depenses-glass {
        margin: 0 8px;
        padding: 12px;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    /* Summary total card stacks */
    .pxd-dep-total-card {
        flex-wrap: wrap;
        gap: 10px;
    }

    .pxd-dep-total-avg {
        width: 100%;
        justify-content: center;
    }

    /* Category chips wrap */
    .pxd-dep-cats {
        gap: 5px;
    }

    .pxd-dep-cat-chip {
        font-size: 11px;
        padding: 4px 8px;
    }

    /* Participant cards */
    .pxd-dep-participant-head {
        padding: 10px 12px;
        gap: 8px;
    }

    .pxd-dep-items {
        padding: 4px 12px 8px;
    }

    /* Settlement: ensure "who owes who" reads clearly at 375px */
    .pxd-dep-settlement {
        padding: 12px;
    }

    .pxd-dep-settlement-row {
        flex-wrap: wrap;
        gap: 6px;
        align-items: center;
    }

    /* Names truncate rather than wrap mid-word */
    .pxd-dep-settlement-name {
        max-width: 90px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Manage button — prominent on mobile */
    .pxd-dep-manage-btn {
        padding: 10px 18px;
        font-size: 13px;
        min-height: 44px;
    }

    /* Modal form inputs full width */
    .pxd-exp-field {
        margin-bottom: 14px;
    }

    .pxd-exp-input {
        padding: 12px 14px;
        min-height: 44px;
        font-size: 14px;
    }

    .pxd-exp-input--currency {
        font-size: 16px;
    }

    /* Custom dropdown: open upward when near bottom of bottom sheet */
    .pxd-exp-custom-select.open-up .pxd-exp-select-options {
        top: auto;
        bottom: 100%;
        border-top: 1.5px solid #0fa36b;
        border-bottom: none;
        border-radius: 12px 12px 0 0;
    }

    .pxd-exp-custom-select.open-up.open .pxd-exp-select-trigger {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
    }

    /* Payer/shared select: larger touch targets */
    .pxd-exp-avatar-btn {
        width: 48px;
        height: 48px;
    }

    .pxd-exp-payer-select,
    .pxd-exp-shared-select {
        gap: 10px;
    }

    /* Participant action buttons */
    .pxd-exp-participants-actions {
        padding: 0 16px;
        flex-wrap: wrap;
    }

    .pxd-exp-action-btn {
        min-height: 44px;
        padding: 8px 16px;
    }

    /* Sub-panel mobile */
    .pxd-exp-subpanel-header {
        padding: 14px 16px;
    }

    .pxd-exp-subpanel-body {
        padding: 16px;
    }

    .pxd-exp-subpanel-footer {
        padding: 12px 16px;
    }
}

/* --- Small Mobile (<=480px) --- */
@media (max-width: 480px) {
    .pxd-dep-header-left h2 {
        font-size: 1.05rem;
    }

    .pxd-dep-total-amount {
        font-size: 1.15rem;
    }

    .pxd-dep-participant-name {
        font-size: 13px;
    }

    .pxd-dep-participant-amount {
        font-size: 13px;
    }

    .pxd-dep-item {
        gap: 8px;
        padding: 6px 0;
    }

    .pxd-dep-item-desc {
        font-size: 12px;
    }

    .pxd-dep-item-amount {
        font-size: 12px;
    }

    .pxd-dep-item-meta {
        font-size: 10px;
    }

    .pxd-exp-history-item {
        gap: 8px;
        padding: 8px 0;
    }

    .pxd-exp-history-desc {
        font-size: 12px;
    }

    .pxd-exp-history-amount {
        font-size: 12.5px;
    }
}


/* ============================================
   15. AVIS (Glassmorphism)
   ============================================ */

/* --- Glass outer container --- */
.pxd-avis-glass {
    margin: 0 12px;
    padding: 14px;
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 14px;
    box-shadow: 0 10px 30px -5px rgba(255, 193, 7, 0.10),
                0 2px 8px rgba(255, 193, 7, 0.05);
    position: relative;
    overflow: hidden;
}

.pxd-avis-glass::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.4) 0%,
        rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
    z-index: 0;
    opacity: 0.7;
}

.pxd-avis-glass > * {
    position: relative;
    z-index: 1;
}

/* --- Summary card --- */
.pxd-review-summary-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(255, 193, 7, 0.06);
    position: relative;
    overflow: hidden;
    margin-bottom: 14px;
}

.pxd-review-summary-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.4) 0%,
        rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
    opacity: 0.6;
}

.pxd-review-summary-card > * {
    position: relative;
    z-index: 1;
}

.pxd-review-summary-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: linear-gradient(135deg, #ffc107 25%, #ffd54f 100%);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    box-shadow: 0 3px 8px rgba(255, 193, 7, 0.30);
}

.pxd-review-summary-icon svg {
    width: 18px;
    height: 18px;
    color: white;
}

.pxd-review-summary-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.pxd-review-summary-label {
    font-size: 12px;
    color: #778494;
    font-weight: 500;
}

.pxd-review-summary-score {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--pixidia-blue);
}

.pxd-review-summary-score small {
    font-size: 0.75rem;
    font-weight: 600;
    color: #778494;
}

.pxd-review-summary-stars {
    display: flex;
    align-items: center;
    gap: 2px;
}

.pxd-review-summary-stars .pxd-star {
    width: 18px;
    height: 18px;
}

.pxd-review-summary-count {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    background: rgba(255, 193, 7, 0.10);
    border-radius: var(--radius-full);
    font-size: 13px;
    font-weight: 700;
    color: #d4a000;
    white-space: nowrap;
}

.pxd-review-summary-count svg {
    width: 14px;
    height: 14px;
}

/* --- Review cards container --- */
.pxd-review-cards {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 14px;
}

/* --- Individual review card --- */
.pxd-review-card {
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(255, 193, 7, 0.05);
    overflow: hidden;
    transition: all 0.35s ease;
    animation: pxd-tl-fadeIn 0.5s ease both;
    opacity: 0;
    position: relative;
    padding: 14px;
}

.pxd-review-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.35) 0%,
        rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

.pxd-review-card:hover {
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 12px 36px -5px rgba(255, 193, 7, 0.18),
                0 4px 12px rgba(255, 193, 7, 0.06);
    border-color: rgba(255, 193, 7, 0.20);
}

.pxd-review-card:hover::before {
    opacity: 0.9;
}

/* --- Review card header --- */
.pxd-review-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    position: relative;
    z-index: 1;
}

.pxd-review-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 193, 7, 0.20);
    flex-shrink: 0;
}

.pxd-review-author-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.pxd-review-author {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--pixidia-blue);
}

.pxd-review-date {
    font-size: 11.5px;
    color: #778494;
    font-weight: 500;
}

.pxd-review-stars {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
    flex-shrink: 0;
}

.pxd-review-stars .pxd-star {
    width: 14px;
    height: 14px;
}

/* --- Delete review button --- */
.pxd-review-delete {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    border-radius: 6px;
    opacity: 0.35;
    color: #778494;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease, color 0.2s ease, transform 0.2s ease, background 0.2s ease;
    flex-shrink: 0;
    margin-left: 4px;
}

.pxd-review-delete svg {
    width: 15px;
    height: 15px;
}

.pxd-review-delete:hover {
    opacity: 1;
    color: #ef4444;
    background: rgba(239, 68, 68, 0.08);
    transform: scale(1.1);
}

.pxd-review-delete:active {
    transform: scale(0.9);
}

.pxd-review-delete:disabled {
    opacity: 0.2;
    pointer-events: none;
}

/* --- Cancel rating link --- */
.pxd-cancel-rating-link {
    background: none;
    border: none;
    font-family: inherit;
    font-size: 13px;
    color: var(--pixidia-gray-400);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    margin-left: auto;
    transition: color 0.2s ease;
}

.pxd-cancel-rating-link:hover {
    color: #ef4444;
}

.pxd-cancel-rating-link svg {
    width: 14px;
    height: 14px;
}

.pxd-cancel-rating-link:disabled {
    opacity: 0.5;
    pointer-events: none;
}

/* --- Review text --- */
.pxd-review-text {
    font-size: 13.5px;
    color: var(--pixidia-text);
    line-height: 1.55;
    margin: 0;
    position: relative;
    z-index: 1;
}

/* --- Review form --- */
.pxd-review-form {
    padding: 14px;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(255, 193, 7, 0.05);
}

.pxd-review-form-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--pixidia-blue);
    margin-bottom: 12px;
}

.pxd-review-form-header svg {
    width: 16px;
    height: 16px;
    color: #ffc107;
}

.pxd-review-form .pxd-star-rating {
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
}

.pxd-review-textarea {
    width: 100%;
    min-height: 80px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 14px;
    color: var(--pixidia-text);
    resize: vertical;
    margin-bottom: 12px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}

.pxd-review-textarea:focus {
    outline: none;
    border-color: #ffc107;
    box-shadow: 0 0 0 3px rgba(255, 193, 7, 0.15);
}

.pxd-review-textarea::placeholder {
    color: #778494;
}

.pxd-review-form .pxd-btn {
    float: right;
}

/* --- Comment submit button — chat send button style --- */
.pxd-comment-submit {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    float: right;
    padding: 9px 18px;
    border-radius: 10px;
    background: linear-gradient(135deg, #0fa36b 25%, #38c19c 100%);
    color: white;
    border: none;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.9), 0 4px 8px rgba(15, 163, 107, 0.2);
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.pxd-comment-submit svg {
    width: 14px;
    height: 14px;
}

.pxd-comment-submit:hover {
    background: linear-gradient(135deg, #0d8c5a 25%, #2fb08a 100%);
    transform: scale(1.05);
    box-shadow: 0 0 0 2px rgba(255,255,255,1), 0 6px 12px rgba(15, 163, 107, 0.3);
}

.pxd-comment-submit:active {
    background: linear-gradient(135deg, #0a7a4e 25%, #28a07e 100%);
    transform: scale(0.95);
    box-shadow: 0 0 0 2px rgba(255,255,255,0.9), 0 2px 6px rgba(15, 163, 107, 0.2);
}

.pxd-comment-submit:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none !important;
}

/* --- Rating confirmation + optional comment --- */

.pxd-rating-confirmation {
    display: none;
    align-items: center;
    gap: 16px;
    margin-top: 4px;
    animation: pxd-tl-fadeIn 0.3s ease both;
}

.pxd-rating-confirmation.active {
    display: flex;
}

.pxd-rating-thanks {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    font-weight: 600;
    color: #2e7d32;
}

.pxd-rating-thanks svg {
    width: 16px;
    height: 16px;
    color: #2e7d32;
}

.pxd-add-comment-link {
    background: none;
    border: none;
    font-family: inherit;
    font-size: 13px;
    color: var(--pixidia-gray-400);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0;
    transition: color 0.2s ease;
}

.pxd-add-comment-link:hover {
    color: #d4a000;
}

.pxd-add-comment-link svg {
    width: 14px;
    height: 14px;
}

.pxd-comment-section {
    display: none;
    margin-top: 10px;
    animation: pxd-tl-fadeIn 0.3s ease both;
}

.pxd-comment-section.active {
    display: block;
}

/* --- Replies --- */

.pxd-review-replies {
    margin: 10px 0 0 48px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
    z-index: 1;
}

.pxd-reply {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    animation: pxd-tl-fadeIn 0.3s ease both;
}

.pxd-reply--new {
    animation: pxd-tl-fadeIn 0.35s ease both;
}

.pxd-reply-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 193, 7, 0.3);
    object-fit: cover;
    flex-shrink: 0;
}

.pxd-reply-content {
    background: rgba(255, 193, 7, 0.06);
    border: 1px solid rgba(255, 193, 7, 0.10);
    border-radius: 10px;
    padding: 8px 12px;
    flex: 1;
    min-width: 0;
}

.pxd-reply-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 2px;
}

.pxd-reply-author {
    font-weight: 700;
    font-size: 12.5px;
    color: var(--pixidia-blue);
}

.pxd-reply-date {
    font-size: 11px;
    color: var(--pixidia-gray-400);
}

.pxd-reply-text {
    font-size: 13px;
    color: var(--pixidia-gray-600);
    line-height: 1.5;
    margin: 0;
}

/* --- Reply button (author only) --- */

.pxd-reply-btn {
    background: none;
    border: none;
    color: var(--pixidia-gray-400);
    font-size: 12.5px;
    font-family: inherit;
    cursor: pointer;
    transition: color 0.2s ease;
    padding: 4px 0;
    margin-top: 6px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    position: relative;
    z-index: 1;
}

.pxd-reply-btn:hover {
    color: #d4a000;
}

.pxd-reply-btn i,
.pxd-reply-btn svg {
    width: 14px;
    height: 14px;
}

/* --- Reply form (author only) --- */

.pxd-reply-form {
    display: none;
    margin: 8px 0 0 48px;
    gap: 10px;
    align-items: flex-start;
    position: relative;
    z-index: 1;
}

.pxd-reply-form.active {
    display: flex;
    animation: pxd-tl-fadeIn 0.25s ease both;
}

.pxd-reply-form-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.pxd-reply-form-input {
    flex: 1;
    min-width: 0;
}

.pxd-reply-form textarea {
    width: 100%;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 13px;
    color: var(--pixidia-text);
    resize: vertical;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.pxd-reply-form textarea:focus {
    outline: none;
    border-color: #ffc107;
    box-shadow: 0 0 0 3px rgba(255, 193, 7, 0.15);
}

.pxd-reply-form textarea::placeholder {
    color: #778494;
}

.pxd-reply-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 6px;
}

.pxd-reply-cancel {
    background: none;
    border: none;
    color: var(--pixidia-gray-400);
    font-size: 12.5px;
    font-family: inherit;
    cursor: pointer;
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    transition: color 0.2s ease, background 0.2s ease;
}

.pxd-reply-cancel:hover {
    color: var(--pixidia-text);
    background: rgba(0, 0, 0, 0.04);
}

.pxd-reply-form .pxd-reply-submit {
    font-size: 12.5px;
    padding: 6px 14px;
}

.pxd-reply-form .pxd-reply-submit i,
.pxd-reply-form .pxd-reply-submit svg {
    width: 13px;
    height: 13px;
}

/* ============================================
   REVIEWS — RESPONSIVE (Tablet & Mobile)
   ============================================ */

/* --- Tablet (768-1200px) --- */
@media (max-width: 1200px) and (min-width: 769px) {
    .pxd-review-summary-card {
        gap: 10px;
        padding: 12px 14px;
    }
}

/* --- Mobile (<768px) --- */
@media (max-width: 768px) {
    .pxd-avis-glass {
        margin: 0 8px;
        padding: 12px;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    /* Summary card stacks vertically */
    .pxd-review-summary-card {
        flex-direction: column;
        text-align: center;
        gap: 10px;
        padding: 16px;
    }

    .pxd-review-summary-info {
        align-items: center;
    }

    .pxd-review-summary-stars {
        justify-content: center;
    }

    /* Review cards full width */
    .pxd-review-card {
        padding: 12px;
    }

    .pxd-review-header {
        gap: 8px;
    }

    /* Star interactive areas: 44px minimum touch target */
    .pxd-star-rating .pxd-star,
    .pxd-star-rating .pxd-star-btn {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 8px;
        cursor: pointer;
    }

    .pxd-review-form .pxd-star-rating {
        gap: 2px;
    }

    /* Reply thread margin reduced — max 1 level on mobile */
    .pxd-review-replies {
        margin-left: 16px;
    }

    .pxd-reply-form {
        margin-left: 16px;
    }

    /* Prevent nested replies from indenting further on mobile */
    .pxd-review-replies .pxd-review-replies {
        margin-left: 0;
    }

    /* Review text */
    .pxd-review-text {
        font-size: 13px;
    }

    /* Reply btn touch target */
    .pxd-reply-btn {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
}

/* --- Small Mobile (<=480px) --- */
@media (max-width: 480px) {
    .pxd-review-avatar {
        width: 28px;
        height: 28px;
    }

    .pxd-reply-avatar {
        width: 22px;
        height: 22px;
    }

    .pxd-reply-form-avatar {
        width: 22px;
        height: 22px;
    }

    .pxd-review-author {
        font-size: 12.5px;
    }

    .pxd-review-date {
        font-size: 11px;
    }

    .pxd-review-stars .pxd-star {
        width: 12px;
        height: 12px;
    }

    .pxd-reply-author {
        font-size: 12px;
    }

    .pxd-reply-text {
        font-size: 12.5px;
    }

    .pxd-review-summary-score {
        font-size: 1.15rem;
    }
}


/* ============================================
   16. CHAT WIDGET
   ============================================ */

/* --- Chat widget: glassmorphism --- */

.pxd-chat-widget {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 900;
    width: 360px;
    max-height: 580px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.65);
    box-shadow: 0 10px 30px -5px rgba(15, 163, 107, 0.12),
                0 2px 8px rgba(15, 163, 107, 0.06);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transform: translateY(20px) scale(0.96);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.4s ease;
    font-family: 'Urbanist', 'Inter', sans-serif;
}

.pxd-chat-widget--open {
    transform: translateY(0) scale(1);
    opacity: 1;
    pointer-events: auto;
}

/* Header — green gradient */
.pxd-chat-header {
    padding: 14px 16px;
    background: linear-gradient(135deg, #0fa36b 25%, #38c19c 100%);
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    position: relative;
}

.pxd-chat-header::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 100%);
    pointer-events: none;
}

.pxd-chat-header h4 {
    font-size: 14px;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: 0.01em;
    position: relative;
    z-index: 1;
}

.pxd-chat-header h4 svg {
    width: 16px;
    height: 16px;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.15));
}

.pxd-chat-toggle {
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: #fff;
    cursor: pointer;
    padding: 5px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
    position: relative;
    z-index: 1;
}

.pxd-chat-toggle:hover {
    background: rgba(255, 255, 255, 0.28);
}

.pxd-chat-toggle svg {
    width: 16px;
    height: 16px;
}

/* Body */
.pxd-chat-body {
    flex: 1;
    overflow-y: auto;
    padding: 14px;
    min-height: 200px;
    background: rgba(255, 255, 255, 0.3);
}

.pxd-chat-body::-webkit-scrollbar {
    width: 5px;
}

.pxd-chat-body::-webkit-scrollbar-track {
    background: transparent;
}

.pxd-chat-body::-webkit-scrollbar-thumb {
    background: rgba(15, 163, 107, 0.15);
    border-radius: 10px;
}

.pxd-chat-body::-webkit-scrollbar-thumb:hover {
    background: rgba(15, 163, 107, 0.3);
}

/* Messages */
.pxd-chat-messages {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pxd-chat-message {
    display: flex;
    gap: 8px;
    align-items: flex-end;
}

.pxd-chat-message .pxd-avatar--xs {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    flex-shrink: 0;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 2px 6px rgba(15, 163, 107, 0.12);
}

/* Bubble — glass card */
.pxd-chat-bubble {
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 12px 12px 12px 4px;
    padding: 8px 12px;
    max-width: 240px;
    box-shadow: 0 2px 8px rgba(15, 163, 107, 0.06);
    transition: box-shadow 0.2s ease;
}

.pxd-chat-bubble:hover {
    box-shadow: 0 4px 12px rgba(15, 163, 107, 0.12);
}

.pxd-chat-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 3px;
}

.pxd-chat-meta strong {
    font-size: 12px;
    font-weight: 700;
    color: #012827;
    letter-spacing: 0.01em;
}

.pxd-chat-meta span {
    font-size: 10.5px;
    font-weight: 500;
    color: #778494;
}

.pxd-chat-bubble p {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
    color: #2c3e50;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Own messages — green tint */
.pxd-chat-message--own {
    flex-direction: row-reverse;
}

.pxd-chat-message--own .pxd-chat-bubble {
    background: rgba(15, 163, 107, 0.08);
    border-color: rgba(15, 163, 107, 0.15);
    border-radius: 12px 12px 4px 12px;
    box-shadow: 0 2px 8px rgba(15, 163, 107, 0.08);
}

.pxd-chat-message--own .pxd-chat-bubble:hover {
    box-shadow: 0 4px 12px rgba(15, 163, 107, 0.16);
}

.pxd-chat-message--own .pxd-chat-meta strong {
    color: #0d8c5a;
}

/* ── Message grouping ─────────────────────────────────── */

.pxd-chat-message--grouped {
    margin-top: -6px;
}

.pxd-chat-message--grouped .pxd-avatar--xs {
    visibility: hidden;
}

.pxd-chat-message--grouped .pxd-chat-meta {
    display: none;
}

.pxd-chat-message--grouped .pxd-chat-bubble {
    border-radius: 12px;
}

.pxd-chat-message--grouped.pxd-chat-message--own .pxd-chat-bubble {
    border-radius: 12px;
}

/* ── Date separators ──────────────────────────────────── */

.pxd-chat-date-sep {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 16px 0 12px;
    padding: 0 4px;
}

.pxd-chat-date-sep::before,
.pxd-chat-date-sep::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(15, 163, 107, 0.12);
}

.pxd-chat-date-sep span {
    font-size: 11px;
    font-weight: 600;
    color: #778494;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

/* ── Empty state ──────────────────────────────────────── */

.pxd-chat-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 20px;
    text-align: center;
    min-height: 280px;
}

.pxd-chat-empty-illustration {
    position: relative;
    width: 80px;
    height: 80px;
    margin-bottom: 16px;
}

.pxd-chat-empty-icon-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(15, 163, 107, 0.12) 0%, rgba(56, 193, 156, 0.08) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(15, 163, 107, 0.1);
}

.pxd-chat-empty-icon-wrapper svg {
    width: 26px;
    height: 26px;
    color: #0fa36b;
    opacity: 0.6;
}

/* Decorative floating bubbles */
.pxd-chat-empty-bubble {
    position: absolute;
    border-radius: 50%;
    background: rgba(15, 163, 107, 0.1);
}

.pxd-chat-empty-bubble--1 {
    width: 16px;
    height: 16px;
    top: 4px;
    right: 2px;
    opacity: 0.25;
    animation: pxd-chat-float 3s ease-in-out infinite alternate;
}

.pxd-chat-empty-bubble--2 {
    width: 12px;
    height: 12px;
    bottom: 8px;
    left: 4px;
    opacity: 0.18;
    animation: pxd-chat-float 3s ease-in-out infinite alternate;
    animation-delay: 0.8s;
}

.pxd-chat-empty-bubble--3 {
    width: 10px;
    height: 10px;
    top: 12px;
    left: 10px;
    opacity: 0.15;
    animation: pxd-chat-float 3s ease-in-out infinite alternate;
    animation-delay: 1.6s;
}

@keyframes pxd-chat-float {
    0%   { transform: translateY(0); }
    100% { transform: translateY(-6px); }
}

.pxd-chat-empty-title {
    font-size: 15px;
    font-weight: 700;
    color: #012827;
    margin: 0 0 4px;
}

.pxd-chat-empty-subtitle {
    font-size: 12.5px;
    font-weight: 400;
    color: #778494;
    margin: 0 0 16px;
    max-width: 240px;
    line-height: 1.5;
}

.pxd-chat-empty-hint {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 20px;
    background: rgba(15, 163, 107, 0.06);
    font-size: 11px;
    color: #5d7070;
}

.pxd-chat-empty-hint svg {
    width: 12px;
    height: 12px;
    color: #0fa36b;
}

.pxd-chat-empty-hint strong {
    color: #0fa36b;
    font-weight: 700;
}

/* ── Input bar — textarea ────────────────────────────── */

.pxd-chat-input {
    display: flex;
    gap: 8px;
    padding: 12px 14px;
    border-top: 1px solid rgba(15, 163, 107, 0.1);
    background: rgba(255, 255, 255, 0.95);
    flex-shrink: 0;
    position: relative;
    align-items: flex-end;
}

.pxd-chat-input textarea {
    flex: 1;
    padding: 9px 14px;
    border: 1px solid rgba(15, 163, 107, 0.15);
    border-radius: 18px;
    font-family: 'Urbanist', 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #012827;
    background: rgba(255, 255, 255, 0.8);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    resize: none;
    min-height: 36px;
    max-height: 100px;
    overflow-y: auto;
    line-height: 1.4;
}

.pxd-chat-input textarea::placeholder {
    color: #778494;
    font-weight: 400;
}

.pxd-chat-input textarea:focus {
    outline: none;
    border-color: #0fa36b;
    box-shadow: 0 0 0 3px rgba(15, 163, 107, 0.1);
}

.pxd-chat-input button {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, #0fa36b 25%, #38c19c 100%);
    border: none;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.9), 0 4px 8px rgba(15, 163, 107, 0.2);
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.pxd-chat-input button:hover {
    background: linear-gradient(135deg, #0d8c5a 25%, #2fb08a 100%);
    transform: scale(1.08);
    box-shadow: 0 0 0 2px rgba(255,255,255,1), 0 6px 12px rgba(15, 163, 107, 0.3);
}

.pxd-chat-input button:active {
    background: linear-gradient(135deg, #0a7a4e 25%, #28a07e 100%);
    transform: scale(0.95);
    box-shadow: 0 0 0 2px rgba(255,255,255,0.9), 0 2px 6px rgba(15, 163, 107, 0.2);
}

.pxd-chat-input button svg {
    width: 15px;
    height: 15px;
}

/* Send button feedback */
.pxd-chat-input button.pxd-chat-sending {
    opacity: 0.6;
    transform: scale(0.92);
    pointer-events: none;
}

/* ── Autocomplete popup ──────────────────────────────── */

.pxd-chat-ac {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    max-height: 240px;
    overflow-y: auto;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(15, 163, 107, 0.12);
    border-bottom: none;
    border-radius: 12px 12px 0 0;
    box-shadow: 0 -4px 16px rgba(1, 40, 39, 0.08);
    z-index: 10;
    padding: 6px 0;
}

.pxd-chat-ac::-webkit-scrollbar {
    width: 4px;
}

.pxd-chat-ac::-webkit-scrollbar-thumb {
    background: rgba(15, 163, 107, 0.15);
    border-radius: 10px;
}

.pxd-chat-ac-group {
    padding: 8px 14px 4px;
    font-size: 10px;
    font-weight: 700;
    color: #778494;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.pxd-chat-ac-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 14px;
    cursor: pointer;
    transition: background 0.12s ease;
}

.pxd-chat-ac-item:hover,
.pxd-chat-ac-item--active {
    background: rgba(15, 163, 107, 0.06);
}

.pxd-chat-ac-icon {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pxd-chat-ac-icon svg {
    width: 14px;
    height: 14px;
    color: #fff;
}

.pxd-chat-ac-label {
    font-size: 13px;
    font-weight: 500;
    color: #1a2e2e;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

/* ── Reference chips in messages ─────────────────────── */

.pxd-chat-ref {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 11.5px;
    font-weight: 600;
    background: rgba(93, 112, 112, 0.1);
    color: #5d7070;
    cursor: pointer;
    transition: background 0.15s ease;
    vertical-align: baseline;
    line-height: 1.5;
}

.pxd-chat-ref--resolved {
    background: color-mix(in srgb, var(--ref-color, #5d7070) 12%, white);
    color: var(--ref-color, #5d7070);
}

.pxd-chat-ref:hover {
    background: color-mix(in srgb, var(--ref-color, #5d7070) 20%, white);
}

.pxd-chat-ref svg {
    width: 12px;
    height: 12px;
}

/* User mention styling */
.pixidia-chat-mention {
    color: #0d8c5a;
    font-weight: 600;
    cursor: pointer;
}

/* ============================================
   CHAT WIDGET — RESPONSIVE (Tablet & Mobile)
   ============================================ */

/* --- Tablet (768-1200px) --- */
@media (max-width: 1200px) and (min-width: 769px) {
    .pxd-chat-widget {
        width: 320px;
    }
}

/* --- Mobile (<768px) --- */
@media (max-width: 768px) {
    .pxd-chat-widget {
        width: calc(100% - 24px);
        left: 12px;
        right: 12px;
        bottom: 80px;
        max-height: 70vh;
        border-radius: 14px;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        /* Shift up when virtual keyboard is open */
        transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                    box-shadow 0.4s ease, bottom 0.2s ease;
    }

    .pxd-chat-body {
        min-height: 160px;
        padding: 12px;
    }

    .pxd-chat-bubble {
        max-width: 75%;
    }

    .pxd-chat-input {
        padding: 10px 12px;
        /* Safe area padding for notched iPhones */
        padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    }

    .pxd-chat-input textarea {
        padding: 10px 14px;
        font-size: 14px;
        min-height: 44px;
    }

    .pxd-chat-input button {
        width: 44px;
        height: 44px;
        border-radius: 12px;
    }

    .pxd-chat-header {
        padding: 12px 14px;
    }

    .pxd-chat-toggle {
        width: 36px;
        height: 36px;
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .pxd-chat-ac {
        max-height: 200px;
    }
}

/* --- Small Mobile (<=480px) --- */
@media (max-width: 480px) {
    .pxd-chat-bubble {
        max-width: 85%;
    }

    .pxd-chat-bubble p {
        font-size: 14px;
        line-height: 1.5;
    }

    .pxd-chat-meta strong {
        font-size: 11.5px;
    }

    .pxd-chat-meta span {
        font-size: 10px;
    }

    .pxd-chat-header h4 {
        font-size: 13px;
    }
}

/* ============================================
   17. MAP OVERLAYS
   ============================================ */

.pxd-map-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.pxd-map-canvas {
    width: 100%;
    height: 100%;
}

/* Leaflet tiles — remove any inherited borders/outlines */
.pxd-map-canvas img,
.leaflet-tile,
.leaflet-tile-pane img {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Remove focus outline (prevents black rectangle on click/tab) */
.leaflet-container:focus,
.leaflet-container:focus-visible {
    outline: none !important;
}

.pxd-map-legend {
    position: absolute;
    bottom: 12px;
    left: 12px;
    right: 12px;
    z-index: 500;
    display: flex;
    gap: 0.3rem;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 0.45rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 10px 30px -5px rgba(15, 163, 107, 0.12), 0 2px 8px rgba(15, 163, 107, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.65);
    transition: box-shadow 0.4s cubic-bezier(0.4, 0.2, 0.2, 1);
}

.pxd-map-legend:hover {
    box-shadow: 0 15px 40px -5px rgba(15, 163, 107, 0.18), 0 5px 15px rgba(15, 163, 107, 0.08);
}

.pxd-legend-item {
    display: grid;
    grid-template-columns: 24px auto auto;
    align-items: center;
    gap: 0 5px;
    cursor: pointer;
    padding: 0.3rem 0.5rem;
    border-radius: 8px;
    color: #012827;
    user-select: none;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.65);
    box-shadow: 0 4px 10px rgba(15, 163, 107, 0.07);
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    overflow: hidden;
    animation: pxd-legendFadeUp 0.5s ease forwards;
    opacity: 0;
}

.pxd-legend-item::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 100%);
    z-index: 0;
    opacity: 0.6;
    border-radius: inherit;
    transition: opacity 0.3s ease;
}

.pxd-legend-item:nth-child(1) { animation-delay: 0.05s; }
.pxd-legend-item:nth-child(2) { animation-delay: 0.1s; }
.pxd-legend-item:nth-child(3) { animation-delay: 0.15s; }
.pxd-legend-item:nth-child(4) { animation-delay: 0.2s; }
.pxd-legend-item:nth-child(5) { animation-delay: 0.25s; }

@keyframes pxd-legendFadeUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.pxd-legend-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 40px -5px rgba(15, 163, 107, 0.20), 0 5px 15px rgba(15, 163, 107, 0.08);
    background: rgba(255, 255, 255, 0.92);
}

.pxd-legend-item:hover::before {
    opacity: 0.9;
}

/* --- Inactive state (not .active) --- */
.pxd-legend-item:not(.active) {
    background: rgba(240, 242, 245, 0.6);
    border-color: rgba(200, 205, 212, 0.4);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06);
}

.pxd-legend-item:not(.active) .pxd-legend-dot {
    background-color: #b0b8c4 !important;
    box-shadow: none;
}

.pxd-legend-item:not(.active) svg,
.pxd-legend-item:not(.active) i {
    color: rgba(255, 255, 255, 0.6);
}

.pxd-legend-item:not(.active) .pxd-legend-label {
    color: #b0b8c4;
}

.pxd-legend-item:not(.active) .pxd-legend-count {
    color: #b0b8c4;
    background: rgba(176, 184, 196, 0.12);
}

.pxd-legend-item:not(.active):hover {
    transform: translateY(-1px);
    background: rgba(245, 247, 250, 0.8);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 10px rgba(0, 0, 0, 0.06);
}

.pxd-legend-item:not(.active):hover .pxd-legend-dot {
    transform: none;
}

.pxd-legend-item:not(.active):hover .pxd-legend-label {
    color: #8a93a1;
}

.pxd-legend-dot {
    grid-column: 1;
    grid-row: 1;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    flex-shrink: 0;
    box-shadow: 0 0 0 1.5px rgba(255,255,255,0.9), 0 3px 6px rgba(0, 0, 0, 0.12);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    z-index: 1;
}

.pxd-legend-item:hover .pxd-legend-dot {
    transform: scale(1.1) rotate(-5deg);
    box-shadow: 0 0 0 2px rgba(255,255,255,1), 0 6px 12px rgba(0, 0, 0, 0.15);
}

.pxd-map-controls {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 500;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pxd-map-btn {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    background: white;
    border: none;
    cursor: pointer;
    box-shadow: var(--shadow-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pixidia-text);
}

.pxd-map-btn:hover {
    background: var(--pixidia-gray-50);
}

/* Same active signal as the panel tabs (--pxd-active-grad), instead of the flat
   #208D3E it used to carry. Every state is declared: BuddyX defines global
   :hover/:focus/:active on buttons and takes back whatever is left undeclared. */
.pxd-map-btn.active,
.pxd-map-btn.active:hover,
.pxd-map-btn.active:focus,
.pxd-map-btn.active:focus-visible,
.pxd-map-btn.active:active {
    background: var(--pxd-active-grad);
    color: #fff;
    box-shadow: var(--pxd-active-shadow);
}

.pxd-map-btn.active:hover {
    box-shadow: var(--pxd-active-shadow-hover);
}

.pxd-map-btn:focus-visible {
    outline: none;
    box-shadow: var(--pxd-active-ring), 0 4px 10px rgba(15, 163, 107, 0.12);
}

.pxd-map-btn svg {
    width: 18px;
    height: 18px;
}

/* Popups carte Leaflet — matches single-plugin popup pattern */
.pxd-map-popup .leaflet-popup-content-wrapper {
    border-radius: 16px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18) !important;
    padding: 0 !important;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.pxd-map-popup .leaflet-popup-content {
    margin: 0 !important;
    width: 260px !important;
}

.pxd-map-popup .leaflet-popup-tip-container {
    text-align: center;
    margin-left: -20px;
    left: 50%;
}

.pxd-map-popup .leaflet-popup-tip {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
    margin: -10px auto 0;
}

/* Rich popup container */
.pxd-popup-rich {
    display: flex;
    flex-direction: column;
}

.pxd-popup-photo {
    width: 100%;
    height: 130px;
    overflow: hidden;
    position: relative;
}

.pxd-popup-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pxd-popup-body {
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Type badge */
.pxd-popup-type {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 8px;
    border-radius: var(--radius-full, 50px);
    width: fit-content;
}

/* Title */
.pxd-popup-rich .pxd-popup-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--pixidia-text, #1a1a1a);
    line-height: 1.3;
    margin: 0;
}

/* Rating row: score + stars + count */
.pxd-popup-rating {
    display: flex;
    align-items: center;
    gap: 4px;
}

.pxd-popup-score {
    font-size: 13px;
    font-weight: 700;
    color: var(--pixidia-text, #1a1a1a);
}

.pxd-popup-stars {
    display: flex;
    align-items: center;
    gap: 1px;
}

.pxd-popup-star {
    width: 13px;
    height: 13px;
}

.pxd-popup-star--full { fill: #fbbc04; }
.pxd-popup-star--half { fill: url(#ph); }
.pxd-popup-star--empty { fill: #e0e0e0; }

.pxd-popup-count {
    font-size: 11px;
    color: var(--pixidia-text-muted, #888);
    margin-left: 2px;
}

/* Address */
.pxd-popup-rich .pxd-popup-address {
    font-size: 11.5px;
    color: var(--pixidia-text-muted, #888);
    display: flex;
    align-items: flex-start;
    gap: 4px;
    line-height: 1.4;
}

.pxd-popup-rich .pxd-popup-address svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    margin-top: 1px;
}

/* Google Maps CTA button */
.pxd-popup-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 14px;
    margin-top: 4px;
    border-radius: var(--radius-full, 50px);
    background: white;
    border: 1.5px solid var(--pixidia-gray-200, #e0e0e0);
    font-size: 12px;
    font-weight: 600;
    color: var(--pixidia-text, #1a1a1a);
    text-decoration: none;
    cursor: pointer;
    transition: all 0.25s ease;
}

.pxd-popup-cta:hover {
    border-color: #4285F4;
    color: #4285F4;
    box-shadow: 0 2px 8px rgba(66, 133, 244, 0.15);
}

.pxd-popup-cta svg:last-child {
    opacity: 0.4;
    transition: opacity 0.2s;
}

.pxd-popup-cta:hover svg:last-child {
    opacity: 1;
}

/* Tooltips carte Leaflet (hover) — style nav-label */
.pxd-map-tooltip {
    background: linear-gradient(135deg, #0fa36b 25%, #38c19c 100%) !important;
    color: white !important;
    font-family: 'Urbanist', sans-serif;
    font-size: 11.5px;
    font-weight: 600;
    padding: 5px 12px !important;
    border-radius: 8px !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(15, 163, 107, 0.25);
    letter-spacing: 0.01em;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
}

.pxd-map-tooltip::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -4px;
    transform: translateX(-50%) rotate(45deg);
    width: 8px;
    height: 8px;
    background: #38c19c;
    box-shadow: none;
    border: none;
}

/* Override Leaflet default tooltip arrow */
.pxd-map-tooltip.leaflet-tooltip-top::before {
    border: none !important;
    margin: 0 !important;
}

.pxd-map-tooltip-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35);
}

.pxd-map-tooltip-label {
    color: white;
    line-height: 1.2;
}

/* Route segment tooltips (hover on polylines) */
.pxd-route-tooltip {
    background: rgba(255, 255, 255, 0.96) !important;
    color: var(--pixidia-text, #333) !important;
    font-family: 'Urbanist', sans-serif;
    font-size: 12.5px;
    font-weight: 500;
    padding: 8px 14px !important;
    border-radius: 10px !important;
    border: none !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15), 0 1px 4px rgba(0, 0, 0, 0.08);
    white-space: nowrap;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.pxd-route-tooltip::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -5px;
    transform: translateX(-50%) rotate(45deg);
    width: 10px;
    height: 10px;
    background: rgba(255, 255, 255, 0.96);
    border: none;
}

.pxd-route-tooltip.leaflet-tooltip-top::before {
    border: none !important;
    margin: 0 !important;
}

.pxd-route-tooltip-inner {
    display: flex;
    align-items: center;
    gap: 6px;
}

.pxd-route-tooltip-inner strong {
    font-weight: 700;
    color: var(--pixidia-text, #333);
}

.pxd-route-tooltip-sep {
    color: var(--pixidia-text-muted, #bbb);
    font-weight: 300;
}

.pxd-route-tooltip-step {
    background: var(--pixidia-green, #1E9B52);
    color: white;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: var(--radius-full, 50px);
    letter-spacing: 0.5px;
}

.pxd-route-tooltip-meta {
    color: var(--pixidia-text-muted, #666);
    font-weight: 500;
}

/* Directional arrows on route segments */
.pxd-route-arrow {
    background: transparent !important;
    border: none !important;
    pointer-events: none;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

/* ============================================
   18. MOBILE MAP TOGGLE
   ============================================ */

.pxd-mobile-map-toggle {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 950;
    padding: 12px 24px;
    border-radius: var(--radius-full);
    background: var(--pixidia-blue);
    color: white;
    border: none;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    box-shadow: var(--shadow-xl);
    cursor: pointer;
    gap: 8px;
    align-items: center;
    /* Ensure minimum 44px touch target */
    min-height: 44px;
}

.pxd-mobile-map-toggle svg {
    width: 18px;
    height: 18px;
}

@media (max-width: 768px) {
    .pxd-mobile-map-toggle {
        display: flex;
    }
}

/* ============================================
   MAP BOTTOM SHEET - MOBILE (<768px)
   ============================================ */

/* Drag handle for map bottom sheet */
.pxd-map-drag-handle {
    display: none;
}

@media (max-width: 768px) {
    .pxd-map-drag-handle {
        display: flex;
        justify-content: center;
        padding: 10px 0 6px;
        cursor: grab;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        z-index: 601;
        background: transparent;
        /* Enlarged touch area */
        min-height: 28px;
    }

    .pxd-map-drag-handle:active {
        cursor: grabbing;
    }

    .pxd-map-drag-handle::after {
        content: '';
        width: 40px;
        height: 4px;
        border-radius: 2px;
        background: var(--pixidia-gray-300, #b8c5c5);
    }

    .pxd-panel-right {
        border-radius: 16px 16px 0 0;
        overflow: hidden;
    }

    /* Snap positions via JS-set classes */
    .pxd-panel-right.pxd-map-peek {
        height: 20vh !important;
    }

    .pxd-panel-right.pxd-map-half {
        height: 50vh !important;
    }

    .pxd-panel-right.pxd-map-full {
        height: 90vh !important;
    }

    /* Legend: compact, horizontal scroll in all mobile modes */
    .pxd-map-legend {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        bottom: 6px;
        left: 8px;
        right: 8px;
        padding: 0.3rem;
        /* Ensure it doesn't overlap Leaflet zoom controls (top-left) */
        max-height: 48px;
    }

    .pxd-map-legend::-webkit-scrollbar {
        display: none;
    }

    .pxd-legend-item {
        flex-shrink: 0;
        padding: 0.25rem 0.4rem;
        font-size: 11px;
        /* 44px min touch target height */
        min-height: 36px;
    }

    /* Legend label hidden in peek mode to save space */
    .pxd-map-peek .pxd-legend-label {
        display: none;
    }

    /* Reposition zoom controls when map is expanded */
    .pxd-map-full .pxd-map-controls,
    .pxd-map-half .pxd-map-controls {
        top: 16px;
        right: 12px;
    }

    /* Leaflet popups: narrower on mobile */
    .pxd-map-popup .leaflet-popup-content {
        width: 230px !important;
    }

    .pxd-popup-photo {
        height: 110px;
    }

    .pxd-popup-body {
        padding: 12px 14px 14px;
    }

    .pxd-popup-rich .pxd-popup-title {
        font-size: 14px;
    }

    /* Marker tap area: enlarge via padding on the icon container */
    .pxd-marker-icon {
        padding: 6px;
        box-sizing: content-box;
    }

    /* Map panel transition */
    .pxd-panel-right {
        transition: height 400ms cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
}


/* ─────────────────────────────────────────────────────────────────
   Segments v2 (2026-07-04) — badges mode, chips d'étape, popup segment,
   chip jour du tooltip. Les styles PORTEURS DE SENS des segments
   (couleurs/dash/épaisseurs) restent des options Leaflet (attributs SVG,
   insensibles à l'UCSS) ; cette CSS ne porte que l'accessoire.
   ───────────────────────────────────────────────────────────────── */

.pxd-mode-badge-wrap {
    background: none !important;
    border: none !important;
}

.pxd-mode-badge {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: #fff;
    border: 2px solid currentColor;
    border-radius: 50%;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

.pxd-mode-badge svg,
.pxd-mode-badge i {
    width: 13px;
    height: 13px;
    display: block;
}

.pxd-mode-badge__chip {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 15px;
    height: 15px;
    padding: 0 3px;
    background: #1E9B52;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 15px;
    text-align: center;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    font-family: 'Urbanist', Arial, sans-serif;
}

.pxd-route-tooltip-day {
    display: inline-block;
    padding: 2px 8px;
    background: rgba(30, 155, 82, 0.12);
    color: #1E9B52;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: var(--radius-full, 50px);
}

/* (bloc popup segment v1 retiré — remplacé plus bas par le design harmonisé pxd-popup-rich) */

@media (max-width: 768px) {
    .pxd-mode-badge {
        width: 20px;
        height: 20px;
    }
    .pxd-mode-badge svg,
    .pxd-mode-badge i {
        width: 11px;
        height: 11px;
    }
    .pxd-mode-badge__chip {
        min-width: 13px;
        height: 13px;
        font-size: 9px;
        line-height: 13px;
    }
}


/* ─────────────────────────────────────────────────────────────────
   Popup segment v2 (2026-07-04) — même langage que les popups de
   points (pxd-popup-rich / pxd-popup-type / pxd-popup-cta) : chips,
   itinéraire origine→destination façon directions, CTA pill.
   + suppression du focus ring navigateur (cadres noirs) sur les
   tracés SVG cliqués.
   ───────────────────────────────────────────────────────────────── */

/* Cadres noirs parasites : focus ring Chrome sur la bbox des paths */
.leaflet-container path.leaflet-interactive:focus,
.leaflet-container path.leaflet-interactive:focus-visible,
.leaflet-container svg:focus,
.leaflet-container canvas:focus {
    outline: none !important;
}

.pxd-seg-popup .pxd-popup-body {
    gap: 10px;
}

.pxd-seg-popup__chips {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
}

.pxd-seg-popup__mode {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.pxd-seg-popup__mode svg,
.pxd-seg-popup__mode i {
    width: 11px;
    height: 11px;
}

.pxd-seg-popup__chip-day {
    color: #1E9B52;
    background: rgba(30, 155, 82, 0.12);
}

.pxd-seg-popup__chip-step {
    color: #fff;
    background: var(--pixidia-green, #1E9B52);
}

/* Itinéraire origine → destination (points reliés, libellés complets) */
.pxd-seg-popup__itin {
    display: flex;
    flex-direction: column;
    position: relative;
}

.pxd-seg-popup__stop {
    display: flex;
    align-items: flex-start;
    gap: 9px;
}

.pxd-seg-popup__place {
    font-size: 13px;
    font-weight: 600;
    color: var(--pixidia-text, #1a1a1a);
    line-height: 1.35;
    padding-top: 1px;
}

.pxd-seg-popup__dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 5px;
    margin-left: 1px;
    box-sizing: border-box;
}

.pxd-seg-popup__dot--from {
    background: #fff;
    border: 2.5px solid currentColor;
}

.pxd-seg-popup__dot--to {
    border: none;
}

.pxd-seg-popup__connector {
    width: 0;
    height: 14px;
    margin-left: 5px;
    border-left: 2px dotted var(--pixidia-gray-300, #cfd8dc);
}

.pxd-seg-popup__meta {
    align-items: center !important;
    font-size: 12px !important;
    font-weight: 500;
}

.pxd-seg-popup__meta svg {
    margin-top: 0 !important;
}

.pxd-seg-popup__meta-sep {
    color: var(--pixidia-gray-300, #cfd8dc);
    margin: 0 2px;
}

/* CTA : hérite du pill pxd-popup-cta, hover vert Pixidia (pas bleu Google) */
.pxd-seg-popup__cta {
    width: 100%;
    font-family: inherit;
}

.pxd-seg-popup__cta:hover {
    border-color: var(--pixidia-green, #1E9B52);
    color: var(--pixidia-green, #1E9B52);
    box-shadow: 0 2px 8px rgba(30, 155, 82, 0.18);
}

/* CTA Google Maps : pill identique, hover bleu Google (hérité de pxd-popup-cta) */
.pxd-seg-popup__gmaps {
    width: 100%;
    margin-top: -4px;
}

/* Logo Viator dans le CTA du popup carte (mode viator) */
.pxd-popup-cta img.pxd-popup-cta-logo{width:15px;height:15px;max-width:15px;max-height:15px;object-fit:contain;flex-shrink:0}

/* ─────────────────────────────────────────────────────────────────
   Propositions de Pixi (refonte L3, 2026-09-23) : repères de lieux pas
   encore dans le voyage, leur popup et la pastille « N propositions ✕ ».
   Hors drapeau L3, la couche n'est jamais alimentée : règles inertes.
   ───────────────────────────────────────────────────────────────── */

/* Repère : la goutte du voyage, évidée ; contour pointillé à la couleur du type
   (currentColor, posée sur le svg par le manager ; à défaut, l'encre de la marque).
   Leaflet place la racine par transform : on anime le svg, jamais elle. */
.pxd-marker--proposal {
    color: var(--pixidia-blue, #012827);
    transition: opacity 250ms var(--ease-smooth, ease);
}

.pxd-marker--proposal svg {
    overflow: visible;
    transform-origin: 50% 100%;
    filter: drop-shadow(0 2px 3px rgba(1, 40, 39, 0.3));
    transition: transform var(--duration-fast, 150ms) var(--ease-smooth, ease);
}

.pxd-marker--proposal svg > path {
    fill: #fff;
    stroke: currentColor;
    stroke-width: 2;
    stroke-dasharray: 4 3;
}

/* Entrée : seulement à l'arrivée (.is-entering), pas quand une mise en avant recrée l'icône. */
.pxd-marker--proposal.is-entering svg { animation: pxd-proposal-in 420ms var(--ease-bounce, ease-out) backwards; }
.pxd-marker--proposal:hover svg { transform: translateY(-2px) scale(1.06); }
.pxd-marker--proposal:hover svg > path { stroke-dasharray: none; }
.pxd-marker--proposal:focus-visible { outline: 2px solid #0fa36b; outline-offset: 2px; border-radius: 10px; }
.pxd-marker--proposal:active svg { transform: scale(0.96); filter: drop-shadow(0 1px 1px rgba(1, 40, 39, 0.25)); }

/* Deux tours sans nouvelle proposition : la couche s'estompe, puis disparaît. */
.pxd-marker--proposal.is-fading, .pxd-map-proposals.is-fading { opacity: 0.5; }

@keyframes pxd-proposal-in {
    0%   { transform: scale(0.6); opacity: 0; }
    60%  { transform: scale(1.12); opacity: 1; }
    100% { transform: scale(1); }
}

/* Popup d'un repère proposé : coquille des popups de la carte (260/230 px). « Ajouter »
   = pilule .pxd-popup-cta, vert Pixidia au lieu du bleu Google, texte à l'encre (AA). */
.pxd-map-popup--proposal .pxd-popup-cta {
    width: 100%;
    font-family: inherit;
    color: var(--pixidia-blue, #012827);
}

.pxd-map-popup--proposal .pxd-popup-cta:hover { border-color: #0fa36b; background: rgba(15, 163, 107, 0.06); color: var(--pixidia-blue, #012827); box-shadow: 0 2px 8px rgba(15, 163, 107, 0.18); }
.pxd-map-popup--proposal .pxd-popup-cta:focus-visible { outline: none; border-color: #0fa36b; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #0fa36b; }
.pxd-map-popup--proposal .pxd-popup-cta:active { transform: scale(0.96); background: rgba(15, 163, 107, 0.12); box-shadow: none; }

/* Pastille « N propositions ✕ » entre le zoom et les boutons de la carte (12 + 36 + 8 px) ; un clic
   retire la couche. Une ligne (points de suspension). Aucun display : absolue, elle est bloc, et [hidden] garde la main. */
.pxd-map-proposals {
    position: absolute;
    top: 12px;
    right: 56px;
    z-index: 500;
    max-width: calc(100% - 112px);
    height: 36px;
    margin: 0;
    padding: 0 14px;
    border: 1px solid rgba(1, 40, 39, 0.10);
    border-radius: var(--radius-full, 100px);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: var(--shadow-md);
    color: var(--pixidia-blue, #012827);
    font: 700 12px/34px 'Urbanist', 'Inter', sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    transition: background-color 150ms ease, box-shadow 150ms ease, opacity 250ms ease, transform 150ms ease;
}

.pxd-map-proposals__close { margin-left: 6px; }
.pxd-map-proposals:hover { background: #fff; box-shadow: var(--shadow-lg); }
.pxd-map-proposals:focus-visible { outline: none; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #0fa36b, var(--shadow-md); }
.pxd-map-proposals:active { transform: scale(0.96); box-shadow: var(--shadow-xs); }
.pxd-panel-right[data-mode="pixi-full"] .pxd-map-proposals { top: 6px; right: 42px; height: 30px; line-height: 28px; }

/* Feuille du bas : la pastille passe au-dessus du bouton de fermeture (1200). */
@media (max-width: 768px) {
    .pxd-map-proposals { z-index: 1201; height: 40px; line-height: 38px; }
}

@media (prefers-reduced-motion: reduce) {
    .pxd-marker--proposal, .pxd-marker--proposal svg, .pxd-map-proposals { transition: none; }
    .pxd-marker--proposal.is-entering svg { animation: none; }
    .pxd-marker--proposal:hover svg,
    .pxd-marker--proposal:active svg,
    .pxd-map-popup--proposal .pxd-popup-cta:active,
    .pxd-map-proposals:active { transform: none; }
}

/* ── Refonte L3, passe 9 (A7) : feuille du telephone, sous drapeau ([data-pxd-l3="1"], pose par panel-toggle.js) ──────────────
   Verre de niveau 2 et ombre haute a tous les crans : au cran « apercu », la feuille etait transparente (rgba(0,0,0,0), mesure du
   24/09) et ses onglets, la mention de Pixi et la barre d'outils se lisaient par-dessus les volets de la page ; a mi-hauteur et en
   plein ecran, la conversation laissait voir la page au travers. Pastille « N propositions » : zone de toucher de 44 px (A3). */
@media (max-width: 768px) {
    .pxd-panel-right[data-pxd-l3="1"] {
        background: rgba(255, 255, 255, 0.92);
        -webkit-backdrop-filter: blur(16px);
        backdrop-filter: blur(16px);
        box-shadow: 0 -12px 32px -14px rgba(1, 40, 39, 0.3), 0 -1px 0 rgba(1, 40, 39, 0.06);
    }
    .pxd-panel-right[data-pxd-l3="1"] .pxd-map-proposals::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        height: 44px;
        transform: translateY(-50%);
    }
}

/* ============================================
   SHARE MODAL
   ============================================ */

.pxd-modal--share {
    max-width: 440px;
}

.pxd-modal--share .pxd-modal-body {
    padding: 20px 24px 24px;
}

/* Copy link row */
.pxd-share-link-row {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
}

.pxd-share-link-input {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid var(--pixidia-gray-200, #d5dfdf);
    border-radius: 10px;
    font-family: 'Urbanist', sans-serif;
    font-size: 0.875rem;
    color: var(--pixidia-gray-700, #3a5252);
    background: var(--pixidia-gray-50, #f5f8f8);
    outline: none;
    min-width: 0;
}

.pxd-share-link-input:focus {
    border-color: var(--pixidia-secondary, #1E9B52);
}

.pxd-share-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    border: none;
    border-radius: 10px;
    font-family: 'Urbanist', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    background: var(--pixidia-primary, #0A3D3A);
    color: #fff;
    transition: background 200ms ease, transform 100ms ease;
}

.pxd-share-copy-btn:hover {
    background: var(--pixidia-primary-dark, #072e2c);
}

.pxd-share-copy-btn:active {
    transform: scale(0.97);
}

.pxd-share-copy-btn--copied {
    background: var(--pixidia-secondary, #1E9B52) !important;
}

.pxd-share-copy-btn svg,
.pxd-share-copy-btn i {
    width: 16px;
    height: 16px;
}

/* Label */
.pxd-share-label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--pixidia-gray-500, #6b8585);
    margin: 0 0 12px;
}

/* Social buttons grid */
.pxd-share-socials {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

@media (max-width: 480px) {
    .pxd-share-socials {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .pxd-share-social-btn {
        min-height: 72px;
        padding: 16px 8px;
    }

    .pxd-share-link-row {
        flex-direction: column;
        gap: 8px;
    }

    .pxd-share-copy-btn {
        width: 100%;
        justify-content: center;
        min-height: 44px;
    }
}

.pxd-share-social-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 8px;
    border: 1px solid var(--pixidia-gray-200, #d5dfdf);
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    font-family: 'Urbanist', sans-serif;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--pixidia-gray-700, #3a5252);
    transition: border-color 200ms ease, background 200ms ease, transform 100ms ease;
}

.pxd-share-social-btn:hover {
    border-color: var(--pixidia-gray-300, #b8c5c5);
    background: var(--pixidia-gray-50, #f5f8f8);
}

.pxd-share-social-btn:active {
    transform: scale(0.96);
}

.pxd-share-social-btn svg,
.pxd-share-social-btn i {
    width: 22px;
    height: 22px;
}

/* Social brand colors */
.pxd-share-social-btn--whatsapp svg { color: #25D366; }
.pxd-share-social-btn--facebook svg { color: #1877F2; }
.pxd-share-social-btn--twitter svg  { color: #000; }
.pxd-share-social-btn--email svg,
.pxd-share-social-btn--email i      { color: var(--pixidia-primary, #0A3D3A); }

/* ============================================
   IMAGE MODAL — Unsplash Grid Spinner
   ============================================ */

.pxd-img-grid-spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 60px 20px;
    grid-column: 1 / -1;
}

.pxd-img-grid-spinner-circle {
    width: 40px;
    height: 40px;
    border: 3px solid var(--pixidia-gray-200, #d5dfdf);
    border-top-color: var(--pixidia-secondary, #1E9B52);
    border-radius: 50%;
    animation: pxd-spin 0.8s linear infinite;
}

.pxd-img-grid-spinner-label {
    font-family: 'Urbanist', sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--pixidia-gray-500, #6b8585);
}

@keyframes pxd-spin {
    to { transform: rotate(360deg); }
}

/* ============================================
   IMAGE MODAL — Upload Progress Spinner
   ============================================ */

.pxd-img-upload-progress {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 40px 20px;
}

.pxd-img-upload-progress-circle {
    position: relative;
    width: 72px;
    height: 72px;
}

.pxd-img-upload-progress-circle svg {
    width: 72px;
    height: 72px;
    transform: rotate(-90deg);
}

.pxd-img-progress-track {
    fill: none;
    stroke: var(--pixidia-gray-200, #d5dfdf);
    stroke-width: 4;
}

.pxd-img-progress-fill {
    fill: none;
    stroke: var(--pixidia-secondary, #1E9B52);
    stroke-width: 4;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.3s ease;
}

.pxd-img-progress-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--pixidia-secondary, #1E9B52);
}

.pxd-img-progress-icon svg,
.pxd-img-progress-icon i {
    width: 24px;
    height: 24px;
}

.pxd-img-upload-progress-label {
    font-family: 'Urbanist', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: var(--pixidia-gray-700, #3a5252);
}

.pxd-img-upload-progress-step {
    font-family: 'Urbanist', sans-serif;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--pixidia-gray-400, #8fa3a3);
}

/* ============================================
   IMAGE MODAL — Portrait Error State
   ============================================ */

.pxd-img-dropzone-icon--error {
    color: var(--pixidia-error, #e53e3e);
}

.pxd-img-dropzone-icon--error svg,
.pxd-img-dropzone-icon--error i {
    width: 48px;
    height: 48px;
}

.pxd-img-dropzone-title--error {
    color: var(--pixidia-error, #e53e3e);
    font-weight: 700;
}

.pxd-img-dropzone-retry {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    padding: 8px 16px;
    border: 1px solid var(--pixidia-gray-300, #b8c5c5);
    border-radius: 8px;
    background: #fff;
    font-family: 'Urbanist', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--pixidia-gray-700, #3a5252);
    cursor: pointer;
    transition: border-color 200ms ease, background 200ms ease;
}

.pxd-img-dropzone-retry:hover {
    border-color: var(--pixidia-secondary, #1E9B52);
    background: var(--pixidia-gray-50, #f5f8f8);
}

.pxd-img-dropzone-retry svg,
.pxd-img-dropzone-retry i {
    width: 16px;
    height: 16px;
}

/* ============================================
   MODALS - Responsive Styles
   ============================================ */

/* ============================================
   MOBILE MODALS (<768px) - Bottom Sheet Style
   ============================================ */

@media (max-width: 768px) {
    .pxd-modal-overlay {
        align-items: flex-end !important;
    }

    .pxd-modal {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 90vh;
        border-radius: 16px 16px 0 0 !important;
        margin: 0 !important;
        animation: pxd-modal-slide-up 300ms var(--ease-smooth) !important;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Drag handle indicator for modals */
    .pxd-modal::before {
        content: '';
        display: block;
        width: 40px;
        height: 4px;
        border-radius: 2px;
        background: var(--pixidia-gray-300, #b8c5c5);
        margin: 8px auto 4px;
        flex-shrink: 0;
    }

    .pxd-modal-body {
        max-height: calc(90vh - 140px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .pxd-img-upload-progress {
        padding: 30px 16px;
    }

    .pxd-img-grid-spinner {
        padding: 40px 16px;
    }

    /* Confirm modals stay centered but still bottom-sheet */
    .pxd-modal--confirm {
        max-height: 80vh;
    }

    /* Confirm modal buttons: large touch targets with good spacing */
    .pxd-modal--confirm .pxd-modal-actions,
    .pxd-modal--confirm .pxd-modal-footer {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 16px;
    }

    .pxd-modal--confirm .pxd-btn {
        min-height: 48px;
        width: 100%;
        justify-content: center;
        font-size: 15px;
    }

    /* Image modal: responsive Unsplash grid */
    .pxd-img-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }

    /* Share modal: show on 768px as proper bottom-sheet */
    .pxd-modal--share .pxd-modal-body {
        padding: 16px;
    }

    @keyframes pxd-modal-slide-up {
        from {
            transform: translateY(100%);
            opacity: 0;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }
}

/* ============================================
   SMALL MOBILE MODALS (<=480px) - True Full Screen
   ============================================ */

@media (max-width: 480px) {
    .pxd-modal {
        max-height: 100vh;
        height: 100vh;
        border-radius: 0 !important;
    }

    .pxd-modal::before {
        display: none;
    }

    .pxd-modal-body {
        max-height: calc(100vh - 140px);
        flex: 1;
    }

    .pxd-img-upload-progress {
        padding: 24px 12px;
    }

    .pxd-img-upload-progress-circle {
        width: 60px;
        height: 60px;
    }

    .pxd-img-upload-progress-circle svg {
        width: 60px;
        height: 60px;
    }

    /* Confirm modals keep some spacing on small screens */
    .pxd-modal--confirm {
        height: auto;
        max-height: 100vh;
        border-radius: 0 !important;
    }
}

/**
 * 36-view-toggle.css - Author/Visitor/Collaborator mode visibility rules
 *
 * The .pxd-view-toggle dev widget is HIDDEN in production.
 * Body class-based mode rules remain active for server-side rendering.
 */

/* Dev toggle widget — hidden in production */
.pxd-view-toggle {
    display: none !important;
}

/* ============================================
   MODE VISIBILITY RULES
   Applied via body class set server-side (PHP)
   ============================================ */

/* Mode auteur : masquer/afficher les elements */
body:not(.pxd-mode-author) .pxd-author-only {
    display: none !important;
}

/* Mode collaborateur : masquer éléments exclusifs auteur */
body.pxd-mode-collaborator .pxd-hide-collaborator {
    display: none !important;
}

/* Mode collaborateur : afficher éléments exclusifs collaborateur */
body:not(.pxd-mode-collaborator) .pxd-collaborator-only {
    display: none !important;
}

/* Visible pour auteur ET collaborateur, masqué pour visiteur */
body:not(.pxd-mode-author):not(.pxd-mode-collaborator) .pxd-collab-action {
    display: none !important;
}

/* ============================================
   VOYAGE PRO (voyage-pro/decision.md)
   body.pxd-nature-pro est posée seulement pour un voyage pro (serveur et hero.js) :
   un voyage perso ne reçoit aucune de ces règles.
   ============================================ */
body.pxd-nature-pro #hero-profiles,
body.pxd-nature-pro #hero-fav-btn,
body.pxd-nature-pro #budget-customize-btn,
body.pxd-nature-pro .pxd-share-social-btn--facebook,
body.pxd-nature-pro .pxd-share-social-btn--twitter {
    display: none !important;
}

.pxd-profile-pill.pxd-hero-nature {
    gap: 6px;
    background: rgba(10, 61, 58, 0.08);
    border-color: rgba(10, 61, 58, 0.18);
    color: #0A3D3A;
}

/* Champs réservés au voyage pro (ex. « À la charge de » dans la saisie d'une dépense) */
body:not(.pxd-nature-pro) .pxd-nature-pro-only {
    display: none !important;
}
.pxd-exp-field .pxd-exp-funder-option {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 16px 0 0;
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;
    cursor: pointer;
}

/* ============================================
   19. ETAT VIDE
   ============================================ */

.pxd-empty-state {
    padding: 32px;
    text-align: center;
    color: var(--pixidia-text-muted);
    grid-column: 1 / -1;
}

.pxd-empty-state svg {
    width: 48px;
    height: 48px;
    margin-bottom: 12px;
    opacity: 0.3;
    color: var(--pixidia-gray-400);
}

.pxd-empty-state p {
    font-size: 14px;
    margin: 0;
    line-height: 1.5;
}

.pxd-empty-state .pxd-btn--primary {
    margin-top: 16px;
}


/* ============================================
   20. RESPONSIVE OVERRIDES (cross-component)
   ============================================ */

/* === Tablet (768-1200px) === */
@media (max-width: 1200px) and (min-width: 769px) {
    /* Enrichir panel */
    .pxd-enrichir {
        margin: 10px;
        padding: 18px;
    }
}

/* === Mobile (<768px) === */
@media (max-width: 768px) {
    /* Reservations */
    .pxd-res-columns {
        grid-template-columns: 1fr;
    }

    /* Expenses */
    .pxd-dep-form-row {
        flex-direction: column;
    }
    .pxd-dep-input--sm {
        flex: 1;
    }

    /* Budget */
    .pxd-budget-content {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .pxd-budget-donut {
        width: 170px;
    }

    .pxd-budget-breakdown {
        width: 100%;
    }

    /* Chat */
    .pxd-chat-widget {
        width: calc(100% - 32px);
        right: 16px;
        left: 16px;
        bottom: 80px;
    }

    /* Enrichir panel */
    .pxd-enrichir {
        margin: 8px;
        padding: 16px;
    }

    .pxd-enrichir-actions {
        flex-direction: column;
    }

    /* Empty state mobile */
    .pxd-empty-state {
        padding: 24px 16px;
    }

    .pxd-empty-state svg {
        width: 40px;
        height: 40px;
    }

    .pxd-empty-state p {
        font-size: 13px;
    }

    /* Glassmorphism perf: reduce blur and shadow on mobile */
    .pxd-glass {
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        box-shadow: var(--shadow-sm);
    }
}

/* === Small Mobile (<=480px) === */
@media (max-width: 480px) {
    .pxd-budget-donut {
        width: 150px;
    }

    /* Empty state */
    .pxd-empty-state {
        padding: 20px 12px;
    }

    .pxd-empty-state svg {
        width: 36px;
        height: 36px;
        margin-bottom: 8px;
    }

    .pxd-empty-state p {
        font-size: 12.5px;
    }
}

/* === Extreme small (<=320px) — prevent horizontal overflow === */
@media (max-width: 320px) {
    /* Prevent any fixed-width element from causing overflow */
    .pxd-budget-donut {
        width: 130px;
        height: 130px;
    }

    .pxd-budget-donut-center {
        inset: 20px;
    }

    /* Infocard grid: single column on tiny screens */
    .pxd-infocard-grid {
        grid-template-columns: 1fr !important;
    }

    /* Cards: force single column */
    .pxd-cards-grid--2col,
    .pxd-cards-grid--3col,
    .pxd-cards-grid--2col-transport {
        grid-template-columns: 1fr !important;
    }

    /* Vehicle card 2-col details: collapse to 1 col */
    .pxd-card--wide .pxd-card-details--2col {
        grid-template-columns: 1fr !important;
        gap: 0;
    }

    /* Section padding reduction */
    .pxd-section {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    /* Header pill full width */
    .pxd-header-pill {
        width: 100%;
    }

    /* Hero action buttons: wrap on tiny screens */
    .pxd-hero-actions {
        flex-wrap: wrap;
        gap: 4px;
    }
}

/* === Desktop large (>1200px) — line clamp only === */
@media (min-width: 1201px) {
    .pxd-cc-content--clamped {
        -webkit-line-clamp: 6;
    }
}

/* 39-critical-inline.css — Critical CSS injected inline in <head>.
   Covers header + hero first paint only. Full styles in itinerary.css. */

/* === CRITICAL TOKENS === */
:root {
    --pixidia-blue: #012827;
    --pixidia-blue-light: #023d3b;
    --pixidia-green: #208D3E;
    --pixidia-turquoise: #20c9b8;
    --pixidia-white: #ffffff;
    --pixidia-bg: #f0f4f4;
    --pixidia-text: #1a2e2e;
    --pixidia-text-muted: rgba(1, 40, 39, 0.55);
    --pixidia-gray-100: #eef2f2;
    --pixidia-gray-200: #dce4e4;
    --pixidia-gray-300: #b8c5c5;
    --pixidia-gray-400: #8a9c9c;
    --pixidia-gray-500: #5d7070;
    --gradient-primary: linear-gradient(135deg, var(--pixidia-blue) 0%, #0a4a47 100%);
    --radius-full: 100px;
    --radius-lg: 16px;
    --radius-md: 12px;
    --radius-sm: 8px;
    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --duration-fast: 150ms;
    --duration-normal: 250ms;
    --pxd-header-height: 60px;
    --pxd-sidebar-width: 64px;
    --pxd-right-width: 35%;
    --pxd-bottom-nav-height: 0px;
}

/* === CRITICAL LAYOUT (above-fold grid) === */
.pxd-page {
    display: grid;
    grid-template-columns: var(--pxd-sidebar-width) 1fr var(--pxd-right-width);
    grid-template-rows: var(--pxd-header-height) 1fr;
    height: 100vh;
    height: 100svh;
    overflow: hidden;
    font-family: 'Urbanist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--pixidia-bg);
    color: var(--pixidia-text);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.pxd-site-header {
    grid-column: 1 / -1;
    grid-row: 1;
    height: var(--pxd-header-height, 60px);
    background: var(--gradient-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    position: relative;
    z-index: 200;
}

/* === CRITICAL HEADER PILL === */
.pxd-header-pill {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 98%;
    max-width: 1600px;
    height: 44px;
    padding: 0 8px 0 6px;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}

.pxd-header-left {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
    min-width: 0;
}

.pxd-header-logo-link { text-decoration: none; flex-shrink: 0; }

.pxd-header-logo-wrap {
    background: rgba(255, 255, 255, 0.5);
    border-radius: 14px;
    padding: 5px 14px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.pxd-header-logo {
    height: 22px;
    width: auto;
    display: block;
    object-fit: contain;
}

.pxd-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    margin-left: 20px;
}

.pxd-header-icon-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--pixidia-blue);
    text-decoration: none;
    font-size: 14px;
}

.pxd-header-profile {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 4px 3px 12px;
    height: 34px;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.3);
    cursor: pointer;
    color: var(--pixidia-blue);
}

.pxd-header-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.5);
    flex-shrink: 0;
}

.pxd-header-avatar img { width: 100%; height: 100%; object-fit: cover; }

.pxd-header-hamburger { display: none; }

/* === CRITICAL LEFT PANEL (top visible area) === */
.pxd-panel-left {
    grid-column: 2;
    grid-row: 2;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--pixidia-gray-300) transparent;
}

/* === CRITICAL HERO === */
.pxd-hero {
    position: relative;
    height: 320px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin: 16px;
}

.pxd-hero-image {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}

.pxd-hero-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.15) 100%);
}

.pxd-hero-content {
    position: absolute;
    z-index: 1;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    padding: 14px 24px 16px;
    color: var(--pixidia-blue, #012827);
    background: rgba(255, 255, 255, 0.68);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-top: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 16px 16px 0 0;
}

.pxd-hero-title {
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.25;
    margin-bottom: 8px;
    color: var(--pixidia-blue, #012827);
}

/* === CRITICAL MOBILE HEADER === */
@media (max-width: 768px) {
    :root {
        --pxd-header-height: 52px;
        --pxd-sidebar-width: 0px;
        --pxd-right-width: 0%;
        --pxd-bottom-nav-height: 56px;
    }

    .pxd-page {
        display: block;
        height: auto;
        min-height: 100vh;
        min-height: 100svh;
        overflow: visible;
        overflow-x: hidden;
    }

    .pxd-site-header {
        height: calc(var(--pxd-header-height, 52px) + env(safe-area-inset-top, 0px));
        padding-top: env(safe-area-inset-top, 0px);
    }
    .pxd-header-pill { height: 40px; padding: 0 6px; }
    .pxd-header-logo { height: 18px; }
    .pxd-header-logo-wrap { height: 30px; padding: 4px 10px; border-radius: 10px; }

    .pxd-header-search-wrap,
    .pxd-header-btn-new,
    .pxd-header-fav,
    .pxd-header-notif,
    .pxd-header-lang,
    .pxd-header-lang-wrap,
    .pxd-header-profile-wrap { display: none !important; }

    .pxd-header-hamburger {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 4px;
        width: 32px;
        height: 32px;
        padding: 0;
        border: none;
        background: rgba(255, 255, 255, 0.35);
        border-radius: 8px;
        cursor: pointer;
        position: relative;
        flex-shrink: 0;
    }

    /* 44px touch target */
    .pxd-header-hamburger::after {
        content: "";
        position: absolute;
        inset: -6px;
        min-width: 44px;
        min-height: 44px;
    }

    .pxd-header-hamburger span {
        display: block;
        width: 18px;
        height: 2px;
        background: white;
        border-radius: 1px;
    }

    .pxd-hero { height: 260px; margin: 8px; border-radius: var(--radius-md, 12px); }
    .pxd-hero-title { font-size: 1.05rem; margin-bottom: 4px; }
    .pxd-hero-content { padding: 10px 16px 12px; }

    .pxd-panel-left {
        width: 100%;
        max-width: 100vw;
        height: auto;
        overflow-y: visible;
        overflow-x: hidden;
    }
}

@media (max-width: 480px) {
    .pxd-hero { height: 220px; }
    .pxd-hero-title { font-size: 0.95rem; }
}

/**
 * animations.css - Pixidia Itinerary Split-View Prototype
 * Transitions, keyframe animations, and reduced motion.
 * Relies on variables.css for design tokens (durations, easings, colors).
 */

/* ============================================
   TRANSITIONS DE BASE
   ============================================ */

.pxd-card {
    transition:
        box-shadow var(--duration-normal) var(--ease-smooth),
        transform var(--duration-normal) var(--ease-smooth);
}

.pxd-nav-item {
    transition:
        color var(--duration-fast),
        background var(--duration-fast),
        border-color var(--duration-fast);
}

.pxd-day-pill {
    transition: all var(--duration-normal) var(--ease-smooth);
}

.pxd-card-locate {
    transition: opacity var(--duration-fast),
                background var(--duration-fast),
                border-color var(--duration-fast),
                transform var(--duration-fast);
}

.pxd-btn-icon {
    transition: background var(--duration-fast);
}

.pxd-enrichir-btn {
    transition:
        border-color var(--duration-fast),
        box-shadow var(--duration-fast);
}

.pxd-view-btn {
    transition: all var(--duration-normal) var(--ease-smooth);
}

.pxd-btn--primary,
.pxd-btn--outline {
    transition:
        background var(--duration-fast),
        border-color var(--duration-fast),
        color var(--duration-fast),
        box-shadow var(--duration-fast);
}

.pxd-map-btn {
    transition:
        background var(--duration-fast),
        color var(--duration-fast);
}

.pxd-legend-item {
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.pxd-star {
    transition: color var(--duration-fast);
}

.pxd-chat-input button {
    transition: background var(--duration-fast);
}

.pxd-reservation-badge {
    transition: background var(--duration-fast);
}

/* ============================================
   CARD HIGHLIGHT (map -> card sync)
   ============================================ */

@keyframes pxd-highlight-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(32, 141, 62, 0.5), var(--shadow-lg);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(32, 141, 62, 0), var(--shadow-lg);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(32, 141, 62, 0), var(--shadow-sm);
    }
}

.pxd-card--highlighted {
    animation: pxd-highlight-pulse 2s ease-out;
}

/* ============================================
   SECTION FADE IN
   ============================================ */

@keyframes pxd-fade-in-up {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.pxd-section {
    animation: pxd-fade-in-up 0.4s var(--ease-smooth) both;
}

/* Stagger sections for sequential appearance */
.pxd-section:nth-child(1) { animation-delay: 0s; }
.pxd-section:nth-child(2) { animation-delay: 0.06s; }
.pxd-section:nth-child(3) { animation-delay: 0.12s; }
.pxd-section:nth-child(4) { animation-delay: 0.18s; }
.pxd-section:nth-child(5) { animation-delay: 0.24s; }
.pxd-section:nth-child(6) { animation-delay: 0.30s; }
.pxd-section:nth-child(7) { animation-delay: 0.36s; }
.pxd-section:nth-child(8) { animation-delay: 0.42s; }

/* ============================================
   MARKER BOUNCE (for JS to add class)
   ============================================ */

@keyframes pxd-marker-bounce {
    0%, 100% {
        transform: translateY(0);
    }
    25% {
        transform: translateY(-14px);
    }
    50% {
        transform: translateY(0);
    }
    75% {
        transform: translateY(-7px);
    }
}

.pxd-marker-bouncing {
    animation: pxd-marker-bounce 0.6s var(--ease-bounce);
}

/* ============================================
   MARKER APPEAR (on map load / filter)
   ============================================ */

@keyframes pxd-marker-appear {
    from {
        opacity: 0;
        transform: translateY(-10px) scale(0.8);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.pxd-marker-entering {
    animation: pxd-marker-appear 0.3s var(--ease-smooth);
}

/* ============================================
   GLASSMORPHISM TRANSITIONS
   ============================================ */

.pxd-glass {
    transition:
        background var(--duration-normal) var(--ease-smooth),
        backdrop-filter var(--duration-normal);
}

/* ============================================
   SKELETON LOADING
   ============================================ */

@keyframes pxd-shimmer {
    0% {
        background-position: -400px 0;
    }
    100% {
        background-position: 400px 0;
    }
}

.pxd-skeleton {
    background: linear-gradient(
        90deg,
        var(--pixidia-gray-100) 25%,
        var(--pixidia-gray-50) 50%,
        var(--pixidia-gray-100) 75%
    );
    background-size: 400px 100%;
    animation: pxd-shimmer 1.5s infinite;
    border-radius: var(--radius-sm);
}

.pxd-skeleton--text {
    height: 14px;
    width: 80%;
    margin-bottom: 8px;
}

.pxd-skeleton--title {
    height: 20px;
    width: 60%;
    margin-bottom: 12px;
}

.pxd-skeleton--avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
}

.pxd-skeleton--card {
    height: 120px;
    margin-bottom: 12px;
    border-radius: var(--radius-md);
}

/* Aliases for JS compatibility */
.pxd-skeleton-line {
    height: 14px;
    width: 80%;
    margin-bottom: 8px;
    background: linear-gradient(
        90deg,
        var(--pixidia-gray-100) 25%,
        var(--pixidia-gray-50) 50%,
        var(--pixidia-gray-100) 75%
    );
    background-size: 400px 100%;
    animation: pxd-shimmer 1.5s infinite;
    border-radius: var(--radius-sm);
}

.pxd-skeleton-circle {
    border-radius: 50%;
    background: linear-gradient(
        90deg,
        var(--pixidia-gray-100) 25%,
        var(--pixidia-gray-50) 50%,
        var(--pixidia-gray-100) 75%
    );
    background-size: 400px 100%;
    animation: pxd-shimmer 1.5s infinite;
}

/* ============================================
   MOBILE MAP SLIDE
   ============================================ */

.pxd-right {
    transition: transform var(--duration-slow) var(--ease-smooth);
}

/* ============================================
   DAY PILL PULSE (current day indicator)
   ============================================ */

@keyframes pxd-pill-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(32, 141, 62, 0.3);
    }
    50% {
        box-shadow: 0 0 0 6px rgba(32, 141, 62, 0);
    }
}

.pxd-day-pill--current.active {
    animation: pxd-pill-pulse 2s ease-in-out infinite;
}

/* ============================================
   DONUT CHART ANIMATION
   ============================================ */

@keyframes pxd-donut-spin {
    from {
        transform: rotate(-90deg);
    }
    to {
        transform: rotate(270deg);
    }
}

.pxd-budget-chart--animated {
    animation: pxd-donut-spin 1s var(--ease-smooth) forwards;
}

/* Budget bar fill animation */
@keyframes pxd-bar-fill {
    from {
        width: 0;
    }
}

.pxd-budget-bar-fill {
    animation: pxd-bar-fill 0.6s var(--ease-smooth) both;
}

.pxd-budget-row:nth-child(1) .pxd-budget-bar-fill { animation-delay: 0.1s; }
.pxd-budget-row:nth-child(2) .pxd-budget-bar-fill { animation-delay: 0.2s; }
.pxd-budget-row:nth-child(3) .pxd-budget-bar-fill { animation-delay: 0.3s; }
.pxd-budget-row:nth-child(4) .pxd-budget-bar-fill { animation-delay: 0.4s; }
.pxd-budget-row:nth-child(5) .pxd-budget-bar-fill { animation-delay: 0.5s; }

/* ============================================
   CHAT WIDGET SLIDE
   ============================================ */

@keyframes pxd-chat-slide-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.pxd-chat-widget {
    animation: pxd-chat-slide-up 0.3s var(--ease-smooth);
}

/* ============================================
   HERO IMAGE PARALLAX HINT
   ============================================ */

@keyframes pxd-hero-zoom {
    from {
        transform: scale(1.05);
    }
    to {
        transform: scale(1);
    }
}

.pxd-hero-image {
    animation: pxd-hero-zoom 0.8s var(--ease-smooth);
}

/* ============================================
   TOOLTIP FADE
   ============================================ */

@keyframes pxd-tooltip-fade {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.pxd-tooltip {
    animation: pxd-tooltip-fade 0.2s var(--ease-smooth);
}

/* ============================================
   SCROLL INDICATOR
   ============================================ */

@keyframes pxd-scroll-hint {
    0%, 100% {
        opacity: 0.4;
        transform: translateY(0);
    }
    50% {
        opacity: 1;
        transform: translateY(4px);
    }
}

.pxd-scroll-indicator {
    animation: pxd-scroll-hint 2s ease-in-out infinite;
}

/* ============================================
   MOBILE: REDUCED ANIMATION INTENSITY
   Smaller transforms, shorter durations on
   mobile even without reduced-motion preference
   ============================================ */

@media (max-width: 768px) {
    /* Reduce section stagger */
    .pxd-section {
        animation-duration: 0.25s;
    }

    .pxd-section:nth-child(1) { animation-delay: 0s; }
    .pxd-section:nth-child(2) { animation-delay: 0.03s; }
    .pxd-section:nth-child(3) { animation-delay: 0.06s; }
    .pxd-section:nth-child(4) { animation-delay: 0.09s; }
    .pxd-section:nth-child(5) { animation-delay: 0.12s; }
    .pxd-section:nth-child(6) { animation-delay: 0.15s; }
    .pxd-section:nth-child(7) { animation-delay: 0.18s; }
    .pxd-section:nth-child(8) { animation-delay: 0.21s; }

    /* Smaller translate on fade-in-up */
    @keyframes pxd-fade-in-up {
        from {
            opacity: 0;
            transform: translateY(8px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Reduce marker bounce */
    @keyframes pxd-marker-bounce {
        0%, 100% { transform: translateY(0); }
        25% { transform: translateY(-8px); }
        50% { transform: translateY(0); }
        75% { transform: translateY(-4px); }
    }

    /* Reduce highlight pulse radius */
    @keyframes pxd-highlight-pulse {
        0% { box-shadow: 0 0 0 0 rgba(32, 141, 62, 0.4), var(--shadow-sm); }
        70% { box-shadow: 0 0 0 6px rgba(32, 141, 62, 0), var(--shadow-sm); }
        100% { box-shadow: 0 0 0 0 rgba(32, 141, 62, 0), var(--shadow-sm); }
    }

    /* Shorten hero zoom */
    .pxd-hero-image {
        animation-duration: 0.4s;
    }

    /* Reduce chat slide */
    @keyframes pxd-chat-slide-up {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
    }

    /* Reduce hover transforms */
    .pxd-card:hover {
        transform: none;
    }

    .pxd-legend-item {
        transition-duration: 0.2s;
    }

    /* Reduce modal animation */
    @keyframes pxd-modalSlideUp {
        from { opacity: 0; transform: translateY(10px) scale(0.98); }
        to { opacity: 1; transform: translateY(0) scale(1); }
    }

    /* Reduce donut animation */
    .pxd-budget-chart--animated {
        animation-duration: 0.5s;
    }

    /* Reduce shimmer for battery savings */
    .pxd-skeleton {
        animation-duration: 2s;
    }
}

/* ============================================
   RESPECT PREFERS-REDUCED-MOTION
   Complete accessibility block: disable or
   minimize ALL animations and transitions
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    /* Specifically disable infinite animations */
    .pxd-day-pill--current.active,
    .pxd-scroll-indicator,
    .pxd-modal-total-value.error,
    .pxd-skeleton {
        animation: none !important;
    }

    /* Remove hover transforms */
    .pxd-card:hover,
    .pxd-modal-btn--save:hover,
    .pxd-modal-btn--danger:hover,
    .pxd-dep-manage-btn:hover,
    .pxd-chat-input button:hover,
    .pxd-exp-action-btn--add-participant:hover,
    .pxd-exp-action-btn--manage-users:hover,
    .pxd-alloc-slider::-webkit-slider-thumb:hover,
    .pxd-legend-item:hover {
        transform: none !important;
    }

    /* Remove parallax and zoom */
    .pxd-hero-image {
        animation: none !important;
        transform: none !important;
    }

    /* Ensure chat widget is immediately visible when open */
    .pxd-chat-widget--open {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }

    /* Modal appears instantly */
    .pxd-modal-overlay.open {
        animation: none !important;
    }

    .pxd-modal {
        animation: none !important;
    }

    /* Budget rows appear instantly */
    .pxd-budget-row,
    .pxd-dep-participant,
    .pxd-review-card,
    .pxd-reply,
    .pxd-reply--new,
    .pxd-rating-confirmation.active,
    .pxd-comment-section.active {
        animation: none !important;
        opacity: 1 !important;
    }

    /* Sections appear instantly */
    .pxd-section {
        animation: none !important;
        opacity: 1 !important;
    }

    /* Sub-panel appears instantly */
    .pxd-exp-subpanel.open {
        transition: none !important;
    }

    /* Dropdown appears instantly */
    .pxd-exp-custom-select.open .pxd-exp-select-options {
        animation: none !important;
    }

    /* Remove box-shadow transitions for performance */
    .pxd-budget-row,
    .pxd-dep-participant,
    .pxd-review-card,
    .pxd-alloc-row {
        transition: none !important;
    }
}

/* ======================================================================
 * 41-weather.css : Modale météo : calendrier du séjour + vue détail d'un jour
 *
 * Refonte 2026-07-20 (maquette validée « Refonte popup météo itinéraire »).
 * Remplace l'ancienne vue en cartes-ville.
 *
 * Architecture :
 *   .pxd-modal--weather     coquille (alignée sur le DS canonique, SCOPÉE ici)
 *   .wx-head__*             en-tête : pastille, sous-titre, actions
 *   .wx-unit                toggle °C/°F à curseur
 *   .wx-state / .wx-spinner états chargement / erreur
 *   .wx2-context .wx-badge  bandeau d'état + phrase d'explication
 *   .wx2-stats .wx2-stat    pastilles de synthèse du séjour
 *   .wx-rail .wx-stop       rail des étapes (mobile uniquement)
 *   .wx3-cal .wx3-grid      calendrier (cases = .wx3-cell, couleur par ville)
 *   .wx3-day*               vue détail d'un jour (hero, courbe, tuiles, pluie)
 *
 * NOTE cascade : ce fichier est concaténé APRÈS 29-budget.css (socle modale)
 * et APRÈS 35-modals.css (bottom-sheet mobile en !important). Les overrides de
 * coquille ci-dessous sont volontairement limités à .pxd-modal--weather pour
 * ne toucher aucune des 11 autres modales de la page.
 * ==================================================================== */

/* ── Calque de tokens du design system ────────────────────────────────
   Absents de 00-tokens.css (qui n'expose que --pixidia-* et --radius-*).
   Ces noms existent aussi dans pixi-tokens.css (.pixi-page, .pxipa : 24 communs) et dans
   pixidia-cookies tokens.css (:root : 20 communs), aux mêmes valeurs ; les deux ombres
   de la modale, différentes, sont préfixées --pxd-weather-* (refonte L3, 2026-09-23). */
:root {
    --pxd-primary:          #0A3D3A;
    --pxd-primary-dark:     #072B28;
    --pxd-secondary:        #1E9B52;
    --pxd-secondary-hover:  #178440;
    --pxd-gradient:         linear-gradient(135deg, #0A3D3A, #1E9B52);
    --pxd-fg:               #0A3D3A;
    --pxd-font-sans:        'Urbanist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --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-ease-smooth:      cubic-bezier(0.4, 0, 0.2, 1);
    --pxd-dur-fast:         150ms;
    --pxd-dur-normal:       250ms;

    --pxd-radius-sm:        8px;
    --pxd-radius-md:        12px;
    --pxd-radius-lg:        16px;
    --pxd-radius-full:      9999px;

    --pxd-modal-bg:         rgba(255, 255, 255, 0.96);
    --pxd-modal-blur:       24px;
    --pxd-modal-border:     1px solid rgba(10, 61, 58, 0.10);
    --pxd-modal-radius:     16px;
    --pxd-weather-modal-shadow: 0 16px 48px rgba(10, 61, 58, 0.18), 0 0 0 1px rgba(10, 61, 58, 0.04);
    --pxd-weather-shadow-icon: 0 0 0 3px rgba(255, 255, 255, 0.9), 0 4px 12px rgba(10, 61, 58, 0.18);

    /* Palette des villes du séjour (cyclique, 6 teintes) */
    --pxd-city-0: #1E9B52;
    --pxd-city-1: #1976d2;
    --pxd-city-2: #ff9800;
    --pxd-city-3: #17968a;
    --pxd-city-4: #9c27b0;
    --pxd-city-5: #ad8800;
}

/* ── Coquille (scopée météo, alignée sur le DS canonique) ─────────────── */
.pxd-modal--weather {
    max-width: 960px;
    width: 96vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;                       /* seul .pxd-modal-body scrolle */
    background: var(--pxd-modal-bg);
    border: var(--pxd-modal-border);
    border-radius: var(--pxd-modal-radius);
    box-shadow: var(--pxd-weather-modal-shadow);
    font-family: var(--pxd-font-sans);
}
.pxd-modal--weather .pxd-modal-body {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    gap: 16px;
    scrollbar-width: thin;
    scrollbar-color: var(--pxd-gray-300) transparent;
}
.pxd-modal--weather .pxd-modal-body::-webkit-scrollbar { width: 6px; }
.pxd-modal--weather .pxd-modal-body::-webkit-scrollbar-thumb {
    background: var(--pxd-gray-300);
    border-radius: 4px;
}
.pxd-modal--weather .pxd-modal-header { gap: 16px; }
.pxd-modal--weather .pxd-modal-header-left h3 {
    margin: 0;
    color: var(--pxd-primary);
    font-weight: 800;
}

/* ── En-tête ──────────────────────────────────────────────────────────── */
.wx-head__icon {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: var(--pxd-radius-md);
    background: var(--pxd-gradient);
    color: #fff;
    box-shadow: var(--pxd-weather-shadow-icon);
}
.wx-head__icon svg { width: 22px; height: 22px; }
.wx-head__sub {
    margin: 2px 0 0;
    font-size: 0.82rem;
    font-weight: 600;
    color: #6b7a7a;
}
.wx-head__actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}

/* ── Toggle °C/°F ─────────────────────────────────────────────────────── */
.wx-unit {
    position: relative;
    display: inline-flex;
    background: #eef3f2;
    border: 1px solid var(--pxd-gray-200);
    border-radius: var(--pxd-radius-full);
    padding: 3px;
    box-shadow: inset 0 1px 2px rgba(10, 61, 58, 0.05);
}
.wx-unit__b {
    position: relative;
    z-index: 2;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 800;
    color: #6b7a7a;
    padding: 6px 14px;
    border-radius: var(--pxd-radius-full);
    cursor: pointer;
    transition: color var(--pxd-dur-normal) var(--pxd-ease-smooth);
}
.wx-unit__b:hover { color: var(--pxd-primary); }
.wx-unit__b.is-on { color: #fff; }
.wx-unit__b:focus-visible {
    outline: 2px solid var(--pxd-secondary);
    outline-offset: 2px;
}
.wx-unit__thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: calc(50% - 3px);
    bottom: 3px;
    border-radius: var(--pxd-radius-full);
    background: var(--pxd-gradient);
    box-shadow: 0 2px 6px rgba(10, 61, 58, 0.28);
    transition: transform 0.28s var(--pxd-ease-smooth);
    z-index: 1;
    pointer-events: none;
}
.wx-unit.is-f .wx-unit__thumb { transform: translateX(100%); }

/* ── États chargement / erreur ────────────────────────────────────────── */
.wx-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 240px;
    text-align: center;
    color: var(--pxd-gray-500);
    padding: 36px 20px;
}
.wx-state[hidden] { display: none; }
.wx-state p { margin: 0; font-weight: 600; }
.wx-spinner {
    width: 38px;
    height: 38px;
    border: 3px solid var(--pxd-gray-100);
    border-top-color: var(--pxd-primary);
    border-radius: 50%;
    animation: wx-spin 900ms linear infinite;
}
@keyframes wx-spin { to { transform: rotate(360deg); } }
.wx-state__ic { color: var(--pxd-gray-300); line-height: 0; }
.wx-state__ic svg { width: 42px; height: 42px; }
.wx-retry {
    border: 1px solid var(--pxd-primary);
    background: #fff;
    color: var(--pxd-primary);
    font: inherit;
    font-weight: 700;
    font-size: 0.88rem;
    padding: 9px 22px;
    border-radius: var(--pxd-radius-full);
    cursor: pointer;
    transition: background var(--pxd-dur-fast) ease, color var(--pxd-dur-fast) ease;
}
.wx-retry:hover  { background: var(--pxd-primary); color: #fff; }
.wx-retry:active { transform: scale(0.98); }
.wx-retry:focus-visible { outline: 2px solid var(--pxd-secondary); outline-offset: 2px; }

/* ── Contenu / vues ───────────────────────────────────────────────────── */
.wx-content[hidden] { display: none; }
.wx-content { display: flex; flex-direction: column; gap: 16px; }
.wx-view { display: flex; flex-direction: column; gap: 16px; }
.wx-view[hidden] { display: none; }

/* ── Bandeau de contexte + badge d'état ───────────────────────────────── */
.wx2-context {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.wx2-context__txt {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--pxd-gray-500);
}
.wx-badge {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 13px;
    border-radius: var(--pxd-radius-full);
    font-size: 0.76rem;
    font-weight: 700;
    border: 1px solid transparent;
    white-space: nowrap;
}
.wx-badge.m-current     { background: linear-gradient(135deg, #fff7e6, #fff1d4); color: #a36a00; border-color: #ffd98a; }
.wx-badge.m-forecast    { background: linear-gradient(135deg, #e4f5ec, #d5efdf); color: #0f6b37; border-color: #9fd6b2; }
.wx-badge.m-climatology { background: linear-gradient(135deg, #eef1fb, #e0e6f5); color: #3b4686; border-color: #b9c1e3; }
.wx-badge.m-archive     { background: linear-gradient(135deg, #f2efe9, #e8e4dc); color: #6b5a3d; border-color: #cec2a6; }

/* ── Pastilles de synthèse ────────────────────────────────────────────── */
.wx2-stats { display: flex; gap: 8px; flex-wrap: wrap; }
.wx2-stat {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    border-radius: var(--pxd-radius-full);
    background: var(--pxd-gray-50);
    border: 1px solid rgba(15, 163, 107, 0.14);
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--pxd-primary);
    white-space: nowrap;
}
.wx2-stat svg { width: 13px; height: 13px; color: var(--pxd-secondary); flex-shrink: 0; }

/* ── Rail des étapes (mobile uniquement) ──────────────────────────────── */
.wx-rail {
    display: none;                          /* affiché sous 768px */
    align-items: center;
    gap: 3px;
    overflow-x: auto;
    padding: 2px 2px 4px;
    scrollbar-width: none;
}
.wx-rail::-webkit-scrollbar { display: none; }
.wx-stop {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    border-radius: var(--pxd-radius-full);
    background: #f2f6f5;
    border: 1px solid rgba(10, 61, 58, 0.07);
}
.wx-stop__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--cc); flex-shrink: 0; }
.wx-stop__city { font-size: 0.8rem; font-weight: 700; color: var(--pxd-primary); white-space: nowrap; }
.wx-stop__days { font-size: 0.66rem; font-weight: 700; color: var(--pxd-gray-400); white-space: nowrap; }
.wx-stop + .wx-stop::before {
    content: '';
    flex-shrink: 0;
    width: 12px;
    border-top: 2px dotted #93a8a5;
    align-self: center;
    margin: 0 1px;
}

/* ── Couleurs de ville (cycliques) ────────────────────────────────────── */
.wx3c0 { --cc: var(--pxd-city-0); }
.wx3c1 { --cc: var(--pxd-city-1); }
.wx3c2 { --cc: var(--pxd-city-2); }
.wx3c3 { --cc: var(--pxd-city-3); }
.wx3c4 { --cc: var(--pxd-city-4); }
.wx3c5 { --cc: var(--pxd-city-5); }

/* ── Calendrier ───────────────────────────────────────────────────────── */
.wx3-cal { display: flex; flex-direction: column; gap: 8px; }
.wx3-dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.wx3-dow span {
    text-align: center;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--pxd-gray-400);
}
.wx3-dow span.is-we { color: var(--pxd-secondary); }
.wx3-dow b { font-weight: inherit; }
.wx3-dow__s { display: none; }

.wx3-hint {
    display: none;                          /* affiché sous 768px */
    margin: 0;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--pxd-gray-400);
    text-align: center;
}

.wx3-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }

.wx3-cell {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-height: 112px;
    padding: 9px 4px 7px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--cc) 8%, #fff);
    border: 1px solid color-mix(in srgb, var(--cc) 18%, #fff);
    transition: transform 0.2s var(--pxd-ease-smooth),
                box-shadow 0.2s var(--pxd-ease-smooth),
                background 0.2s var(--pxd-ease-smooth);
}
/* Repli si color-mix() n'est pas supporté */
@supports not (background: color-mix(in srgb, red 8%, #fff)) {
    .wx3-cell { background: var(--pxd-gray-50); border-color: var(--pxd-gray-200); }
}

button.wx3-cell {
    font: inherit;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    text-align: center;
    color: inherit;
}
.wx3-cell:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 22px rgba(10, 61, 58, 0.12);
    background: color-mix(in srgb, var(--cc) 14%, #fff);
}
.wx3-cell:focus-visible {
    outline: 2px solid var(--pxd-secondary);
    outline-offset: 2px;
}
.wx3-cell:active { transform: translateY(-1px); }
.wx3-cell.is-we { background: color-mix(in srgb, var(--cc) 12%, #fff); }
.wx3-cell.is-today {
    box-shadow: 0 0 0 2px var(--pxd-secondary), 0 8px 18px rgba(10, 61, 58, 0.12);
}
.wx3-cell.is-today .wx3-cell__temps { justify-content: center; }
.wx3-cell.is-today .wx3-cell__tmin  { display: none; }
.wx3-grid > .wx3-cell.is-sel {
    box-shadow: 0 0 0 2px var(--pxd-secondary), 0 8px 18px rgba(10, 61, 58, 0.14);
}
.wx3-cell--blank {
    background: rgba(10, 61, 58, 0.025);
    border: 1px solid transparent;
    min-height: 0;
}
.wx3-cell__today {
    position: absolute;
    top: -8px;
    right: 6px;
    background: var(--pxd-gradient);
    color: #fff;
    font-size: 0.52rem;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: var(--pxd-radius-full);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    box-shadow: 0 3px 8px rgba(10, 61, 58, 0.22);
}
.wx3-cell__date { display: flex; align-items: baseline; gap: 3px; }
.wx3-cell__dn   { font-size: 0.88rem; font-weight: 800; color: var(--pxd-primary); }
.wx3-cell__mon  { font-size: 0.58rem; font-weight: 700; color: var(--pxd-gray-400); }
.wx3-cell__ic   { color: var(--pxd-primary); line-height: 0; margin-top: 1px; }
.wx3-cell__ic svg { width: 27px; height: 27px; }
.wx3-cell__temps { display: flex; gap: 5px; align-items: baseline; }
.wx3-cell__tmax  { font-size: 0.94rem; font-weight: 800; color: var(--pxd-primary); }
.wx3-cell__tmin  { font-size: 0.72rem; font-weight: 600; color: #9fabab; }
.wx3-cell__rain {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.62rem;
    font-weight: 700;
    color: #4a86bd;
}
.wx3-cell__rain svg { width: 9px; height: 9px; }
.wx3-cell__city {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    font-size: 0.56rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: color-mix(in srgb, var(--cc) 72%, var(--pxd-gray-500));
    opacity: 0.85;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wx3-cell__city svg { width: 8px; height: 8px; flex-shrink: 0; }
.wx3-cell.is-nd .wx3-cell__ic,
.wx3-cell.is-nd .wx3-cell__tmax { color: #aeb9b9; }

/* ── Vue détail d'un jour ─────────────────────────────────────────────── */
.wx3-back {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--pxd-secondary);
    padding: 6px 8px 6px 4px;
    cursor: pointer;
    border-radius: var(--pxd-radius-sm);
    margin: -4px 0 0;
}
.wx3-back:hover { background: rgba(30, 155, 82, 0.08); color: var(--pxd-secondary-hover); }
.wx3-back:focus-visible { outline: 2px solid var(--pxd-secondary); outline-offset: 2px; }
.wx3-back:active { transform: scale(0.98); }
.wx3-back svg { width: 15px; height: 15px; }

.wx3-day { display: flex; flex-direction: column; gap: 16px; }
.wx3-day__head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(10, 61, 58, 0.07);
}
.wx3-day__city {
    font-size: 0.66rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--cc);
    padding: 3px 9px;
    border-radius: var(--pxd-radius-full);
    background: color-mix(in srgb, var(--cc) 14%, #fff);
}
.wx3-day__date { margin: 0; font-size: 1.05rem; font-weight: 800; color: var(--pxd-primary); }
.wx3-day__mode { margin-left: auto; font-size: 0.7rem; font-weight: 700; color: var(--pxd-gray-400); }

.wx3-day__hero {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 18px;
    border-radius: var(--pxd-radius-lg);
    background: color-mix(in srgb, var(--cc) 7%, #fff);
    border: 1px solid color-mix(in srgb, var(--cc) 16%, #fff);
    flex-wrap: wrap;
}
.wx3-day__hero-ic { color: var(--pxd-primary); line-height: 0; flex-shrink: 0; }
.wx3-day__hero-ic svg { width: 42px; height: 42px; }
.wx3-day__hero-desc { flex: 1; min-width: 110px; }
.wx3-day__hero-txt   { display: block; font-size: 0.9rem; font-weight: 700; color: var(--pxd-primary); }
.wx3-day__hero-feels { display: block; margin-top: 3px; font-size: 0.76rem; font-weight: 600; color: var(--pxd-gray-500); }
.wx3-day__hero-temps { display: flex; align-items: baseline; gap: 8px; margin-left: auto; }
.wx3-day__hero-temps .tmax { font-size: 1.6rem; font-weight: 800; color: var(--pxd-primary); }
.wx3-day__hero-temps .tmin { font-size: 1rem;   font-weight: 600; color: #9fabab; }

/* Courbe horaire */
.wx3-hours { display: flex; flex-direction: column; gap: 8px; }
.wx3-hours__label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--pxd-gray-400);
}
.wx3-hours__chart {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    align-items: end;
    gap: 6px;
    height: 112px;
    padding-top: 20px;
}
.wx3-hours__col {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    gap: 4px;
}
.wx3-hours__val { font-size: 0.6rem; font-weight: 700; color: var(--pxd-primary); }
.wx3-hours__bar {
    width: 100%;
    max-width: 22px;
    border-radius: 5px 5px 2px 2px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--cc) 75%, #fff), var(--cc));
}
.wx3-hours__hr { font-size: 0.58rem; font-weight: 600; color: var(--pxd-gray-400); }

/* Tuiles méta */
.wx3-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.wx3-meta__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 6px;
    border-radius: var(--pxd-radius-md);
    background: var(--pxd-gray-50);
    border: 1px solid rgba(10, 61, 58, 0.05);
    text-align: center;
}
.wx3-meta__item .ic  { color: var(--pxd-secondary); line-height: 0; }
.wx3-meta__item .ic svg { width: 16px; height: 16px; }
.wx3-meta__item .lbl {
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--pxd-gray-400);
}
.wx3-meta__item .val { font-size: 0.8rem; font-weight: 800; color: var(--pxd-primary); }
.wx3-meta__item--na .val { color: var(--pxd-gray-300); }

/* Carte pluie */
.wx3-rain {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 14px;
    border: 1px solid transparent;
}
.wx3-rain .ic { line-height: 0; flex-shrink: 0; }
.wx3-rain .ic svg { width: 20px; height: 20px; }
.wx3-rain__title { font-size: 0.86rem; font-weight: 800; }
.wx3-rain__sub   { font-size: 0.74rem; font-weight: 600; opacity: 0.85; }
.wx3-rain.wet { background: linear-gradient(135deg, #eaf3fc, #dcecfa); color: #1f5c96; border-color: #bcdcf7; }
.wx3-rain.mid { background: linear-gradient(135deg, #fff7e6, #fff1d4); color: #a36a00; border-color: #ffd98a; }
.wx3-rain.dry { background: linear-gradient(135deg, #eef7f0, #e2f2e6); color: #2c6b3f; border-color: #bfe2c8; }

/* Jour sans donnée */
.wx3-nodata {
    padding: 30px 10px;
    text-align: center;
    font-size: 0.85rem;
    font-weight: 600;
    color: #93a0a0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.wx3-nodata svg { width: 26px; height: 26px; }

/* ── Pied de modale ───────────────────────────────────────────────────── */
.pxd-modal--weather .pxd-modal-footer { justify-content: center; }
.wx-foot__txt { font-size: 0.72rem; color: #93a0a0; text-align: center; }

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    /* La règle 768px de 35-modals.css force overflow-y:auto sur .pxd-modal :
       on rétablit le scroll UNIQUEMENT sur le body pour éviter le double scroll. */
    .pxd-modal--weather { overflow: hidden !important; }
    .pxd-modal--weather .pxd-modal-body { overflow-y: auto; }

    .wx3-dow__l { display: none; }
    .wx3-dow__s { display: inline; }
    .wx-rail    { display: flex; }
    .wx3-hint   { display: block; }

    .wx2-stats {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        margin: 0 -16px;
        padding: 0 16px;
    }
    .wx2-stats::-webkit-scrollbar { display: none; }

    .wx3-dow, .wx3-grid { gap: 6px; }
    .wx3-cell {
        min-height: 64px;
        padding: 6px 2px 5px;
        border-radius: var(--pxd-radius-sm);
        gap: 2px;
    }
    /* Cases compactes : seuls date + icône + tmax restent visibles */
    .wx3-cell__mon,
    .wx3-cell__tmin,
    .wx3-cell__rain,
    .wx3-cell__city { display: none; }
    .wx3-cell__dn   { font-size: 0.74rem; }
    .wx3-cell__ic svg { width: 17px; height: 17px; }
    .wx3-cell__tmax { font-size: 0.7rem; }
    .wx3-cell.is-sel { background: color-mix(in srgb, var(--cc) 22%, #fff); }
    /* Pastille « Auj. » réduite à un point */
    .wx3-cell__today {
        top: -5px;
        right: 4px;
        width: 8px;
        height: 8px;
        padding: 0;
        border-radius: 50%;
        font-size: 0;
        overflow: hidden;
    }

    .wx3-meta { grid-template-columns: repeat(3, 1fr); }
    /* 7e tuile masquée pour tenir sur 2 lignes */
    .wx3-meta > .wx3-meta__item:nth-child(7) { display: none; }

    .wx3-day__hero-ic svg { width: 34px; height: 34px; }
    .wx3-day__hero-temps .tmax { font-size: 1.35rem; }
    .wx3-hours__chart { height: 96px; }
}

@media (max-width: 480px) {
    /* Plein écran. À ré-affirmer ICI : la règle de base .pxd-modal--weather
       (max-height:90vh) est déclarée plus loin dans la concaténation que le
       bloc 480px de 35-modals.css, donc elle le neutraliserait sans ceci. */
    .pxd-modal--weather {
        height: 100vh;
        max-height: 100vh;
        width: 100%;
        max-width: 100%;
        border-radius: 0 !important;
    }
    .wx-head__icon { width: 36px; height: 36px; }
    .wx-head__icon svg { width: 19px; height: 19px; }
    .wx-unit__b { padding: 5px 11px; font-size: 0.74rem; }
    .wx3-cell { min-height: 58px; }
}

/* ── Animations ───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
    .wx3-cell:not(.wx3-cell--blank) {
        animation: wx3in 0.4s var(--pxd-ease-smooth) both;
    }
    .wx3-grid > .wx3-cell:nth-child(7n+1) { animation-delay: 0.02s; }
    .wx3-grid > .wx3-cell:nth-child(7n+2) { animation-delay: 0.05s; }
    .wx3-grid > .wx3-cell:nth-child(7n+3) { animation-delay: 0.08s; }
    .wx3-grid > .wx3-cell:nth-child(7n+4) { animation-delay: 0.11s; }
    .wx3-grid > .wx3-cell:nth-child(7n+5) { animation-delay: 0.14s; }
    .wx3-grid > .wx3-cell:nth-child(7n+6) { animation-delay: 0.17s; }
    .wx3-grid > .wx3-cell:nth-child(7n)   { animation-delay: 0.20s; }
    .wx3-day { animation: wx3in 0.35s var(--pxd-ease-smooth) both; }
    @keyframes wx3in {
        from { opacity: 0; transform: translateY(10px); }
        to   { opacity: 1; transform: translateY(0); }
    }
}
/* Pas d'effet de survol au doigt */
@media (hover: none) {
    .wx3-cell:hover { transform: none; box-shadow: none; }
}

/**
 * 42-assistant.css — Pixi assistant panel, chat UI, cards
 * Part of pixidia-itinerary-single (Phase Pixi)
 *
 * Design aligned with:
 *   - 02-glassmorphism.md (3-level glass hierarchy)
 *   - 13-tooltips.md (branded green gradient tooltips)
 *   - 33-chat.css (chat widget patterns)
 *   - 00-tokens.css (design tokens)
 */

/* ============================================
   PANEL TABS BAR — Glassmorphism Level 2
   ============================================ */

.pxd-panel-tabs {
    display: flex;
    justify-content: center;
    gap: 4px;
    padding: 3px 5px;
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.65);
    box-shadow: 0 2px 8px rgba(15, 163, 107, 0.06);
    z-index: 10;
    flex-shrink: 0;
}

/* The tab icons are full-colour illustrations: they cannot inherit currentColor, so the
   active state is carried by the button (white surface + green ring) and the inactive one
   by desaturating the image. Never repaint the icon itself. */
.pxd-panel-tab {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    /* The three buttons share the whole width of the bar. Their height is set here and
       does NOT follow the artwork: the illustration sits inside, centred, smaller than the
       button. Tying the height to the 3:2 ratio of a full-width button would give a 96px
       tall bar on a normal screen, and far more on a wide one.
       Height = image height + 2px of air above and below, no more: the button is a frame
       around the illustration, not a box it floats in. */
    flex: 1 1 0;
    min-width: 0;
    height: 48px;
    padding: 0;
    overflow: hidden;
    border: 1px solid transparent;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 14px;
    cursor: pointer;
    color: var(--pixidia-gray-400, #8a9c9c);
    transition: background var(--duration-normal, 250ms) var(--ease-smooth, cubic-bezier(0.4, 0, 0.2, 1)),
                box-shadow var(--duration-normal, 250ms) var(--ease-smooth, cubic-bezier(0.4, 0, 0.2, 1)),
                transform var(--duration-normal, 250ms) var(--ease-smooth, cubic-bezier(0.4, 0, 0.2, 1));
    font-size: 0;
}

.pxd-panel-tab .pxd-tab-icon,
.pxd-panel-tab picture {
    display: block;
    line-height: 0;
}

/* The illustration keeps its own 3:2 — height fixed, width derived — and is centred by
   the button's own flexbox. It stays smaller than the button so it reads as an icon. */
.pxd-panel-tab .pxd-tab-icon img {
    display: block;
    width: auto;
    height: 44px;
    object-fit: contain;
    filter: grayscale(0.55) opacity(0.55);
    transition: filter var(--duration-normal, 250ms) var(--ease-smooth, cubic-bezier(0.4, 0, 0.2, 1)),
                transform var(--duration-normal, 250ms) var(--ease-smooth, cubic-bezier(0.4, 0, 0.2, 1));
}

.pxd-panel-tab:hover {
    background: rgba(255, 255, 255, 0.78);
    border-color: rgba(255, 255, 255, 0.65);
    box-shadow: 0 4px 10px rgba(15, 163, 107, 0.07);
    transform: translateY(-1px);
}

.pxd-panel-tab:hover .pxd-tab-icon img {
    filter: none;
}

.pxd-panel-tab:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--pxd-main, #0fa36b), 0 4px 10px rgba(15, 163, 107, 0.12);
}

.pxd-panel-tab--active,
.pxd-panel-tab--active:hover {
    background: #fff;
    border-color: transparent;
    box-shadow: var(--pxd-active-ring, 0 0 0 2px #0fa36b), var(--pxd-active-shadow, 0 4px 12px rgba(15, 163, 107, 0.25));
}

.pxd-panel-tab--active:hover {
    transform: translateY(-1px);
    box-shadow: var(--pxd-active-ring, 0 0 0 2px #0fa36b), var(--pxd-active-shadow-hover, 0 6px 16px rgba(15, 163, 107, 0.3));
}

.pxd-panel-tab--active .pxd-tab-icon img {
    filter: none;
}

@media (prefers-reduced-motion: reduce) {
    .pxd-panel-tab,
    .pxd-panel-tab .pxd-tab-icon img {
        transition: none;
    }

    .pxd-panel-tab:hover,
    .pxd-panel-tab--active:hover {
        transform: none;
    }
}

/* ── Branded tooltips (13-tooltips.md) ───────────────────────

   Scoped to the itinerary page rather than to a single component: every icon-only
   control here uses it. Rule of the design system — data-tooltip OR title, never both:
   the native bubble is neither styleable nor positionable, and doubles the first one.
   The accessible name goes to aria-label.
   Default placement is above; data-tooltip-placement="left" is for controls sitting at
   the top edge of the map, where a bubble above would be clipped by overflow:hidden. */

body.pxd-itinerary-single [data-tooltip] {
    position: relative;
}

body.pxd-itinerary-single [data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    padding: 5px 12px;
    border-radius: 8px;
    background: var(--pxd-active-grad, linear-gradient(135deg, #0fa36b 25%, #38c19c 100%));
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(15, 163, 107, 0.25);
}

body.pxd-itinerary-single [data-tooltip]::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    border: 5px solid transparent;
    border-top-color: #0fa36b;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 100;
}

body.pxd-itinerary-single [data-tooltip]:hover::after,
body.pxd-itinerary-single [data-tooltip]:hover::before,
body.pxd-itinerary-single [data-tooltip]:focus-visible::after,
body.pxd-itinerary-single [data-tooltip]:focus-visible::before {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Placement: left */
body.pxd-itinerary-single [data-tooltip][data-tooltip-placement="left"]::after {
    bottom: auto;
    top: 50%;
    left: auto;
    right: calc(100% + 8px);
    transform: translateY(-50%) translateX(4px);
}

body.pxd-itinerary-single [data-tooltip][data-tooltip-placement="left"]::before {
    bottom: auto;
    top: 50%;
    left: auto;
    right: calc(100% + 4px);
    transform: translateY(-50%) translateX(4px);
    border-top-color: transparent;
    border-left-color: #38c19c;
}

body.pxd-itinerary-single [data-tooltip][data-tooltip-placement="left"]:hover::after,
body.pxd-itinerary-single [data-tooltip][data-tooltip-placement="left"]:hover::before,
body.pxd-itinerary-single [data-tooltip][data-tooltip-placement="left"]:focus-visible::after,
body.pxd-itinerary-single [data-tooltip][data-tooltip-placement="left"]:focus-visible::before {
    transform: translateY(-50%) translateX(0);
}

/* ============================================
   PANEL MODES (map / pixi / pixi-full)
   ============================================ */

.pxd-panel-right {
    display: flex;
    flex-direction: column;
}

.pxd-map-zone {
    flex: 1;
    position: relative;
    overflow: hidden;
    transition: flex 350ms var(--ease-smooth, cubic-bezier(0.4, 0, 0.2, 1));
}

.pxd-assistant-zone {
    flex: 0;
    overflow: hidden;
    transition: flex 350ms var(--ease-smooth, cubic-bezier(0.4, 0, 0.2, 1));
}

/* Mode: map (default) */
.pxd-panel-right[data-mode="map"] .pxd-map-zone {
    flex: 1;
}

.pxd-panel-right[data-mode="map"] .pxd-assistant-zone {
    flex: 0;
    height: 0;
    display: none;
}

/* Mode: pixi — assistant only, inside the right column */
.pxd-panel-right[data-mode="pixi"] .pxd-map-zone {
    flex: 0;
    height: 0;
    overflow: hidden;
    display: none;
}

.pxd-panel-right[data-mode="pixi"] .pxd-assistant-zone {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* ── Mode: pixi-full ─────────────────────────────────────────

   The conversation takes over the nav and content columns; the map keeps the right one.
   Nothing moves in the DOM: the page grid collapses to two columns and the right panel
   becomes a grid of its own, so panel-toggle.js keeps its cached node references and
   Leaflet keeps its container.
   Under the V2 panel, from 769 to 1199 px, the section rail stays and the grid keeps three columns: see the R13c rules in 51-assistant-v2.css. */

.pxd-page[data-layout="pixi-full"] {
    grid-template-columns: 1fr var(--pxd-right-width);
}

.pxd-page[data-layout="pixi-full"] .pxd-sidebar-nav,
.pxd-page[data-layout="pixi-full"] .pxd-panel-left {
    display: none;
}

.pxd-page[data-layout="pixi-full"] .pxd-panel-right {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr var(--pxd-right-width);
    grid-template-rows: auto 1fr;
}

.pxd-page[data-layout="pixi-full"] .pxd-panel-tabs {
    grid-column: 2;
    grid-row: 1;
}

.pxd-page[data-layout="pixi-full"] .pxd-map-zone {
    grid-column: 2;
    grid-row: 2;
    flex: initial;
}

.pxd-page[data-layout="pixi-full"] .pxd-assistant-zone {
    grid-column: 1;
    grid-row: 1 / -1;
    flex: initial;
    display: flex;
    flex-direction: column;
    border-right: 1px solid rgba(15, 163, 107, 0.12);
    background:
        radial-gradient(110% 70% at 8% 0%, rgba(30, 155, 82, 0.07), rgba(30, 155, 82, 0) 60%),
        radial-gradient(80% 60% at 96% 18%, rgba(32, 201, 184, 0.07), rgba(32, 201, 184, 0) 60%),
        #f7f7f9;
}

/* A 448px map column cannot host a rich popup: tooltips only, legend out of the way. */
.pxd-panel-right[data-mode="pixi-full"] .pxd-map-legend {
    display: none;
}

.pxd-panel-right[data-mode="pixi-full"] .pxd-map-controls {
    top: 6px;
    right: 6px;
}

.pxd-panel-right[data-mode="pixi-full"] .pxd-map-controls .pxd-map-btn {
    width: 30px;
    height: 30px;
}

/* The attribution stays displayed (OSM and Jawg licences require it): compact, never hidden. */
.pxd-panel-right[data-mode="pixi-full"] .leaflet-control-attribution {
    font-size: 10px;
    line-height: 1.3;
    max-width: 100%;
}

/* Every popup stays hidden here except the short one of a pin Pixi proposes (L3). Leaflet puts
   the className on .leaflet-popup itself, and addMarker() popups carry .pxd-marker-popup, not
   .pxd-map-popup: hence one rule on .leaflet-popup. The old .pxd-proposal-popup matched nothing. */
.pxd-panel-right[data-mode="pixi-full"] .leaflet-popup:not(.pxd-map-popup--proposal) {
    display: none !important;
}

/* ============================================
   ASSISTANT INNER LAYOUT — Glassmorphism
   ============================================ */

.pxd-assistant-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: rgba(255, 255, 255, 0.3);
    font-family: 'Urbanist', 'Inter', sans-serif;
    /* Reset Elementor global overrides */
    --e-global-color-primary: initial;
    --button-background-color: initial;
}

.pxd-assistant-messages {
    flex: 1;
    overflow-y: auto;
    padding: 14px;
    scrollbar-width: thin;
    scrollbar-color: rgba(15, 163, 107, 0.15) transparent;
}

.pxd-assistant-messages::-webkit-scrollbar {
    width: 4px;
}

.pxd-assistant-messages::-webkit-scrollbar-track {
    background: transparent;
}

.pxd-assistant-messages::-webkit-scrollbar-thumb {
    background: rgba(15, 163, 107, 0.15);
    border-radius: 2px;
}

.pxd-assistant-messages::-webkit-scrollbar-thumb:hover {
    background: rgba(15, 163, 107, 0.3);
}

/* ============================================
   INPUT BAR — Aligned with chat widget
   ============================================ */

.pxd-assistant-input-bar {
    display: flex;
    gap: 8px;
    padding: 12px 14px;
    border-top: 1px solid rgba(15, 163, 107, 0.1);
    background: rgba(255, 255, 255, 0.95);
    flex-shrink: 0;
    align-items: center;
}

.pxd-assistant-input {
    flex: 1;
    padding: 9px 14px;
    border: 1px solid rgba(15, 163, 107, 0.15);
    border-radius: 18px;
    font-size: 13px;
    font-weight: 500;
    font-family: 'Urbanist', 'Inter', sans-serif;
    outline: none;
    transition: border-color var(--duration-normal, 250ms) ease, box-shadow var(--duration-normal, 250ms) ease;
    background: rgba(255, 255, 255, 0.8);
    color: var(--pixidia-text, #012827);
    min-height: 36px;
}

.pxd-assistant-input:focus {
    border-color: #0fa36b;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(15, 163, 107, 0.1);
}

.pxd-assistant-input::placeholder {
    color: var(--pixidia-text-muted, rgba(1, 40, 39, 0.55));
    font-weight: 400;
}

.pxd-assistant-send {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 10px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0fa36b 25%, #38c19c 100%);
    color: #fff;
    border: none;
    cursor: pointer;
    transition: all var(--duration-fast, 150ms) var(--ease-smooth, cubic-bezier(0.4, 0, 0.2, 1));
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9), 0 4px 8px rgba(15, 163, 107, 0.2);
    flex-shrink: 0;
}

.pxd-assistant-send:hover {
    background: linear-gradient(135deg, #0d8c5a 25%, #2ea88a 100%);
    transform: scale(1.08);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9), 0 6px 16px rgba(15, 163, 107, 0.35);
}

.pxd-assistant-send:active {
    transform: scale(0.95);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9), 0 2px 4px rgba(15, 163, 107, 0.15);
}

.pxd-assistant-send svg {
    width: 16px;
    height: 16px;
    stroke: #fff;
}

/* ============================================
   MESSAGE BUBBLES — Glassmorphism Level 2
   ============================================ */

.pxd-assistant-msg {
    max-width: 85%;
    padding: 8px 12px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.45;
    letter-spacing: 0.005em;
    margin-bottom: 8px;
    word-wrap: break-word;
    animation: pxd-msg-in 250ms var(--ease-out, cubic-bezier(0, 0, 0.2, 1));
}

.pxd-assistant-msg--user {
    margin-left: auto;
    background: rgba(15, 163, 107, 0.08);
    color: var(--pixidia-text, #1a2e2e);
    border: 1px solid rgba(15, 163, 107, 0.15);
    border-radius: 12px 12px 4px 12px;
    font-weight: 500;
}

.pxd-assistant-msg--bot {
    margin-right: auto;
    background: rgba(255, 255, 255, 0.78);
    color: #2c3e50;
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 12px 12px 12px 4px;
    box-shadow: 0 2px 8px rgba(15, 163, 107, 0.06);
    font-weight: 400;
}

.pxd-assistant-msg--bot:hover {
    box-shadow: 0 4px 12px rgba(15, 163, 107, 0.12);
}

.pxd-assistant-msg--bot a {
    color: #0d8c5a;
    text-decoration: underline;
    font-weight: 600;
}

.pxd-assistant-msg--bot strong {
    font-weight: 700;
    color: var(--pixidia-text, #012827);
}

.pxd-assistant-msg--bot em {
    font-style: italic;
    color: var(--pixidia-gray-400, #8a9c9c);
    font-size: 0.95em;
}

.pxd-assistant-msg--bot .pxd-assistant-heading {
    font-size: 14px;
    font-weight: 700;
    color: var(--pixidia-text, #012827);
    margin: 8px 0 4px;
}

/* First bot message (welcome) — slightly larger */
.pxd-assistant-msg--bot:first-child {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--pixidia-text, #012827);
}

@keyframes pxd-msg-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============================================
   TYPING INDICATOR — Green themed
   ============================================ */

.pxd-assistant-typing {
    display: inline-flex;
    gap: 5px;
    padding: 10px 16px;
    margin-bottom: 8px;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 12px 12px 12px 4px;
}

.pxd-typing-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #0fa36b;
    animation: pxd-typing-pulse 1.4s ease-in-out infinite;
}

.pxd-typing-dot:nth-child(2) { animation-delay: 0.2s; }
.pxd-typing-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes pxd-typing-pulse {
    0%, 80%, 100% { opacity: 0.25; transform: scale(0.8); }
    40% { opacity: 1; transform: scale(1); }
}

/* ============================================
   QUICK SUGGESTION PILLS — Branded
   ============================================ */

.pxd-assistant-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
    padding: 0 2px;
}

.pxd-assistant-suggestion-pill {
    padding: 6px 14px;
    border: 1px solid rgba(15, 163, 107, 0.25);
    border-radius: var(--radius-full, 100px);
    background: rgba(15, 163, 107, 0.04);
    color: #0d8c5a;
    font-size: 12.5px;
    font-weight: 600;
    font-family: 'Urbanist', 'Inter', sans-serif;
    cursor: pointer;
    transition: all var(--duration-normal, 250ms) var(--ease-smooth);
    white-space: nowrap;
}

.pxd-assistant-suggestion-pill:hover {
    background: linear-gradient(135deg, #0fa36b 25%, #38c19c 100%);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(15, 163, 107, 0.25);
    transform: translateY(-1px);
}

.pxd-assistant-suggestion-pill:active {
    transform: translateY(0) scale(0.97);
}

/* ============================================
   PIXI CARDS — Glassmorphism Level 1
   ============================================ */

.pxd-assistant-cards {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 4px 2px 10px;
    scrollbar-width: none;
}

.pxd-assistant-cards::-webkit-scrollbar {
    display: none;
}

.pxd-assistant-cards-wrapper {
    margin-bottom: 10px;
}

.pxd-pixi-card {
    flex: 0 0 210px;
    scroll-snap-align: start;
    border-radius: var(--radius-md, 12px);
    overflow: hidden;
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.65);
    box-shadow: 0 10px 30px -5px rgba(15, 163, 107, 0.12), 0 2px 8px rgba(15, 163, 107, 0.06);
    transition: all var(--duration-normal, 250ms) var(--ease-smooth);
    animation: pxd-card-in 400ms var(--ease-out) both;
    position: relative;
}

.pxd-pixi-card:nth-child(2) { animation-delay: 60ms; }
.pxd-pixi-card:nth-child(3) { animation-delay: 120ms; }
.pxd-pixi-card:nth-child(4) { animation-delay: 180ms; }
.pxd-pixi-card:nth-child(5) { animation-delay: 240ms; }

.pxd-pixi-card:hover {
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 15px 40px -5px rgba(15, 163, 107, 0.20), 0 5px 15px rgba(15, 163, 107, 0.08);
    transform: translateY(-3px);
}

.pxd-pixi-card--highlight {
    box-shadow: 0 0 0 2px #0fa36b, 0 15px 40px -5px rgba(15, 163, 107, 0.25) !important;
}

@keyframes pxd-card-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Card photo */
.pxd-pixi-card-photo {
    width: 100%;
    padding-bottom: 60%;
    background: linear-gradient(135deg, var(--pixidia-gray-200, #dce4e4) 0%, var(--pixidia-gray-100, #eef2f2) 100%);
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
}

/* Subtle overlay for text readability */
.pxd-pixi-card-photo::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.25) 100%);
    pointer-events: none;
}

.pxd-pixi-card-type {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 3px 8px;
    border-radius: var(--radius-full, 100px);
    color: #fff;
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 1;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* Rating badge on photo (top right) */
.pxd-pixi-card-rating-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 3px 7px;
    border-radius: var(--radius-full, 100px);
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    z-index: 1;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.pxd-pixi-card-rating-badge .pxd-icon-xs,
.pxd-pixi-card-rating-badge svg {
    width: 11px;
    height: 11px;
    fill: var(--pixidia-orange, #f59e0b);
    stroke: var(--pixidia-orange, #f59e0b);
}

/* Card body */
.pxd-pixi-card-body {
    padding: 10px 12px 12px;
}

.pxd-pixi-card-name {
    font-size: 13px;
    font-weight: 700;
    margin: 0 0 4px;
    line-height: 1.3;
    color: var(--pixidia-text, #012827);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Card meta (price + distance) */
.pxd-pixi-card-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--pixidia-text-muted, rgba(1, 40, 39, 0.55));
    margin-bottom: 4px;
    font-weight: 500;
}

.pxd-pixi-card-meta span + span::before {
    content: '· ';
    color: var(--pixidia-gray-300, #b8c5c5);
}

/* Transport/Hotel card extras */
.pxd-pixi-card-stars {
    color: #f5a623;
    letter-spacing: -1px;
    font-size: 12px;
}
.pxd-pixi-card-duration,
.pxd-pixi-card-stops,
.pxd-pixi-card-info {
    font-size: 11px;
}

/* ── Dedicated Transport Card Layout (no photo) ─────────────── */
.pxd-pixi-card.pxd-pixi-card--transport {
    display: flex;
    flex-direction: column;
    padding: 14px;
    gap: 10px;
    background: linear-gradient(135deg, #f8fafc 0%, #eff6ff 100%);
    border: 1px solid rgba(25, 118, 210, 0.15);
}
.pxd-pixi-card.pxd-pixi-card--transport .pxd-pixi-card-photo {
    display: none;
}
.pxd-pxt-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}
.pxd-pxt-mode {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: var(--color-transport, #1976d2);
    color: #fff;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.pxd-pxt-mode-icon {
    font-size: 13px;
}
.pxd-pxt-source {
    font-size: 10px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 10px;
    white-space: nowrap;
}
.pxd-pxt-source--real {
    background: #e8f5e9;
    color: #2e7d32;
}
.pxd-pxt-source--est {
    background: #fff3e0;
    color: #e65100;
}
.pxd-pxt-title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--pixidia-text, #012827);
    line-height: 1.2;
}
.pxd-pxt-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 10px 12px;
    background: #fff;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
}
.pxd-pxt-metric {
    display: flex;
    align-items: baseline;
    gap: 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--pixidia-text, #012827);
}
.pxd-pxt-metric-icon {
    font-size: 14px;
    opacity: 0.7;
}
.pxd-pxt-metric--price {
    margin-left: auto;
    color: var(--color-transport, #1976d2);
    font-size: 15px;
}
.pxd-pxt-metric-suffix {
    font-size: 11px;
    opacity: 0.6;
    font-weight: 400;
    margin-left: 2px;
}
.pxd-pxt-segments {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
    background: #fff;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
}
.pxd-pxt-segment {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    line-height: 1.3;
    flex-wrap: wrap;
}
.pxd-pxt-segment + .pxd-pxt-segment {
    padding-top: 6px;
    border-top: 1px dashed #e5e7eb;
}
.pxd-pxt-seg-icon {
    font-size: 14px;
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}
.pxd-pxt-seg-route {
    font-weight: 600;
    color: var(--pixidia-text, #012827);
    flex: 1;
}
.pxd-pxt-seg-dur {
    font-size: 11px;
    color: var(--pixidia-text-muted, #6b7280);
    background: #f3f4f6;
    padding: 1px 6px;
    border-radius: 4px;
}
.pxd-pxt-seg-airline {
    font-size: 11px;
    color: var(--color-transport, #1976d2);
    font-weight: 500;
}
.pxd-pxt-seg-real {
    font-size: 11px;
    color: #2e7d32;
    font-weight: 700;
}
.pxd-pxt-scores {
    display: flex;
    gap: 10px;
    justify-content: flex-start;
    font-size: 11px;
}
.pxd-pxt-score {
    color: var(--pixidia-text-muted, #6b7280);
    background: #f3f4f6;
    padding: 3px 8px;
    border-radius: 4px;
}
.pxd-pxt-add-btn {
    width: 100%;
    justify-content: center;
}
.pxd-pixi-card.pxd-pixi-card--transport .pxd-pixi-card-actions {
    margin-top: 2px;
}
.pxd-pixi-card-photo--placeholder {
    background: linear-gradient(135deg, #e8eff0 0%, #d0dadb 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}
.pxd-pixi-card-photo--placeholder::before {
    content: '';
    display: block;
    width: 32px;
    height: 32px;
    opacity: 0.3;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23012827'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909M3.75 21h16.5A2.25 2.25 0 0022.5 18.75V5.25A2.25 2.25 0 0020.25 3H3.75A2.25 2.25 0 001.5 5.25v13.5A2.25 2.25 0 003.75 21z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* City line */
.pxd-pixi-card-city {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    color: var(--pixidia-text-muted, rgba(1, 40, 39, 0.55));
    margin-bottom: 4px;
}

.pxd-pixi-card-city svg {
    width: 11px;
    height: 11px;
    flex-shrink: 0;
    opacity: 0.6;
}

/* Card reason */
.pxd-pixi-card-reason {
    font-size: 11px;
    color: var(--pixidia-gray-400, #8a9c9c);
    font-style: italic;
    line-height: 1.35;
    margin: 0 0 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Card actions row */
.pxd-pixi-card-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-top: 8px;
    border-top: 1px solid rgba(1, 40, 39, 0.05);
}

/* Shared pill style for Carte & Ajouter */
.pxd-pixi-card-map-btn,
.pxd-pixi-card-add-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 5px 12px;
    font-size: 11px;
    font-weight: 600;
    border: 1px solid rgba(1, 40, 39, 0.08);
    border-radius: var(--radius-full, 100px);
    background: rgba(255, 255, 255, 0.78);
    color: var(--pixidia-text-muted, rgba(1, 40, 39, 0.55));
    cursor: pointer;
    font-family: 'Urbanist', 'Inter', sans-serif;
    transition: all var(--duration-fast, 150ms) var(--ease-smooth, ease);
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(1, 40, 39, 0.04);
}

.pxd-pixi-card-map-btn:hover {
    background: rgba(15, 163, 107, 0.08);
    border-color: rgba(15, 163, 107, 0.2);
    color: #0d8c5a;
    box-shadow: 0 2px 6px rgba(15, 163, 107, 0.12);
}

.pxd-pixi-card-add-btn:hover {
    background: linear-gradient(135deg, rgba(15, 163, 107, 0.08), rgba(32, 201, 184, 0.06));
    border-color: rgba(15, 163, 107, 0.25);
    color: var(--pixidia-green, #208D3E);
    box-shadow: 0 2px 8px rgba(15, 163, 107, 0.15);
    transform: translateY(-1px);
}

.pxd-pixi-card-map-btn:active,
.pxd-pixi-card-add-btn:active {
    transform: scale(0.97);
}

.pxd-pixi-card-map-btn .pxd-icon-xs,
.pxd-pixi-card-map-btn svg,
.pxd-pixi-card-add-btn .pxd-icon-xs,
.pxd-pixi-card-add-btn svg {
    width: 12px;
    height: 12px;
}

/* Feedback buttons — overlay on card photo (top-right) */
.pxd-pixi-card-photo {
    position: relative;
}

.pxd-pixi-card-feedback {
    position: absolute;
    bottom: 6px;
    right: 6px;
    display: flex;
    align-items: center;
    gap: 3px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.pxd-pixi-card:hover .pxd-pixi-card-feedback {
    opacity: 1;
}

.pxd-feedback-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: var(--radius-xs, 6px);
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: var(--pixidia-gray-400, #8a9c9c);
    cursor: pointer;
    transition: all var(--duration-fast, 150ms) var(--ease-smooth, ease);
    padding: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.pxd-feedback-btn svg,
.pxd-feedback-btn .pxd-icon-xs {
    width: 12px;
    height: 12px;
}

.pxd-feedback-btn:hover {
    background: rgba(255, 255, 255, 0.95);
    color: var(--pixidia-text, #1a2e2e);
    transform: scale(1.1);
}

.pxd-feedback-up.pxd-feedback-active {
    background: rgba(15, 163, 107, 0.9);
    color: white;
}

.pxd-feedback-down.pxd-feedback-active {
    background: rgba(229, 57, 53, 0.85);
    color: white;
}

/* Show feedback always on touch devices */
@media (hover: none) {
    .pxd-pixi-card-feedback {
        opacity: 1;
    }
}

/* ============================================
   SKELETON CARDS (Shimmer)
   ============================================ */

.pxd-pixi-card--skeleton {
    pointer-events: none;
    background: rgba(255, 255, 255, 0.5);
}

.pxd-shimmer {
    background: linear-gradient(90deg,
        rgba(15, 163, 107, 0.06) 25%,
        rgba(15, 163, 107, 0.02) 50%,
        rgba(15, 163, 107, 0.06) 75%
    );
    background-size: 200% 100%;
    animation: pxd-shimmer 1.5s ease-in-out infinite;
    border-radius: 4px;
}

@keyframes pxd-shimmer {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}

/* ============================================
   PROFILE NUDGE — Green accent
   ============================================ */

.pxd-assistant-nudge {
    padding: 8px 12px;
    margin: 8px 0;
    background: rgba(15, 163, 107, 0.06);
    border-left: 3px solid #0fa36b;
    border-radius: 0 var(--radius-sm, 8px) var(--radius-sm, 8px) 0;
    font-size: 12.5px;
    color: var(--pixidia-text, #1a2e2e);
    line-height: 1.4;
    animation: pxd-msg-in 250ms var(--ease-out);
}

.pxd-assistant-nudge a {
    color: #0d8c5a;
    font-weight: 600;
    text-decoration: underline;
}

/* ============================================
   RESPONSIVE — TABLET (768-1200px)
   ============================================ */

@media (max-width: 1200px) and (min-width: 769px) {
    .pxd-pixi-card {
        flex: 0 0 185px;
    }

    /* The map column is already 40% here (--pxd-right-width): the tabs follow it. */
    .pxd-panel-tab {
        height: 44px;
    }

    .pxd-panel-tab .pxd-tab-icon img {
        height: 40px;
    }
}

/* ============================================
   RESPONSIVE — MOBILE (<768px)
   ============================================ */

@media (max-width: 768px) {
    .pxd-panel-tabs {
        padding: 3px 4px;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    .pxd-panel-tab {
        height: 40px;
    }

    .pxd-panel-tab .pxd-tab-icon img {
        height: 36px;
    }

    /* Hide tooltips on mobile: a native-like bubble never shows on tap anyway */
    body.pxd-itinerary-single [data-tooltip]::after,
    body.pxd-itinerary-single [data-tooltip]::before {
        display: none;
    }

    /* pixi-full has no meaning without a grid: behave exactly like pixi, and give the
       content column back — the mobile layout is a block flow with a bottom sheet. */
    .pxd-page[data-layout="pixi-full"] {
        grid-template-columns: none;
    }

    .pxd-page[data-layout="pixi-full"] .pxd-panel-left {
        display: block;
    }

    .pxd-page[data-layout="pixi-full"] .pxd-panel-right {
        grid-column: 1;
        display: flex;
        flex-direction: column;
        grid-template-columns: none;
        grid-template-rows: none;
    }

    .pxd-page[data-layout="pixi-full"] .pxd-map-zone {
        display: none;
    }

    .pxd-page[data-layout="pixi-full"] .pxd-assistant-zone {
        grid-column: auto;
        grid-row: auto;
        flex: 1;
        border-right: 0;
        background: none;
    }

    .pxd-pixi-card {
        flex: 0 0 190px;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    .pxd-assistant-input {
        font-size: 16px; /* Prevent iOS zoom */
    }

    .pxd-assistant-msg {
        max-width: 90%;
        font-size: 13px;
    }

    .pxd-assistant-input-bar {
        padding: 10px 12px;
        padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    }
}

/* ════════════════════════════════════════════════════════════════
   Pixi Mascot — integration points (Phase 5.5 — mascotte camaeleon)
   ════════════════════════════════════════════════════════════════ */

.pxd-pixi-mascot {
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
}
.pxd-pixi-mascot img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Welcome hero (neutre 72px) */
.pxd-assistant-msg--welcome {
    background: linear-gradient(135deg, rgba(15, 163, 107, 0.08), rgba(56, 193, 156, 0.04));
    border-radius: 16px;
    padding: 14px 16px;
    max-width: none;
}
.pxd-assistant-welcome-hero {
    display: flex;
    align-items: center;
    gap: 14px;
}
.pxd-assistant-welcome-text {
    flex: 1;
    font-size: 15px;
    line-height: 1.5;
}

/* Typing indicator (thinking 40px + dots) */
.pxd-assistant-typing {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
}
.pxd-assistant-typing-pixi {
    animation: pxd-pixi-float 1.6s ease-in-out infinite;
    transform-origin: center bottom;
}
@keyframes pxd-pixi-float {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50%      { transform: translateY(-3px) rotate(2deg); }
}
.pxd-typing-dots {
    display: inline-flex;
    gap: 4px;
}

/* Profile nudge (pointing 40px) */
.pxd-assistant-nudge-inner {
    display: flex;
    align-items: center;
    gap: 12px;
}
.pxd-assistant-nudge-text {
    flex: 1;
    font-size: 13px;
    line-height: 1.4;
}

/* Empty cards (confused 120px) */
.pxd-assistant-empty-cards {
    text-align: center;
    padding: 20px 16px;
    color: var(--pxd-text-muted, #6b7280);
}
.pxd-assistant-empty-cards .pxd-pixi-mascot {
    margin: 0 auto 10px;
}
.pxd-assistant-empty-cards p {
    font-size: 14px;
    max-width: 280px;
    margin: 0 auto;
    line-height: 1.4;
}

/* Toast Pixi (override sizing via wrapper) */
.pxd-toast .pxd-toast-pixi {
    width: 36px !important;
    height: auto !important;
}

/* Mobile ≤640px — reduce sizes */
@media (max-width: 640px) {
    .pxd-assistant-welcome-hero { gap: 10px; }
    .pxd-assistant-welcome-hero .pxd-pixi-mascot {
        width: 56px !important;
        height: auto !important;
    }
    .pxd-assistant-empty-cards .pxd-pixi-mascot {
        width: 96px !important;
        height: auto !important;
    }
}

/* ============================================
   CONVERSATION PIXI — aligned with /pixi/ (pixi-page.css)
   ============================================

   Vocabulary taken from the Pixi page so the assistant reads the same everywhere:
   a dark bubble for what you said, no bubble at all for what Pixi answered (avatar +
   name + prose), a rounded composer, pill-shaped controls.

   Scoped under body.pxd-itinerary-single: it has to win over BuddyX and the Elementor
   kit, which style every bare button and every link on the page, without resorting to
   !important on each declaration. Every interaction state is declared for the same
   reason — an undeclared :hover is a BuddyX :hover.
   Contrast rule of the design system: never white text on light green. */

body.pxd-itinerary-single .pxd-assistant-zone {
    --pxc-ink: #0A3D3A;
    --pxc-ink-soft: #425a58;
    --pxc-green: #0fa36b;
    --pxc-line: rgba(1, 40, 39, 0.10);
}

/* ── Identity line (AI Act art. 50) ───────────────────────── */

body.pxd-itinerary-single .pxd-assistant-identity {
    margin: 0;
    padding: 9px 16px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--pxc-ink-soft);
    background: rgba(255, 255, 255, 0.55);
    border-bottom: 1px solid var(--pxc-line);
}

/* ── Conversation toolbar (new / previous) ────────────────── */

body.pxd-itinerary-single .pxd-pixi-conversation-toolbar {
    gap: 8px;
    padding: 10px 16px 4px;
}

body.pxd-itinerary-single .pxd-pixi-conversation-toolbar button {
    min-height: 34px;
    padding: 0 14px;
    border: 1px solid var(--pxc-line);
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.85);
    color: var(--pxc-ink);
    box-shadow: 0 2px 8px rgba(15, 163, 107, 0.06);
    font: 700 12px/1.4 'Urbanist', 'Inter', sans-serif;
    text-transform: none;
    letter-spacing: 0;
    cursor: pointer;
    transition: background var(--duration-fast, 150ms) ease, box-shadow var(--duration-fast, 150ms) ease;
}

body.pxd-itinerary-single .pxd-pixi-conversation-toolbar button:hover {
    background: #fff;
    color: var(--pxc-ink);
    box-shadow: 0 8px 20px -10px rgba(15, 163, 107, 0.35);
}

body.pxd-itinerary-single .pxd-pixi-conversation-toolbar button:focus-visible {
    outline: none;
    box-shadow: var(--pxd-active-ring), 0 2px 8px rgba(15, 163, 107, 0.06);
}

/* ── Messages ─────────────────────────────────────────────── */

body.pxd-itinerary-single .pxd-assistant-messages {
    padding: 16px 16px 8px;
}

/* What you said: dark bubble on the right, like the Pixi page. */
body.pxd-itinerary-single .pxd-assistant-msg--user {
    max-width: min(76%, 560px);
    margin-left: auto;
    padding: 11px 16px;
    border: 0;
    border-radius: 18px 18px 6px 18px;
    background: var(--pxc-ink);
    color: #fff;
    font-weight: 500;
    box-shadow: 0 14px 30px -20px rgba(10, 61, 58, 0.6);
}

/* The durable view prints a name before each message. It is redundant on your own
   bubble, and it is the label of Pixi's answer. */
body.pxd-itinerary-single .pxd-assistant-msg--user > strong {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* What Pixi answered: no bubble. An avatar, a name, then readable prose. */
body.pxd-itinerary-single .pxd-assistant-msg--bot {
    position: relative;
    max-width: 100%;
    margin-right: 0;
    padding: 2px 0 2px 46px;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: var(--pxc-ink);
    font-size: 13.5px;
    line-height: 1.55;
}

body.pxd-itinerary-single .pxd-assistant-msg--bot:hover {
    box-shadow: none;
}

body.pxd-itinerary-single .pxd-assistant-msg--bot::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 36px;
    height: 36px;
    border-radius: 9999px;
    border: 1px solid rgba(1, 40, 39, 0.08);
    background-color: #fff;
    background-image: url('../../img/pixi/pixi-neutre@2x.webp');
    background-repeat: no-repeat;
    background-position: center 2px;
    background-size: 30px auto;
    box-shadow: 0 2px 8px rgba(15, 163, 107, 0.08);
}

body.pxd-itinerary-single .pxd-assistant-msg--bot > strong {
    display: block;
    margin-bottom: 2px;
    font: 800 12px/1.4 'Urbanist', 'Inter', sans-serif;
    letter-spacing: 0.01em;
    color: var(--pxc-ink);
}

/* The welcome message keeps its own hero layout: no avatar in front of it. */
body.pxd-itinerary-single .pxd-assistant-msg--welcome {
    padding-left: 0;
}

body.pxd-itinerary-single .pxd-assistant-msg--welcome::before {
    content: none;
}

/* ── Rich prose (renderRich) ──────────────────────────────── */

body.pxd-itinerary-single .pxd-assistant-prose > *:first-child {
    margin-top: 0;
}

body.pxd-itinerary-single .pxd-assistant-prose > *:last-child {
    margin-bottom: 0;
}

body.pxd-itinerary-single .pxd-assistant-prose p {
    margin: 0 0 8px;
}

body.pxd-itinerary-single .pxd-assistant-prose h4,
body.pxd-itinerary-single .pxd-assistant-prose h5 {
    margin: 14px 0 6px;
    font-family: 'Urbanist', 'Inter', sans-serif;
    font-weight: 800;
    line-height: 1.3;
    color: var(--pxc-ink);
}

body.pxd-itinerary-single .pxd-assistant-prose h4 {
    font-size: 15px;
}

body.pxd-itinerary-single .pxd-assistant-prose h5 {
    font-size: 13.5px;
    color: var(--pxc-ink-soft);
}

body.pxd-itinerary-single .pxd-assistant-prose ul,
body.pxd-itinerary-single .pxd-assistant-prose ol {
    margin: 0 0 8px;
    padding-left: 20px;
}

body.pxd-itinerary-single .pxd-assistant-prose li {
    margin: 0 0 3px;
}

body.pxd-itinerary-single .pxd-assistant-prose li::marker {
    color: var(--pxc-green);
}

body.pxd-itinerary-single .pxd-assistant-prose a {
    color: #0d8c5a;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

body.pxd-itinerary-single .pxd-assistant-prose a:hover {
    color: var(--pxc-ink);
}

body.pxd-itinerary-single .pxd-assistant-prose .pxip-table {
    overflow-x: auto;
    margin: 0 0 10px;
}

body.pxd-itinerary-single .pxd-assistant-prose table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}

body.pxd-itinerary-single .pxd-assistant-prose th,
body.pxd-itinerary-single .pxd-assistant-prose td {
    padding: 6px 8px;
    border-bottom: 1px solid var(--pxc-line);
    text-align: left;
    vertical-align: top;
}

body.pxd-itinerary-single .pxd-assistant-prose th {
    font-weight: 700;
    color: var(--pxc-ink);
    white-space: nowrap;
}

/* ── "Pixi is working" ────────────────────────────────────── */

body.pxd-itinerary-single .pxd-pixi-conversation-status:not(:empty) {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 16px 8px 46px;
    padding: 9px 14px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid var(--pxc-line);
    color: var(--pxc-ink-soft);
    font-size: 12.5px;
    font-weight: 600;
}

body.pxd-itinerary-single .pxd-pixi-conversation-status:not(:empty)::before {
    content: '';
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    border-radius: 9999px;
    background: url('../../img/pixi/pixi-thinking@2x.webp') center/20px auto no-repeat, #fff;
    animation: pxd-pixi-breathe 1.8s ease-in-out infinite;
}

@keyframes pxd-pixi-breathe {
    0%, 100% { transform: scale(1); opacity: 0.85; }
    50%      { transform: scale(1.08); opacity: 1; }
}

/* ── Composer ─────────────────────────────────────────────── */

body.pxd-itinerary-single .pxd-assistant-input-bar {
    gap: 6px;
    padding: 10px 14px 12px;
    background: rgba(255, 255, 255, 0.95);
    border-top: 1px solid var(--pxc-line);
    border-radius: 0;
    align-items: flex-end;
}

body.pxd-itinerary-single .pxd-assistant-input {
    padding: 10px 16px;
    border: 1px solid rgba(1, 40, 39, 0.14);
    border-radius: 22px;
    background: #fff;
    font-size: 13.5px;
    line-height: 1.4;
    min-height: 42px;
    max-height: 140px;
}

body.pxd-itinerary-single .pxd-assistant-input:focus {
    border-color: var(--pxc-ink);
    box-shadow: 0 0 0 1px var(--pxc-ink);
}

body.pxd-itinerary-single .pxd-assistant-send {
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 9999px;
}

/* The durable view submits a form whose button carries a word, not an icon. */
body.pxd-itinerary-single .pxd-pixi-conversation .pxd-assistant-input-bar button[type="submit"] {
    min-height: 42px;
    padding: 0 18px;
    border: 0;
    border-radius: 9999px;
    background: var(--pxd-active-grad);
    color: #fff;
    font: 700 13px/1 'Urbanist', 'Inter', sans-serif;
    box-shadow: var(--pxd-active-shadow);
    cursor: pointer;
}

body.pxd-itinerary-single .pxd-pixi-conversation .pxd-assistant-input-bar button[type="submit"]:hover {
    box-shadow: var(--pxd-active-shadow-hover);
    color: #fff;
}

body.pxd-itinerary-single .pxd-pixi-conversation .pxd-assistant-input-bar button[type="submit"]:disabled {
    opacity: 0.55;
    box-shadow: none;
    cursor: default;
}

/* ── pixi-full: a real reading column ─────────────────────── */

.pxd-page[data-layout="pixi-full"] .pxd-assistant-inner,
.pxd-page[data-layout="pixi-full"] .pxd-pixi-conversation {
    background: none;
}

.pxd-page[data-layout="pixi-full"] .pxd-assistant-messages,
.pxd-page[data-layout="pixi-full"] .pxd-assistant-identity,
.pxd-page[data-layout="pixi-full"] .pxd-pixi-conversation-toolbar,
.pxd-page[data-layout="pixi-full"] .pxd-assistant-input-bar {
    width: min(100%, 760px);
    margin-inline: auto;
}

.pxd-page[data-layout="pixi-full"] .pxd-assistant-identity {
    background: none;
    border-bottom: 0;
}

/* Wider column, so a comfortable measure: around 72 characters. */
.pxd-page[data-layout="pixi-full"] .pxd-assistant-msg--bot {
    font-size: 14.5px;
    line-height: 1.6;
}

.pxd-page[data-layout="pixi-full"] .pxd-assistant-prose h4 {
    font-size: 16.5px;
}

.pxd-page[data-layout="pixi-full"] .pxd-assistant-prose h5 {
    font-size: 14.5px;
}

.pxd-page[data-layout="pixi-full"] .pxd-assistant-input-bar {
    background: none;
    border-top: 0;
    padding-bottom: 16px;
}

.pxd-page[data-layout="pixi-full"] .pxd-assistant-input {
    box-shadow: 0 16px 40px -20px rgba(15, 163, 107, 0.35), 0 2px 8px rgba(15, 163, 107, 0.05);
}

@media (prefers-reduced-motion: reduce) {
    body.pxd-itinerary-single .pxd-assistant-msg {
        animation: none;
    }

    body.pxd-itinerary-single .pxd-pixi-conversation-status:not(:empty)::before {
        animation: none;
    }
}

/* ============================================
   CONVERSATION DURABLE — cartes et contestation
   ============================================

   Deux rendus portent le meme nom de classe. cards.js (assistant local) fabrique des
   cartes riches — photo, badges, boutons — faites pour le carrousel horizontal plus haut.
   pixi-conversation-view.js, lui, n'emet qu'un `section > h4 + p + a` : sans conteneur
   flex, le `flex: 0 0 210px` du carrousel ne s'applique pas et on obtient une pile de
   blocs blancs sans hierarchie. Ces regles habillent ce second rendu, et lui seul —
   `.pxd-pixi-conversation` n'existe que la.

   Le formulaire de contestation, lui, n'a AUCUNE classe : contestation.js n'en pose
   jamais une seule, et son unique ancrage est le `section.pxd-pixi-contestation` que la
   vue cree autour. Tout est donc stylé par selecteurs de descendants, sans toucher a ce
   fichier JS partagé avec la page /pixi/. */

/* ── Cartes de proposition ────────────────────────────────── */

body.pxd-itinerary-single .pxd-pixi-conversation .pxd-pixi-card {
    flex: none;
    display: block;
    margin: 6px 0 0;
    padding: 10px 14px;
    border-radius: 14px;
    border: 1px solid rgba(1, 40, 39, 0.08);
    background: #fff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: 0 2px 8px rgba(15, 163, 107, 0.05);
    animation: none;
}

body.pxd-itinerary-single .pxd-pixi-conversation .pxd-pixi-card:hover {
    transform: none;
    background: #fff;
    border-color: rgba(15, 163, 107, 0.28);
    box-shadow: 0 8px 20px -10px rgba(15, 163, 107, 0.35);
}

/* Le titre est un h4 nu : il hérite sinon des titres de la page. */
body.pxd-itinerary-single .pxd-pixi-conversation .pxd-pixi-card > h4 {
    margin: 0;
    font: 700 14px/1.35 'Urbanist', 'Inter', sans-serif;
    color: var(--pxc-ink, #0A3D3A);
    letter-spacing: 0;
}

body.pxd-itinerary-single .pxd-pixi-conversation .pxd-pixi-card > p {
    margin: 2px 0 0;
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--pxc-ink-soft, #425a58);
}

/* « Voir la source » : une note de bas de carte, pas un appel à l'action. */
body.pxd-itinerary-single .pxd-pixi-conversation .pxd-pixi-card > a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    font-size: 11.5px;
    font-weight: 600;
    color: #5d7070;
    text-decoration: none;
    border-bottom: 1px solid rgba(1, 40, 39, 0.18);
    line-height: 1.5;
}

body.pxd-itinerary-single .pxd-pixi-conversation .pxd-pixi-card > a::after {
    content: '↗';
    font-size: 10px;
    line-height: 1;
}

body.pxd-itinerary-single .pxd-pixi-conversation .pxd-pixi-card > a:hover {
    color: var(--pxc-ink, #0A3D3A);
    border-bottom-color: var(--pxc-ink, #0A3D3A);
}

/* ── Contestation : le déclencheur ────────────────────────── */

body.pxd-itinerary-single .pxd-pixi-contestation {
    display: block;
    margin-top: 10px;
}

body.pxd-itinerary-single .pxd-pixi-contestation > button {
    min-height: 32px;
    padding: 0 12px;
    border: 1px solid rgba(1, 40, 39, 0.12);
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.85);
    color: var(--pxc-ink-soft, #425a58);
    font: 600 11.5px/1 'Urbanist', 'Inter', sans-serif;
    text-transform: none;
    letter-spacing: 0;
    box-shadow: none;
    cursor: pointer;
    transition: background var(--duration-fast, 150ms) ease, color var(--duration-fast, 150ms) ease;
}

body.pxd-itinerary-single .pxd-pixi-contestation > button:hover {
    background: #fff;
    color: var(--pxc-ink, #0A3D3A);
    box-shadow: 0 6px 14px -8px rgba(15, 163, 107, 0.4);
}

body.pxd-itinerary-single .pxd-pixi-contestation > button:focus-visible {
    outline: none;
    box-shadow: var(--pxd-active-ring);
}

/* ── Contestation : le panneau ouvert ─────────────────────── */

body.pxd-itinerary-single .pxd-pixi-contestation > section {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 8px;
    padding: 14px;
    border: 1px solid rgba(1, 40, 39, 0.10);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 10px 30px -18px rgba(15, 163, 107, 0.28);
}

body.pxd-itinerary-single .pxd-pixi-contestation > section:empty {
    display: none;
}

body.pxd-itinerary-single .pxd-pixi-contestation h4 {
    margin: 0;
    font: 800 13.5px/1.3 'Urbanist', 'Inter', sans-serif;
    color: var(--pxc-ink, #0A3D3A);
}

/* Chaque label porte son texte ET son champ : en colonne, le texte devient l'étiquette. */
body.pxd-itinerary-single .pxd-pixi-contestation label {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font: 600 11.5px/1.3 'Urbanist', 'Inter', sans-serif;
    color: var(--pxc-ink-soft, #425a58);
}

/* display:flex l'emporterait sur l'attribut natif : le champ « rythme » doit rester
   caché tant que le motif choisi ne le demande pas. */
body.pxd-itinerary-single .pxd-pixi-contestation label[hidden] {
    display: none;
}

body.pxd-itinerary-single .pxd-pixi-contestation select,
body.pxd-itinerary-single .pxd-pixi-contestation textarea {
    width: 100%;
    min-height: 38px;
    padding: 8px 12px;
    border: 1px solid rgba(1, 40, 39, 0.14);
    border-radius: 10px;
    background: #fff;
    color: var(--pxc-ink, #0A3D3A);
    font: 500 13px/1.4 'Urbanist', 'Inter', sans-serif;
    box-shadow: none;
}

body.pxd-itinerary-single .pxd-pixi-contestation select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 32px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23425a58' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    cursor: pointer;
}

body.pxd-itinerary-single .pxd-pixi-contestation textarea {
    min-height: 68px;
    resize: vertical;
}

body.pxd-itinerary-single .pxd-pixi-contestation select:focus,
body.pxd-itinerary-single .pxd-pixi-contestation textarea:focus,
body.pxd-itinerary-single .pxd-pixi-contestation select:focus-visible,
body.pxd-itinerary-single .pxd-pixi-contestation textarea:focus-visible {
    outline: none;
    border-color: var(--pxc-ink, #0A3D3A);
    box-shadow: 0 0 0 1px var(--pxc-ink, #0A3D3A);
}

/* La note explicative : elle dit que rien ne se déclenche. Elle doit se lire comme une
   précision, pas comme une alerte. */
body.pxd-itinerary-single .pxd-pixi-contestation > section > p {
    margin: 0;
    padding: 9px 12px;
    border-radius: 10px;
    background: rgba(32, 201, 184, 0.08);
    color: var(--pxc-ink-soft, #425a58);
    font-size: 11.5px;
    line-height: 1.45;
}

/* Le fil d'état — « Enregistrement… », puis l'accusé de réception. */
body.pxd-itinerary-single .pxd-pixi-contestation > section > p[role="status"] {
    display: flex;
    align-items: center;
    gap: 7px;
    background: none;
    padding: 0;
    font-weight: 600;
    color: var(--pxc-ink, #0A3D3A);
}

body.pxd-itinerary-single .pxd-pixi-contestation > section > p[role="status"]:empty {
    display: none;
}

body.pxd-itinerary-single .pxd-pixi-contestation > section > p[role="status"]::before {
    content: '';
    width: 7px;
    height: 7px;
    flex-shrink: 0;
    border-radius: 9999px;
    background: var(--pxc-green, #0fa36b);
}

/* Le bouton d'envoi, et ceux qui le remplacent après coup (réessayer, nouveau choix…). */
body.pxd-itinerary-single .pxd-pixi-contestation > section button,
body.pxd-itinerary-single .pxd-pixi-contestation > section > a {
    align-self: flex-start;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    padding: 0 16px;
    border: 0;
    border-radius: 9999px;
    background: var(--pxd-active-grad);
    color: #fff;
    font: 700 12.5px/1 'Urbanist', 'Inter', sans-serif;
    text-decoration: none;
    box-shadow: var(--pxd-active-shadow);
    cursor: pointer;
}

body.pxd-itinerary-single .pxd-pixi-contestation > section button:hover,
body.pxd-itinerary-single .pxd-pixi-contestation > section > a:hover {
    color: #fff;
    box-shadow: var(--pxd-active-shadow-hover);
}

body.pxd-itinerary-single .pxd-pixi-contestation > section button:disabled {
    opacity: 0.5;
    box-shadow: none;
    cursor: default;
}

/* Les modifications à retrouver : une sous-section, pas un second formulaire. */
body.pxd-itinerary-single .pxd-pixi-contestation > section > section {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border: 1px dashed rgba(1, 40, 39, 0.14);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.6);
}

/* ============================================
   REFONTE L3 : PANNEAU D'ITINÉRAIRE (2026-09-23)
   ============================================
   États P21 manquants du fil durable et de l'atelier ; puis, sous drapeau L3 seulement, l'aspect
   de l'hôte des cartes .pxipa, du bloc « Ce qui reste à régler » et du bandeau d'enrichissement.
   Cartes, mode compact et mise en page de ces blocs : pixi-artifacts.css §13 et §15. */

/* Appui : patron du design system, légère pression et ombre réduite. */
body.pxd-itinerary-single .pxd-pixi-conversation-toolbar button:active:not(:disabled),
body.pxd-itinerary-single .pxd-pixi-contestation > button:active {
    transform: scale(0.96);
    background: #fff;
    color: var(--pxc-ink, #0A3D3A);
    box-shadow: 0 1px 2px rgba(15, 163, 107, 0.08);
}

body.pxd-itinerary-single .pxd-pixi-conversation .pxd-assistant-input-bar button[type="submit"]:active:not(:disabled),
body.pxd-itinerary-single .pxd-pixi-contestation > section button:active:not(:disabled),
body.pxd-itinerary-single .pxd-pixi-contestation > section > a:active {
    transform: scale(0.96);
    color: #fff;
    box-shadow: 0 2px 6px rgba(15, 163, 107, 0.2);
}

body.pxd-itinerary-single .pxd-pixi-conversation .pxd-assistant-input-bar button[type="submit"]:focus-visible,
body.pxd-itinerary-single .pxd-pixi-contestation > section button:focus-visible,
body.pxd-itinerary-single .pxd-pixi-contestation > section > a:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #0fa36b, var(--pxd-active-shadow);
}

body.pxd-itinerary-single .pxd-pixi-conversation-toolbar button:disabled {
    opacity: 0.55;
    background: rgba(255, 255, 255, 0.85);
    box-shadow: none;
    cursor: default;
}

/* Cartes de réponse dans la bulle de Pixi : une colonne à la largeur du message ; [hidden] garde la main. */
body.pxd-itinerary-single .pxd-pixi-conversation .pxd-pixi-artifacts:not([hidden]) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    min-width: 0;
    margin-top: 8px;
}

/* Bloc « Ce qui reste à régler » : verre de niveau 2, rayon 12 px, filet gauche à la couleur du
   type de la sévérité la plus haute (bloquant : restauration ; à vérifier : activité ; pour info :
   transport) ; sans sévérité, c'est « Tout est prêt » : vert de la marque. */
body.pxd-itinerary-single .pxd-pixi-conversation > .pxipa.pxd-pixi-issues {
    background: rgba(255, 255, 255, 0.78);
    border-color: rgba(1, 40, 39, 0.08);
    border-left: 3px solid var(--pxc-green, #0fa36b);
    border-radius: var(--radius-md, 12px);
    box-shadow: 0 2px 8px rgba(15, 163, 107, 0.06);
}

body.pxd-itinerary-single .pxd-pixi-conversation > .pxipa.pxd-pixi-issues[data-pxipa-severity="blocking"] { border-left-color: var(--pxd-color-restauration); }
body.pxd-itinerary-single .pxd-pixi-conversation > .pxipa.pxd-pixi-issues[data-pxipa-severity="warning"] { border-left-color: var(--pxd-color-activite); }
body.pxd-itinerary-single .pxd-pixi-conversation > .pxipa.pxd-pixi-issues[data-pxipa-severity="info"] { border-left-color: var(--pxd-color-transport); }

/* En « Pixi et carte », bloc et bandeau suivent la colonne de lecture (760 px, gouttières de 16 px). */
.pxd-page[data-layout="pixi-full"] .pxd-pixi-conversation > :is(.pxd-pixi-issues, .pxd-pixi-enrichment) {
    width: min(calc(100% - 32px), 728px);
    margin-inline: auto;
}

/* Bandeau « Pixi complète tes fiches (N) » : une ligne de 24 px, un point qui respire tant qu'une fiche est
   en cours, orange si Pixi n'a pas pu les compléter. Retiré du DOM quand il n'y a rien : aucune règle de masquage. */
body.pxd-itinerary-single .pxd-pixi-conversation > .pxd-pixi-enrichment {
    position: relative; padding: 4px 12px 4px 26px; border-radius: 9999px; background: rgba(32, 201, 184, 0.08);
    color: var(--pxc-ink-soft, #425a58); font: 600 11.5px/16px 'Urbanist', 'Inter', sans-serif;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

body.pxd-itinerary-single .pxd-pixi-conversation > .pxd-pixi-enrichment::before {
    content: ''; position: absolute; left: 11px; top: calc(50% - 3.5px); width: 7px; height: 7px;
    border-radius: 9999px; background: var(--pxc-green, #0fa36b); opacity: 0.5;
}

body.pxd-itinerary-single .pxd-pixi-conversation > .pxd-pixi-enrichment[data-pxd-enrich-running="1"]::before {
    opacity: 1;
    animation: pxd-enrich-pulse 1.6s ease-in-out infinite;
}
body.pxd-itinerary-single .pxd-pixi-conversation > .pxd-pixi-enrichment[data-pxd-enrich-blocked="1"]::before { opacity: 1; background: var(--pxd-color-activite); }

@keyframes pxd-enrich-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(15, 163, 107, 0.45); }
    70%      { box-shadow: 0 0 0 5px rgba(15, 163, 107, 0); }
}

@media (prefers-reduced-motion: reduce) {
    body.pxd-itinerary-single .pxd-pixi-conversation-toolbar button:active:not(:disabled),
    body.pxd-itinerary-single .pxd-pixi-contestation > button:active,
    body.pxd-itinerary-single .pxd-pixi-conversation .pxd-assistant-input-bar button[type="submit"]:active:not(:disabled),
    body.pxd-itinerary-single .pxd-pixi-contestation > section button:active:not(:disabled),
    body.pxd-itinerary-single .pxd-pixi-contestation > section > a:active {
        transform: none;
    }

    body.pxd-itinerary-single .pxd-pixi-conversation > .pxd-pixi-enrichment[data-pxd-enrich-running="1"]::before {
        animation: none;
    }
}

/* ============================================
   REFONTE L3, PASSE 9 (A7) : POIGNEE « PIXI » DU TELEPHONE
   ============================================
   button.pxd-pixi-handle, creee par panel-toggle.js sous drapeau (jamais servie sans lui) : feuille fermee, pilule de verre en bas a
   gauche, a cote du bouton « Carte » (meme hauteur de 44 px, meme bas) ; avatar de Pixi et « Pixi ». Le diagnostic reste accessible dans les informations du voyage. Rien au bureau, rien feuille ouverte (les
   onglets de la feuille prennent le relais). Contestation (« Revoir cette proposition » et ses boutons) : zone de toucher de 44 px. */
.pxd-pixi-handle {
    display: none;
}

@media (max-width: 768px) {
    body:not(.pxd-map-visible) .pxd-pixi-handle:not([hidden]) {
        position: fixed;
        left: 16px;
        bottom: calc(20px + env(safe-area-inset-bottom, 0px));
        z-index: 950;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        max-width: calc(100% - 32px - 124px);
        min-height: 44px;
        margin: 0;
        padding: 0 14px 0 5px;
        border: 1px solid rgba(1, 40, 39, 0.10);
        border-radius: 9999px;
        background: rgba(255, 255, 255, 0.92);
        -webkit-backdrop-filter: blur(16px);
        backdrop-filter: blur(16px);
        box-shadow: 0 10px 30px -10px rgba(1, 40, 39, 0.35), 0 2px 8px rgba(15, 163, 107, 0.08);
        color: #0A3D3A;
        font: 700 14px/1.2 'Urbanist', sans-serif;
        letter-spacing: 0;
        text-align: left;
        text-transform: none;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: transform 250ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 250ms ease, background-color 150ms ease;
    }

    .pxd-pixi-handle .pxd-pixi-handle__avatar {
        flex: none;
        width: 32px;
        height: 32px;
        border: 1px solid rgba(1, 40, 39, 0.08);
        border-radius: 9999px;
        background: #fff url('../../img/pixi/pixi-neutre@2x.webp') center 2px / 26px auto no-repeat;
    }

    .pxd-pixi-handle .pxd-pixi-handle__label {
        flex: none;
    }

    body:not(.pxd-map-visible) .pxd-pixi-handle:focus {
        outline: none;
    }

    body:not(.pxd-map-visible) .pxd-pixi-handle:focus-visible {
        outline: 2px solid #1E9B52;
        outline-offset: 2px;
    }

    body:not(.pxd-map-visible) .pxd-pixi-handle:active {
        background: #fff;
        color: #0A3D3A;
        transform: scale(0.96);
        box-shadow: 0 4px 12px -6px rgba(1, 40, 39, 0.35);
    }

    .pxd-panel-right[data-pxd-l3="1"] .pxd-pixi-contestation > button,
    .pxd-panel-right[data-pxd-l3="1"] .pxd-pixi-contestation > section button,
    .pxd-panel-right[data-pxd-l3="1"] .pxd-pixi-contestation > section > a {
        position: relative;
    }

    .pxd-panel-right[data-pxd-l3="1"] .pxd-pixi-contestation > button::before,
    .pxd-panel-right[data-pxd-l3="1"] .pxd-pixi-contestation > section button::before,
    .pxd-panel-right[data-pxd-l3="1"] .pxd-pixi-contestation > section > a::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        height: 44px;
        transform: translateY(-50%);
    }
}

/* Feuille en plein ecran : le bouton flottant « Carte » (poste a 60vh par 21-sidebar.css quand la feuille est ouverte) tombait au milieu
   de la conversation ; la feuille a son onglet « Carte » et sa croix. Masque (visibility : il reste dans le DOM, hors de l'arbre
   d'accessibilite) tant qu'elle est en plein ecran, sous drapeau seulement. */
@media (max-width: 768px) {
    body[data-pxd-l3="1"]:has(.pxd-panel-right.pxd-map-full) .pxd-mobile-map-toggle {
        visibility: hidden;
        pointer-events: none;
    }

    /* Croix de la feuille (editor.v1.css de l'Infocard : a 64 px du bord, par-dessus le troisieme onglet, « Pixi et carte ») : au
       bord droit, dans une marge reservee a droite des onglets, qui ne se recouvrent plus (inventaire A4, captures a7-*). */
    .pxd-panel-right[data-pxd-l3="1"] .pxd-panel-tabs {
        padding-right: 52px;
    }

    #pxd-panel-right[data-pxd-l3="1"] .pxdie-mobile-map-close:not([hidden]) {
        right: 6px;
        flex-basis: 44px;
        width: 44px;
        min-height: 44px;
    }

    /* Poignee de glisse (bande transparente de 28 px sur toute la largeur, au-dessus des onglets : revue F2-5 n4) : un toucher au
       centre d'un onglet partait dans la poignee et ne changeait pas de mode. Bande ramenee a 16 px (trait de 4 px garde) : le
       centre des onglets est libre ; la feuille se deplace aussi par ses onglets, sa croix et le bouton « Carte » (sans glisser). */
    .pxd-panel-right[data-pxd-l3="1"] .pxd-map-drag-handle {
        min-height: 0;
        height: 16px;
        padding: 6px 0 0;
        box-sizing: border-box;
    }
}

/* « Pixi et carte » (bureau) : la liste des conversations precedentes et les etats du tour (classes posees par la vue F1 sous drapeau,
   passe 9) suivent la colonne de lecture, comme le bloc et le bandeau ; la liste prenait toute la largeur du panneau (inventaire A4). */
.pxd-page[data-layout="pixi-full"] .pxd-pixi-conversation > :is(.pxd-pixi-conversation-actions, .pxd-pixi-sessions):not(:empty) {
    width: min(calc(100% - 32px), 728px);
    margin-inline: auto;
}

@media (max-width: 768px) and (hover: hover) {
    body:not(.pxd-map-visible) .pxd-pixi-handle:hover {
        background: #fff;
        color: #0A3D3A;
        transform: translateY(-1px);
        box-shadow: 0 14px 34px -12px rgba(1, 40, 39, 0.4), 0 2px 8px rgba(15, 163, 107, 0.1);
    }
}

@media (prefers-reduced-motion: reduce) {
    body:not(.pxd-map-visible) .pxd-pixi-handle:not([hidden]) {
        transition: none;
    }

    body:not(.pxd-map-visible) .pxd-pixi-handle:hover,
    body:not(.pxd-map-visible) .pxd-pixi-handle:active {
        transform: none;
    }
}

/* ─────────────────────────────────────────────────────────────────
   43-wishlist.css — Section "Idées de voyage" (Phase 3 Pixi)
   Glassmorphism Level 2 — matches .pxd-section style
   Prefix: .pxd-wishlist-*
   ───────────────────────────────────────────────────────────────── */

/* ── Section container — glassmorphism Level 2 ────────────────── */
body .pxd-wishlist-section {
    --e-global-color-primary: initial;
    --button-background-color: initial;
    margin: 0 8px 10px;
    padding: 24px 16px 16px;
    background: rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: var(--radius-lg, 16px);
    box-shadow: 0 2px 12px rgba(1, 40, 39, 0.04),
                inset 0 1px 0 rgba(255, 255, 255, 0.4);
    transition: background 0.4s ease, box-shadow 0.4s ease;
}

/* ── Header — matches .pxd-section-header ─────────────────────── */
body .pxd-wishlist-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    cursor: pointer;
    user-select: none;
}

body .pxd-wishlist-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

/* Icon square — matches .pxd-section-icon */
body .pxd-wishlist-icon-box {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    background: linear-gradient(135deg, #ff9800 0%, #ffb74d 100%);
    flex-shrink: 0;
}

body .pxd-wishlist-icon-box svg {
    width: 20px;
    height: 20px;
}

/* Legacy icon (if icon-box not used) */
body .pxd-wishlist-icon {
    display: none;
}

body .pxd-wishlist-title {
    font-family: 'Urbanist', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--pixidia-blue, #012827);
    margin: 0;
    line-height: 1.3;
}

/* F3 (2026-09-20) — le compteur, le bouton et le chevron de la Wishlist etaient
   une copie ligne a ligne de `.pxd-section-count/-toggle/-chevron`
   (26-section-headers.css). Le markup emet desormais les classes standard et ces
   regles ont disparu. Seule exception : la rotation du chevron, car Wishlist
   marque son etat avec `.pxd-wishlist-collapsed` et non `.pxd-section--collapsed`. */
body .pxd-wishlist-collapsed .pxd-section-chevron {
    transform: rotate(-90deg);
}

/* ── Body (collapsible with smooth grid transition) ───────────── */
body .pxd-wishlist-body {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows var(--duration-normal, 300ms) var(--ease-smooth, ease);
}

body .pxd-wishlist-body-inner {
    overflow: hidden;
    min-height: 0;
}

body .pxd-wishlist-collapsed .pxd-wishlist-body {
    grid-template-rows: 0fr;
}

body .pxd-wishlist-collapsed {
    padding: 10px 16px;
    margin-bottom: 6px;
}

body .pxd-wishlist-collapsed:hover {
    background: rgba(255, 255, 255, 0.55);
    box-shadow: 0 4px 20px rgba(1, 40, 39, 0.07),
                inset 0 1px 0 rgba(255, 255, 255, 0.6);
    transform: translateY(-1px);
}

body .pxd-wishlist-collapsed .pxd-wishlist-header {
    margin-bottom: 0;
}

/* ── Empty state ──────────────────────────────────────────────── */
body .pxd-wishlist-empty {
    text-align: center;
    padding: 20px 0 8px;
}

body .pxd-wishlist-empty-icon {
    color: var(--pixidia-gray-300, #b8c5c5);
    margin-bottom: 8px;
}

body .pxd-wishlist-empty-icon svg {
    width: 28px;
    height: 28px;
}

body .pxd-wishlist-empty p {
    font-family: 'Urbanist', sans-serif;
    font-size: 13px;
    color: var(--pixidia-text-muted, rgba(1, 40, 39, 0.55));
    margin: 0 0 4px;
    line-height: 1.5;
}

body .pxd-wishlist-empty-hint {
    font-size: 12px !important;
    color: var(--pixidia-gray-400, #8a9c9c) !important;
}

body .pxd-wishlist-ask-pixi-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    padding: 8px 18px;
    background: linear-gradient(135deg, #0fa36b 25%, #38c19c 100%);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm, 8px);
    font-family: 'Urbanist', sans-serif;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 3px 8px rgba(15, 163, 107, 0.25);
}

body .pxd-wishlist-ask-pixi-btn:hover {
    box-shadow: 0 6px 16px rgba(15, 163, 107, 0.35);
    transform: translateY(-1px);
}

body .pxd-wishlist-ask-pixi-btn svg {
    width: 14px;
    height: 14px;
}

/* ── Group label ──────────────────────────────────────────────── */
body .pxd-wishlist-group {
    margin-bottom: 12px;
}

body .pxd-wishlist-group:last-child {
    margin-bottom: 0;
}

body .pxd-wishlist-group-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Urbanist', sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(1, 40, 39, 0.05);
    color: var(--pixidia-text-muted, rgba(1, 40, 39, 0.55));
}

body .pxd-wishlist-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.15);
}

/* ── Card — glassmorphism mini-card ───────────────────────────── */
body .pxd-wishlist-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-radius: var(--radius-md, 12px);
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.5);
    margin-bottom: 6px;
    box-shadow: 0 1px 4px rgba(1, 40, 39, 0.03);
    transition: all 0.25s var(--ease-smooth, ease);
}

body .pxd-wishlist-card:hover {
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 4px 12px rgba(1, 40, 39, 0.06);
    transform: translateY(-1px);
}

body .pxd-wishlist-card:last-child {
    margin-bottom: 0;
}

body .pxd-wishlist-card-info {
    flex: 1;
    min-width: 0;
}

body .pxd-wishlist-card-name {
    font-family: 'Urbanist', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--pixidia-text, #1a2e2e);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

body .pxd-wishlist-card-addr {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--pixidia-text-muted, rgba(1, 40, 39, 0.55));
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body .pxd-wishlist-card-addr .pxd-icon-xs {
    width: 11px;
    height: 11px;
    flex-shrink: 0;
    opacity: 0.6;
}

body .pxd-wishlist-card-rating {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    color: var(--pixidia-text-muted, rgba(1, 40, 39, 0.55));
    margin-top: 2px;
}

body .pxd-star-filled {
    color: var(--pixidia-orange, #f59e0b);
    fill: var(--pixidia-orange, #f59e0b);
}

body .pxd-wishlist-card-reviews {
    color: var(--pixidia-gray-400, #8a9c9c);
}

body .pxd-wishlist-card-cost {
    font-size: 11px;
    font-weight: 600;
    color: var(--pixidia-green, #208D3E);
    margin-top: 2px;
}

/* ── Card actions — pill buttons ──────────────────────────────── */
body .pxd-wishlist-card-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
    margin-left: 12px;
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

body .pxd-wishlist-card:hover .pxd-wishlist-card-actions {
    opacity: 1;
}

body .pxd-wishlist-plan-btn,
body .pxd-wishlist-delete-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm, 8px);
    cursor: pointer;
    transition: all 0.2s ease;
    background: transparent;
    padding: 0;
}

body .pxd-wishlist-plan-btn {
    color: var(--pixidia-green, #208D3E);
}

body .pxd-wishlist-plan-btn:hover {
    background: rgba(15, 163, 107, 0.08);
    border-color: rgba(15, 163, 107, 0.15);
    transform: translateY(-1px);
}

body .pxd-wishlist-delete-btn {
    color: var(--pixidia-gray-400, #8a9c9c);
}

body .pxd-wishlist-delete-btn:hover {
    background: rgba(229, 57, 53, 0.06);
    border-color: rgba(229, 57, 53, 0.12);
    color: var(--pixidia-red, #e53935);
}

body .pxd-wishlist-plan-btn .pxd-icon-sm,
body .pxd-wishlist-delete-btn .pxd-icon-sm {
    width: 15px;
    height: 15px;
}

/* ── Day selector modal — glassmorphism Level 3 ───────────────── */
body .pxd-day-selector-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(1, 40, 39, 0.35);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

body .pxd-day-selector-modal {
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(1, 40, 39, 0.10);
    border-radius: var(--radius-lg, 16px);
    width: 320px;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 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);
}

body .pxd-day-selector-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px 14px;
    border-bottom: 1px solid rgba(1, 40, 39, 0.06);
}

body .pxd-day-selector-header h3 {
    font-family: 'Urbanist', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--pixidia-blue, #012827);
    margin: 0;
}

body .pxd-day-selector-close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--pixidia-gray-400, #8a9c9c);
    padding: 4px;
    border-radius: var(--radius-sm, 8px);
    transition: all 0.15s;
}

body .pxd-day-selector-close:hover {
    background: rgba(1, 40, 39, 0.04);
    color: var(--pixidia-text, #1a2e2e);
}

body .pxd-day-selector-list {
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

body .pxd-day-selector-day {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 14px;
    border: 1px solid rgba(1, 40, 39, 0.06);
    border-radius: var(--radius-md, 12px);
    background: rgba(255, 255, 255, 0.78);
    cursor: pointer;
    transition: all 0.2s var(--ease-smooth, ease);
    text-align: left;
    font-family: 'Urbanist', sans-serif;
}

body .pxd-day-selector-day:hover {
    border-color: rgba(15, 163, 107, 0.2);
    background: rgba(15, 163, 107, 0.04);
    box-shadow: 0 2px 6px rgba(15, 163, 107, 0.08);
}

body .pxd-day-selector-day.pxd-day-selected {
    border-color: var(--pixidia-green, #208D3E);
    background: rgba(15, 163, 107, 0.06);
    box-shadow: 0 0 0 2px rgba(15, 163, 107, 0.15);
}

body .pxd-day-selector-num {
    font-weight: 700;
    font-size: 13px;
    color: var(--pixidia-blue, #012827);
    min-width: 28px;
}

body .pxd-day-selector-date {
    font-size: 12px;
    color: var(--pixidia-text-muted, rgba(1, 40, 39, 0.55));
}

body .pxd-day-selector-time {
    padding: 8px 20px 4px;
    display: flex;
    align-items: center;
    gap: 8px;
}

body .pxd-day-selector-time label {
    font-family: 'Urbanist', sans-serif;
    font-size: 12px;
    color: var(--pixidia-text-muted, rgba(1, 40, 39, 0.55));
}

body .pxd-day-selector-time-input {
    padding: 6px 10px;
    border: 1px solid rgba(1, 40, 39, 0.08);
    border-radius: var(--radius-sm, 8px);
    font-family: 'Urbanist', sans-serif;
    font-size: 12px;
    background: rgba(255, 255, 255, 0.78);
}

body .pxd-day-selector-footer {
    padding: 8px 20px 16px;
    text-align: right;
}

body .pxd-day-selector-cancel {
    padding: 6px 14px;
    border: none;
    background: none;
    color: var(--pixidia-text-muted, rgba(1, 40, 39, 0.55));
    font-family: 'Urbanist', sans-serif;
    font-size: 12px;
    cursor: pointer;
    transition: color 0.15s;
}

body .pxd-day-selector-cancel:hover {
    color: var(--pixidia-text, #1a2e2e);
}

/* ══════════════════════════════════════════════════════════════════
   ADD-TO MODAL — glassmorphism Level 3
   Matches .pxd-modal + .pxd-calendar-popup design tokens
   ══════════════════════════════════════════════════════════════════ */

body .pxd-addto-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(1, 40, 39, 0.35);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    animation: pxd-fadeIn 0.2s ease;
}

body .pxd-addto-modal {
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(1, 40, 39, 0.10);
    border-radius: var(--radius-lg, 16px);
    width: 420px;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 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);
    animation: pxd-dropIn 0.25s var(--ease-smooth, ease);
}

@keyframes pxd-fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes pxd-dropIn {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── Header (matches .pxd-modal-header) ───────────────────────── */
body .pxd-addto-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px 14px;
    border-bottom: 1px solid rgba(1, 40, 39, 0.06);
}

body .pxd-addto-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

body .pxd-addto-header-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    flex-shrink: 0;
}

body .pxd-addto-header-icon svg {
    width: 18px;
    height: 18px;
}

body .pxd-addto-title {
    font-family: 'Urbanist', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--pixidia-blue, #012827);
    margin: 0;
    line-height: 1.2;
}

body .pxd-addto-subtitle {
    font-family: 'Urbanist', sans-serif;
    font-size: 11px;
    font-weight: 500;
    color: var(--pixidia-text-muted, rgba(1, 40, 39, 0.55));
}

body .pxd-addto-close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--pixidia-gray-50, #f5f7f7);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    color: var(--pixidia-gray-400, #8a9c9c);
    transition: all 0.15s;
    flex-shrink: 0;
}

body .pxd-addto-close:hover {
    background: rgba(32, 201, 184, 0.12);
    color: var(--pixidia-turquoise, #20c9b8);
}

body .pxd-addto-close svg {
    width: 16px;
    height: 16px;
}

/* ── Item preview ─────────────────────────────────────────────── */
body .pxd-addto-item-preview {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    background: rgba(255, 255, 255, 0.78);
    border-bottom: 1px solid rgba(1, 40, 39, 0.04);
}

body .pxd-addto-item-photo {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background-size: cover;
    background-position: center;
    background-color: var(--pixidia-gray-100, #eef2f2);
    flex-shrink: 0;
}

body .pxd-addto-item-info {
    flex: 1;
    min-width: 0;
}

body .pxd-addto-item-name {
    font-family: 'Urbanist', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--pixidia-text, #1a2e2e);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body .pxd-addto-item-addr {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    color: var(--pixidia-text-muted, rgba(1, 40, 39, 0.55));
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body .pxd-addto-item-addr svg {
    width: 11px;
    height: 11px;
    flex-shrink: 0;
    opacity: 0.6;
}

body .pxd-addto-item-rating {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    color: var(--pixidia-text-muted);
    margin-top: 2px;
}

/* ── Wishlist button ──────────────────────────────────────────── */
body .pxd-addto-wishlist-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    width: calc(100% - 28px);
    margin: 10px 14px 0;
    padding: 12px 14px;
    border: 1px dashed rgba(255, 152, 0, 0.25);
    border-radius: var(--radius-md, 12px);
    background: rgba(255, 152, 0, 0.03);
    cursor: pointer;
    transition: all 0.2s var(--ease-smooth, ease);
    text-align: left;
    font-family: 'Urbanist', sans-serif;
}

body .pxd-addto-wishlist-btn:hover {
    border-color: rgba(255, 152, 0, 0.4);
    background: rgba(255, 152, 0, 0.06);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(255, 152, 0, 0.1);
}

body .pxd-addto-wishlist-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: linear-gradient(135deg, #ff9800, #ffb74d);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
}

body .pxd-addto-wishlist-icon svg {
    width: 16px;
    height: 16px;
}

body .pxd-addto-wishlist-label {
    font-size: 13px;
    font-weight: 600;
    color: #e65100;
}

body .pxd-addto-wishlist-desc {
    font-size: 11px;
    color: var(--pixidia-text-muted, rgba(1, 40, 39, 0.55));
    margin-top: 1px;
}

/* ── Divider ──────────────────────────────────────────────────── */
body .pxd-addto-divider {
    display: flex;
    align-items: center;
    padding: 10px 18px 6px;
}

body .pxd-addto-divider::before,
body .pxd-addto-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(1, 40, 39, 0.06);
}

body .pxd-addto-divider span {
    padding: 0 10px;
    font-family: 'Urbanist', sans-serif;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--pixidia-gray-400, #8a9c9c);
    white-space: nowrap;
}

/* ── Calendar (matches .pxd-calendar-popup design) ────────────── */
body .pxd-addto-calendar {
    padding: 4px 14px 8px;
}

body .pxd-addto-cal-title {
    text-align: center;
    font-family: 'Urbanist', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--pixidia-blue, #012827);
    padding: 6px 0;
}

body .pxd-addto-cal-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-family: 'Urbanist', sans-serif;
    font-size: 10px;
    font-weight: 600;
    color: var(--pixidia-gray-400, #8a9c9c);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding-bottom: 4px;
}

body .pxd-addto-cal-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

body .pxd-addto-cal-day {
    width: 100%;
    aspect-ratio: 1;
    max-height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 10px;
    background: transparent;
    font-family: 'Urbanist', sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--pixidia-text, #1a2e2e);
    cursor: default;
    transition: all 0.2s ease;
    padding: 0;
}

body .pxd-addto-cal-day:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

body .pxd-addto-cal-other {
    opacity: 0.15;
}

body .pxd-addto-cal-inrange {
    background: rgba(32, 201, 184, 0.08);
    font-weight: 600;
    cursor: pointer;
}

body .pxd-addto-cal-inrange:hover {
    background: rgba(32, 201, 184, 0.18);
    transform: scale(1.05);
}

body .pxd-addto-cal-range-start {
    border-radius: 10px 4px 4px 10px;
}

body .pxd-addto-cal-range-end {
    border-radius: 4px 10px 10px 4px;
}

body .pxd-addto-cal-selected {
    background: linear-gradient(135deg, var(--pixidia-green, #208D3E), var(--pixidia-turquoise, #20c9b8)) !important;
    color: white !important;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(32, 141, 62, 0.3);
    transform: scale(1.08);
}

/* ── Selected day display (step 2) ─────────────────────────────── */
body .pxd-addto-selected-day {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    background: rgba(32, 201, 184, 0.06);
    border: 1px solid rgba(32, 201, 184, 0.15);
    border-radius: var(--radius-md, 12px);
    margin: 8px 14px;
    animation: pxd-dropIn 0.2s ease;
}

body .pxd-addto-selected-day .pxd-icon-sm {
    width: 18px;
    height: 18px;
    color: var(--pixidia-green, #208D3E);
    flex-shrink: 0;
}

body .pxd-addto-selected-day-text {
    flex: 1;
    font-family: 'Urbanist', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--pixidia-blue, #012827);
}

body .pxd-addto-change-day {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border: none;
    border-radius: var(--radius-full, 100px);
    background: rgba(1, 40, 39, 0.04);
    color: var(--pixidia-text-muted, rgba(1, 40, 39, 0.55));
    font-family: 'Urbanist', sans-serif;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

body .pxd-addto-change-day:hover {
    background: rgba(1, 40, 39, 0.08);
    color: var(--pixidia-text, #1a2e2e);
}

body .pxd-addto-change-day svg {
    width: 11px;
    height: 11px;
}

/* ── Checkout date options (logement) ──────────────────────────── */
body .pxd-addto-checkout-section {
    padding: 8px 14px 4px;
    animation: pxd-dropIn 0.2s ease;
}

body .pxd-addto-checkout-days {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

body .pxd-addto-checkout-opt {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 7px 12px;
    border: 1px solid rgba(1, 40, 39, 0.06);
    border-radius: var(--radius-sm, 8px);
    background: rgba(255, 255, 255, 0.78);
    font-family: 'Urbanist', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: var(--pixidia-text, #1a2e2e);
    cursor: pointer;
    transition: all 0.15s;
}

body .pxd-addto-checkout-opt:hover {
    border-color: rgba(15, 163, 107, 0.2);
    background: rgba(15, 163, 107, 0.04);
}

body .pxd-addto-checkout-sel {
    border-color: var(--pixidia-green, #208D3E) !important;
    background: rgba(15, 163, 107, 0.06) !important;
    box-shadow: 0 0 0 2px rgba(15, 163, 107, 0.15);
    font-weight: 700;
}

body .pxd-addto-checkout-nights {
    font-size: 10px;
    font-weight: 600;
    color: var(--pixidia-text-muted, rgba(1, 40, 39, 0.55));
}

/* ── Calendar empty state ─────────────────────────────────────── */
body .pxd-addto-cal-empty {
    text-align: center;
    padding: 20px 14px;
    font-family: 'Urbanist', sans-serif;
    font-size: 13px;
    color: var(--pixidia-text-muted, rgba(1, 40, 39, 0.55));
}

/* ── Time picker (matches pxwzr-time-popup style) ─────────────── */
body .pxd-addto-time-section {
    padding: 8px 14px 4px;
    animation: pxd-dropIn 0.2s ease;
}

body .pxd-addto-time-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'Urbanist', sans-serif;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--pixidia-gray-400, #8a9c9c);
    margin-bottom: 6px;
}

body .pxd-addto-time-label svg {
    width: 13px;
    height: 13px;
}

/* ═══════════════════════════════════════════════════════════════════
   Time picker — "Temps Fluide"
   Digital display + horizontal scroll-snap hours + minute grid
   ═══════════════════════════════════════════════════════════════════ */

body .pxd-addto-time-card {
    padding: 16px 14px 14px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.58));
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 16px;
    box-shadow:
        0 1px 2px rgba(1, 40, 39, 0.04),
        0 4px 12px rgba(1, 40, 39, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.55);
    overflow: hidden;
}

/* ── Digital display + clear button wrapper ────────────────── */
body .pxd-addto-time-display-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 14px;
}

body .pxd-addto-time-display {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 2px;
    padding: 10px 22px 11px;
    background: linear-gradient(135deg, #0fa36b 0%, #208D3E 45%, #20c9b8 100%);
    border-radius: 12px;
    box-shadow:
        0 6px 18px rgba(32, 141, 62, 0.28),
        0 1px 0 rgba(255, 255, 255, 0.25) inset,
        0 -1px 0 rgba(0, 0, 0, 0.08) inset;
    color: #fff;
    font-family: 'Urbanist', sans-serif;
    font-weight: 700;
    font-size: 2rem;
    line-height: 1;
    letter-spacing: 0.01em;
    font-variant-numeric: tabular-nums;
    transition: background 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

/* Empty state — no time chosen yet */
body .pxd-addto-time-card--empty .pxd-addto-time-display {
    background: rgba(1, 40, 39, 0.05);
    color: rgba(1, 40, 39, 0.35);
    box-shadow: inset 0 0 0 1px rgba(1, 40, 39, 0.06);
}

body .pxd-addto-time-card--empty .pxd-addto-time-colon {
    animation: none;
    opacity: 0.3;
}

body .pxd-addto-time-hh,
body .pxd-addto-time-mm {
    display: inline-block;
    min-width: 2ch;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

body .pxd-addto-time-card--empty .pxd-addto-time-hh,
body .pxd-addto-time-card--empty .pxd-addto-time-mm {
    text-shadow: none;
}

body .pxd-addto-time-colon {
    display: inline-block;
    margin: 0 2px;
    opacity: 0.85;
    animation: pxd-addto-blink 1.6s ease-in-out infinite;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
    position: relative;
    top: -2px;
}

@keyframes pxd-addto-blink {
    0%, 45%, 55%, 100% { opacity: 0.92; }
    50%                { opacity: 0.35; }
}

/* Clear button (×) — only visible when a time is set */
body .pxd-addto-time-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(1, 40, 39, 0.06);
    color: var(--pixidia-gray-500, #5d7070);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    flex-shrink: 0;
}

body .pxd-addto-time-clear:hover {
    background: rgba(229, 57, 53, 0.1);
    color: var(--pixidia-red, #e53935);
}

body .pxd-addto-time-clear svg {
    width: 14px;
    height: 14px;
}

body .pxd-addto-time-clear[hidden] {
    display: none;
}

/* ── Hours: wrapper with chevron navigation ───────────────── */
body .pxd-addto-time-strip-wrap {
    position: relative;
    margin: 0 -14px 12px;
}

body .pxd-addto-time-strip {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 4px 45%;
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* Subtle fade at edges — chevron buttons do most of the "more content" signalling */
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
}

body .pxd-addto-time-strip::-webkit-scrollbar { display: none; }

body .pxd-addto-time-strip:focus { outline: none; }

body .pxd-addto-time-strip:focus-visible {
    outline: 2px solid rgba(32, 201, 184, 0.5);
    outline-offset: 4px;
    border-radius: 12px;
}

/* ── Chevron navigation buttons ───────────────────────────── */
body .pxd-addto-time-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(1, 40, 39, 0.08);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 2px 8px rgba(1, 40, 39, 0.12);
    color: var(--pixidia-text, #1a2e2e);
    cursor: pointer;
    z-index: 2;
    transition: background 0.15s ease, color 0.15s ease, opacity 0.18s ease;
}

body .pxd-addto-time-nav-prev { left: 2px; }
body .pxd-addto-time-nav-next { right: 2px; }

body .pxd-addto-time-nav svg {
    width: 16px;
    height: 16px;
}

body .pxd-addto-time-nav:hover:not([disabled]) {
    background: rgba(32, 201, 184, 0.12);
    color: var(--pixidia-turquoise, #20c9b8);
}

body .pxd-addto-time-nav:active:not([disabled]) {
    background: rgba(32, 201, 184, 0.2);
}

body .pxd-addto-time-nav[disabled] {
    opacity: 0.2;
    cursor: default;
    pointer-events: none;
    box-shadow: none;
}

body .pxd-addto-time-nav:focus-visible {
    outline: 2px solid rgba(32, 201, 184, 0.5);
    outline-offset: 2px;
}

/* ── Minutes: 4-column grid ────────────────────────────────── */
body .pxd-addto-time-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}

/* ── Chips (shared) ────────────────────────────────────────── */
body .pxd-addto-time-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 46px;
    height: 42px;
    padding: 0 12px;
    border: 1.5px solid rgba(1, 40, 39, 0.07);
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.75);
    font-family: 'Urbanist', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--pixidia-text, #1a2e2e);
    cursor: pointer;
    /* Only transition lightweight properties for smooth hover — NO transform/box-shadow on hover */
    transition:
        background-color 0.12s ease,
        border-color     0.12s ease,
        color            0.12s ease;
    font-variant-numeric: tabular-nums;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    flex-shrink: 0;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

body .pxd-addto-time-chip--min {
    height: 48px;
    font-size: 15px;
}

/* Hover: lightweight — only color/border, no layout shift */
body .pxd-addto-time-chip:hover {
    border-color: rgba(32, 201, 184, 0.35);
    background: rgba(32, 201, 184, 0.05);
}

body .pxd-addto-time-chip:active {
    background: rgba(32, 201, 184, 0.1);
}

/* Checked state — scale + gradient. Transform only here (one chip at a time, no repaint cascade). */
body .pxd-addto-time-chip[aria-checked="true"] {
    background: linear-gradient(135deg, #208D3E 0%, #20c9b8 100%);
    color: #fff;
    border-color: transparent;
    box-shadow:
        0 4px 12px rgba(32, 141, 62, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
    transform: scale(1.06);
    transition:
        background-color 0.18s ease,
        color            0.18s ease,
        transform        0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow       0.2s ease;
}

body .pxd-addto-time-chip[aria-checked="true"]:hover {
    /* Subtle hover on checked chip — no additional transform */
    filter: brightness(1.05);
}

body .pxd-addto-time-chip:focus-visible {
    outline: 2px solid rgba(32, 201, 184, 0.55);
    outline-offset: 2px;
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 480px) {
    body .pxd-addto-time-display { font-size: 1.75rem; padding: 9px 18px; }
    body .pxd-addto-time-chip--min { height: 46px; }
    body .pxd-addto-time-strip {
        -webkit-mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
                mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
    }
}

@media (prefers-reduced-motion: reduce) {
    body .pxd-addto-time-strip { scroll-behavior: auto; }
    body .pxd-addto-time-colon { animation: none; }
    body .pxd-addto-time-chip { transition: none; }
}

/* ── Footer (matches .pxd-modal-footer) ───────────────────────── */
body .pxd-addto-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 10px 18px 16px;
    border-top: 1px solid rgba(1, 40, 39, 0.04);
}

body .pxd-addto-cancel {
    padding: 8px 16px;
    border: none;
    background: none;
    color: var(--pixidia-text-muted, rgba(1, 40, 39, 0.55));
    font-family: 'Urbanist', sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border-radius: var(--radius-sm, 8px);
    transition: all 0.15s;
}

body .pxd-addto-cancel:hover {
    background: rgba(1, 40, 39, 0.04);
    color: var(--pixidia-text, #1a2e2e);
}

body .pxd-addto-confirm {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 18px;
    background: linear-gradient(135deg, #0fa36b 25%, #38c19c 100%);
    color: white;
    border: none;
    border-radius: var(--radius-sm, 8px);
    font-family: 'Urbanist', sans-serif;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 3px 8px rgba(15, 163, 107, 0.25);
}

body .pxd-addto-confirm:hover:not(:disabled) {
    box-shadow: 0 6px 16px rgba(15, 163, 107, 0.35);
    transform: translateY(-1px);
}

body .pxd-addto-confirm:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    box-shadow: none;
}

body .pxd-addto-confirm svg {
    width: 14px;
    height: 14px;
}

/* ══════════════════════════════════════════════════════════════════
   TOAST — glassmorphism + green accent
   Matches the modal/wishlist aesthetic (no dark navy anymore)
   ══════════════════════════════════════════════════════════════════ */

body .pxd-toast {
    position: fixed;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%) translateY(0);
    z-index: 10001;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px 12px 16px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(18px) saturate(1.2);
    -webkit-backdrop-filter: blur(18px) saturate(1.2);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 14px;
    font-family: 'Urbanist', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--pixidia-blue, #012827);
    box-shadow:
        0 12px 40px rgba(1, 40, 39, 0.18),
        0 2px 8px rgba(1, 40, 39, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);
    animation: pxd-toast-in 0.35s cubic-bezier(0.34, 1.2, 0.64, 1);
    max-width: calc(100vw - 32px);
}

/* Icon — success (default) */
body .pxd-toast-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0fa36b 0%, #20c9b8 100%);
    color: #fff;
    flex-shrink: 0;
    box-shadow:
        0 3px 8px rgba(15, 163, 107, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

body .pxd-toast-icon svg {
    width: 16px;
    height: 16px;
}

/* Variants */
body .pxd-toast--error .pxd-toast-icon {
    background: linear-gradient(135deg, #e53935 0%, #f56565 100%);
    box-shadow:
        0 3px 8px rgba(229, 57, 53, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

body .pxd-toast--info .pxd-toast-icon {
    background: linear-gradient(135deg, #1976d2 0%, #20c9b8 100%);
    box-shadow:
        0 3px 8px rgba(25, 118, 210, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

/* Message */
body .pxd-toast-msg {
    flex: 1;
    min-width: 0;
    line-height: 1.35;
    color: var(--pixidia-text, #1a2e2e);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Undo button — matches .pxd-addto-confirm style */
body .pxd-toast-undo {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border: 1px solid rgba(15, 163, 107, 0.25);
    border-radius: var(--radius-full, 100px);
    background: rgba(15, 163, 107, 0.06);
    color: var(--pixidia-green, #208D3E);
    font-family: 'Urbanist', sans-serif;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.18s ease;
    flex-shrink: 0;
}

body .pxd-toast-undo:hover {
    background: linear-gradient(135deg, #0fa36b 25%, #38c19c 100%);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 3px 10px rgba(15, 163, 107, 0.3);
}

body .pxd-toast-undo:active {
    transform: scale(0.97);
}

body .pxd-toast-undo svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}

body .pxd-toast-undo span {
    white-space: nowrap;
}

/* Leaving animation */
body .pxd-toast--leaving {
    animation: pxd-toast-out 0.22s ease forwards;
}

@keyframes pxd-toast-in {
    from { opacity: 0; transform: translateX(-50%) translateY(16px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes pxd-toast-out {
    from { opacity: 1; transform: translateX(-50%) translateY(0); }
    to   { opacity: 0; transform: translateX(-50%) translateY(12px); }
}

/* Responsive */
@media (max-width: 480px) {
    body .pxd-toast {
        bottom: 16px;
        left: 12px;
        right: 12px;
        transform: none;
        max-width: none;
    }
    @keyframes pxd-toast-in {
        from { opacity: 0; transform: translateY(16px); }
        to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes pxd-toast-out {
        from { opacity: 1; transform: translateY(0); }
        to   { opacity: 0; transform: translateY(12px); }
    }
}

/* ══════════════════════════════════════════════════════════════════
   ENRICHMENT PROGRESS MODAL (matches pxwzr-modal style)
   ══════════════════════════════════════════════════════════════════ */

body .pxd-enrich-overlay {
    position: fixed;
    inset: 0;
    z-index: 10001;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

body .pxd-enrich-overlay.pxd-enrich-visible {
    opacity: 1;
    visibility: visible;
}

body .pxd-enrich-modal {
    background: white;
    border-radius: var(--radius-xl, 20px);
    padding: 40px 36px;
    text-align: center;
    max-width: 420px;
    width: 100%;
    transform: scale(0.9);
    transition: transform 0.3s ease;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

body .pxd-enrich-visible .pxd-enrich-modal {
    transform: scale(1);
}

/* Icon */
body .pxd-enrich-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 163, 107, 0.08);
}

body .pxd-enrich-icon svg {
    width: 36px;
    height: 36px;
    color: var(--pixidia-green, #208D3E);
}

/* Title */
body .pxd-enrich-title {
    font-family: 'Urbanist', sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--pixidia-blue, #012827);
    margin: 0 0 8px;
}

body .pxd-enrich-subtitle {
    font-family: 'Urbanist', sans-serif;
    font-size: 0.95rem;
    color: var(--pixidia-text-muted, rgba(1, 40, 39, 0.55));
    margin: 0 0 24px;
    transition: color 0.3s;
}

/* Steps container */
body .pxd-enrich-steps {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    text-align: left;
}

body .pxd-enrich-step {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: var(--radius-sm, 8px);
    background: var(--pixidia-gray-50, #f5f7f7);
    transition: all 0.4s ease;
}

body .pxd-enrich-step-label {
    font-family: 'Urbanist', sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--pixidia-gray-400, #8a9c9c);
    transition: color 0.3s ease;
}

/* Status icon container */
body .pxd-enrich-step-status {
    position: relative;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

/* Pending: gray circle */
body .pxd-enrich-step-circle {
    position: absolute;
    inset: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid var(--pixidia-gray-200, #dce4e4);
    transition: opacity 0.3s ease;
}

/* Spinner (hidden by default) */
body .pxd-enrich-step-spinner {
    position: absolute;
    inset: 0;
    width: 22px;
    height: 22px;
    border: 2px solid var(--pixidia-gray-200, #dce4e4);
    border-top-color: var(--pixidia-green, #208D3E);
    border-radius: 50%;
    animation: pxd-enrich-spin 0.8s linear infinite;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Checkmark SVG (hidden by default) */
body .pxd-enrich-check {
    position: absolute;
    inset: 0;
    width: 22px;
    height: 22px;
    color: var(--pixidia-green, #208D3E);
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.3s ease;
}

/* ── Active step ──────────────────────────────────────────────── */
body .pxd-enrich-step.pxd-enrich-step-active {
    background: rgba(15, 163, 107, 0.06);
}

body .pxd-enrich-step.pxd-enrich-step-active .pxd-enrich-step-label {
    color: var(--pixidia-text, #1a2e2e);
    font-weight: 600;
}

body .pxd-enrich-step.pxd-enrich-step-active .pxd-enrich-step-circle {
    opacity: 0;
}

body .pxd-enrich-step.pxd-enrich-step-active .pxd-enrich-step-spinner {
    opacity: 1;
}

/* ── Done step ────────────────────────────────────────────────── */
body .pxd-enrich-step.pxd-enrich-step-done {
    background: rgba(15, 163, 107, 0.04);
}

body .pxd-enrich-step.pxd-enrich-step-done .pxd-enrich-step-label {
    color: #0d7a4a;
}

body .pxd-enrich-step.pxd-enrich-step-done .pxd-enrich-step-circle {
    opacity: 0;
}

body .pxd-enrich-step.pxd-enrich-step-done .pxd-enrich-step-spinner {
    opacity: 0;
}

body .pxd-enrich-step.pxd-enrich-step-done .pxd-enrich-check {
    opacity: 1;
    transform: scale(1);
}

/* ── Error step ───────────────────────────────────────────────── */
body .pxd-enrich-step.pxd-enrich-step-error {
    background: rgba(229, 57, 53, 0.06);
}

body .pxd-enrich-step.pxd-enrich-step-error .pxd-enrich-step-label {
    color: var(--pixidia-red, #e53935);
}

body .pxd-enrich-step.pxd-enrich-step-error .pxd-enrich-step-spinner {
    opacity: 0;
}

body .pxd-enrich-step.pxd-enrich-step-error .pxd-enrich-step-circle {
    border-color: var(--pixidia-red, #e53935);
    opacity: 1;
}

@keyframes pxd-enrich-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 480px) {
    body .pxd-enrich-modal {
        padding: 32px 24px;
    }

    body .pxd-enrich-title {
        font-size: 1.2rem;
    }

    body .pxd-enrich-icon {
        width: 56px;
        height: 56px;
    }

    body .pxd-enrich-icon svg {
        width: 28px;
        height: 28px;
    }
}

/* ── Highlight pulse (after live refresh scroll) ──────────────── */
.pxd-highlight-pulse {
    animation: pxd-pulse-glow 2s ease;
}

@keyframes pxd-pulse-glow {
    0% { box-shadow: 0 0 0 0 rgba(15, 163, 107, 0.4); }
    50% { box-shadow: 0 0 0 8px rgba(15, 163, 107, 0); }
    100% { box-shadow: 0 0 0 0 rgba(15, 163, 107, 0); }
}

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 768px) {
    body .pxd-wishlist-section {
        margin: 0 6px 8px;
        padding: 16px 12px 12px;
        border-radius: 14px;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }

    body .pxd-wishlist-icon-box {
        width: 32px;
        height: 32px;
        border-radius: 8px;
    }

    body .pxd-wishlist-icon-box svg {
        width: 16px;
        height: 16px;
    }

    body .pxd-wishlist-header {
        gap: 10px;
        margin-bottom: 12px;
    }

    body .pxd-wishlist-title {
        font-size: 1rem;
    }

    body .pxd-wishlist-header .pxd-section-count {
        display: none;
    }

    body .pxd-wishlist-card-actions {
        opacity: 1;
    }

    body .pxd-day-selector-modal,
    body .pxd-addto-modal {
        width: calc(100vw - 32px);
        max-width: 360px;
        border-radius: 20px 20px 0 0;
        position: fixed;
        bottom: 0;
        max-height: 70vh;
    }

    body .pxd-day-selector-overlay,
    body .pxd-addto-overlay {
        align-items: flex-end;
    }
}

@media (max-width: 480px) {
    body .pxd-wishlist-section {
        padding: 12px 10px 10px;
    }

    body .pxd-wishlist-title {
        font-size: 0.95rem;
    }
}

/* ════════════════════════════════════════════════════════════════
   Pixi Mascot — wishlist empty state (Phase 5.5)
   ════════════════════════════════════════════════════════════════ */

.pxd-wishlist-empty .pxd-wishlist-empty-icon {
    display: flex;
    justify-content: center;
    margin: 0 0 16px;
}
.pxd-wishlist-empty .pxd-pixi-mascot {
    margin: 0;
}
@media (max-width: 640px) {
    .pxd-wishlist-empty .pxd-pixi-mascot {
        width: 112px !important;
        height: auto !important;
    }
}

/* ─────────────────────────────────────────────────────────────
   Phase 6 (2026-04-17) — Pixi Plan Health suggestions
   Prefix: .pxd-suggestions-* (conflict-resistant vs Elementor/BuddyX)
   ───────────────────────────────────────────────────────────── */

body .pxd-suggestions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 16px 0;
  padding: 12px;
  background: #f6faf7;
  border: 1px solid #d6e7dd;
  border-radius: 10px;
  font-family: 'Urbanist', system-ui, sans-serif;
  font-size: 14px;
  color: #0A3D3A;
}

body .pxd-suggestions:empty { display: none; }

body .pxd-suggestions-heading {
  font-weight: 600;
  color: #0A3D3A;
  margin-bottom: 4px;
}

body .pxd-suggestions-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: #fff;
  border-radius: 8px;
  border-left: 4px solid #1E9B52;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

body .pxd-suggestions-row--warning { border-left-color: #ff9800; }
body .pxd-suggestions-row--alert   { border-left-color: #d32f2f; background: #fff5f5; }
body .pxd-suggestions-row--info    { border-left-color: #1976d2; }

body .pxd-suggestions-icon {
  font-size: 18px;
  flex: 0 0 auto;
}

body .pxd-suggestions-msg {
  flex: 1 1 auto;
  line-height: 1.4;
}

body .pxd-suggestions-action {
  flex: 0 0 auto;
  padding: 6px 12px;
  background: #0A3D3A;
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  /* Elementor reset */
  --e-global-color-primary: initial;
  --button-background-color: initial;
  box-shadow: none;
}

body .pxd-suggestions-action:hover { background: #1E9B52; }

body .pxd-suggestions-dismiss {
  flex: 0 0 auto;
  background: transparent;
  border: none;
  color: #888;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 0 6px;
  box-shadow: none;
}

body .pxd-suggestions-dismiss:hover { color: #333; }

body .pxd-suggestions-badge {
  display: inline-block;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: 6px;
  background: #d32f2f;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  border-radius: 9px;
}

/* ============================================================
   45-reservation-quick.css — Modal RAPIDE de statut de réservation
   Réutilise le socle .pxd-modal-* (29-budget.css / 35-modals.css).
   ============================================================ */

.pxd-modal--reservation-quick { max-width: 420px; }

.pxd-resq-subtitle {
    margin: 2px 0 0;
    font-size: 0.8rem;
    font-weight: 500;
    color: #778494;
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pxd-resq-field { margin-bottom: 16px; }
.pxd-resq-field:last-child { margin-bottom: 0; }
.pxd-resq-field > label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 700;
    color: #012827;
    margin-bottom: 8px;
}
.pxd-resq-field > label svg { width: 14px; height: 14px; }
.pxd-resq-hint { font-weight: 500; color: #9db3b3; }
.pxd-resq-field--disabled { opacity: 0.75; }

/* Segmented status selector */
.pxd-resq-status-group { display: flex; gap: 6px; }
.pxd-resq-status-opt {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 6px;
    border: 1.5px solid rgba(1, 40, 39, 0.10);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.6);
    color: #778494;
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    box-shadow: none;
    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.pxd-resq-status-opt svg { width: 16px; height: 16px; }
.pxd-resq-status-opt:hover { border-color: rgba(1, 40, 39, 0.2); background: rgba(255, 255, 255, 0.9); }
.pxd-resq-status-opt:focus-visible { outline: 2px solid #0fa36b; outline-offset: 2px; }
.pxd-resq-status-opt:active { transform: scale(0.98); }
.pxd-resq-status-opt.active[data-status="confirmed"] { border-color: #388e3c; background: rgba(56, 142, 60, 0.10); color: #2e7d32; }
.pxd-resq-status-opt.active[data-status="pending"]   { border-color: #f59e0b; background: rgba(245, 158, 11, 0.10); color: #d97706; }
.pxd-resq-status-opt.active[data-status="none"]      { border-color: #9db3b3; background: rgba(158, 158, 158, 0.12); color: #5d7070; }

/* Détails (réf + date) — masqués si non réservable */
.pxd-resq-details {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 16px;
    overflow: hidden;
    max-height: 220px;
    opacity: 1;
    transition: max-height 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease, margin-top 0.2s ease;
}
.pxd-resq-details--hidden {
    max-height: 0;
    opacity: 0;
    margin-top: 0;
    pointer-events: none;
}

.pxd-resq-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid rgba(1, 40, 39, 0.12);
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.875rem;
    color: #012827;
    background: rgba(255, 255, 255, 0.75);
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.pxd-resq-input:hover { border-color: rgba(1, 40, 39, 0.2); }
/* Focus INSET (l'anneau ne déborde pas -> jamais rogné par overflow des détails) */
.pxd-resq-input:focus,
.pxd-resq-input:focus-visible { outline: none !important; border-color: #0fa36b; box-shadow: inset 0 0 0 1px #0fa36b; }
.pxd-resq-input:disabled { opacity: 0.5; cursor: not-allowed; background: rgba(1, 40, 39, 0.04); }

/* ── Déclencheur du date-picker (annulable jusqu'au), style pill design-system §6 ── */
.pxd-resq-datewrap { display: flex; align-items: center; gap: 8px; }
.pxd-resq-datebtn {
    flex: 1;
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px;
    background: rgba(15, 163, 107, 0.08);
    border: 1px solid rgba(15, 163, 107, 0.15);
    border-radius: 10px;
    font-family: inherit; font-size: 0.875rem; font-weight: 600;
    color: #012827; cursor: pointer; box-shadow: none;
    -webkit-appearance: none; appearance: none;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.pxd-resq-datebtn-ic { width: 16px; height: 16px; color: #0fa36b; flex-shrink: 0; }
.pxd-resq-datebtn-text { flex: 1; text-align: left; color: #778494; }
.pxd-resq-datebtn--set .pxd-resq-datebtn-text { color: #012827; }
.pxd-resq-datebtn-chevron { width: 16px; height: 16px; color: #778494; flex-shrink: 0; transition: transform 0.25s ease; }
.pxd-resq-datebtn[aria-expanded="true"] .pxd-resq-datebtn-chevron { transform: rotate(180deg); }
.pxd-resq-datebtn:hover { background: rgba(15, 163, 107, 0.15); border-color: rgba(15, 163, 107, 0.3); box-shadow: 0 2px 8px rgba(15, 163, 107, 0.12); }
.pxd-resq-datebtn:focus-visible { outline: 2px solid #0fa36b; outline-offset: 2px; }
.pxd-resq-dateclear {
    width: 32px; height: 32px; flex-shrink: 0; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: none; background: rgba(1, 40, 39, 0.05); color: #778494;
    border-radius: 50%; cursor: pointer; box-shadow: none;
    -webkit-appearance: none; appearance: none;
    transition: background 0.2s ease, color 0.2s ease;
}
.pxd-resq-dateclear:hover { background: rgba(211, 47, 47, 0.1); color: #d32f2f; }
.pxd-resq-dateclear:focus-visible { outline: 2px solid #0fa36b; outline-offset: 2px; }
.pxd-resq-dateclear svg { width: 14px; height: 14px; }

/* ── Calendrier mono-date : réutilise le socle .pxd-calendar-popup (24-programme.css),
      override z-index pour passer AU-DESSUS du modal (20000) + bottom-sheet mobile ── */
.pxd-calendar-popup.pxd-resq-cal { z-index: 20050; }
.pxd-cal-empty { width: 38px; height: 38px; }
.pxd-cal-day.is-today:not(.selected) { box-shadow: inset 0 0 0 1.5px rgba(15, 163, 107, 0.45); font-weight: 700; }
.pxd-resq-cal-backdrop {
    position: fixed; inset: 0; background: rgba(1, 40, 39, 0.35);
    backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
    z-index: 20040; display: none;
}
.pxd-resq-cal-backdrop.show { display: block; }

/* Verrou de scroll du body quand un modal est ouvert (a11y) */
body.pxd-modal-lock-scroll { overflow: hidden; }

@media (max-width: 767px) {
    .pxd-calendar-popup.pxd-resq-cal--sheet {
        top: auto !important; bottom: 0; left: 0; right: 0; width: 100%;
        border-radius: 20px 20px 0 0; max-height: 72vh; overflow-y: auto;
    }
    .pxd-cal-empty { width: 34px; height: 34px; }
}

@media (max-width: 480px) {
    .pxd-modal--reservation-quick { max-width: 100%; }
    .pxd-resq-status-opt { font-size: 0.68rem; padding: 12px 4px; }
}

.pxd-popup-cta img.pxd-popup-cta-logo{width:15px;height:15px;max-width:15px;max-height:15px;object-fit:contain;flex-shrink:0}

/* Notes & descriptions — listes/surlignage/emphase (Leo 2026-07-21, corrige liste-style:none du reset 01-reset.css) */
.pxd-comment-body ul {
  list-style: disc;
  padding-left: 1.4em;
  margin: 0.5em 0;
}
.pxd-comment-body ol {
  list-style: decimal;
  padding-left: 1.4em;
  margin: 0.5em 0;
}
.pxd-comment-body li {
  margin-bottom: 0.4em;
}
.pxd-comment-body li:last-child {
  margin-bottom: 0;
}
.pxd-comment-body mark {
  background-color: rgba(245, 158, 11, 0.25);
  color: var(--pixidia-text);
  padding: 0.05em 0.3em;
  border-radius: 3px;
}
.pxd-comment-body strong {
  color: var(--pixidia-blue);
  font-weight: 700;
}
.pxd-comment-body em {
  color: var(--pixidia-green);
  font-style: italic;
}


/* Notes & descriptions — vrai wrapper JS (pxd-cc-content), listes/surlignage/emphase (Leo 2026-07-21 round 2) */
.pxd-cc-content ul {
  list-style: disc;
  padding-left: 1.4em;
  margin: 0.5em 0;
}
.pxd-cc-content ol {
  list-style: decimal;
  padding-left: 1.4em;
  margin: 0.5em 0;
}
.pxd-cc-content li {
  margin-bottom: 0.4em;
}
.pxd-cc-content li:last-child {
  margin-bottom: 0;
}
.pxd-cc-content mark {
  background-color: rgba(245, 158, 11, 0.25);
  color: var(--pixidia-text);
  padding: 0.05em 0.3em;
  border-radius: 3px;
}
.pxd-cc-content strong {
  color: var(--pixidia-blue);
  font-weight: 700;
}
.pxd-cc-content em {
  color: var(--pixidia-green);
  font-style: italic;
}


/* Validated September 2026 child cards. Scoped: no theme, map or programme reset. */
body.pxd-itinerary-single .pxdc-card {
  --pc-cpt:var(--pxd-color-logement);--pc-title:#072b28;--pc-fg:#0a3d3a;
  --pc-green:#178440;--pc-muted:var(--pixidia-gray-500);--pc-label:var(--pixidia-gray-400);
  --pc-shadow:0 10px 30px -5px rgba(15,163,107,.12),0 2px 8px rgba(15,163,107,.06);
  position:relative;display:flex;flex-direction:row;align-items:stretch;gap:12px;padding:12px;
  min-width:0;height:auto;max-height:none;overflow:visible;box-sizing:border-box;
  border:1px solid rgba(255,255,255,.7);border-radius:18px;background:rgba(255,255,255,.66);
  backdrop-filter:blur(16px);box-shadow:var(--pc-shadow);font-family:Urbanist,sans-serif;
  color:var(--pc-fg);text-align:left;line-height:1.4;animation:pxdc-rise .4s ease both;
}
body.pxd-itinerary-single .pxdc-card *,body.pxd-itinerary-single .pxdc-card *::before,body.pxd-itinerary-single .pxdc-card *::after{box-sizing:border-box}
body.pxd-itinerary-single .pxdc-card::before{display:none}
body.pxd-itinerary-single .pxdc-card::after{content:'';position:absolute;left:0;top:16px;bottom:16px;width:3px;border-radius:0 3px 3px 0;background:var(--pc-cpt);pointer-events:none}
body.pxd-itinerary-single .pxdc-card[data-item-type=transport]{--pc-cpt:var(--pxd-color-transport)}
body.pxd-itinerary-single .pxdc-card[data-item-type=restauration]{--pc-cpt:var(--pxd-color-restauration)}
body.pxd-itinerary-single .pxdc-card[data-item-type=activite]{--pc-cpt:var(--pxd-color-activite)}
body.pxd-itinerary-single .pxdc-card[data-item-type=location]{--pc-cpt:var(--pxd-color-location)}
body.pxd-itinerary-single :is(#logements-cards,#transports-cards,#restaurants-cards,#activites-cards,#locations-cards){
 display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,max(330px,calc((100% - 16px)/2))),1fr));gap:16px;align-items:stretch;
}
body.pxd-itinerary-single .pxdc-card.pxd-card--wide{grid-column:1/-1}
body.pxd-itinerary-single .pxdc-card.pxd-card--hidden{display:none}
body.pxd-itinerary-single .pxdc-card .pxdc-media{position:relative;flex:0 0 clamp(76px,22%,116px);min-width:0;min-height:132px;border-radius:14px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:linear-gradient(155deg,color-mix(in srgb,var(--pc-cpt) 18%,transparent),color-mix(in srgb,var(--pc-cpt) 5%,transparent));isolation:isolate}
body.pxd-itinerary-single .pxdc-card .pxdc-media--icon{flex-basis:clamp(76px,16%,116px);min-height:168px;border:1px solid color-mix(in srgb,var(--pc-cpt) 14%,transparent)}
body.pxd-itinerary-single .pxdc-card .pxdc-media>svg{width:38px;height:38px;color:var(--pc-cpt);opacity:.85}
/* F6 (2026-09-20) : la fente de 3px entre les deux photos laissait voir le fond de
   .pxdc-media -- degrade teinte + icone du CPT -- ce qui donnait un separateur sale.
   Le fond du conteneur devient la couleur pleine du CPT : une simple ligne. */
body.pxd-itinerary-single .pxdc-card .pxdc-photos{position:absolute;inset:0;display:flex;flex-direction:column;gap:3px;background:var(--pc-cpt)}
body.pxd-itinerary-single .pxdc-card .pxdc-photo{position:relative;flex:1 1 0;min-height:0;overflow:hidden;background:#eef2f2}
body.pxd-itinerary-single .pxdc-card .pxdc-photo img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;border:0;border-radius:0;padding:0;margin:0}
body.pxd-itinerary-single .pxdc-card .pxdc-photo:first-child::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,43,40,.45),transparent 52%,rgba(7,43,40,.18));pointer-events:none}
body.pxd-itinerary-single .pxdc-card .pxdc-day{display:inline-flex;position:absolute;top:7px;left:7px;z-index:2;margin:0;padding:3px 7px;border:0;border-radius:9999px;background:linear-gradient(135deg,#1e9b52 25%,#3dbe73);color:white;font-size:10px;font-weight:800;letter-spacing:.4px;box-shadow:0 4px 10px rgba(1,40,39,.22)}
body.pxd-itinerary-single .pxdc-card .pxdc-content{display:flex;flex:1 1 auto;flex-direction:column;gap:8px;min-width:0}
body.pxd-itinerary-single .pxdc-card .pxdc-head{position:static;display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:0;margin:0;min-width:0}
body.pxd-itinerary-single .pxdc-card .pxdc-category{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:7px;font-size:11px;font-weight:700;line-height:1.35;overflow-wrap:anywhere;min-width:0;max-width:100%;background:color-mix(in srgb,var(--pc-cpt) 14%,transparent);color:var(--pc-cpt)}
body.pxd-itinerary-single .pxdc-card[data-item-type=activite] .pxdc-category{color:#8a5300}
body.pxd-itinerary-single .pxdc-card[data-item-type=logement] .pxdc-category{color:#2b6f2f}
body.pxd-itinerary-single .pxdc-card[data-item-type=restauration] .pxdc-category{color:#b02a2a}
body.pxd-itinerary-single .pxdc-card svg{flex-shrink:0;width:12px;height:12px}
body.pxd-itinerary-single .pxdc-card .pxdc-extra{margin-left:auto;display:inline-flex;gap:5px;align-items:center;min-width:0;font-size:11px;font-weight:600;color:var(--pc-label);overflow-wrap:anywhere}
body.pxd-itinerary-single .pxdc-card .pxdc-title{font-family:inherit;font-size:16.5px!important;font-weight:800;line-height:1.2;letter-spacing:-.35px;min-height:0;margin:0;padding:0;border:0;color:var(--pc-title)!important;overflow-wrap:anywhere;text-wrap:pretty;text-transform:none}
body.pxd-itinerary-single .pxdc-card .pxdc-title a{font:inherit;letter-spacing:inherit;color:inherit!important;text-decoration:none;border:0;background:transparent;box-shadow:none}
body.pxd-itinerary-single .pxdc-card .pxdc-title a:is(:hover,:focus,:focus-visible,:active){color:var(--pc-green)!important;text-decoration:underline;background:transparent;box-shadow:none}
body.pxd-itinerary-single .pxdc-card .pxdc-location{display:flex;align-items:center;gap:5px;min-width:0;margin-top:-3px;font-size:12px;font-weight:500;color:var(--pc-muted)}
body.pxd-itinerary-single .pxdc-card .pxdc-location span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.pxd-itinerary-single .pxdc-card .pxdc-location span:focus{white-space:normal;overflow-wrap:anywhere}
body.pxd-itinerary-single .pxdc-card .pxdc-schedule{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(92px,100%),1fr));gap:1px;background:rgba(10,61,58,.08);border:1px solid rgba(255,255,255,.7);border-radius:12px;box-shadow:0 4px 10px rgba(15,163,107,.07);overflow:hidden}
body.pxd-itinerary-single .pxdc-card[data-item-type=restauration] .pxdc-schedule{margin-top:auto}
body.pxd-itinerary-single .pxdc-card .pxdc-cell{display:flex;flex-direction:column;gap:2px;padding:7px 10px;background:rgba(255,255,255,.88);min-width:0}
body.pxd-itinerary-single .pxdc-card .pxdc-label{display:flex;align-items:center;gap:4px;font-size:9.5px;font-weight:600;letter-spacing:.9px;text-transform:uppercase;color:var(--pc-label)}
body.pxd-itinerary-single .pxdc-card .pxdc-label svg{width:10px;height:10px;color:var(--pc-cpt)}
body.pxd-itinerary-single .pxdc-card .pxdc-value{font-size:12.5px;font-weight:700;color:var(--pc-fg);overflow-wrap:anywhere}
body.pxd-itinerary-single .pxdc-card .pxdc-footer{display:flex;align-items:flex-end;justify-content:space-between;gap:8px;flex-wrap:wrap;padding-top:2px;margin-top:auto}
/* F4 (2026-09-20) : le montant etait ecrit plus gros (18px) que le TITRE de la carte
   (16,5px) et en vert : il captait le regard avant le nom du lieu. Il redescend sous
   le titre et passe en noir. L'icone portefeuille, elle, reste verte -- elle n'a pas
   de couleur propre et heriterait du noir via currentColor, d'ou la regle suivante. */
body.pxd-itinerary-single .pxdc-card .pxdc-cost{display:flex;align-items:center;gap:5px;flex-wrap:wrap;font-size:15px;font-weight:700;letter-spacing:-.2px;color:var(--pc-title);line-height:1.15}
body.pxd-itinerary-single .pxdc-card .pxdc-cost svg{width:14px;height:14px;color:var(--pc-green)}
body.pxd-itinerary-single .pxdc-card .pxdc-cost-missing{font-size:11px;color:var(--pc-muted)}
body.pxd-itinerary-single .pxdc-card .pxdc-actions{display:flex;align-items:center;gap:6px;margin-left:auto;flex-wrap:wrap;min-width:0;max-width:100%}
/* Measured legacy button rules include !important and focus outlines. Restore all states here. */
body.pxd-itinerary-single .pxdc-card button:is(.pxdc-locate,.pxdc-reservation){position:static!important;display:inline-flex!important;align-items:center;justify-content:center;flex-shrink:0;gap:5px;opacity:1!important;visibility:visible;min-height:32px;height:auto;width:auto;max-width:100%;padding:0 10px!important;margin:0!important;border:0!important;border-radius:9999px!important;background:rgba(10,61,58,.07)!important;color:#425a58!important;box-shadow:none!important;font:700 11px/1.4 Urbanist,sans-serif!important;text-transform:none;letter-spacing:0;cursor:pointer;transform:none;transition:transform .25s,background .25s,box-shadow .25s}
body.pxd-itinerary-single .pxdc-card button.pxdc-reservation::after{display:none!important}
body.pxd-itinerary-single .pxdc-card button.pxdc-reservation svg{width:13px;height:13px}
body.pxd-itinerary-single .pxdc-card button.pxdc-reservation svg:last-child{width:11px;height:11px;opacity:.55}
body.pxd-itinerary-single .pxdc-card button.pxdc-reservation[data-status=confirmed]{background:rgba(30,155,82,.14)!important;color:#137a3c!important}
body.pxd-itinerary-single .pxdc-card button.pxdc-reservation[data-status=pending]{background:rgba(236,171,0,.16)!important;color:#8a6b00!important}
body.pxd-itinerary-single .pxdc-card button.pxdc-locate{width:32px;height:32px;padding:0!important;background:rgba(255,255,255,.85)!important;border:1px solid rgba(15,163,107,.18)!important;color:var(--pc-green)!important}
body.pxd-itinerary-single .pxdc-card button.pxdc-locate svg{width:15px;height:15px}
body.pxd-itinerary-single .pxdc-card button:is(.pxdc-locate,.pxdc-reservation):is(:hover,:focus,:focus-visible,:active){border-color:rgba(15,163,107,.18)!important;outline:0!important;box-shadow:0 6px 14px rgba(15,163,107,.18)!important;transform:translateY(-2px)}
body.pxd-itinerary-single .pxdc-card button.pxdc-locate:is(:hover,:focus,:focus-visible,:active),
body.pxd-itinerary-single .pxdc-card button.pxdc-locate.is-located{background-image:var(--pxd-active-grad)!important;background-color:transparent!important;border-color:transparent!important;color:#fff!important}
body.pxd-itinerary-single .pxdc-card button.pxdc-locate.is-located{box-shadow:var(--pxd-active-shadow)!important;transform:none}
body.pxd-itinerary-single .pxdc-card button.pxdc-reservation:is(:hover,:focus,:focus-visible,:active){background:rgba(10,61,58,.13)!important}
body.pxd-itinerary-single .pxdc-card button.pxdc-reservation[data-status=confirmed]:is(:hover,:focus,:focus-visible,:active){background:rgba(30,155,82,.22)!important}
body.pxd-itinerary-single .pxdc-card button.pxdc-reservation[data-status=pending]:is(:hover,:focus,:focus-visible,:active){background:rgba(236,171,0,.26)!important}
body.pxd-itinerary-single .pxdc-card :is(button,a,[tabindex]):focus-visible{outline:0!important;box-shadow:0 0 0 3px rgba(30,155,82,.45)!important}
body.pxd-itinerary-single .pxdc-card .pxdc-title a:focus-visible{outline:0!important;box-shadow:0 0 0 3px rgba(30,155,82,.45)!important}
body.pxd-itinerary-single .pxdc-card button:is(.pxdc-locate,.pxdc-reservation):focus-visible{outline:0!important;box-shadow:0 0 0 3px rgba(30,155,82,.45)!important}
body.pxd-itinerary-single .pxdc-card button:is(.pxdc-locate,.pxdc-reservation):active{transform:translateY(0)}
body.pxd-itinerary-single .pxdc-card button:is(.pxdc-locate,.pxdc-reservation):disabled{opacity:.5!important;cursor:default;transform:none;box-shadow:none!important}
body.pxd-itinerary-single .pxdc-card--simple{flex-direction:column;padding:14px 14px 14px 17px}
body.pxd-itinerary-single .pxdc-card--simple .pxdc-day{position:static}
/* F11 : aligne sur le titre standard -- deux tailles de titre coexistaient. */
body.pxd-itinerary-single .pxdc-card--simple .pxdc-title{font-size:16.5px!important}
body.pxd-itinerary-single .pxdc-card .pxdc-trip{font-size:11px;padding:3px 8px;border-radius:7px;background:rgba(10,61,58,.06);color:var(--pc-muted)}
body.pxd-itinerary-single .pxdc-card.pxd-card--wide .pxdc-trip{background:rgba(236,171,0,.14);color:#8a6b00}
body.pxd-itinerary-single .pxdc-card .pxdc-legs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(248px,100%),1fr));gap:10px;min-width:0}
body.pxd-itinerary-single .pxdc-card .pxdc-leg{padding:9px 11px 10px;border-radius:12px;background:rgba(255,255,255,.86);border:1px solid rgba(255,255,255,.7);box-shadow:0 4px 10px rgba(15,163,107,.07);min-width:0}
body.pxd-itinerary-single .pxdc-card--simple .pxdc-leg{padding:11px 14px 12px}
body.pxd-itinerary-single .pxdc-card .pxdc-leg-head{display:flex;align-items:center;gap:5px;margin-bottom:8px;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--pc-cpt)}
body.pxd-itinerary-single .pxdc-card .pxdc-route{display:grid;grid-template-columns:minmax(0,1fr) minmax(48px,.85fr) minmax(0,1fr);gap:10px;align-items:start}
body.pxd-itinerary-single .pxdc-card .pxdc-endpoint{display:flex;flex-direction:column;gap:3px;min-width:0;overflow-wrap:anywhere}
body.pxd-itinerary-single .pxdc-card .pxdc-endpoint:last-child{text-align:right}
/* F11 (2026-09-20) : 19px/800 pour un lieu, contre 16,5px pour le titre de la carte --
   la hierarchie etait inversee. Avec un libelle de geocodeur non reduit (« Rome, Ville
   metropolitaine de Rome Capitale, Italie ») le bloc s'etalait sur six lignes et
   disloquait la carte. Le libelle est desormais ramene a la ville cote serveur
   (pxd_endpoint_city) ; ce clamp est la ceinture de securite pour tout cas restant. */
body.pxd-itinerary-single .pxdc-card .pxdc-endpoint strong{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:15px;font-weight:800;line-height:1.25;color:var(--pc-title)}
body.pxd-itinerary-single .pxdc-card .pxdc-endpoint b{font-size:13.5px;font-weight:700}
body.pxd-itinerary-single .pxdc-card .pxdc-endpoint>span{font-size:10.5px;color:var(--pc-label)}
body.pxd-itinerary-single .pxdc-card .pxdc-connector{position:relative;min-height:36px;text-align:center}
body.pxd-itinerary-single .pxdc-card .pxdc-connector::before{content:'';position:absolute;top:11px;left:0;right:0;border-top:1.5px dashed rgba(25,118,210,.35)}
body.pxd-itinerary-single .pxdc-card .pxdc-connector>span{position:relative;display:flex;align-items:center;justify-content:center;width:22px;height:22px;margin:auto;border-radius:50%;background:white;border:1px solid rgba(25,118,210,.2);color:var(--pc-cpt)}
body.pxd-itinerary-single .pxdc-card .pxdc-connector small{display:block;margin-top:4px;font-size:10px;font-weight:700;line-height:1.3;color:var(--pc-cpt);overflow-wrap:anywhere}
body.pxd-itinerary-single .pxdc-card .pxdc-leg-meta{display:flex;flex-wrap:wrap;gap:5px 8px;margin-top:8px;padding-top:7px;border-top:1px dashed rgba(10,61,58,.1);font-size:10.5px;color:var(--pc-muted)}
body.pxd-itinerary-single .pxdc-card .pxdc-leg-meta span{display:inline-flex;gap:4px;align-items:center;min-width:0;overflow-wrap:anywhere}
body.pxd-itinerary-single .pxdc-card .pxdc-stop{padding:3px 6px;border-radius:999px;background:rgba(25,118,210,.09);color:#1565c0}
body.pxd-itinerary-single .pxdc-card .pxdc-rental>strong{display:flex;align-items:flex-start;gap:5px;font-size:13px;line-height:1.3;overflow-wrap:anywhere}
body.pxd-itinerary-single .pxdc-card .pxdc-rental p{margin:6px 0 0;padding:0;font-size:12.5px;font-weight:700;line-height:1.4}
body.pxd-itinerary-single .pxdc-card .pxdc-rental-meta{display:flex;gap:7px;flex-wrap:wrap}
body.pxd-itinerary-single .pxdc-card .pxdc-meta-pill{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:9999px;background:rgba(10,61,58,.05);font-size:10.5px;font-weight:600;color:var(--pc-muted);overflow-wrap:anywhere;min-width:0}
body.pxd-itinerary-single .pxdc-card .pxdc-deposit{background:rgba(236,171,0,.13);color:#8a6b00}
@keyframes pxdc-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media(hover:none){body.pxd-itinerary-single .pxdc-card:hover,body.pxd-itinerary-single .pxdc-card button:hover{transform:none}}
@media(prefers-reduced-motion:reduce){body.pxd-itinerary-single .pxdc-card,body.pxd-itinerary-single .pxdc-card *{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Progressive first paint: SSR content stays visible; only missing regions wait. */
body.pxd-itinerary-single .pxditcrd-section,
body.pxd-itinerary-single .pxd-section,
body.pxd-itinerary-single .pxd-hero-image { animation:none; opacity:1; }
body.pxd-itinerary-single .pxditcrd-section { transition:background-color .15s,box-shadow .15s; }
body.pxd-itinerary-single .pxditcrd-section:hover { transform:none; }
body.pxd-itinerary-single .pxd-hero-img { width:100%; height:100%; object-fit:cover; }
body.pxd-itinerary-single .pxditcrd-location-flow { min-height:32px; }
body.pxd-itinerary-single .pxditcrd-content { min-width:0; }
body.pxd-itinerary-single .pxditcrd-card { align-items:stretch; }
/* The same collapsed geometry as the hydrated accordions, with readable no-JS fallback. */
.pxd-enhanced .pxd-section:not([data-pxd-accordion-bound]) { padding:10px 16px; margin-bottom:6px; }
.pxd-enhanced .pxd-section:not([data-pxd-accordion-bound]) > :not(.pxd-section-header) { display:none !important; }
.pxd-enhanced .pxd-section--programme:not([data-pxd-accordion-bound]) .pxd-date-picker { display:none; }
.pxd-enhanced .pxd-section:not([data-pxd-accordion-bound]) > .pxd-section-header { margin-bottom:0; }
.pxd-enhanced .pxd-section:not([data-pxd-accordion-bound]) .pxd-section-header-btn { display:none; }
.pxd-enhanced .pxd-section:not([data-pxd-accordion-bound]) > .pxd-section-header::after { content:'›'; font:26px/1 sans-serif; color:#8a9c9c; margin-left:auto; width:32px; text-align:center; }
body.pxd-itinerary-single .pxd-loading-note { margin:12px 16px; padding:12px 16px; border:1px solid #cee3dc; border-radius:12px; background:#f4faf7; color:#274b42; font:500 14px/1.5 Urbanist,sans-serif; }
body.pxd-itinerary-single .pxd-loading-note[hidden] { display:none; }
body.pxd-itinerary-single .pxd-loading-note button { border:1px solid #8fb6a7; border-radius:20px; background:white; color:#164a39; padding:8px 14px; margin-left:8px; cursor:pointer; }
body.pxd-itinerary-single .pxd-loading-note button:focus-visible { outline:2px solid #208d3e; outline-offset:3px; }
/* Delayed/failed JS restores the server's sections rather than leaving blank accordions. */
html[data-pxd-load="delayed"] .pxd-section:not([data-pxd-accordion-bound]) > :not(.pxd-section-header) { display:revert !important; }
html[data-pxd-load="delayed"] .pxd-section:not([data-pxd-accordion-bound]) > .pxd-section-header::after { content:none; }
body.pxd-itinerary-single .pxd-map-loading { position:absolute; inset:0; z-index:450; display:grid; place-content:center; justify-items:center; gap:14px; padding:28px; background:#eaf1ed; text-align:center; color:#31564a; pointer-events:none; }
body.pxd-itinerary-single .pxd-map-loading[hidden] { display:none; }
body.pxd-itinerary-single .pxd-map-loading::before { content:''; position:absolute; inset:0; opacity:.28; background:repeating-linear-gradient(24deg,transparent 0 80px,#c5d8cd 81px 83px,transparent 84px 160px),repeating-linear-gradient(112deg,transparent 0 115px,#c5d8cd 116px 118px,transparent 119px 220px); }
body.pxd-itinerary-single .pxd-map-loading > * { position:relative; }
body.pxd-itinerary-single .pxd-map-loading-mark { display:grid; place-items:center; width:64px; height:64px; background:#fff; border:1px solid #d6e6dd; border-radius:22px; box-shadow:0 6px 24px #164a3910; }
body.pxd-itinerary-single .pxd-map-loading-mark svg { width:28px; height:28px; color:#208d3e; }
body.pxd-itinerary-single .pxd-map-loading strong { font-size:18px; line-height:1.3; }
body.pxd-itinerary-single .pxd-map-loading p { margin:0; font-size:14px; max-width:260px; }
body.pxd-itinerary-single .pxd-map-loading[data-state="error"] { inset:auto 12px 12px; border:1px solid #d3e1d8; border-radius:16px; padding:14px; box-shadow:0 4px 20px #1232; pointer-events:auto; }
body.pxd-itinerary-single .pxd-map-loading[data-state="error"] .pxd-map-loading-mark { display:none; }
body.pxd-itinerary-single .pxd-map-loading button { pointer-events:auto; border:1px solid #8fb6a7; border-radius:20px; padding:8px 14px; background:white; color:#164a39; cursor:pointer; }
body.pxd-itinerary-single .pxd-map-loading button[hidden] { display:none; }
body.pxd-itinerary-single .pxd-map-legend:empty { display:none; }
body.pxd-itinerary-single .pxd-map-container:has(.pxd-map-loading:not([hidden]):not([data-state="error"])) .pxd-map-controls { visibility:hidden; }
body.pxd-itinerary-single .pxd-programme-loading { display:flex; align-items:center; gap:12px; padding:20px 12px; min-height:110px; color:#627870; }
body.pxd-itinerary-single .pxd-programme-loading::before { content:''; width:4px; height:56px; border-radius:4px; background:#cfe3d9; }
body.pxd-itinerary-single .pxd-section-toggle { min-width:36px; min-height:36px; }
@media(max-width:768px) {
  .pxd-enhanced .pxd-section:not([data-pxd-accordion-bound]) { padding:10px 12px; }
  body.pxd-itinerary-single .pxd-loading-note { margin:8px; }
  body.pxd-itinerary-single .pxd-section-toggle { min-width:44px; min-height:44px; }
  body.pxd-itinerary-single .pxd-map-loading { padding:20px; }
  body.pxd-itinerary-single .pxd-programme-header { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; padding:0; gap:8px; }
  body.pxd-itinerary-single .pxd-programme-header-left { grid-column:1; grid-row:1; }
  body.pxd-itinerary-single .pxd-programme-header > .pxd-section-toggle { grid-column:2; grid-row:1; }
  body.pxd-itinerary-single .pxd-programme-header > .pxd-date-picker,
  body.pxd-itinerary-single .pxd-programme-header > .pxd-global-view-btn { grid-column:1/-1; }
  .pxd-enhanced .pxd-section--programme:not([data-pxd-accordion-bound]) > .pxd-section-header::after { grid-column:2; grid-row:1; }
}
@media(prefers-reduced-motion:reduce) {
  body.pxd-itinerary-single .pxd-map-loading,
  body.pxd-itinerary-single .pxd-programme-loading { animation:none; transition:none; }
}

/* One-tap map: signature CTA, one large sheet, close control for every viewer. */
.pxd-mobile-map-toggle {
    justify-content: center;
    min-height: 48px;
    padding: 12px 20px;
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: var(--pxd-radius-full, 9999px);
    background: var(--pxd-gradient, linear-gradient(135deg, #0A3D3A, #1E9B52));
    color: #fff;
    font-family: var(--pxd-font-sans, 'Urbanist', sans-serif);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    box-shadow: 0 8px 24px rgba(1, 40, 39, 0.18), 0 2px 8px rgba(15, 163, 107, 0.12);
    transition: background 250ms ease, transform 150ms ease, box-shadow 250ms ease;
}

.pxd-mobile-map-toggle svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.pxd-mobile-map-toggle:focus-visible {
    outline: 2px solid var(--pxd-secondary, #1E9B52);
    outline-offset: 3px;
}

.pxd-mobile-map-close {
    display: none;
}

@media (max-width: 768px) {
    .pxd-mobile-map-toggle {
        right: max(16px, env(safe-area-inset-right, 0px));
        bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* The sheet owns its close control; no floating CTA across the map or Pixi. */
    body.pxd-map-visible .pxd-mobile-map-toggle {
        visibility: hidden;
        pointer-events: none;
    }

    .pxd-panel-right.pxd-map-full {
        height: min(90vh, calc(100vh - 72px)) !important;
    }

    #pxd-panel-right .pxd-panel-tabs {
        display: none !important;
    }

    #pxd-panel-right .pxdie-mobile-map-close.pxd-mobile-map-close:not([hidden]) {
        position: absolute;
        top: 8px;
        right: 8px;
        z-index: 1200;
        display: flex !important;
        align-items: center;
        justify-content: center;
        flex: 0 0 44px;
        width: 44px;
        min-height: 44px;
        padding: 10px;
        border: 1px solid rgba(255, 255, 255, 0.65);
        border-radius: var(--pxd-radius-md, 12px);
        background: rgba(255, 255, 255, 0.96);
        color: var(--pxd-primary, #0A3D3A);
        box-shadow: 0 4px 12px rgba(1, 40, 39, 0.12);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        cursor: pointer;
    }

    .pxd-mobile-map-close::before {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.4), transparent);
        pointer-events: none;
    }

    .pxd-mobile-map-close svg {
        width: 20px;
        height: 20px;
    }

    .pxd-mobile-map-close:focus-visible {
        outline: 2px solid var(--pxd-secondary, #1E9B52);
        outline-offset: 2px;
    }

    .pxd-panel-right[data-mode="map"] .pxd-map-controls,
    .pxd-panel-right:not([data-mode]) .pxd-map-controls {
        top: 64px;
    }

    .pxd-map-drag-handle {
        touch-action: none;
    }

    /* Keep every filter visible: centered horizontal overflow hid the first one. */
    #map-legend {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        max-width: 560px;
        max-height: none;
        margin-inline: auto;
        padding: 4px;
        bottom: calc(24px + env(safe-area-inset-bottom, 0px));
        overflow: visible;
        border-radius: 20px;
        background: rgba(255, 255, 255, 0.96);
        border: 1px solid rgba(255, 255, 255, 0.8);
        box-shadow: 0 8px 24px rgba(10, 61, 58, 0.14);
    }

    #map-legend .pxd-legend-item {
        flex: 1 0 auto;
        grid-template-columns: 20px max-content max-content;
        justify-content: center;
        gap: 4px;
        min-width: 0;
        min-height: 44px;
        padding: 4px;
        border-radius: 12px;
        border: 1px solid rgba(30, 155, 82, 0.2);
        background: #f0f7f4;
        color: var(--pxd-primary, #0A3D3A);
        font-family: var(--pxd-font-sans, 'Urbanist', sans-serif);
        box-shadow: none;
        animation: none;
        opacity: 1;
        transform: none;
        transition: background 150ms ease, border-color 150ms ease;
    }

    #map-legend .pxd-legend-item:nth-child(-n+2) {
        flex-basis: calc(50% - 2px);
    }

    #map-legend .pxd-legend-dot,
    #map-legend .pxd-legend-item svg,
    #map-legend .pxd-legend-item i {
        grid-column: 1;
        grid-row: 1;
        transform: none;
    }

    #map-legend .pxd-legend-label {
        display: block;
        grid-column: 3;
        grid-row: 1;
        font-size: 12px;
        font-weight: 700;
        line-height: 1.25;
        text-align: center;
        text-transform: none;
        letter-spacing: 0;
        color: var(--pxd-primary, #0A3D3A);
    }

    #map-legend .pxd-legend-count {
        grid-column: 2;
        grid-row: 1;
        min-width: 18px;
        padding: 1px 2px;
        border-radius: 9999px;
        font-size: 11px;
        line-height: 1.3;
        text-align: center;
        color: var(--pxd-primary, #0A3D3A);
        background: rgba(30, 155, 82, 0.12);
    }

    #map-legend .pxd-legend-item:not(.active) {
        background: #f5f6f6;
        border-color: #d5dedd;
        box-shadow: none;
    }

    #map-legend .pxd-legend-item:not(.active) .pxd-legend-label,
    #map-legend .pxd-legend-item:not(.active) .pxd-legend-count {
        color: #526663;
    }

    #map-legend .pxd-legend-item:focus-visible {
        outline: 2px solid var(--pxd-secondary, #1E9B52);
        outline-offset: 2px;
    }

    #map-legend .pxd-legend-dot {
        width: 20px;
        height: 20px;
        border-radius: 6px;
    }
}

/* Shorter labels and badges keep three inline filters on even a 320px phone. */
@media (max-width: 360px) {
    #map-legend .pxd-legend-item {
        grid-template-columns: 18px max-content max-content;
        gap: 2px;
    }

    #map-legend .pxd-legend-dot {
        width: 18px;
        height: 18px;
    }

    #map-legend .pxd-legend-label {
        font-size: 11px;
    }

    #map-legend .pxd-legend-count {
        min-width: 16px;
        font-size: 10px;
    }
}

@supports (height: 100dvh) {
    @media (max-width: 768px) {
        .pxd-panel-right.pxd-map-full {
            height: min(90dvh, calc(100dvh - 72px)) !important;
        }
    }
}

@media (hover: hover) {
    .pxd-mobile-map-toggle:hover {
        background: linear-gradient(135deg, #0A3D3A, #178440);
        transform: translateY(-2px);
        box-shadow: 0 12px 28px rgba(1, 40, 39, 0.22), 0 4px 12px rgba(15, 163, 107, 0.16);
    }
}

.pxd-mobile-map-toggle:active {
    transform: scale(0.96);
}

@media (prefers-reduced-motion: reduce) {
    .pxd-mobile-map-toggle {
        transition: none;
    }

    .pxd-mobile-map-toggle:hover,
    .pxd-mobile-map-toggle:active {
        transform: none;
    }
}

/* Mobile scope selector shares Programme's calendar, inside a short glass sheet. */
.pxd-map-scope-trigger,
.pxd-map-scope-overlay {
    display: none;
}

@media (max-width: 768px) {
    #global-view-btn {
        display: none;
    }

    .pxd-map-scope-trigger {
        box-sizing: border-box;
        position: absolute;
        z-index: 1100;
        top: 8px;
        left: 56px;
        right: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        min-height: 44px;
        padding: 6px 10px;
        border: 1px solid var(--pxd-border-glass, rgba(255, 255, 255, 0.65));
        border-radius: var(--pxd-radius-full, 9999px);
        background: var(--pxd-glass-popup, rgba(255, 255, 255, 0.96));
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        box-shadow: 0 4px 12px rgba(1, 40, 39, 0.12);
        color: var(--pxd-primary, #0A3D3A);
        font: 700 13px/1.2 'Urbanist', sans-serif;
        cursor: pointer;
    }

    .pxd-map-scope-trigger::before,
    .pxd-map-scope-dialog::before {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: var(--pxd-gradient-reflet, linear-gradient(135deg, rgba(255, 255, 255, 0.4), transparent));
        opacity: 0.5;
        pointer-events: none;
    }

    .pxd-map-scope-label {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .pxd-map-scope-trigger svg,
    .pxd-map-scope-dialog svg {
        flex: none;
        width: 18px;
        height: 18px;
    }

    .pxd-map-scope-overlay:not([hidden]) {
        position: fixed;
        inset: 0;
        z-index: 20000;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        background: var(--pxd-backdrop, rgba(10, 61, 58, 0.35));
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
        animation: pxd-map-scope-fade 150ms ease;
    }

    .pxd-map-scope-dialog,
    .pxd-map-scope-dialog * {
        box-sizing: border-box;
    }

    .pxd-map-scope-dialog {
        position: relative;
        width: 100%;
        max-width: 520px;
        max-height: 80vh;
        overflow-y: auto;
        overscroll-behavior: contain;
        border: 1px solid var(--pxd-border-glass, rgba(255, 255, 255, 0.65));
        border-radius: var(--pxd-radius-lg, 16px) var(--pxd-radius-lg, 16px) 0 0;
        background: var(--pxd-glass-popup, rgba(255, 255, 255, 0.96));
        backdrop-filter: blur(24px);
        -webkit-backdrop-filter: blur(24px);
        box-shadow: var(--pxd-shadow-sheet, 0 -8px 32px rgba(1, 40, 39, 0.18));
        color: var(--pxd-primary, #0A3D3A);
        font-family: var(--pxd-font-sans, 'Urbanist', sans-serif);
        animation: pxd-map-scope-enter 250ms var(--pxd-ease-smooth, cubic-bezier(0.4, 0, 0.2, 1));
    }

    .pxd-map-scope-header {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 12px 16px 8px;
        border-bottom: 1px solid rgba(10, 61, 58, 0.06);
    }

    .pxd-map-scope-header h3 {
        margin: 0;
        font-size: 18px;
        font-weight: 700;
        color: var(--pxd-primary, #0A3D3A);
    }

    .pxd-map-scope-close,
    .pxd-map-scope-dialog .pxd-calendar-nav {
        display: grid;
        place-items: center;
        flex: none;
        width: 44px;
        height: 44px;
        padding: 8px;
        border: 0;
        border-radius: 9999px;
        background: var(--pxd-gray-50, #f5f7f7);
        color: var(--pxd-primary, #0A3D3A);
        cursor: pointer;
    }

    .pxd-map-scope-body {
        position: relative;
        padding: 12px 12px calc(16px + env(safe-area-inset-bottom, 0px));
    }

    .pxd-map-scope-all {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        min-height: 44px;
        margin: 0 0 12px;
        padding: 10px 16px;
        border: 1px solid rgba(30, 155, 82, 0.2);
        border-radius: var(--pxd-radius-full, 9999px);
        background: var(--pxd-tint-secondary-8, rgba(30, 155, 82, 0.08));
        color: var(--pxd-primary, #0A3D3A);
        font: 700 14px/1.2 'Urbanist', sans-serif;
        cursor: pointer;
    }

    .pxd-map-scope-all.active,
    .pxd-map-scope-dialog .pxd-cal-day.selected {
        background: var(--pxd-gradient, linear-gradient(135deg, #0A3D3A, #1E9B52));
        color: #fff;
        box-shadow: 0 3px 10px rgba(30, 155, 82, 0.25);
    }

    .pxd-map-scope-dialog .pxd-calendar-nav:disabled {
        background: var(--pxd-gray-50, #f5f7f7);
        color: var(--pxd-gray-300, #b8c5c5);
        opacity: 1;
        cursor: default;
        transform: none;
        box-shadow: none;
    }

    .pxd-map-scope-dialog .pxd-calendar-title {
        color: var(--pxd-primary, #0A3D3A);
    }

    .pxd-map-scope-dialog .pxd-cal-day:disabled {
        background: transparent;
        color: var(--pxd-gray-300, #b8c5c5);
        opacity: 1;
        cursor: default;
        box-shadow: none;
    }

    .pxd-map-scope-dialog .pxd-calendar-header {
        margin-bottom: 8px;
    }

    .pxd-map-scope-dialog .pxd-calendar-days {
        gap: 3px;
    }

    .pxd-map-scope-dialog .pxd-cal-day {
        width: 100%;
        height: 44px;
        min-height: 44px;
        padding: 4px;
        font-size: 14px;
        border-radius: 8px;
    }

    .pxd-map-scope-dialog .pxd-cal-day.in-range:not(.selected) {
        background: var(--pxd-tint-secondary-8, rgba(30, 155, 82, 0.08));
        color: var(--pxd-primary, #0A3D3A);
    }

    .pxd-map-scope-dialog button,
    .pxd-map-scope-trigger {
        transition: background 150ms ease, transform 150ms var(--pxd-ease-bounce, cubic-bezier(0.34, 1.56, 0.64, 1)), box-shadow 150ms ease;
    }

    .pxd-map-scope-dialog button:focus-visible,
    .pxd-map-scope-trigger:focus-visible {
        outline: 2px solid var(--pxd-secondary, #1E9B52);
        outline-offset: 2px;
    }

    .pxd-map-scope-dialog button:not(:disabled):active,
    .pxd-map-scope-trigger:active {
        transform: scale(0.96);
    }
}

@supports (max-height: 80dvh) {
    @media (max-width: 768px) {
        .pxd-map-scope-dialog { max-height: 80dvh; }
    }
}

@media (max-width: 768px) and (hover: hover) {
    .pxd-map-scope-dialog button:not(:disabled):hover,
    .pxd-map-scope-trigger:hover {
        background: var(--pxd-tint-secondary-15, rgba(30, 155, 82, 0.15));
        color: var(--pxd-primary, #0A3D3A);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(15, 163, 107, 0.15);
    }

    .pxd-map-scope-trigger:hover::before {
        opacity: 0.9;
    }
}

@keyframes pxd-map-scope-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes pxd-map-scope-enter {
    from { opacity: 0; transform: translateY(20%); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .pxd-map-scope-overlay,
    .pxd-map-scope-dialog {
        animation: none !important;
    }

    .pxd-map-scope-dialog button,
    .pxd-map-scope-trigger {
        transition: none;
        transform: none !important;
    }
}

/* ══════════════════════════════════════════════════════════════════
   50 : adaptateurs des modales d'éléments (items-adapters.js, chantier C54 élargi)
   Zones éditables des cartes, squelettes d'enrichissement, badges, « + » du programme,
   toast à plusieurs actions. Rien de ceci n'est rendu sans le composant PixidiaItemModal
   (cohorte item_modals) : ces règles ne touchent pas la page hors cohorte, sauf le toast
   à plusieurs actions, qui n'existe pas ailleurs. Pas de @layer (piège P26).
   ══════════════════════════════════════════════════════════════════ */

/* ── Zones éditables : de vrais boutons, au rendu de la valeur qu'ils portent ──
   Spécificité volontairement basse (0,2,2) pour le fond et l'espacement : les classes de
   cartes (.pxdc-cell, .pxdc-meta-pill… en 0,3,1) gardent leur apparence d'origine. */
body.pxd-itinerary-single button.pxdim-zone {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-align: left;
  text-transform: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
body.pxd-itinerary-single .pxdc-card button.pxdim-zone.pxdc-cell { width: 100%; align-items: stretch; }
body.pxd-itinerary-single .pxdc-card button.pxdim-zone.pxdc-leg { display: block; width: 100%; }
body.pxd-itinerary-single .pxdc-card button.pxdim-zone.pxdc-price { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 4px 22px 4px 6px; margin: -4px 0 -4px -6px; border-radius: 10px; }
body.pxd-itinerary-single .pxdc-card button.pxdim-zone.pxdc-extra { display: inline-flex; align-items: center; gap: 5px; padding: 2px 4px; margin-right: -4px; border-radius: 7px; }
body.pxd-itinerary-single .pxdc-card button.pxdim-zone.pxdc-meta-pill { display: inline-flex; }
body.pxd-itinerary-single .pxdc-card button.pxdim-zone.pxdc-endpoint-when { display: flex; flex-direction: column; gap: 3px; align-items: inherit; width: 100%; padding: 2px 0; border-radius: 8px; }
body.pxd-itinerary-single .pxdc-card .pxdc-endpoint:last-child button.pxdim-zone.pxdc-endpoint-when { align-items: flex-end; text-align: right; }
body.pxd-itinerary-single .pxdc-card button.pxdim-zone.pxdc-endpoint-when b { font-size: 13.5px; font-weight: 700; }
body.pxd-itinerary-single .pxdc-card button.pxdim-zone.pxdc-endpoint-when > span { font-size: 10.5px; color: var(--pc-label); }
body.pxd-itinerary-single .pxdc-card button.pxdim-zone.pxdc-leg-meta-zone { display: inline-flex; flex-wrap: wrap; gap: 5px 8px; align-items: center; padding: 2px 4px; margin: -2px -4px; border-radius: 7px; font-size: 10.5px; color: var(--pc-muted); }
body.pxd-itinerary-single .pxdc-card .pxdim-rental-when { display: block; margin: 6px 0 0; font-size: 12.5px; font-weight: 700; line-height: 1.4; }

/* Crayon : absent au repos sur bureau, révélé au survol ou au focus ; discret mais permanent au tactile. */
body.pxd-itinerary-single .pxdc-card button.pxdim-zone .pxdim-zone-pen {
  width: 11px;
  height: 11px;
  margin-left: 4px;
  color: var(--pc-green, #178440);
  opacity: 0;
  transition: opacity .15s ease;
  flex-shrink: 0;
}
body.pxd-itinerary-single .pxdc-card button.pxdim-zone:is(.pxdc-cell, .pxdc-leg, .pxdc-price) > .pxdim-zone-pen {
  position: absolute;
  top: 7px;
  right: 7px;
  margin: 0;
}
body.pxd-itinerary-single .pxdc-card .pxdim-zone-empty { color: var(--pc-green, #178440); font-weight: 700; }
body.pxd-itinerary-single .pxdc-card :is(.pxdc-price--empty .pxdc-cost, .pxdim-meal .pxdim-zone-empty) { font-size: 13px; }

@media (hover: hover) {
  body.pxd-itinerary-single .pxdc-card button.pxdim-zone:hover .pxdim-zone-pen,
  body.pxd-itinerary-single .pxdc-card button.pxdim-zone:focus-visible .pxdim-zone-pen { opacity: .9; }
  body.pxd-itinerary-single .pxdc-card button.pxdim-zone:hover :is(.pxdc-value, .pxdc-cost, b, strong, span:not(.pxdc-label):not(.pxdim-zone-empty)) {
    text-decoration: underline dotted rgba(15, 163, 107, .55);
    text-underline-offset: 3px;
  }
  body.pxd-itinerary-single .pxdc-card button.pxdim-zone:is(.pxdc-price, .pxdc-extra, .pxdc-endpoint-when, .pxdc-leg-meta-zone):hover { background: rgba(15, 163, 107, .06); }
  body.pxd-itinerary-single .pxdc-card button.pxdim-zone.pxdc-cell:hover { background: rgba(240, 250, 245, .96); }
}

@media (hover: none), (pointer: coarse) {
  body.pxd-itinerary-single .pxdc-card button.pxdim-zone .pxdim-zone-pen { opacity: .45; }
  /* Cible tactile d'au moins 44 px : hauteur réelle pour les cellules, zone de toucher élargie
     (pseudo-élément) pour les pastilles en ligne, sans gonfler la carte. */
  body.pxd-itinerary-single .pxdc-card button.pxdim-zone.pxdc-cell { min-height: 44px; }
  body.pxd-itinerary-single .pxdc-card button.pxdim-zone:is(.pxdc-extra, .pxdc-meta-pill, .pxdc-leg-meta-zone, .pxdc-endpoint-when, .pxdc-price)::after {
    content: '';
    position: absolute;
    inset: -11px -4px;
  }
}

/* ── Mentions sous le titre : hors séjour, note, échec discret, proposition d'horaires ── */
body.pxd-itinerary-single .pxdc-card .pxdim-notes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; margin-top: -2px; }
body.pxd-itinerary-single .pxdc-card .pxdim-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 24px;
  padding: 3px 9px;
  border-radius: 9999px;
  font: 700 11px/1.3 Urbanist, sans-serif;
  letter-spacing: 0;
  white-space: normal;
}
body.pxd-itinerary-single .pxdc-card .pxdim-badge--out { background: rgba(236, 171, 0, .16); color: #8a5a00; }
body.pxd-itinerary-single .pxdc-card button.pxdim-badge { appearance: none; margin: 0; cursor: pointer; text-align: left; }
body.pxd-itinerary-single .pxdc-card button.pxdim-badge--action { border: 1px solid rgba(15, 163, 107, .3); background: #fff; color: #137a3c; }
body.pxd-itinerary-single .pxdc-card button.pxdim-badge--proposal { border: 1px solid rgba(25, 118, 210, .28); background: rgba(25, 118, 210, .08); color: #1565c0; padding: 3px 9px; }
body.pxd-itinerary-single .pxdc-card button.pxdim-badge--proposal .pxdim-zone-pen { display: none; }
@media (hover: hover) {
  body.pxd-itinerary-single .pxdc-card button.pxdim-badge--action:hover { background: rgba(15, 163, 107, .08); }
  body.pxd-itinerary-single .pxdc-card button.pxdim-badge--proposal:hover { background: rgba(25, 118, 210, .14); }
}
@media (pointer: coarse) {
  body.pxd-itinerary-single .pxdc-card button.pxdim-badge { position: relative; }
  body.pxd-itinerary-single .pxdc-card button.pxdim-badge::after { content: ''; position: absolute; inset: -10px -4px; }
}
body.pxd-itinerary-single .pxdc-card .pxdim-rating { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--pc-fg); }
body.pxd-itinerary-single .pxdc-card .pxdim-rating svg { width: 12px; height: 12px; color: #f5a400; fill: #f5a400; }
body.pxd-itinerary-single .pxdc-card .pxdim-rating small { font-size: 11px; font-weight: 600; color: var(--pc-label); }
body.pxd-itinerary-single .pxdc-card .pxdim-note { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; color: var(--pc-muted); }
body.pxd-itinerary-single .pxdc-card .pxdim-note svg { width: 11px; height: 11px; }

/* ── Squelettes : seulement sur les blocs encore inconnus (photo, note), jamais infinis ── */
@keyframes pxdim-skel-shine { from { background-position: 150% 0; } to { background-position: -50% 0; } }
body.pxd-itinerary-single .pxdc-card .pxdim-skel,
body.pxd-itinerary-single .pxdc-card .pxdim-skel--rating {
  background: linear-gradient(100deg, rgba(10, 61, 58, .06) 30%, rgba(255, 255, 255, .65) 50%, rgba(10, 61, 58, .06) 70%);
  background-size: 200% 100%;
  animation: pxdim-skel-shine 1.4s ease-in-out infinite;
}
body.pxd-itinerary-single .pxdc-card .pxdim-skel-photos { background: transparent; }
body.pxd-itinerary-single .pxdc-card .pxdim-skel-photos .pxdc-photo::after { display: none; }
body.pxd-itinerary-single .pxdc-card .pxdim-skel--rating { display: inline-block; width: 72px; height: 14px; border-radius: 7px; }

/* ── « + » du jour affiché du programme ── */
body.pxd-itinerary-single .pxd-programme-day-info .pxdim-day-add {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid rgba(15, 163, 107, .3);
  border-radius: 9999px;
  background: rgba(255, 255, 255, .9);
  color: #137a3c;
  font: 700 12.5px/1 Urbanist, sans-serif;
  cursor: pointer;
  transition: background .18s ease, box-shadow .18s ease, color .18s ease;
}
body.pxd-itinerary-single .pxd-programme-day-info .pxdim-day-add[hidden] { display: none; }
body.pxd-itinerary-single .pxd-programme-day-info .pxdim-day-add svg { width: 14px; height: 14px; }
body.pxd-itinerary-single .pxd-programme-day-info .pxdim-day-add:hover,
body.pxd-itinerary-single .pxd-programme-day-info .pxdim-day-add:focus-visible {
  background-image: var(--pxd-active-grad, linear-gradient(135deg, #0fa36b 25%, #38c19c 100%));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 12px rgba(15, 163, 107, .25);
  outline: 0;
}
@media (pointer: coarse) {
  body.pxd-itinerary-single .pxd-programme-day-info .pxdim-day-add { min-height: 44px; }
}
@media (max-width: 480px) {
  body.pxd-itinerary-single .pxd-programme-day-info .pxdim-day-add { margin-left: 0; }
}

/* ── Toast à plusieurs actions (« Ajouter un autre », « Annuler », « Étendre le voyage ») ── */
body .pxd-toast.pxd-toast--actions { flex-wrap: wrap; row-gap: 8px; max-width: min(560px, calc(100vw - 32px)); }
body .pxd-toast.pxd-toast--actions .pxd-toast-msg { white-space: normal; flex: 1 1 200px; }
body .pxd-toast .pxd-toast-buttons { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
body .pxd-toast .pxd-toast-undo--primary {
  background: linear-gradient(135deg, #0fa36b 25%, #38c19c 100%);
  border-color: transparent;
  color: #fff;
}
@media (max-width: 480px) {
  body .pxd-toast.pxd-toast--actions .pxd-toast-buttons { width: 100%; margin-left: 0; }
  body .pxd-toast.pxd-toast--actions .pxd-toast-undo { flex: 1 1 auto; justify-content: center; min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  body.pxd-itinerary-single .pxdc-card .pxdim-skel,
  body.pxd-itinerary-single .pxdc-card .pxdim-skel--rating { animation: none; }
  body.pxd-itinerary-single .pxdc-card button.pxdim-zone .pxdim-zone-pen,
  body.pxd-itinerary-single .pxd-programme-day-info .pxdim-day-add { transition: none; }
}

/* Cibles tactiles (spec-ajout §11, WCAG 2.5.5) : au doigt, chaque zone éditable offre au moins 44 × 44 px.
   La boîte grandit vraiment (pas une zone fantôme) pour que le geste corresponde à ce qu'on voit. */
@media (pointer: coarse) {
  body.pxd-itinerary-single .pxdc-card button.pxdim-zone {
    min-height: 44px;
    min-width: 44px;
  }
  body.pxd-itinerary-single .pxdc-card button.pxdim-zone:is(.pxdc-extra, .pxdc-meta-pill, .pxdc-leg-meta-zone, .pxdc-price) {
    display: inline-flex;
    align-items: center;
  }
  body.pxd-itinerary-single .pxdc-card button.pxdim-zone.pxdc-cell { justify-content: center; }
}

/* Bouton « Programmer » de la wishlist : 44 × 44 px au doigt (il ne faisait que 30). */
@media (pointer: coarse) {
  body.pxd-itinerary-single #pxd-wishlist .pxd-wishlist-plan-btn { min-width: 44px; min-height: 44px; }
}

/* ============================================
   51. CARTE V2 DE PIXI (S14), derriere l'option `pixi_v2_map`
   Tout est sous body.pxd-map-v2-on, classe posee par bindings.js (initMapV2) seulement si pxd.config.mapV2 === true :
   option eteinte, aucune regle de ce fichier ne s'applique. Une regle par ligne (LiteSpeed). Verre blanc .82 + flou + filet
   (--tint-bd), jour actif en degrade du bouton principal, cinq etats par interactif (conflicts.md P21).
   ============================================ */
body.pxd-map-v2-on .pxd-map-days{position:absolute;top:12px;left:12px;z-index:600;display:flex;align-items:center;gap:2px;max-width:calc(100% - 64px);overflow-x:auto;padding:4px;border-radius:9999px;border:1px solid rgba(10,61,58,.1);background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);box-shadow:0 10px 24px -10px rgba(15,163,107,.38),0 1px 3px rgba(10,61,58,.1);scrollbar-width:none;-webkit-overflow-scrolling:touch;}
body.pxd-map-v2-on .pxd-map-days::-webkit-scrollbar{display:none;}
body.pxd-map-v2-on .pxd-map-day-chip{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;height:32px;padding:0 12px;margin:0;border-radius:9999px;border:0;background:transparent;color:#0A3D3A;font:700 13px/normal Urbanist,system-ui,sans-serif;white-space:nowrap;cursor:pointer;box-shadow:none;transition:transform .3s cubic-bezier(.34,1.56,.64,1),background .2s,color .2s;}
body.pxd-map-v2-on .pxd-map-day-chip:not([data-day="all"]){min-width:38px;padding:0;}
body.pxd-map-v2-on .pxd-map-day-chip:hover,body.pxd-map-v2-on .pxd-map-day-chip:focus,body.pxd-map-v2-on .pxd-map-day-chip:focus-visible{background:rgba(10,61,58,.06);color:#0A3D3A;box-shadow:none;}
body.pxd-map-v2-on .pxd-map-day-chip:focus-visible{outline:2px solid #0fa36b;outline-offset:-1px;}
body.pxd-map-v2-on .pxd-map-day-chip:active{transform:scale(.96);background:rgba(10,61,58,.1);color:#0A3D3A;}
body.pxd-map-v2-on .pxd-map-day-chip.is-active,body.pxd-map-v2-on .pxd-map-day-chip.is-active:hover,body.pxd-map-v2-on .pxd-map-day-chip.is-active:focus,body.pxd-map-v2-on .pxd-map-day-chip.is-active:focus-visible,body.pxd-map-v2-on .pxd-map-day-chip.is-active:active{background:linear-gradient(135deg,#0A3D3A,#1E9B52);color:#fff;box-shadow:0 4px 10px rgba(30,155,82,.3);}
body.pxd-map-v2-on .pxd-map-day-chip__i{display:inline-flex;}
body.pxd-map-v2-on .pxd-map-day-chip__d{display:none;font-weight:600;opacity:.8;}
body.pxd-map-v2-on .pxd-map-scope-info{position:absolute;top:56px;left:12px;z-index:600;margin:0;display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 11px;border-radius:9999px;background:rgba(255,255,255,.8);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(10,61,58,.08);font:600 12px/normal Urbanist,system-ui,sans-serif;color:#5d7070;white-space:nowrap;pointer-events:none;}
body.pxd-map-v2-on .pxd-map-scope-info[hidden],body.pxd-map-v2-on .pxd-map-offscreen[hidden],body.pxd-map-v2-on .pxd-map-day-empty[hidden],body.pxd-map-v2-on .pxd-map-trip-empty[hidden],body.pxd-map-v2-on .pxd-map-days[hidden]{display:none;}
/* Trois blocs de verre a droite (S14-01) : Recentrer, Tracés, zoom (+ et −). Chacun son filet, 8 px entre eux. */
body.pxd-map-v2-on .pxd-map-controls{gap:8px;background:transparent;border:0;box-shadow:none;overflow:visible;-webkit-backdrop-filter:none;backdrop-filter:none;}
body.pxd-map-v2-on .pxd-map-controls>.pxd-map-btn,body.pxd-map-v2-on .pxd-map-zoom{position:relative;display:flex;flex-direction:column;overflow:hidden;margin:0;padding:0;border-radius:12px;border:1px solid rgba(15,163,107,.2);background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 8px 20px -8px rgba(15,163,107,.4),inset 0 1px 0 rgba(255,255,255,.9);}
body.pxd-map-v2-on .pxd-map-controls .pxd-map-btn{display:grid;place-items:center;width:40px;height:40px;color:#012827;cursor:pointer;transition:background .2s,transform .3s cubic-bezier(.34,1.56,.64,1);}
body.pxd-map-v2-on .pxd-map-zoom .pxd-map-btn{border:0;border-radius:0;background:transparent;box-shadow:none;}
body.pxd-map-v2-on .pxd-map-zoom .pxd-map-btn + .pxd-map-btn{border-top:1px solid rgba(10,61,58,.09);}
body.pxd-map-v2-on .pxd-map-controls .pxd-map-btn:hover,body.pxd-map-v2-on .pxd-map-controls .pxd-map-btn:focus,body.pxd-map-v2-on .pxd-map-controls .pxd-map-btn:focus-visible{background:rgba(15,163,107,.1);color:#0f6b3a;}
body.pxd-map-v2-on .pxd-map-controls .pxd-map-btn:focus-visible{outline:2px solid #0fa36b;outline-offset:-3px;}
body.pxd-map-v2-on .pxd-map-controls .pxd-map-btn:active{transform:scale(.94);background:rgba(15,163,107,.16);color:#0f6b3a;}
body.pxd-map-v2-on .pxd-map-controls>.pxd-map-btn.active,body.pxd-map-v2-on .pxd-map-controls>.pxd-map-btn.active:hover,body.pxd-map-v2-on .pxd-map-controls>.pxd-map-btn.active:focus,body.pxd-map-v2-on .pxd-map-controls>.pxd-map-btn.active:focus-visible{background:rgba(15,163,107,.14);color:#0f6b3a;}
/* Tracés masqués (S14-03) : le bouton passe a l'etat eteint, trait barre sur l'icone */
body.pxd-map-v2-on .pxd-map-controls>.pxd-map-btn:not(.active)::after{content:"";position:absolute;left:9px;right:9px;top:50%;height:2px;border-radius:2px;background:currentColor;transform:rotate(-45deg);pointer-events:none;}
/* Controles eteints tant que la carte n'est pas la (S14-03) : grises, jamais caches */
body.pxd-map-v2-on .pxd-map-container:has(.pxd-map-loading:not([hidden]):not([data-state="error"])) .pxd-map-controls{pointer-events:none;}
body.pxd-map-v2-on .pxd-map-container:has(.pxd-map-loading:not([hidden]):not([data-state="error"])) .pxd-map-controls .pxd-map-btn{color:rgba(10,61,58,.4);}
body.pxd-map-v2-on .pxd-map-container:has(.pxd-map-loading:not([hidden]):not([data-state="error"])) .pxd-map-controls{visibility:visible;}
/* Legende-filtres (S14-01) : disque de la categorie avec son glyphe blanc, libelle en minuscules, compteur en pastille ; categorie desactivee = libelle barre */
body.pxd-map-v2-on .pxd-map-legend{justify-content:flex-start;border-radius:20px;padding:6px;gap:4px 2px;background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);border:1px solid rgba(10,61,58,.1);box-shadow:0 10px 24px -10px rgba(15,163,107,.38),0 1px 3px rgba(10,61,58,.1);}
body.pxd-map-v2-on .pxd-legend-item{grid-template-columns:22px auto auto;gap:0 7px;min-height:0;height:32px;padding:0 6px 0 5px;border-radius:9999px;box-shadow:0 1px 2px rgba(10,61,58,.08);background:#fff;border:1px solid rgba(10,61,58,.09);}
body.pxd-map-v2-on .pxd-legend-dot{width:22px;height:22px;border-radius:9999px;}
body.pxd-map-v2-on .pxd-legend-item svg,body.pxd-map-v2-on .pxd-legend-item i{grid-column:1;grid-row:1;justify-self:center;align-self:center;width:13px;height:13px;color:#fff;z-index:2;}
body.pxd-map-v2-on .pxd-legend-label{grid-column:2;grid-row:1;text-transform:none;letter-spacing:0;font:700 12.5px/1.2 Urbanist,system-ui,sans-serif;color:#0A3D3A;}
body.pxd-map-v2-on .pxd-legend-count{grid-column:3;grid-row:1;box-sizing:border-box;min-width:20px;height:20px;padding:0 6px;border-radius:9999px;display:inline-grid;place-items:center;background:rgba(10,61,58,.07);font:800 11.5px/1 Urbanist,system-ui,sans-serif;font-variant-numeric:tabular-nums;color:#0A3D3A;}
body.pxd-map-v2-on .pxd-legend-item:not(.active) .pxd-legend-label{text-decoration:line-through;text-decoration-thickness:1.5px;color:#586e6b;}
body.pxd-map-v2-on .pxd-legend-item:focus-visible{outline:2px solid #0fa36b;outline-offset:2px;}
/* Puce « hors cadre » : le repere trop loin du sejour, nom, distance, direction, fleche */
body.pxd-map-v2-on .pxd-map-offscreen{position:absolute;left:12px;top:98px;z-index:600;max-width:calc(100% - 84px);display:inline-flex;align-items:center;gap:9px;height:44px;padding:0 12px 0 6px;margin:0;border-radius:9999px;border:1px solid rgba(10,61,58,.1);background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);color:#0A3D3A;font:600 12.5px/1.2 Urbanist,system-ui,sans-serif;text-align:left;cursor:pointer;box-shadow:0 10px 24px -10px rgba(15,163,107,.38),0 1px 3px rgba(10,61,58,.1);transition:transform .3s cubic-bezier(.34,1.56,.64,1);}
body.pxd-map-v2-on .pxd-map-offscreen__n{flex:none;width:32px;height:32px;border-radius:9999px;display:grid;place-items:center;background:#1976d2;color:#fff;font-size:13px;font-weight:800;box-shadow:0 0 0 2px #fff;}
body.pxd-map-v2-on .pxd-map-offscreen[data-cat="logement"] .pxd-map-offscreen__n{background:#388e3c;}
body.pxd-map-v2-on .pxd-map-offscreen[data-cat="restauration"] .pxd-map-offscreen__n{background:#d32f2f;}
body.pxd-map-v2-on .pxd-map-offscreen[data-cat="activite"] .pxd-map-offscreen__n{background:#ff9800;color:#4a2c00;}
body.pxd-map-v2-on .pxd-map-offscreen[data-cat="location"] .pxd-map-offscreen__n{background:#9c27b0;}
body.pxd-map-v2-on .pxd-map-offscreen__x{display:flex;flex-direction:column;min-width:0;line-height:1.2;}
body.pxd-map-v2-on .pxd-map-offscreen__t{display:block;font-size:12.5px;font-weight:800;color:#0A3D3A;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
body.pxd-map-v2-on .pxd-map-offscreen__d{display:block;font-size:11.5px;font-weight:500;color:#5d7070;}
body.pxd-map-v2-on .pxd-map-offscreen:hover,body.pxd-map-v2-on .pxd-map-offscreen:focus,body.pxd-map-v2-on .pxd-map-offscreen:focus-visible{background:#fff;color:#012827;border-color:rgba(15,163,107,.2);transform:translateY(-1px);box-shadow:0 8px 20px -10px rgba(15,163,107,.5);}
body.pxd-map-v2-on .pxd-map-offscreen:focus-visible{outline:2px solid #0fa36b;outline-offset:2px;}
body.pxd-map-v2-on .pxd-map-offscreen:active{transform:scale(.97);background:#fff;color:#012827;}
/* Fleche de la puce « hors cadre » : fleche pleine (avec sa queue), tournee vers la direction */
body.pxd-map-v2-on .pxd-map-offscreen__a{flex:none;color:#5d7070;margin-left:2px;transform:rotate(-135deg);}
body.pxd-map-v2-on .pxd-map-offscreen[data-dir="nord-est"] .pxd-map-offscreen__a{transform:rotate(-45deg);}
body.pxd-map-v2-on .pxd-map-offscreen[data-dir="est"] .pxd-map-offscreen__a{transform:rotate(0deg);}
body.pxd-map-v2-on .pxd-map-offscreen[data-dir="sud-est"] .pxd-map-offscreen__a{transform:rotate(45deg);}
body.pxd-map-v2-on .pxd-map-offscreen[data-dir="sud"] .pxd-map-offscreen__a{transform:rotate(90deg);}
body.pxd-map-v2-on .pxd-map-offscreen[data-dir="sud-ouest"] .pxd-map-offscreen__a{transform:rotate(135deg);}
body.pxd-map-v2-on .pxd-map-offscreen[data-dir="ouest"] .pxd-map-offscreen__a{transform:rotate(180deg);}
body.pxd-map-v2-on .pxd-map-offscreen[data-dir="nord"] .pxd-map-offscreen__a{transform:rotate(-90deg);}
body.pxd-map-v2-on .pxd-map-offscreen[data-dir="nord-ouest"] .pxd-map-offscreen__a{transform:rotate(-135deg);}
/* Etats : jour sans repere, voyage sans aucun lieu */
body.pxd-map-v2-on .pxd-map-day-empty,body.pxd-map-v2-on .pxd-map-trip-empty{position:absolute;left:50%;z-index:600;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;text-align:center;border-radius:20px;background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);border:1px solid rgba(1,40,39,.09);box-shadow:0 20px 48px -22px rgba(15,163,107,.3),0 2px 8px rgba(15,163,107,.05),inset 0 1px 0 rgba(255,255,255,.9);color:#0A3D3A;}
body.pxd-map-v2-on .pxd-map-day-empty{top:50%;width:min(300px,calc(100% - 24px));padding:18px 22px;transform:translate(-50%,-50%);}
body.pxd-map-v2-on .pxd-map-trip-empty{top:calc(50% - 150px);width:min(380px,calc(100% - 24px));padding:26px 28px 24px;transform:translateX(-50%);}
body.pxd-map-v2-on .pxd-map-day-empty strong,body.pxd-map-v2-on .pxd-map-trip-empty strong{display:block;margin:4px 0 0;font:800 15px/normal Urbanist,system-ui,sans-serif;}
body.pxd-map-v2-on .pxd-map-trip-empty strong{margin-top:8px;font-size:17px;letter-spacing:-.01em;}
body.pxd-map-v2-on .pxd-map-day-empty p,body.pxd-map-v2-on .pxd-map-trip-empty p{margin:4px 0 0;font:500 13px/1.45 Urbanist,system-ui,sans-serif;color:#5d7070;}
body.pxd-map-v2-on .pxd-map-trip-empty p{margin-top:6px;max-width:32ch;font-size:13.5px;line-height:1.5;text-wrap:pretty;}
body.pxd-map-v2-on .pxd-map-container:has(.pxd-map-trip-empty:not([hidden])) .pxd-map-canvas::after{content:"";position:absolute;inset:0;z-index:450;background:rgba(247,249,248,.55);pointer-events:none;}
body.pxd-map-v2-on .pxd-map-trip-empty__cta{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:38px;padding:0 18px;margin:16px 0 0;border:0;border-radius:12px;background:linear-gradient(135deg,#0A3D3A,#1E9B52);color:#fff;font:700 13.5px/normal Urbanist,system-ui,sans-serif;box-shadow:0 6px 16px rgba(30,155,82,.25);cursor:pointer;transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s;}
body.pxd-map-v2-on .pxd-map-trip-empty__cta:hover,body.pxd-map-v2-on .pxd-map-trip-empty__cta:focus,body.pxd-map-v2-on .pxd-map-trip-empty__cta:focus-visible{background:linear-gradient(135deg,#0A3D3A,#1E9B52);color:#fff;transform:translateY(-2px);box-shadow:0 10px 24px rgba(30,155,82,.4);}
body.pxd-map-v2-on .pxd-map-trip-empty__cta:focus-visible{outline:2px solid #0fa36b;outline-offset:2px;}
body.pxd-map-v2-on .pxd-map-trip-empty__cta:active{transform:scale(.96);}
/* Chargement et carte non demarree (S14-03) : carte blanche centree avec Pixi ; barres grisees pendant le chargement, absentes si la carte n'a pas demarre */
body.pxd-map-v2-on .pxd-map-loading,body.pxd-map-v2-on .pxd-map-loading[data-state="error"]{inset:calc(50% - 132px) auto auto 50%;transform:translateX(-50%);box-sizing:border-box;width:min(360px,calc(100% - 24px));padding:26px 28px 24px;gap:0;border:1px solid rgba(1,40,39,.09);border-radius:20px;background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);box-shadow:0 20px 48px -22px rgba(15,163,107,.3),0 2px 8px rgba(15,163,107,.05),inset 0 1px 0 rgba(255,255,255,.9);}
body.pxd-map-v2-on .pxd-map-loading::before{display:none;}
body.pxd-map-v2-on .pxd-map-loading:not([data-state="error"])::after{content:"";width:7px;height:7px;margin:16px 26px 0 0;border-radius:9999px;background:rgba(30,155,82,.9);box-shadow:13px 0 0 rgba(30,155,82,.55),26px 0 0 rgba(30,155,82,.25);}
body.pxd-map-v2-on .pxd-map-container:has(.pxd-map-loading:not([hidden])){background:linear-gradient(rgba(10,61,58,.06) 1px,transparent 1px) 0 0/56px 56px,linear-gradient(90deg,rgba(10,61,58,.06) 1px,transparent 1px) 0 0/56px 56px,radial-gradient(55% 55% at 10% 6%,rgba(32,201,184,.15),rgba(32,201,184,0) 70%),radial-gradient(45% 50% at 90% 16%,rgba(61,190,115,.16),rgba(61,190,115,0) 70%),radial-gradient(55% 55% at 70% 100%,rgba(61,190,115,.13),rgba(61,190,115,0) 70%),#f7f9f8;}
body.pxd-map-v2-on .pxd-map-container:has(.pxd-map-loading:not([hidden])) .pxd-map-canvas{visibility:hidden;}
body.pxd-map-v2-on .pxd-map-loading p{max-width:30ch;margin:6px 0 0;font:500 13.5px/1.5 Urbanist,system-ui,sans-serif;color:#5d7070;text-align:center;text-wrap:pretty;}
body.pxd-map-v2-on .pxd-map-loading .pxd-map-state-mascot{width:84px;height:84px;margin:0 auto;}
body.pxd-map-v2-on .pxd-map-loading .pxd-map-state-mascot--confused,body.pxd-map-v2-on .pxd-map-loading[data-state="error"] .pxd-map-state-mascot--thinking{display:none;}
body.pxd-map-v2-on .pxd-map-loading[data-state="error"] .pxd-map-state-mascot--confused{display:block;}
body.pxd-map-v2-on .pxd-map-container:has(.pxd-map-loading:not([hidden]):not([data-state="error"])) .pxd-map-days>*,body.pxd-map-v2-on .pxd-map-container:has(.pxd-map-loading:not([hidden]):not([data-state="error"])) .pxd-map-legend>*{pointer-events:none;color:transparent;background:linear-gradient(135deg,rgba(10,61,58,.08),rgba(10,61,58,.03));border-color:transparent;box-shadow:none;}
body.pxd-map-v2-on .pxd-map-container:has(.pxd-map-loading:not([hidden]):not([data-state="error"])) .pxd-map-days>*>*,body.pxd-map-v2-on .pxd-map-container:has(.pxd-map-loading:not([hidden]):not([data-state="error"])) .pxd-map-legend>*>*{visibility:hidden;}
body.pxd-map-v2-on .pxd-map-container:has(.pxd-map-loading:not([hidden])) .pxd-map-scope-info,body.pxd-map-v2-on .pxd-map-container:has(.pxd-map-loading:not([hidden])) .pxd-map-offscreen,body.pxd-map-v2-on .pxd-map-container:has(.pxd-map-loading:not([hidden])) .pxd-map-day-empty,body.pxd-map-v2-on .pxd-map-container:has(.pxd-map-loading:not([hidden])) .pxd-map-trip-empty{display:none;}
body.pxd-map-v2-on .pxd-map-container:has(.pxd-map-loading[data-state="error"]:not([hidden])) .pxd-map-days,body.pxd-map-v2-on .pxd-map-container:has(.pxd-map-loading[data-state="error"]:not([hidden])) .pxd-map-legend{display:none;}
/* Rond de depart ou d'arrivee d'un trace dont le repere est masque par le filtre du jour (S14-01) : petit rond blanc a filet de la categorie */
body.pxd-map-v2-on .pxd-route-anchor{background:transparent;border:0;}
body.pxd-map-v2-on .pxd-route-anchor span{display:block;box-sizing:border-box;width:14px;height:14px;border-radius:9999px;background:#fff;border:3px solid #666;box-shadow:0 0 0 2px rgba(255,255,255,.85),0 3px 8px rgba(1,40,39,.25);}
/* Etats avec Pixi (S14-03) : chargement, carte non demarree, jour sans repere, voyage sans lieu */
body.pxd-map-v2-on .pxd-map-state-mascot{display:block;width:84px;height:84px;object-fit:contain;margin:0 auto;filter:drop-shadow(0 8px 12px rgba(10,61,58,.18));}
body.pxd-map-v2-on .pxd-map-day-empty .pxd-map-state-mascot{width:64px;height:64px;filter:none;}
body.pxd-map-v2-on .pxd-map-loading[data-state="error"] .pxd-map-loading-mark{display:block;}
body.pxd-map-v2-on .pxd-map-loading-mark{display:block;width:auto;height:auto;border:0;background:transparent;box-shadow:none;border-radius:0;}
body.pxd-map-v2-on .pxd-map-loading strong{margin:8px 0 0;font:800 17px/normal Urbanist,system-ui,sans-serif;letter-spacing:-.01em;color:#0A3D3A;}
body.pxd-map-v2-on .pxd-map-loading button[data-pxd-map-retry]{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;margin:16px 0 0;padding:0 18px;border-radius:12px;border:1px solid rgba(15,163,107,.2);background:rgba(255,255,255,.85);color:#0A3D3A;font:700 13.5px/normal Urbanist,system-ui,sans-serif;cursor:pointer;transition:transform .3s cubic-bezier(.34,1.56,.64,1),background .2s;}
body.pxd-map-v2-on .pxd-map-loading button[data-pxd-map-retry]:hover,body.pxd-map-v2-on .pxd-map-loading button[data-pxd-map-retry]:focus,body.pxd-map-v2-on .pxd-map-loading button[data-pxd-map-retry]:focus-visible{background:rgba(30,155,82,.1);color:#0A3D3A;border-color:rgba(15,163,107,.2);transform:translateY(-1px);}
body.pxd-map-v2-on .pxd-map-loading button[data-pxd-map-retry]:focus-visible{outline:2px solid #0fa36b;outline-offset:2px;}
body.pxd-map-v2-on .pxd-map-loading button[data-pxd-map-retry]:active{transform:scale(.96);}
body.pxd-map-v2-on .pxd-map-loading button[hidden]{display:none;}
body.pxd-map-v2-on .pxd-map-day-empty,body.pxd-map-v2-on .pxd-map-trip-empty{text-align:center;}
/* Croix de la popup : blanche sur la photo, a 8 px du bord, comme la planche S14-02 */
body.pxd-map-v2-on .pxd-map-popup .leaflet-popup-close-button,body.pxd-map-v2-on .pxd-map-popup .leaflet-popup-close-button:hover,body.pxd-map-v2-on .pxd-map-popup .leaflet-popup-close-button:focus,body.pxd-map-v2-on .pxd-map-popup .leaflet-popup-close-button:active{top:0;right:0;z-index:2;width:24px;height:24px;padding:8px 8px 0 0;text-align:center;font:16px/24px Tahoma,Verdana,sans-serif;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.5);text-decoration:none;background:transparent;}
body.pxd-map-v2-on .pxd-map-popup .leaflet-popup-close-button:focus-visible{outline:2px solid #fff;outline-offset:-4px;border-radius:9999px;}
/* Popup posee sous le repere (S14-02) : la fleche passe au-dessus de la carte de la popup */
body.pxd-map-v2-on .leaflet-popup.pxd-popup-below{margin-bottom:0;}
body.pxd-map-v2-on .leaflet-popup.pxd-popup-below .leaflet-popup-tip-container{top:-19px;margin-top:0;transform:scaleY(-1);}
/* Popup (S14-02) : « A partir de 18 € estime » entre l'adresse et le bouton, puis « Lien partenaire » avec son icone d'information sous le bouton */
body.pxd-map-v2-on .pxd-popup-price{display:flex;align-items:baseline;gap:6px;font:600 12.5px/1.3 Urbanist,system-ui,sans-serif;color:#012827;}
body.pxd-map-v2-on .pxd-popup-price em{font-style:normal;font-weight:500;font-size:11px;color:#586e6b;}
body.pxd-map-v2-on .pxd-popup-partner{display:flex;align-items:center;justify-content:center;gap:5px;margin:2px 0 0;text-align:center;font-size:10.5px;font-weight:600;line-height:1.3;color:#6b7c7c;}
body.pxd-map-v2-on .pxd-popup-partner svg{flex:none;width:13px;height:13px;}
/* Telephone (feuille, S14-05) : la rangee de puces remplace le bouton et la fenetre calendrier ; zone tactile des epingles a 44 px */
@media (max-width:768px){
body.pxd-map-v2-on .pxd-map-scope-trigger,body.pxd-map-v2-on .pxd-map-scope-overlay{display:none;}
body.pxd-map-v2-on .pxd-map-controls .pxd-map-btn{width:44px;height:44px;}
body.pxd-map-v2-on #map-legend{flex-wrap:nowrap;overflow-x:auto;max-width:none;max-height:none;margin-inline:0;scrollbar-width:none;border-radius:20px;bottom:calc(12px + max(16px,env(safe-area-inset-bottom,0px)));left:12px;right:12px;padding:6px;gap:2px;background:rgba(255,255,255,.82);border:1px solid rgba(10,61,58,.1);}
body.pxd-map-v2-on #map-legend .pxd-legend-item{flex:none;min-height:0;height:32px;grid-template-columns:22px max-content max-content;gap:0 7px;padding:0 6px 0 5px;border-radius:9999px;border:1px solid rgba(10,61,58,.09);background:#fff;}
body.pxd-map-v2-on #map-legend .pxd-legend-dot{width:22px;height:22px;}
body.pxd-map-v2-on #map-legend .pxd-legend-label{font-size:12.5px;}
/* Le moteur elargit la zone tactile d'une goutte par un padding de 6 px (content-box), ce qui la decale de 6 px vers le bas et la droite de sa position : la goutte reste a sa place, la zone de 44 x 52 px est un element transparent autour d'elle */
body.pxd-map-v2-on .pxd-marker-icon{padding:0;box-sizing:border-box;}
body.pxd-map-v2-on .pxd-marker-icon::after{content:"";position:absolute;left:50%;top:-6px;width:44px;height:52px;margin-left:-22px;}
/* Feuille (planche S14-05) : verre de la feuille, poignee de 36 px, titre et sous-titre, rangee des jours AU-DESSUS de la carte (bindings.js deplace la barre dans .pxd-map-sheet-head), carte en dessous */
body.pxd-map-v2-on .pxd-panel-right{border-radius:20px 20px 0 0;background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);box-shadow:0 -16px 48px rgba(1,40,39,.28),inset 0 1px 0 rgba(255,255,255,.9);}
/* !important : 49-mobile-map.css pose `height:min(90vh,calc(100vh - 72px)) !important` sur .pxd-panel-right.pxd-map-full ; la feuille de la planche monte a 62 px du haut */
body.pxd-map-v2-on .pxd-panel-right.pxd-map-full{height:calc(100vh - 62px) !important;}
body.pxd-map-v2-on .pxd-map-drag-handle{padding:8px 0 0;}
body.pxd-map-v2-on .pxd-map-drag-handle::after{width:36px;background:rgba(10,61,58,.18);}
body.pxd-map-v2-on .pxd-map-sheet-head{position:relative;flex:none;height:128px;}
body.pxd-map-v2-on .pxd-map-sheet-head__x{position:absolute;left:0;right:60px;top:20px;min-width:0;padding:0 0 0 16px;}
body.pxd-map-v2-on .pxd-map-sheet-head__t{margin:0;font:800 17px/normal Urbanist,system-ui,sans-serif;letter-spacing:-.01em;color:#0A3D3A;}
body.pxd-map-v2-on .pxd-map-sheet-head__s{margin:1px 0 0;font:500 12.5px/normal Urbanist,system-ui,sans-serif;color:#5d7070;}
body.pxd-map-v2-on #pxd-panel-right .pxdie-mobile-map-close.pxd-mobile-map-close:not([hidden]){top:21px;right:12px;flex-basis:34px;width:34px;min-height:34px;height:34px;padding:0;border-radius:9999px;border:1px solid rgba(10,61,58,.09);background:rgba(10,61,58,.05);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#0A3D3A;box-shadow:none;}
body.pxd-map-v2-on #pxd-panel-right .pxd-mobile-map-close svg{width:14px;height:14px;stroke-width:2.4;}
body.pxd-map-v2-on #pxd-panel-right .pxd-mobile-map-close::before{display:none;}
body.pxd-map-v2-on .pxd-map-sheet-head .pxd-map-days{position:absolute;left:0;right:0;top:78px;max-width:none;box-sizing:border-box;height:46px;padding:4px 16px 8px;gap:6px;align-items:flex-start;border:0;border-radius:0;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;overflow-x:auto;-webkit-mask-image:linear-gradient(90deg,#000 90%,transparent);mask-image:linear-gradient(90deg,#000 90%,transparent);}
body.pxd-map-v2-on .pxd-map-sheet-head .pxd-map-day-chip{height:34px;padding:0 13px;border:1px solid rgba(15,163,107,.2);background:rgba(255,255,255,.85);}
body.pxd-map-v2-on .pxd-map-sheet-head .pxd-map-day-chip:not([data-day="all"]){min-width:0;padding:0 13px;}
body.pxd-map-v2-on .pxd-map-sheet-head .pxd-map-day-chip.is-active,body.pxd-map-v2-on .pxd-map-sheet-head .pxd-map-day-chip.is-active:hover,body.pxd-map-v2-on .pxd-map-sheet-head .pxd-map-day-chip.is-active:focus,body.pxd-map-v2-on .pxd-map-sheet-head .pxd-map-day-chip.is-active:focus-visible{background:linear-gradient(135deg,#0A3D3A,#1E9B52);color:#fff;border-color:transparent;box-shadow:0 4px 10px rgba(30,155,82,.3);}
body.pxd-map-v2-on .pxd-map-day-chip__d{display:inline;font-weight:500;color:#5d7070;}
body.pxd-map-v2-on .pxd-map-day-chip.is-active .pxd-map-day-chip__d{color:rgba(255,255,255,.85);}
body.pxd-map-v2-on .pxd-panel-right .pxd-map-controls{top:12px;right:12px;}
body.pxd-map-v2-on .pxd-map-zoom{display:none;}
body.pxd-map-v2-on .pxd-map-scope-info{display:none;}
body.pxd-map-v2-on .pxd-map-offscreen{top:12px;}
}
@media (prefers-reduced-motion:reduce){
body.pxd-map-v2-on .pxd-map-day-chip,body.pxd-map-v2-on .pxd-map-offscreen,body.pxd-map-v2-on .pxd-map-trip-empty__cta,body.pxd-map-v2-on .pxd-map-controls .pxd-map-btn{transition:none;}
}
/* Pastille « N propositions de Pixi » (R8) : sous la barre des jours au bureau, a 56 px du bord droit (hors des boutons de 40 px), pour ne plus la recouvrir (en « Pixi et carte », les boutons sont a 6 px du bord et la pastille a 42 px les touchait). Au telephone la barre des jours est dans la feuille : la pastille ne bouge pas. */
@media (min-width:769px){body.pxd-map-v2-on .pxd-map-proposals,body.pxd-map-v2-on .pxd-panel-right[data-mode="pixi-full"] .pxd-map-proposals{top:56px;right:56px;}}
/* D04 (persona p04, 11/11) : au telephone la carte en ligne garde la barre des jours en haut (top 12 px, a gauche) ; la pastille « N propositions » (top 12 px, a 56 px du bord droit) la recouvrait. Des qu'une barre des jours est visible dans le meme conteneur, la pastille passe dessous, comme au bureau (R8). Dans la feuille, les jours sont dans .pxd-map-sheet-head : aucune .pxd-map-days dans le conteneur, la regle ne s'applique pas. */
body.pxd-map-v2-on .pxd-map-container:has(.pxd-map-days:not([hidden])) .pxd-map-proposals{top:56px;right:56px;}

/* ==========================================================================
   Panneau de Pixi V2 (lot F12, R24) : seul Pixi change. La page garde la barre des modes a icones, la carte et sa legende de la production : plus de controle segmente
   (.pxd-panel-tabs--v2), plus de barre-pilule d'entree sur la carte (.pxd-map-pixi-entry), plus d'emplacement de boutons dans la barre. Une regle par ligne. Hors V2,
   aucune regle de ce fichier ne s'applique (classe pxd-page--pixi-v2, posee par assistant/panel-toggle.js, ou poignee et barre du telephone, posees seulement sous V2).
   ========================================================================== */
/* R13c (recette 3, planche S13-03) : de 769 a 1199 px « Pixi et carte » garde le rail de sections a gauche. La regle de 42-assistant.css qui collapse la grille a deux colonnes et masque le rail
   reste telle quelle hors V2 (option eteinte : rendu inchange) ; ici, seulement sous le panneau V2 (.pxd-page--pixi-v2, posee par panel-toggle.js) : grille a trois colonnes (rail, conversation, carte),
   rail affiche, colonne de la carte inchangee (sous-grille : ses deux pistes sont celles de la page, le pourcentage de --pxd-right-width reste celui de la page ; la ligne sans sous-grille est le repli). Une regle par ligne. */
@media (min-width:769px) and (max-width:1199px){.pxd-page.pxd-page--pixi-v2[data-layout="pixi-full"]{grid-template-columns:var(--pxd-sidebar-width) 1fr var(--pxd-right-width);}}
@media (min-width:769px) and (max-width:1199px){.pxd-page.pxd-page--pixi-v2[data-layout="pixi-full"] .pxd-sidebar-nav{display:flex;}}
@media (min-width:769px) and (max-width:1199px){.pxd-page.pxd-page--pixi-v2[data-layout="pixi-full"] .pxd-panel-right{grid-column:2 / -1;grid-template-columns:1fr var(--pxd-right-width);}}
@media (min-width:769px) and (max-width:1199px){.pxd-page.pxd-page--pixi-v2[data-layout="pixi-full"] .pxd-panel-right{grid-template-columns:subgrid;}}
/* R24 (ajout de Leo, 31/10) : la legende de la carte reste VISIBLE en « Pixi et carte » (bureau, de 769 px a l'infini). 42-assistant.css la masque (display:none) pour toute la colonne etroite de la carte ;
   sous le panneau V2 seulement (.pxd-page--pixi-v2, option eteinte : rendu inchange) elle reprend sa place en bas de la carte, sur UNE ligne qui defile (comme au telephone, sans barre de defilement),
   donc jamais plus haute que 48 px : elle ne peut recouvrir ni les controles de la carte (en haut a droite), ni le composer (colonne de gauche), ni la poignee (telephone seulement). Sans element
   (:empty) elle reste masquee par 48-loading.css. Une regle par ligne. */
@media (min-width:769px){.pxd-page.pxd-page--pixi-v2 .pxd-panel-right[data-mode="pixi-full"] .pxd-map-legend:not(:empty){display:flex;flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;overflow-y:hidden;max-height:48px;scrollbar-width:none;}}
@media (min-width:769px){.pxd-page.pxd-page--pixi-v2 .pxd-panel-right[data-mode="pixi-full"] .pxd-map-legend:not(:empty)::-webkit-scrollbar{display:none;}}
@media (min-width:769px){.pxd-page.pxd-page--pixi-v2 .pxd-panel-right[data-mode="pixi-full"] .pxd-map-legend:not(:empty) .pxd-legend-item{flex:none;}}
/* Poignee « Pixi » du telephone, V2 (S13-02) : composer replie de 58 px, avatar de 42 px, titre, ligne de contexte, fleche ; l'etat vient de data-state (rest, busy, ready, proposal, off). */
@media (max-width:768px){body:not(.pxd-map-visible) .pxd-pixi-handle.pxd-pixi-handle--v2:not([hidden]){min-height:58px;gap:10px;padding:0 8px 0 8px;max-width:calc(100% - 32px - 112px);border-color:rgba(255,255,255,.92);background:linear-gradient(140deg,rgba(255,255,255,.96),rgba(255,255,255,.78));text-align:left;}}
@media (max-width:768px){body:not(.pxd-map-visible) .pxd-pixi-handle.pxd-pixi-handle--v2 .pxd-pixi-handle__avatar{position:relative;box-sizing:border-box;flex:none;width:42px;height:42px;background-size:34px auto;background-position:center 3px;}}
@media (max-width:768px){.pxd-pixi-handle--v2 .pxd-pixi-handle__text{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;}}
@media (max-width:768px){.pxd-pixi-handle--v2 .pxd-pixi-handle__title{display:block;font-size:14.5px;font-weight:800;line-height:1.2;color:#0A3D3A;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}}
@media (max-width:768px){.pxd-pixi-handle--v2 .pxd-pixi-handle__sub{display:block;font-size:12px;font-weight:500;line-height:1.25;color:#5d7070;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}}
@media (max-width:768px){.pxd-pixi-handle--v2 .pxd-pixi-handle__go{flex:none;width:34px;height:34px;border-radius:9999px;display:grid;place-items:center;background:rgba(30,155,82,.1);color:#0f6b3a;}}
@media (max-width:768px){.pxd-pixi-handle--v2[data-state="busy"] .pxd-pixi-handle__avatar::after{content:"";position:absolute;inset:-4px;border-radius:9999px;border:2px solid transparent;border-top-color:#16a05a;border-right-color:rgba(22,160,90,.35);animation:pxd-v2-ring 1s linear infinite;}}
@media (max-width:768px){.pxd-pixi-handle--v2[data-state="ready"] .pxd-pixi-handle__avatar::after{content:"";position:absolute;top:-1px;right:-1px;width:12px;height:12px;border-radius:9999px;background:#1E9B52;border:2px solid #fff;}}
@media (max-width:768px){.pxd-pixi-handle--v2[data-state="proposal"] .pxd-pixi-handle__avatar::after{content:"";position:absolute;top:-1px;right:-1px;width:12px;height:12px;border-radius:9999px;background:#d98a00;border:2px solid #fff;}}
@media (max-width:768px){.pxd-pixi-handle--v2[data-state="off"]{opacity:.75;}}
@media (max-width:768px){.pxd-pixi-handle--v2[data-state="off"] .pxd-pixi-handle__go{background:rgba(93,112,112,.12);color:#5d7070;}}
@keyframes pxd-v2-ring{to{transform:rotate(360deg);}}
/* Barre « N propositions de Pixi, placees sur la carte » avec « Revenir a Pixi » (S13-02, cadre 6) : sur la carte de la feuille, telephone seulement. */
.pxd-map-pixi-back{display:none;}
@media (max-width:768px){.pxd-map-pixi-back{position:absolute;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:600;display:flex;align-items:center;gap:10px;min-height:56px;padding:8px 8px 8px 10px;border-radius:9999px;border:1px solid rgba(255,255,255,.92);background:linear-gradient(140deg,rgba(255,255,255,.96),rgba(255,255,255,.78));-webkit-backdrop-filter:blur(14px) saturate(180%);backdrop-filter:blur(14px) saturate(180%);box-shadow:inset 0 1px 0 #fff,0 14px 28px -18px rgba(13,82,74,.55),0 0 0 1px rgba(13,82,74,.06);font-family:Urbanist,system-ui,sans-serif;color:#0A3D3A;}}
@media (max-width:768px){.pxd-map-pixi-back .pxd-map-pixi-back__avatar{flex:none;width:36px;height:36px;border-radius:50%;object-fit:cover;object-position:50% 30%;background:radial-gradient(circle at 32% 26%,#f0fdf7 0%,#d1fae5 55%,#a7f3d0 100%);box-shadow:0 0 0 2px #fff,0 6px 14px -6px rgba(13,82,74,.45);}}
@media (max-width:768px){.pxd-map-pixi-back .pxd-map-pixi-back__tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;}}
@media (max-width:768px){.pxd-map-pixi-back .pxd-map-pixi-back__title{display:block;font-size:13.5px;font-weight:800;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}}
@media (max-width:768px){.pxd-map-pixi-back .pxd-map-pixi-back__sub{display:block;font-size:12px;font-weight:500;line-height:1.25;color:#5d7070;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}}
@media (max-width:768px){.pxd-map-pixi-back .pxd-map-pixi-back__go{flex:none;height:40px;padding:0 16px;border-radius:9999px;border:0;background:linear-gradient(115deg,#128f50 0%,#16a05a 42%,#0e9784 100%);color:#fff;font:700 13.5px Urbanist,system-ui,sans-serif;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.38),0 10px 18px -10px rgba(14,151,132,.7);}}
@media (max-width:768px){.pxd-map-pixi-back .pxd-map-pixi-back__go:hover{color:#fff;background:linear-gradient(115deg,#128f50 0%,#16a05a 42%,#0e9784 100%);transform:translateY(-1px);}}
@media (max-width:768px){.pxd-map-pixi-back .pxd-map-pixi-back__go:focus,.pxd-map-pixi-back .pxd-map-pixi-back__go:focus-visible{outline:2px solid #1E9B52;outline-offset:2px;color:#fff;}}
@media (max-width:768px){.pxd-map-pixi-back .pxd-map-pixi-back__go:active{color:#fff;transform:scale(.97);}}
@media (prefers-reduced-motion:reduce){.pxd-pixi-handle--v2[data-state="busy"] .pxd-pixi-handle__avatar::after{animation:none!important;}}
/* Avec la carte V2 (R8) : la legende des filtres monte au-dessus de la barre « Revenir a Pixi » (telephone), qui la recouvrait et rendait les filtres inclicables. */
@media (max-width:768px){.pxd-map-zone:has(.pxd-map-pixi-back) #map-legend{bottom:calc(80px + env(safe-area-inset-bottom,0px));}}

/* ─────────────────────────────────────────────────────────────────
   52-wishlist-m7.css — Intérieur de la section Wishlist (M-7, planches M7B)
   Préfixe : .pxdw7-*   Actif seulement avec window.pxd.wishlistV2 === true
   (la section reçoit alors .pxdw7-on ; hors drapeau, rien ici ne s'applique).
   Vert Pixidia seul : action linear-gradient(115deg,#128f50,#16a05a), sélection #e7f8ee → #d6f3e1, accent #16a05a.
   Cibles tactiles 44 px, gras 700 au plus, boutons pleine largeur au téléphone seulement.
   ───────────────────────────────────────────────────────────────── */

#pxd-wishlist.pxdw7-on {
    --pxdw7-ink: #17302a;
    --pxdw7-mute: #5d7070;
    --pxdw7-green: #16a05a;
    --pxdw7-action: linear-gradient(115deg, #128f50, #16a05a);
    --pxdw7-select: linear-gradient(115deg, #e7f8ee, #d6f3e1);
    --pxdw7-shadow: 0 1px 2px rgba(13, 82, 74, 0.06), 0 6px 18px rgba(13, 82, 74, 0.08);
}

/* ── Accessibilité commune ───────────────────────────────────── */
.pxdw7-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

#pxd-wishlist.pxdw7-on button:focus-visible,
#pxd-wishlist.pxdw7-on select:focus-visible,
.pxdw7-overlay button:focus-visible {
    outline: 2px solid #16a05a;
    outline-offset: 2px;
}

/* ── Sous-titre, recherche ───────────────────────────────────── */
#pxd-wishlist.pxdw7-on .pxdw7-sub {
    margin: 0 0 12px;
    font-size: 0.85rem;
    color: var(--pxdw7-mute);
}

#pxd-wishlist.pxdw7-on .pxdw7-searchrow {
    display: none;
}

#pxd-wishlist.pxdw7-on .pxdw7-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 18px;
    border: 0;
    border-radius: 999px;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

#pxd-wishlist.pxdw7-on .pxdw7-btn svg,
.pxdw7-overlay .pxdw7-btn svg {
    width: 16px;
    height: 16px;
    flex: none;
}

.pxdw7-overlay .pxdw7-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 18px;
    border: 0;
    border-radius: 999px;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
}

#pxd-wishlist.pxdw7-on .pxdw7-btn--primary,
.pxdw7-overlay .pxdw7-btn--primary {
    color: #fff;
    background: linear-gradient(115deg, #128f50, #16a05a);
    box-shadow: 0 4px 14px rgba(18, 143, 80, 0.28);
}

#pxd-wishlist.pxdw7-on .pxdw7-btn--ghost,
.pxdw7-overlay .pxdw7-btn--soft {
    color: #0f6b3a;
    background: #fff;
    box-shadow: inset 0 0 0 1.5px rgba(22, 160, 90, 0.4);
}

#pxd-wishlist.pxdw7-on .pxdw7-btn--primary:hover,
.pxdw7-overlay .pxdw7-btn--primary:hover {
    filter: brightness(1.05);
}

#pxd-wishlist.pxdw7-on .pxdw7-btn--ghost:hover,
.pxdw7-overlay .pxdw7-btn--soft:hover {
    background: #e7f8ee;
}

/* ── Filtres et tri ──────────────────────────────────────────── */
#pxd-wishlist.pxdw7-on .pxdw7-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

#pxd-wishlist.pxdw7-on .pxdw7-chips {
    display: flex;
    flex: 1 1 auto;
    gap: 8px;
    min-width: 0;
    overflow-x: auto;
    padding: 4px 2px;
    scrollbar-width: none;
}

#pxd-wishlist.pxdw7-on .pxdw7-chips::-webkit-scrollbar {
    display: none;
}

#pxd-wishlist.pxdw7-on .pxdw7-chip {
    position: relative;
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 0 14px;
    border: 0;
    border-radius: 999px;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--pxdw7-ink);
    background: rgba(255, 255, 255, 0.85);
    box-shadow: inset 0 0 0 1px rgba(13, 82, 74, 0.14);
    cursor: pointer;
    white-space: nowrap;
}

#pxd-wishlist.pxdw7-on .pxdw7-chip::after {
    content: "";
    position: absolute;
    inset: -4px 0;
}

#pxd-wishlist.pxdw7-on .pxdw7-chip.is-on {
    background: var(--pxdw7-select);
    box-shadow: inset 0 0 0 1.5px #16a05a;
    color: #0f6b3a;
    font-weight: 700;
}

#pxd-wishlist.pxdw7-on .pxdw7-chip-n {
    font-weight: 700;
    color: var(--pxdw7-mute);
}

#pxd-wishlist.pxdw7-on .pxdw7-sq {
    display: inline-block;
    width: 10px;
    height: 10px;
    flex: none;
    border-radius: 3px;
    background: var(--pxdw7-c, #16a05a);
}

#pxd-wishlist.pxdw7-on .pxdw7-tools {
    display: flex;
    flex: none;
    align-items: center;
    gap: 10px;
}

#pxd-wishlist.pxdw7-on .pxdw7-sort {
    min-height: 44px;
    max-width: 190px;
    padding: 0 30px 0 14px;
    border: 0;
    border-radius: 999px;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--pxdw7-ink);
    background-color: #fff;
    box-shadow: inset 0 0 0 1px rgba(13, 82, 74, 0.18);
    cursor: pointer;
}

#pxd-wishlist.pxdw7-on .pxdw7-btn--search {
    display: none;
}

/* ── Liste ───────────────────────────────────────────────────── */
#pxd-wishlist.pxdw7-on .pxdw7-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

#pxd-wishlist.pxdw7-on .pxdw7-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 60px;
    padding: 8px 8px 8px 8px;
    margin: 0;
    background: #fff;
    border-radius: 16px;
    box-shadow: var(--pxdw7-shadow);
}

#pxd-wishlist.pxdw7-on .pxdw7-row.is-dim {
    opacity: 0.62;
    filter: saturate(0.55);
}

#pxd-wishlist.pxdw7-on .pxdw7-main {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 10px;
    min-width: 0;
    min-height: 44px;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: none;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

#pxd-wishlist.pxdw7-on .pxdw7-tile {
    position: relative;
    display: grid;
    flex: none;
    place-items: center;
    width: 44px;
    height: 44px;
    overflow: visible;
    border-radius: 13px;
    background: linear-gradient(145deg, color-mix(in srgb, var(--pxdw7-c) 22%, #fff), color-mix(in srgb, var(--pxdw7-c) 7%, #fff));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pxdw7-c) 24%, transparent);
    color: var(--pxdw7-ci);
}

#pxd-wishlist.pxdw7-on .pxdw7-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

#pxd-wishlist.pxdw7-on .pxdw7-tile svg {
    width: 20px;
    height: 20px;
}

#pxd-wishlist.pxdw7-on .pxdw7-tile .pxdw7-sq {
    position: absolute;
    right: -3px;
    bottom: -3px;
    width: 12px;
    height: 12px;
    background: var(--pxdw7-c);
    box-shadow: 0 0 0 2px #fff;
}

#pxd-wishlist.pxdw7-on .pxdw7-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

#pxd-wishlist.pxdw7-on .pxdw7-name {
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--pxdw7-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

#pxd-wishlist.pxdw7-on .pxdw7-meta {
    font-size: 0.78rem;
    color: var(--pxdw7-mute);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#pxd-wishlist.pxdw7-on .pxdw7-type {
    font-weight: 700;
    color: var(--pxdw7-ci);
}

#pxd-wishlist.pxdw7-on .pxdw7-rate {
    font-weight: 700;
    color: #8a5300;
}

/* Avatars */
.pxdw7-av {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 28px;
    height: 28px;
    overflow: hidden;
    border-radius: 50%;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    box-shadow: 0 0 0 2px #fff;
}

.pxdw7-av img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pxdw7-av--lg {
    width: 38px;
    height: 38px;
    font-size: 0.9rem;
}

#pxd-wishlist.pxdw7-on .pxdw7-who {
    display: inline-flex;
    flex: none;
}

/* Pastilles d'avis */
.pxdw7-v {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 48px;
    min-height: 44px;
    padding: 0 10px;
    border: 0;
    border-radius: 999px;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    color: #2a4a40;
    background: rgba(13, 82, 74, 0.05);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

#pxd-wishlist.pxdw7-on .pxdw7-votes {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 2px;
}

.pxdw7-v .pxdw7-e {
    font-size: 15px;
    line-height: 1;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
    filter: grayscale(0.3);
}

.pxdw7-v.up .pxdw7-e::before {
    content: "\1F44D";
}

.pxdw7-v.dn .pxdw7-e::before {
    content: "\1F44E";
}

.pxdw7-v.is-mine .pxdw7-e {
    filter: none;
}

.pxdw7-v.up.is-mine {
    color: #0f6b3a;
    background: #e7f8ee;
    box-shadow: inset 0 0 0 1.5px #16a05a;
}

.pxdw7-v.dn.is-mine {
    color: #1f3836;
    background: rgba(53, 81, 78, 0.13);
    box-shadow: inset 0 0 0 1.5px #35514e;
}

.pxdw7-v:not(.pxdw7-v--ro):not([aria-disabled="true"]):hover {
    transform: translateY(-1px);
}

.pxdw7-v[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.72;
}

.pxdw7-v--ro {
    cursor: default;
    background: none;
}

/* « Voir les N idées » (téléphone) */
#pxd-wishlist.pxdw7-on .pxdw7-more {
    display: none;
}

/* Vide */
#pxd-wishlist.pxdw7-on .pxdw7-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 8px 8px;
    text-align: center;
}

#pxd-wishlist.pxdw7-on .pxdw7-empty-av {
    display: grid;
    place-items: center;
    width: 96px;
    height: 96px;
}

#pxd-wishlist.pxdw7-on .pxdw7-empty-av img,
#pxd-wishlist.pxdw7-on .pxdw7-empty-av svg {
    max-width: 100%;
    height: auto;
}

#pxd-wishlist.pxdw7-on .pxdw7-empty-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--pxdw7-ink);
}

#pxd-wishlist.pxdw7-on .pxdw7-empty-text {
    margin: 0;
    max-width: 34ch;
    font-size: 0.9rem;
    color: var(--pxdw7-mute);
}

#pxd-wishlist.pxdw7-on .pxdw7-empty-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 8px;
}

/* ── Tablette et plus : deux colonnes, bouton de recherche à côté des puces ── */
@media (min-width: 768px) {
    /* Retour de Léo 12/11 : une SEULE colonne, la ligne d'une idée prend toute la largeur (planches M7B-01 ord et ge), plus de deux demi-colonnes. */
    #pxd-wishlist.pxdw7-on .pxdw7-list {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    #pxd-wishlist.pxdw7-on .pxdw7-btn--search {
        display: inline-flex;
    }

    #pxd-wishlist.pxdw7-on .pxdw7-secbar,
    .pxdw7-secbar {
        display: none;
    }
}

/* ── Téléphone ───────────────────────────────────────────────── */
@media (max-width: 767px) {
    #pxd-wishlist.pxdw7-on .pxdw7-searchrow {
        display: flex;
        gap: 8px;
        margin-bottom: 10px;
    }

    #pxd-wishlist.pxdw7-on .pxdw7-field {
        display: flex;
        flex: 1 1 auto;
        align-items: center;
        gap: 10px;
        min-height: 44px;
        padding: 0 16px;
        border: 0;
        border-radius: 999px;
        background: #fff;
        box-shadow: inset 0 0 0 1px rgba(13, 82, 74, 0.18);
        font: inherit;
        font-size: 0.9rem;
        color: var(--pxdw7-mute);
        text-align: left;
        cursor: text;
    }

    #pxd-wishlist.pxdw7-on .pxdw7-field svg {
        width: 16px;
        height: 16px;
    }

    /* Planches M7B-01 tel : les puces défilent et l'icône de tri reste sur la MÊME ligne, à droite (plus de colonne empilée). */
    #pxd-wishlist.pxdw7-on .pxdw7-tools {
        justify-content: flex-end;
    }

    #pxd-wishlist.pxdw7-on .pxdw7-list.is-capped .pxdw7-row[data-extra] {
        display: none;
    }

    #pxd-wishlist.pxdw7-on .pxdw7-more {
        display: block;
        width: 100%;
        min-height: 44px;
        margin-top: 10px;
        border: 0;
        border-radius: 999px;
        background: #fff;
        box-shadow: inset 0 0 0 1.5px rgba(22, 160, 90, 0.4);
        font: inherit;
        font-size: 0.9rem;
        font-weight: 700;
        color: #0f6b3a;
        cursor: pointer;
    }

    #pxd-wishlist.pxdw7-on .pxdw7-empty-actions {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    /* Barre de sections collante */
    .pxdw7-secbar {
        position: sticky;
        top: 0;
        z-index: 40;
        display: flex;
        gap: 6px;
        margin: 0 0 8px;
        padding: 6px 8px;
        overflow-x: auto;
        background: rgba(255, 255, 255, 0.92);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
        box-shadow: 0 1px 0 rgba(13, 82, 74, 0.1);
        scrollbar-width: none;
    }

    .pxdw7-secbar::-webkit-scrollbar {
        display: none;
    }

    .pxdw7-secbtn {
        flex: none;
        min-height: 44px;
        padding: 0 16px;
        border: 0;
        border-radius: 999px;
        background: rgba(13, 82, 74, 0.05);
        font: inherit;
        font-size: 0.85rem;
        font-weight: 600;
        color: #17302a;
        cursor: pointer;
    }

    .pxdw7-secbtn.is-on {
        color: #fff;
        font-weight: 700;
        background: linear-gradient(115deg, #128f50, #16a05a);
    }

    .pxdw7-secbtn:focus-visible {
        outline: 2px solid #16a05a;
        outline-offset: 2px;
    }
}

/* ── Fiche d'une idée ────────────────────────────────────────── */
body.pxdw7-lock {
    overflow: hidden;
}

.pxdw7-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: rgba(1, 40, 39, 0.4);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

.pxdw7-sheet {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 640px;
    max-height: min(90vh, 90dvh);
    overflow: hidden;
    border-radius: 20px 20px 0 0;
    background: #fff;
    color: #17302a;
    box-shadow: 0 -8px 40px rgba(13, 82, 74, 0.22);
}

.pxdw7-grip {
    position: absolute;
    top: 8px;
    left: 50%;
    z-index: 3;
    width: 36px;
    height: 4px;
    margin-left: -18px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 0 0 1px rgba(13, 82, 74, 0.2);
}

.pxdw7-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 2px 8px rgba(13, 82, 74, 0.18);
    color: #17302a;
    cursor: pointer;
}

.pxdw7-close svg {
    width: 18px;
    height: 18px;
}

.pxdw7-scroll {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.pxdw7-visual {
    position: relative;
    display: grid;
    flex: none;
    place-items: center;
    height: 168px;
    background: var(--pxdw7-select, linear-gradient(115deg, #e7f8ee, #d6f3e1));
}

.pxdw7-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pxdw7-plate {
    display: grid;
    place-items: center;
    width: 68px;
    height: 68px;
    border-radius: 20px;
    background: #fff;
    color: #128f50;
    box-shadow: 0 6px 18px rgba(13, 82, 74, 0.14);
}

.pxdw7-plate svg {
    width: 28px;
    height: 28px;
}

.pxdw7-credit {
    position: absolute;
    left: 12px;
    bottom: 10px;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    font-size: 0.72rem;
    font-weight: 600;
    color: #17302a;
}

.pxdw7-sheet-main {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 20px 8px;
}

.pxdw7-kind {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 700;
    color: #17302a;
}

.pxdw7-kind .pxdw7-sq,
.pxdw7-sheet .pxdw7-sq {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 3px;
    background: var(--pxdw7-c, #16a05a);
}

.pxdw7-sheet-title {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.2;
    color: #17302a;
}

.pxdw7-addr {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 0;
    font-size: 0.88rem;
    color: #5d7070;
}

.pxdw7-addr svg {
    width: 15px;
    height: 15px;
    margin-top: 2px;
    flex: none;
}

.pxdw7-rating {
    margin: 0;
    font-size: 0.88rem;
    font-weight: 700;
    color: #8a5300;
}

.pxdw7-by {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 14px;
    background: #f3faf6;
    font-size: 0.88rem;
}

.pxdw7-h3 {
    margin: 4px 0 8px;
    font-size: 0.95rem;
    font-weight: 700;
}

.pxdw7-bigvotes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.pxdw7-v--big {
    justify-content: center;
    gap: 8px;
    min-height: 56px;
    border-radius: 18px;
    font-size: 0.9rem;
}

.pxdw7-v--big .pxdw7-e {
    font-size: 24px;
}

.pxdw7-v--big .pxdw7-n {
    font-size: 1.15rem;
}

.pxdw7-voters {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 10px;
}

.pxdw7-h4 {
    margin: 0 0 6px;
    font-size: 0.8rem;
    font-weight: 700;
}

.pxdw7-col--up .pxdw7-h4 {
    color: #0f6b3a;
}

.pxdw7-col--dn .pxdw7-h4 {
    color: #35514e;
}

.pxdw7-people {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pxdw7-people li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
}

.pxdw7-people .pxdw7-av {
    width: 26px;
    height: 26px;
    font-size: 0.7rem;
}

.pxdw7-none {
    margin: 0;
    font-size: 0.82rem;
    color: #5d7070;
}

.pxdw7-foot {
    position: sticky;
    bottom: 0;
    margin-top: auto;
    padding: 12px 20px calc(14px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid rgba(13, 82, 74, 0.1);
    background: #fff;
}

.pxdw7-foot-actions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.pxdw7-plus {
    position: relative;
}

.pxdw7-menu {
    position: absolute;
    right: 0;
    bottom: calc(100% + 8px);
    z-index: 4;
    min-width: 220px;
    padding: 6px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(13, 82, 74, 0.22);
}

.pxdw7-menu[hidden] {
    display: none;
}

.pxdw7-menuitem {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: 0 14px;
    border: 0;
    border-radius: 12px;
    background: none;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    color: #17302a;
    text-align: left;
    cursor: pointer;
}

.pxdw7-menuitem:hover {
    background: #e7f8ee;
}

.pxdw7-menuitem--danger {
    color: #b3261e;
}

@media (min-width: 1024px) {
    .pxdw7-overlay {
        align-items: center;
    }

    .pxdw7-sheet {
        max-width: 520px;
        border-radius: 20px;
    }

    .pxdw7-visual {
        height: 152px;
        margin: 10px 10px 0;
        border-radius: 16px;
        overflow: hidden;
    }

    .pxdw7-grip {
        display: none;
    }
}

@media (max-width: 767px) {
    .pxdw7-visual {
        height: 128px;
    }

    .pxdw7-foot-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .pxdw7-foot-actions > .pxdw7-btn,
    .pxdw7-foot-actions .pxdw7-plus,
    .pxdw7-foot-actions .pxdw7-plus > .pxdw7-btn {
        width: 100%;
    }

    .pxdw7-menu {
        right: 0;
        left: 0;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .pxdw7-v,
    #pxd-wishlist.pxdw7-on .pxdw7-chip,
    #pxd-wishlist.pxdw7-on .pxdw7-row {
        transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
    }

    .pxdw7-sheet {
        animation: pxdw7-up 0.22s ease-out;
    }

    @keyframes pxdw7-up {
        from {
            transform: translateY(24px);
            opacity: 0;
        }

        to {
            transform: none;
            opacity: 1;
        }
    }
}

/* ── Retour de Léo 12/11 (planches M7B-01, M7B-03 vide-et-tri) : bouton vert dans l'en-tête, tri en menu du design system ─────────── */
#pxd-wishlist.pxdw7-on .pxdw7-hright {
    display: flex;
    flex: none;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}

#pxd-wishlist.pxdw7-on .pxdw7-btn--head {
    min-height: 44px;
    padding: 0 18px;
    white-space: nowrap;
}

#pxd-wishlist.pxdw7-on .pxdw7-btn--head svg {
    width: 18px;
    height: 18px;
    flex: none;
}

#pxd-wishlist.pxdw7-on .pxdw7-sortwrap {
    position: relative;
    display: inline-flex;
}

#pxd-wishlist.pxdw7-on .pxdw7-sortbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    color: var(--pxdw7-ink);
    background: #fff;
    box-shadow: inset 0 0 0 1px rgba(13, 82, 74, 0.18);
    cursor: pointer;
}

#pxd-wishlist.pxdw7-on .pxdw7-sortbtn svg {
    width: 20px;
    height: 20px;
}

#pxd-wishlist.pxdw7-on .pxdw7-sortbtn:hover,
#pxd-wishlist.pxdw7-on .pxdw7-sortbtn.is-open {
    color: #0b7a4a;
    background: #e7f8ee;
    box-shadow: inset 0 0 0 1px rgba(30, 155, 82, 0.55);
}

#pxd-wishlist.pxdw7-on .pxdw7-sortmenu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 30;
    box-sizing: border-box;
    min-width: 220px;
    padding: 6px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 18px 40px -12px rgba(10, 61, 58, 0.35), 0 2px 8px rgba(10, 61, 58, 0.1);
}

#pxd-wishlist.pxdw7-on .pxdw7-sortmenu[hidden] {
    display: none;
}

#pxd-wishlist.pxdw7-on .pxdw7-sortopt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 44px;
    padding: 0 14px;
    border: 0;
    border-radius: 12px;
    font: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    text-align: left;
    color: var(--pxdw7-ink);
    background: transparent;
    cursor: pointer;
}

#pxd-wishlist.pxdw7-on .pxdw7-sortopt:hover,
#pxd-wishlist.pxdw7-on .pxdw7-sortopt:focus-visible,
#pxd-wishlist.pxdw7-on .pxdw7-sortopt.is-on {
    background: #e7f8ee;
}

#pxd-wishlist.pxdw7-on .pxdw7-sortopt svg {
    width: 18px;
    height: 18px;
    color: #0b7a4a;
}

@media (max-width: 767px) {
    #pxd-wishlist.pxdw7-on .pxdw7-hright {
        gap: 8px;
    }

    #pxd-wishlist.pxdw7-on .pxdw7-btn--head {
        padding: 0 14px;
        font-size: 0.85rem;
    }

    #pxd-wishlist.pxdw7-on .pxdw7-sortmenu {
        min-width: 200px;
    }
}

/* ============================================
   52. RECHERCHE SUR LA CARTE, IDEES ET PINS « PASTILLE » (maquette M-7, planches M7A)
   Tout est derriere le drapeau `pxd.mapIdeaSearch` : sans lui, map/idea-search.js ne cree aucun element et body ne porte pas
   la classe `pxdm7-on` ; les seules regles qui visent un element deja present sont donc gardees par `body.pxdm7-on`.
   Prefixe `pxdm7-`. Vert Pixidia (#1E9B52 / #0A3D3A), aucun turquoise, aucun bleu fonce. Cibles tactiles de 44 px, jamais la couleur seule.
   ============================================ */

/* ---- pins « pastille » : disque de la couleur du type, icone blanche, petit numero ---- */
.pxdm7-pin-icon{background:none;border:0;}
.pxdm7-pin{position:relative;display:grid;place-items:center;box-sizing:border-box;width:34px;height:34px;margin:5px;border-radius:9999px;background:var(--pxdm7-c,#1E9B52);color:#fff;box-shadow:0 0 0 2px #fff,0 3px 8px rgba(10,61,58,.35);transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s;}
.pxdm7-pin svg{display:block;}
.pxdm7-pin--on{transform:scale(1.18);box-shadow:0 0 0 2px #fff,0 0 0 5px rgba(30,155,82,.35),0 6px 14px rgba(10,61,58,.4);}
.pxdm7-pin__n{position:absolute;top:-7px;right:-7px;box-sizing:border-box;min-width:18px;height:18px;padding:0 4px;border-radius:9999px;background:#fff;color:#0A3D3A;font:800 10.5px/18px Urbanist,system-ui,sans-serif;text-align:center;box-shadow:0 0 0 1.5px var(--pxdm7-c,#1E9B52);font-variant-numeric:tabular-nums;}
/* idee : disque blanc a anneau de la couleur du type, ampoule, jamais de numero */
.pxdm7-pin--idea{background:#fff;color:var(--pxdm7-c,#1E9B52);box-shadow:0 0 0 3px var(--pxdm7-c,#1E9B52),0 3px 8px rgba(10,61,58,.3);}
.pxdm7-pin--idea.pxdm7-pin--on{box-shadow:0 0 0 3px var(--pxdm7-c,#1E9B52),0 0 0 7px rgba(30,155,82,.28),0 6px 14px rgba(10,61,58,.35);}
/* repere de previsualisation : vert « + », anneau en tirets pour le distinguer des pins du voyage */
.pxdm7-pin--preview{width:38px;height:38px;margin:5px;background:#1E9B52;color:#fff;box-shadow:0 0 0 2px #fff,0 0 0 4px rgba(30,155,82,.45),0 4px 10px rgba(10,61,58,.4);}
@media (prefers-reduced-motion:reduce){.pxdm7-pin{transition:none;}}

/* ---- barre de recherche : capsule blanche de 50 px, loupe sur disque vert pale (decalee a droite du zoom Leaflet, 10 px + 34 px) ---- */
.pxdm7-search{position:absolute;z-index:650;top:12px;left:56px;right:64px;max-width:420px;font-family:Urbanist,system-ui,sans-serif;}
/* Retour de Léo 12/11 : la capsule est CENTREE en largeur dans la colonne de la carte (ordinateur et tablette ; le téléphone garde la pleine largeur). */
@media (min-width:700px){.pxdm7-search{left:50%;right:auto;width:min(420px,calc(100% - 128px));max-width:none;transform:translateX(-50%);}}
.pxdm7-search__bar{display:flex;align-items:center;gap:8px;box-sizing:border-box;height:50px;padding:0 6px 0 7px;border-radius:9999px;background:#fff;border:1px solid rgba(10,61,58,.12);box-shadow:0 10px 24px -10px rgba(30,155,82,.4),0 1px 3px rgba(10,61,58,.1);}
.pxdm7-search__bar:focus-within{border-color:#1E9B52;box-shadow:0 0 0 3px rgba(30,155,82,.22),0 10px 24px -10px rgba(30,155,82,.4);}
.pxdm7-search__ico{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:9999px;background:rgba(30,155,82,.14);color:#178440;}
.pxdm7-search__input{flex:1;min-width:0;height:44px;margin:0;padding:0;border:0;outline:0;background:transparent;box-shadow:none;color:#0A3D3A;font:600 16px/1.2 Urbanist,system-ui,sans-serif;-webkit-appearance:none;appearance:none;}
.pxdm7-search__input::placeholder{color:#5d7070;opacity:1;}
.pxdm7-search__input::-webkit-search-cancel-button{display:none;}
.pxdm7-search__clear{flex:none;display:grid;place-items:center;width:44px;height:44px;margin:0;padding:0;border:0;border-radius:9999px;background:transparent;color:#0A3D3A;cursor:pointer;}
.pxdm7-search__clear[hidden]{display:none;}
.pxdm7-search__clear:hover,.pxdm7-search__clear:focus-visible{background:rgba(30,155,82,.12);}
.pxdm7-search__clear:focus-visible{outline:2px solid #1E9B52;outline-offset:-2px;}
.pxdm7-status{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* ---- liste : lignes arrondies, nom + adresse, type en pastille teintee (ni note, ni repere, ni « + ») ---- */
.pxdm7-list{margin:8px 0 0;padding:6px;list-style:none;max-height:min(46vh,340px);overflow:auto;border-radius:20px;background:#fff;border:1px solid rgba(10,61,58,.1);box-shadow:0 14px 30px -12px rgba(10,61,58,.35);}
.pxdm7-list[hidden]{display:none;}
.pxdm7-list__li{margin:0;padding:0;}
.pxdm7-row{display:flex;align-items:center;justify-content:space-between;gap:10px;box-sizing:border-box;width:100%;min-height:52px;margin:0;padding:6px 10px;border:0;border-radius:14px;background:transparent;color:#0A3D3A;text-align:left;cursor:pointer;font-family:inherit;}
.pxdm7-row:hover,.pxdm7-row:focus-visible{background:rgba(30,155,82,.1);}
.pxdm7-row:focus-visible{outline:2px solid #1E9B52;outline-offset:-2px;}
.pxdm7-row__txt{display:flex;flex-direction:column;min-width:0;gap:2px;}
.pxdm7-row__name{font:700 14.5px/1.25 Urbanist,system-ui,sans-serif;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pxdm7-row__addr{font:500 12.5px/1.25 Urbanist,system-ui,sans-serif;color:#5d7070;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pxdm7-pill{flex:none;padding:3px 9px;border-radius:9999px;font:700 11.5px/1.3 Urbanist,system-ui,sans-serif;}
.pxdm7-list__msg{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin:0;padding:10px;color:#0A3D3A;font:600 14px/1.35 Urbanist,system-ui,sans-serif;}

/* ---- fiche du lieu choisi : carte a gauche au bureau, feuille du bas au telephone ---- */
.pxdm7-card{position:absolute;z-index:650;box-sizing:border-box;top:84px;left:12px;width:min(340px,calc(100% - 84px));max-height:calc(100% - 190px);overflow:auto;padding:14px;border-radius:20px;background:#fff;border:1px solid rgba(10,61,58,.1);box-shadow:0 18px 36px -14px rgba(10,61,58,.42);color:#0A3D3A;font-family:Urbanist,system-ui,sans-serif;}
.pxdm7-card[hidden]{display:none;}
.pxdm7-card__head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;}
.pxdm7-card__title{font:800 17px/1.25 Urbanist,system-ui,sans-serif;min-width:0;overflow-wrap:anywhere;}
.pxdm7-card__close{flex:none;display:grid;place-items:center;width:44px;height:44px;margin:-8px -8px 0 0;padding:0;border:0;border-radius:9999px;background:transparent;color:#0A3D3A;cursor:pointer;}
.pxdm7-card__close:hover,.pxdm7-card__close:focus-visible{background:rgba(30,155,82,.12);}
.pxdm7-card__close:focus-visible{outline:2px solid #1E9B52;outline-offset:-2px;}
.pxdm7-card__photo{margin:8px 0 0;border-radius:14px;overflow:hidden;max-height:120px;}
.pxdm7-card__photo img{display:block;width:100%;height:120px;object-fit:cover;}
.pxdm7-card__addr{margin-top:4px;font:500 13px/1.35 Urbanist,system-ui,sans-serif;color:#5d7070;}
.pxdm7-card__dist{margin-top:2px;font:700 12.5px/1.3 Urbanist,system-ui,sans-serif;color:#178440;}
.pxdm7-tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px;}
.pxdm7-tile{display:flex;align-items:center;gap:8px;box-sizing:border-box;min-height:44px;margin:0;padding:0 12px;border:1.5px solid rgba(10,61,58,.14);border-radius:12px;background:#fff;color:#0A3D3A;font:700 13.5px/1.2 Urbanist,system-ui,sans-serif;cursor:pointer;}
.pxdm7-tile svg{flex:none;color:var(--pxdm7-c,#1E9B52);}
.pxdm7-tile:hover{background:rgba(30,155,82,.07);}
.pxdm7-tile:focus-visible{outline:2px solid #1E9B52;outline-offset:2px;}
.pxdm7-tile.is-on{border-color:#1E9B52;background:rgba(30,155,82,.12);box-shadow:inset 0 0 0 1px #1E9B52;}
.pxdm7-tile.is-on::after{content:"\2713";margin-left:auto;font-weight:800;color:#178440;}
.pxdm7-tile:disabled{opacity:.6;cursor:default;}
.pxdm7-note{display:flex;align-items:flex-start;gap:8px;margin-top:10px;padding:8px 10px;border-radius:12px;background:rgba(30,155,82,.1);font:600 13px/1.35 Urbanist,system-ui,sans-serif;}
.pxdm7-note svg{flex:none;margin-top:1px;}
.pxdm7-note--err{background:rgba(211,47,47,.1);color:#8f1d1d;}
.pxdm7-state{display:flex;align-items:center;gap:8px;margin-top:12px;font:700 14px/1.3 Urbanist,system-ui,sans-serif;}
.pxdm7-state--ok svg{flex:none;padding:3px;box-sizing:content-box;width:16px;height:16px;border-radius:9999px;background:#1E9B52;color:#fff;}

/* ---- boutons ---- */
.pxdm7-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;}
.pxdm7-actions--col{flex-direction:column;}
.pxdm7-btn{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-height:44px;margin:0;padding:0 16px;border-radius:9999px;border:1.5px solid transparent;font:800 14px/1.2 Urbanist,system-ui,sans-serif;text-decoration:none;cursor:pointer;transition:transform .2s cubic-bezier(.34,1.56,.64,1),background .2s;}
.pxdm7-btn--primary{background:#1E9B52;color:#fff;}
.pxdm7-btn--primary:hover{background:#178440;color:#fff;}
.pxdm7-btn--secondary{background:#fff;color:#0A3D3A;border-color:#1E9B52;}
.pxdm7-btn--secondary:hover{background:rgba(30,155,82,.1);}
.pxdm7-btn--ghost{background:#fff;color:#0A3D3A;border-color:rgba(10,61,58,.18);}
.pxdm7-btn--ghost:hover{background:rgba(30,155,82,.08);color:#0A3D3A;}
.pxdm7-btn:focus-visible{outline:2px solid #1E9B52;outline-offset:2px;}
.pxdm7-btn:active{transform:scale(.97);}
.pxdm7-btn:disabled{opacity:.55;cursor:default;transform:none;}
.pxdm7-btn[aria-busy="true"]{cursor:progress;}
.pxdm7-added{margin-top:4px;font:600 12.5px/1.3 Urbanist,system-ui,sans-serif;color:#5d7070;}

/* ---- bouton ampoule (3e bouton de la colonne, sous « traces ») : eteint = trait barre sur l'icone, pas seulement une couleur ---- */
.pxdm7-ideas-btn[hidden]{display:none;}
body:not(.pxd-map-v2-on) .pxdm7-ideas-btn{position:relative;}
body:not(.pxd-map-v2-on) .pxdm7-ideas-btn[aria-pressed="false"]::after{content:"";position:absolute;left:9px;right:9px;top:50%;height:2px;border-radius:2px;background:currentColor;transform:rotate(-45deg);pointer-events:none;}
@media (pointer:coarse){.pxdm7-ideas-btn{width:44px;height:44px;}}

/* ---- « Tout le voyage » retire de la carte (Leo, 09/11). Seulement derriere le drapeau. ---- */
body.pxdm7-on .pxd-map-day-chip[data-day="all"],body.pxdm7-on .pxd-map-scope-all{display:none;}
/* carte V2 allumee : sa barre des jours et ses puces descendent sous la barre de recherche */
body.pxdm7-on.pxd-map-v2-on .pxd-map-days{top:72px;}
body.pxdm7-on.pxd-map-v2-on .pxd-map-scope-info{top:116px;}
body.pxdm7-on.pxd-map-v2-on .pxd-map-offscreen{top:150px;}

/* ---- telephone et tablette : la fiche devient une feuille posee au-dessus de la legende ---- */
@media (max-width:699px){
.pxdm7-search{right:64px;max-width:none;}
.pxdm7-card{top:auto;left:8px;right:8px;width:auto;bottom:var(--pxdm7-legend,16px);max-height:52%;border-radius:22px 22px 18px 18px;}
.pxdm7-tiles{grid-template-columns:1fr 1fr;}
.pxdm7-actions--col{flex-direction:row;}
.pxdm7-actions--col .pxdm7-btn{flex:1 1 140px;}
}

/* ================================================================================================================================
   Retour visuel de Leo sur la carte (11/11) : recherche de lieu, empilement, pins. Audit CDP sur la page servie (voir la PR).
   ================================================================================================================================ */

/* (1) Focus de la recherche (G5, P21). Le polish pose `body.pxd-polish :is(input,...):focus` et `...:focus-visible` en !important (anneau carre
   de 2 px a 3 px de l'input, boite vert .1, border-color) et le theme un `:focus-visible` en !important : sur la capsule, l'input rond de 0 px de
   rayon montrait un RECTANGLE vert. Tous les etats de l'input sont declares, avec le prefixe et le !important de P21 ; l'anneau est porte par la
   CAPSULE (box-shadow, rayon plein), jamais par l'input. */
body.pxd-itinerary-single .pxdm7-search .pxdm7-search__bar input.pxdm7-search__input,
body.pxd-itinerary-single .pxdm7-search .pxdm7-search__bar input.pxdm7-search__input:hover,
body.pxd-itinerary-single .pxdm7-search .pxdm7-search__bar input.pxdm7-search__input:focus,
body.pxd-itinerary-single .pxdm7-search .pxdm7-search__bar input.pxdm7-search__input:focus-visible,
body.pxd-itinerary-single .pxdm7-search .pxdm7-search__bar input.pxdm7-search__input:active{outline:0 none !important;outline-offset:0 !important;border:0 none !important;border-radius:9999px !important;box-shadow:none !important;background:transparent !important;color:#0A3D3A !important;}
body.pxd-itinerary-single .pxdm7-search .pxdm7-search__bar:hover{border-color:rgba(30,155,82,.45);}
body.pxd-itinerary-single .pxdm7-search .pxdm7-search__bar:focus-within{border-color:#1E9B52;box-shadow:0 0 0 3px rgba(30,155,82,.22),0 10px 24px -10px rgba(30,155,82,.4);}
body.pxd-itinerary-single .pxdm7-search .pxdm7-search__bar:active{border-color:#178440;}
/* la croix de la capsule : tous ses etats, anneau rond en box-shadow (jamais un cadre carre) */
body.pxd-itinerary-single .pxdm7-search .pxdm7-search__clear,
body.pxd-itinerary-single .pxdm7-search .pxdm7-search__clear:hover,
body.pxd-itinerary-single .pxdm7-search .pxdm7-search__clear:focus,
body.pxd-itinerary-single .pxdm7-search .pxdm7-search__clear:focus-visible,
body.pxd-itinerary-single .pxdm7-search .pxdm7-search__clear:active{outline:0 none !important;border:0 none !important;border-radius:9999px !important;color:#0A3D3A !important;}
body.pxd-itinerary-single .pxdm7-search .pxdm7-search__clear{background:transparent !important;box-shadow:none !important;}
body.pxd-itinerary-single .pxdm7-search .pxdm7-search__clear:hover{background:rgba(30,155,82,.12) !important;}
body.pxd-itinerary-single .pxdm7-search .pxdm7-search__clear:focus-visible{background:rgba(30,155,82,.12) !important;box-shadow:0 0 0 2px #1E9B52 inset !important;}
body.pxd-itinerary-single .pxdm7-search .pxdm7-search__clear:active{background:rgba(30,155,82,.2) !important;}

/* (2) Empilement : la capsule (z 650, 50 px) recouvrait la pastille « N propositions » (z 500, meme ligne, a 56 px du bord droit) et, au telephone en
   plein ecran, la pastille passait par-dessus l'input (mesure : elementFromPoint au centre de l'input rend la pastille). Des qu'une capsule est dans
   le conteneur, la pastille descend dessous (12 + 50 + 8 px) ; avec la barre des jours de la carte V2 (capsule a 12 px, jours a 72 px), sous les jours. */
body.pxd-itinerary-single .pxd-map-container:has(.pxdm7-search) .pxd-map-proposals{top:70px;right:56px;}
body.pxdm7-on.pxd-map-v2-on .pxd-map-container:has(.pxdm7-search):has(.pxd-map-days:not([hidden])) .pxd-map-proposals{top:120px;right:56px;}

/* (2 bis) Telephone (<= 768 px, carte sans la V2 : le declencheur « Tout le voyage » de la carte mobile est affiche) : ce declencheur est un bouton
   plein de largeur (top 8 px, de 56 a 60 px des bords, z 1100) pose EXACTEMENT sur la capsule de recherche (top 12 px, z 650). Mesure sur la page servie :
   au centre de l'input, elementFromPoint rend le declencheur, la recherche est donc inaccessible (persona p08, plein ecran). La capsule passe sous le
   declencheur (8 + 44 + 6 px), la pastille sous la capsule. En V2 le declencheur est masque : rien ne change. */
@media (max-width:768px){
body.pxd-itinerary-single:not(.pxd-map-v2-on) .pxd-map-container:has(.pxdm7-search) .pxdm7-search{top:58px;}
body.pxd-itinerary-single:not(.pxd-map-v2-on) .pxd-map-container:has(.pxdm7-search) .pxd-map-proposals{top:116px;right:56px;}
}

/* (3) Pins pastille (reference : itineraires-etat-actuel.md, pastilles de la couleur du type, anneau blanc, ombres en rgba(1,40,39,x), lisibilite
   du compte). Avant : disque de 34 px a icone de 18 px, couleur plate, badge du compte blanc a anneau de 1,5 px DEBORDANT de 7 px hors du disque.
   Apres : disque de 36 px a anneau blanc de 3 px, degrade doux de la couleur du type, icone de 20 px au trait plein, compte dans une pastille
   blanche de 20 px a l'encre du type (couleur du type assombrie, AA), posee au bord bas-droit (3 px hors du disque, jamais hors de la zone tactile de 44 px). */
.pxdm7-pin{width:36px;height:36px;margin:4px;background:var(--pxdm7-c,#1E9B52);box-shadow:0 0 0 3px #fff,0 5px 12px rgba(1,40,39,.28),0 1px 3px rgba(1,40,39,.2);}
.pxdm7-pin svg{width:20px;height:20px;stroke-width:2.2;filter:drop-shadow(0 1px 1px rgba(1,40,39,.25));}
.pxdm7-pin--on{transform:scale(1.14);box-shadow:0 0 0 3px #fff,0 0 0 6px color-mix(in srgb,var(--pxdm7-c,#1E9B52) 38%,transparent),0 8px 16px rgba(1,40,39,.34);}
.pxdm7-pin__n{top:-6px;right:-6px;bottom:auto;min-width:17px;height:17px;padding:0 4px;color:color-mix(in srgb,var(--pxdm7-c,#1E9B52) 52%,#000);font:800 10px/17px Urbanist,system-ui,sans-serif;letter-spacing:-.01em;box-shadow:0 0 0 1.5px var(--pxdm7-c,#1E9B52),0 2px 5px rgba(1,40,39,.3);}
.pxdm7-pin--idea{background:#fff;color:var(--pxdm7-c,#1E9B52);box-shadow:0 0 0 3px var(--pxdm7-c,#1E9B52),0 5px 12px rgba(1,40,39,.26),0 1px 3px rgba(1,40,39,.18);}
.pxdm7-pin--idea.pxdm7-pin--on{box-shadow:0 0 0 3px var(--pxdm7-c,#1E9B52),0 0 0 7px color-mix(in srgb,var(--pxdm7-c,#1E9B52) 30%,transparent),0 8px 16px rgba(1,40,39,.32);}
.pxdm7-pin--preview{width:38px;height:38px;margin:3px;box-shadow:0 0 0 3px #fff,0 0 0 5px rgba(30,155,82,.45),0 6px 14px rgba(1,40,39,.34);}
/* (4) Pointe vers le bas (planche M7A-08, proposition A « la pastille », retenue par Leo) : petit triangle de la couleur du type sous le disque,
   cerclé de blanc comme le disque (::before blanc, ::after couleur). Le repère géographique est la pointe (ancre Leaflet), plus le centre du disque.
   Les idées de la wishlist gardent leur anneau de couleur sur fond blanc : leur pointe est de la couleur du type, sans cerne blanc. */
.pxdm7-pin::before,.pxdm7-pin::after{content:"";position:absolute;left:50%;width:0;height:0;border-style:solid;border-color:transparent;transform:translateX(-50%);}
.pxdm7-pin::before{bottom:-12px;border-width:12px 9px 0;border-top-color:#fff;}
.pxdm7-pin::after{bottom:-9px;border-width:9px 6px 0;border-top-color:var(--pxdm7-c,#1E9B52);}
.pxdm7-pin--idea::before{display:none;}
.pxdm7-pin--idea::after{bottom:-10px;}
.pxdm7-pin--preview::before,.pxdm7-pin--preview::after{display:none;}
/* (5) Icone BLANCHE sur la couleur pleine du type, quelle que soit la couche (planche M7A-08 A). Les repères des PROPOSITIONS de Pixi passent par
   createMarkerIcon puis reçoivent style="color:<type>" sur le <svg> et la règle 34-map.css « .pxd-marker--proposal svg > path {fill:#fff;stroke:currentColor;
   stroke-dasharray} », pensée pour l'ancienne goutte évidée : sur la pastille pleine, l'icône sortait orange sur orange. L'inline est battu par !important ;
   le tracé reprend l'icône pleine blanche. Les propositions se distinguent désormais par un anneau pointillé de la couleur du type autour de la pastille.
   L'ampoule d'idée (--idea) garde la couleur du type sur fond blanc. */
body .pxdm7-pin:not(.pxdm7-pin--idea) svg{color:#fff !important;stroke:#fff;}
body .pxdm7-pin:not(.pxdm7-pin--idea) svg > *{stroke:#fff;}
body .pxd-marker--proposal .pxdm7-pin:not(.pxdm7-pin--idea) svg > path{fill:none;stroke:#fff;stroke-width:2.2;stroke-dasharray:none;}
body .pxdm7-pin--idea svg{color:var(--pxdm7-c,#1E9B52);}
body .pxd-marker--proposal .pxdm7-pin{outline:2px dashed var(--pxdm7-c,#1E9B52);outline-offset:4px;}

/* ─────────────────────────────────────────────────────────────────
   53-groupe-fiche.css — Bloc « Le groupe » du hub (M-4, planches M4B-03 / M4B-07)
   Préfixe unique : .pxdg-*   Le bloc n'existe dans le DOM que si window.pxd.groupFiche === true (option éteinte par défaut).
   Vert Pixidia seul (#208D3E, #0b7a52), cibles tactiles 44 px, aucun title=, mouvement réduit respecté.
   Scope .pxdg-bloc : BuddyX repeint les boutons nus (G5/P21-P23), box-shadow explicite (G3/P1).
   ───────────────────────────────────────────────────────────────── */

.pxdg-bloc {
    --pxdg-ink: #17302a;
    --pxdg-mute: #5d7070;
    --pxdg-line: rgba(1, 40, 39, 0.1);
    --pxdg-green: #208D3E;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    margin: 0 0 16px;
    padding: 16px 18px;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(10, 61, 58, 0.06), 0 6px 20px -12px rgba(10, 61, 58, 0.18);
    color: var(--pxdg-ink);
    overflow-wrap: anywhere;
}

.pxdg-bloc[hidden] { display: none; }
.pxdg-bloc *, .pxdg-bloc *::before, .pxdg-bloc *::after { box-sizing: border-box; }

.pxdg-bloc .pxdg-titre {
    margin: 0 0 4px;
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--pxdg-ink);
}

.pxdg-bloc .pxdg-sous-titre {
    margin: 0 0 8px;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--pxdg-ink);
}

.pxdg-bloc .pxdg-liste { margin: 0; padding: 0; list-style: none; }

.pxdg-bloc .pxdg-membre {
    list-style: none;
    margin: 0;
    padding: 10px 0;
    border-bottom: 1px solid var(--pxdg-line);
}
.pxdg-bloc .pxdg-membre:last-child { border-bottom: 0; }

.pxdg-bloc .pxdg-ligne { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.pxdg-bloc .pxdg-col { flex: 1; min-width: 0; }

.pxdg-bloc .pxdg-avatar {
    flex: none;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3DBE73, #1E9B52);
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(30, 155, 82, 0.35);
}

.pxdg-bloc .pxdg-nom { margin: 0; font-size: 14.5px; font-weight: 700; color: var(--pxdg-ink); }
.pxdg-bloc .pxdg-moi { margin: 1px 0 0; font-size: 12.5px; font-weight: 500; color: var(--pxdg-mute); }

.pxdg-bloc .pxdg-texte {
    margin: 4px 0 0 52px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.45;
    color: #1a2e2e;
    white-space: pre-line;
}
.pxdg-bloc .pxdg-texte--vide,
.pxdg-bloc .pxdg-texte--neutre { color: var(--pxdg-mute); font-style: italic; }

.pxdg-bloc .pxdg-form { margin: 8px 0 0 52px; }
.pxdg-bloc .pxdg-label { display: block; margin: 0 0 6px; font-size: 14px; font-weight: 700; color: var(--pxdg-ink); }

.pxdg-bloc .pxdg-champ {
    display: block;
    width: 100%;
    min-height: 88px;
    padding: 10px 12px;
    font: inherit;
    font-size: 16px; /* évite le zoom automatique d'iOS */
    line-height: 1.45;
    color: var(--pxdg-ink);
    background: #fff;
    border: 1px solid rgba(1, 40, 39, 0.22);
    border-radius: 10px;
    box-shadow: none;
    resize: vertical;
}
.pxdg-bloc .pxdg-champ[aria-invalid="true"] { border-color: #b3261e; }

.pxdg-bloc .pxdg-compteur { margin: 4px 0 8px; font-size: 12.5px; color: var(--pxdg-mute); text-align: right; }
.pxdg-bloc .pxdg-compteur--trop { color: #b3261e; font-weight: 700; }

.pxdg-bloc button.pxdg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 18px;
    border: 1px solid rgba(1, 40, 39, 0.12);
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.78);
    color: #0b7a52;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: none;
    transition: background-color 0.2s ease, transform 0.2s ease;
}
.pxdg-bloc button.pxdg-btn--principal {
    background: var(--pxdg-green);
    border-color: var(--pxdg-green);
    color: #fff;
}
.pxdg-bloc button.pxdg-btn:hover { transform: translateY(-1px); }
.pxdg-bloc button.pxdg-btn:disabled { opacity: 0.6; cursor: default; transform: none; }
.pxdg-bloc button.pxdg-btn:focus-visible,
.pxdg-bloc .pxdg-champ:focus-visible { outline: 2px solid var(--pxdg-green); outline-offset: 2px; }

.pxdg-bloc .pxdg-statut { margin: 8px 0 0; min-height: 1.2em; font-size: 13px; color: #0b7a52; }
.pxdg-bloc .pxdg-statut--erreur { color: #b3261e; }
.pxdg-bloc .pxdg-etat { margin: 4px 0 12px; font-size: 14px; color: var(--pxdg-mute); }

/* M-061 : section « Organisation du voyage » (organisateur seul). */
.pxdg-bloc .pxdg-sect { margin: 12px 0 0; padding: 12px 0 0; border-top: 1px solid var(--pxdg-line); }
.pxdg-bloc .pxdg-sect .pxdg-form { margin: 8px 0 0; }
.pxdg-bloc .pxdg-choix { margin: 0 0 8px; padding: 0; border: 0; min-width: 0; }
.pxdg-bloc .pxdg-choix legend { padding: 0; }
.pxdg-bloc .pxdg-option { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 4px; font-size: 14.5px; font-weight: 600; color: var(--pxdg-ink); cursor: pointer; }
.pxdg-bloc .pxdg-option input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--pxdg-green); }
.pxdg-bloc .pxdg-option input:focus-visible { outline: 2px solid var(--pxdg-green); outline-offset: 2px; }
.pxdg-bloc .pxdg-sect button.pxdg-btn { margin: 4px 8px 0 0; }

/* M-019 : section « Enfants du voyage » (âge seul). */
.pxdg-bloc .pxdg-enfant { list-style: none; margin: 0; padding: 8px 0; border-bottom: 1px solid var(--pxdg-line); }
.pxdg-bloc .pxdg-enfant:last-child { border-bottom: 0; }
.pxdg-bloc .pxdg-enfant .pxdg-ligne { min-height: 0; }
.pxdg-bloc .pxdg-enfant .pxdg-form { margin: 8px 0 0; }
.pxdg-bloc .pxdg-champ.pxdg-champ--age { min-height: 44px; width: 100%; max-width: 140px; resize: none; }
.pxdg-bloc .pxdg-enf-form .pxdg-champ--age { margin: 0 0 8px; }
.pxdg-bloc .pxdg-enfants > .pxdg-form { margin: 8px 0 0; }

/* Téléphone : une colonne, boutons pleine largeur de 44 px, texte sous la ligne du membre. */
@media (max-width: 767px) {
    .pxdg-bloc { padding: 14px 14px; }
    .pxdg-bloc .pxdg-texte, .pxdg-bloc .pxdg-form { margin-left: 0; }
    .pxdg-bloc button.pxdg-btn { width: 100%; }
    .pxdg-bloc .pxdg-sect button.pxdg-btn { margin-right: 0; }
    .pxdg-bloc .pxdg-champ.pxdg-champ--age { max-width: none; }
}

@media (min-width: 1024px) {
    .pxdg-bloc .pxdg-form { max-width: 560px; }
}

@media (prefers-reduced-motion: reduce) {
    .pxdg-bloc, .pxdg-bloc * { transition: none !important; animation: none !important; }
    .pxdg-bloc button.pxdg-btn:hover { transform: none; }
}

/* ── Modale « Votre groupe » et ses deux entrées (retour de Léo 12/11 01:15 ; planches Groupe, GroupeTelephone, Acces) ───────────── */
/* (a) Bouton rond du hero, juste après Favoris : dégradé #0fa36b → #38c19c, icône blanche. */
#hero-actions .pxdg-hero-btn,
.pxdg-hero-btn {
    color: #fff;
    background: linear-gradient(135deg, #0fa36b 25%, #38c19c 100%);
    border-color: transparent;
    box-shadow: 0 6px 16px -6px rgba(15, 163, 107, 0.6);
}

#hero-actions .pxdg-hero-btn:hover,
.pxdg-hero-btn:hover {
    filter: brightness(1.06);
}

/* (b) Icône ronde de 26 px à droite du titre « VOYAGEURS » de l'infocard. */
.pxditcrd-content:has(> .pxdg-trav-btn) {
    position: relative;
}

.pxdg-trav-btn {
    position: absolute;
    top: 0;
    right: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: #0b7a4a;
    background: #e7f8ee;
    cursor: pointer;
}

.pxdg-trav-btn svg {
    width: 14px;
    height: 14px;
}

.pxdg-trav-btn:hover,
.pxdg-trav-btn:focus-visible {
    background: #cdeedb;
}

/* La modale : verre, Urbanist, feuille sur téléphone. */
.pxdg-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
    font-family: Urbanist, system-ui, sans-serif;
    background: rgba(1, 40, 39, 0.55);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.pxdg-modal {
    display: flex;
    flex-direction: column;
    width: min(880px, 100%);
    max-height: calc(100vh - 48px);
    overflow: hidden;
    border-radius: 28px;
    background: linear-gradient(180deg, #eaf6ef 0, #ffffff 160px);
    box-shadow: 0 40px 90px -30px rgba(1, 40, 39, 0.6);
}

.pxdg-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 24px 28px 8px;
}

.pxdg-modal-eyebrow {
    margin: 0 0 4px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #0b7a4a;
}

.pxdg-modal-titre {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 800;
    color: #012827;
}

.pxdg-modal-close {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: #012827;
    background: #fff;
    box-shadow: 0 2px 8px rgba(10, 61, 58, 0.18);
    cursor: pointer;
}

.pxdg-modal-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 8px 28px 28px;
}

/* La lecture de Pixi (phrase de synthèse rendue aux membres, jamais chiffrée). */
.pxdg-reading {
    margin: 0 0 18px;
    padding: 18px 20px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.86);
    box-shadow: 0 1px 3px rgba(10, 61, 58, 0.08), 0 14px 30px -20px rgba(10, 61, 58, 0.3);
}

.pxdg-reading-k {
    margin: 0 0 8px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #0b7a4a;
}

.pxdg-reading-text {
    margin: 0;
    font-size: 1rem;
    line-height: 1.55;
    color: #012827;
    white-space: pre-line;
}

.pxdg-reading-fine {
    margin: 12px 0 0;
    font-size: 0.78rem;
    color: #5d7070;
}

/* La fiche n'est plus une carte posée dans la page : dans la modale elle n'a ni cadre, ni marge, ni fond propres. */
.pxdg-modal .pxdg-bloc {
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}

/* Le titre « Le groupe » de la fiche existe encore pour l'accessibilité, mais la modale a déjà le sien. */
.pxdg-modal .pxdg-bloc > .pxdg-titre {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

@media (max-width: 767px) {
    .pxdg-modal-overlay {
        align-items: flex-end;
        padding: 0;
    }

    .pxdg-modal {
        width: 100%;
        max-height: 94vh;
        border-radius: 24px 24px 0 0;
    }

    .pxdg-modal-head {
        padding: 18px 18px 6px;
    }

    .pxdg-modal-body {
        padding: 6px 18px 24px;
    }
}

/* Audit esthétique D12 : le jour du calendrier du programme n'a plus le contour bleu du navigateur ; focus vert arrondi comme le reste (P21 : préfixe body + !important). */
body .pxd-cal-day:focus {
    outline: none !important;
}

body .pxd-cal-day:focus-visible,
body .pxd-cal-day.selected:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 3px #fff, 0 0 0 5px #1E9B52 !important;
    border-radius: 10px;
}

/* ── Portrait du groupe dans la modale (lot B, planches Groupe, GroupeTelephone) : verre, Urbanist, avatars de couleur, aucun select ni radio natif ─── */
.pxdg-band {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 18px;
    align-items: start;
    margin-bottom: 18px;
}

.pxdg-band-people[hidden],
.pxdg-band-reading:empty {
    display: none;
}

.pxdg-band:not(:has(.pxdg-band-people:not([hidden]))) {
    grid-template-columns: 1fr;
}

.pxdg-people-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.pxdg-person {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 58px;
    padding: 6px 4px;
    border: 0;
    border-radius: 16px;
    font: inherit;
    color: #012827;
    background: transparent;
    cursor: pointer;
}

.pxdg-person[aria-pressed="true"],
.pxdg-person:hover,
.pxdg-person:focus-visible {
    background: #e7f8ee;
}

.pxdg-person-name {
    font-size: 0.82rem;
    font-weight: 700;
}

.pxdg-person-tag {
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 0.68rem;
    color: #5d7070;
    background: rgba(1, 40, 39, 0.06);
}

.pxdg-people-help {
    margin: 10px 0 0;
    font-size: 0.78rem;
    color: #5d7070;
}

.pxdg-av {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    font-size: 1.05rem;
    font-weight: 800;
    color: #fff;
    background: #1E9B52;
    box-shadow: 0 0 0 3px #fff, 0 4px 10px rgba(10, 61, 58, 0.18);
}

.pxdg-av--sm {
    width: 26px;
    height: 26px;
    font-size: 0.72rem;
    box-shadow: 0 0 0 2px #fff;
}

.pxdg-av.is-pending {
    color: #5d7070;
    background: #eef2f0;
    box-shadow: 0 0 0 2px #fff, inset 0 0 0 1.5px rgba(93, 111, 111, 0.4);
    border-style: dashed;
}

.pxdg-duo {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    margin-bottom: 18px;
}

.pxdg-duo.has-rosace {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: start;
}

.pxdg-duo-rosace:empty {
    display: none;
}

.pxdg-sec-head {
    margin: 0 0 10px;
}

.pxdg-sec-titre {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    color: #012827;
}

.pxdg-sec-aide {
    margin: 2px 0 8px;
    font-size: 0.78rem;
    color: #5d7070;
}

.pxdg-sec {
    margin: 0 0 22px;
}

.pxdg-rosace-svg {
    display: block;
    width: 100%;
    height: auto;
    max-height: 460px;
    font-family: Urbanist, system-ui, sans-serif;
}

.pxdg-rosace-ring {
    fill: none;
    stroke: rgba(30, 155, 82, 0.2);
    stroke-dasharray: 3 5;
}

.pxdg-petal-shape {
    fill: #e3eefc;
    stroke: #9ec5f4;
    stroke-width: 1.2;
}

.pxdg-petal-label {
    font-size: 12px;
    font-weight: 700;
    fill: #012827;
}

.pxdg-petal-names {
    font-size: 11px;
    font-weight: 600;
    fill: #2f7fd8;
}

.pxdg-petal-ini {
    font-size: 10px;
    font-weight: 800;
    fill: #fff;
}

.pxdg-core-disc {
    fill: #fff;
    stroke: #1E9B52;
    stroke-width: 2.5;
}

.pxdg-core-k {
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    fill: #0b7a4a;
}

.pxdg-core-l {
    font-size: 13px;
    font-weight: 800;
    fill: #012827;
}

.pxdg-facons-card {
    padding: 4px 18px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 1px 3px rgba(10, 61, 58, 0.08), 0 16px 34px -22px rgba(10, 61, 58, 0.35);
}

.pxdg-way {
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr) 190px;
    gap: 14px;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid rgba(1, 40, 39, 0.08);
}

.pxdg-way:last-child {
    border-bottom: 0;
}

.pxdg-way-titre {
    margin: 0 0 6px;
    font-size: 0.95rem;
    font-weight: 800;
    color: #012827;
}

.pxdg-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
}

.pxdg-badge--together { color: #0b7a4a; background: #e1f5e9; }
.pxdg-badge--split { color: #8a5a00; background: #fff1cc; }
.pxdg-badge--parallel { color: #1f5fa8; background: #e1edfb; }

.pxdg-levels {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.pxdg-level {
    padding: 8px 10px;
    border-radius: 12px;
    background: #f4f8f5;
    box-shadow: inset 0 0 0 1px rgba(1, 40, 39, 0.07);
}

.pxdg-level.is-empty {
    background: #eef2f0;
}

.pxdg-level-name {
    margin: 0 0 6px;
    font-size: 0.74rem;
    font-weight: 700;
    color: #012827;
}

.pxdg-level-none {
    margin: 0;
    font-size: 0.74rem;
    color: #8a9a9a;
}

.pxdg-level-av {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.pxdg-reco {
    padding-left: 14px;
    border-left: 1px solid rgba(1, 40, 39, 0.1);
}

.pxdg-reco-k {
    margin: 0 0 4px;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #0b7a4a;
}

.pxdg-reco-t {
    margin: 0;
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1.35;
    color: #012827;
}

.pxdg-pas {
    margin: 10px 0 0;
    font-size: 0.8rem;
    color: #5d7070;
}

.pxdg-budget-card {
    padding: 18px 20px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 1px 3px rgba(10, 61, 58, 0.08), 0 16px 34px -22px rgba(10, 61, 58, 0.35);
}

.pxdg-budget-k {
    margin: 0 0 6px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #5d7070;
}

.pxdg-budget-big {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 12px;
    margin: 0 0 12px;
}

.pxdg-budget-num {
    font-size: 2rem;
    font-weight: 800;
    color: #012827;
}

.pxdg-budget-sub {
    font-size: 0.85rem;
    color: #5d7070;
}

.pxdg-budget-rep {
    margin: 0 0 8px;
    font-size: 0.78rem;
    font-weight: 700;
    color: #012827;
}

.pxdg-bar {
    display: flex;
    height: 14px;
    overflow: hidden;
    border-radius: 999px;
    background: #e3f3e9;
}

.pxdg-bar-seg--1 { background: #1E9B52; }
.pxdg-bar-seg--2 { background: #7fd8bd; }
.pxdg-bar-seg--3 { background: #c8efdf; }

.pxdg-bar-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 28px;
    margin-top: 8px;
}

.pxdg-bar-item {
    display: flex;
    flex-direction: column;
    font-size: 0.8rem;
}

.pxdg-bar-val {
    font-weight: 800;
    color: #012827;
}

.pxdg-bar-name {
    color: #5d7070;
}

.pxdg-contraintes-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.pxdg-contrainte {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 1px 3px rgba(10, 61, 58, 0.08);
}

.pxdg-contrainte-t {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 700;
    color: #012827;
}

.pxdg-contrainte-par {
    font-weight: 500;
    color: #5d7070;
}

.pxdg-pied {
    margin: 4px 0 0;
    padding-top: 12px;
    font-size: 0.78rem;
    color: #0b7a4a;
    border-top: 1px solid rgba(1, 40, 39, 0.08);
}

.pxdg-apart {
    margin-top: 12px;
    padding: 12px 16px;
    border-radius: 16px;
    background: #fff1cc;
}

.pxdg-apart-k {
    margin: 0 0 2px;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8a5a00;
}

.pxdg-apart-t {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 700;
    color: #012827;
}

/* « Ce que le groupe voit de toi » : interrupteurs maison (jamais de case ni de radio natifs), cibles de 44 px. */
.pxdg-voit {
    margin-top: 16px;
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.86);
    box-shadow: 0 1px 3px rgba(10, 61, 58, 0.08);
}

.pxdg-voit-titre {
    margin: 0 0 4px;
    font-size: 0.95rem;
    font-weight: 800;
    color: #012827;
}

.pxdg-voit-aide {
    margin: 0 0 10px;
    font-size: 0.78rem;
    color: #5d7070;
}

.pxdg-voit-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 8px 0;
    border-top: 1px solid rgba(1, 40, 39, 0.08);
}

.pxdg-voit-label {
    margin: 0;
    font-size: 0.88rem;
    font-weight: 700;
    color: #012827;
}

.pxdg-voit-sub,
.pxdg-voit-help {
    margin: 2px 0 0;
    font-size: 0.76rem;
    color: #5d7070;
}

.pxdg-voit-status {
    min-height: 1.1em;
    margin: 8px 0 0;
    font-size: 0.78rem;
    color: #0b7a4a;
}

.pxdg-switch {
    position: relative;
    flex: none;
    width: 52px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    cursor: pointer;
}

.pxdg-switch::before {
    content: "";
    position: absolute;
    top: 9px;
    left: 0;
    right: 0;
    height: 26px;
    border-radius: 999px;
    background: #cfd8d5;
    transition: background-color 0.18s ease;
}

.pxdg-switch.is-on::before {
    background: #1E9B52;
}

.pxdg-switch-knob {
    position: absolute;
    top: 12px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(10, 61, 58, 0.3);
    transition: transform 0.18s ease;
}

.pxdg-switch.is-on .pxdg-switch-knob {
    transform: translateX(26px);
}

.pxdg-switch:disabled {
    opacity: 0.6;
    cursor: progress;
}

.pxdg-switch:focus-visible {
    outline: 2px solid #1E9B52;
    outline-offset: 2px;
}

.is-dim {
    opacity: 0.35;
}

@media (max-width: 767px) {
    .pxdg-band,
    .pxdg-duo.has-rosace {
        grid-template-columns: 1fr;
    }

    .pxdg-way {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .pxdg-reco {
        padding-left: 0;
        border-left: 0;
    }

    .pxdg-levels {
        gap: 6px;
    }

    .pxdg-contraintes-grid {
        grid-template-columns: 1fr;
    }
}

/* Bloc « Partager le voyage » de la fenêtre du + Voyageurs (planche M2B-01) : deux cartes, champ en lecture seule, bouton Partager vert à pastille blanche. */
.pxd-invlink {
    margin: 0 0 18px;
    font-family: Urbanist, system-ui, sans-serif;
}

.pxd-invlink-titre {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
    color: #012827;
}

.pxd-invlink-sous {
    margin: 2px 0 12px;
    font-size: 0.86rem;
    color: #3f5757;
}

.pxd-invlink-card {
    margin: 0 0 10px;
    padding: 14px 16px;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(10, 61, 58, 0.08), 0 14px 30px -22px rgba(10, 61, 58, 0.35);
}

.pxd-invlink-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.pxd-invlink-k {
    margin: 0 0 8px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #5d7070;
}

.pxd-invlink-head .pxd-invlink-k {
    margin: 0;
}

.pxd-invlink-badge {
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 700;
    color: #0b7a4a;
    background: #eef6f1;
}

.pxd-invlink-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pxd-invlink-field {
    flex: 1 1 auto;
    min-width: 0;
    box-sizing: border-box;
    height: 46px;
    padding: 0 16px;
    border: 0;
    border-radius: 999px;
    font: inherit;
    font-size: 0.92rem;
    color: #012827;
    background: #eef2f0;
}

.pxd-invlink-field:focus-visible {
    outline: 2px solid #1E9B52;
    outline-offset: 2px;
}

.pxd-invlink-btn {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 10px;
    height: 46px;
    padding: 0 6px 0 18px;
    border: 0;
    border-radius: 999px;
    font: inherit;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #0fa36b 25%, #1E9B52 100%);
    box-shadow: 0 10px 22px -10px rgba(15, 163, 107, 0.7);
    cursor: pointer;
}

.pxd-invlink-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    color: #0b7a4a;
    background: #fff;
}

.pxd-invlink-ico svg {
    width: 17px;
    height: 17px;
}

.pxd-invlink-btn:focus-visible {
    outline: 2px solid #012827;
    outline-offset: 2px;
}

.pxd-invlink-msg {
    margin: 0;
    padding: 12px 14px;
    border-radius: 14px;
    font-size: 0.92rem;
    line-height: 1.5;
    color: #012827;
    background: #e9f6ee;
    box-shadow: inset 0 0 0 1px rgba(30, 155, 82, 0.25);
    white-space: pre-line;
    overflow-wrap: anywhere;
}

@media (max-width: 767px) {
    .pxd-invlink-row {
        flex-direction: column;
        align-items: stretch;
    }

    .pxd-invlink-btn {
        justify-content: center;
    }
}

/* Audit esthétique D29 : transfert d'organisation, cartes de choix du design system à la place des radios natifs. */
.pxdg-bloc .pxdg-choix-liste {
    display: grid;
    gap: 8px;
    margin: 6px 0 8px;
}

.pxdg-bloc button.pxdg-card-choix {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 48px;
    padding: 0 14px;
    border: 1px solid rgba(1, 40, 39, 0.14);
    border-radius: 14px;
    font: inherit;
    font-size: 14.5px;
    font-weight: 700;
    text-align: left;
    color: #012827;
    background: #fff;
    cursor: pointer;
}

.pxdg-bloc button.pxdg-card-choix:hover {
    background: #f1faf4;
}

.pxdg-bloc button.pxdg-card-choix.is-on {
    border-color: #1E9B52;
    background: #e7f8ee;
    box-shadow: 0 0 0 2px rgba(30, 155, 82, 0.25);
}

.pxdg-bloc button.pxdg-card-choix:focus-visible {
    outline: 2px solid #1E9B52;
    outline-offset: 2px;
}

.pxdg-card-coche {
    position: relative;
    flex: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid rgba(1, 40, 39, 0.3);
    background: #fff;
}

.pxdg-card-choix.is-on .pxdg-card-coche {
    border-color: #1E9B52;
    background: #1E9B52;
    box-shadow: inset 0 0 0 4px #fff;
}

/* Audit D30 : la route de l'infocard Destination ne se coupe plus (départ → flèche → destination sur une ligne, les noms passent à la ligne DANS leur case). */
.pxditcrd-location-flow {
    flex-wrap: nowrap;
}

.pxditcrd-departure-name,
.pxditcrd-destination-name {
    flex: 0 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

.pxditcrd-arrow {
    flex: none;
}

/* Audit D32 : à l'ordinateur la dernière pastille de filtre de la wishlist n'est plus coupée par la zone du tri : les pastilles passent à la ligne. */
@media (min-width: 768px) {
    #pxd-wishlist.pxdw7-on .pxdw7-chips {
        flex-wrap: wrap;
        overflow: visible;
    }
}

/* Audit esthétique D33 (téléphone) : la rangée d'actions du hero (jusqu'à 11 boutons avec « Votre groupe » et l'aide de T) ne laisse plus « Supprimer » seul sur une 2e ligne :
   deux rangées régulières de 6 boutons, centrées ; la suppression garde sa place (décision de produit après le lancement). */
@media (max-width: 767px) {
    body .pxd-hero-actions-wrap {
        overflow: visible;
    }

    body .pxd-hero-actions-wrap .pxd-hero-actions {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
        max-width: 280px;
        margin-inline: auto;
        overflow: visible;
    }

    body .pxd-hero-actions-wrap .pxd-hero-actions .pxd-btn-icon {
        width: 40px;
        height: 40px;
        flex: none;
    }

    body .pxd-hero-actions-wrap .pxd-hero-actions .pxd-hero-actions-sep {
        display: none;
    }
}

/* Audit esthétique D34 (tablette) : tant que la carte est ouverte en feuille (moitié ou plein), le défilement de html et du body est verrouillé : plus de barre de défilement
   native grise de la page sur toute la droite derrière la carte, et plus de page qui bouge sous le doigt. « Peek » (petite poignée) laisse la page défiler. */
@media (max-width: 1024px) {
    html:has(#pxd-panel-right.pxd-map-full),
    html:has(#pxd-panel-right.pxd-map-half),
    body.pxd-map-visible:has(#pxd-panel-right.pxd-map-full),
    body.pxd-map-visible:has(#pxd-panel-right.pxd-map-half) {
        overflow: hidden;
        overscroll-behavior: none;
    }
}

/* Audit D35 : phrase sous la grille météo quand certains jours du séjour n'ont pas encore de prévision. */
.wx3-nd-note {
    grid-column: 1 / -1;
    margin: 6px 0 0;
    font-size: 0.8rem;
    color: #5d7070;
}

/* Audit esthétique D13 (téléphone) : la grille de photos du choix d'image n'est plus coupée à 55 vh avec du vide dessous ; la fenêtre défile UNE fois. */
@media (max-width: 767px) {
    .pxd-modal--image .pxd-img-tab-content {
        max-height: none;
        overflow-y: visible;
    }
}

/* Audit esthétique D14 : plus de croix bleue NATIVE du navigateur dans les champs de recherche de la page (la croix du design system fait foi). */
body input[type="search"]::-webkit-search-cancel-button,
body input[type="search"]::-webkit-search-decoration,
body input[type="search"]::-webkit-search-results-button,
body input[type="search"]::-webkit-search-results-decoration {
    -webkit-appearance: none;
    appearance: none;
    display: none;
}

/* Audit esthétique D16 : au clavier, le focus d'un lien d'une carte (titre, adresse) n'est plus un cadre rectangulaire coupé sur deux lignes ; la CARTE entière prend le focus vert arrondi. */
body .pxdc-card a:focus,
body .pxdc-card a:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

body .pxdc-card:has(a:focus-visible) {
    box-shadow: 0 0 0 3px #fff, 0 0 0 5px #1E9B52 !important;
    border-radius: 16px;
}

/* Audit esthétique D17 : dans le panneau de gauche, les trois colonnes de Réservations ne tronquent plus les titres (« Museo Archeolo... ») : retour à la ligne, et une colonne de moins quand la place manque. */
body .pxd-res-item .pxd-res-title {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
}

body .pxd-res-item {
    align-items: flex-start;
}

@media (min-width: 768px) and (max-width: 1500px) {
    body .pxd-res-columns,
    body .pxd-reservations-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Phrase d'information sous le titre de la modale et son lien vers le panneau de consentement (règle de H). */
.pxdg-modal-intro {
    max-width: 640px;
    margin: 6px 0 0;
    font-size: 0.82rem;
    line-height: 1.45;
    color: #3f5757;
}

.pxdg-modal-link {
    display: inline;
    padding: 0;
    border: 0;
    font: inherit;
    font-weight: 700;
    color: #0b7a4a;
    background: none;
    text-decoration: underline;
    cursor: pointer;
}

.pxdg-modal-link:focus-visible {
    outline: 2px solid #1E9B52;
    outline-offset: 2px;
    border-radius: 4px;
}

/* Audit esthétique D26 : plus de petites flèches grises NATIVES du champ numérique des pourcentages du budget (la valeur se saisit ou se règle au curseur). */
.pxd-alloc-input {
    -moz-appearance: textfield;
    appearance: textfield;
}

.pxd-alloc-input::-webkit-inner-spin-button,
.pxd-alloc-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}

/* Recette p04-D04 / audit D05 (téléphone) : SANS capsule de recherche (compte hors cohorte), la pastille « N propositions » (top 12 px, z 1201) recouvrait le bouton « Tout le voyage »
   (top 8 px, 44 px de haut). Elle passe SOUS lui ; avec la capsule, les règles de 52-map-ideas.css (plus spécifiques) la placent déjà sous la capsule. */
@media (max-width: 768px) {
    body .pxd-map-container .pxd-map-proposals {
        top: 58px;
        right: 56px;
    }
}

/* Audit esthétique D27 : « Supprimer » un enfant n'est plus vert comme « Modifier l'âge » : style danger du design system, et la confirmation « Oui, supprimer » est pleine. */
.pxdg-bloc button.pxdg-btn.pxdg-btn--danger {
    color: #b42318;
    background: #fff;
    border-color: rgba(180, 35, 24, 0.45);
}

.pxdg-bloc button.pxdg-btn.pxdg-btn--danger:hover,
.pxdg-bloc button.pxdg-btn.pxdg-btn--danger:focus-visible {
    background: #fdecea;
}

.pxdg-bloc button.pxdg-btn.pxdg-btn--danger-plein {
    color: #fff;
    background: #b42318;
    border-color: #b42318;
}

.pxdg-bloc button.pxdg-btn.pxdg-btn--danger-plein:hover,
.pxdg-bloc button.pxdg-btn.pxdg-btn--danger-plein:focus-visible {
    background: #912018;
}

/* Audit esthétique D40 : dans la fiche d'un pin de proposition, « Ajouter » est l'action PRINCIPALE (dégradé vert, texte blanc) ; « Voir sur Google Maps » (et tout autre lien de la fiche)
   devient un lien secondaire sobre : plus deux boutons blancs bordés identiques. */
.leaflet-popup .pxd-proposal-card button.pxd-popup-cta[data-pxd-proposal-add] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    border: 0;
    border-radius: 999px;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, #0fa36b 25%, #1E9B52 100%);
    box-shadow: 0 10px 22px -12px rgba(15, 163, 107, 0.8);
}

.leaflet-popup .pxd-proposal-card button.pxd-popup-cta[data-pxd-proposal-add]:hover {
    filter: brightness(1.06);
}

.leaflet-popup .pxd-proposal-card a.pxd-popup-cta {
    display: inline-flex;
    margin-top: 8px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: #0b7a4a;
    font-weight: 700;
    text-decoration: underline;
}

/* Audit esthétique D04, D09, D10, D12 (portés sur le tag de prod). */

/* D04 : la liste des heures de « Programmer » (rendue par le mu-plugin pixidia-itinerary-edit, .pxdim-tpop) laissait lire le calendrier derrière elle : fond plein et flou, la liste est autonome. */
body #pxdim .pxdim-tpop[role="dialog"] {
    background: #fff;
    -webkit-backdrop-filter: blur(20px) saturate(1.2);
    backdrop-filter: blur(20px) saturate(1.2);
    box-shadow: 0 24px 48px -16px rgba(13, 82, 74, 0.34), 0 4px 12px -4px rgba(13, 82, 74, 0.16);
}

/* D09 : choix « Inclure / Masquer le budget » en cartes. Les radios restent dans le DOM (mêmes id et name), masqués visuellement mais lisibles par le clavier et les lecteurs d'écran ; le focus se voit sur la carte. */
body #pdf-modal .pxd-pdf-option { position: relative; }
body #pdf-modal .pxd-pdf-option input[type="radio"] {
    display: block;
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    opacity: 0;
    -webkit-appearance: none;
    appearance: none;
}
body #pdf-modal .pxd-pdf-option .pxd-pdf-option-radio { display: none; }
body #pdf-modal .pxd-pdf-option::after {
    content: "";
    order: 3;
    flex: none;
    align-self: center;
    margin-left: auto;
    width: 22px;
    height: 22px;
    border-radius: 8px;
    border: 1.5px solid #c4ccd0;
    background: #fff center / 14px 14px no-repeat;
    transition: background-color 0.2s, border-color 0.2s;
}
body #pdf-modal .pxd-pdf-option:has(input[type="radio"]:checked) {
    border-color: #1E9B52;
    background: linear-gradient(115deg, rgba(209, 250, 229, 0.7), rgba(204, 251, 241, 0.45));
    box-shadow: inset 0 0 0 1px #1E9B52;
}
body #pdf-modal .pxd-pdf-option:has(input[type="radio"]:checked)::after {
    border-color: #1E9B52;
    background-color: #1E9B52;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
body #pdf-modal .pxd-pdf-option:has(input[type="radio"]:focus-visible) {
    outline: none;
    box-shadow: 0 0 0 3px #fff, 0 0 0 5px #1E9B52;
}

/* D10 : « Annuler » est un bouton secondaire actif (fond blanc, contour, texte lisible), distinct d'un bouton désactivé (gris plein, curseur interdit). */
body .pxd-modal-btn.pxd-modal-btn--cancel {
    background: #fff;
    color: #0b4a33;
    border: 1.5px solid rgba(1, 40, 39, 0.28);
}
body .pxd-modal-btn.pxd-modal-btn--cancel:hover {
    background: rgba(32, 141, 62, 0.08);
    border-color: #1E9B52;
    color: #0b4a33;
}
body .pxd-modal-btn.pxd-modal-btn--cancel:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px #fff, 0 0 0 5px #1E9B52;
}

/* D12 : anneau de focus vert arrondi du design system (comme la carte, D16) sur le jour du calendrier et sur le champ du chat ; plus de contour bleu du navigateur ni de double cadre. */
body .pxd-cal-day:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 3px #fff, 0 0 0 5px #1E9B52 !important;
}
body .pxd-chat-input textarea:focus,
body .pxd-chat-input textarea:focus-visible {
    outline: none !important;
    border-color: #1E9B52 !important;
    box-shadow: 0 0 0 3px #fff, 0 0 0 5px #1E9B52 !important;
}

/* Train 5, Votre groupe (D01, D04, D06, D08, D09, D03) : pied de la modale, icône Voyageurs à droite du libellé, cibles de 44 px, anneau de focus vert. */
.pxdg-modal-foot {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 28px;
    border-top: 1px solid rgba(1, 40, 39, 0.08);
    background: #f4f8f6;
}

.pxdg-modal-foot-txt {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 600;
    color: #0b7a4a;
}

.pxdg-modal-foot-btn {
    flex: none;
    min-height: 44px;
    padding: 0 22px;
    border: 0;
    border-radius: 999px;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, #0fa36b 25%, #38c19c 100%);
    box-shadow: 0 6px 16px -6px rgba(15, 163, 107, 0.6);
    cursor: pointer;
}

.pxdg-modal-foot-btn:hover {
    filter: brightness(1.06);
}

.pxdg-modal-foot-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px #fff, 0 0 0 5px #1E9B52;
}

@media (max-width: 768px) {
    .pxdg-modal-foot {
        padding: 12px 18px;
        flex-wrap: wrap;
    }
}

.pxdg-reading--wait .pxdg-reading-text {
    color: #5d7070;
}

.pxditcrd-content:has(> .pxdg-trav-btn) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 8px;
}

.pxditcrd-content:has(> .pxdg-trav-btn) > * {
    grid-column: 1 / -1;
}

.pxditcrd-content:has(> .pxdg-trav-btn) > .pxditcrd-travelers-label {
    grid-column: 1;
    grid-row: 1;
}

.pxditcrd-content > .pxdg-trav-btn {
    position: static;
    grid-column: 2;
    grid-row: 1;
}

@media (max-width: 768px) {
    #hero-actions .pxdg-hero-btn,
    #hero-group-btn {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
    }

    .pxditcrd-content > .pxdg-trav-btn {
        width: 44px;
        height: 44px;
        margin: -9px 0;
    }

    .pxditcrd-content > .pxdg-trav-btn svg {
        width: 18px;
        height: 18px;
    }
}

body .pxdg-modal .pxdg-champ:focus,
body .pxdg-modal .pxdg-champ:focus-visible,
body .pxdg-modal .pxdg-modal-close:focus,
body .pxdg-modal .pxdg-modal-close:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 3px #fff, 0 0 0 5px #1E9B52 !important;
    border-radius: 12px;
}

body .pxdg-modal .pxdg-modal-close:focus,
body .pxdg-modal .pxdg-modal-close:focus-visible {
    border-radius: 50%;
}

/* Train 5, tri de la wishlist (planche M7B) : lien texte « Trier : les plus votées » au lieu d'un bouton rond à icône seule ; anneau de focus vert arrondi collé au lien (plus de coins qui dépassent). */
#pxd-wishlist.pxdw7-on .pxdw7-sortbtn {
    width: auto;
    min-height: 44px;
    gap: 4px;
    padding: 0 6px;
    border-radius: 12px;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    color: #0b7a4a;
    background: transparent;
    box-shadow: none;
}

#pxd-wishlist.pxdw7-on .pxdw7-sortbtn .pxdw7-sortlbl {
    text-decoration: underline;
    text-underline-offset: 3px;
}

#pxd-wishlist.pxdw7-on .pxdw7-sortbtn svg {
    width: 16px;
    height: 16px;
}

#pxd-wishlist.pxdw7-on .pxdw7-sortbtn:hover,
#pxd-wishlist.pxdw7-on .pxdw7-sortbtn.is-open {
    color: #0b7a4a;
    background: #e7f8ee;
    box-shadow: none;
}

#pxd-wishlist.pxdw7-on .pxdw7-sortbtn:focus-visible {
    outline: none !important;
    border-radius: 12px;
    box-shadow: 0 0 0 3px #fff, 0 0 0 5px #1E9B52 !important;
}

/* « Chercher sur la carte » (wishlist) : halo vert bref de la capsule de recherche, et catégories du panneau d'aide. */
@keyframes pxdm7-halo {
    0% { box-shadow: 0 0 0 0 rgba(30, 155, 82, 0.65); }
    100% { box-shadow: 0 0 0 12px rgba(30, 155, 82, 0); }
}

.pxdm7-search.pxdm7-search--halo .pxdm7-search__bar {
    border-radius: 9999px;
    animation: pxdm7-halo 700ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
    .pxdm7-search.pxdm7-search--halo .pxdm7-search__bar {
        animation: none;
        box-shadow: 0 0 0 3px #1E9B52;
    }
}

.pxdm7-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pxdm7-cat {
    min-height: 44px;
}

/* Train 6 (recette du pilote en prod) : focus vert commun à toute la modale « Votre groupe », cibles de 44 px au téléphone, anneau du tri de la wishlist jamais rogné, verrou du défilement. */
body .pxdg-modal :focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 3px #fff, 0 0 0 5px #1E9B52 !important;
}

body .pxdg-modal .pxdg-person:focus-visible { border-radius: 16px; }
body .pxdg-modal .pxdg-av:focus-visible,
body .pxdg-modal .pxdg-switch:focus-visible,
body .pxdg-modal .pxdg-modal-foot-btn:focus-visible { border-radius: 999px; }
body .pxdg-modal .pxdg-modal-link:focus-visible,
body .pxdg-modal input:focus-visible { border-radius: 6px; }

@media (max-width: 768px) {
    body .pxdg-modal-overlay button,
    body .pxdg-modal-overlay [role="switch"],
    body .pxdg-modal-overlay [role="button"],
    body .pxdg-modal-overlay select,
    body .pxdg-modal-overlay input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    body .pxdg-modal-overlay [tabindex]:not([tabindex="-1"]) {
        min-width: 44px;
        min-height: 44px;
    }

    body .pxdg-modal-overlay a.pxdg-modal-link {
        display: inline-flex;
        align-items: center;
        min-width: 44px;
        min-height: 44px;
    }
}

#pxd-wishlist.pxdw7-on .pxdw7-bar {
    padding: 6px 6px 0;
    margin-bottom: 6px;
}

#pxd-wishlist.pxdw7-on .pxdw7-tools {
    padding: 0 0 0 4px;
}

html.pxdg-no-scroll,
body.pxdg-no-scroll {
    overflow: hidden !important;
    overscroll-behavior: none;
}

.pxdg-modal-overlay,
.pxdg-modal-overlay .pxdg-modal {
    overscroll-behavior: contain;
}