/* Pages légales — Mentions légales & Politique de confidentialité
   Layout prose long-form, neutre, basé sur les tokens existants v2.0. */

/* Image de fond du bandeau (page-header), comme sur le site complet.
   Posée en CSS et non en style inline → compatible CSP style-src 'self'. */
.page-header::after {
  background-image: url('/assets/img/hero/hero-accueil.png');
}

.legal {
  padding: var(--space-lg) 0 var(--space-xl);
}

.legal__container {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.legal__notice {
  background: rgba(214, 158, 46, 0.08);
  border-left: 4px solid #D69E2E;
  padding: var(--space-sm) var(--space-md);
  border-radius: 8px;
  margin-bottom: var(--space-lg);
  font-size: var(--text-sm);
  line-height: 1.55;
}
.legal__notice strong { color: #8C5B1A; }

.legal__intro {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--color-text-secondary, #334)
}

.legal h2 {
  margin-top: var(--space-lg);
  margin-bottom: var(--space-sm);
  padding-bottom: 0.4rem;
  border-bottom: 1px solid rgba(28, 63, 99, 0.12);
  font-size: 1.5rem;
  color: var(--color-blue);
}

.legal h3 {
  margin-top: var(--space-md);
  margin-bottom: 0.5rem;
  font-size: 1.125rem;
  color: var(--color-blue);
}

.legal p {
  margin: 0 0 1rem;
  line-height: 1.7;
}

.legal ul {
  padding-left: 1.4rem;
  margin: 0 0 1rem;
  line-height: 1.65;
}
.legal ul li { margin-bottom: 0.35rem; }

.legal a {
  color: var(--color-blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.legal a:hover { color: var(--color-green); }

.legal code,
.legal .placeholder {
  background: rgba(28, 63, 99, 0.06);
  padding: 0.1em 0.4em;
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92em;
  color: var(--color-blue);
}
.legal .placeholder { color: #B8770D; background: rgba(214, 158, 46, 0.1); }

.legal table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0 1.5rem;
  font-size: 0.95rem;
}
.legal th,
.legal td {
  border: 1px solid rgba(28, 63, 99, 0.18);
  padding: 0.6rem 0.8rem;
  text-align: left;
  vertical-align: top;
  line-height: 1.5;
}
.legal thead th {
  background: rgba(28, 63, 99, 0.06);
  font-weight: 600;
  color: var(--color-blue);
}

.legal__callout {
  background: rgba(110, 165, 147, 0.08);
  border-left: 4px solid var(--color-green);
  padding: 0.8rem var(--space-sm);
  border-radius: 6px;
  margin: 1rem 0 1.25rem;
  font-size: 0.95rem;
  line-height: 1.6;
}
.legal__callout--info {
  background: rgba(28, 63, 99, 0.05);
  border-left-color: var(--color-blue);
}

.legal__option {
  background: rgba(28, 63, 99, 0.04);
  border: 1px solid rgba(28, 63, 99, 0.1);
  border-radius: 8px;
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-sm);
}
.legal__option strong { color: var(--color-blue); }

.legal__update {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid rgba(28, 63, 99, 0.12);
  font-size: 0.875rem;
  color: var(--color-text-muted, #666);
  text-align: center;
}

@media (max-width: 700px) {
  .legal h2 { font-size: 1.3rem; }
  .legal h3 { font-size: 1.05rem; }
  .legal table { font-size: 0.85rem; }
  .legal th, .legal td { padding: 0.45rem 0.55rem; }
}

/* Opposition à la mesure d'audience (opt-out Matomo) — Article 8.1.
   Réutilise l'encadré .legal__callout--info (fond bleu pâle + filet bleu). */
.matomo-optout { margin: 1rem 0 1.25rem; }
.matomo-optout__row {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  cursor: pointer;
  font-weight: 600;
  color: var(--color-blue);
}
.matomo-optout__checkbox {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 0.15rem;
  accent-color: var(--color-green); /* coche en Vert Menthe ICyam */
  cursor: pointer;
}
.matomo-optout__label { line-height: 1.5; }
.matomo-optout__status {
  margin: 0.55rem 0 0;
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.55;
  color: var(--color-gray-mid, #555);
}
/* Opposition active → on bascule le filet de l'encadré en Vert Menthe. */
.matomo-optout.is-optedout { border-left-color: var(--color-green); }
/* États « Do Not Track » et « stockage indisponible » → ton ambré d'alerte douce. */
.matomo-optout.is-dnt .matomo-optout__status,
.matomo-optout.is-unavailable .matomo-optout__status { color: #8C5B1A; }
.matomo-optout__checkbox:disabled { cursor: not-allowed; opacity: 0.7; }