/* ============================================================================
   Kopo · Legal pages (Privacy / Terms)
   Réutilise la nav et le footer de shared.css. Le contenu est posé sur un fond
   Cumulus avec une bande dégradée en tête de document, dans l'esprit de la DA
   "Aube" du nouveau design.
   ============================================================================ */

.legal-hero {
  position: relative;
  padding: 9rem var(--container-px) 4rem;
  background:
    radial-gradient(ellipse at top right, rgba(178, 219, 255, 0.5) 0%, transparent 60%),
    radial-gradient(ellipse at bottom left, rgba(249, 236, 226, 0.6) 0%, transparent 55%),
    var(--cumulus);
  border-bottom: 1px solid var(--stratus-soft);
  overflow: hidden;
}
.legal-hero::before {
  content: '';
  position: absolute;
  width: 360px; height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(87, 184, 255, 0.18) 0%, transparent 70%);
  filter: blur(40px);
  top: -10%; left: 30%;
  pointer-events: none;
  animation: legalBlob 18s ease-in-out infinite;
}
@keyframes legalBlob {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(40px, 30px); }
}
.legal-hero-inner {
  position: relative; z-index: 1;
  max-width: 900px; margin: 0 auto;
}
.legal-back {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.85rem; font-weight: 500;
  color: var(--nimbus-soft);
  margin-bottom: 2rem;
  transition: color 200ms;
}
.legal-back:hover { color: var(--cirrus); }
.legal-hero h1 {
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  font-weight: 700; letter-spacing: -0.025em;
  line-height: 1.05;
  text-wrap: balance;
  margin-bottom: 1.5rem;
}
.legal-meta {
  display: flex; flex-wrap: wrap; gap: 1.5rem;
  padding: 1rem 0;
  border-top: 1px solid var(--stratus-soft);
  border-bottom: 1px solid var(--stratus-soft);
  font-size: 0.85rem;
  color: var(--nimbus-soft);
}
.legal-meta strong { font-weight: 600; }

/* === Corps du document ==================================================== */
.legal-body {
  max-width: calc(900px + 2 * var(--container-px));
  margin: 0 auto;
  padding: 5rem var(--container-px) 7rem;
}
.legal-body h2 {
  font-size: clamp(1.4rem, 2.3vw, 1.85rem);
  font-weight: 700; letter-spacing: -0.018em;
  line-height: 1.2;
  margin-top: 3.5rem;
  margin-bottom: 1.25rem;
  padding-top: 2rem;
  border-top: 1px solid var(--stratus-soft);
  color: var(--nimbus);
}
.legal-body h2:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.legal-body h3 {
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  margin-top: 2rem;
  margin-bottom: 0.6rem;
  color: var(--nimbus);
  display: flex; align-items: center; gap: 0.6rem;
}
.legal-body h3::before {
  content: ''; flex-shrink: 0;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--cirrus);
}
.legal-body h4 {
  font-size: 0.95rem; font-weight: 600;
  letter-spacing: 0.01em;
  margin-top: 1.5rem; margin-bottom: 0.5rem;
  color: var(--nimbus-soft);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.78rem;
}

.legal-body p {
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--nimbus-soft);
  margin-bottom: 1rem;
  max-width: 70ch;
}
.legal-body p strong { color: var(--nimbus); font-weight: 600; }
.legal-body a {
  color: var(--vesper);
  font-weight: 500;
  border-bottom: 1px solid rgba(35, 37, 93, 0.25);
  transition: color 200ms, border-color 200ms;
}
.legal-body a:hover { color: var(--cirrus); border-bottom-color: var(--cirrus); }

.legal-body ul, .legal-body ol {
  margin: 0.75rem 0 1.25rem 0;
  padding-left: 1.5rem;
  font-size: 0.98rem;
  line-height: 1.65;
  color: var(--nimbus-soft);
  list-style: none;
}
.legal-body ul li, .legal-body ol li {
  position: relative;
  padding-left: 1rem;
  margin-bottom: 0.45rem;
}
.legal-body ul li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.65em;
  width: 8px; height: 1px;
  background: var(--cirrus);
}
.legal-body ol { counter-reset: legal-ol; padding-left: 0.75rem; }
.legal-body ol li { counter-increment: legal-ol; padding-left: 2rem; }
.legal-body ol li::before {
  content: counter(legal-ol) '.';
  position: absolute; left: 0; top: 0;
  font-weight: 600; color: var(--cirrus);
  font-variant-numeric: tabular-nums;
}
.legal-body li strong { color: var(--nimbus); font-weight: 600; }

