{#
 # ============================================================================
 # ATOM: GRADIENT TEXT
 # ============================================================================
 #
 # Texte avec dégradé de couleur (background-clip: text).
 # Utilisé pour les mots clés colorés dans les titres et sections.
 #
 # ============================================================================
 # PARAMÈTRES
 # ============================================================================
 #
 # | Paramètre | Type   | Défaut  | Description                        |
 # |-----------|--------|---------|------------------------------------|
 # | text      | string | ''      | Texte à afficher                   |
 # | from      | string | '#0C81E4' | Couleur de début du dégradé      |
 # | to        | string | '#3AB8E8' | Couleur de fin du dégradé        |
 # | direction | string | '135deg'| Direction CSS du dégradé           |
 # | tag       | string | 'span'  | Balise HTML (span, strong, em)    |
 # | class     | string | ''      | Classes CSS additionnelles         |
 #
 # ============================================================================
 # EXEMPLES
 # ============================================================================
 #
 # Dans un titre:
 # <h2>Vous avez le fond.
 #   {% include '_atoms/gradient-text/gradient-text.html.twig' with {
 #       text: 'Slidia fait la forme.',
 #       from: c1,
 #       to: c2
 #   } only %}
 # </h2>
 #
 # Inline dans titleHtml (ne supporte pas include):
 # {% set gtStyle = 'background:linear-gradient(135deg,' ~ c1 ~ ',' ~ c2 ~ ');-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;' %}
 # titleHtml: '4 étapes. <span style="' ~ gtStyle ~ '">3 minutes.</span>'
 #
 # ============================================================================
 #}

{% set text      = text ?? '' %}
{% set from      = from ?? '#0C81E4' %}
{% set to        = to ?? '#3AB8E8' %}
{% set direction = direction ?? '135deg' %}
{% set tag       = tag ?? 'span' %}
{% set class     = class ?? '' %}

<{{ tag }} class="{{ class }}" style="background: linear-gradient({{ direction }}, {{ from }}, {{ to }}); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;">{{ text }}</{{ tag }}>