{#
   En-tête de page sur fond photo — maquettes 3 (Entretien en cabinet),
   4 (Thérapie en visio) et 5 (Ateliers).

   Paramètres : id, fil, titre, sous_titre, h1_size
                overlay_bas (opacité basse du dégradé, 0.74 ou 0.76 selon la maquette)
#}
<section id="{{ id }}" style="position:relative; min-height:clamp(320px,36vw,420px); display:flex; align-items:center; justify-content:center; padding:clamp(56px,7vw,88px) 24px; overflow:hidden; background:#283331">
    <img src="{{ asset('images/riviere.png') }}" alt="" style="position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block" />
    <span aria-hidden="true" style="position:absolute; inset:0; background:linear-gradient(to bottom, rgba(40,51,49,0.55) 0%, rgba(40,51,49,{{ overlay_bas|default('0.74') }}) 100%)"></span>
    <div style="position:relative; max-width:760px; margin:0 auto; text-align:center">
        <p style="font-size:13px; font-weight:300; color:rgba(255,255,255,0.65); margin:0 0 26px"><a href="{{ path('app_home') }}" style="color:rgba(255,255,255,0.65)">Accueil</a> <span style="color:rgba(255,255,255,0.45)">›</span> {{ fil }}</p>
        <h1 style="font-family:'Cormorant Garamond',serif; font-weight:300; font-size:{{ h1_size }}; line-height:1.1; color:#FFFFFF; margin:0 0 16px">{{ titre }}</h1>
        <p style="font-size:12px; font-weight:400; letter-spacing:0.2em; text-transform:uppercase; color:rgba(255,255,255,0.8); margin:0">{{ sous_titre }}</p>
    </div>
</section>