templates/application/whileresume/website/page_article.html.twig line 1

Open in your IDE?
  1. {% extends 'application/whileresume/website/layout-social.html.twig' %}
  3. {% set paramArticle = getCoreToolsList("article") %}
  5. {% block title %}{{ article.title }}{% endblock title %}
  6. {% block description %}{{ article.shortDescription }}{% endblock description %}
  7. {% block robots %}index,follow{% endblock robots %}
  8. {% block meta_social %}{{ parent() }}{% include "/vitrine/components/socialmedia_articles.html.twig" with { 'social_type':'article','article':article } %}{% endblock meta_social %}
  9. {% block meta %}{{ parent() }}{% if article.author is not null and article.author is not empty %}<meta name="author" content="{{ article.author }}" />{% endif %}{% endblock meta %}
  10. {% block canonical %}{% include "/vitrine/lexend/articles/components/canonical.html.twig" with {'article':article} %}{% endblock canonical %}
  12. {% block css %}
  13.     {{ parent() }}
  14.     <style>
  15.         /* ═══════════════════════════════════════════════════════════════
  16.            PAGE ARTICLE — pattern jobs/show (1 colonne max-width 880px)
  17.         ═══════════════════════════════════════════════════════════════ */
  18.         .article-layout{display:block;max-width:880px;margin:0 auto}
  20.         /* ─── Header card (titre + meta) ─── */
  21.         .article-card-main{position:relative;background:#fff;border-radius:16px;box-shadow:0 4px 20px 0 rgba(0,0,0,0.06);overflow:hidden;margin-bottom:14px}
  22.         .article-card-cover{position:relative;width:100%;height:180px;background:linear-gradient(135deg,#6C3AED 0%,#8B5CF6 50%,#A78BFA 100%);overflow:hidden}
  23.         .article-card-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  24.         .article-card-cover-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.1) 0%,rgba(0,0,0,.55) 100%)}
  25.         @media(max-width:480px){.article-card-cover{height:140px}}
  27.         .article-card-head{padding:20px 24px 18px}
  28.         @media(max-width:480px){.article-card-head{padding:16px 18px 14px}}
  30.         .article-card-title{font-size:24px;font-weight:800;color:#1E1B2E;line-height:1.25;letter-spacing:-0.02em;margin:0 0 10px}
  31.         @media(min-width:768px){.article-card-title{font-size:28px}}
  32.         @media(max-width:480px){.article-card-title{font-size:22px}}
  34.         .article-card-subtitle{font-size:15px;color:#4B5563;line-height:1.5;margin:0 0 14px}
  35.         @media(max-width:480px){.article-card-subtitle{font-size:14px}}
  37.         .article-card-meta{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:0}
  38.         .article-card-meta-item{display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border-radius:100px;background:#F3F4F6;font-size:12px;color:#4B5563;font-weight:500}
  39.         .article-card-meta-item svg{width:12px;height:12px;flex-shrink:0;color:#6B7280}
  40.         .article-card-meta-featured{background:#FEF3C7;color:#92400E;font-weight:600}
  41.         .article-card-meta-featured svg{color:currentColor}
  43.         /* ─── TOC sommaire flottant (bas à gauche, minimaliste) ─── */
  44.         .article-toc-fab{
  45.             position:fixed;
  46.             left:20px;
  47.             bottom:20px;
  48.             z-index:100;
  49.         }
  50.         @media(max-width:991px){
  51.             .article-toc-fab{left:16px;bottom:16px}
  52.         }
  54.         /* Bouton FAB (état fermé) */
  55.         .article-toc-trigger{
  56.             display:inline-flex;align-items:center;gap:8px;
  57.             background:#1E1B2E;
  58.             color:#fff;
  59.             border:none;
  60.             border-radius:100px;
  61.             padding:11px 18px 11px 14px;
  62.             font-size:13px;font-weight:600;
  63.             font-family:inherit;
  64.             cursor:pointer;
  65.             box-shadow:0 8px 24px rgba(30,27,46,.28),0 2px 6px rgba(30,27,46,.18);
  66.             transition:transform .2s ease,box-shadow .2s ease,background .15s ease;
  67.         }
  68.         .article-toc-trigger:hover{
  69.             transform:translateY(-2px);
  70.             box-shadow:0 12px 30px rgba(30,27,46,.35),0 3px 8px rgba(30,27,46,.22);
  71.             background:var(--theme-color,#6C3AED);
  72.         }
  73.         .article-toc-trigger-icon{
  74.             display:inline-flex;align-items:center;justify-content:center;
  75.             width:24px;height:24px;border-radius:50%;
  76.             background:rgba(255,255,255,.15);
  77.             flex-shrink:0;
  78.         }
  79.         .article-toc-trigger-icon svg{width:12px;height:12px}
  80.         .article-toc-trigger-count{
  81.             display:inline-flex;align-items:center;justify-content:center;
  82.             min-width:20px;height:20px;padding:0 6px;border-radius:100px;
  83.             background:var(--theme-color,#6C3AED);
  84.             color:#fff;
  85.             font-size:10.5px;font-weight:700;
  86.             line-height:1;
  87.             margin-left:2px;
  88.         }
  89.         .article-toc-trigger.has-active .article-toc-trigger-count{
  90.             background:#fff;
  91.             color:var(--theme-color,#6C3AED);
  92.         }
  93.         @media(max-width:540px){
  94.             .article-toc-trigger-label{display:none}
  95.             .article-toc-trigger{padding:11px 12px}
  96.         }
  98.         /* Panneau (état ouvert) */
  99.         .article-toc-panel{
  100.             position:absolute;
  101.             left:0;
  102.             bottom:calc(100% + 10px);
  103.             width:320px;
  104.             max-width:calc(100vw - 40px);
  105.             background:#fff;
  106.             border-radius:16px;
  107.             box-shadow:0 16px 48px rgba(0,0,0,.18),0 4px 12px rgba(0,0,0,.08);
  108.             opacity:0;
  109.             transform:translateY(8px) scale(.96);
  110.             transform-origin:bottom left;
  111.             pointer-events:none;
  112.             transition:opacity .2s ease,transform .2s ease;
  113.             overflow:hidden;
  114.         }
  115.         .article-toc-fab.is-open .article-toc-panel{
  116.             opacity:1;
  117.             transform:translateY(0) scale(1);
  118.             pointer-events:auto;
  119.         }
  120.         @media(max-width:540px){
  121.             .article-toc-panel{width:calc(100vw - 32px);max-width:340px}
  122.         }
  124.         .article-toc-panel-header{
  125.             display:flex;align-items:center;gap:10px;
  126.             padding:14px 16px;
  127.             border-bottom:1px solid #F3F4F6;
  128.         }
  129.         .article-toc-panel-icon{
  130.             display:inline-flex;align-items:center;justify-content:center;
  131.             width:28px;height:28px;border-radius:8px;
  132.             background:#F5F3FF;
  133.             color:var(--theme-color,#6C3AED);
  134.             flex-shrink:0;
  135.         }
  136.         .article-toc-panel-icon svg{width:13px;height:13px}
  137.         .article-toc-panel-label{
  138.             font-size:11px;font-weight:700;
  139.             color:#1E1B2E;
  140.             text-transform:uppercase;letter-spacing:.08em;
  141.             flex:1;margin:0;
  142.         }
  143.         .article-toc-panel-close{
  144.             background:transparent;border:0;
  145.             color:#9CA3AF;cursor:pointer;
  146.             padding:4px;line-height:1;
  147.             display:inline-flex;
  148.             border-radius:6px;
  149.             transition:background .15s,color .15s;
  150.         }
  151.         .article-toc-panel-close:hover{background:#F3F4F6;color:#1E1B2E}
  152.         .article-toc-panel-close svg{width:14px;height:14px}
  154.         .article-toc-panel-body{
  155.             padding:14px 16px;
  156.             max-height:60vh;
  157.             overflow-y:auto;
  158.         }
  159.         .article-toc-panel-body::-webkit-scrollbar{width:4px}
  160.         .article-toc-panel-body::-webkit-scrollbar-thumb{background:#E5E7EB;border-radius:4px}
  162.         .article-summary ul,.article-summary ol{padding-left:0;margin:0;list-style:none}
  163.         .article-summary li{font-size:13px;line-height:1.5;margin-bottom:6px;font-weight:500;position:relative;padding-left:14px}
  164.         .article-summary li::before{content:"";position:absolute;left:0;top:8px;width:5px;height:5px;border-radius:50%;background:#D1D5DB;transition:background .15s ease,transform .15s ease}
  165.         .article-summary li:hover::before{background:var(--theme-color,#6C3AED);transform:scale(1.4)}
  166.         .article-summary li a{color:#4B5563;text-decoration:none;transition:color .15s ease;display:block}
  167.         .article-summary li a:hover{color:var(--theme-color,#6C3AED)}
  168.         .article-summary li.active>a{color:var(--theme-color,#6C3AED);font-weight:700}
  169.         .article-summary li.active::before{background:var(--theme-color,#6C3AED);transform:scale(1.4)}
  170.         .article-summary ul ul,.article-summary ol ol{margin-top:6px;padding-left:14px}
  172.         /* Backdrop discret (clic en dehors pour fermer) */
  173.         .article-toc-backdrop{
  174.             position:fixed;inset:0;
  175.             background:transparent;
  176.             z-index:99;
  177.             opacity:0;
  178.             pointer-events:none;
  179.             transition:opacity .2s ease;
  180.         }
  181.         .article-toc-backdrop.is-visible{
  182.             opacity:1;
  183.             pointer-events:auto;
  184.         }
  186.         /* ─── Contenu de l'article ─── */
  187.         .article-card-content{background:#fff;border-radius:16px;box-shadow:0 4px 20px 0 rgba(0,0,0,0.06);overflow:hidden;margin-bottom:14px}
  188.         .article-card-section{padding:24px}
  189.         @media(max-width:480px){.article-card-section{padding:18px}}
  191.         .article-content{font-size:15px;line-height:1.75;color:#374151}
  192.         .article-content h2{font-size:22px;font-weight:700;color:#1E1B2E;margin:28px 0 12px;line-height:1.3;letter-spacing:-0.01em;scroll-margin-top:80px}
  193.         .article-content h2:first-child{margin-top:0}
  194.         .article-content h3{font-size:18px;font-weight:700;color:#1E1B2E;margin:22px 0 10px;line-height:1.3;scroll-margin-top:80px}
  195.         .article-content h4{font-size:16px;font-weight:700;color:#1E1B2E;margin:18px 0 8px}
  196.         .article-content p{margin-bottom:14px}
  197.         .article-content a{color:var(--theme-color,#6C3AED);text-decoration:none;font-weight:500}
  198.         .article-content a:hover{text-decoration:underline}
  199.         .article-content ul,.article-content ol{padding-left:24px;margin-bottom:14px}
  200.         .article-content li{margin-bottom:6px}
  201.         .article-content img{max-width:100%;height:auto;border-radius:12px;margin:16px 0}
  202.         .article-content blockquote{border-left:4px solid var(--theme-color,#6C3AED);padding:10px 18px;margin:16px 0;background:#F5F3FF;border-radius:0 8px 8px 0;font-style:italic;color:#4B5563}
  203.         .article-content code{background:#F3F4F6;padding:2px 6px;border-radius:4px;font-size:13px;color:#D6336C;font-family:"SF Mono",Menlo,Monaco,Consolas,monospace}
  204.         .article-content pre{background:#1E1B2E;color:#F3F4F6;padding:18px;border-radius:10px;overflow-x:auto;margin:16px 0;font-size:13px;line-height:1.6}
  205.         .article-content pre code{background:transparent;color:inherit;padding:0}
  206.         .article-content table{width:100%;border-collapse:collapse;margin:16px 0;font-size:14px}
  207.         .article-content th,.article-content td{padding:10px 12px;border:1px solid #E5E7EB;text-align:left}
  208.         .article-content th{background:#F9FAFB;font-weight:700;color:#1E1B2E}
  210.         /* ─── Tags en bas du contenu ─── */
  211.         .article-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:24px;padding-top:18px;border-top:1px solid #F3F4F6}
  212.         .article-tag{display:inline-flex;align-items:center;padding:5px 11px;border-radius:100px;background:#F5F3FF;color:var(--theme-color,#6C3AED);font-size:12px;font-weight:600;text-decoration:none;transition:background .15s,transform .15s}
  213.         .article-tag:hover{background:#EDE9FE;transform:translateY(-1px);color:var(--theme-color,#6C3AED)}
  214.         .article-tag::before{content:"#";opacity:.6;margin-right:1px}
  216.         /* ─── CTA inline (Recruteur / Candidat) ─── */
  217.         .article-cta{position:relative;border-radius:18px;padding:24px;margin-bottom:14px;background:linear-gradient(135deg,#6C3AED 0%,#8B5CF6 50%,#A78BFA 100%);overflow:hidden;box-shadow:0 10px 30px -8px rgba(108,58,237,.35)}
  218.         .article-cta::before{content:"";position:absolute;top:-40px;right:-40px;width:180px;height:180px;background:radial-gradient(circle,rgba(255,255,255,.15) 0%,transparent 70%);pointer-events:none}
  219.         .article-cta::after{content:"";position:absolute;bottom:-60px;left:-60px;width:200px;height:200px;background:radial-gradient(circle,rgba(255,255,255,.08) 0%,transparent 70%);pointer-events:none}
  220.         .article-cta-eyebrow{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:.1em;background:rgba(255,255,255,.18);padding:5px 12px;border-radius:100px;margin-bottom:12px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);position:relative;z-index:2}
  221.         .article-cta-eyebrow svg{width:12px;height:12px}
  222.         .article-cta-title{font-size:20px;font-weight:800;color:#fff;line-height:1.25;letter-spacing:-0.01em;margin:0 0 18px;position:relative;z-index:2}
  223.         @media(min-width:768px){.article-cta-title{font-size:24px}}
  224.         .article-cta-grid{display:grid;grid-template-columns:1fr;gap:12px;position:relative;z-index:2}
  225.         @media(min-width:640px){.article-cta-grid{grid-template-columns:1fr 1fr;gap:14px}}
  226.         .article-cta-side{background:rgba(255,255,255,.97);border-radius:14px;padding:18px;display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s}
  227.         .article-cta-side:hover{transform:translateY(-2px);box-shadow:0 12px 24px -8px rgba(0,0,0,.18)}
  228.         .article-cta-side-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
  229.         .article-cta-side-icon{width:38px;height:38px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#EDE9FE,#DDD6FE);color:var(--theme-color,#6C3AED);flex-shrink:0}
  230.         .article-cta-side-icon svg{width:18px;height:18px}
  231.         .article-cta-side-label{font-size:11px;font-weight:700;color:var(--theme-color,#6C3AED);text-transform:uppercase;letter-spacing:.08em;margin:0}
  232.         .article-cta-side-heading{font-size:15px;font-weight:700;color:#1E1B2E;line-height:1.3;margin:0 0 8px}
  233.         .article-cta-side-text{font-size:13px;color:#6B7280;line-height:1.5;margin:0 0 14px;flex:1}
  234.         .article-cta-side-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--theme-color,#6C3AED);color:#fff;text-decoration:none;padding:11px 16px;border-radius:10px;font-size:13px;font-weight:700;letter-spacing:.01em;transition:background .15s,transform .15s}
  235.         .article-cta-side-btn:hover{background:#5B21B6;color:#fff;transform:translateX(2px)}
  236.         .article-cta-side-btn svg{width:14px;height:14px;transition:transform .15s}
  237.         .article-cta-side-btn:hover svg{transform:translateX(2px)}
  239.         /* ─── Articles similaires (style identique aux jobs) ─── */
  240.         .similar-section-title{font-size:11px;font-weight:700;color:#9CA3AF;text-transform:uppercase;letter-spacing:.08em;margin:32px 0 12px;padding-left:4px;display:inline-flex;align-items:center;gap:8px}
  241.         .similar-card{background:#fff;border-radius:14px;padding:14px;box-shadow:0 0 16px 0 rgba(0,0,0,0.04);margin-bottom:10px;display:flex;align-items:center;gap:14px;text-decoration:none;color:inherit;transition:transform .15s,box-shadow .2s}
  242.         .similar-card:hover{transform:translateY(-1px);box-shadow:0 4px 20px rgba(108,58,237,.1);color:inherit}
  243.         .similar-card-logo{width:50px;height:50px;border-radius:12px;background:linear-gradient(135deg,#EDE9FE,#DDD6FE);display:flex;align-items:center;justify-content:center;color:var(--theme-color,#6C3AED);flex-shrink:0;overflow:hidden}
  244.         .similar-card-logo img{width:100%;height:100%;object-fit:cover;border-radius:8px}
  245.         .similar-card-logo svg{width:24px;height:24px;opacity:.9}
  246.         .similar-card-info{flex:1;min-width:0}
  247.         .similar-card-title{font-size:14px;font-weight:700;color:#1E1B2E;line-height:1.3;margin:0 0 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  248.         .similar-card-meta{font-size:12px;color:#6B7280;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:8px}
  249.         .similar-card-meta-sep{display:inline-block;width:3px;height:3px;border-radius:50%;background:#D1D5DB;flex-shrink:0}
  250.         .similar-card-arrow{flex-shrink:0;color:#9CA3AF;transition:color .15s,transform .15s}
  251.         .similar-card:hover .similar-card-arrow{color:var(--theme-color,#6C3AED);transform:translateX(2px)}
  252.         .similar-card-arrow svg{width:18px;height:18px}
  254.         /* ─── Section "Offres recommandées" (cross-sell article -> jobs) ─── */
  255.         .recommended-jobs-header{
  256.             display:flex;align-items:center;justify-content:space-between;gap:10px;
  257.             margin:32px 0 12px;padding-left:4px;flex-wrap:wrap;
  258.         }
  259.         .recommended-jobs-header .similar-section-title{margin:0}
  260.         .recommended-jobs-icon{
  261.             display:inline-flex;align-items:center;justify-content:center;
  262.             width:22px;height:22px;border-radius:6px;
  263.             background:#F5F3FF;
  264.             color:var(--theme-color,#6C3AED);
  265.             flex-shrink:0;
  266.         }
  267.         .recommended-jobs-icon svg{width:11px;height:11px}
  268.         .recommended-jobs-all{
  269.             display:inline-flex;align-items:center;gap:4px;
  270.             font-size:12px;font-weight:600;
  271.             color:var(--theme-color,#6C3AED);
  272.             text-decoration:none;
  273.             padding:5px 10px;border-radius:100px;
  274.             border:1px dashed rgba(108,58,237,.35);
  275.             transition:background .15s,border-style .15s,transform .15s;
  276.         }
  277.         .recommended-jobs-all:hover{
  278.             background:#F5F3FF;
  279.             border-style:solid;
  280.             color:var(--theme-color,#6C3AED);
  281.             transform:translateX(2px);
  282.         }
  283.         .recommended-jobs-all svg{width:11px;height:11px}
  285.         /* Grille des cards jobs (style identique au composant _jobs_content.html.twig) */
  286.         .recommended-jobs-grid{margin-bottom:14px}
  288.         .recommended-jobs-grid .job-card{
  289.             display:flex;flex-direction:column;gap:.75rem;
  290.             height:100%;
  291.             padding:1.25rem;
  292.             background:#fff;
  293.             border:1px solid #e6e8ec;
  294.             border-radius:14px;
  295.             text-decoration:none;color:inherit;
  296.             transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;
  297.         }
  298.         .recommended-jobs-grid .job-card:hover{
  299.             transform:translateY(-2px);
  300.             box-shadow:0 8px 24px rgba(20,24,40,.08);
  301.             border-color:#d6d9e0;
  302.             text-decoration:none;color:inherit;
  303.         }
  304.         .recommended-jobs-grid .job-card__header{display:flex;align-items:center;gap:.75rem}
  305.         .recommended-jobs-grid .job-card__logo{
  306.             width:44px;height:44px;
  307.             border-radius:10px;
  308.             object-fit:cover;
  309.             background:#f4f5f8;
  310.             flex-shrink:0;
  311.         }
  312.         .recommended-jobs-grid .job-card__logo--placeholder{
  313.             display:flex;align-items:center;justify-content:center;
  314.             font-weight:700;color:#6b7280;
  315.             background:linear-gradient(135deg,#eef2ff,#f5f3ff);
  316.         }
  317.         .recommended-jobs-grid .job-card__company{
  318.             display:flex;flex-direction:column;
  319.             min-width:0;
  320.         }
  321.         .recommended-jobs-grid .job-card__company-name{
  322.             font-weight:600;font-size:.9rem;color:#111827;
  323.             white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  324.         }
  325.         .recommended-jobs-grid .job-card__location{
  326.             font-size:.8rem;color:#6b7280;
  327.             display:inline-flex;align-items:center;gap:.25rem;
  328.         }
  329.         .recommended-jobs-grid .job-card__summary{
  330.             font-size:.875rem;color:#4b5563;
  331.             margin:0;line-height:1.45;
  332.             display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  333.             overflow:hidden;
  334.         }
  335.         .recommended-jobs-grid .job-card__footer{
  336.             display:flex;flex-wrap:wrap;gap:.375rem;
  337.             margin-top:auto;padding-top:.5rem;
  338.         }
  339.         .recommended-jobs-grid .job-card__tag{
  340.             font-size:.72rem;font-weight:500;
  341.             padding:.25rem .55rem;
  342.             border-radius:999px;
  343.             background:#f3f4f6;color:#374151;
  344.         }
  345.         .recommended-jobs-grid .job-card__tag--accent{
  346.             background:#eef2ff;color:#4338ca;
  347.         }
  349.         /* Bouton retour vers la liste */
  350.         .article-back-link{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;background:#fff;border:1px solid #E5E7EB;border-radius:10px;font-size:12px;font-weight:600;color:#4B5563;text-decoration:none;margin-bottom:14px;transition:border-color .15s,color .15s}
  351.         .article-back-link:hover{border-color:var(--theme-color,#6C3AED);color:var(--theme-color,#6C3AED)}
  352.         .article-back-link svg{width:13px;height:13px}
  353.     </style>
  354. {% endblock css %}
  356. {% block body %}
  357.     <div class="article-layout">
  359.         {# ═══ Card principale : titre + meta + cover ═══ #}
  360.         <article class="article-card-main">
  362.             {# Cover (si image) #}
  363.             {% if article.image.name is not null %}
  364.                 <div class="article-card-cover">
  365.                     <img src="{{ vich_uploader_asset(article, 'imageFile') }}" alt="{{ article.title }}" />
  366.                     <div class="article-card-cover-overlay"></div>
  367.                 </div>
  368.             {% endif %}
  370.             <div class="article-card-head">
  371.                 <h1 class="article-card-title">{{ article.title }}</h1>
  373.                 {% if article.subtitle is not empty %}
  374.                     <p class="article-card-subtitle">{{ article.subtitle }}</p>
  375.                 {% endif %}
  377.                 <div class="article-card-meta">
  378.                     {% if article.author is not null and article.author is not empty %}
  379.                         <span class="article-card-meta-item">
  380.                             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  381.                                 <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/>
  382.                             </svg>
  383.                             {{ article.author }}
  384.                         </span>
  385.                     {% endif %}
  387.                     {#if article.pageslug is not empty %}
  388.                         <span class="article-card-meta-item">
  389.                             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  390.                                 <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/>
  391.                             </svg>
  392.                             {{ article.pageslug }}
  393.                         </span>
  394.                     {% endif %#}
  395.                 </div>
  396.             </div>
  397.         </article>
  399.         {# ═══ Sommaire flottant en bas à gauche (FAB) ═══ #}
  400.         {% set summaryHtml = autosummary(article.description) %}
  401.         {% if summaryHtml is not empty %}
  402.             <div class="article-toc-fab" id="articleTocFab">
  403.                 {# Panneau (au-dessus du bouton, masqué par défaut) #}
  404.                 <div class="article-toc-panel" id="articleTocPanel" role="dialog" aria-label="{{ 'article.summary.title'|trans({}, 'vitrine-lexend') }}">
  405.                     <div class="article-toc-panel-header">
  406.                         <span class="article-toc-panel-icon">
  407.                             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  408.                                 <line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/>
  409.                             </svg>
  410.                         </span>
  411.                         <span class="article-toc-panel-label">{{ 'article.summary.title'|trans({}, 'vitrine-lexend') }}</span>
  412.                         <button type="button" class="article-toc-panel-close" id="articleTocClose" aria-label="Close">
  413.                             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
  414.                                 <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
  415.                             </svg>
  416.                         </button>
  417.                     </div>
  418.                     <div class="article-toc-panel-body">
  419.                         <div class="summary article-summary">{{ summaryHtml|raw }}</div>
  421.                         {% if is_granted('ROLE_SUPER_ADMIN') %}
  422.                             <div style="margin-top:12px;padding-top:10px;border-top:1px solid #F3F4F6;">
  423.                                 <a href="{{ path('bo_articles_edit',{'id':article.id}) }}"
  424.                                    style="font-size:11px;font-weight:600;color:#DC2626;text-transform:uppercase;letter-spacing:.06em;text-decoration:none;">
  425.                                     <i class="feather-edit-2 me-1"></i>{{ 'article.summary.edit'|trans({}, 'vitrine-lexend') }}
  426.                                 </a>
  427.                             </div>
  428.                         {% endif %}
  429.                     </div>
  430.                 </div>
  432.                 {# Bouton FAB (toujours visible) #}
  433.                 <button type="button" class="article-toc-trigger" id="articleTocTrigger" aria-expanded="false">
  434.                     <span class="article-toc-trigger-icon">
  435.                         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
  436.                             <line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/>
  437.                         </svg>
  438.                     </span>
  439.                     <span class="article-toc-trigger-label">{{ 'article.summary.title'|trans({}, 'vitrine-lexend') }}</span>
  440.                     <span class="article-toc-trigger-count" id="articleTocCount">·</span>
  441.                 </button>
  442.             </div>
  443.             <div class="article-toc-backdrop" id="articleTocBackdrop"></div>
  444.         {% endif %}
  446.         {# ═══ Contenu de l'article ═══ #}
  447.         <div class="article-card-content">
  448.             <div class="article-card-section">
  449.                 <div id="single-post" class="post-content article-content">
  450.                     {{ contentArticle(autosummaryID(article.description))|raw }}
  451.                 </div>
  453.                 {# Tags #}
  454.                 {% if article.tags is not empty %}
  455.                     <div class="article-tags">
  456.                         {% for tag in article.tags|split(',') %}
  457.                             {% set t = tag|trim %}
  458.                             {% if t is not empty %}
  459.                                 <span class="article-tag">{{ t }}</span>
  460.                             {% endif %}
  461.                         {% endfor %}
  462.                     </div>
  463.                 {% endif %}
  464.             </div>
  465.         </div>
  467.         {# ═══ CTA Recruteur / Candidat ═══ #}
  468.         {% if getEnv("KERNEL_APPLICATION") == "whileresume" and app.request.locale in ['fr','en'] %}
  469.             <div class="article-cta">
  470.                 <span class="article-cta-eyebrow">
  471.                     <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
  472.                         <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>
  473.                     </svg>
  474.                     Whileresume
  475.                 </span>
  477.                 <h2 class="article-cta-title">
  478.                     {% if app.request.locale == 'fr' %}
  479.                         Talents et entreprises se rencontrent ici.
  480.                     {% else %}
  481.                         Where talent meets fast-growing companies.
  482.                     {% endif %}
  483.                 </h2>
  485.                 <div class="article-cta-grid">
  486.                     <div class="article-cta-side">
  487.                         <div class="article-cta-side-head">
  488.                             <span class="article-cta-side-icon">
  489.                                 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  490.                                     <rect x="2" y="7" width="20" height="14" rx="2" ry="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/>
  491.                                 </svg>
  492.                             </span>
  493.                             <span class="article-cta-side-label">{{ app.request.locale == 'fr' ? 'Recruteur' : 'Recruiter' }}</span>
  494.                         </div>
  495.                         <h3 class="article-cta-side-heading">
  496.                             {{ app.request.locale == 'fr' ? "Recrutez des profils d'exception, plus vite." : 'Hire exceptional talent, faster.' }}
  497.                         </h3>
  498.                         <p class="article-cta-side-text">
  499.                             {% if app.request.locale == 'fr' %}
  500.                                 Accédez aux meilleurs talents du marché et connectez-vous directement à des candidats qualifiés en quête de leur prochain défi.
  501.                             {% else %}
  502.                                 Get access to top market talent and connect directly with qualified candidates ready for their next challenge.
  503.                             {% endif %}
  504.                         </p>
  505.                         <a href="{{ path('whileresume_business_' ~ app.request.locale) }}" class="article-cta-side-btn">
  506.                             {{ app.request.locale == 'fr' ? 'Je recrute' : "I'm recruiting" }}
  507.                             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
  508.                                 <line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/>
  509.                             </svg>
  510.                         </a>
  511.                     </div>
  513.                     <div class="article-cta-side">
  514.                         <div class="article-cta-side-head">
  515.                             <span class="article-cta-side-icon">
  516.                                 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  517.                                     <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/>
  518.                                 </svg>
  519.                             </span>
  520.                             <span class="article-cta-side-label">{{ app.request.locale == 'fr' ? 'Candidat' : 'Candidate' }}</span>
  521.                         </div>
  522.                         <h3 class="article-cta-side-heading">
  523.                             {{ app.request.locale == 'fr' ? 'Trouvez le job qui vous ressemble.' : 'Find the job that fits you.' }}
  524.                         </h3>
  525.                         <p class="article-cta-side-text">
  526.                             {% if app.request.locale == 'fr' %}
  527.                                 On vous accompagne dans la recherche de votre poste idéal au sein des entreprises les plus prometteuses du marché.
  528.                             {% else %}
  529.                                 We support you in finding your ideal position within the most promising companies on the market.
  530.                             {% endif %}
  531.                         </p>
  532.                         <a href="{{ path('whileresume_resume_' ~ app.request.locale) }}" class="article-cta-side-btn">
  533.                             {{ app.request.locale == 'fr' ? 'Je cherche un job' : "I'm looking for a job" }}
  534.                             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
  535.                                 <line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/>
  536.                             </svg>
  537.                         </a>
  538.                     </div>
  539.                 </div>
  540.             </div>
  541.         {% endif %}
  543.         {% if article.ctaHTML is not empty %}{{ article.ctaHTML|raw }}{% endif %}
  545.         {# ═══ Articles similaires ═══ #}
  546.         {% if similarArticles is defined and similarArticles is not empty %}
  547.             <h4 class="similar-section-title">
  548.                 {{ app.request.locale == 'fr' ? 'Articles similaires' : 'Similar articles' }} · {{ similarArticles|length }}
  549.             </h4>
  550.             {% for sa in similarArticles %}
  552.                 {# Construction de l'URL article (idem que dans list.html.twig) #}
  553.                 {% set prefix = "" %}
  554.                 {% set urlSa = path('cvs_website_article',{'slug': sa.slug}) %}
  555.                 {% if app.request.locale != default_locale %}
  556.                     {% set urlSa = path('locale_cvs_website_article',{'_locale':app.request.locale,'slug': sa.slug}) %}
  557.                     {% set prefix = "/" ~ app.request.locale %}
  558.                 {% endif %}
  559.                 {% if sa.pageslug3 is not empty %}
  560.                     {% set urlSa = prefix ~ '/' ~ sa.pageslug ~ '/' ~ sa.pageslug2 ~ '/' ~ sa.pageslug3 %}
  561.                 {% elseif sa.pageslug2 is not empty %}
  562.                     {% set urlSa = prefix ~ '/' ~ sa.pageslug ~ '/' ~ sa.pageslug2 %}
  563.                 {% elseif sa.pageslug is not empty %}
  564.                     {% set urlSa = prefix ~ '/' ~ sa.pageslug %}
  565.                 {% endif %}
  567.                 <a href="{{ urlSa }}" class="similar-card">
  568.                     <div class="similar-card-logo">
  569.                         {% if sa.image.name is not null %}
  570.                             <img src="{{ vich_uploader_asset(sa, 'imageFile') }}" alt="">
  571.                         {% else %}
  572.                             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  573.                                 <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/>
  574.                                 <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/>
  575.                             </svg>
  576.                         {% endif %}
  577.                     </div>
  578.                     <div class="similar-card-info">
  579.                         <div class="similar-card-title">{{ sa.title }}</div>
  580.                         <div class="similar-card-meta">
  581.                             <span>{{ sa.publishedAt|date("d M Y") }}</span>
  582.                             {% if sa.author is not null and sa.author is not empty %}
  583.                                 <span class="similar-card-meta-sep"></span>
  584.                                 <span>{{ sa.author }}</span>
  585.                             {% endif %}
  586.                             {% if sa.pageslug is not empty %}
  587.                                 <span class="similar-card-meta-sep"></span>
  588.                                 <span>{{ sa.pageslug }}</span>
  589.                             {% endif %}
  590.                         </div>
  591.                     </div>
  592.                     <span class="similar-card-arrow">
  593.                         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  594.                             <polyline points="9 18 15 12 9 6"/>
  595.                         </svg>
  596.                     </span>
  597.                 </a>
  598.             {% endfor %}
  599.         {% endif %}
  601.         {# ═══ Jobs aléatoires (style identique au composant _jobs_content) ═══ #}
  602.         {% if recommendedJobs is defined and recommendedJobs is not empty %}
  603.             <div class="recommended-jobs-header">
  604.                 <h4 class="similar-section-title" style="margin-bottom:0">
  605.                     <span class="recommended-jobs-icon">
  606.                         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  607.                             <rect x="2" y="7" width="20" height="14" rx="2" ry="2"/>
  608.                             <path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/>
  609.                         </svg>
  610.                     </span>
  611.                     {{ app.request.locale == 'fr' ? 'Découvrez nos offres' : 'Discover our jobs' }} · {{ recommendedJobs|length }}
  612.                 </h4>
  613.                 <a href="{% if app.request.locale == 'en' %}{{ path('whileresume_jobs_list') }}{% else %}{{ path('locale_whileresume_jobs_list',{'_locale':app.request.locale}) }}{% endif %}"
  614.                    class="recommended-jobs-all">
  615.                     {{ app.request.locale == 'fr' ? 'Voir toutes les offres' : 'See all jobs' }}
  616.                     <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
  617.                         <polyline points="9 18 15 12 9 6"/>
  618.                     </svg>
  619.                 </a>
  620.             </div>
  622.             <div class="row g-3 recommended-jobs-grid">
  623.                 {% for k in recommendedJobs %}
  624.                     <div class="col-md-6 col-lg-4">
  625.                         <a href="{% if k.locale == 'fr' %}{{ path('locale_cvs_application_job_show',{'_locale':app.request.locale,'slug':k.slug}) }}{% else %}{{ path('cvs_application_job_show',{'slug':k.slug}) }}{% endif %}" class="job-card">
  626.                             <div class="job-card__header">
  627.                                 {% if k.image and k.image.name %}
  628.                                     <img src="{{ vich_uploader_asset(k, 'imageFile') }}" alt="{{ k.companyName }}" class="job-card__logo">
  629.                                 {% else %}
  630.                                     <div class="job-card__logo job-card__logo--placeholder">
  631.                                         {{ k.companyName|default('?')|slice(0, 1)|upper }}
  632.                                     </div>
  633.                                 {% endif %}
  634.                                 <div class="job-card__company">
  635.                                     <span class="job-card__company-name">{{ k.jobTitle }}</span>
  636.                                     <span class="job-card__location">
  637.                                         <i class="fas fa-map-marker-alt"></i>
  638.                                         {{ k.city }}{% if k.country %}, {{ k.country }}{% endif %}
  639.                                     </span>
  640.                                 </div>
  641.                             </div>
  643.                             {% set summary = k.jobSummary ?: k.shortDescription %}
  644.                             {% if summary %}
  645.                                 <p class="job-card__summary">{{ summary|striptags|slice(0, 140) }}{% if summary|length > 140 %}…{% endif %}</p>
  646.                             {% endif %}
  648.                             <div class="job-card__footer">
  649.                                 {% if k.employmentType %}<span class="job-card__tag">{{ k.employmentType }}</span>{% endif %}
  650.                                 {% if k.remoteWork %}<span class="job-card__tag job-card__tag--accent">{{ k.remoteWork }}</span>{% endif %}
  651.                             </div>
  652.                         </a>
  653.                     </div>
  654.                 {% endfor %}
  655.             </div>
  656.         {% endif %}
  658.     </div>
  659. {% endblock body %}
  661. {% block footer_js %}
  662.     {{ parent() }}
  663.     <script>
  664.         (function() {
  665.             var fab       = document.getElementById('articleTocFab');
  666.             var trigger   = document.getElementById('articleTocTrigger');
  667.             var panel     = document.getElementById('articleTocPanel');
  668.             var closeBtn  = document.getElementById('articleTocClose');
  669.             var backdrop  = document.getElementById('articleTocBackdrop');
  670.             var countEl   = document.getElementById('articleTocCount');
  672.             if (!fab || !trigger) return;
  674.             // ── Ouvrir / fermer le panneau ──
  675.             function openPanel(){
  676.                 fab.classList.add('is-open');
  677.                 if (backdrop) backdrop.classList.add('is-visible');
  678.                 trigger.setAttribute('aria-expanded', 'true');
  679.             }
  680.             function closePanel(){
  681.                 fab.classList.remove('is-open');
  682.                 if (backdrop) backdrop.classList.remove('is-visible');
  683.                 trigger.setAttribute('aria-expanded', 'false');
  684.             }
  685.             function togglePanel(){
  686.                 if (fab.classList.contains('is-open')) closePanel(); else openPanel();
  687.             }
  689.             trigger.addEventListener('click', function(e){ e.stopPropagation(); togglePanel(); });
  690.             if (closeBtn) closeBtn.addEventListener('click', closePanel);
  691.             if (backdrop) backdrop.addEventListener('click', closePanel);
  693.             // Échap pour fermer
  694.             document.addEventListener('keydown', function(e){
  695.                 if (e.key === 'Escape' && fab.classList.contains('is-open')) closePanel();
  696.             });
  698.             // Clic en dehors (au cas où, pour les contextes sans backdrop)
  699.             document.addEventListener('click', function(e){
  700.                 if (!fab.classList.contains('is-open')) return;
  701.                 if (panel && !panel.contains(e.target) && !trigger.contains(e.target)) closePanel();
  702.             });
  704.             // ── Scroll spy + compteur ──
  705.             var summaryLinks = document.querySelectorAll('.article-summary a[href^="#"]');
  706.             if (countEl) {
  707.                 countEl.textContent = summaryLinks.length || '·';
  708.             }
  709.             if (!summaryLinks.length) return;
  711.             var targets = [];
  712.             summaryLinks.forEach(function(link) {
  713.                 var id = link.getAttribute('href').replace('#', '');
  714.                 var target = document.getElementById(id);
  715.                 if (target) targets.push({ link: link, target: target });
  716.             });
  717.             if (!targets.length) return;
  719.             function onScroll() {
  720.                 var scrollY = window.scrollY + 120;
  721.                 var current = null;
  722.                 var currentIndex = 0;
  723.                 targets.forEach(function(item, i) {
  724.                     if (item.target.offsetTop <= scrollY) {
  725.                         current = item;
  726.                         currentIndex = i;
  727.                     }
  728.                 });
  729.                 summaryLinks.forEach(function(l) { l.parentElement.classList.remove('active'); });
  730.                 if (current) {
  731.                     current.link.parentElement.classList.add('active');
  732.                     if (countEl) {
  733.                         countEl.textContent = (currentIndex + 1) + '/' + targets.length;
  734.                         trigger.classList.add('has-active');
  735.                     }
  736.                 } else {
  737.                     if (countEl) countEl.textContent = targets.length;
  738.                     trigger.classList.remove('has-active');
  739.                 }
  740.             }
  742.             window.addEventListener('scroll', onScroll, { passive: true });
  743.             onScroll();
  745.             // Ferme le panneau quand on clique sur un lien d'ancre
  746.             summaryLinks.forEach(function(link){
  747.                 link.addEventListener('click', function(){
  748.                     setTimeout(closePanel, 150);
  749.                 });
  750.             });
  751.         })();
  752.     </script>
  753. {% endblock footer_js %}