/* ── About ── */
#about {
  width: min(var(--content-rail-width), calc(100vw - 2rem));
  margin: 0 auto;
  padding: var(--nav-clearance) 0 5rem;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ui-panel-gap);
  align-items: start;
  justify-content: center;
}
.about-panel {
  border: 1px solid var(--ui-frame);
  background: rgba(var(--surface-rgb), 0.86);
  padding: var(--ui-frame-pad);
  box-shadow: 0 16px 44px rgba(var(--shadow-rgb), 0.055);
  display: grid;
  gap: var(--ui-frame-gap);
  min-width: 0;
  /* Cadre et bandeau du bloc sur --about-accent, sous-blocs encadres sur
     --about-accent-sub : un panneau lit toujours ses deux niveaux. */
  --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);
}
.about-panel-title {
  align-items: center;
  display: flex;
  /* Le bandeau devient une boîte flex : sans écart, « Mises à jour » et son
     numéro de version se colleraient l'un à l'autre. */
  gap: var(--ui-frame-gap);
  min-height: var(--ui-band-height);
  border: 1px solid var(--about-accent);
  background:
    linear-gradient(90deg, var(--about-accent-soft) 0%, rgba(var(--surface-rgb), 0.74) 100%);
  color: var(--fg);
  font-size: var(--ui-band-font-size);
  font-weight: 500;
  letter-spacing: 0.12em;
  line-height: var(--ui-band-line-height);
  padding: var(--ui-band-pad);
  text-transform: uppercase;
}
.about-panel-content {
  border: 1px solid var(--about-accent-sub, var(--ui-sub-frame));
  background: rgba(var(--surface-rgb), 0.66);
  /* Ce sous-bloc ne contient que du texte : il prend donc le retrait du texte,
     le meme que `.about-text-body`, pas celui des cadres. */
  padding: var(--ui-text-pad);
  min-width: 0;
}
.about-text-body {
  border: 1px solid var(--about-accent-sub, var(--ui-sub-frame));
  background: rgba(var(--surface-rgb), 0.7);
  padding: var(--ui-text-pad);
  min-width: 0;
}
.about-text {
  line-height: 1.32;
  font-size: 0.82rem;
}
.about-text p {
  margin: 0;
}
.about-text p + p {
  margin-top: 0.72em;
}
/* Une suite de règles se lit en points numérotés plutôt qu'en paragraphes : la
   numérotation tient dans le retrait du texte, sans puce graphique, sans cadre
   et sans rien changer à la fonte du bloc. */
.about-text-body ol {
  margin: 0;
  padding-left: 1.5em;
}
.about-text-body ol li {
  margin: 0;
  padding-left: 0.2em;
}
/* L'écart se pose entre les points et non par une grille : un conteneur de
   grille déplacerait les numéros, qui vivent hors du flux de leur ligne. Un
   point masqué ne doit pas laisser sa marge derrière lui : les deux côtés du
   sélecteur doivent être visibles. */
.about-text-body ol li:not([hidden]) + li:not([hidden]) {
  margin-top: 0.5em;
}
.about-pricing-list {
  display: grid;
  gap: var(--ui-frame-gap);
}
.about-pricing-row {
  align-items: center;
  background: transparent;
  border: 0;
  color: var(--fg);
  display: grid;
  font-size: var(--ui-list-row-font-size);
  gap: var(--ui-frame-gap);
  grid-template-columns: minmax(0, 1fr) auto;
  line-height: var(--ui-list-row-line-height);
  min-height: var(--ui-list-row-height);
  padding: 0;
}
.about-pricing-row > span {
  min-width: 0;
}
.about-pricing-row > small {
  color: var(--fg-muted);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.about-secondary {
  display: grid;
  gap: var(--ui-panel-gap);
  margin-top: 0;
}
.about-text,
.about-secondary,
#about > .profile-statistics-wrap {
  grid-column: 1;
}
.about-side {
  position: absolute;
  left: calc(100% + var(--layout-rail-gap));
  top: var(--nav-clearance);
  width: var(--side-rail-width);
  display: grid;
  gap: var(--ui-panel-gap);
  align-self: start;
}
.about-pricing-side {
  display: grid;
  gap: var(--ui-panel-gap);
  position: absolute;
  right: calc(100% + var(--layout-rail-gap));
  top: var(--nav-clearance);
  width: var(--side-rail-width);
}
.about-updates li > span {
  color: var(--fg-soft);
  font-size: 0.64rem;
  line-height: 1.12;
}
.about-updates ol {
  display: grid;
  gap: var(--ui-frame-gap);
  list-style: none;
}
.about-updates li {
  border: 1px solid var(--about-accent-sub, var(--ui-sub-frame));
  background: rgba(var(--surface-rgb), 0.66);
  display: grid;
  gap: 1px;
  padding: var(--ui-text-pad);
}
.about-updates time {
  color: var(--fg-muted);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
}
.about-updates strong {
  font-size: 0.72rem;
  line-height: 1.15;
}
/* Panneaux volontairement monochromes : le soutien reste vert de bout en bout,
   les mises à jour et le cadre légal restent au troisième niveau gris. */
