/* ─────────────────────────────────────────────────────────────────────────────────────────────────────────
   SubmitX : persona.css, la fenêtre « Aidez-nous à personnaliser votre expérience » + ses points d'entrée.
   Comportement : assets/site/persona.js (window.SXPersona). Aucun fichier, police ni requête externe.

   Langage visuel repris de sections.css (plaques à coins repérés, bande de signalisation orange et noir, ombre décalée
   des boutons), mais autonome : toutes les couleurs passent par les variables --px-* ci-dessous (clair, sombre), donc
   la feuille fonctionne sur n'importe quelle page, avec ou sans sections.css. Tout mouvement se coupe avec
   prefers-reduced-motion. Les noms de classes commencent par .px- pour ne jamais heurter ceux d'une page.
   ───────────────────────────────────────────────────────────────────────────────────────────────────────── */
:root{
  --px-surface:#FFFFFF; --px-surface2:#F9FAFB; --px-plate:#FFFFFF; --px-tile:#FFF7EF; --px-tile-hover:#FFEFE0;
  --px-ink:#111827; --px-ink2:#374151; --px-ink3:#4B5563;
  --px-line:#E5E7EB; --px-line2:#C9CED6;
  --px-brand:#FF6B2C; --px-brand-ink:#C2410C; --px-soft:#FFF0E5; --px-soft-ink:#9A3412; --px-cta:#C2410C;
  --px-shadow:#111827; --px-stripe:#111827; --px-scrim:rgba(17,24,39,.62); --px-focus:#C2410C;
  --px-font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
}
:root[data-theme="dark"]{
  --px-surface:#161616; --px-surface2:#1C1C1C; --px-plate:#1C1C1C; --px-tile:#1F1F1F; --px-tile-hover:#272727;
  --px-ink:#F3F4F6; --px-ink2:#D1D5DB; --px-ink3:#A3A9B5;
  --px-line:#2A2A2A; --px-line2:#454545;
  --px-brand:#FF6B2C; --px-brand-ink:#FF8A4C; --px-soft:rgba(255,107,44,.14); --px-soft-ink:#FFB37A; --px-cta:#C2410C;
  --px-shadow:#C2410C; --px-stripe:#3A3A3A; --px-scrim:rgba(0,0,0,.72); --px-focus:#FF8A4C;
}

/* ── Verrouillage du défilement de l'arrière-plan, sans saut de la page ────────────────────────────────── */
html.px-lock{overflow:hidden!important;scrollbar-gutter:stable}
html.px-lock-nb{overflow:hidden!important}

.px-vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ── Pictogrammes bicolores (ico2.svg) : l'encre suit color, l'orange est --ico-accent ─────────────────── */
.px-ico{display:block;flex:none;width:64px;height:64px;color:var(--px-ink);--ico-accent:var(--px-brand);overflow:visible}

/* ══ La fenêtre ══════════════════════════════════════════════════════════════════════════════════════════ */
.px-overlay{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px;
  background:var(--px-scrim);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  font-family:var(--px-font);-webkit-font-smoothing:antialiased;overscroll-behavior:contain;animation:px-fade .24s ease}
.px-overlay *,.px-overlay *::before,.px-overlay *::after{box-sizing:border-box}
.px-overlay.px-leaving{animation:px-fade-out .2s ease forwards;pointer-events:none}

.px-dlg{position:relative;display:flex;flex-direction:column;width:min(800px,100%);height:min(700px,100%);
  background:var(--px-surface);color:var(--px-ink);border:1px solid var(--px-line2);border-radius:4px;
  box-shadow:10px 10px 0 var(--px-shadow),0 32px 80px rgba(0,0,0,.35);line-height:1.5;animation:px-rise .34s cubic-bezier(.2,.8,.2,1)}
.px-overlay.px-leaving .px-dlg{animation:px-rise-out .2s ease forwards}
/* coins repérés (bas gauche et bas droit) : le haut est tenu par la bande de signalisation */
.px-dlg::before,.px-dlg::after{content:"";position:absolute;bottom:-1px;width:16px;height:16px;border:0 solid var(--px-brand);pointer-events:none;z-index:2}
.px-dlg::before{left:-1px;border-bottom-width:3px;border-left-width:3px}
.px-dlg::after{right:-1px;border-bottom-width:3px;border-right-width:3px}
.px-stripe{flex:none;height:10px;margin:-1px -1px 0;border-radius:4px 4px 0 0;
  background:repeating-linear-gradient(-45deg,var(--px-brand) 0 14px,var(--px-stripe) 14px 28px)}

