/* Astral Ridge E-Sport : pages légales (mentions, CGU, confidentialité) */

:root { --dawn: .12; }

.page-head { padding: clamp(116px, 16vh, 150px) 0 clamp(28px, 5vh, 48px); }
.page-head .title-xl { font-size: clamp(36px, 5.6vw, 88px); }
.lede { margin-top: 18px; max-width: 54ch; color: var(--ink-soft); font-size: clamp(15px, 1.2vw, 18px); }

.legal-grid {
  display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: clamp(32px, 6vw, 96px);
  padding-bottom: clamp(70px, 11vh, 120px);
}

/* Sommaire collant, qui suit la lecture */
.toc { position: sticky; top: 104px; align-self: start; }
.toc-title {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted);
  padding-bottom: 12px; border-bottom: 1px solid var(--line);
}
.toc ol { list-style: none; margin: 10px 0 0; padding: 0; position: relative; }
.toc ol::before { content: ''; position: absolute; left: 0; top: 4px; bottom: 4px; width: 1px; background: var(--line); }
.toc a {
  position: relative; display: flex; gap: 12px; padding: 7px 0 7px 16px;
  font-size: 13.5px; line-height: 1.35; color: var(--muted); transition: color .3s ease;
}
.toc a span { font-family: var(--mono); font-size: 10.5px; padding-top: 2px; color: var(--muted); transition: color .3s ease; }
.toc a::before {
  content: ''; position: absolute; left: 0; top: 50%; width: 1px; height: 0; transform: translateY(-50%);
  background: linear-gradient(180deg, var(--blue-soft), var(--pink)); transition: height .4s var(--ease);
}
.toc a:hover { color: var(--ink); }
.toc a.is-active { color: var(--ink); }
.toc a.is-active span { color: var(--pink); }
.toc a.is-active::before { height: 100%; }

/* Corps du texte */
.legal-body { max-width: 74ch; }
.lsec { padding: 26px 0 28px; border-top: 1px solid var(--line); scroll-margin-top: 96px; }
.lsec:first-child { border-top: 0; padding-top: 0; }
.lsec h2 {
  display: flex; align-items: baseline; gap: 14px; margin-bottom: 14px;
  font-stretch: 115%; font-weight: 700; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.25;
}
.lsec .ln { font-family: var(--mono); font-weight: 500; font-size: 12px; letter-spacing: .1em; color: var(--pink); }
.lsec p { color: var(--ink-soft); }
.lsec p + p { margin-top: 12px; }
.lsec strong { color: var(--ink); font-weight: 600; }
.lsec a { color: var(--ink); background: linear-gradient(90deg, var(--blue-soft), var(--pink)) left bottom / 100% 1px no-repeat; transition: background-size .4s var(--ease); }
.lsec a:hover { background-size: 0 1px; background-position: right bottom; }
.lsec ul { margin: 12px 0 0; padding: 0; list-style: none; }
.lsec li { position: relative; padding: 4px 0 4px 22px; color: var(--ink-soft); }
.lsec li::before {
  content: ''; position: absolute; left: 4px; top: .85em; width: 5px; height: 5px; transform: rotate(45deg); background: var(--pink);
}
.highlight {
  padding: 18px 20px; border: 1px solid transparent; color: var(--ink) !important;
  background: linear-gradient(rgba(14, 17, 38, .9), rgba(14, 17, 38, .9)) padding-box,
              linear-gradient(90deg, var(--blue-soft), var(--pink)) border-box;
}

.facts-list { margin: 16px 0 0; border-top: 1px solid var(--line); }
.facts-list div { display: grid; grid-template-columns: 200px 1fr; gap: 20px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.facts-list dt { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding-top: 3px; }
.facts-list dd { margin: 0; color: var(--ink-soft); }

.legal-end { margin-top: 10px; padding-top: 22px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.updated, .see { font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; color: var(--muted); }
.see { display: flex; align-items: center; gap: 4px 18px; flex-wrap: wrap; }
.see a { display: inline-block; padding: 8px 0; color: var(--ink-soft); transition: color .3s ease; }
.see a:hover { color: var(--ink); }
.foot-legal a[aria-current="page"] { color: var(--ink); }

@media (max-width: 900px) {
  .legal-grid { grid-template-columns: 1fr; }
  .toc { display: none; }
}
@media (max-width: 560px) {
  .page-head .title-xl { font-size: clamp(26px, 8.4vw, 88px); }
  .facts-list div { grid-template-columns: 1fr; gap: 4px; }
}