.about-support {
  display: grid;
  gap: var(--ui-frame-gap);
  --about-accent: #6dd5a4;
  --about-accent-soft: color-mix(in srgb, #6dd5a4 34%, transparent);
  --about-accent-sub: var(--about-accent);
  --about-accent-sub-soft: var(--about-accent-soft);
  --detail-accent: var(--about-accent);
  --detail-accent-soft: var(--about-accent-soft);
}
.about-updates {
  --about-accent: color-mix(in srgb, var(--border) 70%, var(--surface) 30%);
  --about-accent-soft: color-mix(in srgb, var(--border-soft) 42%, transparent);
  --about-accent-sub: var(--about-accent);
  --about-accent-sub-soft: var(--about-accent-soft);
}
.about-legal-short {
  --about-accent: color-mix(in srgb, var(--border) 70%, var(--surface) 30%);
  --about-accent-soft: color-mix(in srgb, var(--border-soft) 42%, transparent);
  --about-accent-sub: var(--about-accent);
  --about-accent-sub-soft: var(--about-accent-soft);
}
.about-legal-short .refs-category-list {
  --ui-frame: var(--about-accent);
  --ui-sub-frame: var(--about-accent);
}
.about-legal-short .refs-category-list a {
  gap: 0;
}
.about-legal-short .refs-category-list a::before {
  display: none;
}
.about-support-text {
  border: 1px solid var(--about-accent);
  background: rgba(var(--surface-rgb), 0.62);
  color: var(--fg);
  font-size: 0.66rem;
  line-height: 1.2;
  min-width: 0;
  padding: var(--ui-text-pad);
}
.about-support-text p { margin: 0; }
.about-support .about-support-heart {
  background: color-mix(in srgb, var(--about-accent) 42%, var(--surface));
  border-color: var(--about-accent);
  color: var(--fg);
  cursor: pointer;
}
.about-support .about-support-heart:hover,
.about-support .about-support-heart:focus-visible {
  background: var(--about-accent);
  border-color: var(--about-accent);
  color: var(--fg);
}
.about-counters dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ui-frame-gap);
  margin: 0;
}
.about-counters div {
  border: 1px solid var(--profile-primary);
  background: var(--stat-grad);
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: var(--ui-text-pad);
  padding-top: calc(var(--ui-frame-pad) * 2);
  min-width: 0;
}
.about-counters dt {
  color: var(--fg);
  font-family: 'AdvercaseFont', Helvetica, Arial, sans-serif;
  font-size: 1.16rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1;
}
.about-counters dd {
  color: var(--fg);
  font-size: 0.56rem;
  letter-spacing: 0.12em;
  line-height: 1.15;
  margin: 0;
  text-transform: uppercase;
}
.about-updates .about-panel-title small {
  color: var(--fg-muted);
  font-size: inherit;
  letter-spacing: 0.06em;
}
.about-participants {
  margin-top: 0;
  display: grid;
  gap: var(--ui-frame-gap);
}
.about-participants > div {
  display: grid;
  gap: var(--ui-frame-gap);
}
.about-person {
  border: 1px solid color-mix(in srgb, var(--user-color) 55%, #b8b8b0);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--user-color) 35%, var(--surface)) 0%, rgba(var(--surface-rgb), 0.76) 100%);
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 5px;
  align-items: stretch;
  padding: var(--ui-frame-pad);
}
/* Le carre porte un L-system : il reprend donc exactement la recette de son
   hote canonique, l'apercu d'identite du profil (fond a 34 % de la couleur,
   trait a 68 % melange au texte). Le duo tenait tout le degrade et la couleur
   du trait en etait la moyenne : la pousse se dessinait alors dans sa propre
   couleur de fond, invisible. */
.about-person > span {
  align-self: stretch;
  width: 100%;
  min-height: 14px;
  border: 1px solid var(--border-soft);
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--user-color) 34%, var(--surface)) 0%,
      color-mix(in srgb, var(--user-color-secondary, var(--user-color)) 34%, var(--surface)) 100%
    );
  color: color-mix(in srgb, var(--user-color) 68%, var(--fg));
  overflow: hidden;
  position: relative;
}
.work-lsystem-canvas {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.about-person > span > .work-lsystem-canvas {
  inset: 0;
  position: absolute;
}
.about-person > div {
  min-width: 0;
  display: grid;
  gap: 0;
}
.about-participants h2 {
  overflow: hidden;
  font-size: 0.78rem;
  line-height: 1.1;
  margin: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.about-participants small {
  color: var(--fg-muted);
  font-size: 0.58rem;
  line-height: 1.05;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Legal ── */
.legal-content {
  grid-column: 1;
  grid-row: 1;
  display: grid;
  gap: var(--ui-panel-gap);
}
.legal-switcher [data-legal-section="privacy"] {
  border-color: var(--profile-primary);
}
#legal-page:has(#confidentialite:target) .legal-switcher [data-legal-section="mentions"] {
  background: var(--surface);
  border-color: var(--profile-primary);
  color: var(--fg-muted);
}
#legal-page:has(#confidentialite:target) .legal-switcher [data-legal-section="privacy"] {
  background: var(--profile-grad);
  border-color: var(--profile-primary);
  color: var(--fg);
}
.legal-header,
.legal-panel {
  border: 1px solid var(--ui-frame);
  background: rgba(var(--surface-rgb), 0.9);
  padding: var(--ui-frame-pad);
  box-shadow: 0 16px 44px rgba(var(--shadow-rgb), 0.055);
}
.legal-header {
  display: grid;
  gap: var(--ui-frame-gap);
}
.legal-header h1,
.legal-panel > span,
.legal-panel h2 {
  border: 1px solid var(--legal-accent, var(--profile-primary));
  background:
    linear-gradient(90deg, var(--legal-accent-soft, var(--profile-primary-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;
}
.legal-header h1 {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.15;
  padding: var(--ui-text-pad);
  text-transform: none;
}
.legal-header p,
.legal-panel p {
  color: var(--fg-soft);
  font-size: 0.76rem;
  line-height: 1.38;
  margin: 0;
}
.legal-panel p + p {
  margin-top: 0.5em;
}
.legal-panel {
  display: grid;
  gap: var(--ui-frame-gap);
}
.legal-warning {
  --legal-accent: var(--danger, #b84a4a);
  --legal-accent-soft: var(--danger-soft, rgba(184, 74, 74, 0.1));
  --legal-accent-sub: var(--legal-accent);
}
.legal-definition-list {
  display: grid;
  gap: var(--ui-frame-gap);
}
.legal-definition-list div {
  border: 1px solid color-mix(in srgb, var(--legal-accent-sub, var(--ui-sub-frame)) 42%, var(--border-soft));
  background: rgba(var(--surface-rgb), 0.7);
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 8px;
  padding: var(--ui-text-pad);
}
.legal-definition-list dt {
  color: var(--fg-muted);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.legal-definition-list dd {
  color: var(--fg);
  font-size: 0.76rem;
  line-height: 1.25;
  min-width: 0;
  overflow-wrap: anywhere;
}
.legal-panel a {
  border-bottom: 1px solid var(--border-soft);
}
.legal-panel a:hover {
  border-color: var(--fg);
}
.legal-panel-body {
  border: 1px solid var(--legal-accent-sub, var(--ui-sub-frame));
  background: rgba(var(--surface-rgb), 0.66);
  padding: var(--ui-text-pad);
}

@media (max-width: 980px) {
  .legal-page .legal-content {
    grid-row: auto;
  }
}

@media (max-width: 880px) {
  #about {
    width: min(var(--content-rail-width), calc(100vw - 2rem));
    grid-template-columns: minmax(0, 1fr);
  }
  .about-text,
  .about-secondary,
  .about-side,
  .about-pricing-side {
    grid-column: 1;
  }
  .about-side {
    position: static;
    grid-row: auto;
    width: auto;
  }
  .about-pricing-side {
    position: static;
    grid-row: auto;
    width: auto;
  }
}

@media (max-width: 620px) {
  #about { padding-inline: 1rem; }
  .about-counters dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .legal-definition-list div {
    grid-template-columns: minmax(0, 1fr);
    gap: 1px;
  }
}

@media (max-width: 480px) {
  .about-counters dl {
    grid-template-columns: minmax(0, 1fr);
  }
}