{#
 # ============================================================================
 # LEGAL MACROS — Composants réutilisables pour les pages légales
 # ============================================================================
 #}

{%- macro accordion_section(id, title, content) -%}
<div id="{{ id }}"
     data-controller="shared--collapsible"
     data-shared--collapsible-open-value="false"
     class="border border-gray-200 rounded-xl overflow-hidden scroll-mt-24">

    <button type="button"
            data-action="click->shared--collapsible#toggle"
            class="w-full flex items-center justify-between gap-4 px-5 py-4 bg-white hover:bg-gray-50 text-left transition-colors duration-fast">
        <span class="font-semibold text-gray-900 text-sm sm:text-base leading-snug">{{ title }}</span>
        <svg class="w-5 h-5 text-gray-400 flex-shrink-0 transition-transform duration-200"
             data-shared--collapsible-target="icon"
             viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd"/>
        </svg>
    </button>

    <div data-shared--collapsible-target="content">
        <div class="px-5 py-5 border-t border-gray-100 text-sm text-gray-700 leading-relaxed legal-content">
            {{ content|raw }}
        </div>
    </div>
</div>
{%- endmacro -%}