/*!
 * PAGE-PIXI L2 (refonte Pixi, 2026-09-23) : composants des cartes de reponse .pxipa-* (contrat L2 section 6).
 *
 * Feuille PARTAGEE : /pixi/ la charge sous le drapeau pixi_refonte_l2_enabled (apres pixi-tokens.css, avant
 * pixi-page-v2.css) ; le panneau d'itineraire la chargera en L3. Elle ne suppose donc JAMAIS .pixi-page comme
 * ancetre : tout est porte par .pxipa (la carte) ou par le prefixe .pxipa-*. Les jetons de page utilises
 * (--pxip-green-text, --pxip-soft, --pxip-amber-text, --pxip-danger) ont une valeur de repli identique.
 * Jetons requis : --pxd-* (pixi-tokens.css, copie de pixidia-social/assets/tokens.css), portes par
 * .pixi-page et par .pxipa, jamais par :root. Toute regle qui lit un jeton est donc ancree sous .pxipa ou
 * .pixi-page ; le squelette et le vide (.pxipa-sk, .pxipa-empty), rendus aussi hors d'une carte, s'ancrent par
 * :where(.pixi-page, .pxipa) (specificite inchangee) : hors de ces deux racines ils ne sont pas stylés.
 *
 * Choix tenus :
 *  - cartes OPAQUES (#fff, bordure --pxd-border-popup, --pxd-radius-xl, --pxd-shadow), jamais de verre, jamais
 *    de liseré de couleur de type : la couleur du type ne vit que dans la pastille et le repere de carte ;
 *  - soulevement (--pxd-shadow-hover + translateY(-2px)) reserve aux cartes qui portent des actions
 *    (.pxipa-place, .pxipa-option), sous @media (hover: hover) ;
 *  - entree pxdRise (opacite 0 -> 1, translateY 8px -> 0, 400 ms, --pxd-ease-smooth), delai calc(var(--i) * 60ms),
 *    SEULEMENT a la premiere apparition : classe .pxipa--enter posee par le JS (F2) a l'insertion d'une carte, jamais
 *    lors d'un re-rendu depuis une nouvelle revision (selection, memoire, creation) ; une .pxipa nue ne s'anime pas.
 *    Remplissage "backwards" seulement : un remplissage "both" figerait transform et annulerait le survol ;
 *  - contraste AA mesure (maquette work/preview/, NOTES-F1) : le texte de la pastille de type prend une encre
 *    foncee de la famille du type (--pxipa-cpt-ink), le point prend la couleur du design system (--pxipa-cpt) :
 *    #ff9800 sur blanc ne donne que 2,2:1 ;
 *  - bouton principal : degrade --pxd-primary -> --pxd-secondary-hover (4,8:1 au pire point) plutot que
 *    --pxd-gradient, dont l'extremite #1E9B52 ne donne que 3,6:1 sous un texte blanc ;
 *  - largeur mobile 390 sans debordement (min-width: 0, overflow-wrap: anywhere) ; aucun libelle a largeur
 *    fixe (allemand +30 %) ; cibles tactiles de 44 px pour le selecteur de voyageurs ;
 *  - aucun @layer ; !important seulement dans le bloc de mouvement reduit.
 */

