/* ══════════════════════════════════════════════════════════════════
   GoLynk — mise en forme des pages légales
   Chargée APRÈS golynk-landing.css, dont elle reprend les jetons de
   couleur, la typographie et les rayons. Ces pages ne contiennent que
   du texte et des tableaux : aucune illustration, aucune animation.
   Ce qu'on y lit engage — la seule chose qui compte, c'est que ce soit
   lisible et retrouvable.
══════════════════════════════════════════════════════════════════ */

/* ── Haut de page ────────────────────────────────────────────────────
   Sobre volontairement : pas de maillage coloré ni de dégradé. Une page
   de CGV n'a pas à ressembler à une page de vente. */
.lg-hero {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  padding: 116px 0 40px;
}
.lg-hero .k {
  font-size: 12.5px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--violet); margin-bottom: 12px;
}
.lg-hero h1 {
  font-size: 32px; font-weight: 600; line-height: 1.15;
  letter-spacing: -.035em; color: var(--ink);
}
@media (min-width: 640px) { .lg-hero h1 { font-size: 40px; } }
.lg-hero .sub {
  margin-top: 14px; max-width: 720px;
  font-size: 16.5px; line-height: 1.6; color: var(--ink-soft);
}
.lg-meta {
  margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px 10px;
}
.lg-meta span {
  padding: 5px 12px; border-radius: 999px; background: #fff;
  border: 1px solid var(--border-soft);
  font-size: 12.5px; color: var(--ink-soft);
}
.lg-meta b { color: var(--ink); font-weight: 600; }

/* ── Corps ───────────────────────────────────────────────────────────
   🔴 Largeur bornée à 760px. Une ligne de texte juridique qui court sur
   1200px devient illisible : l'œil perd le début de la ligne suivante.
   C'est la règle des ~75 caractères, et elle vaut surtout ici, où le
   lecteur n'a aucune envie d'être là. */
