/* ── Profile ── */
#profile-page {
  width: auto;
  margin: 0 auto;
  padding: var(--nav-clearance) var(--page-gutter) 4rem;
  display: grid;
  grid-template-columns: var(--side-rail-width) minmax(0, var(--content-rail-width)) var(--side-rail-width);
  gap: var(--layout-rail-gap);
  align-items: start;
  justify-content: center;
  position: relative;
  --profile-gap: var(--ui-frame-gap);
  --profile-pad: var(--ui-frame-pad);
  --profile-control: var(--ui-control-height);
}
.profile-panel,
.profile-list,
.profile-display-panel,
.profile-identity-panel {
  border: 1px solid var(--ui-frame);
  background: rgba(var(--surface-rgb), 0.9);
  padding: var(--profile-pad);
  box-shadow: 0 16px 44px rgba(var(--shadow-rgb), 0.055);
}
.profile-panel {
  display: grid;
  gap: var(--profile-gap);
}
.profile-overview > .profile-panel {
  border-color: var(--user-color, var(--ui-frame));
}
.detail-tech-header .detail-edit-button.profile-save-button {
  aspect-ratio: 1;
  flex: 0 0 var(--ui-band-height);
  height: var(--ui-band-height);
  min-height: var(--ui-band-height);
  min-width: var(--ui-band-height);
  padding: 0;
  width: var(--ui-band-height);
}
.detail-edit-button.profile-save-button,
.detail-edit-button.profile-save-button:hover,
.detail-edit-button.profile-save-button:focus-visible {
  background: var(--ui-grad);
  border-color: var(--ui-frame);
  color: var(--fg);
}
.detail-edit-button.profile-save-button.is-dirty,
.detail-edit-button.profile-save-button.is-dirty:hover,
.detail-edit-button.profile-save-button.is-dirty:focus-visible {
  background: var(--danger-soft);
  border-color: var(--danger);
  color: var(--danger);
}
.profile-form {
  gap: var(--profile-gap);
}
/* Sous-blocs directs du panneau : cadre secondaire, comme les champs de la
   page de contribution. Les champs de saisie eux-memes restent gris. */
