/*
 * Legal pages — premium reading layout (CGV, CGU, mentions légales,
 * confidentialité, sous-traitants). Loaded by vitrine/legal/_legal_base.html.twig.
 *
 * White-label safe: every color comes from the semantic theme tokens
 * (tokens/semantic.css, derived per-site from --brand-primary). No hardcoded
 * brand color, no extra CSS framework — Bootstrap 5.3 + design tokens only.
 * All rules are scoped under .legal-page.
 */

.legal-page {
    background: var(--color-bg-body);
    min-height: 60vh;
    padding-block: clamp(2.5rem, 6vw, 5rem);
}

.legal-page__container {
    max-width: 56rem;
    margin-inline: auto;
    padding-inline: clamp(1rem, 4vw, 2rem);
}

/* ---- Header ---- */

.legal-page__header {
    margin-bottom: clamp(2rem, 5vw, 3rem);
    padding-bottom: 1.75rem;
    border-bottom: 1px solid var(--color-border);
}

.legal-page__title {
    margin: 0 0 1rem;
    font-size: clamp(1.875rem, 1.2rem + 3vw, 3rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--color-text-main);
}

.legal-page__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text-muted);
}

.legal-page__meta i {
    font-size: 1rem;
    color: var(--color-text-link);
}

.legal-page__meta time {
    font-weight: 600;
    color: var(--color-text-main);
}

/* ---- Prose / legal body ---- */

.legal-prose {
    color: var(--color-text-main);
    font-size: 1rem;
    line-height: 1.75;
}

.legal-prose section {
    margin-bottom: 2.5rem;
}

.legal-prose h2 {
    margin: 2.5rem 0 1rem;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.25;
    color: var(--color-text-main);
}

.legal-prose section:first-child h2,
.legal-prose > h2:first-child {
    margin-top: 0;
}

.legal-prose h3 {
    margin: 1.75rem 0 0.75rem;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--color-text-main);
}

.legal-prose h4 {
    margin: 1.25rem 0 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-main);
}

.legal-prose p,
.legal-prose ul,
.legal-prose ol {
    margin: 0 0 1rem;
}

.legal-prose ul,
.legal-prose ol {
    padding-left: 1.35rem;
}

.legal-prose li {
    margin-bottom: 0.4rem;
}

.legal-prose li::marker {
    color: var(--color-text-muted);
}

.legal-prose strong {
    font-weight: 700;
    color: var(--color-text-main);
}

.legal-prose a {
    color: var(--color-text-link);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
    text-decoration-color: color-mix(in oklab, var(--color-text-link) 45%, transparent);
    transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.legal-prose a:hover {
    color: var(--color-text-link-hover);
    text-decoration-color: currentColor;
}

.legal-prose code {
    padding: 0.1rem 0.4rem;
    font-size: 0.85em;
    background: var(--color-surface-muted);
    border-radius: 0.375rem;
}

.legal-prose hr {
    height: 0;
    margin: 3rem 0;
    border: 0;
    border-top: 1px solid var(--color-border);
    opacity: 1;
}

/* Lead paragraph (intro) — slightly larger, muted, premium intro tone */
.legal-prose .lead,
.legal-prose > p:first-child {
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--color-text-muted);
}

/* ---- Callout / info box ---- */

.legal-callout {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin: 2rem 0;
    padding: 1.1rem 1.25rem;
    font-size: 0.925rem;
    font-weight: 500;
    line-height: 1.6;
    color: var(--color-text-main);
    background: var(--color-primary-100);
    border: 1px solid var(--color-border-selected, var(--color-border));
    border-radius: var(--bs-border-radius, 1rem);
}

.legal-callout i {
    flex-shrink: 0;
    margin-top: 0.15rem;
    font-size: 1.25rem;
    color: var(--color-text-link);
}

.legal-callout p {
    margin: 0;
}

/* ---- Tables ---- */

.legal-prose .table-responsive {
    margin: 2rem 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 1.25rem;
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.legal-prose table {
    width: 100%;
    margin: 2rem 0;
    border-collapse: collapse;
    font-size: 0.9rem;
    background: var(--color-surface);
}

/* When wrapped, the wrapper carries the border/radius */
.legal-prose .table-responsive table {
    margin: 0;
}

.legal-prose :where(table:not(.table-responsive table)) {
    border: 1px solid var(--color-border);
    border-radius: var(--bs-border-radius, 1rem);
    overflow: hidden;
}

.legal-prose thead th {
    padding: 0.85rem 1rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    background: var(--color-surface-muted);
    border-bottom: 1px solid var(--color-border);
    text-align: left;
    vertical-align: bottom;
}

.legal-prose tbody th,
.legal-prose tbody td {
    padding: 0.85rem 1rem;
    border-top: 1px solid var(--color-border);
    vertical-align: top;
}

.legal-prose tbody th[scope="row"] {
    font-weight: 700;
    color: var(--color-text-main);
    white-space: nowrap;
}

.legal-prose tbody tr:hover {
    background: var(--color-surface-muted);
}

/* ---- Status badge + note (sub-processors table) ---- */

.legal-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.55rem;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
    border: 1px solid transparent;
    border-radius: 0.5rem;
}

.legal-badge i {
    font-size: 0.95rem;
}

/* EU / safe — universal status semantic, not brand color */
.legal-badge--eu {
    color: var(--color-success-ink);
    background: var(--color-success-soft);
    border-color: color-mix(in oklab, var(--color-success) 30%, transparent);
}

/* International transfer — uses the brand link tone (white-label safe) */
.legal-badge--intl {
    color: var(--color-text-link);
    background: var(--color-primary-100);
    border-color: color-mix(in oklab, var(--color-text-link) 25%, transparent);
}

.legal-table__note {
    display: block;
    margin-top: 0.4rem;
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1.5;
    color: var(--color-text-muted);
}

.legal-table__note code {
    font-size: 0.78em;
}

/* ---- Responsive ---- */

@media (max-width: 575.98px) {
    .legal-prose thead th,
    .legal-prose tbody th,
    .legal-prose tbody td {
        padding: 0.65rem 0.75rem;
    }
}

/* ---- Print ---- */

@media print {
    .legal-page {
        padding-block: 0;
        background: #fff;
    }

    .legal-prose a {
        color: inherit;
        text-decoration: none;
    }
}