/* ═══════════════════════════
           PAGES JURIDIQUES — mise en page du document
           Réutilise les tokens, la navbar et le footer déjà définis
           dans index.css. Ce fichier n'ajoute que la mise en page
           propre au contenu des documents juridiques.
        ═══════════════════════════ */

        .legal-main {
            max-width: 960px;
            margin: 0 auto;
            padding: 140px 32px 100px;
        }

        .legal-header {
            margin-bottom: 48px;
            padding-bottom: 32px;
            border-bottom: 1px solid var(--border);
        }

        .legal-eyebrow {
            font-size: 0.68rem;
            font-weight: 600;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            color: var(--text-muted);
            margin-bottom: 14px;
        }

        .legal-main h1 {
            font-size: clamp(2rem, 4vw, 2.6rem);
            letter-spacing: -0.02em;
            margin-bottom: 10px;
        }

        .legal-meta {
            font-size: 0.82rem;
            color: var(--text-light);
        }

        .legal-section {
            margin-bottom: 40px;
        }

        .legal-main h2 {
            font-size: 1.3rem;
            letter-spacing: -0.01em;
            margin-bottom: 16px;
        }

        .legal-main h3 {
            font-family: 'Jost', sans-serif;
            font-size: 0.95rem;
            font-weight: 600;
            color: var(--text);
            margin: 20px 0 8px;
        }

        .legal-main p {
            font-size: 0.94rem;
            line-height: 1.8;
            color: var(--text-muted);
            margin-bottom: 14px;
        }

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

        .legal-main ul {
            list-style: disc;
            padding-left: 22px;
            display: flex;
            flex-direction: column;
            gap: 8px;
            margin: 0 0 14px;
        }

        .legal-main li {
            font-size: 0.94rem;
            line-height: 1.7;
            color: var(--text-muted);
        }

        .legal-main a {
            color: var(--orange);
            text-decoration: underline;
            text-underline-offset: 2px;
        }
        .legal-main a:hover { color: var(--orange-lt); }

        .legal-back {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 0.82rem;
            font-weight: 500;
            color: var(--text-muted);
            margin-bottom: 28px;
        }
        .legal-back:hover { color: var(--text); }

        @media (max-width: 640px) {
            .legal-main {
                padding: 116px 20px 60px;
            }
            .legal-section {
                margin-bottom: 32px;
            }
        }