.profile-form-field {
  border: 1px solid var(--ui-sub-frame);
  background:
    linear-gradient(90deg, var(--ui-sub-frame-soft) 0%, rgba(var(--surface-rgb), 0.74) 62%, rgba(var(--surface-rgb), 0.9) 100%);
  padding: var(--profile-pad);
  display: grid;
  gap: var(--profile-gap);
}
.profile-form-field > span,
.profile-name-grid label span {
  color: var(--fg-muted);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
  margin: 0;
}
.profile-name-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--profile-gap);
}
.profile-name-grid label {
  display: grid;
  gap: var(--profile-gap);
}
.profile-password-field {
  width: 100%;
}
.profile-form input:not([type="radio"]):not([type="checkbox"]) {
  border-color: var(--border-soft);
  background: rgba(var(--surface-rgb), 0.96);
  min-height: var(--profile-control);
  padding: var(--ui-control-pad-y) var(--ui-control-pad-x);
}
.profile-contact-field {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
}
.profile-contact-field .profile-email-field {
  display: grid;
  gap: var(--profile-gap);
  min-width: 0;
}
.profile-access-field {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
}
.profile-access-field > label {
  display: grid;
  gap: var(--profile-gap);
  min-width: 0;
}
.profile-newsletter-toggle {
  align-items: center;
  align-self: end;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--success, #6dd5a4) 13%, var(--surface) 87%) 0%, rgba(var(--surface-rgb), 0.86) 100%);
  border: 1px solid color-mix(in srgb, var(--success, #6dd5a4) 38%, var(--border-soft) 62%);
  cursor: pointer;
  display: grid !important;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: var(--profile-control);
  padding: var(--ui-control-pad-y) var(--ui-control-pad-x);
  width: 100%;
}
/* Hors du formulaire de profil, ce bouton n'est plus une bascule mais une
   action : il quitte le vert du switch pour l'arrière-plan neutre. Espace et
   participation portent exactement le même, à la lettre près. */
.profile-overview .profile-newsletter-toggle,
.billing-space-settings .profile-newsletter-toggle,
.billing-participation-settings .profile-newsletter-toggle {
  background: var(--neutral-grad);
  border-color: var(--border-soft);
}
.profile-form button.profile-newsletter-toggle {
  height: var(--profile-control);
  justify-items: stretch;
  padding: var(--ui-control-pad-y) var(--ui-control-pad-x);
  text-align: left;
  width: 100%;
}
.profile-newsletter-toggle > span:first-child {
  color: var(--fg);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.1;
  text-transform: uppercase;
  white-space: normal;
}
.profile-newsletter-toggle input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.profile-newsletter-switch {
  align-items: center;
  background: var(--surface-overlay);
  border: 1px solid var(--border);
  color: var(--fg-muted);
  display: inline-flex;
  font-size: 0.62rem !important;
  height: 15px;
  justify-content: center;
  letter-spacing: 0.08em !important;
  min-width: 38px;
  padding: 0 4px;
}
.profile-newsletter-toggle input[type="checkbox"]:checked + .profile-newsletter-switch {
  background: color-mix(in srgb, var(--success, #6dd5a4) 24%, var(--surface) 76%);
  border-color: var(--success, #6dd5a4);
  color: var(--fg);
}
.profile-newsletter-toggle:hover {
  border-color: var(--success, #6dd5a4);
}
.profile-newsletter-toggle input[type="checkbox"]:focus-visible + .profile-newsletter-switch {
  outline: 2px solid var(--ui-frame-strong);
  outline-offset: 2px;
}
.profile-submit-row,
.profile-floating-submit {
  justify-content: end;
  margin-top: 0;
  white-space: nowrap;
}
.profile-submit-row button[type="submit"],
.profile-floating-submit button[type="submit"] {
  border-color: var(--ui-frame);
  background: var(--ui-bg);
  height: var(--ui-button-height);
  min-width: var(--ui-action-width);
  width: var(--ui-action-width);
}
.profile-submit-row button[type="submit"]:hover,
.profile-floating-submit button[type="submit"]:hover {
  border-color: var(--ui-frame-strong);
  background: var(--ui-grad);
}
.profile-list {
  display: grid;
  gap: var(--profile-gap);
}
.profile-list > span {
  margin-bottom: 0;
}
.profile-list > span,
.profile-display-panel > span {
  display: block;
  border: 1px solid var(--ui-frame);
  background:
    linear-gradient(90deg, var(--ui-frame-soft) 0%, rgba(var(--surface-rgb), 0.74) 100%);
  color: var(--fg);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  line-height: 1.15;
  padding: var(--ui-band-pad);
  text-transform: uppercase;
}
.profile-logout {
  width: 100%;
  height: var(--ui-button-height);
  white-space: nowrap;
  border: 1px solid var(--danger);
  background: rgba(var(--surface-rgb), 0.62);
  color: var(--danger);
  display: grid;
  place-items: center;
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0 9px;
  line-height: var(--ui-control-line-height);
}
.profile-logout:hover {
  background: var(--danger-soft);
  border-color: var(--danger);
  color: var(--danger);
}
.profile-left-panels,
.profile-right-panels,
.profile-context-panel {
  grid-row: 1;
  position: sticky;
  top: var(--sticky-clearance);
  width: 100%;
  display: grid;
  gap: var(--ui-panel-gap);
}
.profile-left-panels,
.profile-context-panel {
  grid-column: 1;
}
.profile-right-panels {
  grid-column: 3;
}
.profile-overview,
.profile-collections {
  grid-column: 2;
}
.profile-overview {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ui-panel-gap);
}
.profile-overview-identity {
  display: grid;
  gap: var(--profile-gap);
  min-width: 0;
}
.profile-display-panel {
  position: static;
  width: 100%;
  border-color: var(--ui-frame);
  display: grid;
  gap: var(--profile-gap);
}
.profile-display-panel > span {
  margin-bottom: 0;
}
.profile-side-color-field {
  border: 1px solid var(--ui-sub-frame);
  background: rgba(var(--surface-rgb), 0.72);
  display: grid;
  gap: var(--profile-gap);
  margin: 0;
  min-width: 0;
  padding: var(--profile-pad);
}
.profile-display-panel .color-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: minmax(17px, 1fr);
  gap: 3px;
  min-height: 17px;
  width: 100%;
}
.profile-display-panel .color-grid label {
  min-width: 0;
  height: 100%;
}
.profile-display-panel .color-grid span {
  width: 100%;
  height: 100%;
  min-height: 17px;
  border-color: var(--border-soft);
}
.profile-display-panel .color-grid input:checked + span {
  box-shadow: 0 0 0 1px rgba(var(--fg-rgb), 0.16);
}
.profile-display-panel .profile-palette-choice {
  border: 0;
  background: transparent;
  min-width: 0;
  padding: 0;
}
.profile-display-panel .palette-mode-toggle {
  background: rgba(var(--surface-rgb), 0.72);
  border: 1px solid var(--ui-sub-frame);
  min-height: var(--profile-control);
  padding: 0 var(--ui-control-pad-x);
}
.profile-display-panel .palette-mode-toggle:hover {
  background: var(--ui-sub-grad);
  border-color: var(--ui-sub-frame-strong);
}
.profile-identity-panel {
  display: grid;
  gap: var(--profile-gap);
  --about-accent: var(--profile-primary);
  --about-accent-soft: var(--profile-primary-soft);
  --about-accent-sub: var(--ui-sub-frame);
  --about-accent-sub-soft: var(--ui-sub-frame-soft);
}
.profile-identity-preview {
  border: 1px solid var(--ui-frame);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--user-color, var(--profile-secondary)) 34%, var(--surface)) 0%, rgba(var(--surface-rgb), 0.72) 100%);
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  color: color-mix(in srgb, var(--user-color, var(--profile-secondary)) 68%, var(--fg));
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 1;
  overflow: hidden;
  position: relative;
}
.profile-identity-preview > .work-lsystem-canvas {
  inset: 0;
  position: absolute;
}
/* Le nom reprend le bandeau canonique du site : seule exception assumée, il est
   en gras pour rester la première chose lue du rail. */
.profile-identity-panel h1.about-panel-title {
  font-weight: 700;
  margin: 0;
  overflow-wrap: anywhere;
}
.profile-identity-panel p {
  border: 1px solid color-mix(in srgb, var(--user-color, var(--profile-secondary)) 48%, var(--border-soft));
  background: rgba(var(--surface-rgb), 0.72);
  color: var(--fg-soft);
  font-size: 0.68rem;
  line-height: 1.16;
  margin: 0;
  padding: var(--ui-text-pad);
}
.profile-required-actions {
  background: color-mix(in srgb, var(--danger-soft) 48%, rgba(var(--surface-rgb), 0.86));
  border: 1px solid var(--danger);
  display: grid;
  gap: var(--profile-gap, var(--ui-frame-gap));
  padding: var(--profile-pad, var(--ui-frame-pad));
}
.profile-required-actions-title,
.profile-required-actions > p,
.profile-required-actions > form > button,
.profile-required-actions > a {
  border: 1px solid var(--danger);
}
.profile-required-actions-title {
  background: var(--danger-soft);
  color: var(--danger);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  line-height: 1.15;
  padding: var(--ui-band-pad);
  text-transform: uppercase;
}
.profile-required-actions > p {
  background: rgba(var(--surface-rgb), 0.72);
  color: var(--fg);
  font-size: 0.68rem;
  line-height: 1.2;
  margin: 0;
  padding: var(--ui-text-pad);
}
.profile-required-actions > form {
  display: contents;
}
.profile-required-actions > form > button,
.profile-required-actions > a {
  align-items: center;
  background: rgba(var(--surface-rgb), 0.72);
  color: var(--danger);
  cursor: pointer;
  display: flex;
  font-family: inherit;
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  height: var(--ui-list-row-height);
  line-height: var(--ui-list-row-line-height);
  padding: var(--ui-list-row-pad);
  text-align: left;
  text-transform: uppercase;
  width: 100%;
}
.profile-required-actions > form > button:hover,
.profile-required-actions > a:hover {
  background: var(--danger-soft);
}
.profile-identity-stats {
  border: 1px solid var(--ui-sub-frame);
  background: rgba(var(--surface-rgb), 0.72);
  display: grid;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: var(--ui-band-pad);
}
.profile-identity-stats li {
  align-items: baseline;
  display: flex;
  gap: 5px;
  justify-content: space-between;
  min-width: 0;
  padding: 1px 0;
}
.profile-identity-stats span {
  color: var(--fg-muted);
  font-size: 0.54rem;
  letter-spacing: 0.04em;
  line-height: 1.15;
  text-transform: uppercase;
}
.profile-identity-stats strong {
  color: var(--fg);
  flex: 0 0 auto;
  font-size: 0.68rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.profile-form-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(160px, 240px);
  gap: var(--profile-gap);
  align-items: start;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--user-color, var(--ui-frame)) 16%, var(--surface)) 0%, rgba(var(--surface-rgb), 0.86) 100%);
}
.profile-form-tools .profile-side-color-field {
  align-self: start;
}
/* Intitule d'un sous-bloc, pas d'un bloc : il descend d'un niveau. */
.profile-tool-label {
  border: 1px solid var(--ui-sub-frame);
  background:
    linear-gradient(90deg, var(--ui-sub-frame-soft) 0%, rgba(var(--surface-rgb), 0.74) 100%);
  color: var(--fg);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  line-height: 1.15;
  padding: var(--ui-band-pad);
  text-transform: uppercase;
}
.profile-form-tools .color-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 3px;
}
.profile-form-tools .color-grid span {
  border-color: color-mix(in srgb, var(--choice-color) 52%, var(--border) 48%);
  height: 20px;
  width: 100%;
}
.profile-form-tools .color-grid input:checked + span {
  border-color: var(--fg);
  box-shadow:
    inset 0 0 0 1px rgba(var(--surface-rgb), 0.84),
    0 0 0 1px color-mix(in srgb, var(--choice-color) 62%, var(--fg) 38%);
}
.profile-form-tools .profile-collection-titles {
  min-width: 0;
  position: relative;
}
/* Carte « Profil » : bloc couleur + tiroir titres, sans cadre externe sur le tiroir. */
.profile-perso-panel {
  display: grid;
  gap: var(--profile-gap);
}
.profile-perso-block {
  display: grid;
  gap: var(--profile-gap);
  margin: 0;
  padding: 0;
  border: 0;
}
.profile-perso-panel .profile-collection-titles,
.profile-form-tools .profile-collection-titles {
  /* le tiroir vit directement dans la carte : pas de second cadre. */
  border: 0;
  background: none;
  box-shadow: none;
  padding: 0;
  gap: var(--profile-gap);
  --profile-collection-accent: color-mix(in srgb, var(--user-color, var(--profile-secondary)) 55%, var(--border-soft));
  --profile-collection-soft: color-mix(in srgb, var(--user-color, var(--profile-secondary)) 34%, transparent);
  --profile-collection-grad: linear-gradient(90deg, color-mix(in srgb, var(--user-color, var(--profile-secondary)) 40%, var(--surface)) 0%, rgba(var(--surface-rgb), 0.74) 100%);
}
.profile-perso-panel .profile-collection-titles:not([open]),
.profile-form-tools .profile-collection-titles:not([open]) {
  gap: 0;
  padding: 0;
}
.profile-form-tools .profile-collection-titles > summary {
  grid-template-columns: 14px minmax(0, 56px) minmax(0, 1fr);
  min-height: var(--profile-control);
}
.profile-form-tools .profile-collection-titles > summary > small {
  border: 0;
  background: transparent;
  color: var(--fg-soft);
  min-width: 0;
  overflow: hidden;
  padding: 0;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile-form-tools .profile-collection-titles .profile-collection-list {
  background: rgba(var(--surface-rgb), 0.96);
  border: 1px solid var(--profile-collection-accent);
  box-shadow: 0 18px 42px rgba(var(--shadow-rgb), 0.18);
  display: grid;
  gap: var(--profile-gap);
  max-height: min(70vh, 560px);
  overflow-y: auto;
  padding: var(--profile-pad);
  position: absolute;
  right: 0;
  top: calc(100% + var(--profile-gap));
  width: min(100%, 240px);
  z-index: 8;
}
.profile-form-tools .profile-collection-titles:not([open]) .profile-collection-list {
  display: none;
}
.profile-perso-panel .profile-title-item,
.profile-form-tools .profile-title-item {
  position: relative;
  cursor: pointer;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--rarity-color) 36%, var(--surface)) 0%, rgba(var(--surface-rgb), 0.72) 100%);
  font-size: var(--ui-list-row-font-size);
  height: var(--ui-list-row-height);
  line-height: var(--ui-list-row-line-height);
  padding: var(--ui-list-row-pad);
}
.profile-title-item > input {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}
.profile-perso-panel .profile-title-item.is-unlocked:hover,
.profile-form-tools .profile-title-item.is-unlocked:hover {
  border-color: var(--rarity-color);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--rarity-color) 46%, var(--surface)) 0%, rgba(var(--surface-rgb), 0.72) 100%);
}
.profile-perso-panel .profile-title-item.is-current,
.profile-form-tools .profile-title-item.is-current {
  border-color: var(--rarity-color);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--rarity-color) 52%, var(--surface)) 0%, rgba(var(--surface-rgb), 0.72) 100%);
  font-weight: 600;
}
.profile-perso-panel .profile-title-item.is-locked,
.profile-form-tools .profile-title-item.is-locked {
  cursor: default;
  color: var(--fg-muted);
  opacity: 0.72;
}
.profile-overview {
  gap: var(--ui-panel-gap);
}
.profile-overview .profile-side-color-field {
  background: transparent;
  border: 0;
  grid-template-columns: minmax(0, 1fr);
  padding: 0;
}
.profile-overview .profile-tool-label {
  align-self: center;
  background: transparent;
  border: 0;
  color: var(--fg-muted);
  font-size: 0.6rem;
  padding: 0;
}
.profile-overview .color-grid {
  display: grid;
  gap: 3px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.profile-overview .color-grid span {
  border-color: color-mix(in srgb, var(--choice-color) 52%, var(--border));
  height: var(--profile-control);
  width: 100%;
}
.profile-overview .color-grid input:checked + span {
  border-color: var(--fg);
  box-shadow: inset 0 0 0 1px rgba(var(--surface-rgb), 0.9);
}
.profile-identity-panel > .profile-identity-titles {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  position: relative;
  /* Tiroir des titres : sous-bloc du rail d'identité, donc un cran plus bas
     que le bandeau du nom. */
  --profile-collection-accent: var(--about-accent-sub);
  --profile-collection-soft: var(--about-accent-sub-soft);
}
.profile-identity-panel > .profile-identity-titles:not([open]) {
  padding: 0;
}
/* Le titre porté reprend le bandeau canonique, sans dégradé ni couleur de
   rareté : les raretés se lisent dans la liste dépliée, pas dans le rail. */
.profile-identity-panel > .profile-identity-titles > summary {
  align-items: center;
  background: rgba(var(--surface-rgb), 0.74);
  border: 1px solid var(--about-accent-sub);
  color: var(--fg);
  grid-template-columns: minmax(0, 1fr) 10px;
  gap: var(--profile-gap);
  min-height: var(--ui-band-height);
  padding: var(--ui-band-pad);
}
.profile-identity-panel > .profile-identity-titles > summary::before {
  grid-column: 2;
  grid-row: 1;
  justify-content: end;
  justify-self: end;
}
.profile-identity-panel > .profile-identity-titles > summary > span {
  grid-column: 1;
  grid-row: 1;
}
.profile-identity-panel > .profile-identity-titles .profile-collection-list {
  background: transparent;
  border: 0;
  box-shadow: none;
  display: grid;
  gap: 1px;
  grid-template-columns: minmax(0, 1fr);
  margin-top: var(--profile-gap);
  padding: 0;
  position: static;
  width: 100%;
}
.profile-identity-panel > .profile-identity-titles:not([open]) .profile-collection-list {
  display: none;
}
.profile-identity-panel > .profile-identity-titles .profile-title-item {
  cursor: pointer;
  font-size: var(--ui-list-row-font-size);
  height: var(--ui-list-row-height);
  line-height: var(--ui-list-row-line-height);
  padding: var(--ui-list-row-pad);
  position: relative;
}
.profile-identity-panel > .profile-identity-titles .profile-title-item.is-unlocked {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--rarity-color) 32%, var(--surface)) 0%, color-mix(in srgb, var(--rarity-color) 12%, var(--surface)) 100%);
  border-color: var(--rarity-color);
}
.profile-identity-panel > .profile-identity-titles .profile-title-item.is-unlocked:hover,
.profile-identity-panel > .profile-identity-titles .profile-title-item.is-current {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--rarity-color) 48%, var(--surface)) 0%, color-mix(in srgb, var(--rarity-color) 18%, var(--surface)) 100%);
  border-color: var(--rarity-color);
}
.profile-identity-panel > .profile-identity-titles .profile-title-item.is-locked {
  background: transparent;
  border-style: dashed;
  cursor: default;
  opacity: 0.42;
}
.profile-floating-submit {
  margin: var(--ui-action-attach-gap) 0 var(--ui-action-section-gap);
}
.profile-statistics-wrap {
  padding-top: 0;
}
.profile-statistics-panel.about-counters dl {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.profile-statistics-panel dt {
  font-variant-numeric: tabular-nums;
}
.profile-insight-panel {
  display: grid;
  gap: var(--ui-frame-gap);
}
/* Le portrait est un paragraphe de tableau de bord : il reprend la fonte des
   lignes de liste voisines plutot que celle des pages editoriales. */
.profile-insight-panel.about-text {
  font-size: var(--ui-list-row-font-size);
}
/* Ligne de liste ou compteur dont la valeur est comparable aux autres du meme
   bloc : le degrade de la couleur secondaire du profil s'etire jusqu'a
   --measure-share, la plus haute valeur couvrant toute la largeur. Le compteur
   garde son cadre primaire : seul son fond devient une jauge. */
.about-counters div.profile-measure,
.profile-collection-link.profile-measure {
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--profile-secondary) 34%, transparent) 0%,
      color-mix(in srgb, var(--profile-secondary) 6%, transparent) var(--measure-share, 0%),
      transparent var(--measure-share, 0%)
    ),
    rgba(var(--surface-rgb), 0.72);
}
.profile-statistics-feature-grid {
  display: grid;
  gap: var(--ui-frame-gap);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}
