{% extends 'FrontofficeFr/base.html.twig' %}
{% block activePresentation %}main-menu-active{% endblock %}
{% block titre %}{{ mot.titreFr }}{% endblock %}

{% block body %}
    <style>
        @media screen and (max-width: 1000px) {
            .mob{
                flex-wrap: wrap;
            }
        }

        .block_ac {
            width: 100%;
            margin: 0;
            display: flex;
            justify-content: center;
        }

        .block_ac .content-box {
            width: 90%;
            background: white;
            border: 1px solid lightgrey;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            padding: 20px;
            border-radius: 15px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }

        .block_ac .image-box{
            margin: 0px;
                text-align: center;
        }
        .block_ac .text-box {
            margin: 0px;
                text-align: start;
        }

        .block_ac .image-box img {
            max-width: 300px;
            max-height: 300px;
            border-radius: 20px;
            object-fit: cover;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }

        .block_ac .text-box h3 {
            color: #e8b154;
            font-size: 30px;
            margin-bottom: 20px;
        }

        .block_ac .text-box div {
            font-size: 18px;
            line-height: 1.6;
        }


        @media (max-width: 768px) {
            .content-box {
                flex-direction: row;
                align-items: center;
                text-align: center;
            }

            .image-box,
            .text-box {
                width: 100% !important;
            }

            .text-box h3 {
                font-size: 1.2em;
            }

            .block_ac .content-box {
                width: 90%;
                background: transparent;
                border: 1px solid transparent;
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                padding: 20px;
                border-radius: 15px;
                box-shadow: none;
            }
            .block_ac .text-box h3 {
    color: #e8b154;
    font-size: 30px;
    margin-bottom: 20px;
    margin-top: 20px;
}
        }
    </style>


    <div class="actualites_title">
        <br/>
        <div class="text-center">
            <img src="{{ asset("assets/Backoffice/images/logo-fcpm.png") }}" />
            <h3 class="title-page" style="color:white;">Mot du président</h3>
        </div>
    </div>
    <div class="row block_ac">
        <div class="text-center mob content-box">
            <div class="image-box col-md-3">
                {% if mot.img !='' %}
                    <img src="{{ asset(mot.img) }}" alt="">
                {% else %}
                    <img src="{{ asset("/assets/Backoffice/images/fcpm.png") }}" alt="">
                {% endif %}
            </div>

            <div class="text-box col-md-9">
                <h3>{{ mot.titreFr }}</h3>
                <div>
                    {{ mot.textFr|raw }}
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block js %}

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>


{% endblock %}