{% extends 'base.html.twig' %}
{% block asset_css %}
    <link href="{{ asset('assets/css/aos.css') }}" rel="stylesheet">
    <style>
        span li{
            list-style: none;
        }
        span li::before {
            content: "\25AA";
            color: #87AB11;
            font-size:20px;
            font-weight: bold;
            display: inline-block;
            width: 1em;
            margin-left:10px;
        }
        p{
            color:black;
        }
        .card_article{
            margin-top: 5%;
            margin-left:10%;
            margin-right:10%;
            margin-bottom :5%;
        }
        .text_legend{
            color: #183b6d;
            font-style: italic;
            font-weight:bold;
        }
        /*Titre*/
        .titre_article{
            color:#001d55;
            font-size:24px;
            font-weight:bold;
            line-height: 1.5;
        }
        /*Depuis .....*/
        .text_jumbotron{
            color: #000c4c;
            font-size:16px;
        }
        .card_hr{
            position:absolute;
            background-color: #87AB11 !important;
            padding:1.5px !important;
            border-radius:10px;
            width:100%;
            margin-top:5px;
            left:40%;
            right:40%;
        }
        .card_tryptique:hover{
            transform:translateX(30px);
        }
        .card_tryptique:hover hr{
            background-color:white;
        }
        .card_tryptique:hover .card_title{
            color:white;
        }
        .card_tryptique{
            border-left : 5px solid #007b31 !important;
            transition: transform 0.3s ease;
        }

        @media only screen and (max-width: 990px) {
            .card_article {
                margin: 10px !important;
            }
        }
        @media only screen and (max-width: 1280px) {
            .div_logo{
                display:none !important;
            }
            .titre_article{
                margin-bottom: 20px !important;
            }
        }
    </style>
{% endblock %}
{% block body %}
    <!--Breadcrumb-->
    <section class="article" style="padding: 0 0 30px 0;"><!-- banner -->
        <div class="container-fluid">
            <div class="row">
                <div class="col-12 col-sm12 col-md-12 col-lg-12 col-xl-12 p-0"><img class="w-100" src="../assets/images/banner/banner-3.png" alt="banner-3"></div>
            </div>
        </div>
        <!-- / banner -->
        <div class="bannerimg cover-image bg-background3" data-bs-image-src="../assets/images/banners/banner2.jpg">
            <div class="header-text mb-0">
                <div class="container">
                    <div class="text-center">
                        <h1 class="">{{ actualite.libelle }}</h1>
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="{{ path('app_public_page') }}" aria-invalid="true">Acceuil</a></li>
                            <li class="breadcrumb-item"><a aria-invalid="true">Actualité</a></li>
                            <li class="breadcrumb-item active" aria-current="page">{{ actualite.libelle }}</li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--/Breadcrumb-->
    <!--Add listing-->
    <section class="" style="padding-top: inherit">
        <div class="container">
            <div class="row">
                <div class="col-xl-12 col-lg-12 col-md-12">
                    <div class="card">
                        <div class="card-body card_article">
                            <div class="d-flex justify-content-between">
                                <div>
                                    <p class="card-title titre_article">{{ actualite.libelle }}</p>
                                </div>
                                <div class="d-flex justify-content-end div_logo"><img src="../../../assets/images/actualite/logo_opham.png" alt="logo" width="60%"></div>
                            </div>
                            <div class="row"><!-- Right side -->
                                <div class="col-md-12">
                                    {{ html|raw }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--/Add listing-->
{% endblock %}
{% block asset_js %}
    <script src="{{ asset('assets/js/aos.js') }}"></script>
    <script>
        AOS.init({
            duration: 1500,
            once: true
        });

    </script>
{% endblock %}