.profile-statistics-feature-main {
  grid-column: span 2;
}
.profile-statistics-visual {
  aspect-ratio: auto;
  background: rgba(var(--surface-rgb), 0.62);
  border: 1px solid var(--border-soft);
  min-width: 0;
  overflow: hidden;
  position: relative;
}
.profile-statistics-visual canvas {
  display: block;
  height: 100%;
  inset: 0;
  position: absolute;
  width: 100%;
}
.profile-statistics-list {
  align-content: start;
  display: grid;
  gap: var(--ui-frame-gap);
  min-width: 0;
}
.profile-statistics-list .profile-tool-label {
  margin: 0;
}
.profile-statistics-list .profile-collection-link > small {
  max-width: 64%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile-admin {
  border-color: var(--ui-frame);
}
.profile-admin small {
  min-width: 30px;
  border: 1px solid var(--border-soft);
  background: rgba(var(--surface-rgb), 0.72);
  color: var(--fg);
  padding: 0 5px;
  text-align: center;
}
.profile-list a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--ui-sub-frame);
  background: rgba(var(--surface-rgb), 0.72);
  height: var(--ui-list-row-height);
  padding: var(--ui-list-row-pad);
  font-size: var(--ui-list-row-font-size);
  line-height: var(--ui-list-row-line-height);
}
.profile-list a:hover {
  border-color: color-mix(in srgb, var(--profile-primary) 64%, #b8b8b0 36%);
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--user-color, var(--profile-secondary)) 74%, var(--surface) 26%) 0%,
    color-mix(in srgb, var(--user-color, var(--profile-secondary)) 34%, var(--surface) 66%) 100%
  );
}
.profile-list small,
.muted-line {
  color: var(--fg-muted);
  font-size: 0.72rem;
  flex-shrink: 0;
}
/* ── Profile : collections dépliables (mêmes paddings/typo que .profile-list) ── */
.profile-collections {
  display: grid;
  gap: var(--profile-gap);
}
.profile-collection {
  --profile-collection-accent: var(--profile-primary);
  --profile-collection-soft: var(--profile-primary-soft);
  --profile-collection-grad: var(--profile-grad);
  border: 1px solid var(--profile-collection-accent);
  background: rgba(var(--surface-rgb), 0.9);
  padding: var(--profile-pad);
  box-shadow: 0 16px 44px rgba(var(--shadow-rgb), 0.055);
  display: grid;
  gap: var(--profile-gap);
}
.profile-collection:not([open]) {
  gap: 0;
  padding: var(--profile-pad);
}
.profile-collection-drafts {
  --profile-collection-accent: #6dd5a4;
  --profile-collection-soft: color-mix(in srgb, #6dd5a4 34%, transparent);
  --profile-collection-grad: linear-gradient(90deg, color-mix(in srgb, #6dd5a4 52%, var(--surface) 48%) 0%, rgba(var(--surface-rgb), 0.74) 100%);
}
.profile-collection-references {
  --profile-collection-accent: var(--profile-secondary);
  --profile-collection-soft: var(--profile-secondary-soft);
  --profile-collection-grad: var(--profile-grad-reverse);
}
.profile-collection-artists {
  --profile-collection-accent: var(--profile-primary);
  --profile-collection-soft: var(--profile-primary-soft);
  --profile-collection-grad: var(--profile-grad);
}
.profile-collection > summary {
  list-style: none;
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--profile-collection-accent);
  background:
    linear-gradient(90deg, var(--profile-collection-soft) 0%, rgba(var(--surface-rgb), 0.74) 100%);
  cursor: pointer;
  padding: var(--ui-band-pad);
  margin-bottom: 0;
  min-height: var(--ui-band-height);
  color: var(--fg);
  font-size: var(--ui-band-font-size);
  font-weight: 500;
  letter-spacing: 0.12em;
  line-height: var(--ui-band-line-height);
  text-transform: uppercase;
}
.profile-collection > summary::before {
  content: '↓';
  color: var(--fg-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  letter-spacing: 0;
  line-height: 1;
}
.profile-collection[open] > summary::before {
  content: '↑';
  color: var(--fg);
}
.profile-collection > summary > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile-collection > summary::-webkit-details-marker {
  display: none;
}
.profile-collection > summary > small {
  min-width: 30px;
  border: 1px solid var(--border-soft);
  background: rgba(var(--surface-rgb), 0.72);
  color: var(--fg);
  padding: 0 5px;
  text-align: center;
  font-size: 0.7rem;
  letter-spacing: 0;
}
.profile-collection-list {
  display: grid;
  gap: var(--profile-gap);
}
.profile-collection-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border-soft);
  background: rgba(var(--surface-rgb), 0.72);
  height: var(--ui-list-row-height);
  padding: var(--ui-list-row-pad);
  font-size: var(--ui-list-row-font-size);
  line-height: var(--ui-list-row-line-height);
  color: var(--fg);
  text-decoration: none;
  min-width: 0;
}
.profile-collection-link > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.profile-collection-link > small {
  color: var(--fg-muted);
  font-size: 0.72rem;
  flex-shrink: 0;
}
.profile-context-list {
  padding: var(--ui-frame-pad);
}
.profile-context-list a {
  align-items: center;
  display: flex;
  gap: 6px;
  justify-content: space-between;
  min-width: 0;
  height: var(--ui-list-row-height);
  padding: var(--ui-list-row-pad);
  font-size: var(--ui-list-row-font-size);
  line-height: var(--ui-list-row-line-height);
}
.profile-context-list a::before {
  display: none;
}
.profile-context-list a > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile-context-list a > small {
  color: var(--fg-muted);
  flex: 0 0 auto;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.admin-account-picker a {
  border-color: color-mix(in srgb, var(--user-color, var(--ui-frame)) 42%, var(--border-soft));
}
.admin-account-picker a.active,
.admin-account-picker a:hover {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--user-color, var(--ui-frame)) 34%, var(--surface)) 0%, rgba(var(--surface-rgb), 0.74) 100%);
  border-color: color-mix(in srgb, var(--user-color, var(--ui-frame)) 72%, var(--fg) 28%);
}
.profile-card-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  align-items: start;
}
.profile-card-grid .library-card {
  margin: 0;
}
.profile-card-link {
  display: contents;
}
.profile-row-action {
  display: grid;
  margin-top: var(--ui-frame-gap);
}
.profile-row-action button {
  align-items: center;
  width: 100%;
  border: 1px solid var(--danger);
  background: rgba(var(--surface-rgb), 0.62);
  color: var(--danger);
  cursor: pointer;
  display: flex;
  font: inherit;
  font-size: 0.58rem;
  height: var(--ui-button-height);
  justify-content: center;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.profile-panel-title {
  border: 1px solid var(--ui-frame);
  background:
    linear-gradient(90deg, var(--ui-frame-soft) 0%, rgba(var(--surface-rgb), 0.74) 100%);
  color: var(--fg);
  display: block;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  line-height: 1.15;
  padding: var(--ui-band-pad);
  text-transform: uppercase;
}
.billing-content {
  gap: var(--ui-panel-gap);
}
.billing-plan-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--ui-frame-gap);
}
.billing-plan-card {
  background: rgba(var(--surface-rgb), 0.9);
  border: 1px solid var(--ui-frame);
  display: grid;
  gap: var(--ui-frame-gap);
  min-width: 0;
  padding: var(--ui-frame-pad);
  transition:
    filter var(--motion-state) var(--motion-ease),
    opacity var(--motion-state) var(--motion-ease),
    box-shadow var(--motion-state) var(--motion-ease);
}
/* Le retrait se joue sur les cadres, jamais sur le visuel : c'est lui qui porte
   la lecture de la capacité et il reste net partout. Seule l'offre prise garde
   le cadre du duo ; les offres déjà comprises passent au gris de
   l'arrière-plan, et celles au-delà y font passer aussi bandeau et action. */
