{% extends 'base.html.twig' %}

{% block title %}Tarifs — Les Écuries de Brochemerle{% endblock %}
{% block meta_description %}Tarifs des pensions longue et courte durée, prestations équestres — Les Écuries de Brochemerle, Étusson (79){% endblock %}

{% block body %}

<section class="page-hero">
    <div class="hero-bg hero-bg--tarifs"></div>
    <div class="hero-overlay"></div>
    <div class="container page-hero-content">
        <p class="eyebrow">Tarifs TTC</p>
        <h1>Nos Tarifs</h1>
        <p class="page-subtitle">Pensions longue durée · Courte durée · Prestations</p>
    </div>
</section>

<section class="section">
    <div class="container">

        <div class="tarif-notice">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#691E18" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
            <div>
                <strong>Conditions d'accueil obligatoires</strong>
                <ul>
                    <li>Présentation du carnet de vaccination obligatoire</li>
                    <li>Identification électronique (puce) obligatoire</li>
                    <li>Vaccin contre la rhinopneumonie obligatoire</li>
                    <li>Les équidés non identifiés ou non vaccinés ne peuvent être accueillis</li>
                </ul>
            </div>
        </div>

        {% for section in sections %}

        <h2 class="section-title">{{ section.title }}</h2>
        {% if section.note %}<p class="section-note">{{ section.note }}</p>{% endif %}
        {# Cartes de formules #}
        {% if section.cards is not empty %}
        <div class="{{ section.cards|length <= 2 ? 'tarif-grid-2' : 'tarif-grid' }}">
            {% for card in section.cards %}
            {% if card.isActive %}
            <div class="tarif-card{% if card.featured %} featured{% endif %}">
                <div class="tarif-card-head">
                    <div class="tarif-card-icon">
                        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="{{ card.featured ? 'rgba(255,255,255,.9)' : '#691E18' }}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></svg>
                    </div>
                    <h3>{{ card.title }}</h3>
                    {% if card.subtitle %}<p class="tarif-sub">{{ card.subtitle }}</p>{% endif %}
                </div>
                <div class="tarif-card-body">
                    {% if card.priceMainAmount %}
                    <div class="tarif-price-block">
                        <div><span class="tarif-amount">{{ card.priceMainAmount }}</span><span class="tarif-unit"> {{ card.priceMainUnit }}</span></div>
                        {% if card.priceTrimester %}<div class="tarif-trim">{{ card.priceTrimester }}</div>{% endif %}
                        {% if card.pricePoney %}<div class="tarif-poney">{{ card.pricePoney }}</div>{% endif %}
                    </div>
                    {% endif %}
                    {% if card.features %}
                    <ul class="tarif-features">
                        {% for f in card.features %}<li>{{ f }}</li>{% endfor %}
                    </ul>
                    {% endif %}
                    <a href="#footer-form" class="btn-tarif">Nous contacter</a>
                </div>
            </div>
            {% endif %}
            {% endfor %}
        </div>
        {% endif %}

        {# Liste de prestations #}
        {% if section.services is not empty %}
        <div class="section-narrow">
            <div class="tarif-services">
                {% for svc in section.services %}
                {% if svc.isActive %}
                <div class="tarif-service-row">
                    <span>{{ svc.label }}</span>
                    <div>
                        <div class="tarif-service-price">{{ svc.price }}</div>
                    </div>
                </div>
                {% endif %}
                {% endfor %}
            </div>
        </div>
        {% endif %}

        {% endfor %}

    </div>
</section>

{% endblock %}