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

<section class="legal-hero">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        @if($eyebrow)
        <div class="legal-eyebrow">
            <span class="legal-eyebrow-line"></span>
            <span class="legal-eyebrow-txt">{{ $eyebrow }}</span>
        </div>
        @endif
        <h1 class="legal-h1">{{ $title }}</h1>
        @if($lead)<p class="legal-lead">{{ $lead }}</p>@endif
    </div>
</section>

<style>
.legal-hero { background:#0D2B5E; padding:clamp(3rem,6vw,4.5rem) 0; }
.legal-eyebrow { display:inline-flex; align-items:center; gap:.6rem; margin-bottom:1.1rem; }
.legal-eyebrow-line { width:26px; height:1.5px; background:#F5820A; }
.legal-eyebrow-txt { font-size:.7rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:#7FA7E0; }
.legal-h1 { font-size:clamp(1.9rem,3.6vw,2.8rem); font-weight:800; color:#fff; margin:0; letter-spacing:-.022em; }
.legal-lead { font-size:1.02rem; color:#9FB8DC; line-height:1.7; max-width:620px; margin:1rem 0 0; }
.legal-section { padding:4rem 0; background:#fff; }
.legal-updated { margin-top:2.5rem; }
.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>