{% extends "public/base.html" %}
{% block title %}Nos services · {{ site.site_name }}{% endblock %}
{% block content %}
<section class="relative overflow-hidden bg-brand-900">
  <div class="absolute -top-24 -right-24 size-96 rounded-full bg-brand-700/40 blur-3xl"></div>
  <div class="relative mx-auto max-w-7xl px-4 py-16 lg:px-6">
    <p class="text-xs font-bold tracking-widest text-gold-400 uppercase">Label Info Média</p>
    <h1 class="mt-2 max-w-3xl text-4xl font-extrabold !text-white md:text-5xl">Nos services</h1>
    <p class="mt-4 max-w-2xl text-lg text-brand-200">La rigueur journalistique au service de votre communication : production audiovisuelle, couverture médiatique et accompagnement stratégique.</p>
  </div>
</section>
<div class="mx-auto max-w-7xl px-4 py-14 lg:px-6">
  <ul class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
    {% for s in services %}
    <li class="group rounded-2xl border border-slate-200/80 bg-white p-7 shadow-(--shadow-card) transition hover:-translate-y-1 hover:border-brand-200 hover:shadow-(--shadow-raised)">
      <span class="flex size-14 items-center justify-center rounded-2xl bg-brand-900 text-gold-400 transition group-hover:bg-signal-500 group-hover:text-white">{% icon s.icone "size-7" %}</span>
      <h2 class="mt-5 text-xl font-bold">{{ s.titre }}</h2>
      <p class="mt-2 leading-relaxed text-slate-600">{{ s.description }}</p>
    </li>
    {% endfor %}
  </ul>
  <div class="mt-14 flex flex-col items-center justify-between gap-6 rounded-3xl bg-gold-400 p-8 md:flex-row md:p-10">
    <div><h2 class="text-2xl font-extrabold">Un projet ? Parlons-en.</h2><p class="mt-1 text-brand-900">Recevez un devis personnalisé sous 48 heures.</p></div>
    <a href="{% url 'public:contact' %}" class="btn btn-primary btn-lg">Demander un devis {% icon "arrow-right" %}</a>
  </div>
</div>
{% endblock %}