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

{% block body %}
    {{ include('front/_parts/_loader_site.html.twig') }}
    {% for blockHtml in blocks %}
        {{ blockHtml|raw }}
    {% endfor %}


    {#    <div class="container my-3"> #}
    {#    <div class="row chalet_wall"> #}
    {#        <div class="col-6 col-lg-3"> #}
    {#            <div class="scene"> #}
    {#                <div class="volet left"> #}
    {#                    <div class="face face"></div> #}
    {#                    <div class="face back"></div> #}
    {#                </div> #}
    {#                <div class="outdoor">texte</div> #}
    {#            </div> #}
    {#        </div> #}
    {#        <div class="col-6 col-lg-3"> #}
    {#            <div class="scene"> #}
    {#                <div class="volet right"> #}
    {#                    <div class="face face"></div> #}
    {#                    <div class="face back"></div> #}
    {#                </div> #}
    {#                <div class="outdoor">texte</div> #}
    {#            </div> #}
    {#        </div> #}
    {#        <div class="col-6 col-lg-3"> #}
    {#            <div class="scene"> #}
    {#                <div class="volet left"> #}
    {#                    <div class="face face"></div> #}
    {#                    <div class="face back"></div> #}
    {#                </div> #}
    {#                <div class="outdoor">texte</div> #}
    {#            </div> #}
    {#        </div> #}
    {#        <div class="col-6 col-lg-3"> #}
    {#            <div class="scene"> #}
    {#                <div class="volet right"> #}
    {#                    <div class="face face"></div> #}
    {#                    <div class="face back"></div> #}
    {#                </div> #}
    {#                <div class="outdoor">texte</div> #}
    {#            </div> #}
    {#        </div> #}
    {#    </div> #}
    {#    </div> #}

    {#    <style> #}
    {#        /* Structure principale */ #}
    {#        /* La scène gère la perspective */ #}
    {#        .scene { #}
    {#            width: 100%; #}
    {#            height: 100%; #}
    {#            aspect-ratio:1 / 1.25; #}
    {#            perspective: 1000px; /* distance du regard => effet 3D */ #}
    {#            position: relative; #}
    {#            overflow: hidden; #}
    {#        } #}

    {#        /* Le volet, pivotant autour de son axe vertical */ #}
    {#        .volet { #}
    {#            background: #D62D1E; #}
    {#            cursor: pointer; #}
    {#            width: 100%; #}
    {#            height: 100%; #}
    {#            position: absolute; #}
    {#            transform-style: preserve-3d; /* conserve les faces en 3D */ #}
    {#            transition: transform 0.4s ease-in-out; #}
    {#            padding:10px; #}
    {#        } #}

    {#        .volet.left { #}
    {#            transform-origin: left center; /* axe à gauche => charnière du volet */ #}
    {#        } #}

    {#        .volet.right { #}
    {#            transform-origin: right center; /* axe à droite => charnière du volet */ #}
    {#        } #}

    {#        /* Face avant et arrière du volet */ #}
    {#        .face { #}
    {#            position: absolute; #}
    {#            width: 100%; #}
    {#            height: 100%; #}
    {#            backface-visibility: hidden; /* empêche la face arrière de se voir */ #}
    {#        } #}

    {#        /* Apparence du volet */ #}
    {#        .face { #}
    {#            background: url('/assets/volet_rouge.svg') no-repeat 50% 50%; #}
    {#            background-size: contain; #}
    {#        } #}

    {#        .back { #}
    {#            transform: rotateY(180deg); #}
    {#        } #}

    {#        /* Animation : le volet pivote à 100° */ #}
    {#        .scene:hover .volet.left { #}
    {#            transform: rotateY(100deg); /*On ouvre le volet vers l'extérieur*/ #}
    {#        } #}
    {#        .scene:hover .volet.right { #}
    {#            transform: rotateY(-100deg); /*On ouvre le volet vers l'extérieur*/ #}
    {#        } #}

    {#        /* Optionnel : petit effet d'ombre projetée */ #}
    {#        .scene::after { #}
    {#            content: ""; #}
    {#            position: absolute; #}
    {#            right: -40px; #}
    {#            top: 0; #}
    {#            width: 40px; #}
    {#            height: 100%; #}
    {#            background: linear-gradient(to right, rgba(0, 0, 0, 0.2), transparent); #}
    {#            opacity: 0.5; #}
    {#            transform-origin: left; #}
    {#            transition: opacity 0.4s ease; #}
    {#        } #}

    {#        .scene:hover::after { #}
    {#            opacity: 0; #}
    {#        } #}

    {#        .outdoor { #}
    {#            background: #fff; #}
    {#            width: 100%; #}
    {#            height: 100%; #}
    {#            padding: 5px; #}
    {#        } #}


    {#    </style> #}
{% endblock %}