/* ============================================================
   NÉBULA — Page « Personnalisation » (profil.html)

   Langage visuel emprunté à l'enveloppe de Zenix (aurore animée,
   orbes flous, grille discrète, header « pilule » flottant, cartes
   en verre rounded-3xl), mais habillé aux couleurs de NÉBULA.

   La couleur d'accent n'est jamais figée : NEBULA_PROFILE
   .applyAccentFor() la pousse sur :root sous --profile-accent /
   --profile-accent-hover / --profile-grad / --profile-glow.
   Toute la page en découle.

   Classement : tokens.css (typo, rayons, mouvement, textes)
   → style.css (surfaces, --accent, --muted…) → ce fichier.
   ============================================================ */

/* ── Décor de fond ─────────────────────────────────────────── */
/* Base du cahier des charges (#090714) posée sur cette page seulement :
   tokens.css garde son noir pur pour le reste du site. */
.set-page {
  background:
    radial-gradient(140% 100% at 50% 0%, rgba(139, 92, 246, .10), transparent 60%),
    linear-gradient(180deg, #090714 0%, #0d0918 55%, #090714 100%);
  background-attachment: fixed;
}

.znx-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Aurore : quatre halos lents qui respirent. Le premier suit la couleur
   du profil, les autres sont les roses du cahier des charges — pas de
   bleu ici, la page est violette. */
.znx-aurora {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background:
    radial-gradient(ellipse 80% 50% at 20% 40%, var(--profile-glow, rgba(139, 92, 246, .18)), transparent 50%),
    radial-gradient(ellipse 60% 80% at 80% 50%, rgba(236, 72, 153, .10), transparent 50%),
    radial-gradient(ellipse 50% 60% at 40% 80%, rgba(167, 139, 250, .12), transparent 50%),
    radial-gradient(ellipse 80% 40% at 60% 20%, rgba(236, 72, 153, .07), transparent 50%);
  animation: znxAurora 20s var(--ease) infinite alternate;
}

/* Voile de brillance : évite l'aplat au centre de l'écran. */
.znx-aurora::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse 100% 100% at 50% 30%, rgba(255, 255, 255, .03), transparent 70%);
  animation: znxShimmer 8s var(--ease) infinite;
}

@keyframes znxAurora {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  25%  { transform: translate3d(5%, -5%, 0) rotate(3deg) scale(1.02); }
  50%  { transform: translate3d(-3%, 5%, 0) rotate(-2deg) scale(.98); }
  75%  { transform: translate3d(3%, 3%, 0) rotate(2deg) scale(1.01); }
  100% { transform: translate3d(-5%, -3%, 0) rotate(-3deg) scale(1); }
}

@keyframes znxShimmer {
  0%, 100% { opacity: .3; transform: scale(1); }
  50%      { opacity: .6; transform: scale(1.05); }
}

/* Trois orbes très flous, décalés en phase : profondeur sans bruit. */
.znx-orbs { position: absolute; inset: 0; }

.znx-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  opacity: .5;
  animation: znxOrb 20s var(--ease) infinite;
}

.znx-orb--1 {
  width: 500px; height: 500px;
  top: 6%; left: 58%;
  background: linear-gradient(135deg, var(--profile-glow, rgba(139, 92, 246, .28)), rgba(167, 139, 250, .12));
  animation-duration: 18s;
}
.znx-orb--2 {
  width: 400px; height: 400px;
  top: 48%; left: 14%;
  background: linear-gradient(225deg, rgba(255, 255, 255, .10), rgba(200, 200, 255, .05));
  animation-duration: 22s; animation-delay: -5s;
}
.znx-orb--3 {
  width: 320px; height: 320px;
  top: 68%; left: 68%;
  background: linear-gradient(45deg, rgba(124, 58, 237, .16), rgba(167, 139, 250, .10));
  animation-duration: 20s; animation-delay: -10s;
}

@keyframes znxOrb {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: .5; }
  25%      { transform: translate3d(30px, -40px, 0) scale(1.05); opacity: .65; }
  50%      { transform: translate3d(-20px, 20px, 0) scale(.95); opacity: .4; }
  75%      { transform: translate3d(40px, 30px, 0) scale(1.02); opacity: .58; }
}