/* ── Couleurs de type : point / repere (--pxipa-cpt) et encre de texte AA (--pxipa-cpt-ink) ── */
:where(.pxipa, .pixi-page, .pxd-pixi-conversation) [data-cpt="restauration"], .pxipa[data-cpt="restauration"] { --pxipa-cpt: var(--pxd-cpt-restauration); --pxipa-cpt-ink: #b02a2a; }
:where(.pxipa, .pixi-page, .pxd-pixi-conversation) [data-cpt="exp-act"], .pxipa[data-cpt="exp-act"] { --pxipa-cpt: var(--pxd-cpt-experience); --pxipa-cpt-ink: #8a5300; }
:where(.pxipa, .pixi-page, .pxd-pixi-conversation) [data-cpt="logement"], .pxipa[data-cpt="logement"] { --pxipa-cpt: var(--pxd-cpt-logement); --pxipa-cpt-ink: #2b6f2f; }
:where(.pxipa, .pixi-page, .pxd-pixi-conversation) [data-cpt="location-vehicule"], .pxipa[data-cpt="location-vehicule"] { --pxipa-cpt: var(--pxd-cpt-location); --pxipa-cpt-ink: #7b1fa2; }
:where(.pxipa, .pixi-page, .pxd-pixi-conversation) [data-cpt="transport"], .pxipa[data-cpt="transport"] { --pxipa-cpt: var(--pxd-cpt-transport); --pxipa-cpt-ink: #1565c0; }
:where(.pxipa, .pixi-page, .pxd-pixi-conversation) [data-cpt="lieu"], .pxipa[data-cpt="lieu"] { --pxipa-cpt: var(--pxd-primary); --pxipa-cpt-ink: var(--pxd-fg); }

/* ── Remise a zero sous .pxipa, specificite nulle ── */
/* [hidden] reste autoritaire dans une carte rendue hors de .pixi-page (panneau L3) : sinon une regle .pxipa qui pose
   un display (liste des sources repliee, badge, bouton) l'emporterait sur la feuille du navigateur. */
.pxipa[hidden], .pxipa [hidden] { display: none !important; }
:where(.pxipa) *, :where(.pxipa) *::before, :where(.pxipa) *::after, :where(.pxipa-sk, .pxipa-row, .pxipa-empty) { box-sizing: border-box; }
:where(.pxipa) :where(h3, h4, h5, p, figure, blockquote, dl, dd, table, caption) { margin: 0; }
:where(.pxipa) :where(ol, ul) { margin: 0; padding: 0; list-style: none; }
:where(.pxipa) :where(button, input, select) { font: inherit; color: inherit; letter-spacing: inherit; }
:where(.pxipa) :where(img) { display: block; max-width: 100%; }

/* ── 1. Conteneur : section.pxipa[data-kind][data-status][data-stale] ── */
.pxipa {
    container: pxipa / inline-size;
    position: relative;
    display: grid; gap: 12px; min-width: 0;
    padding: 14px 16px 12px;
    background: #fff; border: 1px solid var(--pxd-border-popup); border-radius: var(--pxd-radius-xl); box-shadow: var(--pxd-shadow);
    color: var(--pxd-fg); font-family: var(--pxd-font-sans); font-size: var(--pxd-fs-base); font-weight: 500; line-height: 1.45; text-align: left;
}
/* Entree a la premiere apparition seulement (.pxipa--enter posee par F2 a l'insertion) : un re-rendu depuis une nouvelle
   revision ne rejoue rien. Les cartes de lieu et les options entrent en cascade dans une carte qui entre. */
.pxipa.pxipa--enter, .pxipa.pxipa--enter :is(.pxipa-place, .pxipa-option) {
    animation: pxdRise var(--pxd-dur-slow) var(--pxd-ease-smooth) backwards;
    animation-delay: calc(var(--i, 0) * 60ms);
}
.pxipa .pxipa__head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; }
.pxipa .pxipa__icon {
    flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px;
    background: var(--pxd-tint-secondary-8); color: var(--pxip-green-text, #0f6b3a);
}
.pxipa .pxipa__icon svg { width: 16px; height: 16px; }
.pxipa .pxipa__title {
    flex: 1 1 10rem; min-width: 0; font-size: 1rem; font-weight: 800; line-height: 1.3; letter-spacing: -.01em;
    color: var(--pxd-fg-title); overflow-wrap: anywhere;
}
.pxipa .pxipa__when { flex: none; font-size: var(--pxd-fs-meta); font-weight: 600; color: var(--pxd-fg-tertiary); white-space: nowrap; }
.pxipa .pxipa__body { display: grid; gap: 10px; min-width: 0; }
/* Ligne d'etat d'une carte (F2 : p.pxipa__status[role=status], dernier enfant de .pxipa__body, masquee par hidden quand
   elle est vide) : choix enregistre, souvenir retenu, erreur douce. Texte, jamais une commande : pas d'etat interactif.
   #5d7070 : 5,2:1 sur la carte blanche, 4,65:1 au pire sur le fond de page (carte de lieux sans cadre). */
.pxipa .pxipa__status {
    margin: 0; font-size: .8rem; font-weight: 600; line-height: 1.4; color: var(--pxd-fg-tertiary); overflow-wrap: anywhere;
}
.pxipa .pxipa__foot {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-width: 0; padding-top: 10px;
    border-top: 1px solid rgba(10, 61, 58, .07); font-size: var(--pxd-fs-meta); font-weight: 600; color: var(--pxd-fg-tertiary);
}
.pxipa .pxipa__foot > p { flex: 1 1 12rem; min-width: 0; overflow-wrap: anywhere; }
.pxipa .pxipa__foot > :is(ul, ol) { flex: 1 1 100%; display: grid; gap: 4px; }
.pxipa .pxipa__srcs {
    position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; margin-left: auto;
    border: 1px solid rgba(1, 40, 39, .14); border-radius: var(--pxd-radius-full); background: #fff; color: var(--pxd-fg);
    font-size: var(--pxd-fs-meta); font-weight: 700; cursor: pointer; -webkit-tap-highlight-color: transparent;
    transition: background-color var(--pxd-dur-fast) var(--pxd-ease-smooth), border-color var(--pxd-dur-fast) var(--pxd-ease-smooth),
        box-shadow var(--pxd-dur-fast) var(--pxd-ease-smooth);
}
.pxipa .pxipa__srcs::after {
    content: ""; width: 6px; height: 6px; margin-top: -3px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(45deg); transition: transform var(--pxd-dur-fast) var(--pxd-ease-smooth);
}
.pxipa .pxipa__srcs[aria-expanded="true"]::after { margin-top: 3px; transform: rotate(-135deg); }

/* Etats de donnees : releve ancien fige (date visible), resultat indisponible. */
.pxipa[data-stale="1"] { border-style: dashed; border-color: rgba(10, 61, 58, .24); box-shadow: var(--pxd-shadow-sm); }
.pxipa[data-stale="1"] .pxipa__when { color: var(--pxip-amber-text, #6b5400); }
.pxipa[data-stale="1"] img { filter: saturate(.75); }
.pxipa[data-stale="1"] .pxipa-place { border-style: dashed; }
.pxipa:is([data-status="blocked"], [data-status="error"], [data-status="cancelled"]) { background: var(--pxd-gray-50); box-shadow: none; }

/* Lieux : le conteneur s'efface, la rangee de cartes porte le relief. */
.pxipa[data-kind="place_cards"] { padding: 0; background: none; border: 0; box-shadow: none; gap: 10px; }
.pxipa[data-kind="place_cards"] > .pxipa__foot { padding: 0 2px; border-top: 0; }

/* ── 2. Rangee defilante (patron .pxd-soc-trips__rail) ── */
.pxipa-row {
    display: flex; gap: 12px; min-width: 0;
    overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    /* Marge interne pour le soulevement et l'anneau de focus, compensee pour ne rien decaler. */
    padding: 6px 6px 22px; margin: -6px -6px -16px;
}
.pxipa-row::-webkit-scrollbar { display: none; }
.pxipa-row > * { flex: 0 0 min(78vw, 272px); min-width: 0; scroll-snap-align: start; }

/* ── 3. Carte de lieu compacte (anatomie Favoris) ── */
.pxipa .pxipa-place {
    position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden;
    background: #fff; border: 1px solid var(--pxd-border-popup); border-radius: var(--pxd-radius-xl); box-shadow: var(--pxd-shadow);
    transition: transform var(--pxd-dur-normal) var(--pxd-ease-bounce), box-shadow var(--pxd-dur-normal) var(--pxd-ease-smooth),
        border-color var(--pxd-dur-fast) var(--pxd-ease-smooth);
}
.pxipa .pxipa-place__media { position: relative; flex: none; aspect-ratio: 3 / 2; overflow: hidden; background: var(--pxd-gradient); }
.pxipa .pxipa-place__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--pxd-ease-smooth); }
/* Voile : tient la pastille et le badge sur une photo claire (ciel, neige, facade blanche). */
.pxipa .pxipa-place__media::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to bottom, rgba(7, 43, 40, .30) 0%, rgba(7, 43, 40, 0) 40%, rgba(7, 43, 40, 0) 72%, rgba(7, 43, 40, .16) 100%);
}
/* Sans photo : degrade signature et glyphe de type, jamais une image inventee (R-12). */
.pxipa .pxipa-place__glyph { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255, 255, 255, .6); }
.pxipa .pxipa-place__glyph svg { width: 44px; height: 44px; stroke-width: 1.5; }
/* Photo a la demande (29/09) : carte affichee tout de suite ; reflet discret tant que la photo est en route, fondu a l'arrivee. */
.pxipa .pxipa-place__media[data-pxip-photo="pending"]::before {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(100deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .22) 50%, rgba(255, 255, 255, 0) 70%);
    background-size: 220% 100%; animation: pxipa-photo-wait 1.4s linear infinite;
}
@keyframes pxipa-photo-wait { from { background-position: 160% 0; } to { background-position: -60% 0; } }
.pxipa .pxipa-place__media img.pxipa-place__late { opacity: 0; transition: opacity 420ms var(--pxd-ease-smooth), transform 600ms var(--pxd-ease-smooth); }
.pxipa .pxipa-place__media img.pxipa-place__late.is-in { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
    .pxipa .pxipa-place__media[data-pxip-photo="pending"]::before { animation: none; }
    .pxipa .pxipa-place__media img.pxipa-place__late { transition: none; opacity: 1; }
}
.pxipa .pxipa-place__type {
    position: absolute; top: 10px; left: 10px; z-index: 2;
    display: inline-flex; align-items: center; gap: 6px; max-width: 58%; height: 26px; padding: 0 10px;
    border-radius: var(--pxd-radius-full); background: rgba(255, 255, 255, .94); box-shadow: var(--pxd-shadow-sm);
    color: var(--pxipa-cpt-ink, var(--pxd-fg)); font-size: .66rem; font-weight: 800; letter-spacing: .8px; line-height: 1;
    text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pxipa .pxipa-place__type::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: var(--pxd-radius-full); background: var(--pxipa-cpt, var(--pxd-primary)); }
.pxipa .pxipa-place__type:has(svg)::before { content: none; }
.pxipa .pxipa-place__type svg { flex: none; width: 13px; height: 13px; color: var(--pxipa-cpt, var(--pxd-primary)); }
/* Badge "deja dans ton voyage" : en bas a gauche du media (la pastille de type occupe le haut), sur toute
   la largeur utile pour que le libelle ne soit jamais tronque. Repli sans unite de conteneur : en haut a droite. */
.pxipa .pxipa-place__added {
    position: absolute; top: 10px; right: 10px; z-index: 2;
    display: inline-flex; align-items: center; gap: 6px; max-width: calc(100% - 20px); height: 26px; padding: 0 10px;
    border-radius: var(--pxd-radius-full); background: rgba(255, 255, 255, .94); box-shadow: var(--pxd-shadow-sm);
    color: var(--pxip-green-text, #0f6b3a); font-size: .7rem; font-weight: 800; line-height: 1;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pxipa .pxipa-place__added::before {
    content: ""; flex: none; width: 9px; height: 5px; margin-top: -3px;
    border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg);
}
@supports (top: 1cqw) {
    .pxipa .pxipa-place { container-type: inline-size; }
    .pxipa .pxipa-place__added { top: calc(100cqw * 2 / 3 - 36px); right: auto; left: 10px; }
}
.pxipa .pxipa-place__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 12px 13px 0; }
.pxipa .pxipa-place__title {
    min-height: calc(.97rem * 1.28 * 2);
    font-size: .97rem; font-weight: 700; line-height: 1.28; letter-spacing: -.2px; color: var(--pxd-fg-title); overflow-wrap: anywhere;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pxipa .pxipa-place__meta { font-size: .78rem; font-weight: 600; line-height: 1.35; color: var(--pxd-fg-tertiary); overflow-wrap: anywhere; }
.pxipa .pxipa-place__why {
    font-size: .82rem; font-weight: 500; line-height: 1.4; color: var(--pxd-fg); overflow-wrap: anywhere;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.pxipa .pxipa-place__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; padding: 10px 13px 0; }
.pxipa .pxipa-fact {
    display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 7px 10px;
    border: 1px solid var(--pxd-border-popup); border-radius: var(--pxd-radius-lg); background: var(--pxd-gray-50);
}
/* Un fait sans voisin prend toute la largeur (pas de trou dans la grille 2 x 2). */
.pxipa .pxipa-fact:last-child:nth-child(odd) { grid-column: 1 / -1; }
.pxipa .pxipa-fact__l {
    font-size: .6rem; font-weight: 700; letter-spacing: .9px; text-transform: uppercase; color: var(--pxd-gray-500);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pxipa .pxipa-fact__v { font-size: .83rem; font-weight: 600; line-height: 1.2; color: var(--pxd-fg); overflow-wrap: anywhere; }
.pxipa .pxipa-place__actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding: 12px 13px 13px; }
.pxipa .pxipa-place__actions > .pxipa-btn { flex: 1 1 auto; }
.pxipa .pxipa-place[data-state="added"] { border-color: var(--pxd-tint-secondary-30); }
.pxipa .pxipa-place[data-state="unavailable"] .pxipa-place__media { filter: grayscale(.7); }
.pxipa .pxipa-place[data-state="unavailable"] .pxipa-place__title { color: var(--pxd-fg-tertiary); }

/* ── 4. Boutons .pxipa-btn : defaut (contour), --primary (degrade), --ghost ── */
.pxipa .pxipa-btn {
    position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; min-height: 40px; padding: 6px 14px;
    border: 1px solid rgba(1, 40, 39, .16); border-radius: var(--pxd-radius-full); background: #fff; color: var(--pxd-fg);
    font-size: .82rem; font-weight: 700; line-height: 1.15; letter-spacing: -.1px; text-align: center; text-decoration: none;
    overflow-wrap: anywhere; hyphens: auto; cursor: pointer; -webkit-tap-highlight-color: transparent;
    transition: transform var(--pxd-dur-normal) var(--pxd-ease-bounce), box-shadow var(--pxd-dur-normal) var(--pxd-ease-smooth),
        background-color var(--pxd-dur-fast) var(--pxd-ease-smooth), border-color var(--pxd-dur-fast) var(--pxd-ease-smooth),
        color var(--pxd-dur-fast) var(--pxd-ease-smooth);
}
.pxipa .pxipa-btn svg { flex: none; width: 16px; height: 16px; }
.pxipa .pxipa-btn--primary {
    border-color: transparent; color: var(--pxd-fg-inverse); box-shadow: var(--pxd-shadow-sm);
    background: linear-gradient(135deg, var(--pxd-primary) 0%, var(--pxd-secondary-hover) 100%);
}
.pxipa .pxipa-btn--ghost { border-color: transparent; background: transparent; }
/* L4 (F1) : lien partenaire (Viator) sur la carte -- reste un bouton secondaire (P21), seul le repos est teinte ;
   :hover/:active/:focus-visible/:disabled retombent sur les regles generiques .pxipa-btn ci-dessus/ci-dessous (plus
   specifiques : deux classes+pseudo battent .pxipa .pxipa-btn--viator), donc jamais dupliques ici. */
.pxipa .pxipa-btn--viator { border-color: var(--pxd-tint-secondary-30); color: var(--pxd-secondary-hover); }
.pxipa .pxipa-btn--viator svg { color: var(--pxd-secondary-hover); }
.pxipa .pxipa-btn[aria-busy="true"] { cursor: progress; }
.pxipa .pxipa-btn[aria-busy="true"]::after {
    content: ""; flex: none; width: 14px; height: 14px; border-radius: var(--pxd-radius-full);
    border: 2px solid currentColor; border-top-color: transparent; animation: pxipa-spin 700ms linear infinite;
}

/* ── 5. Options vol / hotel : ol.pxipa-options > li.pxipa-option[data-ref][data-selected="1"] (contrat amende le 23/09 :
   plus d'aria-selected, invalide sur un listitem ; l'etat accessible est aria-pressed du bouton) ── */
.pxipa .pxipa-options { display: grid; gap: 8px; min-width: 0; }
/* Colonne prix BORNEE (fit-content(42%)) : en auto, un libelle de portee long (« Total indicatif pour 2 adultes, taxes
   comprises selon la compagnie », 242 px) prenait sa largeur max-content et ecrasait la colonne principale a 0 px a 390
   (horaires un caractere par ligne, retour F3). Le texte principal coupe aux espaces (break-word), jamais au caractere. */
.pxipa .pxipa-option {
    display: grid; grid-template-columns: minmax(0, 1fr) fit-content(42%); align-items: start; gap: 10px 12px; min-width: 0; padding: 12px 14px;
    background: #fff; border: 1px solid var(--pxd-border-popup); border-radius: var(--pxd-radius-lg); box-shadow: var(--pxd-shadow-sm);
    transition: transform var(--pxd-dur-normal) var(--pxd-ease-bounce), box-shadow var(--pxd-dur-normal) var(--pxd-ease-smooth),
        border-color var(--pxd-dur-fast) var(--pxd-ease-smooth), background-color var(--pxd-dur-fast) var(--pxd-ease-smooth);
}
.pxipa .pxipa-option__main {
    grid-column: 1; grid-row: 1; display: grid; gap: 2px; min-width: 0;
    font-size: .8rem; font-weight: 600; line-height: 1.35; color: var(--pxd-fg-tertiary); overflow-wrap: break-word;
}
.pxipa .pxipa-option__main :is(strong, b) { display: block; font-size: .95rem; font-weight: 700; color: var(--pxd-fg-title); }
.pxipa .pxipa-option__price { grid-column: 2; grid-row: 1; display: grid; justify-items: end; gap: 1px; min-width: 0; text-align: right; }
.pxipa .pxipa-option__price :is(strong, b) { font-size: 1.05rem; font-weight: 800; line-height: 1.25; letter-spacing: -.3px; color: var(--pxd-fg); overflow-wrap: break-word; }
.pxipa .pxipa-option__price :is(span, small) { font-size: .72rem; font-weight: 600; line-height: 1.3; color: var(--pxd-fg-tertiary); overflow-wrap: break-word; }
.pxipa .pxipa-option__select { grid-column: 1; grid-row: 2; justify-self: start; }
.pxipa .pxipa-option > .pxipa-btn[data-act="map"] { grid-column: 2; grid-row: 2; justify-self: end; }
/* Carte etroite (telephone, colonne carte) : le prix passe sous le texte principal, sur une ligne, aligne a gauche ;
   les boutons en troisieme rangee. Place APRES le placement de base, qu'il remplace a specificite egale. */
@container pxipa (max-width: 23.99rem) {
    .pxipa .pxipa-option__main { grid-column: 1 / -1; }
    .pxipa .pxipa-option__price {
        grid-column: 1 / -1; grid-row: 2; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; justify-items: start; text-align: left;
    }
    .pxipa .pxipa-option__select { grid-row: 3; }
    .pxipa .pxipa-option > .pxipa-btn[data-act="map"] { grid-row: 3; }
}
.pxipa .pxipa-option__select {
    position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 14px;
    border: 1px solid rgba(1, 40, 39, .16); border-radius: var(--pxd-radius-full); background: #fff; color: var(--pxd-fg);
    font-size: .8rem; font-weight: 700; line-height: 1.15; cursor: pointer; -webkit-tap-highlight-color: transparent;
    transition: background-color var(--pxd-dur-fast) var(--pxd-ease-smooth), border-color var(--pxd-dur-fast) var(--pxd-ease-smooth),
        color var(--pxd-dur-fast) var(--pxd-ease-smooth), box-shadow var(--pxd-dur-fast) var(--pxd-ease-smooth), transform 100ms var(--pxd-ease-smooth);
}
.pxipa .pxipa-option__select[aria-pressed="true"] { background: var(--pxd-primary); border-color: var(--pxd-primary); color: var(--pxd-fg-inverse); }
.pxipa .pxipa-option__select[aria-pressed="true"]::before {
    content: ""; flex: none; width: 9px; height: 5px; margin-top: -3px;
    border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg);
}
.pxipa .pxipa-more { min-width: 0; }
.pxipa .pxipa-more > summary {
    display: inline-flex; align-items: center; gap: 8px; min-height: 44px; border-radius: var(--pxd-radius-sm);
    font-size: .85rem; font-weight: 700; color: var(--pxd-fg); cursor: pointer; list-style: none;
    transition: color var(--pxd-dur-fast) var(--pxd-ease-smooth);
}
.pxipa .pxipa-more > summary::-webkit-details-marker { display: none; }
.pxipa .pxipa-more > summary::after {
    content: ""; width: 7px; height: 7px; margin-top: -4px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(45deg); transition: transform var(--pxd-dur-fast) var(--pxd-ease-smooth);
}
.pxipa .pxipa-more[open] > summary::after { margin-top: 3px; transform: rotate(-135deg); }
.pxipa .pxipa-more > :not(summary) { margin-top: 8px; }

