/* AeroLink — legal pages (carriage.html, privacy.html, terms.html) in the
 * world "Le Colis". The page is white: a pale draft banner, the three
 * documents as pills (the current one navy), a short sky band carrying the
 * document's name with one kraft parcel cropped by its edge, then on a
 * computer a sticky "Sommaire" card on the left and the text on the right at
 * a readable measure (68 characters, 16 px Manrope); on a phone the Sommaire
 * is a collapsible card above the text, closed until opened (legal.js keeps the
 * choice for the session). The placeholders stay highlighted with
 * the pale mark; the points for the lawyer sit on a navy well at the foot.
 * No amber on these pages. Shared rules live in site.css. */

/* ---------- The top: the draft banner, then the documents ---------- */
.legal-top { padding-block: clamp(16px, 2vw, 24px) 0; }
.legal-top > .wrap { display: grid; gap: clamp(14px, 1.6vw, 20px); }
.legal-draft { display: flex; align-items: center; gap: 16px; padding: 14px 22px; border-radius: var(--r-card); background: var(--sky-pale); color: var(--ink); }
html[data-theme="dark"] .legal-draft { background: var(--panel); border: 1px solid var(--rule); }
.legal-draft .stamp { flex: none; font-size: 13px; padding: 5px 12px; }
.legal-draft p { font-size: 15px; line-height: 1.45; color: var(--ink); }
.legal-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.legal-nav .cap { color: var(--ink); margin-right: 6px; }
.doc-pill { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 20px; border: 1px solid var(--rule-strong); border-radius: 999px; background: var(--panel); color: var(--ink); font: 600 15px/1.2 var(--sans); text-decoration: none; white-space: nowrap; transition: background var(--t-hover), border-color var(--t-hover), color var(--t-hover), transform var(--t-hover) var(--ease); }
.doc-pill:hover { background: var(--sky-pale); border-color: var(--ink); }
.doc-pill:active { transform: translateY(1px); }
.doc-pill[aria-current] { background: var(--navy); border-color: var(--navy); color: #fff; }
.doc-pill[aria-current]:hover { background: var(--navy-2); border-color: var(--navy-2); }
html[data-theme="dark"] .doc-pill[aria-current] { background: var(--sky); border-color: var(--sky); color: var(--navy); }
html[data-theme="dark"] .doc-pill[aria-current]:hover { background: var(--sky-deep); border-color: var(--sky-deep); }

/* ---------- The band: the document's name on sky, one parcel cut by the edge ---------- */
.legal-band { margin-top: clamp(16px, 2vw, 24px); min-height: clamp(200px, 12vw + 110px, 280px); display: grid; align-items: center; }
.legal-band > .wrap { width: 100%; padding-block: clamp(24px, 3vw, 48px); }
.legal-title { font-size: clamp(34px, 1.4rem + 2.4vw, 56px); line-height: 1.08; max-width: 12ch; color: var(--navy); }
.legal-band .obj { right: -60px; bottom: -150px; }  /* the inline --w sizes it on a computer; smaller screens set the width below */

/* ---------- The page: the Sommaire card beside the text ---------- */
.legal-page { padding-block: clamp(28px, 4vw, 48px) clamp(48px, 6vw, 80px); }
.legal-grid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 32px clamp(40px, 5vw, 64px); align-items: start; }
.legal-side { position: sticky; top: calc(var(--nav-h) + 24px); }
.toc-box { padding: 22px 24px 14px; }
.toc-h { margin-bottom: 10px; }
.toc-h .cap, .legal-toc-m summary .cap { font: 700 20px/1.2 var(--display); letter-spacing: -0.01em; color: var(--ink); }
.toc ol { list-style: none; margin: 0; padding: 0; }
.toc a { position: relative; display: flex; gap: 6px; align-items: baseline; min-height: 44px; padding: 12px 0 12px 12px; border-left: 3px solid transparent; text-decoration: none; font: 600 15px/1.35 var(--sans); color: var(--ink-2); transition: color var(--t-hover), border-color var(--t-hover); }
.toc a span { flex: none; font-variant-numeric: tabular-nums; }
.toc a span::after { content: "."; }
.toc a:hover { color: var(--ink); }
.toc a[aria-current="true"] { color: var(--ink); border-left-color: var(--sky-deep); }
.legal-toc-m { display: none; }

/* Entrances: the chrome arrives in reading order */
.legal-nav.enter { animation-delay: 60ms; }
.toc-box.enter, .legal-toc-m.enter { animation-delay: 120ms; }
.legal-text.enter { animation-delay: 180ms; }