/* Grille 60 px très discrète : donne l'échelle sans se voir. */
.znx-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .02) 1px, transparent 1px);
  background-size: 60px 60px;
}

/* ── Header « pilule » flottante ────────────────────────────── */
.znx-head {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 900;
  height: auto;
  padding: 12px 16px;
  /* Le conteneur capte rien : seule la pilule est cliquable, sinon
     la bande transparente masquerait les clics sur la page. */
  pointer-events: none;
  background: transparent;
  backdrop-filter: none;
  border-bottom: 0;
}

.znx-pill {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 14px;
  height: 56px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 18px 0 24px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(0, 0, 0, .4);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 8px 32px rgba(0, 0, 0, .3);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.znx-head.scrolled .znx-pill {
  background: rgba(0, 0, 0, .55);
  border-color: rgba(255, 255, 255, .16);
  box-shadow: 0 8px 32px rgba(0, 0, 0, .45);
}

.znx-logo {
  flex-shrink: 0;
  gap: 10px;
  font-size: var(--fs-18);
  color: #fff;
  text-decoration: none;
}
.znx-logo .logo-img { width: 30px; height: 30px; border-radius: 9px; box-shadow: var(--glow); }
.znx-logo:hover { opacity: .88; }

/* Le site utilise --accent sur toute la page ; on le rétablit. */
.znx-head, .znx-pill { color: var(--text-1, #fff); }

/* Nav : capsule interne, lien actif posé sur un fond laiteux
   plutôt que sur le dégradé — plus proche de Zenix et plus lisible. */
.znx-nav {
  display: none;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255, 255, 255, .06);
  background: rgba(255, 255, 255, .02);
  overflow: hidden;
}

.znx-nav a {
  position: relative;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, .5);
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease);
}
.znx-nav a:hover { color: rgba(255, 255, 255, .85); background: transparent; }
.znx-nav a.active { color: #fff; background: transparent; }
.znx-nav a.active::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .1);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}

.znx-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  margin-left: auto;
}

.znx-search { max-width: 260px; }
.znx-search input {
  width: 100%;
  height: 40px;
  padding: 0 12px 0 38px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .04);
  color: #fff;
  font-size: 14px;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.znx-search input::placeholder { color: rgba(255, 255, 255, .3); }
