/* ==========================================================================
   Pages Aide, Conditions d'utilisation, Confidentialité (layouts/legal)
   ========================================================================== */

.legal-header {
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid rgb(var(--border));
  background-color: rgb(var(--canvas) / 0.92);
  backdrop-filter: blur(8px);
}

.legal-header-inner {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.legal-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-weight: 600;
  color: rgb(var(--text-primary));
  text-decoration: none;
}

.legal-header-actions { display: flex; align-items: center; gap: 0.5rem; }
.legal-header-actions .auth-theme-toggle { position: static; }

.legal-shell {
  max-width: 72rem;
  margin: 0 auto;
  padding: 2rem 1rem 4rem;
  display: grid;
  gap: 2rem;
}

@media (min-width: 1024px) {
  .legal-shell { grid-template-columns: 15rem minmax(0, 1fr); padding-top: 3rem; }
}

/* Navigation entre les pages + sommaire */
.legal-nav { display: flex; flex-direction: column; gap: 1.25rem; }

@media (min-width: 1024px) {
  .legal-nav { position: sticky; top: 5rem; align-self: start; }
}

.legal-nav-pages { display: flex; flex-wrap: wrap; gap: 0.375rem; }

@media (min-width: 1024px) {
  .legal-nav-pages { flex-direction: column; }
}

.legal-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: rgb(var(--text-secondary));
  text-decoration: none;
}

.legal-nav-link svg { width: 1rem; height: 1rem; }
.legal-nav-link:hover { background-color: rgb(var(--text-primary) / 0.05); color: rgb(var(--text-primary)); }
.legal-nav-link.is-active { background-color: rgb(var(--accent-soft)); color: rgb(var(--accent-hover)); }
.dark .legal-nav-link.is-active { color: rgb(var(--accent)); }

.legal-toc { display: none; }

@media (min-width: 1024px) {
  .legal-toc { display: block; border-top: 1px solid rgb(var(--border)); padding-top: 1rem; }
}

.legal-toc-title {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgb(var(--text-tertiary));
  margin-bottom: 0.5rem;
}

.legal-toc a {
  display: block;
  padding: 0.25rem 0;
  font-size: 0.8125rem;
  color: rgb(var(--text-secondary));
  text-decoration: none;
}

.legal-toc a:hover { color: rgb(var(--accent)); }

/* Contenu */
.legal-doc { min-width: 0; max-width: 46rem; }

.legal-eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgb(var(--accent));
}

.legal-doc h1 {
  margin-top: 0.5rem;
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: rgb(var(--text-primary));
}

.legal-lead {
  margin-top: 0.75rem;
  font-size: 1rem;
  line-height: 1.65;
  color: rgb(var(--text-secondary));
}

.legal-meta {
  margin-top: 1rem;
  font-size: 0.8125rem;
  color: rgb(var(--text-tertiary));
}

.legal-doc section { scroll-margin-top: 5rem; margin-top: 2.5rem; }

.legal-doc h2 {
  font-size: 1.1875rem;
  font-weight: 600;
  color: rgb(var(--text-primary));
  margin-bottom: 0.75rem;
}

.legal-doc h3 {
  font-size: 0.9375rem;
  font-weight: 600;
  color: rgb(var(--text-primary));
  margin: 1.25rem 0 0.5rem;
}

.legal-doc p,
.legal-doc li {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: rgb(var(--text-secondary));
}

.legal-doc p + p { margin-top: 0.75rem; }
.legal-doc ul { margin: 0.5rem 0 0; padding-left: 1.25rem; list-style: disc; }
.legal-doc li + li { margin-top: 0.25rem; }
.legal-doc strong { color: rgb(var(--text-primary)); font-weight: 600; }
.legal-doc a { color: rgb(var(--accent)); text-decoration: underline; text-underline-offset: 2px; }

.legal-callout {
  margin-top: 1.5rem;
  padding: 1rem 1.125rem;
  border-radius: 0.75rem;
  border: 1px solid rgb(var(--border));
  background-color: rgb(var(--surface));
  display: flex;
  gap: 0.75rem;
}

.legal-callout svg { flex-shrink: 0; width: 1.125rem; height: 1.125rem; margin-top: 0.125rem; color: rgb(var(--accent)); }
.legal-callout p { font-size: 0.875rem; }

.legal-table { width: 100%; margin-top: 0.75rem; border-collapse: collapse; font-size: 0.875rem; }
.legal-table th,
.legal-table td { text-align: left; vertical-align: top; padding: 0.625rem 0.75rem; border-bottom: 1px solid rgb(var(--border)); }
.legal-table th { font-weight: 600; color: rgb(var(--text-primary)); background-color: rgb(var(--surface)); }
.legal-table td { color: rgb(var(--text-secondary)); line-height: 1.55; }
.legal-table-wrap { overflow-x: auto; }

/* Aide : FAQ repliable */
.help-topics { display: grid; gap: 0.75rem; margin-top: 2rem; }

@media (min-width: 640px) {
  .help-topics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.help-topic {
  display: flex;
  gap: 0.75rem;
  padding: 1rem;
  border-radius: 0.75rem;
  border: 1px solid rgb(var(--border));
  background-color: rgb(var(--surface));
  text-decoration: none !important;
}

.help-topic:hover { border-color: rgb(var(--accent) / 0.6); }

.help-topic-icon {
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(var(--accent-soft));
  color: rgb(var(--accent));
}

.help-topic-icon svg { width: 1.125rem; height: 1.125rem; }
.help-topic strong { display: block; font-size: 0.9375rem; }
.help-topic span { display: block; font-size: 0.8125rem; color: rgb(var(--text-secondary)); line-height: 1.5; margin-top: 0.125rem; }

.faq { border-top: 1px solid rgb(var(--border)); }
.faq details { border-bottom: 1px solid rgb(var(--border)); }

.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 0.875rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: rgb(var(--text-primary));
}

.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.25rem; font-weight: 400; color: rgb(var(--text-tertiary)); }
.faq details[open] summary::after { content: "–"; }
.faq details > div { padding: 0 0 1rem; }

/* Pied de page */
.legal-footer { border-top: 1px solid rgb(var(--border)); }

.legal-footer-inner {
  max-width: 72rem;
  margin: 0 auto;
  padding: 1rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.75rem;
  color: rgb(var(--text-tertiary));
}

.legal-footer-inner nav { display: flex; gap: 1rem; }
.legal-footer-inner a { color: inherit; }
.legal-footer-inner a:hover { text-decoration: underline; }

/* Liens légaux sous la carte d'authentification */
.auth-legal-links {
  margin-top: 1.25rem;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.75rem;
  color: rgb(var(--text-tertiary));
}

.auth-legal-links a { color: inherit; text-decoration: none; }
.auth-legal-links a:hover { color: rgb(var(--text-secondary)); text-decoration: underline; }

/* Case d'acceptation (inscription, invitation, page d'acceptation) */
.terms-check {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: rgb(var(--text-secondary));
  text-align: left;
}

.terms-check input {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  margin: 0.125rem 0 0;
  accent-color: rgb(var(--accent));
}

.terms-check a { color: rgb(var(--accent)); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }