/* ============================================
   SIGLE · Pages legales (mentions, confidentialite, CGU, cookies)
   S'appuie sur css/style.css (tokens, nav, footer, boutons).
   ============================================ */

.legal-draft {
  background: #fffbeb;
  border: 1px solid #fde68a;
  color: #92400e;
  border-radius: 14px;
  padding: 14px 18px;
  font-size: .88rem;
  line-height: 1.55;
  max-width: 820px;
  margin: 0 auto 40px;
}
.legal-draft strong { color: #78350f; }

.legal-wrap {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 20px 100px;
}
.legal-wrap .legal-updated {
  color: var(--muted);
  font-size: .85rem;
  margin-bottom: 40px;
}
.legal-wrap h2 {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -.01em;
  margin: 44px 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.legal-wrap h3 {
  font-size: 1.02rem;
  font-weight: 700;
  margin: 26px 0 8px;
}
.legal-wrap p,
.legal-wrap li {
  color: var(--text-secondary);
  font-size: .95rem;
  line-height: 1.7;
  max-width: 68ch;
}
.legal-wrap p { margin: 0 0 14px; }
.legal-wrap ul { margin: 0 0 16px; padding-left: 22px; }
.legal-wrap li { margin-bottom: 7px; }
.legal-wrap strong { color: var(--text); font-weight: 600; }
.legal-wrap a { color: var(--accent); font-weight: 500; }
.legal-wrap a:hover { text-decoration: underline; }
.legal-fill {
  background: var(--accent-light, #ede9fe);
  color: var(--accent);
  padding: 1px 7px;
  border-radius: 5px;
  font-size: .86em;
  font-weight: 600;
}

.legal-table {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0 24px;
  font-size: .9rem;
}
.legal-table th,
.legal-table td {
  text-align: left;
  padding: 11px 14px;
  border: 1px solid var(--border);
  vertical-align: top;
  color: var(--text-secondary);
  line-height: 1.55;
}
.legal-table th {
  background: var(--bg-soft, #f5f5f7);
  color: var(--text);
  font-weight: 700;
  font-size: .84rem;
}
@media (max-width: 640px) {
  .legal-table, .legal-table tbody, .legal-table tr, .legal-table td { display: block; width: 100%; }
  .legal-table thead { display: none; }
  .legal-table td { border: none; border-bottom: 1px solid var(--border); padding: 6px 0; }
  .legal-table td::before { content: attr(data-label); display: block; font-weight: 700; color: var(--text); font-size: .8rem; margin-bottom: 2px; }
  .legal-table tr { padding: 12px 0; border-bottom: 2px solid var(--border); }
}