.topbar-profile[role="button"] {
  cursor: pointer;
}

.topbar-profile[role="button"]:focus-visible {
  outline: 3px solid rgba(31, 111, 235, 0.38);
  outline-offset: 3px;
}

.topbar-profile > img[hidden],
.topbar-profile > .profile-avatar-fallback[hidden],
.profile-avatar-modal [hidden] {
  display: none !important;
}

.profile-avatar-fallback,
.profile-avatar-preview-fallback,
.profile-avatar-preset-swatch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: 50%;
  color: #fff;
  font-weight: 800;
  letter-spacing: 0.02em;
  user-select: none;
}

.profile-avatar-fallback {
  width: 36px;
  height: 36px;
  font-size: 0.75rem;
  border: 1.5px solid rgba(255, 255, 255, 0.72);
}

body .sidebar .topbar-profile > .profile-avatar-fallback:not([hidden]) {
  display: inline-flex;
}

/* Sur un écran de bureau étroit, le nom ne doit pas pousser les actions hors
   de la fenêtre. L'avatar reste visible et le bouton conserve son libellé
   accessible complet. */
@media (min-width: 801px) and (max-width: 1320px) {
  body .topbar .topbar-profile {
    flex: 0 0 auto;
    min-width: 44px;
    padding-right: 4px;
    border-left: 0;
  }

  body .topbar .topbar-profile #topProfileName {
    display: none;
  }
}

.preset-bleu-france { background: linear-gradient(145deg, #2367e8, #123a9b); }
.preset-bleu-nuit { background: linear-gradient(145deg, #243653, #0f1f39); }
.preset-vert-atelier { background: linear-gradient(145deg, #2a9d6f, #126247); }
.preset-prune-service { background: linear-gradient(145deg, #8955bd, #57307f); }
.preset-ardoise { background: linear-gradient(145deg, #607086, #354154); }
.preset-sable { background: linear-gradient(145deg, #b87734, #80501d); }

.profile-avatar-modal {
  position: fixed;
  inset: 0;
  z-index: 1500;
  display: grid;
  place-items: center;
  padding: 24px;
}

.profile-avatar-modal.hidden {
  display: none;
}

.profile-avatar-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(9, 20, 38, 0.64);
  backdrop-filter: blur(4px);
}

.profile-avatar-card {
  position: relative;
  width: min(680px, 100%);
  max-height: min(720px, calc(100dvh - 32px));
  overflow: auto;
  border: 1px solid #dce4ef;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 28px 80px rgba(9, 29, 62, 0.28);
}

.profile-avatar-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 26px 18px;
  border-bottom: 1px solid #e7edf5;
}

.profile-avatar-head h2 {
  margin: 2px 0 0;
  color: #13233f;
  font-size: clamp(1.35rem, 3vw, 1.75rem);
}

.profile-avatar-eyebrow {
  margin: 0;
  color: #3269c8;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.profile-avatar-close {
  width: 42px;
  height: 42px;
  border: 1px solid #d7e0ec;
  border-radius: 50%;
  background: #f7f9fc;
  color: #263a5a;
  font-size: 1.65rem;
  line-height: 1;
}

.profile-avatar-body {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 28px;
  padding: 26px;
}

.profile-avatar-preview {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.profile-avatar-preview img,
.profile-avatar-preview-fallback {
  width: 132px;
  height: 132px;
  border-radius: 50%;
  object-fit: cover;
  border: 5px solid #fff;
  box-shadow: 0 0 0 1px #d4deeb, 0 16px 34px rgba(28, 58, 104, 0.18);
}

.profile-avatar-preview-fallback {
  font-size: 2.15rem;
}

.profile-avatar-options > p:first-child {
  margin: 0 0 16px;
  color: #52627a;
  line-height: 1.55;
}

.profile-avatar-presets {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}

.profile-avatar-preset {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 10px 6px;
  border: 1px solid #dce4ee;
  border-radius: 14px;
  background: #fff;
  color: #33445f;
  font: inherit;
  font-size: 0.75rem;
}

.profile-avatar-preset:hover {
  border-color: #84a9e8;
  background: #f5f8ff;
}

.profile-avatar-preset.selected {
  border-color: #2468d7;
  box-shadow: 0 0 0 2px rgba(36, 104, 215, 0.18);
}

.profile-avatar-preset-swatch {
  width: 44px;
  height: 44px;
  font-size: 0.72rem;
}

.profile-avatar-upload {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 14px 16px;
  border: 1px dashed #7d9dce;
  border-radius: 14px;
  background: #f7faff;
  color: #1d4d9d;
  cursor: pointer;
}

.profile-avatar-upload span {
  color: #64738a;
  font-size: 0.78rem;
}

#profileAvatarFile {
  width: 100%;
  margin-top: 8px;
  color: #3e4f68;
  font: inherit;
  font-size: 0.83rem;
}

.profile-avatar-remove {
  margin-top: 15px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #445e86;
  font: inherit;
  font-size: 0.83rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.profile-avatar-status {
  min-height: 1.35em;
  margin: 14px 0 0;
  color: #53647d;
  font-size: 0.83rem;
}

.profile-avatar-status[data-state="success"] { color: #187147; }
.profile-avatar-status[data-state="error"] { color: #a12e38; }
.profile-avatar-status[data-state="loading"] { color: #255da9; }

.profile-avatar-modal button:focus-visible,
.profile-avatar-modal input:focus-visible,
.profile-avatar-modal label:has(+ input:focus-visible) {
  outline: 3px solid rgba(31, 111, 235, 0.34);
  outline-offset: 2px;
}

@media (max-width: 640px) {
  .profile-avatar-modal {
    align-items: end;
    padding: 0;
  }

  .profile-avatar-card {
    width: 100%;
    max-height: min(86dvh, 760px);
    border-radius: 22px 22px 0 0;
  }

  .profile-avatar-head {
    padding: 20px 20px 14px;
  }

  .profile-avatar-body {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 20px;
  }

  .profile-avatar-preview img,
  .profile-avatar-preview-fallback {
    width: 104px;
    height: 104px;
  }

  .profile-avatar-presets {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .profile-avatar-modal *,
  .profile-avatar-modal *::before,
  .profile-avatar-modal *::after {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}