.billing-plan-card:not(.is-current):not(:has(.billing-plan-choice input:checked)) {
  border-color: var(--border-soft);
}
.billing-plan-card.is-current ~ .billing-plan-card .billing-plan-name,
.billing-plan-card.is-current ~ .billing-plan-card em,
.billing-plan-card.is-current ~ .billing-plan-card button,
.billing-plan-card:has(.billing-plan-choice input:checked) ~ .billing-plan-card .billing-plan-name,
.billing-plan-card:has(.billing-plan-choice input:checked) ~ .billing-plan-card .billing-plan-choice {
  background: var(--neutral-grad);
  border-color: var(--border-soft);
  color: var(--fg-muted);
}
.billing-plan-card.is-current ~ .billing-plan-card:hover,
.billing-plan-card:has(.billing-plan-choice input:checked) ~ .billing-plan-card:hover {
  border-color: var(--ui-frame-strong);
}
.billing-plan-card.is-current ~ .billing-plan-card:hover .billing-plan-name,
.billing-plan-card.is-current ~ .billing-plan-card:hover button,
.billing-plan-card:has(.billing-plan-choice input:checked) ~ .billing-plan-card:hover .billing-plan-name,
.billing-plan-card:has(.billing-plan-choice input:checked) ~ .billing-plan-card:hover .billing-plan-choice {
  border-color: var(--ui-frame);
  color: var(--fg);
}
.billing-plan-card.is-current,
.billing-plan-card:has(.billing-plan-choice input:checked) {
  /* Le halo de l'offre prise : un seul voile diffus sur la couleur du bloc,
     jamais un second cadre. Il deborde sur les cartes voisines, et le
     `z-index` ci-dessous le maintient au-dessus d'elles. */
  box-shadow:
    0 0 0 1px var(--ui-frame),
    0 0 24px 8px color-mix(in srgb, var(--ui-frame) 46%, transparent);
  filter: none;
  opacity: 1;
  position: relative;
  z-index: 1;
}
.billing-plan-card:has(.billing-plan-choice input:focus-visible) {
  outline: 2px solid var(--fg);
  outline-offset: 2px;
}
.billing-plan-name {
  align-items: center;
  background: var(--ui-grad);
  border: 1px solid var(--ui-frame);
  color: var(--fg);
  display: flex;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.15;
  padding: var(--ui-band-pad);
  text-transform: uppercase;
}
/* Les bandeaux des offres acquises ne sont pas quatre bandeaux : c'est une
   seule bande, le duo du compte déplié du gratuit jusqu'à l'offre prise, dont
   chaque carte ne montre que son segment. Au-delà, le bandeau reste neutre. */
