/* ============================================================
   Legal pages — politique de confidentialité, mentions légales.
   All selectors prefixed `.legal` or `.legal-*` — zero global collision.
   ============================================================ */

.legal {
	--legal-max: 1100px;
	--legal-content: 760px;
	--legal-text: #0d1321;
	--legal-text-muted: #5b6574;
	--legal-text-soft: #8a93a3;
	--legal-surface: #ffffff;
	--legal-bg-subtle: #f7f8fb;
	--legal-bg-tint: #eef3ff;
	--legal-border: #e6e8ed;
	--legal-border-strong: #d6dae3;
	--legal-brand: #1552e3;
	--legal-brand-hover: #0e3fb2;
	--legal-brand-soft: #eef3ff;
	--legal-radius-sm: 10px;
	--legal-radius-md: 14px;
	--legal-shadow-1: 0 1px 2px rgba(13, 19, 33, 0.04);
	color: var(--legal-text);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.legal * { box-sizing: border-box; }

/* ============================================================
   1. HERO
   ============================================================ */

.legal-hero {
	background: linear-gradient(180deg, #fbfcff 0%, #ffffff 100%);
	padding: 56px 24px 40px;
	border-bottom: 1px solid var(--legal-border);
}
.legal-hero__inner {
	max-width: var(--legal-content);
	margin: 0 auto;
}
.legal-hero__back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--legal-text-muted);
	text-decoration: none;
	margin-bottom: 18px;
	transition: color 150ms ease;
}
.legal-hero__back:hover { color: var(--legal-brand); }
.legal-hero__title {
	font-size: clamp(1.875rem, 3.6vw, 2.625rem);
	font-weight: 700;
	letter-spacing: -0.025em;
	line-height: 1.18;
	margin: 0 0 14px;
	color: var(--legal-text);
}
.legal-hero__meta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 0.875rem;
	color: var(--legal-text-soft);
	margin: 0;
	background: var(--legal-bg-tint);
	padding: 6px 14px;
	border-radius: 999px;
}
.legal-hero__meta strong {
	color: var(--legal-text);
	font-weight: 600;
}
.legal-hero__meta time { color: inherit; }

/* ============================================================
   2. BODY (2-column with sticky sidebar)
   ============================================================ */

.legal-body {
	padding: 56px 24px 80px;
}
.legal-body__inner {
	max-width: var(--legal-max);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: 56px;
	align-items: start;
}

/* Single-column when no TOC or on small screens */
.legal-body__inner:not(:has(.legal-sidebar)) {
	grid-template-columns: 1fr;
	max-width: var(--legal-content);
}

@media (max-width: 900px) {
	.legal-body__inner { grid-template-columns: 1fr; gap: 36px; }
}

/* ============================================================
   3. SIDEBAR (sticky TOC)
   ============================================================ */

.legal-sidebar { position: relative; }
.legal-sidebar__sticky {
	position: sticky;
	top: 24px;
	background: var(--legal-bg-subtle);
	border: 1px solid var(--legal-border);
	border-radius: var(--legal-radius-md);
	padding: 22px 22px 18px;
}
.legal-sidebar__title {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--legal-text-soft);
	margin: 0 0 14px;
}
.legal-sidebar__list {
	list-style: none;
	counter-reset: legal-toc;
	margin: 0;
	padding: 0;
	border-left: 1px solid var(--legal-border);
}
.legal-sidebar__list li {
	counter-increment: legal-toc;
	margin: 0;
}
.legal-sidebar__list a {
	display: flex;
	gap: 10px;
	padding: 8px 0 8px 16px;
	font-size: 0.875rem;
	color: var(--legal-text-muted);
	text-decoration: none;
	line-height: 1.45;
	border-left: 2px solid transparent;
	margin-left: -1px;
	transition: color 150ms ease, border-color 150ms ease;
}
.legal-sidebar__list a::before {
	content: counter(legal-toc, decimal-leading-zero);
	color: var(--legal-text-soft);
	font-variant-numeric: tabular-nums;
	font-size: 0.75rem;
	font-weight: 600;
	flex: 0 0 auto;
	padding-top: 1px;
}
.legal-sidebar__list a:hover {
	color: var(--legal-brand);
	border-left-color: var(--legal-brand);
}