.lg-body { background: #fff; padding: 44px 0 88px; }
.lg-wrap { max-width: 760px; margin: 0 auto; }

.lg-wrap h2 {
  margin: 44px 0 0; padding-top: 26px; border-top: 1px solid var(--border-soft);
  font-size: 21px; font-weight: 600; letter-spacing: -.02em; color: var(--ink);
  line-height: 1.3; scroll-margin-top: calc(var(--nav-h, 64px) + 20px);
}
.lg-wrap h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.lg-wrap h3 {
  margin: 26px 0 0; font-size: 16.5px; font-weight: 600; color: var(--ink);
  line-height: 1.35; scroll-margin-top: calc(var(--nav-h, 64px) + 20px);
}
.lg-wrap p { margin-top: 13px; font-size: 15.5px; line-height: 1.75; color: var(--ink-soft); }
.lg-wrap b, .lg-wrap strong { color: var(--ink); font-weight: 600; }
.lg-wrap a { color: var(--violet); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }
.lg-wrap ul, .lg-wrap ol { margin: 13px 0 0; padding-left: 22px; }
.lg-wrap li { margin-top: 8px; font-size: 15.5px; line-height: 1.7; color: var(--ink-soft); }
.lg-wrap hr { margin: 30px 0 0; border: 0; border-top: 1px solid var(--border-soft); }
.lg-wrap .subtitle { margin-top: 0; font-size: 16px; color: var(--ink-soft); }

/* ── Encadré d'avertissement ─────────────────────────────────────────
   `.note` était déjà utilisée dans les pages légales sans jamais avoir
   été définie ici : elle se rendait en paragraphe ordinaire, donc un
   avertissement se lisait comme du texte courant. */
.lg-wrap .note {
  margin-top: 20px; padding: 14px 16px; border-radius: 12px;
  border: 1px solid var(--border-soft); border-left: 3px solid var(--violet);
  background: rgba(99, 91, 255, .04);
  font-size: 14.5px; line-height: 1.7; color: var(--ink-soft);
}

/* ── Encadrés et termes définis des textes contractuels ──────────────
   Vocabulaire partagé par les textes rendus depuis un module JS
   (`golynk-contract-text.js`, et `golynk-dpa-texts.js` le jour où la page
   DPA rejoindra cette coquille). Défini ICI parce que ces classes voyagent
   avec le texte : sans règle, un avertissement se rendrait en paragraphe
   ordinaire, ce qu'on a déjà payé une fois avec `.note`. */
.lg-wrap .def-term { font-weight: 700; color: var(--ink); }
.lg-wrap .gl-callout {
  margin: 18px 0; padding: 14px 16px; border-radius: 0 12px 12px 0;
  border-left: 3px solid var(--violet); background: rgba(99, 91, 255, .05);
}
.lg-wrap .gl-warn {
  margin: 18px 0; padding: 14px 16px; border-radius: 0 12px 12px 0;
  border-left: 3px solid #d97706; background: rgba(217, 119, 6, .06);
}
.lg-wrap .gl-callout > p:first-child, .lg-wrap .gl-warn > p:first-child { margin-top: 0; }
.lg-wrap .gl-callout > p:last-child,  .lg-wrap .gl-warn > p:last-child  { margin-bottom: 0; }
.lg-wrap .gl-schedule {
  margin: 20px 0; padding: 18px 20px; border-radius: 14px;
  border: 1px solid var(--border-soft); background: #fbfcfe;
}
.lg-wrap .gl-schedule h3 {
  margin: 0 0 6px; font-size: 12.5px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .07em; color: var(--ink-soft);
}
.lg-wrap .gl-schedule ol { margin-top: 8px; }


/* ── Tableaux ────────────────────────────────────────────────────────
   Enveloppés dans un conteneur qui défile : un tableau à quatre colonnes
   ne rentre pas sur un téléphone, et c'est LUI qui doit défiler, jamais
   la page entière. */
.lg-tbl { margin-top: 18px; overflow-x: auto; border-radius: 12px; box-shadow: 0 0 0 1px var(--border); }
.lg-wrap table { width: 100%; border-collapse: collapse; font-size: 14.5px; background: #fff; }
.lg-wrap thead th {
  position: sticky; top: 0; background: var(--bg); text-align: left;
  padding: 12px 14px; font-size: 11.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--muted); border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.lg-wrap tbody td, .lg-wrap tbody th {
  padding: 12px 14px; border-top: 1px solid #eef2f7;
  line-height: 1.6; color: var(--ink-soft); vertical-align: top; text-align: left;
}
.lg-wrap tbody th { color: var(--ink); font-weight: 600; }
.lg-wrap tbody tr:first-child td, .lg-wrap tbody tr:first-child th { border-top: 0; }

/* ── Paires clé / valeur (mentions légales) ──────────────────────────── */
.lg-wrap .kv { margin-top: 16px; border-radius: 12px; box-shadow: 0 0 0 1px var(--border); overflow: hidden; }
.lg-wrap .kv .row { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid #eef2f7; }
@media (min-width: 620px) { .lg-wrap .kv .row { grid-template-columns: 220px minmax(0, 1fr); } }
.lg-wrap .kv .row:first-child { border-top: 0; }
.lg-wrap .kv .k {
  padding: 12px 14px; background: var(--bg); font-size: 13.5px; font-weight: 600; color: var(--ink);
}
.lg-wrap .kv .v { padding: 12px 14px; font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); }

/* ── Encadré d'avertissement ─────────────────────────────────────────── */
.lg-note {
  margin-top: 20px; padding: 16px 18px; border-radius: 12px;
  background: var(--bg); border: 1px solid var(--border-soft);
  font-size: 14.5px; line-height: 1.7; color: var(--ink-soft);
}
.lg-note b { color: var(--ink); }

/* ── Pied de page légal ──────────────────────────────────────────────── */

/* Clause de prévalence : elle sépare le texte juridique du pied de page, et
   se lit comme une note — discrète, mais avant le reste, pas après. */
.lg-prev {
  margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--border-soft);
  font-size: 13.5px; line-height: 1.65; color: var(--ink-soft);
}
.lg-prev + .lg-end { margin-top: 22px; }

.lg-end {
  margin-top: 48px; padding: 26px 28px; border-radius: var(--radius);
  background: var(--bg); border: 1px solid var(--border-soft);
}
.lg-end h3 { margin: 0; font-size: 17px; font-weight: 600; color: var(--ink); }
.lg-end p { margin-top: 9px; font-size: 14.5px; line-height: 1.7; color: var(--ink-soft); }
.lg-end .btn { margin-top: 16px; }

/* ── Sommaire des textes légaux ──────────────────────────────────────
   On ne quitte jamais une page juridique sans savoir lesquelles existent.
   Groupé par famille : une rangée de onze pastilles de tailles inégales
   ne se lit pas — rien n'y indique la hiérarchie, et l'œil doit parcourir
   chaque libellé. Trois colonnes titrées se balaient d'un regard. */
.lg-nav { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--border); }
.lg-nav > h3 {
  margin: 0 0 18px; font-size: 11.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--muted);
}
.lg-cols { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 620px) { .lg-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; } }
.lg-col h4 {
  margin: 0 0 10px; font-size: 13.5px; font-weight: 600; color: var(--ink); letter-spacing: -.01em;
}
.lg-col ul { margin: 0; padding: 0; list-style: none; }
.lg-col li + li { margin-top: 7px; }
.lg-col a {
  font-size: 14px; line-height: 1.45; color: var(--ink-soft);
  text-decoration: none; border-bottom: 1px solid transparent; transition: color .15s, border-color .15s;
}
.lg-col a:hover { color: var(--ink); border-bottom-color: var(--border); }
/* La page courante se signale par le texte, pas par une pastille sombre :
   c'est un repère, pas un bouton sur lequel il faudrait cliquer. */
.lg-col a[aria-current] { color: var(--violet); font-weight: 600; }