/* Lot « legal » : pages légales (mentions, CGU, CGV, confidentialité, cookies) et page 404.
   Animations : transform et opacity uniquement, coupées si l'utilisateur le demande. */

/* ---- Pages légales ---- */
.lg-title { max-width: 22ch; }
.lg-date { margin: 22px 0 0; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: rgb(255 255 255 / .08); border: 1px solid rgb(255 255 255 / .14); font-size: 14px; color: rgb(255 255 255 / .85); }
.lg-date svg { width: 16px; height: 16px; color: var(--glow); }

.lg-layout { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
.lg-aside { position: sticky; top: 96px; align-self: start; }
.lg-toc { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 18px 8px 10px 18px; box-shadow: var(--shadow); max-height: calc(100vh - 120px); overflow: auto; }
.lg-toc summary { list-style: none; cursor: default; display: flex; align-items: center; justify-content: space-between; gap: 10px; font-family: var(--display); font-weight: 700; font-size: 15px; color: var(--ink); padding: 0 10px 12px 0; }
.lg-toc summary::-webkit-details-marker { display: none; }
.lg-toc summary svg { display: none; width: 18px; height: 18px; color: var(--brand); }
.lg-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.lg-toc a { display: block; padding: 7px 10px; border-left: 2px solid var(--line); font-size: 14px; line-height: 1.35; color: var(--ink-2); text-decoration: none; transition: color .25s, border-color .25s, background .25s; border-radius: 0 10px 10px 0; }
.lg-toc a:hover { color: var(--brand-600); background: var(--brand-50); }
.lg-toc a[aria-current] { color: var(--brand-700); border-left-color: var(--brand); background: var(--brand-50); font-weight: 700; }

.lg-card { min-width: 0; }
.lg-card .prose { margin: 0; max-width: 74ch; }
.lg-card .prose h2 { scroll-margin-top: 100px; padding-top: 6px; }
.lg-card .prose > h2:first-child { margin-top: 8px; }
.lg-card .prose h3 { scroll-margin-top: 100px; }
.lg-card .prose ul, .lg-card .prose ol { padding-left: 22px; }
.lg-card .prose li { margin-bottom: 6px; }
.lg-card .prose li::marker { color: var(--brand); }
.lg-card .prose code { font-family: "DM Mono", ui-monospace, monospace; font-size: .86em; background: var(--brand-50); border: 1px solid var(--line); padding: 1px 6px; border-radius: 6px; overflow-wrap: anywhere; }
.lg-card .prose p, .lg-card .prose li, .lg-card .prose td { overflow-wrap: anywhere; }
.lg-notice { margin-bottom: 28px; }
.lg-version { color: var(--ink-3); font-size: 14.5px; }

.lg-table { margin: 6px 0 20px; overflow-x: auto; border: 1px solid var(--line); border-radius: 16px; -webkit-overflow-scrolling: touch; }
.lg-table table { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 520px; }
.lg-table th { text-align: left; background: var(--brand-50); color: var(--ink); font-weight: 700; padding: 11px 14px; white-space: nowrap; }
.lg-table td { padding: 11px 14px; border-top: 1px solid var(--line); vertical-align: top; }

/* Passages à trancher */
.lg-tbd { margin: 20px 0; padding: 16px 18px 6px; border-radius: 16px; background: #fff8e8; border: 1px solid #ffd9a3; border-left: 5px solid #f59e0b; color: #5c3b00; }
.lg-tbd p, .lg-tbd li { color: #5c3b00; }
.lg-tbd strong { color: #3d2800; }
.lg-tbd code { background: #fff1d1; border-color: #ffd9a3; }
.lg-tbd__tag { display: inline-flex; align-items: center; gap: 7px; margin: 0 0 8px; padding: 4px 11px; border-radius: 999px; background: #f59e0b; color: #2b1a00 !important; font-size: 12.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.lg-tbd__tag svg { width: 14px; height: 14px; }
.lg-mark { background: #ffe2a3; color: #4a2f00; padding: 1px 7px; border-radius: 7px; font-weight: 700; font-size: .92em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

.lg-final .final__card { padding-block: clamp(40px, 6vw, 72px); }
.lg-final .final__card .h2 { font-size: clamp(26px, 3.6vw, 42px); max-width: 22ch; }

/* ---- Page 404 ---- */
.lg404 { margin-top: 14px; }
.lg404__card { position: relative; overflow: hidden; isolation: isolate; text-align: center; border-radius: var(--r-lg); background: var(--night); color: #fff; padding: clamp(36px, 6vw, 80px) clamp(18px, 4vw, 48px) clamp(36px, 5vw, 64px); display: grid; justify-items: center; }
.lg404__card .aurora { opacity: .85; }
.lg404__card .eyebrow { color: var(--glow); }
.lg404__digits { display: flex; align-items: center; justify-content: center; gap: clamp(6px, 2vw, 20px); font-family: var(--display); font-weight: 800; line-height: .85; font-size: clamp(110px, 22vw, 250px); letter-spacing: -.05em; margin-bottom: 8px; }
.lg404__d { display: inline-grid; place-items: center; position: relative; background: linear-gradient(180deg, #fff 20%, var(--glow)); -webkit-background-clip: text; background-clip: text; color: transparent; animation: lg-rise 1s var(--ease) both; }
.lg404__d--1 { animation-delay: .05s; }
.lg404__d--o { width: .78em; height: .78em; animation-delay: .2s; background: none; color: var(--glow); }
.lg404__d--3 { animation-delay: .35s; }
.lg404__d--o svg { width: 46%; height: 46%; animation: lg-needle 6s ease-in-out infinite; transform-origin: 50% 50%; }
.lg404__orbit { position: absolute; inset: 0; border-radius: 50%; border: 3px solid rgb(159 227 238 / .55); border-top-color: transparent; border-left-color: transparent; animation: lg-spin 9s linear infinite; }
.lg404__orbit--2 { inset: 12%; border-color: rgb(255 255 255 / .35); border-bottom-color: transparent; border-right-color: transparent; animation-duration: 6s; animation-direction: reverse; }
.lg404__in { animation: lg-rise .9s var(--ease) both; }
.lg404__title { font-size: clamp(30px, 4.4vw, 56px); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; max-width: 20ch; animation-delay: .45s; }
.lg404__title em { font-style: normal; color: var(--glow); }
.lg404__card .eyebrow.lg404__in { animation-delay: .4s; }
.lg404__card .lead { color: rgb(255 255 255 / .78); max-width: 50ch; margin-inline: auto; animation-delay: .55s; }
.lg404__links { list-style: none; margin: 30px 0 0; padding: 0; width: 100%; max-width: 920px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; text-align: left; animation-delay: .65s; }
.lg404__links a { height: 100%; display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: 18px; background: rgb(255 255 255 / .06); border: 1px solid rgb(255 255 255 / .14); color: #fff; text-decoration: none; transition: transform .4s var(--ease), background .3s, border-color .3s; }
.lg404__links a:hover, .lg404__links a:focus-visible { transform: translateY(-4px); background: rgb(255 255 255 / .12); border-color: rgb(159 227 238 / .6); }
.lg404__links a > svg:first-child { width: 26px; height: 26px; flex: none; color: var(--glow); }
.lg404__links span { display: grid; line-height: 1.3; min-width: 0; flex: 1; }
.lg404__links b { font-size: 16px; }
.lg404__links small { font-size: 13px; color: rgb(255 255 255 / .7); }
.lg404__go { width: 18px; height: 18px; flex: none; color: var(--glow); opacity: .7; transition: transform .35s var(--ease); }
.lg404__links a:hover .lg404__go { transform: translateX(4px); opacity: 1; }
.lg404__cta { margin-top: 32px; display: grid; justify-items: center; gap: 10px; animation-delay: .8s; }
.lg404__cta p { margin: 0; font-size: 14px; color: rgb(255 255 255 / .7); }
.lg404__pin { position: absolute; z-index: -1; color: var(--glow); opacity: .5; animation: lg-float 6s ease-in-out infinite; }
.lg404__pin svg { width: 100%; height: 100%; }
.lg404__pin--1 { width: 34px; height: 34px; left: 9%; top: 16%; }
.lg404__pin--2 { width: 24px; height: 24px; right: 12%; top: 24%; animation-delay: -2s; }
.lg404__pin--3 { width: 28px; height: 28px; right: 22%; bottom: 14%; animation-delay: -4s; }

@keyframes lg-rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes lg-spin { to { transform: rotate(360deg); } }
@keyframes lg-needle { 0%, 100% { transform: rotate(-25deg); } 50% { transform: rotate(35deg); } }
@keyframes lg-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }

@media (max-width: 960px) {
  .lg-layout { grid-template-columns: 1fr; }
  .lg-aside { position: static; }
  .lg-toc { max-height: none; padding: 14px 16px; }
  .lg-toc summary { cursor: pointer; padding: 0; }
  .lg-toc summary svg { display: block; transition: transform .3s var(--ease); }
  .lg-toc[open] summary svg { transform: rotate(45deg); }
  .lg-toc[open] summary { padding-bottom: 10px; }
  .lg404__links { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .lg-title { font-size: 32px; }
  .lg404__card { border-radius: 22px; }
  .lg404__links { grid-template-columns: 1fr; }
  .lg404__cta .cta-ring, .lg404__cta .btn { width: 100%; }
  .lg-final .cta-ring, .lg-final .btn { width: 100%; }
  .lg404__pin { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .lg404__d, .lg404__in, .lg404__orbit, .lg404__d--o svg, .lg404__pin { animation: none !important; }
  .lg404__links a, .lg404__go { transition: none; }
}

/* Mobile : les tableaux deviennent des fiches empilées (plus de défilement de côté) */
@media (max-width: 760px) {
  .lg-table { overflow: visible; border: 0; border-radius: 0; }
  .lg-table table { min-width: 0; display: block; }
  .lg-table thead { display: none; }
  .lg-table tbody, .lg-table tr, .lg-table td { display: block; }
  .lg-table tr { margin-bottom: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
  .lg-table td { padding: 6px 0; border: 0; }
  .lg-table td + td { border-top: 1px dashed var(--line); }
  .lg-table td::before { content: attr(data-label); display: block; margin-bottom: 2px; font: 500 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
  .lg-toc summary { min-height: 44px; }
}