.billing-plan-card.is-acquired .billing-plan-name {
  --band-color-from: color-mix(in srgb, var(--profile-secondary) var(--band-from, 0%), var(--profile-primary));
  --band-color-to: color-mix(in srgb, var(--profile-secondary) var(--band-to, 100%), var(--profile-primary));
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--band-color-from) 30%, rgba(var(--surface-rgb), 0.88)) 0%,
    color-mix(in srgb, var(--band-color-to) 30%, rgba(var(--surface-rgb), 0.88)) 100%
  );
}
.billing-plan-visual {
  aspect-ratio: 1;
  border: 1px solid var(--ui-sub-frame);
  min-width: 0;
  overflow: hidden;
  position: relative;
}
/* La participation est une carte d'offre à elle seule : même bandeau, même
   cadre intérieur, même action en pied, mais une seule colonne et un visuel en
   bandeau au lieu d'une case carrée. */
.billing-participation-grid {
  grid-template-columns: minmax(0, 1fr);
}
.billing-participation-visual {
  aspect-ratio: 5 / 1;
}
.billing-capacity-canvas {
  display: block;
  height: 100%;
  width: 100%;
}
/* La ligne de capacité est seule dans sa carte : sans second terme à pousser à
   droite, le `space-between` de la ligne compacte la collerait au bord gauche.
   Elle se cale donc comme l'action juste en dessous. */