/* ---------- The document: 68 ch, 16 px, sections 56 px apart ---------- */
html[lang="en"] .legal[data-lang-block="fr"], html:not([lang="en"]) .legal[data-lang-block="en"] { display: none; }
.legal-text .panel-h { display: none; }  /* the document's name is the H1 on the band; the script still reads .doc-name */
.legal-body { max-width: 68ch; }
.legal-body > p, .legal-body > ul { font-size: 16px; line-height: 1.6; color: var(--ink); }
.legal-lede { font-size: 17px; line-height: 1.55; color: var(--ink-2); }
.legal-body > h2 { font: 700 clamp(22px, 1rem + .9vw, 28px)/1.2 var(--display); letter-spacing: -0.01em; margin-top: 56px; scroll-margin-top: calc(var(--nav-h) + 24px); text-wrap: balance; font-variant-numeric: tabular-nums; }
.legal-body > h2 + * { margin-top: 14px; }
.legal-body > p + p, .legal-body > ul + p, .legal-body > p + ul { margin-top: 12px; }
.legal-body > ul { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.legal a { color: var(--link); text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color var(--t-hover), text-decoration-thickness var(--t-hover); }
.legal a:hover { color: var(--link-hover); text-decoration-thickness: 2px; }
mark.ph { background: var(--mark-ph); color: var(--ink); padding: 1px 4px; border-radius: 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* The points for the lawyer: a navy well at the foot of the document */
.legal .lawyer-notes { max-width: 68ch; margin-top: 56px; padding: 22px 26px 24px; border-radius: var(--r-card); background: var(--navy); color: var(--navy-text); }
html[data-theme="dark"] .legal .lawyer-notes { background: var(--navy-2); border: 1px solid var(--rule); }
.lawyer-notes .pit-h h2 { font: 700 18px/1.3 var(--display); letter-spacing: -0.01em; margin: 0 0 12px; color: #fff; }
.lawyer-notes ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lawyer-notes li { position: relative; padding-left: 20px; font-size: 15px; line-height: 1.5; color: var(--navy-text); }
.lawyer-notes li::before { content: ""; position: absolute; left: 0; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--sky); }

/* ---------- Tablet: one column, the Sommaire as a collapsible card above the text ---------- */
@media (max-width: 1023px) {
  .legal-grid { grid-template-columns: 1fr; gap: 24px; }
  .legal-side { display: none; }
  .legal-toc-m { display: block; padding: 0 20px; }
  .legal-toc-m summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; padding: 16px 0; cursor: pointer; list-style: none; }
  .legal-toc-m summary::-webkit-details-marker { display: none; }
  .legal-toc-m summary::after { content: ""; width: 10px; height: 10px; border-right: 2.5px solid var(--ink); border-bottom: 2.5px solid var(--ink); transform: rotate(45deg); margin: 0 6px 5px 0; transition: transform var(--t-ctl) var(--ease); }
  .legal-toc-m[open] summary::after { transform: rotate(225deg); margin: 5px 6px 0 0; }
  .legal-toc-m[open] summary { border-bottom: 1px solid var(--rule); }
  .legal-toc-m .toc ol { padding: 6px 0 8px; }
  .legal-toc-m .toc a { min-height: 44px; padding: 12px 0; border-left: 0; border-bottom: 1px solid var(--rule); font-size: 16px; }
  .legal-toc-m .toc li:last-child a { border-bottom: 0; }
  .legal-toc-m .toc a[aria-current="true"] { color: var(--ink); }
  .legal-toc-m .toc a[aria-current="true"] span { color: var(--link); }   /* link blue on white: 7:1; sky-deep stays for dark */
  html[data-theme="dark"] .legal-toc-m .toc a[aria-current="true"] span { color: var(--sky-deep); }
  .legal-text.enter { animation-delay: 120ms; }
  .legal-band .obj { width: 340px; right: -56px; bottom: -120px; }
}

/* ---------- Phone ---------- */
@media (max-width: 768px) {
  .legal-top { padding-top: 12px; }
  .legal-top > .wrap { gap: 14px; }
  .legal-draft { flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px; }
  .legal-draft p { font-size: 14px; }
  .legal-nav { gap: 8px; }
  .legal-nav .cap { flex: 0 0 100%; margin: 0; }
  .doc-pill { padding: 0 16px; font-size: 14px; }
  .legal-band { margin-top: 14px; min-height: 200px; align-items: start; }
  .legal-band > .wrap { padding-block: 22px 24px; }
  .legal-title { font-size: clamp(30px, 1rem + 5vw, 36px); line-height: 1.12; max-width: 9ch; }
  .legal-band .obj { width: 200px; right: -40px; bottom: -64px; }
  .legal-page { padding-block: 16px 40px; }
  .legal-body > h2 { font-size: 22px; margin-top: 40px; }
  .legal .lawyer-notes { margin-top: 40px; padding: 18px 18px 20px; }
}