{% extends 'vitrine/layout.html.twig' %}{% set paramArticle = getCoreToolsList("article") %}{% block title %}{{ article.shortTitle }}{% endblock title %}{% block description %}{{ article.shortDescription }}{% endblock description %}{% block robots %}index,follow{% endblock robots %}{% block meta_social %}{{ parent() }}{% include "/vitrine/components/socialmedia_articles.html.twig" with { 'social_type':'article','article':article } %}{% endblock meta_social %}{% block meta %}{{ parent() }}{% if article.author is not null %}{% if article.author is not empty %}<meta name="author" content="{{ article.author }}" />{% endif %}{% endif %}{% endblock meta %}{% block canonical %}{% include "/vitrine/articles/components/canonical.html.twig" with {'article':article} %}{% endblock canonical %}{% block header_languages %}{% include "/vitrine/articles/components/header_languages.html.twig" with {'article':article} %}{% endblock header_languages %}{% block footer_languages %}{% include "/vitrine/articles/components/footer_languages.html.twig" with {'article':article} %}{% endblock footer_languages %}{% block body %}<section class="pb-90 inner-page-hero blog-page-section"><div class="container"><div class="row justify-content-center"><div class="col-md-8 col-12"><div class="post-content"><div class="single-post-title text-center"><h1 class="s-46 w-700">{{ article.title }}</h1><div class="blog-post-meta mt-35"><ul class="post-meta-list ico-10">{% if article.author is not null %}<li><p class="p-md w-500">{{ article.author }} </p></li>{% else %}<li><p class="p-md w-500">{{ websitename }} </p></li>{% endif %}<li><p class="p-md"> {{ "Mis à jour"|translateLocale(arrayTranslate) }} : {{ article.updatedAt|format_date(pattern='dd MMMM yyyy',locale=app.request.locale) }}</p></li>{% if is_granted("ROLE_SUPER_ADMIN") %}<li><p class="p-md"> <a href="{{ path('backoffice_articles_edit',{'id':article.id}) }}" style="color:red;">Edit</a></p></li>{% endif %}</ul><div style="margin-top:20px;">{% if article.category is not null %}{% if article.category.parent == 0 %}{% if article.category.category is not null %}<a class="catparent" href="{% if app.request.locale == "en" %}{{ path('blog_articles_parents',{'slug':article.category.category.slug}) }}{% else %}{{ path('locale_blog_articles_parents',{'_locale':app.request.locale,'slug':article.category.category.slug}) }}{% endif %}">{% if article.category.category.titleMenu is not empty %}{{ article.category.category.titleMenu }}{% else %}{{ article.category.category.title }}{% endif %}</a><a class="catparent" href="{% if app.request.locale == "en" %}{{ path('blog_articles_parents_category',{'slug':article.category.category.slug,'slug2':article.category.slug}) }}{% else %}{{ path('locale_blog_articles_parents_category',{'_locale':app.request.locale,'slug':article.category.category.slug,'slug2':article.category.slug}) }}{% endif %}">{% if article.category.titleMenu is not empty %}{{ article.category.titleMenu }}{% else %}{{ article.category.title }}{% endif %}</a>{% endif %}{% else %}<a class="catparent" href="{% if app.request.locale == "en" %}{{ path('blog_articles_parents',{'slug':article.category.slug}) }}{% else %}{{ path('locale_blog_articles_parents',{'_locale':app.request.locale,'slug':article.category.slug}) }}{% endif %}">{% if article.category.titleMenu is not empty %}{{ article.category.titleMenu }}{% else %}{{ article.category.title }}{% endif %}</a>{% endif %}{% endif %}</div></div></div><div class="blog-post-img py-50">{% if article.image.name is not null %}<figure class="image"><picture><source srcset="{{ vich_uploader_asset(article, 'imageFile') }}" type="image/webp"><img class="img-fluid r-16" src="{{ vich_uploader_asset(article, 'imageFile') }}" width="852" height="852" alt="{{ article.imageAlt }}" title="{{ article.imageTitle }}" /></picture></figure>{% else %}<figure class="image"><picture><source srcset="/uploads/default_article.webp" type="image/webp"><img class="img-fluid r-16" src="/uploads/default_article.webp" width="852" height="852" alt="{{ article.imageAlt }}" title="{{ article.imageTitle }}" /></picture></figure>{% endif %}</div>{% if article.descriptionStart is not null %}<div id="single-post">{{ autosummaryID(replaceInWebP(replaceLinksRedir(article.descriptionStart)))|raw }}</div>{% endif %}<div class="summary"><div class="summary__title">{{ "Sommaire"|translateLocale(arrayTranslate) }}</div>{{ autosummary(replaceInWebP(replaceLinksRedir(article.description)))|raw }}</div>{% if article.messageAlert is not empty %}<div style="background-color: #B4D9F4; padding:20px; border-radius:20px; display: flex; align-items: flex-start; gap: 15px; margin-top:15px; margin-bottom:15px;">/!\ {{ article.messageAlert|raw }} /!\</div>{% endif %}<div id="single-post">{{ autosummaryID(replaceInWebP(replaceLinksRedir(article.description)))|raw }}</div>{% if article.authorArticle is not null %}<div style="background-color: #F9F6FF; padding:20px; border-radius:20px; display: flex; align-items: flex-start; gap: 15px;"><img src="/uploads/authors/{{ article.authorArticle.image.name }}"alt="{{ article.authorArticle.imageAlt }}"title="{{ article.authorArticle.imageTitle }}"style="width: 60px; height: 60px; border-radius: 50%; object-fit: cover; flex-shrink: 0;" /><div style="flex: 1;"><div style="display: flex; align-items: center; gap: 10px; margin-bottom: 8px;"><strong>Rédigé par {{ article.authorArticle.author }}</strong>{% if article.authorArticle.linkedinUrl %}<a href="{{ article.authorArticle.linkedinUrl }}" target="_blank" style="color: #0077B5; font-size: 18px; text-decoration: none;" title="Profil LinkedIn de {{ article.authorArticle.author }}"><i class="fab fa-linkedin"></i></a>{% endif %}</div>{{ article.authorArticle.description|nl2br|raw }}</div></div>{% endif %}</div></div></div></div></section>{% endblock body %}{% block css %}<style>.catparent {background-color:#E8C9FF;margin:3px;padding:6px;border-radius: 6px;}</style><style>.author-card {background-color: #F9F6FF;padding: 20px;border-radius: 20px;display: flex;align-items: flex-start;gap: 15px;}.author-image {width: 60px;height: 60px;border-radius: 50%;object-fit: cover;flex-shrink: 0;}.author-content {flex: 1;}.author-header {display: flex;align-items: center;gap: 10px;margin-bottom: 8px;}.author-name {font-weight: bold;margin: 0;}.linkedin-icon {color: #0077B5;font-size: 18px;text-decoration: none;transition: color 0.3s ease;}.linkedin-icon:hover {color: #005885;}.author-description {margin: 0;line-height: 1.5;}/* Version responsive */@media (max-width: 480px) {.author-card {flex-direction: column;text-align: center;}.author-image {align-self: center;}}</style><style>.summary__title {font-size:28px !important;margin-bottom:10px !important;font-weight: 800 !important;}.summary ul, dl, ol {list-style-type: square;list-style-position: inside;padding-top:15px;padding-bottom:15px;padding-left: 30px;padding-right:30px;background-color: #F9F6FF;border-radius: 20px;width: fit-content;margin-top:10px;margin-bottom:10px;}.summary ul > li {margin-bottom: 8px;line-height: 1.4;}.summary ul ul {margin: 0;padding-top:9px;padding-bottom:9px;}#single-post img {width: 100% !important;margin-left:auto;margin-right:auto;margin-bottom:20px;margin-top:20px;}#single-post div, p {font-size:18px !important;}#single-post h2 {font-size:28px !important;margin-bottom:10px !important;font-weight: 800 !important;}#single-post h3 {font-size:20px !important;margin-bottom:10px !important;font-weight: 800 !important;}#single-post h4 {font-size:18px !important;margin-bottom:10px !important;font-weight: 800 !important;}#single-post ul, dl, ol {list-style-type: square; /* puce en carré */list-style-position: inside; /* la puce est dessinée dans la zone de contenu du <ul> */padding: 30px; /* haut/bas 12px, gauche/droite 20px → on décale tout vers l’intérieur */background-color: #F9F6FF;border-radius: 20px;width: fit-content;margin-bottom:20px;}#single-post ul > li {margin-bottom: 8px; /* espace entre chaque ligne pour plus de lisibilité */line-height: 1.4; /* pour être sûr que la puce ne chevauche pas verticalement */}/* 1. Style du conteneur <table> */#single-post table {background-color: #F9F6FF; /* même fond que pour les listes */border-radius: 20px; /* coins arrondis identiques */width: fit-content; /* largeur qui épousera le contenu */border-collapse: separate; /* nécessaire pour que les coins arrondis s’appliquent */border-spacing: 0; /* pas d’espace entre cellules si on veut un tout cohérent */overflow: hidden; /* clippe tout ce qui dépasse—utile si on ajoute un border-radius */margin-bottom: 16px; /* espace sous le tableau, à adapter selon besoin */}/* 2. Supprimer ou personnaliser les bordures internes */#single-post table,#single-post table th,#single-post table td {border: none; /* pas de bordure “par défaut” */}/* 3. Espacement intérieur au sein des cellules */#single-post table th,#single-post table td {padding: 12px 16px; /* ajustez selon vos goûts : ici 12px en haut/bas, 16px à gauche/droite */text-align: left; /* on aligne le texte à gauche (peut être modifié) */line-height: 1.4; /* pour respecter le même “respiration” verticale que vos listes */}/* 4. (Optionnel) Si vous voulez ajouter une séparation visuelle entre lignes ou colonnes */#single-post table tr + tr {border-top: 1px solid rgba(0,0,0,0.05); /* trait très léger entre chaque ligne */}#single-post table th + th,#single-post table td + td {border-left: 1px solid rgba(0,0,0,0.05); /* trait vertical entre colonnes */}/* 5. (Optionnel) Style des en-têtes (th) */#single-post table th {background-color: #EDE8FF; /* un violet encore plus pâle pour distinguer l’en-tête */font-weight: 600; /* un peu plus gras pour les titres de colonnes */}/* 6. (Optionnel) Gestion responsive (pour éviter que le tableau déborde) */#single-post .table-wrapper {overflow-x: auto; /* permet le scroll horizontal si le tableau est trop large */}</style>{% endblock css %}