.px-x{position:absolute;z-index:3;top:20px;right:14px;display:grid;place-items:center;width:44px;height:44px;padding:0;border-radius:4px;
  border:1.5px solid transparent;background:transparent;color:var(--px-ink);cursor:pointer;font:inherit;transition:background .15s,border-color .15s,transform .15s}
.px-x svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round}
.px-x:hover{background:var(--px-soft);border-color:var(--px-brand)}
.px-x:active{transform:scale(.94)}

.px-head{flex:none;padding:18px 70px 0 30px}
.px-meta{display:flex;align-items:center;gap:12px;min-height:24px}
.px-prog{display:flex;gap:5px}
.px-prog i{display:block;width:30px;height:6px;border-radius:1px;background:var(--px-line2);transition:background .25s,width .25s}
.px-prog i.on{background:var(--px-brand)}
.px-prog i.cur{width:46px}
.px-stepno{margin:0;font-size:12.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--px-brand-ink)}
.px-title{margin:10px 0 0;font-size:clamp(23px,3.1vw,32px);font-weight:850;letter-spacing:-.03em;line-height:1.1;color:var(--px-ink)}

.px-main{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:0 30px 6px;scrollbar-width:thin;scrollbar-color:var(--px-line2) transparent}
.px-panel{padding-top:2px}
.px-panel.px-fwd{animation:px-in-fwd .28s cubic-bezier(.2,.8,.2,1)}
.px-panel.px-back{animation:px-in-back .28s cubic-bezier(.2,.8,.2,1)}
.px-q{margin:14px 0 0;font-size:clamp(18px,2.2vw,22px);font-weight:800;letter-spacing:-.02em;line-height:1.25;color:var(--px-brand-ink);outline:none}
.px-hint{margin:4px 0 0;font-size:14.5px;color:var(--px-ink3)}
.px-grid{display:grid;gap:14px;margin:18px 0 12px}
.px-grid.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.px-grid.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.px-grid.trades{grid-template-columns:repeat(auto-fill,minmax(176px,1fr));gap:10px;margin-top:10px}

/* ── Tuiles ─────────────────────────────────────────────────────────────────────────────────────────── */
.px-tile{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;min-height:148px;padding:18px 12px 16px;
  text-align:center;background:var(--px-tile);color:var(--px-ink);border:1.5px solid var(--px-line2);border-radius:4px;font:inherit;cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s,background .18s;-webkit-tap-highlight-color:transparent;
  animation:px-pop .42s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:calc(var(--i,0) * 45ms)}
.px-tile .px-ico{width:68px;height:68px}
.px-tile .px-lab{font-size:16px;font-weight:800;letter-spacing:-.01em;line-height:1.2}
.px-tile .px-hint{margin:0;font-size:12.5px;line-height:1.35}
.px-tile[hidden]{display:none}
.px-tile:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--px-brand)}
.px-tile:focus-visible{outline:3px solid var(--px-focus);outline-offset:3px}
.px-tile[aria-pressed="true"]{border-color:var(--px-brand);background:var(--px-soft);box-shadow:4px 4px 0 var(--px-brand)}
@media (hover:hover){
  .px-tile:hover{transform:translate(-2px,-3px);box-shadow:5px 6px 0 var(--px-brand);border-color:var(--px-ink);background:var(--px-tile-hover)}
  .px-tile:hover .px-ico{animation:px-wiggle .55s ease}
  .px-tile[aria-pressed="true"]:hover{border-color:var(--px-brand)}
}
.px-chk{position:absolute;top:8px;right:8px;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--px-brand);
  opacity:0;transform:scale(.4);transition:opacity .15s,transform .25s cubic-bezier(.3,1.6,.5,1);pointer-events:none}
