/* Page Profil — préfixe .pf- : mon personnage dans la ville NBA. */
.pf { display: flex; flex-direction: column; gap: var(--s-5); }
.pf-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); align-items: start; }
@media (min-width: 900px) { .pf-body { grid-template-columns: 340px minmax(0, 1fr); } .pf-card--preview { position: sticky; top: var(--s-4); } .pf-card--notif, .pf-card--widget { grid-column: 1 / -1; } }
.pf-card { padding: var(--s-5); }
.pf-preview { display: grid; place-items: center; padding: var(--s-3) 0 var(--s-2); border-radius: var(--r-lg); background: radial-gradient(circle at 50% 20%, rgba(var(--gold-rgb), 0.25), transparent 62%), var(--glass-tint-wine); box-shadow: inset 0 0 0 1px var(--glass-border); }
.pf-preview .vc-portrait { width: 170px; height: 316px; filter: drop-shadow(0 14px 22px rgb(var(--shade) / 0.28)); animation: pf-float 5s ease-in-out infinite; }
.pf-preview__who { display: flex; align-items: center; gap: 12px; margin-top: var(--s-4); }
.pf-face { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; background: var(--mono-bg); border: 1px solid var(--mono-line); }
.pf-face .vc-portrait { width: 100%; height: 100%; }
.pf-preview__sub { color: var(--muted); font-size: var(--fs-sm); }
.pf-actions { display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-5); flex-wrap: wrap; }
.pf-state { flex: 1 1 100%; font-size: var(--fs-xs); color: var(--muted); }
.pf-form { display: flex; flex-direction: column; gap: var(--s-5); }
.pf-section__title { font: 500 var(--fs-xs)/1.2 var(--font-varsity); letter-spacing: 0.01em; color: var(--wine); margin-bottom: var(--s-2); }
:root[data-theme='dark'] .pf-section__title { color: var(--gold); }
.pf-section__hint { font-size: var(--fs-xs); color: var(--muted); margin: -4px 0 var(--s-2); }
.pf-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.pf-pill { padding: 8px 14px; border: 0; border-radius: var(--r-pill); background: var(--glass-control); box-shadow: var(--glass-inset); color: var(--text); font: 600 var(--fs-sm)/1 var(--font-body); transition: background var(--t-fast), transform var(--t-fast); }
.pf-pill:hover { background: var(--glass-control-hover); }
.pf-pill:active { transform: scale(0.96); }
.pf-pill[aria-checked='true'] { background: linear-gradient(180deg, var(--gold-fill-from), var(--gold-fill-to)); color: var(--on-gold); }
.pf-swatch { width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.55), 0 2px 6px rgb(var(--shade) / 0.25); transition: transform var(--t-fast), box-shadow var(--t-fast); }
.pf-swatch:hover { transform: scale(1.08); }
.pf-swatch[aria-checked='true'] { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.8), 0 0 0 3px var(--gold); transform: scale(1.08); }
.pf-row { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.pf-row .field { flex: 1 1 120px; }
.pf-letter { font: 600 1.3rem/1 var(--font-varsity); text-align: center; letter-spacing: -0.025em; }
.pf-toggles { display: flex; flex-direction: column; gap: 8px; }
.pf-toggle { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r-md); background: var(--glass-control); box-shadow: var(--glass-inset); cursor: pointer; }
.pf-toggle input { width: 20px; height: 20px; accent-color: var(--wine); }
.pf-toggle small { display: block; color: var(--muted); font-size: var(--fs-xs); }
@keyframes pf-float { 50% { transform: translateY(-5px); } }
@media (prefers-reduced-motion: reduce) { .pf-preview .vc-portrait { animation: none; } }

/* ───── Notifications ───── */
.pf-card--notif, .pf-card--widget { grid-column: 1 / -1; }
.pf-notif__status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--text-2); margin: var(--s-2) 0 0; }
.pf-notif__actions { margin-top: var(--s-3); }
.pf-devices__title { font: 500 var(--fs-xs)/1.2 var(--font-varsity); letter-spacing: 0.01em; color: var(--muted); margin: var(--s-5) 0 var(--s-2); }
.pf-devices { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pf-device { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: var(--r-md); background: var(--glass-control); box-shadow: var(--glass-inset); }
.pf-device__name { font-weight: 600; }
.pf-device__meta, .pf-devices__empty { color: var(--muted); font-size: var(--fs-xs); }

/* ───── Le widget iPhone ───── */
.pf-steps { margin: var(--s-3) 0 0; padding-left: 1.4em; display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-sm); color: var(--text-2); }
.pf-steps li::marker { font-weight: 600; color: var(--gold-bright); }
.pf-widget__actions { margin-top: var(--s-3); }
.pf-widget__code {
  margin: var(--s-3) 0 0; padding: var(--s-3) var(--s-4); border-radius: var(--r-md); border: 1px solid var(--glass-border);
  background: var(--glass-control); box-shadow: var(--glass-inset); font: 500 var(--fs-xs)/1.5 ui-monospace, 'SF Mono', Menlo, monospace;
  color: var(--text-2); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 9.5em; overflow: hidden;
}
.pf-widget__note { margin-top: var(--s-2); }

/* La garde-robe : un choix de pièce, puis sa couleur dessous. */
.pf-stack { display: grid; gap: var(--s-3); }