.billing-plan-card > .profile-collection-link {
  justify-content: center;
}
.billing-plan-action,
.billing-plan-card form {
  display: grid;
}
.billing-plan-card em,
.billing-plan-card button,
.billing-plan-choice {
  align-items: center;
  background: var(--neutral-grad);
  border: 1px solid var(--ui-frame);
  color: var(--fg);
  display: flex;
  font: inherit;
  font-size: 0.66rem;
  font-style: normal;
  gap: 4px;
  justify-content: center;
  letter-spacing: 0.08em;
  line-height: var(--ui-control-line-height);
  height: var(--ui-button-height);
  padding: 0 9px;
  text-align: center;
  text-transform: uppercase;
  width: 100%;
}
.billing-plan-choice {
  cursor: pointer;
}
.billing-plan-choice input {
  opacity: 0;
  pointer-events: none;
  position: absolute;
}
.billing-plan-card button {
  cursor: pointer;
}
.billing-plan-card button:hover,
.billing-plan-choice:hover,
.billing-plan-choice:has(input:checked) {
  background: var(--ui-grad);
}
.billing-plan-card em {
  background: var(--neutral-grad);
  border-color: var(--ui-frame);
  color: var(--fg);
}
.billing-plan-card em strong,
.billing-plan-card button strong,
.billing-plan-choice strong {
  color: inherit;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0;
  white-space: nowrap;
}
.billing-create-space-form {
  display: grid;
  gap: var(--ui-panel-gap);
}
/* Les étapes de la création sont des blocs de plein droit — panneau, grille
   d'offres, action : c'est donc leur mise en grille qui doit céder devant
   `hidden`, comme les étapes de la présentation guidée. */