.znx-search input:focus {
  width: 100%;
  border-color: var(--profile-accent, #8b5cf6);
  background: rgba(255, 255, 255, .07);
}
.znx-search svg { color: rgba(255, 255, 255, .5); }

/* Boutons ronds transparents : aucun fond tant qu'on ne survole pas. */
/* position relative : la pastille est en absolute et doit se caler sur
   l'icône, pas sur le conteneur positionné le plus proche — sans ça elle
   se retrouve en haut à droite de toute la barre. */
.znx-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: var(--r-pill);
  color: rgba(255, 255, 255, .55);
  text-decoration: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.znx-icon:hover { color: #fff; background: rgba(255, 255, 255, .08); transform: none; }
.znx-icon .badge {
  position: absolute;
  top: 2px; right: 2px;
  min-width: 17px; height: 17px;
  padding: 0 4px;
  border-radius: var(--r-pill);
  background: var(--profile-grad, linear-gradient(135deg, #a78bfa, #7c3aed));
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 17px;
  text-align: center;
}

/* ── Page ───────────────────────────────────────────────────── */
.set-page {
  position: relative;
  z-index: 1;
  /* Compense la pilule en fixed, qui ne réserve plus de place. */
  padding-top: 108px;
  animation: setPageIn var(--dur-slow) var(--ease) both;
}

@keyframes setPageIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Titre ──────────────────────────────────────────────────── */
.set-hero { margin-bottom: var(--s-5); }
.set-hero__title {
  margin: 0;
  font-size: var(--fs-page);
  font-weight: 800;
  letter-spacing: -.02em;
  background: linear-gradient(112deg,
      var(--profile-accent, #a78bfa) 0%,
      var(--profile-accent-hover, #8b5cf6) 45%,
      #a78bfa 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--profile-accent, #a78bfa);
}
.set-hero__sub {
  margin: var(--s-2) 0 0;
  max-width: 62ch;
  color: var(--text-3, rgba(255, 255, 255, .58));
  font-size: var(--fs-15);
}

/* ── Coquille : barre latérale + contenu ────────────────────── */
/* Deux colonnes : 220px de barre latérale, le panneau prend le reste.
   minmax(0, 1fr) sur la seconde colonne est indispensable — sans elle,
   un contenu large (le titre, une carte) ferait déborder la grille
   horizontalement au lieu de rétrécir. */
.set-shell {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: var(--s-5);
  align-items: start;
  padding-bottom: var(--s-7);
}

.set-side {
  position: sticky;
  top: 96px;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  min-width: 0;
}

/* ── Verre : la surface de base de la page ──────────────────── */
/* Le verre reste, mais teinté avec les surfaces du cahier des charges
   (#100B1B) plutôt que noir : posé sur un noir, du noir translucide
   donne un aplat sans profondeur et décale la page du violet attendu. */
.set-id,
.set-nav,
.set-actions,
.set-card,
.profile-modal__card {
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, .09);
  background: rgba(16, 11, 27, .72);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);
  box-shadow: 0 8px 32px rgba(0, 0, 0, .35);
}

/* Sans backdrop-filter, le verre devient trop transparent :
   on remonte l'opacité du fond pour garder le contraste. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .set-id, .set-nav, .set-actions, .set-card, .profile-modal__card { background: rgba(16, 11, 27, .96); }
}

/* ── Aperçu vivant ──────────────────────────────────────────── */
/* Carte d'identité : avatar 62px + nom + pastille de couleur. Pas de
   hauteur fixe — les tags dépendent du compte (protégé / sans mot de
   passe) et un nom sur deux lignes doit pouvoir gonfler la carte sans
   couper le texte. */
.set-id {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-4);
  text-align: center;
  overflow: hidden;
  position: relative;
  animation: setCardIn var(--dur-slow) var(--ease) both;
}
/* Liseré coloré qui suit le thème, sur le bord haut de la carte. */
.set-id::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--profile-accent, #8b5cf6), transparent);
  opacity: .8;
}

.set-id__name {
  font-size: var(--fs-24);
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.2;
  word-break: break-word;
  max-width: 100%;
}

.set-id__meta {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--text-3, rgba(255, 255, 255, .58));
  font-size: 13px;
}

.set-id__dot {
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--profile-accent, #8b5cf6);
  box-shadow: 0 0 12px var(--profile-glow, rgba(139, 92, 246, .6));
  transition: background var(--dur) var(--ease);
}

.set-id__tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }

.set-id__tag {
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--profile-grad, linear-gradient(135deg, #a78bfa, #7c3aed));
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.set-id__tag.ghost {
  background: rgba(255, 255, 255, .05);
  color: var(--text-3, rgba(255, 255, 255, .58));
  border: 1px solid rgba(255, 255, 255, .08);
  letter-spacing: 0;
  text-transform: none;
}

/* ── Navigation par section ─────────────────────────────────── */
.set-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  animation: setCardIn var(--dur-slow) var(--ease) 60ms both;
}

.set-nav__item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: rgba(255, 255, 255, .55);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.set-nav__item svg { flex-shrink: 0; width: 18px; height: 18px; opacity: .75; }
.set-nav__item:hover { color: #fff; background: rgba(255, 255, 255, .05); }
.set-nav__item[aria-selected="true"] {
  color: #fff;
  background: rgba(255, 255, 255, .09);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
}
.set-nav__item[aria-selected="true"] svg { opacity: 1; color: var(--profile-accent, #a78bfa); }

/* ── Actions ────────────────────────────────────────────────── */
.set-actions {
  padding: var(--s-3);
  animation: setCardIn var(--dur-slow) var(--ease) 120ms both;
}
.set-actions__btns { display: flex; gap: var(--s-2); }
.set-actions__btns .btn { flex: 1; justify-content: center; text-align: center; padding-inline: var(--s-3); }

/* Rappel « rien n'est encore sur le serveur » */
.profile-dirty {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin: 0 0 var(--s-2);
  padding: 0 4px;
  font-size: 12px;
  font-weight: 600;
  color: #f59e0b;
}
.profile-dirty__dot {
  flex-shrink: 0;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 10px currentColor;
  animation: setPulse 1.8s var(--ease) infinite;
}
@keyframes setPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .45; transform: scale(.82); }
}

/* ── Carte de section ───────────────────────────────────────── */
.set-content { min-width: 0; }

.set-card {
  padding: var(--s-5);
  animation: setCardIn var(--dur-slow) var(--ease) both;
}
.set-card[hidden] { display: none; }

@keyframes setCardIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

.set-card__head { margin-bottom: var(--s-5); }

.set-card__title {
  margin: 0;
  font-size: var(--fs-24);
  font-weight: 700;
  letter-spacing: -.01em;
}

.set-card__sub {
  margin: 4px 0 0;
  color: var(--text-3, rgba(255, 255, 255, .58));
  font-size: 14px;
}

.set-card__body { display: flex; flex-direction: column; gap: var(--s-5); }

/* Encart d'avertissement : sert à rappeler ce qui n'est pas actif. */
.set-callout {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.45;
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .03);
  color: var(--text-2, rgba(255, 255, 255, .74));
}
.set-callout svg { flex-shrink: 0; margin-top: 1px; }
.set-callout--warn {
  border-color: rgba(245, 158, 11, .28);
  background: rgba(245, 158, 11, .08);
  color: #fbbf24;
}

/* ── Avatar ─────────────────────────────────────────────────── */
.profile-avatar-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) 0;
}