.legal-sidebar__contact {
	margin-top: 20px;
	padding-top: 18px;
	border-top: 1px solid var(--legal-border);
}
.legal-sidebar__contact-label {
	font-size: 0.8125rem;
	color: var(--legal-text-muted);
	margin: 0 0 8px;
	line-height: 1.5;
}
.legal-sidebar__contact-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--legal-brand);
	text-decoration: none;
}
.legal-sidebar__contact-link:hover {
	color: var(--legal-brand-hover);
	text-decoration: underline;
}

@media (max-width: 900px) {
	.legal-sidebar__sticky {
		position: static;
		max-height: 320px;
		overflow-y: auto;
	}
}

/* ============================================================
   4. CONTENT (Gutenberg the_content output)
   ============================================================ */

.legal-content {
	max-width: var(--legal-content);
	font-size: 1rem;
	color: var(--legal-text);
}

/* Smooth anchor scroll with offset for sticky header. */
.legal-content h2 { scroll-margin-top: 32px; }
.legal-content h3 { scroll-margin-top: 32px; }

/* Reset Gutenberg-injected inline alignments / margins on h1/h2 that came
   from the pasted HTML. We control hierarchy here. */
.legal-content > h1 { display: none; } /* defensive, the template strips it too */
.legal-content h2 {
	font-size: clamp(1.25rem, 1.8vw, 1.5rem);
	font-weight: 700;
	letter-spacing: -0.015em;
	line-height: 1.3;
	color: var(--legal-text);
	margin: 48px 0 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--legal-border);
	text-align: left !important;
}
.legal-content > h2:first-child,
.legal-content > h2:first-of-type { margin-top: 0; }
.legal-content h3 {
	font-size: 1.0625rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--legal-text);
	margin: 28px 0 8px;
}
.legal-content p,
.legal-content li {
	color: var(--legal-text);
	line-height: 1.7;
}
.legal-content p { margin: 0 0 16px; }
.legal-content strong { font-weight: 600; }
.legal-content a {
	color: var(--legal-brand);
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	transition: color 150ms ease;
}
.legal-content a:hover { color: var(--legal-brand-hover); }
.legal-content ul,
.legal-content ol {
	margin: 0 0 18px;
	padding-left: 22px;
}
.legal-content li { margin-bottom: 6px; }
.legal-content blockquote {
	border-left: 3px solid var(--legal-brand);
	background: var(--legal-bg-subtle);
	padding: 14px 18px;
	margin: 24px 0;
	border-radius: 0 var(--legal-radius-sm) var(--legal-radius-sm) 0;
	color: var(--legal-text-muted);
}
.legal-content blockquote p:last-child { margin-bottom: 0; }
.legal-content table {
	width: 100%;
	border-collapse: collapse;
	margin: 24px 0;
	font-size: 0.9375rem;
	border: 1px solid var(--legal-border);
	border-radius: var(--legal-radius-sm);
	overflow: hidden;
}
.legal-content th,
.legal-content td {
	padding: 12px 14px;
	border-bottom: 1px solid var(--legal-border);
	text-align: left;
	vertical-align: top;
}
.legal-content th {
	background: var(--legal-bg-subtle);
	font-weight: 600;
}
.legal-content tr:last-child th,
.legal-content tr:last-child td { border-bottom: 0; }
.legal-content hr {
	border: 0;
	border-top: 1px solid var(--legal-border);
	margin: 36px 0;
}

/* Override Gutenberg "has-text-align-center" on wp-block-heading so legal h1
   doesn't render centered if Gutenberg saved it that way. The h1 is also
   stripped by the template, but if any future content still has it we keep
   styling consistent. */
.legal-content .has-text-align-center { text-align: left !important; }
.legal-content .wp-block-heading { margin-top: revert; }

/* ============================================================
   5. RESPONSIVE
   ============================================================ */

@media (max-width: 600px) {
	.legal-hero { padding: 40px 20px 32px; }
	.legal-body { padding: 40px 20px 64px; }
}