{# =============================================================
TEMPLATE 1 — PRIVATISATION DU FIRE COMEDY CLUB (Bordeaux)
============================================================= #}
{% extends '@SyliusShop/shared/layout/base.html.twig' %}

{# ---- META TAGS (SEO) ------------------------------------- #}
{% block title %}Privatisation Comedy Club Bordeaux | Fire Comedy Club{% endblock %}
{% block meta_description %}Écrivez-nous pour privatiser Fire Comedy Club : séminaires, team-buildings, soirées
d’entreprise ; 100 places, scène équipée, bar à cocktails, stand-up clé en main, on organise tout.{% endblock %}

{% block content %}
<div class="container position-relative pb-4 mb-2 mb-lg-3">
    <div class="row justify-content-center">
        <div class="col-lg-9 col-xl-8 text-center pt-5 mt-1">
            <h1 class="display-6 pt-3 mt-3 mb-4">Privatisez le Fire Comedy Club</h1>
            <p class="opacity-70 fs-xl">Écrivez-nous, on s’occupe de tout pour vos afterworks à Bordeaux</p>
        </div>
    </div>
</div>

<!-- Hero (desktop) -->
<div class="d-none d-md-block">
    <section class="jarallax" data-jarallax data-speed="0.4">
        <div class="jarallax-img"
            style="background-image: url({{ asset('assets/images/privatisation/vertical.png') }});"></div>
        <div style="height: 600px;"></div>
    </section>
</div>
<!-- Hero (mobile) -->
<div class="d-block d-md-none">
    <img src="{{ asset('assets/images/privatisation/vertical.png') }}" alt="Salle Fire Comedy Club"
        class="img-fluid w-100">
</div>

<!-- À propos du lieu -->
<section class="container py-5 my-1 my-md-4 my-lg-5">
    <div class="row">
        <div class="pe-lg-4 me-lg-3 pe-xl-0 me-xl-0">
            <p class="fs-lg mb-0">
                Aux Chartrons, privatisez le <strong>bar du Fire Comedy Club</strong> :
                <strong>100 places assises confortables</strong>, scène équipée (lumières, son, micros sans fil)
                et bar à cocktails avec options de restauration.
                <br /><br />
                After-work, team-building, soirée clients… <strong>vous voulez faire rire vos équipes</strong> ?
                On s’occupe de tout et on vous organise une <strong>vraie soirée stand-up</strong>.
                <br />
            </p>
        </div>


    </div>
    <!-- CTA contact => formulaire externe -->
    <div class="text-center">
        <a href="{{ path('sylius_shop_contact_request', {'origin': 'privatisation'}) }}" class="btn btn-primary mt-3">
            <i class="bx bx-envelope me-2"></i>Écrivez-nous — on s’occupe de tout
        </a>
    </div>
</section>

<!-- Galerie (Parallax desktop) -->
<div class="d-none d-md-block">
    <section class="container position-relative pt-1 pt-md-3">
        <div class="row align-items-start">
            <div class="rellax col-lg-5 col-sm-6 mb-4 mb-sm-0" data-rellax-percentage="0.5" data-rellax-speed="-0.5"
                data-disable-parallax-down="sm">
                <img src="{{ asset('assets/images/privatisation/hg.png') }}" class="rounded-3" width="526"
                    alt="Salle privatisée">
            </div>
            <div class="rellax col-lg-7 col-sm-6 d-sm-flex justify-content-end pt-sm-4 pt-lg-5 mt-md-3 mb-4 mb-sm-0"
                data-rellax-percentage="0.5" data-rellax-speed="-1.25" data-disable-parallax-down="sm">
                <div><img src="{{ asset('assets/images/privatisation/hd.png') }}" class="rounded-3" width="456"
                        alt="Scène équipée"></div>
            </div>
            <div class="rellax col-lg-5 col-sm-6 d-sm-flex justify-content-lg-end pt-sm-5 mt-lg-5 mb-4 mb-sm-0"
                data-rellax-percentage="0.5" data-rellax-speed="-1.25" data-disable-parallax-down="sm">
                <div><img src="{{ asset('assets/images/privatisation/bg.png') }}" class="rounded-3" width="456"
                        alt="Cocktail au bar"></div>
            </div>
            <div class="rellax col-lg-7 col-sm-6 d-sm-flex justify-content-center mt-sm-n5 mb-4 mb-sm-0"
                data-rellax-percentage="0.5" data-rellax-speed="-0.25" data-disable-parallax-down="sm">
                <div><img src="{{ asset('assets/images/privatisation/bd.png') }}" class="d-block rounded-3 mt-xl-n5"
                        width="526" alt="Ambiance public"></div>
            </div>
        </div>
    </section>
    <div class="row position-sm-absolute top-50 start-0 translate-middle-sm-y w-100 d-flex">
        <div class="rellax col-lg-5 col-sm-6 offset-sm-3 offset-lg-4 mt-sm-n7" style="margin-top: -900px;"
            data-rellax-percentage="0.5" data-rellax-speed="1.4" data-disable-parallax-down="sm">
            <img src="{{ asset('assets/images/privatisation/c.png') }}" class="d-block rounded-3 mt-xl-n5 ms-5"
                width="526" alt="Show privé">
        </div>
    </div>
</div>

<!-- Galerie (mobile) -->
<div class="d-block d-md-none">
    <section class="container pt-3">
        <div class="row g-4">
            {% set images = ['hg','hd','bg','bd','c'] %}
            {% for img in images %}
            <div class="col-12">
                <img src="{{ asset('assets/images/privatisation/' ~ img ~ '.png') }}" class="img-fluid rounded-3"
                    alt="Photo Fire Comedy Club">
            </div>
            {% endfor %}
        </div>
    </section>
</div>



<script src="{{ asset('assets/vendor/jarallax/dist/jarallax.min.js') }}"></script>
<script src="{{ asset('assets/vendor/rellax/rellax.min.js') }}"></script>
<script src="{{ asset('assets/js/theme.min.js') }}"></script>
{% endblock %}