{#
 # ============================================================================
 # ATOM: CLOSE-BUTTON
 # ============================================================================
 #
 # Bouton de fermeture (la croix) unifié pour toute l'application.
 #
 # AUCUN FOND — ni au repos, ni au survol. C'est la croix elle-même, tracée
 # grand, qui porte le repérage. Le retour au survol passe par la couleur du
 # trait, qui s'assombrit franchement (gray-500 → gray-900), jamais par un aplat.
 #
 # La cible tactile reste d'au moins 40 px dans toutes les tailles : elle est
 # simplement devenue invisible, ce qui est le comportement normal d'une zone
 # cliquable. En taille `sm` le carré ne fait que 32 px, la zone est alors
 # étendue par un pseudo-élément (`after:-inset-1`) — hors flux, donc sans
 # décalage de la mise en page autour.
 #
 # L'anneau de focus clavier est d'autant plus nécessaire qu'aucun fond ne
 # matérialise plus l'élément : il ne doit pas sauter.
 #
 # ============================================================================
 # PARAMÈTRES
 # ============================================================================
 #
 # | Paramètre | Type   | Défaut    | Description                                |
 # |-----------|--------|-----------|--------------------------------------------|
 # | size      | string | 'md'      | Taille: sm, md, lg (cf. tableau plus bas)  |
 # | variant   | string | 'neutral' | Style: neutral (trait gris), overlay       |
 # |           |        |           | (trait blanc sur mobile, gris ≥ md)        |
 # | ariaLabel | string | 'Fermer'  | Libellé accessible, surchargeable          |
 # | type      | string | 'button'  | Type du <button>                           |
 # | attr      | object | {}        | Attributs HTML arbitraires (onclick,       |
 # |           |        |           | data-action, cibles Stimulus, id…)         |
 # | class     | string | ''        | Classes Tailwind additionnelles            |
 #
 # Note: `aria-label` peut aussi être passé dans `attr` — il est alors utilisé
 # comme libellé et n'est PAS émis une seconde fois.
 #
 # ============================================================================
 # TAILLES
 # ============================================================================
 #
 # | Taille | Croix | Cible tactile  | Usage                                  |
 # |--------|-------|----------------|----------------------------------------|
 # | sm     | 20px  | 40px (étendue) | En-têtes compacts, barres serrées      |
 # | md     | 24px  | 40px           | Modales (défaut) — tient face à un     |
 # |        |       |                | titre en text-lg                       |
 # | lg     | 32px  | 44px           | Grandes modales, lightbox              |
 #
 # ============================================================================
 # EXEMPLES D'UTILISATION
 # ============================================================================
 #
 # Fermeture d'une modale via une fonction globale:
 # {% include '_atoms/close-button/close-button.html.twig' with {
 #     attr: { onclick: "closeModal('mon-modal')" }
 # } only %}
 #
 # Fermeture pilotée par un contrôleur Stimulus:
 # {% include '_atoms/close-button/close-button.html.twig' with {
 #     attr: { 'data-action': 'click->slidia--editor#closeModal' }
 # } only %}
 #
 # Libellé personnalisé et taille compacte:
 # {% include '_atoms/close-button/close-button.html.twig' with {
 #     size: 'sm',
 #     ariaLabel: 'Fermer le panneau',
 #     class: 'md:hidden ml-auto',
 #     attr: { 'data-action': 'click->seren-ia--chat#toggleSidebar' }
 # } only %}
 #
 # Au-dessus d'une image (lightbox):
 # {% include '_atoms/close-button/close-button.html.twig' with {
 #     variant: 'overlay',
 #     class: 'absolute top-3 right-3 z-10',
 #     attr: { 'data-action': 'click->monalisia--generator#closeLightbox' }
 # } only %}
 #
 # ============================================================================
 #}

{# ============================================================================
   CONFIGURATION DES VALEURS PAR DÉFAUT
   ============================================================================ #}

{% set attr = attr ?? {} %}
{% set size = size ?? 'md' %}
{% set variant = variant ?? 'neutral' %}
{% set type = type ?? 'button' %}
{% set class = class ?? '' %}

{# Le libellé passé dans `attr` prime, sinon `ariaLabel`, sinon « Fermer ».
   Quel que soit le chemin, il n'est émis qu'une fois (cf. boucle plus bas). #}
{% set ariaLabel = attr['aria-label'] ?? ariaLabel ?? 'Fermer' %}

{# `aria-label` et `type` sont émis explicitement par le gabarit : on les retire
   de `attr` pour ne pas produire un attribut en double. #}
{% set attrRestants = attr|filter((value, key) => key not in ['aria-label', 'type']) %}

{# ============================================================================
   CLASSES TAILWIND - BASE
   Aucun `bg-*` ici ni dans les variantes : le bouton est transparent. Seul
   `rounded-full` subsiste, pour donner sa forme à l'anneau de focus.
   ============================================================================ #}

{% set baseClasses = 'inline-flex items-center justify-center shrink-0 bg-transparent rounded-full border-0 cursor-pointer transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-offset-2' %}

{# ============================================================================
   CLASSES TAILWIND - TAILLES
   `sm` étend sa zone cliquable à 40px via un pseudo-élément transparent :
   hors flux, donc sans décalage de la mise en page.
   ============================================================================ #}

{% set sizeClasses = {
    'sm': "w-8 h-8 relative after:absolute after:content-[''] after:-inset-1",
    'md': 'w-10 h-10',
    'lg': 'w-11 h-11'
} %}

{# Sans fond, c'est la croix seule qui doit se repérer : on monte d'un cran
   sur l'échelle de l'atome icône (md = 20px, lg = 24px, xl = 32px). #}
{% set iconSizes = {
    'sm': 'md',
    'md': 'lg',
    'lg': 'xl'
} %}

{# ============================================================================
   CLASSES TAILWIND - VARIANTES
   Le survol se lit sur la COULEUR DU TRAIT, jamais sur un aplat.

   `overlay` sert les deux lightbox (Monalisia, ai-lightbox) : sur mobile la
   croix se pose au-dessus de l'image elle-même. Le trait y passe en blanc, et
   une ombre portée le détoure — une image générée peut très bien être claire
   dans son coin haut-droit, et un blanc sur blanc disparaîtrait. L'ombre
   travaille sur le tracé, pas sur une surface : il n'y a toujours pas de fond.
   ============================================================================ #}

{# `gray-500` et non `gray-400` : sans aplat, plus aucune forme ne délimite le
   bouton, c'est le trait seul qui doit atteindre le contraste minimal de 3:1
   exigé pour un objet graphique (WCAG 1.4.11). gray-400 sur blanc plafonne à
   ~2,8:1 et échouerait ; gray-500 tient ~4,6:1. #}
{% set variantClasses = {
    'neutral': 'text-gray-500 hover:text-gray-900',
    'overlay': "text-white hover:text-white/70 drop-shadow-[0_1px_3px_rgba(0,0,0,0.75)] md:text-gray-500 md:hover:text-gray-900 md:drop-shadow-none"
} %}

{# ============================================================================
   ASSEMBLAGE DES CLASSES
   ============================================================================ #}

{% set closeButtonClasses = [
    baseClasses,
    sizeClasses[size] ?? sizeClasses['md'],
    variantClasses[variant] ?? variantClasses['neutral'],
    class
]|join(' ')|trim %}

{# ============================================================================
   RENDU HTML
   ============================================================================ #}

<button
    type="{{ type }}"
    class="{{ closeButtonClasses }}"
    aria-label="{{ ariaLabel }}"
    {#- Le câblage passe tel quel, chaque attribut précédé d'une espace — sans
        elle, deux attributs se colleraient et le second serait perdu. -#}
    {%- for key, value in attrRestants %} {{ key }}="{{ value }}"{% endfor %}
>
    {% include '_atoms/icon/icon.html.twig' with {
        name: 'x',
        size: iconSizes[size] ?? 'sm',
        color: 'current'
    } only %}
</button>