.profile-avatar {
  position: relative;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  line-height: 1;
  user-select: none;
  cursor: pointer;
  background:
    radial-gradient(120% 120% at 30% 20%, rgba(255, 255, 255, .18), transparent 55%),
    var(--profile-grad, linear-gradient(135deg, #a78bfa, #7c3aed));
  border: 2px solid color-mix(in srgb, var(--profile-accent, #8b5cf6) 55%, transparent);
  box-shadow:
    0 0 0 4px rgba(255, 255, 255, .03),
    0 0 30px var(--profile-glow, rgba(139, 92, 246, .45)),
    inset 0 0 20px rgba(0, 0, 0, .28);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.profile-avatar:hover {
  transform: translateY(-3px) scale(1.04);
  box-shadow:
    0 0 0 5px rgba(255, 255, 255, .05),
    0 0 44px var(--profile-glow, rgba(139, 92, 246, .6)),
    inset 0 0 20px rgba(0, 0, 0, .28);
}

/* 80px dans le panneau, 62px dans l'aperçu — les valeurs du cahier des
   charges. Le contenu est un <svg> dimensionné en JS : ces deux règles
   ne servent qu'à fixer le cercle. */
.profile-avatar--big { width: 80px; height: 80px; }
.profile-avatar--xl  { width: 62px; height: 62px; }

/* Le SVG remplit le cercle. La marge évite que l'anneau d'une planète
   soit rogné par le débordement caché. */
.profile-avatar .neb-avatar-svg { width: 100%; height: 100%; }
.profile-avatar .neb-avatar-glyph {
  font-size: 2.4rem;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .35));
}

.profile-avatar-zone__hint { text-align: center; margin: 0; max-width: 44ch; }

/* Halo conique en rotation. Sous @supports : sans masque, le cône se
   peint en disque plein et masquerait le glyph. */
@supports ((-webkit-mask: radial-gradient(#000, #000)) or (mask: radial-gradient(#000, #000))) {
  .profile-avatar::after {
    content: "";
    position: absolute;
    inset: -7px;
    z-index: -1;
    border-radius: 50%;
    pointer-events: none;
    opacity: .8;
    background: conic-gradient(from 0deg,
        transparent 0deg,
        var(--profile-accent, #8b5cf6) 80deg,
        transparent 190deg,
        #a78bfa 300deg,
        transparent 360deg);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
    animation: setSpin 7s linear infinite;
  }
}
@keyframes setSpin { to { transform: rotate(1turn); } }

/* ── Champs ─────────────────────────────────────────────────── */
.profile-field { display: flex; flex-direction: column; gap: var(--s-2); }

.profile-label { font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, .55); }

.profile-label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
}
.profile-counter {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, .42);
  transition: color var(--dur-fast) var(--ease);
}
.profile-counter.is-near { color: #f59e0b; }
.profile-counter.is-max { color: #f43f5e; font-weight: 700; }

.profile-hint { margin: 0; font-size: 13px; color: var(--text-3, rgba(255, 255, 255, .58)); }
.profile-hint.error { color: #f43f5e; }
.profile-hint--ok { color: #34d399; }

.set-card input[type="text"],
.set-card input[type="password"],
.set-card select {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .05);
  color: #fff;
  font-family: inherit;
  font-size: var(--fs-15);
  transition:
    border-color var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast) var(--ease),
    background var(--dur-fast) var(--ease);
}
.set-card input::placeholder { color: rgba(255, 255, 255, .3); }

.set-card input[type="text"]:hover,
.set-card input[type="password"]:hover,
.set-card select:hover { border-color: rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .07); }

.set-card input[type="text"]:focus,
.set-card input[type="password"]:focus,
.set-card select:focus {
  outline: none;
  background: rgba(255, 255, 255, .1);
  border-color: color-mix(in srgb, var(--profile-accent, #8b5cf6) 60%, transparent);
  box-shadow: 0 0 0 3px var(--profile-glow, rgba(139, 92, 246, .2));
}
.set-card select option { background: #10101e; color: #fff; }

.set-card input.input-error { border-color: #f43f5e; }
.profile-field .btn { align-self: flex-start; }

/* Champ à bouton intégré (afficher/masquer le PIN) */
.profile-input-wrap { position: relative; display: flex; }
.profile-input-wrap input { padding-right: 46px; }

.profile-reveal {
  position: absolute;
  top: 50%; right: 6px;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: rgba(255, 255, 255, .45);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.profile-reveal:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.profile-reveal__eye { width: 18px; height: 18px; }
.profile-reveal[aria-pressed="true"] {
  color: var(--profile-accent, #8b5cf6);
  background: color-mix(in srgb, var(--profile-accent, #8b5cf6) 16%, transparent);
}

/* ── Sélecteur de couleurs ──────────────────────────────────── */
.profile-colors {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: var(--s-3);
}

.profile-color {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 14px 8px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .02);
  cursor: pointer;
  transition:
    transform var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease),
    background var(--dur-fast) var(--ease);
}
.profile-color:hover { transform: translateY(-2px); border-color: rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .05); }

.profile-color__swatch {
  width: 40px; height: 40px;
  border-radius: 50%;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25);
  transition: transform var(--dur-fast) var(--ease);
}
.profile-color:hover .profile-color__swatch { transform: scale(1.08); }

.profile-color__name {
  font-size: 11px;
  color: var(--text-3, rgba(255, 255, 255, .58));
  transition: color var(--dur-fast) var(--ease);
}

.profile-color.picked,
.profile-color[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--profile-accent, #8b5cf6) 70%, transparent);
  background: color-mix(in srgb, var(--profile-accent, #8b5cf6) 14%, transparent);
  box-shadow: 0 0 22px -8px var(--profile-glow, rgba(139, 92, 246, .6));
}
.profile-color.picked .profile-color__name,
.profile-color[aria-pressed="true"] .profile-color__name { color: #fff; font-weight: 600; }
.profile-color.picked .profile-color__swatch,
.profile-color[aria-pressed="true"] .profile-color__swatch { transform: scale(1.06); }

.profile-color__check {
  position: absolute;
  top: -6px; right: -6px;
  display: grid;
  place-items: center;
  width: 21px; height: 21px;
  border-radius: 50%;
  color: #fff;
  background: var(--profile-grad, linear-gradient(135deg, #a78bfa, #7c3aed));
  box-shadow: 0 0 12px var(--profile-glow, rgba(139, 92, 246, .55));
  opacity: 0;
  transform: scale(.4);
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.profile-color.picked .profile-color__check { opacity: 1; transform: scale(1); }

/* ── Interrupteurs ──────────────────────────────────────────── */
.profile-toggles { display: flex; flex-direction: column; gap: 2px; }

.profile-switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: 12px 10px;
  border-radius: 12px;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}
.profile-switch:hover { background: rgba(255, 255, 255, .035); }

.profile-switch__name { font-weight: 600; font-size: var(--fs-15); }
.profile-switch__desc {
  margin-top: 2px;
  color: var(--text-3, rgba(255, 255, 255, .58));
  font-size: 13px;
  line-height: 1.35;
}

/* Mention honnête : la valeur est enregistrée mais pas consommée. */
.profile-switch__soon {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(245, 158, 11, .3);
  background: rgba(245, 158, 11, .1);
  color: #f59e0b;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
}

.profile-switch input { position: absolute; opacity: 0; pointer-events: none; }

.profile-switch__track {
  position: relative;
  flex-shrink: 0;
  width: 48px; height: 27px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .1);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.profile-switch__track::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 21px; height: 21px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .6);
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.profile-switch input:checked + .profile-switch__track {
  background: var(--profile-grad, linear-gradient(135deg, #a78bfa, #7c3aed));
  border-color: transparent;
  box-shadow: 0 0 18px -4px var(--profile-glow, rgba(139, 92, 246, .7));
}
.profile-switch input:checked + .profile-switch__track::after { transform: translateX(21px); background: #fff; }
.profile-switch input:focus-visible + .profile-switch__track {
  outline: 2px solid var(--profile-accent, #8b5cf6);
  outline-offset: 3px;
}

/* ── Lignes d'information (section Compte) ──────────────────── */
.set-rows {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
}
.set-rows__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: 12px 10px;
  border-radius: 12px;
  transition: background var(--dur-fast) var(--ease);
}
.set-rows__row:hover { background: rgba(255, 255, 255, .035); }
.set-rows dt { font-size: 14px; color: var(--text-3, rgba(255, 255, 255, .58)); }
.set-rows dd {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  text-align: right;
  word-break: break-word;
}

.set-links { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.set-links .btn { text-decoration: none; }

/* ── Encart abonnement (section Compte) ──────────────────────── */
/* Disparaît une fois le compte Premium : il ne reste rien à vendre. */
.set-premium {
  display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap;
  margin: var(--s-4) 0 var(--s-5); padding: var(--s-4) var(--s-5);
  border-radius: var(--r-lg, 16px);
  border: 1px solid rgba(251, 191, 36, .35);
  background: linear-gradient(120deg, rgba(251, 191, 36, .10), rgba(236, 72, 153, .06));
}
.set-premium__txt { flex: 1 1 220px; min-width: 0; }
.set-premium__txt b { display: block; color: #fbbf24; font-size: var(--fs-15); }
.set-premium__txt span { font-size: var(--fs-13); color: var(--muted); }
.set-premium .btn { flex: 0 0 auto; text-decoration: none; }

/* ── Boutons ────────────────────────────────────────────────── */
/* Un bouton désactivé doit avoir l'air désactivé, pas cassé. */
.btn:disabled, .btn[disabled] {
  opacity: .42;
  cursor: not-allowed;
  filter: none;
  transform: none;
  box-shadow: none;
}

/* Action principale : dégradé violet -> rose sur le thème par défaut.
   --profile-btn-grad est posé par NEBULA_PROFILE.applyAccentFor() et
   retombe sur le dégradé du thème choisi : si le compte choisit une
   autre couleur dans l'onglet Apparence, le bouton suit ce choix au
   lieu de rester violet. */
.set-page .btn-primary {
  background: var(--profile-btn-grad, var(--gradient));
  box-shadow: 0 10px 30px -14px var(--profile-glow, rgba(0, 0, 0, .45));
}

.btn-glow {
  box-shadow:
    0 10px 30px -12px var(--profile-glow, rgba(139, 92, 246, .5)),
    0 0 24px -6px var(--profile-glow, rgba(139, 92, 246, .45));
  transition: filter var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.btn-glow:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); }

/* ── Modale de choix d'avatar ───────────────────────────────── */
.profile-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-4);
  background: rgba(0, 0, 0, .6);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease);
}
.profile-modal.open { opacity: 1; pointer-events: auto; }

.profile-modal__card {
  width: min(680px, 100%);
  max-height: 86vh;
  overflow-y: auto;
  padding: var(--s-5);
  transform: translateY(18px) scale(.97);
  transition: transform var(--dur) var(--ease);
}
.profile-modal.open .profile-modal__card { transform: none; }

.profile-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-5);
}
.profile-modal__head h3 { margin: 0; font-size: var(--fs-18); font-weight: 700; }

.profile-modal__close {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .1);
  background: transparent;
  color: rgba(255, 255, 255, .58);
  font-size: var(--fs-15);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.profile-modal__close:hover { color: #fff; background: rgba(255, 255, 255, .08); }

/* Bloc « photo de profil » en tête de la modale : importer / retirer.
   Sert aussi de tuile « avatar courant » quand l'avatar est une photo. */
.profile-avatars__up {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-bottom: var(--s-3);
}
.profile-avatars__up-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border: 1.5px solid rgba(255, 255, 255, .14);
  border-radius: 12px;
  background: rgba(255, 255, 255, .05);
  color: var(--text, #f5f5f7);
  font-size: var(--fs-13, 13px);
  font-weight: 600;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.profile-avatars__up-btn:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, .5);
  background: rgba(255, 255, 255, .09);
}
.profile-avatars__up-btn.picked {
  border-color: var(--profile-accent, #8b5cf6);
  background: color-mix(in srgb, var(--profile-accent, #8b5cf6) 18%, transparent);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .04), 0 0 22px var(--profile-glow, rgba(139, 92, 246, .45));
}
.profile-avatars__up-btn--ghost {
  border-color: transparent;
  background: transparent;
  color: var(--muted, #86868b);
}
.profile-avatars__up-btn--ghost:hover {
  border-color: rgba(255, 90, 120, .5);
  background: rgba(255, 90, 120, .08);
  color: #ff8fa3;
}

/* Grille de la modale : une tuile par avatar, image au-dessus du nom.
   Le nom est indispensable — 22 dessins sans étiquette obligeraient à
   les deviner au survol, et le survol n'existe pas au tactile. */
.profile-avatars {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: var(--s-3);
}

.profile-avatars__item {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 6px 8px;
  border: 2px solid transparent;
  border-radius: 14px;
  background:
    radial-gradient(120% 120% at 30% 20%, rgba(255, 255, 255, .16), transparent 55%),
    var(--grad, linear-gradient(135deg, #a78bfa, #7c3aed));
  color: #fff;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.profile-avatars__item:hover { transform: translateY(-3px) scale(1.03); border-color: rgba(255, 255, 255, .85); }
.profile-avatars__item.picked,
.profile-avatars__item[aria-pressed="true"] {
  border-color: var(--profile-accent, #8b5cf6);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .04), 0 0 24px var(--profile-glow, rgba(139, 92, 246, .55));
}

/* L'image garde ses proportions quel que soit le texte : c'est le <svg>
   qui est dimensionné, la tuile s'adapte. */
.profile-avatars__art {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  pointer-events: none;
}
.neb-avatar-svg { display: block; width: 100%; height: 100%; }
/* Repli émoji des comptes anciens : pas de <svg>, donc pas de sizing. */
.neb-avatar-glyph {
  font-size: 2.1rem;
  line-height: 1;
}
/* Photo de profil importée : l'<img> remplit le cercle, comme le <svg>,
   et recadre au centre sans déformer. */
/* Photo de profil importée : l'<img> est un item de grille (place-items:
   center), et un <img> a un ratio naturel : Chrome y ignorait height:100%
   et peignait la boîte au ratio de la photo (ovale). aspect-ratio:1/1
   force un carré : la photo remplit le cercle, recadrée au centre. */
.neb-avatar-photo {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center;
  border-radius: 50%;
}

.profile-avatars__label {
  font-size: 11px;
  line-height: 1.25;
  text-align: center;
  color: rgba(255, 255, 255, .82);
  pointer-events: none;
}

.profile-avatars__check {
  position: absolute;
  top: -6px; right: -6px;
  display: grid;
  place-items: center;
  width: 23px; height: 23px;
  border-radius: 50%;
  background: var(--profile-grad, linear-gradient(135deg, #a78bfa, #7c3aed));
  color: #fff;
  opacity: 0;
  transform: scale(.4);
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.profile-avatars__item.picked .profile-avatars__check,
.profile-avatars__item[aria-pressed="true"] .profile-avatars__check { opacity: 1; transform: scale(1); }

.profile-modal__foot {
  display: flex;
  justify-content: flex-end;
  gap: var(--s-3);
  margin-top: var(--s-5);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .profile-modal { background: rgba(5, 5, 10, .94); }
}

/* ── Mouvement réduit ───────────────────────────────────────── */
/* tokens.css neutralise déjà durées et itérations ; on fige en plus
   les animations infinies du décor, qui n'ont pas d'état final. */
@media (prefers-reduced-motion: reduce) {
  .znx-aurora, .znx-aurora::after, .znx-orb { animation: none; }
  .profile-avatar::after { animation: none; }
  .profile-dirty__dot { animation: none; }
  .set-page, .set-id, .set-nav, .set-actions, .set-card { animation: none; }
  .profile-color:hover,
  .profile-avatars__item:hover,
  .profile-avatar:hover,
  .btn-glow:hover:not(:disabled) { transform: none; }
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (min-width: 1024px) {
  .znx-nav { display: flex; }
}

@media (max-width: 920px) {
  .set-shell { grid-template-columns: 1fr; }
  .set-side { position: static; }
  /* La navigation devient une barre de pilules défilable : on garde
     l'accès aux 5 sections sans voler toute la hauteur de l'écran. */
  .set-nav {
    flex-direction: row;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .set-nav::-webkit-scrollbar { display: none; }
  .set-nav__item { width: auto; flex-shrink: 0; padding: 9px 14px; }
  .set-nav__item span { white-space: nowrap; }
  /* Aperçu resserré :avatar + nom sur une ligne. */
  .set-id { flex-direction: row; text-align: left; padding: var(--s-4); gap: var(--s-4); flex-wrap: wrap; }
  .set-id__name { font-size: var(--fs-18); }
  .set-id__tags { justify-content: flex-start; }
}

@media (max-width: 640px) {
  .znx-head { padding: 10px 12px; }
  .znx-pill { height: 48px; padding: 0 12px 0 14px; gap: 8px; }
  .znx-logo span:not(.dot) { display: none; }
  .znx-search { display: none; }
  .set-page { padding-top: 84px; }
  .set-card { padding: var(--s-4); border-radius: 20px; }
  .set-card__title { font-size: var(--fs-18); }
  .profile-colors { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); }
  .profile-avatars { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: var(--s-2); }
  /* L'image garde 46px, seule la tuile rétrécit : c'est la taille du
     dessin qu'il faut préserver, pas celle du texte. */
  .profile-avatars__label { font-size: 10px; }
  /* La cloche reste visible : la recherche est déjà masquée à cette
     largeur, donc la pastille tient sans écraser le compte. */
  .znx-bell .badge { top: 3px; right: 1px; min-width: 15px; height: 15px; font-size: 9px; }
  .set-actions__btns { flex-direction: column-reverse; }
  .profile-modal__foot { flex-direction: column-reverse; }
  .profile-modal__foot .btn { width: 100%; justify-content: center; }
  .set-links { flex-direction: column; }
  .set-links .btn { width: 100%; justify-content: center; }
  .set-rows__row { flex-direction: column; align-items: flex-start; gap: 2px; }
  .set-rows dd { text-align: left; }
}