{% extends 'base.html.twig' %}
{% block title %}
    {{ pagePublic.title }} | OPHAM
{% endblock %}
{% 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;
            text-decoration:italic;
        }
        /*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 %}
    {{ html|raw }}
{% endblock %}
{% block asset_js %}
 <script src="{{ asset('assets/js/aos.js') }}"></script>
    <script>
        AOS.init({
            duration: 1500,
            once: true
        });

    </script>
{% endblock %}