.px-chk svg{width:16px;height:16px;fill:none;stroke:#1B0808;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.px-tile[aria-pressed="true"] .px-chk{opacity:1;transform:scale(1)}
.px-tile[aria-pressed="true"] .px-chk path{stroke-dasharray:24;animation:px-draw .35s .08s ease backwards}

/* étape « équipe » : 2 × 2, plus grandes */
.px-grid.c2 .px-tile{min-height:168px}
.px-grid.c2 .px-tile .px-ico{width:78px;height:78px}

/* étape « métier » : recherche + grille défilante, tuiles en rangée */
.px-search{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:10px;margin:14px 0 0;padding:6px 0 8px;background:var(--px-surface)}
.px-search label{position:relative;display:block;flex:1;min-width:0}
.px-search svg{position:absolute;left:14px;top:50%;width:18px;height:18px;margin-top:-9px;stroke:var(--px-ink3);fill:none;stroke-width:2.2;stroke-linecap:round;pointer-events:none}
.px-search input{display:block;width:100%;min-height:48px;padding:0 14px 0 42px;border-radius:4px;border:1.5px solid var(--px-line2);background:var(--px-surface2);color:var(--px-ink);font:inherit;font-size:16px;outline:none;-webkit-appearance:none;appearance:none}
.px-search input::placeholder{color:var(--px-ink3);opacity:1}
.px-search input:focus-visible{border-color:var(--px-focus);box-shadow:0 0 0 3px var(--px-soft)}
.px-count{flex:none;font-size:13px;font-weight:700;color:var(--px-ink3);white-space:nowrap}
.px-grid.trades .px-tile{flex-direction:row;justify-content:flex-start;align-items:center;gap:12px;min-height:64px;padding:8px 14px 8px 10px;text-align:left}
.px-grid.trades .px-tile .px-ico{width:44px;height:44px}
.px-grid.trades .px-tile .px-lab{font-size:14px;font-weight:750;line-height:1.2}
.px-grid.trades .px-tile[aria-pressed="true"] .px-lab{padding-right:22px}
.px-grid.trades .px-chk{top:50%;right:10px;margin-top:-13px}
.px-empty{margin:26px 0 6px;padding:22px;border:1.5px dashed var(--px-line2);border-radius:4px;text-align:center;color:var(--px-ink2);font-size:15px}
.px-empty .px-btn{margin-top:12px}

/* ── Boutons : ombre décalée ───────────────────────────────────────────────────────────────────────── */
.px-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 18px;border-radius:6px;border:1.5px solid var(--px-cta);
  background:var(--px-cta);color:#fff;font:inherit;font-size:15px;font-weight:800;line-height:1.1;cursor:pointer;text-decoration:none;
  box-shadow:4px 4px 0 var(--px-shadow);transition:transform .15s ease,box-shadow .15s ease,background .15s}
.px-btn:hover{transform:translate(-1px,-1px);box-shadow:6px 6px 0 var(--px-shadow);color:#fff}
.px-btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--px-shadow)}
.px-btn.ghost{background:var(--px-surface);color:var(--px-ink);border-color:var(--px-line2);box-shadow:4px 4px 0 var(--px-line2)}
.px-btn.ghost:hover{background:var(--px-surface2);color:var(--px-ink);box-shadow:6px 6px 0 var(--px-line2)}
.px-btn svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.px-btn:focus-visible,.px-link:focus-visible,.px-x:focus-visible,.px-go:focus-visible,.px-chip:focus-visible,.px-hl-change:focus-visible,.px-note-change:focus-visible{outline:3px solid var(--px-focus);outline-offset:3px}
.px-link{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;border:0;background:none;color:var(--px-ink2);font:inherit;font-size:14.5px;font-weight:700;
  text-decoration:underline;text-underline-offset:3px;cursor:pointer;border-radius:4px}
.px-link:hover{color:var(--px-brand-ink)}