.legal-body code {
  font-family: 'Menlo', 'Monaco', 'Consolas', monospace;
  font-size: 0.85em;
  padding: 0.15rem 0.45rem;
  background: var(--stratus-soft);
  color: var(--vesper);
  border-radius: 4px;
}

/* === Tables =============================================================== */
.legal-body table {
  width: 100%;
  margin: 1.5rem 0 2rem;
  border-collapse: collapse;
  border: 1px solid var(--stratus-soft);
  border-radius: 12px;
  overflow: hidden;
  font-size: 0.92rem;
}
.legal-body thead { background: linear-gradient(180deg, #f4f8fc 0%, var(--cumulus) 100%); }
.legal-body th {
  text-align: left;
  padding: 0.85rem 1.1rem;
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nimbus-soft);
  border-bottom: 1px solid var(--stratus-soft);
}
.legal-body td {
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid var(--stratus-soft);
  color: var(--nimbus-soft);
  vertical-align: top;
}
.legal-body tr:last-child td { border-bottom: none; }
.legal-body tbody tr:hover { background: rgba(87, 184, 255, 0.04); }

/* === Bloc cité (callout) · utilisable manuellement si besoin ============== */
.legal-callout {
  margin: 1.5rem 0;
  padding: 1.25rem 1.5rem;
  background: linear-gradient(160deg, rgba(178, 219, 255, 0.18) 0%, rgba(249, 236, 226, 0.4) 100%);
  border-radius: 8px;
  font-size: 0.95rem;
  color: var(--nimbus);
}

/* === Signature de fin ===================================================== */
.legal-signature {
  margin-top: 4rem;
  padding: 2.5rem;
  text-align: center;
  background: linear-gradient(160deg, #f4f8fc 0%, var(--cumulus) 100%);
  border: 1px solid var(--stratus-soft);
  border-radius: 16px;
}
.legal-signature p {
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
  color: var(--nimbus-soft);
  max-width: none;
}
.legal-signature p:first-child { font-weight: 700; color: var(--nimbus); font-size: 1rem; }

/* === Responsive =========================================================== */
@media (max-width: 1024px) {
  .legal-hero { padding: 8rem var(--container-px) 3.5rem; }
  .legal-body { padding: 4rem var(--container-px) 6rem; }
}

@media (max-width: 800px) {
  .legal-hero { padding: 6.5rem var(--container-px) 2.75rem; }
  .legal-hero::before { width: 240px; height: 240px; opacity: 0.6; }
  .legal-back { margin-bottom: 1.5rem; }
  .legal-meta { gap: 1rem; flex-direction: column; padding: 0.85rem 0; }
  .legal-body { padding: 3rem var(--container-px) 4.5rem; }
  .legal-body h2 { margin-top: 2.25rem; padding-top: 1.5rem; font-size: 1.4rem; }
  .legal-body h3 { margin-top: 1.5rem; font-size: 1.05rem; }
  .legal-body p, .legal-body ul, .legal-body ol { font-size: 0.94rem; }
  .legal-callout { padding: 1rem 1.15rem; font-size: 0.92rem; }

  /* Tables : on garde la grille mais on fluidifie le scroll horizontal */
  .legal-body table { font-size: 0.82rem; display: block; overflow-x: auto; }
  .legal-body th, .legal-body td { padding: 0.6rem 0.75rem; }

  .legal-signature { margin-top: 2.5rem; padding: 1.75rem 1.25rem; }
}

@media (max-width: 480px) {
  .legal-hero h1 { font-size: 1.85rem; }
  .legal-body { padding: 2.5rem var(--container-px) 4rem; }
  .legal-body ul, .legal-body ol { padding-left: 0.5rem; }
  .legal-body ul li, .legal-body ol li { padding-left: 0.85rem; }
  .legal-body ol li { padding-left: 1.5rem; }
}