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

{% block title %}Éthologie — Les Écuries de Brochemerle{% endblock %}
{% block meta_description %}Stages d'éthologie aux Écuries de Brochemerle avec David Doucinot, instructeur équestre diplômé. Débourrage, rééducation, relation cheval-cavalier.{% endblock %}

{% block body %}

<section class="page-hero">
    <div class="hero-bg hero-bg--ethologie"></div>
    <div class="hero-overlay"></div>
    <div class="container page-hero-content">
        <p class="eyebrow">Stages & Formation</p>
        <h1>Éthologie Équine</h1>
        <p class="page-subtitle">Comprendre le cheval · Construire une relation · Résoudre les problèmes</p>
    </div>
</section>

{# ── Intro ── #}
<section class="intro section">
    <div class="container grid-2">
        <div data-reveal="from-left" data-delay>
            <p class="eyebrow">Qu'est-ce que l'éthologie ?</p>
            <h2>Une autre façon de communiquer avec votre cheval</h2>
            <p>L'éthologie équine est la science du comportement du cheval. Elle vise à comprendre son mode de fonctionnement naturel pour travailler <em>avec</em> lui plutôt que contre lui.</p>
            <p>Basée sur le respect mutuel et la communication, cette approche permet d'établir une relation de confiance durable — en cherchant à comprendre plutôt qu'à contraindre, en invitant plutôt qu'en imposant.</p>
            <p>Elle transforme non seulement le cheval, mais aussi le cavalier, en le poussant à se remettre en question et à affiner sa propre posture physique et émotionnelle.</p>
        </div>
        <div data-reveal="from-right">
            <img src="/img/installations/installation_5.jpg" alt="Matériel d'éthologie aux Écuries de Brochemerle">
        </div>
    </div>
</section>

{# ── Cards thèmes ── #}
<section class="cards-section">
    <h2 class="section-title">Les thèmes abordés</h2>
    <div class="cards-viewport">
        <div class="cards-belt" id="etho-belt">
            <div class="card-slide" style="background-image:url({{ asset('images/relation.png') }})">
                <div class="card-overlay"></div>
                <div class="card-content">
                    <h3>Relation & confiance</h3>
                    <div class="card-sep"></div>
                    <p>Construire une communication claire entre le cheval et son cavalier, fondée sur la confiance mutuelle et le respect de l'espace.</p>
                </div>
            </div>
            <div class="card-slide" style="background-image:url(/img/installations/installation_14.jpg)">
                <div class="card-overlay"></div>
                <div class="card-content">
                    <h3>Débourrage</h3>
                    <div class="card-sep"></div>
                    <p>Premières éducations dans le respect du cheval, sans contrainte ni stress, pour poser des bases solides et durables.</p>
                </div>
            </div>
            <div class="card-slide" style="background-image:url(/img/installations/installation_15.jpg)">
                <div class="card-overlay"></div>
                <div class="card-content">
                    <h3>Résolution de problèmes</h3>
                    <div class="card-sep"></div>
                    <p>Refus du van, embarquement, morsures, peurs, manque de respect de l'espace… chaque difficulté a une solution adaptée.</p>
                </div>
            </div>
            <div class="card-slide" style="background-image:url({{ asset('images/passion.png') }})">
                <div class="card-overlay"></div>
                <div class="card-content">
                    <h3>Progression du cavalier</h3>
                    <div class="card-sep"></div>
                    <p>Comprendre son rôle, affiner ses gestes, se remettre en question. La clé de voûte du travail, c'est vous.</p>
                </div>
            </div>
        </div>
    </div>
    <button class="slide-btn slide-prev" id="etho-prev" aria-label="Précédent">&#8249;</button>
    <button class="slide-btn slide-next" id="etho-next" aria-label="Suivant">&#8250;</button>
</section>

{# ── David Doucinot ── #}
<section class="intro section">
    <div class="container grid-2">
        <div data-reveal="from-left">
            <img src="/img/installations/installation_17.jpg" alt="Éthologie aux Écuries de Brochemerle">
        </div>
        <div data-reveal="from-right" data-delay>
            <p class="eyebrow">Notre intervenant</p>
            <h2>David Doucinot</h2>
            <p>Fort de plus de 20 ans d'expérience avec les chevaux, David Doucinot est instructeur équestre diplômé d'État et spécialiste en éthologie équine appliquée. Il intervient aux Écuries de Brochemerle depuis plus de 10 ans, tous les deux mois environ.</p>
            <p>Sa pédagogie s'appuie sur une conviction simple : comprendre comment le cheval apprend avant tout. Ses références puisent dans les méthodes de Pat Parelli, Ray Hunt et les frères Dorrance — des approches qui connectent l'horsemanship traditionnel aux découvertes des neurosciences équines.</p>
            <p>David propose des débourrages et des séances pour résoudre les problèmes que de nombreux cavaliers rencontrent. Tout est question de travail, de patience et de régularité.</p>
            <a href="https://www.daviddoucinot.fr/" target="_blank" rel="noopener" class="etho-ext-link">Visiter le site de David Doucinot &rarr;</a>
        </div>
    </div>
</section>

{# ── Citation ── #}
<section class="etho-quote-section">
    <div class="container">
        <blockquote class="etho-quote">
            <p>« La clé de voûte de votre travail sera votre capacité à vous remettre en question. »</p>
            <cite>David Doucinot</cite>
        </blockquote>
    </div>
</section>

{# ── Infos pratiques ── #}
<section class="intro section section--alt">
    <div class="container grid-2">
        <div data-reveal="from-left" data-delay>
            <p class="eyebrow">Organisation</p>
            <h2>Informations pratiques</h2>
            <p>Les stages sont organisés environ tous les deux mois aux Écuries de Brochemerle, sur notre manège, nos carrières et notre rond de longe. Ils sont ouverts à tous les niveaux — cavaliers comme propriétaires non-montants.</p>
            <p>Venez avec votre cheval pour travailler sur une problématique précise, ou participez en auditeur pour observer et apprendre.</p>
            <p>Pour connaître les prochaines dates et vous inscrire, contactez-nous directement.</p>
            <a href="#footer-form" class="btn btn-dark etho-cta-btn">Nous contacter</a>
        </div>
        <div data-reveal="from-right">
            <img src="/img/installations/installation_1.jpg" alt="Les Écuries de Brochemerle">
        </div>
    </div>
</section>

{% endblock %}

{% block javascripts %}
<script>
(function () {
    var belt = document.getElementById('etho-belt');
    if (!belt) return;
    var orig = Array.from(belt.querySelectorAll('.card-slide'));
    var n = orig.length, gap = 12, idx = n, busy = false;
    orig.forEach(function (s) { belt.appendChild(s.cloneNode(true)); });
    orig.slice().reverse().forEach(function (s) { belt.insertBefore(s.cloneNode(true), belt.firstChild); });
    function sw() { return belt.querySelector('.card-slide').offsetWidth + gap; }
    function snap(i) { idx = i; belt.style.transition = 'none'; void belt.offsetWidth; belt.style.transform = 'translateX(' + (-i * sw()) + 'px)'; }
    function slide(i) { idx = i; belt.style.transition = 'transform .48s cubic-bezier(.4,0,.2,1)'; belt.style.transform = 'translateX(' + (-i * sw()) + 'px)'; }
    belt.addEventListener('transitionend', function () { busy = false; if (idx >= n * 2) snap(idx - n); else if (idx < n) snap(idx + n); });
    snap(n);
    var touchX = 0;
    belt.addEventListener('touchstart', function (e) { touchX = e.touches[0].clientX; }, { passive: true });
    belt.addEventListener('touchend', function (e) { var d = e.changedTouches[0].clientX - touchX; if (Math.abs(d) > 40 && !busy) { busy = true; slide(d < 0 ? idx + 1 : idx - 1); } }, { passive: true });
    var p = document.getElementById('etho-prev');
    var nx = document.getElementById('etho-next');
    if (p)  p.addEventListener('click', function () { if (!busy) { busy = true; slide(idx - 1); } });
    if (nx) nx.addEventListener('click', function () { if (!busy) { busy = true; slide(idx + 1); } });
})();
</script>
{% endblock %}