/* ── Pied : confidentialité + Retour / Passer ─────────────────────────────────────────────────────── */
.px-foot{flex:none;display:flex;align-items:center;justify-content:space-between;gap:10px 16px;flex-wrap:wrap;margin:6px 30px 0;padding:12px 0 18px;border-top:1px dashed var(--px-line2)}
.px-priv{display:flex;align-items:center;gap:8px;margin:0;flex:1 1 280px;min-width:0;font-size:13px;line-height:1.4;color:var(--px-ink3)}
.px-priv .px-ico{width:22px;height:22px}
.px-foot-act{display:flex;align-items:center;gap:6px;margin-left:auto}

/* ── Écran final : « Voici votre parcours » ──────────────────────────────────────────────────────────── */
.px-done{display:grid;gap:12px;margin:18px 0 8px}
.px-go{position:relative;display:grid;grid-template-columns:64px minmax(0,1fr) 22px;align-items:center;gap:14px;min-height:84px;padding:12px 16px 12px 12px;
  border:1.5px solid var(--px-line2);border-radius:4px;background:var(--px-tile);color:var(--px-ink);text-decoration:none;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s;animation:px-pop .45s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:calc(var(--i,0) * 90ms)}
.px-go .px-ico{width:56px;height:56px}
.px-go b{display:block;font-size:16.5px;font-weight:800;letter-spacing:-.01em;line-height:1.25}
.px-go small{display:block;margin-top:2px;font-size:13.5px;line-height:1.4;color:var(--px-ink3)}
.px-go .px-arrow{width:22px;height:22px;stroke:var(--px-brand-ink);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s}
.px-go.main{background:var(--px-cta);border-color:var(--px-cta);color:#fff;box-shadow:4px 4px 0 var(--px-shadow)}
.px-go.main small{color:#fff}
.px-go.main .px-arrow{stroke:#fff}
.px-go.main .px-ico{color:#fff;--ico-accent:#FFD2B8;background:transparent}
@media (hover:hover){
  .px-go:hover{transform:translate(-2px,-3px);box-shadow:5px 6px 0 var(--px-brand);border-color:var(--px-ink)}
  .px-go.main:hover{box-shadow:6px 7px 0 var(--px-shadow);border-color:var(--px-cta)}
  .px-go:hover .px-arrow{transform:translateX(4px)}
}
.px-done-links{display:flex;flex-wrap:wrap;gap:4px 10px;margin:4px 0 0}

/* ══ Téléphone : feuille plein écran qui monte du bas ═════════════════════════════════════════════════ */
@media (max-width:640px){
  .px-overlay{padding:0;align-items:flex-end}
  .px-dlg{width:100%;height:100%;max-height:100%;border:0;border-radius:0;box-shadow:none;padding-top:env(safe-area-inset-top,0px);animation:px-sheet .36s cubic-bezier(.2,.8,.2,1)}
  .px-overlay.px-leaving .px-dlg{animation:px-sheet-out .22s ease forwards}
  .px-dlg::before,.px-dlg::after{display:none}
  .px-stripe{margin:0;border-radius:0}
  .px-x{top:calc(18px + env(safe-area-inset-top,0px));right:8px}
  .px-head{padding:14px 62px 0 18px}
  .px-main{padding:0 18px 4px}
  .px-grid.c3,.px-grid.c2{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .px-tile{min-height:148px;padding:14px 8px 12px}
  .px-tile .px-ico{width:60px;height:60px}
  .px-tile .px-lab{font-size:15px}
  .px-grid.c2 .px-tile{min-height:158px}
  .px-grid.c2 .px-tile .px-ico{width:68px;height:68px}
  .px-grid.trades{grid-template-columns:minmax(0,1fr);gap:8px}
  .px-grid.trades .px-tile{min-height:60px}
  .px-search{margin-top:10px}
  .px-foot{margin:4px 18px 0;padding:10px 0 calc(12px + env(safe-area-inset-bottom,0px));gap:6px 12px}
  .px-priv{flex-basis:100%;font-size:12.5px}
  .px-foot-act{width:100%;justify-content:flex-end;margin-left:0}
  .px-foot-act .px-btn{margin-right:auto}
  .px-go{grid-template-columns:52px minmax(0,1fr) 20px;gap:12px}
  .px-go .px-ico{width:48px;height:48px}
}
@media (max-width:640px) and (max-height:560px){
  .px-title{font-size:19px}
  .px-tile{min-height:110px}
  .px-tile .px-ico{width:46px;height:46px}
  .px-grid.c2 .px-tile{min-height:120px}
  .px-grid.c2 .px-tile .px-ico{width:50px;height:50px}
}
@media (min-width:641px) and (max-height:760px){
  .px-dlg{height:100%}
  .px-q{margin-top:8px}
  .px-grid{gap:10px;margin:12px 0 8px}
  .px-tile{min-height:112px;padding:10px 10px 10px;gap:6px}
  .px-tile .px-ico{width:50px;height:50px}
  .px-grid.c2 .px-tile{min-height:116px}
  .px-grid.c2 .px-tile .px-ico{width:54px;height:54px}
  .px-grid.trades{margin-top:6px}
  .px-grid.trades .px-tile{min-height:58px}
}
@media (min-width:641px) and (max-height:600px){
  .px-title{font-size:21px}
  .px-tile{min-height:92px}
  .px-tile .px-ico{width:40px;height:40px}
  .px-grid.c2 .px-tile{min-height:96px}
  .px-grid.c2 .px-tile .px-ico{width:42px;height:42px}
}

/* ══ Points d'entrée : puce, ligne du hero de l'accueil, note sous les plans ═══════════════════════════ */
.px-slot{display:flex;justify-content:center;width:100%;margin:18px 0 10px;font-family:var(--px-font)}
.px-slot *,.px-slot *::before,.px-slot *::after{box-sizing:border-box}
.px-chip{display:inline-flex;align-items:center;gap:9px;max-width:100%;min-height:44px;padding:0 14px 0 10px;border-radius:6px;border:1.5px solid var(--px-line2);
  background:var(--px-plate);color:var(--px-ink);font:inherit;font-size:14px;font-weight:700;line-height:1.2;text-align:left;cursor:pointer;
  box-shadow:3px 3px 0 var(--px-brand);transition:transform .15s ease,box-shadow .15s ease,border-color .15s}
.px-chip .px-ico{width:28px;height:28px}
.px-chip-t{display:flex;align-items:center;gap:9px;min-width:0}
.px-chip-k{font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--px-brand-ink);white-space:nowrap}
.px-chip-v{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.px-chip-c{flex:none;padding-left:10px;border-left:1.5px solid var(--px-line2);color:var(--px-brand-ink);font-weight:800;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
@media (hover:hover){.px-chip:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--px-brand);border-color:var(--px-ink)}}
.px-chip:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--px-brand)}

.px-hero-line{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"head change" "mods mods";align-items:center;gap:4px 14px;width:min(620px,100%);padding:10px 8px 12px 16px;
  background:var(--px-plate);color:var(--px-ink);border:1px solid var(--px-line2);border-radius:4px;box-shadow:5px 5px 0 var(--px-brand);text-align:left}
.px-hero-line::before,.px-hero-line::after{content:"";position:absolute;width:12px;height:12px;border:0 solid var(--px-brand);pointer-events:none}
.px-hero-line::before{top:-1px;left:-1px;border-top-width:3px;border-left-width:3px}
.px-hero-line::after{bottom:-1px;right:-1px;border-bottom-width:3px;border-right-width:3px}
.px-hl-head{grid-area:head;display:flex;align-items:center;gap:10px;min-width:0}
.px-hl-head .px-ico{width:40px;height:40px}
.px-hl-k{display:block;font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--px-brand-ink)}
.px-hl-v{display:block;font-size:16px;font-weight:850;letter-spacing:-.01em;line-height:1.2}
.px-hl-mods{grid-area:mods;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:10px 8px 0 0;list-style:none;border-top:1px dashed var(--px-line2)}
.px-hl-mods li{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 11px 0 7px;border-radius:3px;background:var(--px-soft);color:var(--px-soft-ink);font-size:13.5px;font-weight:700;line-height:1.2}
.px-hl-mods .px-ico{width:22px;height:22px}
.px-hl-change{grid-area:change;display:inline-flex;align-items:center;min-height:44px;padding:0 10px;border:0;background:none;color:var(--px-brand-ink);font:inherit;font-size:14px;font-weight:800;
  text-decoration:underline;text-underline-offset:3px;cursor:pointer;border-radius:4px}
@media (max-width:640px){
  .px-hero-line{padding:10px 6px 12px 12px}
  .px-hl-k{font-size:10.5px;letter-spacing:.08em}
  .px-hl-mods{gap:6px}
  .px-hl-mods li{min-height:32px;font-size:13px}
  .px-chip-t{flex-direction:column;align-items:flex-start;gap:1px}
  .px-chip-k{font-size:10.5px;letter-spacing:.08em}
}

.px-plan-note{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:6px 14px;margin:22px 0 0;padding:14px 18px;background:var(--px-plate);color:var(--px-ink);
  border:1px solid var(--px-line2);border-radius:4px;box-shadow:5px 5px 0 var(--px-brand);font-family:var(--px-font);font-size:15px;line-height:1.5}
.px-plan-note .px-ico{width:44px;height:44px}
.px-plan-note p{margin:0;min-width:0}
.px-plan-note p b{font-weight:800}
.px-plan-note a{color:var(--px-brand-ink);font-weight:800;text-decoration:underline;text-underline-offset:3px}
.px-note-change{flex:none;display:inline-flex;align-items:center;min-height:44px;padding:0 10px;border:0;background:none;color:var(--px-brand-ink);font:inherit;font-size:14px;font-weight:800;text-decoration:underline;text-underline-offset:3px;cursor:pointer;border-radius:4px}
@media (max-width:640px){
  .px-plan-note{grid-template-columns:minmax(0,1fr);margin:18px 0 0;padding:14px 16px 6px;font-size:14.5px}
  .px-plan-note .px-ico{display:none}
  .px-note-change{justify-self:end}
}

/* badge « Recommandé pour vous » sur une carte de plan (la carte est déjà position:relative) */
.px-reco-badge{position:absolute;z-index:4;top:14px;right:14px;display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:0 11px 0 9px;border-radius:99px;
  background:#C2410C;color:#fff;border:1.5px solid #C2410C;font-family:var(--px-font);font-size:11.5px;font-weight:800;letter-spacing:.02em;line-height:1;white-space:nowrap;
  box-shadow:0 6px 16px -6px rgba(255,107,44,.7);animation:px-pop .45s cubic-bezier(.2,.8,.2,1) backwards}
.px-reco-badge svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.px-reco-badge.soft{background:#fff;color:#9A3412;border-color:#FF6B2C;box-shadow:none}
.pcard.px-reco{outline:3px solid #FF6B2C;outline-offset:4px}

/* ── Animations ───────────────────────────────────────────────────────────────────────────────────── */
@keyframes px-fade{from{opacity:0}}
@keyframes px-fade-out{to{opacity:0}}
@keyframes px-rise{from{opacity:0;transform:translateY(22px) scale(.98)}}
@keyframes px-rise-out{to{opacity:0;transform:translateY(12px) scale(.99)}}
@keyframes px-sheet{from{transform:translateY(100%)}}
@keyframes px-sheet-out{to{transform:translateY(100%)}}
@keyframes px-pop{from{opacity:0;transform:translateY(12px) scale(.97)}}
@keyframes px-in-fwd{from{opacity:0;transform:translateX(26px)}}
@keyframes px-in-back{from{opacity:0;transform:translateX(-26px)}}
@keyframes px-wiggle{0%{transform:rotate(0) scale(1)}30%{transform:rotate(-7deg) scale(1.1)}62%{transform:rotate(5deg) scale(1.1)}100%{transform:rotate(0) scale(1)}}
@keyframes px-draw{from{stroke-dashoffset:24}to{stroke-dashoffset:0}}

@media (prefers-reduced-motion:reduce){
  .px-overlay,.px-overlay *,.px-overlay *::before,.px-overlay *::after,
  .px-slot,.px-slot *,.px-plan-note,.px-plan-note *,.px-reco-badge{animation:none!important;transition:none!important}
  .px-tile:hover,.px-tile:active,.px-go:hover,.px-btn:hover,.px-btn:active,.px-chip:hover,.px-chip:active{transform:none!important}
  .px-chk{transform:none}
}
@media print{.px-overlay,.px-slot,.px-plan-note,.px-reco-badge{display:none!important}}