/* ===================================================
   UrgenceRoute — legal.css
   Pages légales : mentions légales, politique de
   confidentialité, cookies
=================================================== */

.legal-page {
  max-width: 800px;
  margin-inline: auto;
  padding-block: var(--space-8, 3rem) var(--space-10, 5rem);
}

.legal-page h1 {
  font-size: var(--font-size-2xl, 2rem);
  font-weight: 800;
  color: var(--color-secondary, #1d3557);
  margin-bottom: var(--space-3, 0.75rem);
  font-family: var(--font-sans, 'Inter', sans-serif);
}

.legal-update {
  font-size: var(--font-size-sm, 0.875rem);
  color: #6c757d;
  margin-bottom: var(--space-6, 1.5rem);
}

.legal-intro {
  font-size: var(--font-size-base, 1rem);
  color: var(--color-text, #212529);
  background: var(--color-surface, #f8f9fa);
  border: 1px solid var(--color-border, #e9ecef);
  border-radius: var(--radius-lg, 12px);
  padding: var(--space-5, 1.25rem);
  margin-bottom: var(--space-6, 1.5rem);
}

.legal-section {
  margin-top: var(--space-8, 3rem);
}

.legal-section h2 {
  font-size: var(--font-size-xl, 1.4rem);
  font-weight: 700;
  color: var(--color-secondary, #1d3557);
  border-left: 4px solid var(--color-primary, #e63946);
  padding-left: var(--space-3, 0.75rem);
  margin-bottom: var(--space-4, 1rem);
  font-family: var(--font-sans, 'Inter', sans-serif);
}

.legal-section h3 {
  font-size: var(--font-size-base, 1rem);
  font-weight: 700;
  margin-top: var(--space-5, 1.25rem);
  margin-bottom: var(--space-2, 0.5rem);
}

.legal-section p,
.legal-section li {
  font-size: var(--font-size-base, 1rem);
  line-height: 1.7;
  color: var(--color-text, #212529);
}

.legal-section ul,
.legal-section ol {
  padding-left: var(--space-5, 1.25rem);
  margin-block: var(--space-3, 0.75rem);
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 0.5rem);
}

.legal-section a {
  color: var(--color-primary, #e63946);
  text-decoration: underline;
}

.legal-placeholder {
  background: rgba(230, 57, 70, 0.08);
  border-radius: var(--radius-sm, 6px);
  padding: 0.1em 0.35em;
  font-weight: 600;
  color: var(--color-primary, #e63946);
}

/* Tableau des cookies */
.legal-table-wrapper {
  overflow-x: auto;
  margin-block: var(--space-4, 1rem);
  border: 1px solid var(--color-border, #e9ecef);
  border-radius: var(--radius-lg, 12px);
}

.legal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm, 0.875rem);
  min-width: 560px;
}

.legal-table th,
.legal-table td {
  text-align: left;
  padding: var(--space-3, 0.75rem);
  border-bottom: 1px solid var(--color-border, #e9ecef);
  vertical-align: top;
  line-height: 1.5;
}

.legal-table th {
  background: var(--color-surface, #f8f9fa);
  font-weight: 700;
  color: var(--color-secondary, #1d3557);
}

.legal-table tbody tr:last-child td {
  border-bottom: none;
}

.legal-table code {
  background: var(--color-surface, #f8f9fa);
  border: 1px solid var(--color-border, #e9ecef);
  border-radius: var(--radius-sm, 6px);
  padding: 0.1em 0.4em;
  font-size: 0.85em;
  white-space: nowrap;
}

/* Encadrés d'information */
.legal-note {
  border-left: 4px solid var(--color-secondary, #457b9d);
  background: var(--color-surface, #f8f9fa);
  border-radius: 0 var(--radius-lg, 12px) var(--radius-lg, 0);
  padding: var(--space-4, 1rem) var(--space-5, 1.25rem);
  margin-block: var(--space-4, 1rem);
}

.legal-note--warning {
  border-left-color: var(--color-primary, #e63946);
}

/* Mode sombre */
[data-theme="dark"] .legal-page h1,
[data-theme="dark"] .legal-section h2,
[data-theme="dark"] .legal-section h3 {
  color: var(--color-text, #f1faee);
}

[data-theme="dark"] .legal-intro,
[data-theme="dark"] .legal-note,
[data-theme="dark"] .legal-table-wrapper {
  background: var(--color-surface, #1a1d27);
  border-color: var(--color-border, #2a2e3d);
}

[data-theme="dark"] .legal-section p,
[data-theme="dark"] .legal-section li {
  color: var(--color-text, #e9ecef);
}

[data-theme="dark"] .legal-table th {
  background: var(--color-surface, #232734);
}

[data-theme="dark"] .legal-table code {
  background: var(--color-surface, #232734);
}

/* Mobile */
@media (max-width: 768px) {
  .legal-page {
    padding-block: var(--space-6, 1.5rem) var(--space-8, 3rem);
  }

  .legal-page h1 {
    font-size: 1.6rem;
  }

  .legal-section {
    margin-top: var(--space-6, 1.5rem);
  }
}