.billing-create-space-form > [hidden],
.billing-create-space-panel [hidden] {
  display: none;
}
/* Le fond de la barre est la progression elle-même : c'est la jauge des lignes
   de mesure, le dégradé du duo du compte étiré jusqu'à l'étape courante. Cette
   jauge et le gris des étapes franchies vivent sur `.site-tour-footer`
   (20-tour-library.css), que cette barre porte aussi ; il ne reste ici que la
   dernière étape, qui passe au rouge de l'action qui engage, cadre compris. */
.billing-create-space-steps.is-final {
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--danger) 26%, transparent) 0%,
      color-mix(in srgb, var(--danger) 7%, transparent) var(--measure-share, 0%),
      transparent var(--measure-share, 0%)
    ),
    rgba(var(--surface-rgb), 0.74);
  border-color: var(--danger);
}
/* Dernière étape : le bouton de droite n'ouvre plus une étape, il engage la
   création et le paiement. Même rouge que les autres actions qui engagent. */
.billing-create-space-steps button.danger {
  background: transparent;
  border-color: var(--danger);
  color: var(--danger);
}
.billing-create-space-steps button.danger:hover {
  background: var(--danger-soft);
}
.billing-new-space {
  text-transform: uppercase;
}
.billing-new-space > small {
  background: transparent;
  border: 0;
  color: var(--fg);
  font-size: 0.8rem;
  line-height: 1;
  padding: 0;
}
.billing-statistics-panel.about-counters dl {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.billing-statistics-panel div {
  border-color: var(--ui-frame);
}
.billing-statistics-panel dt {
  font-variant-numeric: tabular-nums;
}
.billing-space-settings,
.billing-members {
  display: grid;
  gap: var(--ui-frame-gap);
}

/* Un bloc que seule l'administration de l'espace peut ouvrir porte son cadre en
   rouge, comme le menu d'administration du site dans le rail de droite. Le
   rouge reste sur le cadre exterieur : les bandeaux et les champs a l'interieur
   gardent leurs couleurs, et un membre sans droit d'administration ne voit
   aucun cadre rouge sur la page. La grille des offres n'en fait pas partie,
   c'est le sujet meme de la page d'abonnement. */
.billing-admin-panel {
  border-color: var(--danger);
}
/* L'accès au portail de facturation occupe la dernière case des réglages, en
   face de l'offre : il remplit toute la hauteur de la case voisine, reste
   visible même sans offre payante, et se désactive tant qu'il n'y a rien à
   ouvrir. */
.billing-space-settings button.profile-newsletter-toggle,
.billing-participation-settings button.profile-newsletter-toggle {
  align-self: stretch;
  height: auto;
  justify-items: stretch;
  text-align: left;
}
.billing-space-settings .profile-newsletter-toggle:disabled,
.billing-participation-settings .profile-newsletter-toggle:disabled,
.billing-plan-card button:disabled {
  cursor: not-allowed;
  opacity: 0.34;
}
.billing-member-list {
  display: grid;
  gap: var(--ui-frame-gap);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.billing-member-list .profile-collection-link {
  border-color: var(--border-soft);
  background: transparent;
  min-height: var(--ui-control-height);
}
.billing-access-panel .about-panel-content {
  font-size: var(--ui-list-row-font-size);
  line-height: var(--ui-list-row-line-height);
}
.billing-access-panel .about-panel-content small {
  font-size: inherit;
}
.billing-member-controls {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  gap: var(--ui-frame-gap);
}
.billing-member-controls select {
  background: rgba(var(--surface-rgb), 0.92);
  border: 1px solid var(--border-soft);
  color: var(--fg);
  font: inherit;
  font-size: 0.62rem;
  height: var(--ui-icon-action-size);
  min-height: var(--ui-icon-action-size);
  padding: 0 18px 0 4px;
}
.billing-member-controls button {
  background: var(--area-btn-bg);
  border: 1px solid var(--area-btn-border);
  color: var(--fg);
  cursor: pointer;
  font: inherit;
  font-size: 0.62rem;
  height: var(--ui-icon-action-size);
  min-height: var(--ui-icon-action-size);
  min-width: var(--ui-icon-action-size);
  padding: 0;
  width: var(--ui-icon-action-size);
}
.billing-member-controls button.danger {
  background: rgba(var(--surface-rgb), 0.72);
  border-color: var(--danger);
  color: var(--danger);
}
.ui-compact-dialog select {
  width: 100%;
  background: rgba(var(--surface-rgb), 0.92);
  border: 1px solid var(--border-soft);
  color: var(--fg);
  font: inherit;
  font-size: 0.78rem;
  min-height: var(--ui-control-height);
  padding: var(--ui-control-pad-y) 20px var(--ui-control-pad-y) var(--ui-control-pad-x);
}
.admin-account-contributions {
  align-items: start;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--profile-gap);
}
.admin-account-contributions .profile-collection {
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}
.admin-account-contributions .profile-collection:not([open]) {
  padding: 0;
}
.admin-account-contributions .profile-collection > summary > small {
  border: 0;
  background: transparent;
  min-width: auto;
  padding: 0;
}
.admin-account-contributions .muted-line {
  margin: 0;
  padding: var(--ui-text-pad);
}
.admin-account-danger {
  align-items: stretch;
  background: transparent;
  border: 0;
  display: grid;
  gap: var(--ui-frame-gap);
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  padding: 0;
}
.admin-account-danger strong {
  color: var(--danger);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.admin-account-danger p {
  background: color-mix(in srgb, var(--danger-soft) 48%, rgba(var(--surface-rgb), 0.86));
  border: 1px solid var(--danger);
  color: var(--fg-muted);
  font-size: 0.64rem;
  line-height: 1.3;
  margin: 0;
  padding: var(--ui-text-pad);
}
.admin-account-danger p b {
  color: var(--fg);
}
.admin-account-delete {
  align-items: end;
  display: grid;
  gap: var(--ui-frame-gap);
  grid-template-columns: minmax(0, 1fr) auto;
}
.admin-account-danger > .admin-account-delete {
  background: color-mix(in srgb, var(--danger-soft) 48%, rgba(var(--surface-rgb), 0.86));
  border: 1px solid var(--danger);
  padding: var(--ui-frame-pad);
}
.admin-account-delete label {
  display: grid;
  gap: var(--ui-frame-gap);
}
.admin-account-delete label > span {
  color: var(--fg-muted);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.admin-account-delete input {
  border: 1px solid var(--danger);
  background: rgba(var(--surface-rgb), 0.92);
  color: var(--fg);
  font: inherit;
  min-height: var(--ui-control-height);
  padding: var(--ui-control-pad-y) var(--ui-control-pad-x);
}
.admin-account-delete button.danger {
  border: 1px solid var(--danger);
  background: transparent;
  color: var(--danger);
  cursor: pointer;
  font: inherit;
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  line-height: var(--ui-control-line-height);
  height: var(--ui-button-height);
  padding: var(--ui-button-pad);
  text-transform: uppercase;
}
#profile-page > .account-admin-main {
  grid-area: auto;
  grid-column: 2;
}
.account-admin-page .account-users-panel,
.account-admin-page .admin-panel {
  width: 100%;
}
.profile-collection-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 0;
  padding: 0;
}
.profile-collection-row > a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  color: inherit;
  text-decoration: none;
  min-width: 0;
  padding: 2px 4px;
}
.profile-collection-row > a > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.profile-collection-row > a > small {
  color: var(--fg-muted);
  font-size: 0.72rem;
  flex-shrink: 0;
}
.profile-row-action {
  display: grid;
  margin: 0;
}
.profile-row-action button {
  border: 1px solid color-mix(in srgb, #ff6d7e 58%, var(--border-soft));
  background: color-mix(in srgb, #ff6d7e 22%, var(--surface));
  color: #ff8794;
  cursor: pointer;
  font: inherit;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1;
  padding: 0 7px;
  text-transform: uppercase;
}
.profile-row-action button:disabled {
  cursor: not-allowed;
  opacity: 0.34;
}
.profile-collection .profile-collection-link:hover {
  border-color: var(--profile-collection-accent);
  background: var(--profile-collection-grad);
}

@media (max-width: 1180px) {
  #profile-page {
    grid-template-columns: var(--side-rail-width) minmax(0, var(--content-rail-width));
  }
  .profile-overview,
  .profile-collections {
    grid-column: 2;
    grid-row: auto;
  }
}

@media (max-width: 880px) {
  #profile-page {
    grid-template-columns: minmax(0, var(--side-rail-width)) minmax(0, var(--content-rail-width));
    padding-inline: 1rem;
  }
  .profile-left-panels,
  .profile-context-panel {
    grid-column: 1;
    grid-row: auto;
  }
  .profile-overview,
  .profile-collections {
    grid-column: 2;
    grid-row: auto;
  }
  .profile-right-panels {
    grid-column: 1 / -1;
    grid-row: auto;
  }
  .profile-left-panels,
  .profile-right-panels,
  .profile-context-panel {
    position: static;
  }
  .profile-card-grid,
  .billing-plan-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .billing-statistics-panel.about-counters dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .profile-left-panels,
  .profile-right-panels,
  .profile-context-panel,
  .profile-display-panel {
    position: static;
    width: 100%;
  }
  #profile-page {
    grid-template-columns: minmax(0, 1fr);
  }
  .profile-left-panels,
  .profile-right-panels,
  .profile-context-panel,
  .profile-overview,
  .profile-collections {
    grid-column: 1;
  }
  .profile-card-grid,
  .billing-plan-grid,
  .billing-member-list,
  .billing-statistics-panel.about-counters dl,
  .profile-statistics-panel.about-counters dl {
    grid-template-columns: minmax(0, 1fr);
  }
  .profile-overview,
  .profile-overview .profile-side-color-field,
  .profile-form-tools,
  .profile-name-grid,
  .profile-access-field,
  .profile-contact-field {
    grid-template-columns: minmax(0, 1fr);
  }
  .profile-overview .color-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .profile-statistics-feature-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .profile-statistics-feature-main {
    grid-column: auto;
  }
  .profile-statistics-visual,
  .profile-statistics-globe,
  .profile-statistics-timeline,
  .profile-statistics-contribution,
  .profile-statistics-rameau {
    aspect-ratio: 4 / 3;
  }
  .profile-form-tools .color-grid {
    grid-template-columns: repeat(5, 18px);
  }
  .profile-identity-titles .profile-collection-list {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
  }
  .profile-form-tools { justify-content: stretch; }
  .profile-floating-submit {
    justify-self: stretch;
    width: 100%;
  }
  .profile-submit-row button[type="submit"] { width: 100%; }
  .profile-newsletter-toggle { justify-content: space-between; }
}