/* 29/10 (patron) — PORTEFEUILLE (portefeuille.py) : charte Sight — nuit et or, médaillons ovales (œil), cartes en amande, sombre ET clair.
   Couleurs : variables de app.css (--panel, --line, --text, --muted, --up, --dn) + --pf-or (or lisible dans les deux thèmes). */
.pf{--pf-or:#f7c948;--pf-or-t:#f7c948;--pf-hl:rgba(255,255,255,.035);--pf-r:22px}
:root[data-theme=light] .pf{--pf-or:#d19b00;--pf-or-t:#7a5300;--pf-hl:rgba(15,23,42,.035)}
.pf .v3-col,.pf .v3-p,.pf-f,.pf-q,.pf-g,.pf-c,.pf-c>*,.pf-sp>div,.pf-in>span,.pf-tete>div{min-width:0}
.pf-mu{color:var(--muted);font-size:13px;line-height:1.5;margin:.6em 0 0}
.pf-badge{display:inline-block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--pf-or-t);font-weight:700}

/* médaillon ovale (portrait ou initiales « en préparation ») */
.pf-med{--c:#f7c948;display:inline-grid;place-items:center;flex:none;width:56px;height:64px;border-radius:50%;overflow:hidden;
  background:radial-gradient(circle at 50% 35%,color-mix(in srgb,var(--c) 55%,#0b1020),#0b1020 78%);box-shadow:0 0 0 2px var(--c)}
.pf-med img{width:100%;height:100%;object-fit:cover}
.pf-med b{color:#fff;font-size:18px;letter-spacing:.04em}
.pf-med.att{outline:1px dashed color-mix(in srgb,var(--c) 70%,transparent);outline-offset:4px}
.pf-med.xs{width:24px;height:28px;box-shadow:0 0 0 1.5px var(--c)}.pf-med.xs b{font-size:9px}
.pf-med.s{width:40px;height:46px}.pf-med.s b{font-size:13px}
.pf-med.m{width:58px;height:68px}

/* étoiles */
.pf-st{display:inline-flex;gap:1px;font-size:15px;line-height:1;white-space:nowrap}
.pf-st i{font-style:normal;color:color-mix(in srgb,var(--muted) 45%,transparent)}
.pf-st i.on{color:var(--pf-or);text-shadow:0 0 10px color-mix(in srgb,var(--pf-or) 40%,transparent)}
.pf-st.xl{font-size:30px;gap:3px}
.pf-st.nn{font-size:12px;color:var(--muted)}

/* équipe */
.pf-eq{display:grid;gap:14px}
.pf-sp{display:flex;gap:14px;align-items:flex-start;padding:14px;border-radius:var(--pf-r);background:var(--pf-hl);
  border:1px solid color-mix(in srgb,var(--c) 30%,var(--line))}
.pf-sp h3{margin:.2em 0 .1em;font-size:17px;color:var(--text)}
.pf-sp p{margin:.3em 0;font-size:13px;line-height:1.5;color:var(--text)}
.pf-sp .pf-sp-s{color:var(--muted)}
.pf-lien{font-size:13px;font-weight:700;color:var(--pf-or-t);text-decoration:none}
.pf-lien:hover{text-decoration:underline}

/* grille des sélections */
.pf-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:14px;margin-top:14px}
.pf-c{display:flex;flex-direction:column;gap:6px;padding:16px 18px;border-radius:28px 28px 28px 8px;text-decoration:none;color:var(--text);
  background:linear-gradient(160deg,color-mix(in srgb,var(--c) 9%,var(--panel)),var(--panel) 60%);border:1px solid var(--line);
  transition:transform .15s,border-color .15s,box-shadow .15s}
.pf-c:hover,.pf-c:focus-visible{transform:translateY(-2px);border-color:color-mix(in srgb,var(--c) 60%,var(--line));box-shadow:0 16px 40px -26px var(--c)}
.pf-c-h{display:flex;justify-content:space-between;align-items:center;gap:8px}
.pf-c-h b{font-size:18px;letter-spacing:.03em}
.pf-c-n{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pf-c-p{font-size:20px;font-weight:800}
.pf-c-w{font-size:12.5px;line-height:1.45}
.pf-c-t{display:flex;flex-wrap:wrap;gap:6px}
.pf-tag{font-size:11px;padding:3px 9px;border-radius:999px;border:1px solid var(--line);color:var(--muted)}
.pf-tag.or{border-color:color-mix(in srgb,var(--pf-or) 55%,transparent);color:var(--pf-or-t)}
.pf-c-s{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--muted);margin-top:auto;padding-top:6px}

.pf-tag.cap{color:var(--text)}
.pf-c.u{background:linear-gradient(160deg,color-mix(in srgb,var(--c) 5%,var(--panel)),var(--panel) 55%)}
.pf-c-i{font-size:12.5px;line-height:1.45;color:var(--muted)}
.pf-c-s em{margin-left:auto;font-style:normal;color:var(--pf-or-t);font-weight:600}

/* filtres : capitalisation (puces ovales) + recherche ; pagination */
.pf-f{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin-top:14px}
.pf-caps{display:flex;flex-wrap:wrap;gap:6px}
.pf-caps a{font-size:12.5px;font-weight:600;padding:6px 13px;border-radius:999px;border:1px solid var(--line);color:var(--muted);text-decoration:none}
.pf-caps a:hover{color:var(--text);border-color:color-mix(in srgb,var(--pf-or) 45%,var(--line))}
.pf-caps a.on{color:var(--pf-or-t);border-color:var(--pf-or);background:color-mix(in srgb,var(--pf-or) 12%,transparent)}
.pf-q{display:flex;gap:8px;flex:1 1 260px;max-width:380px}
.pf .pf-q .pf-q-l{flex:1;display:flex;flex-direction:row;align-items:center;gap:8px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:var(--pf-hl);color:var(--muted)}
.pf-q-l:focus-within{border-color:var(--pf-or)}
.pf .pf-q-l input{flex:1;min-width:0;width:auto;margin:0;border:0!important;background:none!important;box-shadow:none!important;color:var(--text);font:inherit;font-size:13.5px;padding:9px 0!important;outline:0}
.pf .pf-q-l svg{flex:none}
.pf-q .btn{border-radius:999px}
.pf-n{margin-top:12px}
.pf-pg{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:18px}
.pf-pg a,.pf-pg span{min-width:38px;text-align:center;padding:7px 12px;border-radius:999px;font-size:13px;text-decoration:none;border:1px solid var(--line);color:var(--text)}
.pf-pg span{color:var(--muted);opacity:.5}
.pf-pg a:hover{border-color:var(--pf-or)}
.pf-pg a.on{border-color:var(--pf-or);color:var(--pf-or-t);font-weight:800;background:color-mix(in srgb,var(--pf-or) 12%,transparent)}

/* règle des étoiles */
.pf-regle{margin:0;padding-left:1.2em;display:grid;gap:8px;font-size:13px}
.pf-regle li span{display:block;color:var(--muted);line-height:1.45}

/* fiche */
.pf-ret{margin:0 0 10px}.pf-ret a{display:inline-flex;align-items:center;gap:6px;color:var(--muted);text-decoration:none;font-size:13px}
.pf-tete{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px;padding:22px 26px;margin-bottom:16px;
  border-radius:48px 48px 48px 14px;background:radial-gradient(120% 140% at 0 0,color-mix(in srgb,var(--c) 16%,var(--panel)),var(--panel) 70%);
  border:1px solid color-mix(in srgb,var(--c) 35%,var(--line))}
.pf-tete h1{margin:.15em 0;font-size:clamp(22px,4vw,32px);color:var(--text)}
.pf-tete h1 small{font-size:.55em;color:var(--muted);font-weight:600;letter-spacing:.05em}
.pf-px{margin:0;font-size:24px;font-weight:800;color:var(--text)}
.pf-tete-n{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.pf-tete-n small{color:var(--muted);font-size:12px}
.pf-cr{display:flex;gap:12px;align-items:flex-start;padding:9px 0;border-bottom:1px solid var(--line)}
.pf-cr:last-of-type{border-bottom:0}
.pf-cr>span:last-child{display:flex;flex-direction:column}
.pf-cr small{color:var(--muted);font-size:12.5px;line-height:1.45}
.pf-cr-p{flex:none;display:grid;place-items:center;width:34px;height:40px;border-radius:50%;font-weight:800;border:1.5px solid var(--line);color:var(--muted)}
.pf-cr-p.p2{border-color:var(--up);color:var(--up)}.pf-cr-p.p1{border-color:var(--pf-or);color:var(--pf-or-t)}.pf-cr-p.p0{border-color:var(--dn);color:var(--dn)}
.pf-these{display:flex;gap:14px;align-items:flex-start}
.pf-these p{margin:0 0 6px;line-height:1.6;color:var(--text)}
.pf-these small{color:var(--muted);font-size:12px}
.pf-ls{display:grid;gap:0}
.pf-l{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px dashed var(--line);font-size:13.5px}
.pf-l span{color:var(--muted)}.pf-l b{text-align:right;overflow-wrap:anywhere;color:var(--text)}
.pf-ot{margin:0 0 8px;font-size:16px;color:var(--pf-or-t)}
.pf-risque{margin:12px 0 0;padding:12px 14px;border-radius:18px;font-size:13px;line-height:1.55;color:var(--text);
  background:color-mix(in srgb,var(--dn) 8%,transparent);border:1px solid color-mix(in srgb,var(--dn) 30%,transparent)}
.pf-in{display:grid;grid-template-columns:1fr auto auto;gap:4px 12px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line);font-size:13px}
.pf-in span{display:flex;flex-direction:column;color:var(--text)}.pf-in small{color:var(--muted);font-size:11.5px}
.pf-in em{font-style:normal;font-weight:700;color:var(--muted);min-width:58px;text-align:right}
.pf-in em.up{color:var(--up)}.pf-in em.dn{color:var(--dn)}
.pf-nws{display:grid;gap:4px}
.pf-nw{display:flex;flex-direction:column;gap:2px;padding:9px 12px;border-radius:16px;text-decoration:none;color:var(--text)}
.pf-nw:hover{background:var(--pf-hl)}.pf-nw b{font-weight:600;font-size:13.5px;line-height:1.4}.pf-nw small{color:var(--muted);font-size:12px}
.pf-avert{display:flex;gap:10px;align-items:flex-start;margin:18px 0 6px;padding:14px 18px;border-radius:24px;font-size:12.5px;line-height:1.55;
  color:var(--muted);border:1px solid var(--line);background:var(--pf-hl)}
.pf-avert svg{flex:none;margin-top:2px}

@media (max-width:640px){
  .pf-tete{padding:18px;border-radius:32px 32px 32px 12px}
  .pf-tete-n{align-items:flex-start}
  .pf-sp{flex-direction:column}
  .pf-c{border-radius:24px 24px 24px 8px}
}
@media (prefers-reduced-motion:reduce){.pf-c{transition:none}.pf-c:hover{transform:none}}