{# Carte d'article. variant : default | horizontal | compact | overlay | minimal #}
<c-vars article variant="default" class="" eager="" show_excerpt="1" />
{% with a=article %}
{% if variant == "overlay" %}
<article class="group relative isolate flex h-full min-h-[22rem] flex-col justify-end overflow-hidden rounded-2xl bg-brand-900 {{ class }}">
  {% picture a.image_principale "lg" "absolute inset-0 -z-10 size-full object-cover transition duration-700 group-hover:scale-105" sizes="(min-width:1024px) 66vw, 100vw" eager=eager %}
  <div class="absolute inset-0 -z-10 bg-gradient-to-t from-brand-950 via-brand-950/55 to-transparent"></div>
  <div class="p-6 md:p-8">
    <div class="mb-3 flex items-center gap-2">
      <a href="{{ a.categorie.get_absolute_url }}" class="rounded bg-signal-500 px-2.5 py-1 text-[11px] font-bold tracking-wider text-white uppercase hover:bg-signal-600">{{ a.categorie.nom }}</a>
      {% if a.est_a_la_une %}<span class="rounded bg-gold-400 px-2.5 py-1 text-[11px] font-bold tracking-wider text-brand-950 uppercase">À la une</span>{% endif %}
    </div>
    <h3 class="text-2xl leading-tight font-extrabold !text-white md:text-4xl"><a href="{{ a.get_absolute_url }}" class="after:absolute after:inset-0 hover:underline hover:decoration-gold-400 hover:decoration-2 hover:underline-offset-4">{{ a.titre }}</a></h3>
    {% if show_excerpt %}<p class="mt-3 line-clamp-2 max-w-3xl text-sm text-brand-100 md:text-base">{{ a.excerpt }}</p>{% endif %}
    <p class="mt-4 text-xs font-medium text-brand-200">{{ a.auteur.name }} · {{ a.publie_le|date:"d F Y" }}</p>
  </div>
</article>

{% elif variant == "horizontal" %}
<article class="group relative flex gap-4 {{ class }}">
  <div class="aspect-[4/3] w-32 shrink-0 overflow-hidden rounded-xl bg-slate-100 sm:w-44">
    {% picture a.image_principale "sm" "size-full object-cover transition duration-500 group-hover:scale-105" sizes="176px" %}
  </div>
  <div class="min-w-0 py-0.5">
    <a href="{{ a.categorie.get_absolute_url }}" class="kicker relative z-10 hover:underline">{{ a.categorie.nom }}</a>
    <h3 class="mt-1 line-clamp-3 text-base leading-snug font-bold text-brand-900 group-hover:text-brand-600"><a href="{{ a.get_absolute_url }}" class="after:absolute after:inset-0">{{ a.titre }}</a></h3>
    <p class="mt-1.5 text-xs text-slate-500">{{ a.publie_le|date:"d M Y" }} · {{ a.reading_time }} min</p>
  </div>
</article>

{% elif variant == "compact" %}
<article class="group relative {{ class }}">
  <a href="{{ a.categorie.get_absolute_url }}" class="kicker relative z-10 hover:underline">{{ a.categorie.nom }}</a>
  <h3 class="mt-1 line-clamp-2 text-[15px] leading-snug font-bold text-brand-900 group-hover:text-brand-600"><a href="{{ a.get_absolute_url }}" class="after:absolute after:inset-0">{{ a.titre }}</a></h3>
  <p class="mt-1 text-xs text-slate-500">{{ a.publie_le|date:"d M Y · H:i" }}</p>
</article>

{% else %}
<article class="group relative flex h-full flex-col overflow-hidden rounded-2xl border border-slate-200/80 bg-white shadow-(--shadow-card) transition hover:-translate-y-1 hover:shadow-(--shadow-raised) {{ class }}">
  <div class="relative aspect-[16/10] overflow-hidden bg-slate-100">
    {% picture a.image_principale "md" "size-full object-cover transition duration-500 group-hover:scale-105" sizes="(min-width:1024px) 33vw, (min-width:640px) 50vw, 100vw" eager=eager %}
    <a href="{{ a.categorie.get_absolute_url }}" class="absolute top-3 left-3 z-10 rounded bg-brand-900/90 px-2.5 py-1 text-[11px] font-bold tracking-wider text-white uppercase backdrop-blur hover:bg-signal-500">{{ a.categorie.nom }}</a>
  </div>
  <div class="flex flex-1 flex-col p-5">
    <h3 class="line-clamp-3 text-lg leading-snug font-bold text-brand-900 group-hover:text-brand-600"><a href="{{ a.get_absolute_url }}" class="after:absolute after:inset-0">{{ a.titre }}</a></h3>
    {% if show_excerpt %}<p class="mt-2 line-clamp-3 text-sm leading-relaxed text-slate-600">{{ a.excerpt }}</p>{% endif %}
    <div class="mt-auto flex items-center justify-between pt-4 text-xs text-slate-500">
      <span class="font-medium">{{ a.auteur.name }}</span>
      <span>{{ a.publie_le|date:"d M Y" }}</span>
    </div>
  </div>
</article>
{% endif %}
{% endwith %}