/* ── 6. Saison : ol.pxipa-season > li.pxipa-season__m[data-verdict][aria-current] (des mots, jamais de chiffres) ── */
.pxipa .pxipa-season { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
@container pxipa (min-width: 26rem) { .pxipa .pxipa-season { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@container pxipa (min-width: 38rem) { .pxipa .pxipa-season { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.pxipa .pxipa-season__m {
    display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; padding: 10px 10px 9px;
    border: 1px solid var(--pxd-border-popup); border-radius: var(--pxd-radius-md); background: var(--pxd-gray-50);
    box-shadow: inset 0 3px 0 var(--pxd-gray-300);
    font-size: .72rem; font-weight: 600; line-height: 1.25; color: var(--pxd-fg-tertiary); overflow-wrap: anywhere; hyphens: auto;
}
.pxipa .pxipa-season__m abbr { font-size: .92rem; font-weight: 800; line-height: 1.2; color: var(--pxd-fg); text-decoration: none; }
.pxipa .pxipa-season__m svg { flex: none; width: 16px; height: 16px; color: var(--pxd-fg-tertiary); }
.pxipa .pxipa-season__m[data-verdict="good"] {
    background: var(--pxd-tint-secondary-8); border-color: var(--pxd-tint-secondary-15); box-shadow: inset 0 3px 0 var(--pxd-secondary);
}
.pxipa .pxipa-season__m[data-verdict="good"] svg { color: var(--pxip-green-text, #0f6b3a); }
.pxipa .pxipa-season__m[data-verdict="avoid"] {
    background: rgba(236, 171, 0, .11); border-color: rgba(173, 136, 0, .24); color: var(--pxip-amber-text, #6b5400);
    box-shadow: inset 0 3px 0 var(--pxd-badge-gold);
}
.pxipa .pxipa-season__m[data-verdict="avoid"] svg { color: var(--pxip-amber-text, #6b5400); }
.pxipa .pxipa-season__m[aria-current]:not([aria-current="false"]) { outline: 2px solid var(--pxd-primary); outline-offset: 2px; }
.pxipa .pxipa-season__best { display: flex; align-items: flex-start; gap: 8px; font-size: .88rem; font-weight: 600; line-height: 1.4; color: var(--pxd-fg); }
.pxipa .pxipa-season__best::before {
    content: ""; flex: none; width: 10px; height: 6px; margin: 5px 2px 0; border-left: 2px solid var(--pxip-green-text, #0f6b3a);
    border-bottom: 2px solid var(--pxip-green-text, #0f6b3a); transform: rotate(-45deg);
}

/* ── 7. Comparaison : table.pxipa-compare (colonnes egales, gagnant en tfoot, jamais de score) ── */
.pxipa .pxipa-compare { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; font-size: .82rem; line-height: 1.35; }
.pxipa .pxipa-compare caption {
    caption-side: top; padding: 0 0 8px; text-align: left;
    font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--pxd-fg-tertiary);
}
.pxipa .pxipa-compare :is(th, td) {
    padding: 8px 6px; text-align: left; vertical-align: top; border-bottom: 1px solid rgba(10, 61, 58, .07); overflow-wrap: anywhere; hyphens: auto;
}
.pxipa .pxipa-compare thead th { font-size: .82rem; font-weight: 800; color: var(--pxd-fg-title); border-bottom-color: var(--pxd-border-popup); }
.pxipa .pxipa-compare tbody th { font-size: .78rem; font-weight: 700; color: var(--pxd-fg-tertiary); }
.pxipa .pxipa-compare td { font-weight: 600; color: var(--pxd-fg); }
.pxipa .pxipa-compare tfoot :is(th, td) { border-bottom: 0; background: var(--pxd-tint-secondary-8); color: var(--pxip-green-text, #0f6b3a); font-weight: 800; }
.pxipa .pxipa-compare tfoot tr > :first-child { border-radius: var(--pxd-radius-md) 0 0 var(--pxd-radius-md); }
.pxipa .pxipa-compare tfoot tr > :last-child { border-radius: 0 var(--pxd-radius-md) var(--pxd-radius-md) 0; }
/* Choix d'une destination sous la table (F2 : div.pxipa-compare__picks[role=group] > button.pxipa-option__select[aria-pressed]) :
   pilules teintees ; le choix retenu reprend le bouton presse des options (fond sombre, coche). Les etats de repos et de
   survol excluent [aria-pressed="true"] pour ne jamais repeindre le choix retenu. */
.pxipa .pxipa-compare__picks { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.pxipa .pxipa-compare__picks > .pxipa-option__select { flex: 0 1 auto; max-width: 100%; text-align: left; overflow-wrap: anywhere; }
.pxipa .pxipa-compare__picks > .pxipa-option__select:not([aria-pressed="true"]) {
    background: var(--pxd-tint-secondary-8); border-color: var(--pxd-tint-secondary-15); color: var(--pxd-fg);
}
/* Carte etroite (telephone, colonne) : un choix par ligne, pleine largeur, libelles allemands compris. */
@container pxipa (max-width: 25.99rem) {
    .pxipa .pxipa-compare__picks > .pxipa-option__select { flex: 1 1 100%; justify-content: center; text-align: center; }
}

/* ── 8. Avis aux voyageurs : div.pxipa-advisory[data-level] (0-2 neutre, 3 ambre, 4 rouge) ── */
.pxipa .pxipa-advisory {
    display: grid; gap: 4px; min-width: 0; padding: 12px 14px; border: 1px solid var(--pxd-border-popup); border-radius: var(--pxd-radius-lg);
    background: var(--pxd-gray-50); font-size: .88rem; line-height: 1.45; color: var(--pxd-fg); overflow-wrap: anywhere;
}
.pxipa .pxipa-advisory strong { display: flex; align-items: center; gap: 8px; font-size: .95rem; font-weight: 800; color: var(--pxd-fg-title); }
.pxipa .pxipa-advisory strong svg { flex: none; width: 18px; height: 18px; }
.pxipa .pxipa-advisory p { font-weight: 500; }
.pxipa .pxipa-advisory time { font-size: var(--pxd-fs-meta); font-weight: 600; color: var(--pxd-fg-tertiary); }
.pxipa .pxipa-advisory[data-level="3"] { background: rgba(236, 171, 0, .12); border-color: rgba(173, 136, 0, .32); }
.pxipa .pxipa-advisory[data-level="3"] strong { color: var(--pxip-amber-text, #6b5400); }
.pxipa .pxipa-advisory[data-level="4"] { background: rgba(179, 38, 30, .06); border-color: rgba(179, 38, 30, .32); }
.pxipa .pxipa-advisory[data-level="4"] strong { color: var(--pxip-danger, #b3261e); }

/* Liens des cartes (avis, sources) : couleur et soulignement de la page, specificite propre. */
.pxipa .pxipa-advisory a, .pxipa .pxipa__foot a {
    justify-self: start; border-radius: 4px; color: var(--pxd-fg); font-weight: 700; text-decoration: underline; text-underline-offset: 2px;
    transition: color var(--pxd-dur-fast) var(--pxd-ease-smooth);
}

/* ── 9. Voyageurs : div.pxipa-party (chips aria-pressed, deux compteurs, ages, enregistrer) ── */
.pxipa .pxipa-party { display: grid; gap: 14px; min-width: 0; }
.pxipa .pxipa-party__friends { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.pxipa .pxipa-chip {
    position: relative; display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; min-height: 44px; padding: 6px 16px;
    border: 1px solid rgba(1, 40, 39, .16); border-radius: var(--pxd-radius-full); background: #fff; color: var(--pxd-fg);
    font-size: .85rem; font-weight: 600; line-height: 1.2; text-align: left; overflow-wrap: anywhere; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--pxd-dur-fast) var(--pxd-ease-smooth), border-color var(--pxd-dur-fast) var(--pxd-ease-smooth),
        color var(--pxd-dur-fast) var(--pxd-ease-smooth), box-shadow var(--pxd-dur-normal) var(--pxd-ease-smooth),
        transform var(--pxd-dur-normal) var(--pxd-ease-bounce);
}
.pxipa .pxipa-chip img { flex: none; width: 30px; height: 30px; margin-left: -10px; border-radius: var(--pxd-radius-full); object-fit: cover; }
.pxipa .pxipa-chip[aria-pressed="true"] { background: var(--pxd-primary); border-color: var(--pxd-primary); color: var(--pxd-fg-inverse); }
.pxipa .pxipa-chip[aria-pressed="true"]::after {
    content: ""; flex: none; width: 9px; height: 5px; margin: -3px 0 0 2px;
    border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg);
}
.pxipa .pxipa-stepper {
    display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 52px; padding: 4px 6px 4px 14px;
    border: 1px solid var(--pxd-border-popup); border-radius: var(--pxd-radius-lg); background: var(--pxd-gray-50);
}
.pxipa .pxipa-stepper > :first-child { flex: 1 1 auto; min-width: 0; font-size: .88rem; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.pxipa .pxipa-stepper button {
    position: relative; flex: none; display: grid; place-items: center; width: 40px; height: 40px; padding: 0;
    border: 1px solid rgba(1, 40, 39, .16); border-radius: var(--pxd-radius-full); background: #fff; color: var(--pxd-fg);
    font-size: 1.15rem; font-weight: 700; line-height: 1; cursor: pointer; -webkit-tap-highlight-color: transparent;
    transition: background-color var(--pxd-dur-fast) var(--pxd-ease-smooth), border-color var(--pxd-dur-fast) var(--pxd-ease-smooth),
        box-shadow var(--pxd-dur-fast) var(--pxd-ease-smooth), transform 100ms var(--pxd-ease-smooth);
}
/* 40 px visibles, 44 px touchables. */
.pxipa .pxipa-stepper button::after { content: ""; position: absolute; inset: -2px; border-radius: inherit; }
.pxipa .pxipa-stepper :is(output, input) {
    flex: none; min-width: 2.5ch; width: 3ch; padding: 0; border: 0; background: transparent; color: var(--pxd-fg);
    font-size: 1rem; font-weight: 800; text-align: center; -moz-appearance: textfield; appearance: textfield;
}
.pxipa .pxipa-stepper input::-webkit-inner-spin-button, .pxipa .pxipa-stepper input::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; }
.pxipa .pxipa-party__ages { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.pxipa .pxipa-party__ages > li {
    display: inline-flex; align-items: center; gap: 8px; min-height: 50px; padding: 2px 2px 2px 12px;
    border: 1px solid var(--pxd-border-popup); border-radius: var(--pxd-radius-full); background: var(--pxd-gray-50);
    font-size: .82rem; font-weight: 600; color: var(--pxd-fg);
}
/* Cible tactile de 44 px, comme les autres commandes du selecteur de voyageurs. */
.pxipa .pxipa-party__ages select {
    min-height: 44px; padding: 0 12px; border: 1px solid rgba(1, 40, 39, .16); border-radius: var(--pxd-radius-full);
    background-color: #fff; color: var(--pxd-fg); font-size: .85rem; font-weight: 700; cursor: pointer;
    transition: border-color var(--pxd-dur-fast) var(--pxd-ease-smooth), box-shadow var(--pxd-dur-fast) var(--pxd-ease-smooth);
}
.pxipa .pxipa-party > .pxipa-btn { justify-self: start; }
@container pxipa (min-width: 30rem) {
    .pxipa .pxipa-party { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pxipa .pxipa-party > :not(.pxipa-stepper) { grid-column: 1 / -1; }
}

/* ── 10. Memoire : div.pxipa-memory[data-state] (fait cite, Retenir, Non merci) ── */
.pxipa .pxipa-memory { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 8px; min-width: 0; }
.pxipa .pxipa-memory__fact {
    flex: 1 1 100%; min-width: 0; padding: 12px 14px 12px 16px; border: 1px solid var(--pxd-border-popup); border-radius: var(--pxd-radius-md);
    background: var(--pxd-gray-50); box-shadow: inset 3px 0 0 var(--pxd-tint-secondary-30);
    font-size: .95rem; font-weight: 600; line-height: 1.45; color: var(--pxd-fg-title); overflow-wrap: anywhere;
}
.pxipa .pxipa-memory > p:not(.pxipa-memory__fact) { flex: 1 1 100%; font-size: .8rem; font-weight: 600; color: var(--pxd-fg-tertiary); }
.pxipa .pxipa-memory[data-state="saved"] .pxipa-memory__fact { background: var(--pxd-tint-secondary-8); border-color: var(--pxd-tint-secondary-15); box-shadow: inset 3px 0 0 var(--pxd-secondary); }
.pxipa .pxipa-memory[data-state="declined"] .pxipa-memory__fact { background: transparent; border-style: dashed; box-shadow: none; color: var(--pxd-fg-tertiary); }

/* ── 11. Squelette et vide : aussi utilisables hors d'une carte (chargement), sous .pixi-page ou .pxipa ──
   L3 : le conteneur du panneau (.pxd-pixi-conversation) rejoint les racines. Ses jetons --pxd-* restent ceux de .pxipa
   (pixi-tokens.css) : hors d'une carte, le panneau n'a que les jetons :root du single. La vue du panneau pose donc son
   squelette DANS une carte (div.pxipa.pxipa-loading), jamais nu. */
:where(.pixi-page, .pxipa, .pxd-pixi-conversation) .pxipa-sk {
    position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0; padding-bottom: 14px; overflow: hidden;
    background: #fff; border: 1px solid var(--pxd-border-popup); border-radius: var(--pxd-radius-xl); box-shadow: var(--pxd-shadow-sm);
    animation: pxdRise var(--pxd-dur-slow) var(--pxd-ease-smooth) backwards;
    animation-delay: calc(var(--i, 0) * 60ms);
}
:where(.pixi-page, .pxipa, .pxd-pixi-conversation) .pxipa-sk__media { position: relative; flex: none; aspect-ratio: 3 / 2; overflow: hidden; background: var(--pxd-gray-100); }
:where(.pixi-page, .pxipa, .pxd-pixi-conversation) .pxipa-sk__line { position: relative; height: 12px; margin: 0 13px; overflow: hidden; border-radius: var(--pxd-radius-xs); background: var(--pxd-gray-100); }
:where(.pixi-page, .pxipa, .pxd-pixi-conversation) .pxipa-sk__media + .pxipa-sk__line { margin-top: 6px; }
:where(.pixi-page, .pxipa, .pxd-pixi-conversation) .pxipa-sk__line--short { width: 58%; }
/* Miroitement : --pxd-gradient-shimmer promene sur le gris, un seul pseudo-element par bloc. */
:where(.pixi-page, .pxipa, .pxd-pixi-conversation) .pxipa-sk__media::after, :where(.pixi-page, .pxipa, .pxd-pixi-conversation) .pxipa-sk__line::after {
    content: ""; position: absolute; inset: -50% 0; pointer-events: none;
    background: var(--pxd-gradient-shimmer), var(--pxd-gradient-shimmer);
    background-repeat: no-repeat; background-size: 55% 100%, 55% 100%; background-position: -80% 50%, -80% 50%;
    animation: pxipa-shimmer 1.4s var(--pxd-ease-smooth) infinite;
}
:where(.pixi-page, .pxipa, .pxd-pixi-conversation) .pxipa-empty {
    display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px 14px;
    border: 1px dashed rgba(10, 61, 58, .18); border-radius: var(--pxd-radius-lg); background: var(--pxd-gray-50);
    font-family: var(--pxd-font-sans); font-size: .9rem; font-weight: 600; line-height: 1.4; color: var(--pxd-fg); overflow-wrap: anywhere;
}
:where(.pixi-page, .pxipa, .pxd-pixi-conversation) .pxipa-empty svg { flex: none; width: 20px; height: 20px; color: var(--pxd-fg-tertiary); }

/* Texte pour lecteur d'ecran seulement (verdict de saison, entete de colonne vide) : utilisable hors de /pixi/. */
.pxipa-sr {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ── 12. Points a regler (L3) : ol.pxipa-issues > li.pxipa-issue[data-pxipa-severity] (icone, libelle, meta, bouton d'action) ──
   Barre et encre par severite, couleurs des types (bloquant = restauration, a verifier = activite, pour info = transport) ;
   encres AA sur --pxd-gray-50 (#b02a2a 6,1:1, #8a5300 5,9:1, #1565c0 5,3:1). Severite inconnue : gris, sans encre propre. */
.pxipa .pxipa-issues { display: grid; gap: 8px; min-width: 0; }
.pxipa .pxipa-issue {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 4px 10px; min-width: 0; padding: 10px 12px;
    border: 1px solid var(--pxd-border-popup); border-radius: var(--pxd-radius-lg); background: var(--pxd-gray-50);
    box-shadow: inset 3px 0 0 var(--pxipa-issue, var(--pxd-gray-300));
}
.pxipa .pxipa-issue[data-pxipa-severity="blocking"] { --pxipa-issue: var(--pxd-cpt-restauration); --pxipa-issue-ink: #b02a2a; }
.pxipa .pxipa-issue[data-pxipa-severity="warning"] { --pxipa-issue: var(--pxd-cpt-experience); --pxipa-issue-ink: #8a5300; }
.pxipa .pxipa-issue[data-pxipa-severity="info"] { --pxipa-issue: var(--pxd-cpt-transport); --pxipa-issue-ink: #1565c0; }
.pxipa .pxipa-issue__icon { display: grid; place-items: center; width: 24px; height: 24px; color: var(--pxipa-issue-ink, var(--pxd-fg-tertiary)); }
.pxipa .pxipa-issue__icon svg { width: 16px; height: 16px; }
.pxipa .pxipa-issue__main { display: grid; gap: 2px; min-width: 0; }
.pxipa .pxipa-issue__label { font-size: .88rem; font-weight: 600; line-height: 1.4; color: var(--pxd-fg); overflow-wrap: anywhere; }
.pxipa .pxipa-issue__meta { font-size: var(--pxd-fs-meta); font-weight: 700; line-height: 1.3; color: var(--pxipa-issue-ink, var(--pxd-fg-tertiary)); }
.pxipa .pxipa-issue > .pxipa-btn { align-self: center; }
@container pxipa (max-width: 25.99rem) {
    .pxipa .pxipa-issue { grid-template-columns: auto minmax(0, 1fr); }
    .pxipa .pxipa-issue > .pxipa-btn { grid-column: 2; justify-self: start; }
}

/* ── 13. Carte compacte (panneau d'itineraire, L3) : section.pxipa[data-compact="1"] ──
   Marges et titre resserres ; lieux en grille de deux colonnes (une sous 24 rem : telephone), sans defilement ni aimantation ;
   comparaison dans une region defilable (div.pxipa-compare-wrap[tabindex=0], posee par le module en mode compact). */
.pxipa[data-compact="1"] { gap: 10px; padding: 12px 14px 10px; }
.pxipa[data-compact="1"][data-kind="place_cards"] { padding: 0; }
.pxipa[data-compact="1"] .pxipa__title { font-size: .94rem; }
.pxipa[data-compact="1"] .pxipa__icon { width: 26px; height: 26px; border-radius: 8px; }
.pxipa[data-compact="1"] .pxipa-row {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; overflow: visible; scroll-snap-type: none; padding: 0; margin: 0;
}
.pxipa[data-compact="1"] .pxipa-row > * { flex: none; scroll-snap-align: none; }
@container pxipa (max-width: 23.99rem) { .pxipa[data-compact="1"] .pxipa-row { grid-template-columns: minmax(0, 1fr); } }
.pxipa .pxipa-compare-wrap { min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; border-radius: var(--pxd-radius-md); -webkit-overflow-scrolling: touch; }
.pxipa .pxipa-compare-wrap > .pxipa-compare { width: max-content; min-width: 100%; table-layout: auto; }
.pxipa .pxipa-compare-wrap .pxipa-compare :is(th, td) { min-width: 7.5rem; max-width: 14rem; overflow-wrap: break-word; }
.pxipa .pxipa-compare-wrap .pxipa-compare tbody th { min-width: 6rem; }
/* Carte en cours de lecture (panneau) : squelette dans une carte, pour porter ses jetons. */
.pxipa.pxipa-loading { gap: 8px; padding: 14px 0; }

/* ── 14. Panneau d'itineraire (L3) : classes .pxip-* des cartes quand pixi-page-v2.css n'est pas chargee ──
   Sur /pixi/, cette feuille les style sous .pixi-page ; le panneau ne la charge pas. Memes valeurs, resserrees, ancrees sous
   .pxd-pixi-conversation .pxipa : /pixi/ n'a pas ce conteneur, rien n'y change. */
.pxd-pixi-conversation .pxipa :is(.pxip-card__sub, .pxip-card__note) { font-size: .8rem; font-weight: 600; line-height: 1.4; color: var(--pxd-fg-tertiary); overflow-wrap: anywhere; }
.pxd-pixi-conversation .pxipa .pxip-card__title { font-size: .95rem; font-weight: 800; line-height: 1.3; color: var(--pxd-fg-title); overflow-wrap: anywhere; }
.pxd-pixi-conversation .pxipa .pxip-card__label2 { margin-top: 4px; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--pxd-fg-tertiary); }
.pxd-pixi-conversation .pxipa .pxip-card__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.pxd-pixi-conversation .pxipa .pxip-pill {
    display: inline-flex; align-items: center; max-width: 100%; min-height: 20px; padding: 1px 8px; border-radius: var(--pxd-radius-full);
    background: var(--pxip-soft, rgba(10, 61, 58, .06)); color: var(--pxd-fg); font-size: .7rem; font-weight: 700; line-height: 1.4;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pxd-pixi-conversation .pxipa .pxip-pill--warn { background: rgba(236, 171, 0, .16); color: var(--pxip-amber-text, #6b5400); }
.pxd-pixi-conversation .pxipa .pxip-pill--proposed { background: var(--pxd-tint-turquoise-18); color: var(--pxd-fg); }
.pxd-pixi-conversation .pxipa .pxip-muted { color: var(--pxd-fg-tertiary); }
.pxd-pixi-conversation .pxipa .pxip-list > li { border-bottom: 1px solid rgba(10, 61, 58, .07); }
.pxd-pixi-conversation .pxipa .pxip-list > li:last-child { border-bottom: 0; }
.pxd-pixi-conversation .pxipa :is(.pxip-entity, .pxip-source) { display: grid; gap: 1px; min-width: 0; padding: 6px 0; }
.pxd-pixi-conversation .pxipa :is(.pxip-entity__name, .pxip-source__name) { font-size: .88rem; font-weight: 700; color: var(--pxd-fg); overflow-wrap: anywhere; }
.pxd-pixi-conversation .pxipa .pxip-source__name { display: inline-flex; align-items: center; gap: 4px; }
.pxd-pixi-conversation .pxipa :is(.pxip-entity__meta, .pxip-source__meta) { font-size: .75rem; font-weight: 600; color: var(--pxd-fg-tertiary); overflow-wrap: anywhere; }
.pxd-pixi-conversation .pxipa a:is(.pxip-entity__name, .pxip-source__name) { text-decoration: underline; text-underline-offset: 2px; border-radius: 4px; }
.pxd-pixi-conversation .pxipa .pxip-warn {
    display: grid; gap: 2px; padding: 8px 12px; border: 1px solid rgba(173, 136, 0, .25); border-radius: var(--pxd-radius-md);
    background: rgba(236, 171, 0, .10); font-size: .82rem; font-weight: 600; color: var(--pxd-fg);
}
.pxd-pixi-conversation .pxipa .pxip-warn ul { padding-left: 1.2em; list-style: disc; }
.pxd-pixi-conversation .pxipa .pxip-timeline { margin-left: 6px; border-left: 2px solid rgba(10, 61, 58, .12); }
.pxd-pixi-conversation .pxipa .pxip-step { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 6px 0 6px 14px; }
.pxd-pixi-conversation .pxipa .pxip-step::before {
    content: ""; position: absolute; left: -7px; top: 10px; width: 12px; height: 12px; border: 2px solid #fff; border-radius: var(--pxd-radius-full);
    background: var(--pxd-primary);
}
.pxd-pixi-conversation .pxipa .pxip-step.is-proposed::before { border: 2px dashed var(--pxd-primary); background: #fff; }
.pxd-pixi-conversation .pxipa .pxip-step__time { font-size: .78rem; font-weight: 700; color: var(--pxd-fg-tertiary); }
.pxd-pixi-conversation .pxipa .pxip-step__main { display: grid; gap: 2px; min-width: 0; }
.pxd-pixi-conversation .pxipa .pxip-step__title { font-size: .88rem; font-weight: 700; overflow-wrap: anywhere; }
.pxd-pixi-conversation .pxipa .pxip-step__meta { font-size: .75rem; font-weight: 600; color: var(--pxd-fg-tertiary); overflow-wrap: anywhere; }
.pxd-pixi-conversation .pxipa .pxip-step__badges { display: flex; flex-wrap: wrap; gap: 4px; }
.pxd-pixi-conversation .pxipa .pxip-program-assumptions { display: grid; gap: 8px; margin: 8px 0 12px; padding: 0; list-style: none; }
.pxd-pixi-conversation .pxipa .pxip-program-moment { min-width: 0; margin: 8px 0 12px; }
.pxd-pixi-conversation .pxipa .pxip-program-moment__title { margin: 0 0 4px; color: var(--pxd-primary); font-size: .82rem; font-weight: 700; }
.pxd-pixi-conversation .pxipa .pxip-program-assumption { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; padding: 8px 10px; border: 1px solid rgba(10, 61, 58, .2); border-radius: 12px; cursor: pointer; }
.pxd-pixi-conversation .pxipa .pxip-program-assumption input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--pxd-primary); }
.pxd-pixi-conversation .pxipa .pxip-program-assumption span { min-width: 0; overflow-wrap: anywhere; }
.pxd-pixi-conversation .pxipa .pxip-program-assumption:focus-within { outline: 2px solid var(--pxd-primary); outline-offset: 2px; }
.pxd-pixi-conversation .pxipa .pxip-kvs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pxd-pixi-conversation .pxipa .pxip-kv { min-width: 0; padding: 8px 10px; border-radius: var(--pxd-radius-md); background: rgba(10, 61, 58, .035); }
.pxd-pixi-conversation .pxipa .pxip-kv dt { font-size: .66rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--pxd-fg-tertiary); }
.pxd-pixi-conversation .pxipa .pxip-kv dd { font-size: .95rem; font-weight: 800; overflow-wrap: anywhere; }
/* L4 (F1) : bloc `details` de la fiche (adresse/telephone/site/horaires) -- horaires sur toute la largeur du dl,
   liste sans puces, poids de texte ramene a celui des paragraphes (pas 800, illisible sur 7 lignes).
   Portee sur les deux surfaces (:where(.pixi-page, .pxd-pixi-conversation), meme patron que les blocs 1/11
   plus haut) : /pixi/ rend aussi ce bloc `details` (get_place_details arme sur pixi_page et itinerary) et
   pixi-page-v2.css ne connait pas encore ces 2 modificateurs neufs. */
:where(.pixi-page, .pxd-pixi-conversation) .pxipa .pxip-kv--wide { grid-column: 1 / -1; }
:where(.pixi-page, .pxd-pixi-conversation) .pxipa .pxip-hours { display: flex; flex-direction: column; gap: 4px; margin: 4px 0 0; padding: 0; list-style: none; }
:where(.pixi-page, .pxd-pixi-conversation) .pxipa .pxip-hours li { font-size: .82rem; font-weight: 500; line-height: 1.4; color: var(--pxd-fg); overflow-wrap: anywhere; }
.pxd-pixi-conversation .pxipa .pxip-meter { height: 8px; border-radius: var(--pxd-radius-full); background: rgba(10, 61, 58, .08); overflow: hidden; }
.pxd-pixi-conversation .pxipa .pxip-meter__fill { display: block; height: 100%; border-radius: var(--pxd-radius-full); background: var(--pxd-secondary); }
.pxd-pixi-conversation .pxipa .pxip-meter__fill.is-over { background: var(--pxip-danger, #b3261e); }
.pxd-pixi-conversation .pxipa .pxip-table-wrap { min-width: 0; overflow-x: auto; }
.pxd-pixi-conversation .pxipa .pxip-table { width: 100%; border-collapse: collapse; font-size: .8rem; }
.pxd-pixi-conversation .pxipa .pxip-table :is(th, td) { padding: 6px 8px; text-align: left; white-space: nowrap; border-bottom: 1px solid rgba(10, 61, 58, .07); }
.pxd-pixi-conversation .pxipa .pxip-table thead th { font-size: .66rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--pxd-fg-tertiary); }
.pxd-pixi-conversation .pxipa .pxip-day { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 10px; padding: 6px 0; font-size: .84rem; }
.pxd-pixi-conversation .pxipa :is(.pxip-day__date, .pxip-day__temp) { font-weight: 700; }
.pxd-pixi-conversation .pxipa :is(.pxip-day__wx, .pxip-day__rain) { grid-column: 1 / -1; font-size: .75rem; font-weight: 600; color: var(--pxd-fg-tertiary); }
.pxd-pixi-conversation .pxipa .pxip-map-place {
    padding: 6px 0; border: 0; border-radius: var(--pxd-radius-sm); background: transparent; color: var(--pxd-fg);
    font: inherit; font-weight: 700; text-align: left; cursor: pointer; transition: color var(--pxd-dur-fast) var(--pxd-ease-smooth);
}
/* Repere clique sur la carte du panneau (bus `select`, from:'pin') : la carte ou l'option correspondante dans le fil. */
.pxd-pixi-conversation .pxipa :is(.pxipa-place, .pxipa-option).is-map-selected { outline: 2px solid var(--pxd-secondary); outline-offset: 2px; }

/* ── 15. Bloc « Ce qui reste a regler » en tete du panneau (L3) : une ligne tant que la personne ne l'ouvre pas ──
   Le panneau est une colonne flex en overflow:hidden (7 regles en ligne de class-pixi-conversation-assets.php) ou seul le fil
   (.pxd-assistant-messages) se contracte, sans plancher (troisieme passe : le plancher de 6 rem poussait la saisie hors de la
   feuille des petits telephones). Replie (defaut) : sa ligne de titre, un bouton qui porte le nombre de points et la severite
   la plus haute ; hauteur minimale automatique = cette ligne, meme si elle passe sur deux lignes. Ouvert (data-pxipa-open="1",
   pose par le module) : il se contracte par sa liste, jamais sous sa ligne de titre. La hauteur minimale automatique d'une
   grille compterait alors la liste entiere (mesure : la saisie sortait du panneau) : borne explicite, en px comme la ligne de
   titre (bordure 2 + marges internes 16 ou 6 + titre 40 ou 38 + ecart 10 ou 4 + marge interne de la liste 8). Sa liste defile.
   Telephone (<= 768 px, meme seuil que la feuille coulissante du single) : ligne de 40 px « N points a regler », liste ouverte
   bornee a 40vh, barre d'outils tenue sur une ligne des 360 px. Mesure en Chromium, feuille mobile reelle (onglets, 50vh) et
   police Urbanist : tests/front/test-panel-layout.mjs. */
.pxd-pixi-conversation > .pxipa.pxd-pixi-issues {
    box-sizing: border-box; flex: 0 1 auto; max-height: 20rem; grid-template-rows: auto; grid-auto-rows: minmax(0, auto);
    margin: 4px 16px 0; padding: 8px 12px; /* gouttiere du panneau (barre d'outils et fil : 16 px), ligne compacte */
}
.pxd-pixi-conversation > .pxipa.pxd-pixi-issues[data-pxipa-open="1"] { min-height: 76px; }
.pxd-pixi-conversation > .pxipa.pxd-pixi-issues > .pxipa__body {
    min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: -4px; padding: 4px; /* anneaux de focus non rognes */
}
/* Filet de securite : si la colonne deborde malgre tout (feuille glissee tres bas, ecran de 320 px, saisie agrandie sur
   plusieurs lignes), la zone de saisie reste visible au bas du panneau et recouvre le bas du fil, au lieu d'etre coupee par
   l'overflow:hidden de la colonne. Seulement au repos (ligne d'etat et actions vides) : pendant un tour ou apres une erreur,
   elle ne recouvre jamais « Pixi prepare ta reponse... », « Arreter le calcul » ni « Verifier la reponse ». Sans debordement
   (tous les formats mesures), aucun effet. Jamais non plus quand la zone ne peut pas montrer ensemble la mention « Pixi est une
   intelligence artificielle. » et la saisie (data-pxd-short, pose par la vue : cran « apercu » d'un petit telephone, A8). */
.pxd-pixi-conversation:not([data-pxd-short="1"]):has(> .pxd-pixi-conversation-status:empty + div:empty) > .pxd-assistant-input-bar { position: sticky; bottom: 0; z-index: 1; }
/* Bandeau d'enrichissement : une ligne, jamais deux (son aspect est au single, F3). */
.pxd-pixi-conversation > .pxd-pixi-enrichment { flex: none; min-width: 0; margin: 4px 16px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Forme courte du decompte (« N points a regler ») : telephone seulement. */
.pxd-pixi-conversation .pxipa .pxipa-issues__short { display: none; }
@media (max-width: 768px) {
    .pxd-pixi-conversation > .pxipa.pxd-pixi-issues { max-height: none; gap: 4px; padding: 0 10px; }
    .pxd-pixi-conversation > .pxipa.pxd-pixi-issues[data-pxipa-open="1"] { min-height: 58px; padding-bottom: 6px; }
    .pxd-pixi-conversation > .pxipa.pxd-pixi-issues > .pxipa__head { flex-wrap: nowrap; min-height: 38px; } /* 40 px bordure comprise */
    .pxd-pixi-conversation > .pxipa.pxd-pixi-issues > .pxipa__body { max-height: 40vh; }
    .pxd-pixi-conversation .pxipa .pxipa-issues__toggle { flex-wrap: nowrap; min-height: 38px; }
    .pxd-pixi-conversation .pxipa .pxipa-issues__toggle > :is(.pxipa-issues__label, .pxipa-issues__count, .pxipa-sr) { display: none; }
    .pxd-pixi-conversation .pxipa .pxipa-issues__short { display: block; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
    /* Barre d'outils du panneau sur une ligne des 360 px (FR : 4 px de trop avec 14 px de marge interne) : 42 px rendus au fil. */
    .pxd-pixi-conversation > .pxd-pixi-conversation-toolbar > button[type="button"] { padding-inline: 12px; }
    /* Annonce de 6 s sur une ligne (A7, quatrieme passe) : sur deux lignes, elle coupait la saisie d'un iPhone SE a mi-hauteur la
       ou l'original la gardait entiere. Cinquieme passe (A5) : SEULEMENT les annonces ephemeres de la vue (classe is-ephemeral,
       posee le temps de l'annonce) ; un message qui reste (fin du budget du voyage, erreur, etat a boutons) n'est jamais tronque.
       Le texte entier reste dit au lecteur d'ecran (role=status). Un bloc (la ligne flex du single ne sait pas couper son texte
       anonyme ; 0,4,0 contre 0,3,1), le pictogramme de Pixi en ligne, et flex:none (en overflow:hidden, la colonne l'ecraserait). */
    .pxd-pixi-conversation > .pxd-pixi-conversation-status.is-ephemeral:not(:empty) {
        display: block; flex: none; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .pxd-pixi-conversation > .pxd-pixi-conversation-status.is-ephemeral:not(:empty)::before { display: inline-block; margin-right: 8px; vertical-align: middle; }
    /* Liste des points ouverte : le bandeau d'enrichissement laisse sa place a la liste (A8 ; il revient au repli). Ligne d'etat
       affichee (annonce de 6 s, erreur, tour) : elle passe avant le bandeau, et la liste ouverte se contracte au besoin jusqu'a
       sa ligne de titre (la ou il reste de la place, rien ne se contracte). Mesure : iPhone SE a mi-hauteur, 4 points, bandeau,
       ligne d'etat d'une ligne -> saisie coupee de 29 px (bloc replie) et 18 px (liste ouverte) sans ces deux regles. */
    .pxd-pixi-conversation:has(> .pxipa.pxd-pixi-issues[data-pxipa-open="1"]) > .pxd-pixi-enrichment,
    .pxd-pixi-conversation:has(> .pxd-pixi-conversation-status:not(:empty)) > .pxd-pixi-enrichment { display: none; }
    .pxd-pixi-conversation:has(> .pxd-pixi-conversation-status:not(:empty)) > .pxipa.pxd-pixi-issues[data-pxipa-open="1"] { min-height: 40px; gap: 0; padding-bottom: 0; }
    .pxd-pixi-conversation:has(> .pxd-pixi-conversation-status:not(:empty)) > .pxipa.pxd-pixi-issues[data-pxipa-open="1"] > .pxipa__body { margin-block: 0; padding-block: 0; }
}
.pxipa.pxd-pixi-issues[data-pxipa-severity="blocking"] { --pxipa-worst: #b02a2a; --pxipa-worst-bg: rgba(176, 42, 42, .1); }
.pxipa.pxd-pixi-issues[data-pxipa-severity="warning"] { --pxipa-worst: #8a5300; --pxipa-worst-bg: rgba(138, 83, 0, .1); }
.pxipa.pxd-pixi-issues[data-pxipa-severity="info"] { --pxipa-worst: #1565c0; --pxipa-worst-bg: rgba(21, 101, 192, .1); }
.pxipa.pxd-pixi-issues[data-pxipa-severity] > .pxipa__head .pxipa__icon { background: var(--pxipa-worst-bg); color: var(--pxipa-worst); }
.pxipa .pxipa-issues__toggle {
    position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; width: 100%; min-height: 40px; margin: 0;
    padding: 0 28px 0 0; border: 0; border-radius: var(--pxd-radius-sm); background: transparent; box-shadow: none; color: var(--pxd-fg-title);
    font: inherit; font-weight: inherit; line-height: inherit; letter-spacing: inherit; text-align: left; text-transform: none; cursor: pointer;
    -webkit-tap-highlight-color: transparent; transition: color var(--pxd-dur-fast) var(--pxd-ease-smooth);
}
.pxipa .pxipa-issues__toggle::after {
    content: ""; position: absolute; top: 50%; right: 8px; width: 7px; height: 7px; margin-top: -6px;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg);
    transition: transform var(--pxd-dur-fast) var(--pxd-ease-smooth), margin-top var(--pxd-dur-fast) var(--pxd-ease-smooth);
}
.pxipa .pxipa-issues__toggle[aria-expanded="true"]::after { margin-top: -2px; transform: rotate(-135deg); }
.pxipa .pxipa-issues__label { min-width: 0; overflow-wrap: anywhere; }
.pxipa .pxipa-issues__count {
    flex: none; display: inline-flex; align-items: center; min-height: 22px; padding: 0 9px; border-radius: var(--pxd-radius-full);
    background: var(--pxipa-worst-bg, var(--pxd-gray-100)); color: var(--pxipa-worst, var(--pxd-fg)); font-size: var(--pxd-fs-meta);
    font-weight: 700; line-height: 1.3; letter-spacing: 0; white-space: nowrap;
}

/* ══ Etats interactifs (P21) : survol, actif, focus, desactive, dans cet ordre ════════════════════ */
@media (hover: hover) {
    .pxipa .pxipa-place:hover, .pxipa .pxipa-place:focus-within { transform: translateY(-2px); box-shadow: var(--pxd-shadow-hover); }
    .pxipa .pxipa-place:hover .pxipa-place__media img { transform: scale(1.04); }
    .pxipa .pxipa-option:hover { transform: translateY(-2px); box-shadow: var(--pxd-shadow-hover); }
    /* La couleur est redite : un <a class="pxipa-btn"> recevrait sinon celle des liens de la page au survol. */
    .pxipa .pxipa-btn:hover { background: var(--pxd-gray-50); border-color: rgba(1, 40, 39, .28); color: var(--pxd-fg); transform: translateY(-1px); box-shadow: var(--pxd-shadow-sm); }
    .pxipa .pxipa-btn--primary:hover {
        border-color: transparent; color: var(--pxd-fg-inverse); box-shadow: var(--pxd-shadow);
        background: linear-gradient(135deg, var(--pxd-primary-dark) 0%, var(--pxd-primary) 100%);
    }
    .pxipa .pxipa-btn--ghost:hover { background: var(--pxip-soft, rgba(10, 61, 58, .06)); border-color: transparent; box-shadow: none; }
    .pxipa .pxipa__srcs:hover { background: var(--pxd-gray-50); border-color: rgba(1, 40, 39, .28); }
    .pxipa .pxipa-option__select:hover { background: var(--pxd-gray-100); border-color: rgba(1, 40, 39, .28); }
    .pxipa .pxipa-compare__picks > .pxipa-option__select:not([aria-pressed="true"]):hover {
        background: var(--pxd-tint-secondary-15); border-color: var(--pxd-tint-secondary-30); color: var(--pxd-fg);
    }
    .pxipa .pxipa-option__select[aria-pressed="true"]:hover { background: var(--pxd-primary-dark); border-color: var(--pxd-primary-dark); }
    .pxipa .pxipa-more > summary:hover { color: var(--pxip-green-text, #0f6b3a); }
    .pxipa .pxipa-chip:hover { background: var(--pxd-gray-50); border-color: rgba(1, 40, 39, .28); transform: translateY(-1px); box-shadow: var(--pxd-shadow-sm); }
    .pxipa .pxipa-chip[aria-pressed="true"]:hover { background: var(--pxd-primary-dark); border-color: var(--pxd-primary-dark); }
    .pxipa .pxipa-stepper button:hover { background: var(--pxd-gray-100); border-color: rgba(1, 40, 39, .28); }
    .pxipa .pxipa-party__ages select:hover { border-color: rgba(1, 40, 39, .32); }
    .pxipa .pxipa-advisory a:hover, .pxipa .pxipa__foot a:hover { color: var(--pxip-green-text, #0f6b3a); text-decoration-thickness: 2px; }
}
/* Option retenue : apres le survol, pour que l'anneau vert reste visible sous le pointeur. */
.pxipa .pxipa-option[data-selected="1"] {
    border-color: var(--pxd-secondary); background: var(--pxd-tint-secondary-8);
    box-shadow: 0 0 0 1px var(--pxd-secondary), var(--pxd-shadow-sm);
}
/* La couleur du texte est redite a l'appui, pour chaque variante : sous .pixi-page, un <a class="pxipa-btn"> prendrait
   sinon celle de .pixi-page a:active (0,2,1), soit la couleur exacte du fond appuye du bouton principal. */
.pxipa .pxipa-btn:active { transform: scale(.97); box-shadow: none; color: var(--pxd-fg); }
.pxipa .pxipa-btn:not(.pxipa-btn--primary):not(.pxipa-btn--ghost):active { background: var(--pxd-gray-100); }
.pxipa .pxipa-btn--primary:active {
    color: var(--pxd-fg-inverse); background: linear-gradient(135deg, var(--pxd-primary-dark) 0%, var(--pxd-primary-dark) 100%);
}
.pxipa .pxipa-btn--ghost:active { color: var(--pxd-fg); background: rgba(10, 61, 58, .12); }
.pxipa .pxipa__srcs:active { background: var(--pxd-gray-100); }
.pxipa .pxipa-option__select:active, .pxipa .pxipa-chip:active { transform: scale(.97); box-shadow: none; }
.pxipa .pxipa-stepper button:active { background: var(--pxd-gray-200); transform: scale(.94); }
.pxipa .pxipa-compare__picks > .pxipa-option__select:not([aria-pressed="true"]):active { background: var(--pxd-tint-secondary-30); color: var(--pxd-fg); }
.pxipa .pxipa-party__ages select:active { border-color: var(--pxd-primary); background-color: var(--pxd-gray-50); }
.pxipa .pxipa-more > summary:active, .pxipa .pxipa-advisory a:active, .pxipa .pxipa__foot a:active { color: var(--pxd-primary-dark); }

.pxipa .pxipa-btn:focus-visible,
.pxipa .pxipa__srcs:focus-visible,
.pxipa .pxipa-option__select:focus-visible,
.pxipa .pxipa-more > summary:focus-visible,
.pxipa .pxipa-chip:focus-visible,
.pxipa .pxipa-stepper button:focus-visible,
.pxipa .pxipa-stepper input:focus-visible,
.pxipa .pxipa-party__ages select:focus-visible,
.pxipa .pxipa-advisory a:focus-visible,
.pxipa .pxipa__foot a:focus-visible {
    outline: 2px solid transparent; outline-offset: 2px;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--pxd-secondary);
}

.pxipa .pxipa-btn:is(:disabled, [aria-disabled="true"]),
.pxipa .pxipa__srcs:disabled, .pxipa .pxipa-option__select:disabled, .pxipa .pxipa-chip:disabled, .pxipa .pxipa-stepper button:disabled {
    opacity: .5; cursor: not-allowed; transform: none; box-shadow: none;
}
.pxipa .pxipa-btn:is(:disabled, [aria-disabled="true"]), .pxipa .pxipa-stepper button:disabled { background: #fff; border-color: rgba(1, 40, 39, .16); }
.pxipa .pxipa-btn--primary:is(:disabled, [aria-disabled="true"]) {
    border-color: transparent; background: linear-gradient(135deg, var(--pxd-primary) 0%, var(--pxd-secondary-hover) 100%);
}
.pxipa .pxipa-btn--ghost:is(:disabled, [aria-disabled="true"]) { border-color: transparent; background: transparent; }
.pxipa .pxipa-compare__picks > .pxipa-option__select:not([aria-pressed="true"]):disabled { background: var(--pxd-tint-secondary-8); }
.pxipa .pxipa-party__ages select:disabled { background-color: var(--pxd-gray-50); color: var(--pxd-fg-tertiary); cursor: not-allowed; }

/* L3 (panneau) : etats des interactifs des sections 13-15 (les boutons .pxipa-btn des points a regler ont deja les leurs). */
@media (hover: hover) {
    .pxipa .pxipa-issues__toggle:hover { background: transparent; color: var(--pxip-green-text, #0f6b3a); }
    .pxd-pixi-conversation .pxipa .pxip-map-place:hover,
    .pxd-pixi-conversation .pxipa a:is(.pxip-entity__name, .pxip-source__name):hover { color: var(--pxip-green-text, #0f6b3a); text-decoration: underline; text-decoration-thickness: 2px; }
}
.pxd-pixi-conversation .pxipa .pxip-map-place:active,
.pxd-pixi-conversation .pxipa a:is(.pxip-entity__name, .pxip-source__name):active { color: var(--pxd-primary-dark); }
.pxipa .pxipa-issues__toggle:active { background: transparent; color: var(--pxd-primary-dark); }
.pxipa .pxipa-issues__toggle:focus-visible,
.pxipa .pxipa-compare-wrap:focus-visible,
.pxd-pixi-conversation .pxipa .pxip-map-place:focus-visible,
.pxd-pixi-conversation .pxipa a:is(.pxip-entity__name, .pxip-source__name):focus-visible {
    outline: 2px solid transparent; outline-offset: 2px;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--pxd-secondary);
}
.pxd-pixi-conversation .pxipa .pxip-map-place:disabled { opacity: .5; cursor: not-allowed; }

@media (pointer: coarse) {
    .pxipa .pxipa-btn, .pxipa .pxipa-option__select { min-height: 44px; }
    .pxipa .pxipa__srcs::before { content: ""; position: absolute; inset: -6px -2px; }
}

/* ── 16. Cartes d'operation et boutons du panneau d'itineraire (L3, passe 9 : decisions A1 a A4) ──
   La carte d'operation (section.pxd-pixi-operation.pxipa, composee par la vue) prend la coque des cartes du fil : phrase, complements
   discrets, lignes de changement (modification seulement), bouton principal et lien discret. Selecteurs ancres sous
   .pxd-pixi-conversation (0,3,0 au moins) : ils l'emportent sur la regle en ligne d'origine (.pxd-pixi-conversation .pxd-pixi-operation,
   0,2,0, imprimee apres cette feuille) et sur les etats generiques du theme et du kit Elementor (P3, G3 : 0,1,1 a 0,2,1).
   Bouton principal du panneau : vert plein --pxd-secondary-hover (#178440, 4,76:1 sous un texte blanc) ; #1E9B52 ne donne que 3,58:1
   (mesure, sous 4,5:1) : il reste la couleur de l'anneau de focus et de la coche. Survol #0f6b3a (6,6:1), appui : pression (.96) sur
   ressort, meme vert fonce. Cibles de 44 px au telephone (<= 768 px ou pointeur grossier). */
.pxd-pixi-conversation .pxipa.pxd-pixi-operation {
    gap: 8px; margin: 10px 0 0; padding: 12px 14px; border: 1px solid var(--pxd-border-popup); border-radius: var(--pxd-radius-xl);
}
.pxd-pixi-conversation .pxipa.pxd-pixi-operation > .pxipa__head { flex-wrap: nowrap; align-items: flex-start; }
.pxd-pixi-conversation .pxipa.pxd-pixi-operation > .pxipa__body { gap: 8px; }
.pxd-pixi-conversation .pxipa.pxd-pixi-operation .pxipa__title { margin: 0; line-height: 1.3; }
.pxd-pixi-conversation .pxipa .pxd-pixi-operation-heading { display: grid; flex: 1 1 auto; gap: 1px; min-width: 0; }
.pxd-pixi-conversation .pxipa .pxd-pixi-operation-kind {
    margin: 0; font-size: .68rem; font-weight: 700; line-height: 1.3; letter-spacing: .06em; text-transform: uppercase; color: var(--pxd-fg-tertiary);
}
.pxd-pixi-conversation .pxipa .pxd-pixi-operation-lead {
    display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: .9rem; font-weight: 600; line-height: 1.45; color: var(--pxd-fg);
    overflow-wrap: anywhere;
}
.pxd-pixi-conversation .pxipa .pxd-pixi-operation-check {
    flex: none; display: grid; place-items: center; width: 20px; height: 20px; margin-top: 1px; border-radius: var(--pxd-radius-full);
    background: var(--pxd-secondary-hover); color: var(--pxd-fg-inverse);
}
.pxd-pixi-conversation .pxipa .pxd-pixi-operation-check svg { width: 12px; height: 12px; stroke-width: 3; }
.pxd-pixi-conversation .pxipa .pxd-pixi-operation-meta {
    margin: 0; font-size: var(--pxd-fs-meta); font-weight: 600; line-height: 1.4; color: var(--pxd-fg-tertiary); overflow-wrap: anywhere;
}
/* Lignes de changement (modification) : le champ en petites capitales, l'avant attenue, l'apres en gras ; « ajoute »/« retire » en pastille. */
.pxd-pixi-conversation .pxipa .pxd-pixi-operation-changes { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.pxd-pixi-conversation .pxipa .pxd-pixi-operation-change {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-width: 0; padding: 8px 10px; border-radius: var(--pxd-radius-md);
    background: var(--pxd-gray-50); font-size: .86rem; font-weight: 600; line-height: 1.4; color: var(--pxd-fg);
}
.pxd-pixi-conversation .pxipa .pxd-pixi-operation-change__label {
    flex: 1 1 100%; min-width: 0; font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--pxd-fg-tertiary);
}
.pxd-pixi-conversation .pxipa .pxd-pixi-operation-change__before { min-width: 0; color: var(--pxd-fg-tertiary); overflow-wrap: anywhere; }
.pxd-pixi-conversation .pxipa .pxd-pixi-operation-change__arrow { flex: none; color: var(--pxd-fg-tertiary); }
.pxd-pixi-conversation .pxipa .pxd-pixi-operation-change__after { min-width: 0; font-weight: 800; overflow-wrap: anywhere; }
.pxd-pixi-conversation .pxipa .pxd-pixi-operation-tag {
    display: inline-flex; align-items: center; min-height: 20px; padding: 0 8px; border-radius: var(--pxd-radius-full);
    background: var(--pxd-tint-secondary-15); color: var(--pxip-green-text, #0f6b3a); font-size: .7rem; font-weight: 700; line-height: 1.2;
}
.pxd-pixi-conversation .pxipa .pxd-pixi-operation-change__before + .pxd-pixi-operation-tag { background: var(--pxd-gray-100); color: var(--pxd-fg-tertiary); }
.pxd-pixi-conversation .pxipa .pxd-pixi-operation-more > summary {
    display: inline-flex; align-items: center; min-height: 32px; cursor: pointer; list-style: none; font-size: .8rem; font-weight: 700; color: var(--pxd-fg);
    text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; border-radius: var(--pxd-radius-sm);
}
.pxd-pixi-conversation .pxipa .pxd-pixi-operation-more > summary::-webkit-details-marker { display: none; }
.pxd-pixi-conversation .pxipa .pxd-pixi-operation-more > .pxd-pixi-operation-changes { margin-top: 6px; }
/* A verifier (avertissements) et refus explique : encadres doux, jamais une alarme. */
.pxd-pixi-conversation .pxipa :is(.pxd-pixi-operation-warnings, .pxd-pixi-operation-notice) {
    margin: 0; padding: 8px 12px; border: 1px solid rgba(173, 136, 0, .25); border-radius: var(--pxd-radius-md); background: rgba(236, 171, 0, .10);
    font-size: .82rem; font-weight: 600; line-height: 1.45; color: var(--pxd-fg); overflow-wrap: anywhere;
}
.pxd-pixi-conversation .pxipa .pxd-pixi-operation-warnings > p { margin: 0 0 2px; font-weight: 800; }
.pxd-pixi-conversation .pxipa .pxd-pixi-operation-warnings > ul { margin: 0; padding-left: 1.2em; list-style: disc; }
.pxd-pixi-conversation .pxipa .pxd-pixi-operation-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 2px; }
.pxd-pixi-conversation .pxipa .pxd-pixi-operation-undo { flex: 1 1 12rem; min-width: 0; margin: 0; font-size: var(--pxd-fs-meta); font-weight: 600; line-height: 1.4; color: var(--pxd-fg-tertiary); }
/* Annulee, expiree, laissee de cote : carte attenuee, sans ombre (rien a faire). */
.pxd-pixi-conversation .pxipa.pxd-pixi-operation:is([data-pxipa-op-state="undone"], [data-pxipa-op-state="expired"], [data-pxipa-op-state="later"]) {
    background: var(--pxd-gray-50); box-shadow: none;
}
.pxd-pixi-conversation .pxipa.pxd-pixi-operation:is([data-pxipa-op-state="undone"], [data-pxipa-op-state="expired"]) :is(.pxipa__icon, .pxipa__title, .pxd-pixi-operation-lead) {
    color: var(--pxd-fg-tertiary);
}
.pxd-pixi-conversation .pxipa.pxd-pixi-operation:is([data-pxipa-op-state="undone"], [data-pxipa-op-state="expired"]) .pxipa__icon { background: var(--pxd-gray-100); }
/* Suivi indisponible (rendu d'origine du client : un paragraphe et « Verifier la modification ») : meme coque, bouton en contour. */
.pxd-pixi-conversation .pxipa.pxd-pixi-operation > p { margin: 0; font-size: .88rem; font-weight: 600; line-height: 1.45; color: var(--pxd-fg); }
.pxd-pixi-conversation .pxipa.pxd-pixi-operation > button { justify-self: start; }

/* Boutons de la carte : secondaire en contour (base), principal vert (--primary), lien discret (retrait : « Pas maintenant », « Annuler »). */
.pxd-pixi-conversation .pxipa .pxd-pixi-operation-button {
    position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; min-height: 40px; margin: 0; padding: 0 16px;
    border: 1px solid rgba(1, 40, 39, .16); border-radius: var(--pxd-radius-full); background: #fff; box-shadow: none; color: var(--pxd-fg);
    font-family: var(--pxd-font-sans); font-size: .84rem; font-weight: 700; line-height: 1.2; letter-spacing: 0; text-align: center; text-transform: none; text-decoration: none;
    overflow-wrap: anywhere; cursor: pointer; -webkit-tap-highlight-color: transparent;
    transition: transform var(--pxd-dur-normal) var(--pxd-ease-bounce), box-shadow var(--pxd-dur-normal) var(--pxd-ease-smooth),
        background-color var(--pxd-dur-fast) var(--pxd-ease-smooth), border-color var(--pxd-dur-fast) var(--pxd-ease-smooth), color var(--pxd-dur-fast) var(--pxd-ease-smooth);
}
.pxd-pixi-conversation .pxipa .pxd-pixi-operation-button--primary {
    border-color: transparent; background: var(--pxd-secondary-hover); color: var(--pxd-fg-inverse); box-shadow: 0 6px 16px -6px rgba(30, 155, 82, .55);
}
.pxd-pixi-conversation .pxipa .pxd-pixi-operation-link {
    position: relative; display: inline-flex; align-items: center; min-height: 40px; margin: 0; padding: 0 4px; border: 0; border-radius: var(--pxd-radius-sm);
    background: transparent; box-shadow: none; color: var(--pxd-fg); font-family: var(--pxd-font-sans); font-size: .82rem; font-weight: 700; line-height: 1.2;
    letter-spacing: 0; text-transform: none; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; cursor: pointer;
    -webkit-tap-highlight-color: transparent; transition: color var(--pxd-dur-fast) var(--pxd-ease-smooth);
}
/* Principaux des cartes du module DANS le panneau (« Ajouter », « Retenir », « Ouvrir ce voyage »…) : meme vert que la carte d'operation. */
.pxd-pixi-conversation .pxipa .pxipa-btn--primary { border-color: transparent; background: var(--pxd-secondary-hover); box-shadow: 0 6px 16px -6px rgba(30, 155, 82, .55); }
/* Etats (P21) : survol, appui, focus, focus clavier, desactive ; chaque propriete redite (un etat non declare est un etat du theme). */
.pxd-pixi-conversation .pxipa .pxd-pixi-operation-button:focus { outline: none; }
.pxd-pixi-conversation .pxipa .pxd-pixi-operation-link:focus { outline: none; }
@media (hover: hover) {
    .pxd-pixi-conversation .pxipa .pxd-pixi-operation-button:hover {
        border-color: rgba(1, 40, 39, .28); background: var(--pxd-gray-50); color: var(--pxd-fg); transform: translateY(-1px); box-shadow: var(--pxd-shadow-sm);
    }
    .pxd-pixi-conversation .pxipa .pxd-pixi-operation-button--primary:hover,
    .pxd-pixi-conversation .pxipa .pxipa-btn--primary:hover {
        border-color: transparent; background: var(--pxip-green-text, #0f6b3a); color: var(--pxd-fg-inverse); transform: translateY(-1px);
        box-shadow: 0 10px 22px -8px rgba(30, 155, 82, .6);
    }
    .pxd-pixi-conversation .pxipa .pxd-pixi-operation-link:hover { background: transparent; color: var(--pxip-green-text, #0f6b3a); text-decoration-thickness: 2px; }
    .pxd-pixi-conversation .pxipa .pxd-pixi-operation-more > summary:hover { color: var(--pxip-green-text, #0f6b3a); text-decoration-thickness: 2px; }
}
.pxd-pixi-conversation .pxipa .pxd-pixi-operation-button:active {
    border-color: rgba(1, 40, 39, .28); background: var(--pxd-gray-100); color: var(--pxd-fg); transform: scale(.96); box-shadow: none;
}
.pxd-pixi-conversation .pxipa .pxd-pixi-operation-button--primary:active,
.pxd-pixi-conversation .pxipa .pxipa-btn--primary:active {
    border-color: transparent; background: var(--pxip-green-text, #0f6b3a); color: var(--pxd-fg-inverse); transform: scale(.96); box-shadow: 0 2px 6px rgba(30, 155, 82, .3);
}
.pxd-pixi-conversation .pxipa .pxd-pixi-operation-link:active { background: transparent; color: var(--pxd-primary-dark); }
.pxd-pixi-conversation .pxipa .pxd-pixi-operation-more > summary:active { color: var(--pxd-primary-dark); }
.pxd-pixi-conversation .pxipa :is(.pxd-pixi-operation-button, .pxd-pixi-operation-link, .pxd-pixi-operation-more > summary):focus-visible {
    outline: 2px solid var(--pxd-secondary); outline-offset: 2px;
}
.pxd-pixi-conversation .pxipa .pxd-pixi-operation-button:disabled {
    border-color: rgba(1, 40, 39, .16); background: #fff; color: var(--pxd-fg); opacity: .5; cursor: not-allowed; transform: none; box-shadow: none;
}
.pxd-pixi-conversation .pxipa :is(.pxd-pixi-operation-button--primary, .pxipa-btn--primary):disabled {
    border-color: transparent; background: var(--pxd-secondary-hover); color: var(--pxd-fg-inverse); opacity: .5; cursor: not-allowed; transform: none; box-shadow: none;
}
.pxd-pixi-conversation .pxipa .pxd-pixi-operation-link:disabled { background: transparent; color: var(--pxd-fg); opacity: .5; cursor: not-allowed; text-decoration-thickness: 1px; }
/* Pendant l'envoi (aria-busy de la carte, pose par le client) : un anneau tourne dans le bouton principal desactive. */
.pxd-pixi-conversation .pxipa.pxd-pixi-operation[aria-busy="true"] .pxd-pixi-operation-button--primary::after {
    content: ""; flex: none; width: 14px; height: 14px; border-radius: var(--pxd-radius-full); border: 2px solid currentColor; border-top-color: transparent;
    animation: pxipa-spin 700ms linear infinite;
}

/* Boutons du fil sans classe dans la vue (poses sous drapeau par la couche L3) : etats du tour (« Verifier la reponse », « Commencer un
   autre fil », « Arreter le calcul », « Recharger le voyage »…), liste des conversations precedentes, « Afficher les messages
   precedents ». Pilules en contour, comme la barre d'outils du single. */
.pxd-pixi-conversation > .pxd-pixi-conversation-actions:not(:empty) { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 16px 8px; }
.pxd-pixi-conversation > .pxd-pixi-sessions:not(:empty) { display: grid; gap: 6px; margin: 8px 16px 0; }
.pxd-pixi-conversation > :is(.pxd-pixi-conversation-actions, .pxd-pixi-sessions) > :is(button, a):not([hidden]), .pxd-pixi-conversation > .pxd-pixi-older:not([hidden]) {
    position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 36px; margin: 0; padding: 0 14px;
    border: 1px solid rgba(1, 40, 39, .12); border-radius: 9999px; background: rgba(255, 255, 255, .92); box-shadow: 0 2px 8px rgba(15, 163, 107, .06);
    color: #0A3D3A; font: 700 12.5px/1.3 'Urbanist', 'Inter', sans-serif; letter-spacing: 0; text-align: center; text-transform: none; text-decoration: none;
    cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color 150ms ease, box-shadow 150ms ease, transform 250ms cubic-bezier(.34, 1.56, .64, 1);
}
.pxd-pixi-conversation > .pxd-pixi-sessions > button { justify-content: flex-start; border-radius: 12px; text-align: left; }
.pxd-pixi-conversation > .pxd-pixi-older:not([hidden]) { align-self: center; margin: 8px auto 0; }
.pxd-pixi-conversation > :is(.pxd-pixi-conversation-actions, .pxd-pixi-sessions) > :is(button, a):focus,
.pxd-pixi-conversation > .pxd-pixi-older:focus { outline: none; }
@media (hover: hover) {
    .pxd-pixi-conversation > :is(.pxd-pixi-conversation-actions, .pxd-pixi-sessions) > :is(button, a):hover,
    .pxd-pixi-conversation > .pxd-pixi-older:hover { background: #fff; color: #0A3D3A; box-shadow: 0 8px 20px -10px rgba(15, 163, 107, .35); transform: translateY(-1px); }
}
.pxd-pixi-conversation > :is(.pxd-pixi-conversation-actions, .pxd-pixi-sessions) > :is(button, a):active,
.pxd-pixi-conversation > .pxd-pixi-older:active { background: #fff; color: #0A3D3A; box-shadow: 0 1px 2px rgba(15, 163, 107, .08); transform: scale(.96); }
.pxd-pixi-conversation > :is(.pxd-pixi-conversation-actions, .pxd-pixi-sessions) > :is(button, a):focus-visible,
.pxd-pixi-conversation > .pxd-pixi-older:focus-visible { outline: 2px solid #1E9B52; outline-offset: 2px; }
.pxd-pixi-conversation > :is(.pxd-pixi-conversation-actions, .pxd-pixi-sessions) > button:disabled,
.pxd-pixi-conversation > .pxd-pixi-older:disabled { opacity: .55; cursor: default; transform: none; box-shadow: none; }

/* Telephone ou pointeur grossier : cibles de 44 px. Boutons de la carte d'operation (dans le fil qui defile) : hauteur minimale. Controles
   dont la hauteur est comptee au pixel pour garder la saisie visible (barre d'outils sur une ligne des 360 px, bouton de repli des points de
   40 px, etats du tour, envoi, boutons des cartes du module) : zone de toucher etendue a 44 px par un pseudo-element, taille visible inchangee. */
@media (max-width: 768px), (pointer: coarse) {
    .pxd-pixi-conversation .pxipa :is(.pxd-pixi-operation-button, .pxd-pixi-operation-link),
    .pxd-pixi-conversation .pxipa .pxd-pixi-operation-more > summary { min-height: 44px; }
    .pxd-pixi-conversation > :is(.pxd-pixi-conversation-toolbar, .pxd-assistant-input-bar) > button { position: relative; }
    .pxd-pixi-conversation > :is(.pxd-pixi-conversation-toolbar, .pxd-assistant-input-bar, .pxd-pixi-conversation-actions, .pxd-pixi-sessions) > :is(button, a)::before,
    .pxd-pixi-conversation > .pxd-pixi-older::before,
    .pxd-pixi-conversation .pxipa :is(.pxipa-issues__toggle, .pxipa-btn)::before {
        content: ""; position: absolute; top: 50%; left: 0; right: 0; height: 44px; min-height: 100%; transform: translateY(-50%);
    }
}
@media (prefers-reduced-motion: reduce) {
    .pxd-pixi-conversation .pxipa :is(.pxd-pixi-operation-button, .pxd-pixi-operation-button--primary, .pxipa-btn--primary):is(:hover, :active),
    .pxd-pixi-conversation > :is(.pxd-pixi-conversation-actions, .pxd-pixi-sessions) > :is(button, a):is(:hover, :active),
    .pxd-pixi-conversation > .pxd-pixi-older:is(:hover, :active) { transform: none; }
    .pxd-pixi-conversation > :is(.pxd-pixi-conversation-actions, .pxd-pixi-sessions) > :is(button, a), .pxd-pixi-conversation > .pxd-pixi-older { transition: none; }
    .pxd-pixi-conversation .pxipa.pxd-pixi-operation[aria-busy="true"] .pxd-pixi-operation-button--primary::after { animation: none; }
}

/* ── Mouvement ── */
@keyframes pxdRise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes pxipa-shimmer { to { background-position: 180% 50%, 180% 50%; } }
@keyframes pxipa-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .pxipa, .pxipa *, .pxipa *::before, .pxipa *::after, .pxipa-sk, .pxipa-sk *, .pxipa-sk *::after {
        animation: none !important; transition-duration: .001ms !important; transition-delay: 0s !important;
    }
    .pxipa-row { scroll-behavior: auto; }
    .pxipa .pxipa-place:hover, .pxipa .pxipa-place:focus-within, .pxipa .pxipa-option:hover, .pxipa .pxipa-btn:hover, .pxipa .pxipa-chip:hover,
    .pxipa .pxipa-btn:active, .pxipa .pxipa-chip:active, .pxipa .pxipa-option__select:active, .pxipa .pxipa-stepper button:active { transform: none; }
    .pxipa .pxipa-place:hover .pxipa-place__media img { transform: none; }
}