{{-- Partial : en-tête + style prose pour pages légales / éditoriales --}}
@props(['eyebrow' => '', 'title' => '', 'lead' => ''])

<section style="background:#0D2B5E;padding:clamp(3rem,6vw,4.5rem) 0">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        @if($eyebrow)
        <div style="display:inline-flex;align-items:center;gap:.6rem;margin-bottom:1.1rem">
            <span style="width:26px;height:1.5px;background:#F5820A"></span>
            <span style="font-size:.7rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#7FA7E0">{{ $eyebrow }}</span>
        </div>
        @endif
        <h1 style="font-size:clamp(1.9rem,3.6vw,2.8rem);font-weight:800;color:#fff;margin:0;letter-spacing:-.022em">{{ $title }}</h1>
        @if($lead)<p style="font-size:1.02rem;color:#9FB8DC;line-height:1.7;max-width:620px;margin:1rem 0 0">{{ $lead }}</p>@endif
    </div>
</section>

<style>
.legal-prose { max-width:760px; margin:0 auto; }
.legal-prose h2 { font-size:1.25rem; font-weight:700; color:#091E42; letter-spacing:-.02em; margin:2.5rem 0 .85rem; }
.legal-prose h2:first-child { margin-top:0; }
.legal-prose h3 { font-size:1rem; font-weight:700; color:#091E42; margin:1.75rem 0 .5rem; }
.legal-prose p, .legal-prose li { font-size:.92rem; line-height:1.8; color:#475569; }
.legal-prose p { margin:0 0 1rem; }
.legal-prose ul { padding-left:1.25rem; margin:0 0 1.25rem; }
.legal-prose li { margin-bottom:.4rem; }
.legal-prose a { color:#1A4B9C; text-decoration:none; font-weight:600; }
.legal-prose a:hover { text-decoration:underline; }
.legal-prose strong { color:#091E42; }
.legal-prose .todo { background:#FFF4E5; border:1px dashed #F5820A; border-radius:6px; padding:1px 7px; color:#B45309; font-size:.86rem; font-weight:600; }
.legal-prose .muted { font-size:.8rem; color:#94A3B8; }
</style>