templates/application/whileresume/website/candidates/landing.html.twig line 1

Open in your IDE?
  1. {% extends 'application/whileresume/website/layout-social.html.twig' %}
  3. {% set isFR = app.request.locale == 'fr' %}
  5. {% set _keys = [
  6.     'hero_search_placeholder','hero_popular_label',
  7.     'hero_byline_jobs','hero_byline_apps','hero_byline_free','hero_kbd_enter',
  8.     'hero_cta_signup','hero_cta_login',
  9.     'search_loading','search_no_results','search_no_results_hint','search_results_count','search_view_all','search_view_offer','search_clear',
  10.     'how_title',
  11.     'apps_ios','apps_android','apps_web','apps_ios_desc','apps_android_desc','apps_web_desc',
  12.     'articles_title','articles_view_all','read_article',
  13.     'final_title',
  14.     'final_recruiter_label','final_recruiter_title','final_recruiter_desc',
  15.     'final_candidate_label','final_candidate_title','final_candidate_desc',
  16.     'final_candidate','final_recruiter'
  17. ] %}
  18. {% set t = {} %}
  19. {% for k in _keys %}
  20.     {% set t = t|merge({(k): ('homepage.' ~ k)|trans({}, 'whr-public')}) %}
  21. {% endfor %}
  23. {% block title %}{{ landing.shortTitle }}{% endblock %}
  24. {% block description %}{{ landing.shortDescription }}{% endblock %}
  25. {% block robots %}index,follow{% endblock %}
  26. {% block canonical %}{#% include "/vitrine/lexend/components/languages/canonical_classic.html.twig" %#}{% endblock %}
  28. {% block css %}
  29.     {{ parent() }}
  30.     <style>
  31.         :root{
  32.             --wr-bg:#FBFCFE;
  33.             --wr-bg-2:#F4F6FB;
  34.             --wr-card:#FFFFFF;
  35.             --wr-violet:#8A63C1;
  36.             --wr-violet-2:#A98AD3;
  37.             --wr-violet-soft:#F2EDFA;
  38.             --wr-violet-softer:#F8F4FD;
  39.             --wr-violet-dark:#6B47A6;
  40.             --wr-ink:#1E1B2E;
  41.             --wr-ink-2:#374151;
  42.             --wr-muted:#6B7280;
  43.             --wr-muted-2:#9CA3AF;
  44.             --wr-line:#EEF1F7;
  45.             --wr-line-2:#E5E9F0;
  46.             --wr-shadow:0 1px 2px rgba(30,27,46,.04),0 4px 16px rgba(30,27,46,.04);
  47.             --wr-shadow-hover:0 4px 8px rgba(138,99,192,.08),0 12px 32px rgba(138,99,192,.1);
  48.             --wr-acc-yellow:#FEF3C7;  --wr-acc-yellow-fg:#B45309;
  49.             --wr-acc-green:#D1FAE5;   --wr-acc-green-fg:#047857;
  50.             --wr-acc-pink:#FCE7F3;    --wr-acc-pink-fg:#BE185D;
  51.             --wr-acc-blue:#DBEAFE;    --wr-acc-blue-fg:#1E40AF;
  52.             --wr-acc-orange:#FED7AA;  --wr-acc-orange-fg:#C2410C;
  53.             --wr-acc-violet:#EDE9FE;  --wr-acc-violet-fg:#6D28D9;
  54.             --wr-acc-cyan:#CFFAFE;    --wr-acc-cyan-fg:#0E7490;
  55.         }
  57.         body .main-content.right-chat-active{padding-right:0!important}
  58.         body .main-content{padding-right:0!important}
  59.         body .right-chat{display:none!important}
  60.         body .middle-sidebar-bottom .middle-sidebar-left{padding-right:0!important;max-width:none!important;width:100%!important}
  61.         body .middle-sidebar-bottom{max-width:none!important}
  63.         .wr{margin:-15px -15px 0;background:var(--wr-bg);color:var(--wr-ink);font-family:inherit;font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}
  64.         @media(max-width:991px){.wr{margin:0 -15px}}
  65.         .wr *{box-sizing:border-box}
  66.         .wr a{color:inherit;text-decoration:none}
  68.         .wr-section{padding:80px 32px;background:var(--wr-bg);position:relative}
  69.         .wr-section--tight{padding:48px 32px}
  70.         @media(max-width:768px){.wr-section{padding:56px 20px}.wr-section--tight{padding:36px 20px}}
  71.         .wr-section + .wr-section::before{
  72.             content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  73.             width:80px;height:1px;
  74.             background:linear-gradient(90deg,transparent,var(--wr-line-2),transparent);
  75.         }
  76.         .wr-container{max-width:1200px;margin:0 auto;position:relative}
  78.         .wr-eyebrow{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:100px;background:var(--wr-violet-soft);color:var(--wr-violet-dark);font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.12em;margin-bottom:22px}
  79.         .wr-eyebrow-dot{width:6px;height:6px;border-radius:50%;background:var(--wr-violet);animation:wrPulse 2.4s ease-in-out infinite}
  80.         @keyframes wrPulse{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.3)}}
  82.         .wr-title{font-family:inherit !important;font-weight:700 !important;font-size:28px;line-height:1.15;letter-spacing:-0.025em;color:var(--wr-ink) !important;margin:0 auto 16px;max-width:1200px;text-align:center}
  83.         @media(min-width:768px){.wr-title{font-size:34px}}
  84.         @media(min-width:1024px){.wr-title{font-size:40px}}
  85.         .wr-title--sm{font-size:24px}
  86.         @media(min-width:768px){.wr-title--sm{font-size:30px}}
  87.         .wr-title em{font-style:normal;font-weight:700 !important;color:var(--wr-violet) !important}
  88.         .wr-lede{font-size:17px;line-height:1.55;font-weight:400;color:var(--wr-ink-2) !important;margin:0 auto;max-width:680px}
  89.         .wr-section-head{text-align:center;margin-bottom:56px}
  91.         @keyframes wrFadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
  92.         @keyframes wrPulse2{0%{box-shadow:0 0 0 0 rgba(16,185,129,.4)}70%{box-shadow:0 0 0 8px rgba(16,185,129,0)}100%{box-shadow:0 0 0 0 rgba(16,185,129,0)}}
  94.         .reveal{opacity:0;transform:translateY(24px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
  95.         .reveal.is-revealed{opacity:1;transform:translateY(0)}
  96.         .reveal--left{transform:translateX(-32px) translateY(0)}
  97.         .reveal--left.is-revealed{transform:translateX(0)}
  98.         .reveal--right{transform:translateX(32px) translateY(0)}
  99.         .reveal--right.is-revealed{transform:translateX(0)}
  100.         .reveal--scale{transform:scale(.96);opacity:0}
  101.         .reveal--scale.is-revealed{transform:scale(1);opacity:1}
  102.         .reveal[data-reveal-delay="1"]{transition-delay:.08s}
  103.         .reveal[data-reveal-delay="2"]{transition-delay:.16s}
  104.         .reveal[data-reveal-delay="3"]{transition-delay:.24s}
  105.         .reveal[data-reveal-delay="4"]{transition-delay:.32s}
  106.         @media(prefers-reduced-motion:reduce){.reveal{opacity:1!important;transform:none!important;transition:none!important}}
  108.         /* ═══ HERO ═══ */
  109.         .hero{position:relative;background:var(--wr-bg);padding:24px 32px 0;overflow:hidden}
  110.         @media(max-width:768px){.hero{padding:18px 18px 0}}
  111.         .hero::before{content:"";position:absolute;top:-260px;right:-180px;width:560px;height:560px;background:radial-gradient(circle,rgba(138,99,192,.14) 0%,transparent 65%);pointer-events:none;filter:blur(50px)}
  112.         .hero::after{content:"";position:absolute;top:120px;left:-180px;width:480px;height:480px;background:radial-gradient(circle,rgba(138,99,192,.09) 0%,transparent 65%);pointer-events:none;filter:blur(50px)}
  113.         .hero-inner{position:relative;z-index:2;max-width:1200px;margin:0 auto;text-align:center}
  115.         .hero-badge{display:inline-flex;align-items:center;gap:8px;padding:7px 16px;border-radius:100px;background:var(--wr-violet-soft);color:var(--wr-violet-dark);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;margin-bottom:10px;opacity:0;transform:translateY(8px);animation:wrFadeUp .8s ease forwards}
  116.         .hero-badge-dot{width:6px;height:6px;border-radius:50%;background:var(--wr-violet);animation:wrPulse2 2s ease infinite}
  118.         /* H1 — on force la couleur et la taille pour battre les styles globaux du layout social */
  119.         .wr .hero-title{font-family:inherit !important;font-weight:700 !important;font-size:32px;line-height:1.05;letter-spacing:-0.04em;color:var(--wr-ink) !important;margin:0 auto 12px;width:100%;max-width:1200px;opacity:0;transform:translateY(12px);animation:wrFadeUp .9s cubic-bezier(.2,.7,.2,1) .15s forwards;text-align:center}
  120.         @media(min-width:768px){.wr .hero-title{font-size:48px;letter-spacing:-0.045em}}
  121.         @media(min-width:1100px){.wr .hero-title{font-size:57px;letter-spacing:-0.045em}}
  122.         .wr .hero-title-accent{color:var(--wr-violet) !important;font-weight:700 !important}
  124.         .wr .hero-lede{font-size:16px;line-height:1.5;color:var(--wr-ink-2) !important;font-weight:400;margin:0 auto 16px;max-width:680px;opacity:0;animation:wrFadeUp .9s ease .4s forwards;text-align:center}
  125.         @media(min-width:768px){.wr .hero-lede{font-size:18px}}
  126.         .wr .hero-lede-accent{color:var(--wr-violet) !important;font-weight:600}
  128.         .hero-search-wrap{max-width:1200px;margin:0 auto 12px;opacity:0;animation:wrFadeUp .9s ease .55s forwards;position:relative;z-index:5}
  129.         .hero-search{background:var(--wr-card);border-radius:14px;box-shadow:0 0 20px 0 rgba(0,0,0,0.05),0 16px 40px rgba(138,99,192,.06);padding:10px;position:relative}
  130.         .hero-search-inner{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:10px;background:#F9FAFB;border:1px solid #E5E7EB;transition:border-color .2s,background .2s}
  131.         .hero-search-inner:focus-within{border-color:rgba(138,99,192,.4);background:#fff}
  132.         .hero-search-icon{color:var(--wr-muted-2);display:flex;flex-shrink:0}
  133.         .hero-search-icon svg{width:16px;height:16px}
  134.         .hero-search-input{flex:1;border:0;outline:0;background:transparent;font-size:14.5px;font-family:inherit;color:var(--wr-ink);padding:6px 0;min-width:0}
  135.         .hero-search-input::placeholder{color:var(--wr-muted-2)}
  136.         .hero-search-clear{background:none;border:0;color:var(--wr-muted-2);cursor:pointer;padding:4px;display:none;font-family:inherit;border-radius:6px;transition:background .15s,color .15s}
  137.         .hero-search-clear:hover{background:var(--wr-violet-soft);color:var(--wr-violet)}
  138.         .hero-search-clear.is-visible{display:flex;align-items:center}
  139.         .hero-search-clear svg{width:14px;height:14px}
  140.         .hero-search-kbd{display:none;align-items:center;padding:3px 8px;background:#fff;border:1px solid #E5E7EB;border-radius:6px;font-size:10.5px;font-weight:600;color:var(--wr-muted);font-family:inherit;letter-spacing:.02em;white-space:nowrap;flex-shrink:0}
  141.         .hero-search-inner:focus-within .hero-search-kbd{display:inline-flex}
  143.         .hero-jobs-header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 22px 10px;border-bottom:1px solid var(--wr-line);margin-bottom:4px}
  144.         @media(max-width:540px){.hero-jobs-header{padding:12px 16px 8px}}
  145.         .hero-jobs-count{font-size:11.5px;color:var(--wr-muted);text-transform:uppercase;letter-spacing:.08em;font-weight:600}
  146.         .hero-jobs-count strong{color:var(--wr-violet);font-weight:800;font-size:13px;margin-right:4px}
  147.         .hero-jobs-link{font-size:11px;font-weight:700;color:var(--wr-violet);text-transform:uppercase;letter-spacing:.08em;text-decoration:none;display:inline-flex;align-items:center;gap:5px;transition:color .15s,transform .15s}
  148.         .hero-jobs-link:hover{color:var(--wr-violet-dark);text-decoration:none;transform:translateX(2px)}
  149.         .hero-jobs-link svg{width:11px;height:11px}
  150.         .hero-jobs-empty{text-align:center;padding:48px 20px;color:var(--wr-muted)}
  151.         .hero-jobs-empty-icon{width:48px;height:48px;border-radius:14px;background:var(--wr-violet-soft);color:var(--wr-violet);display:inline-flex;align-items:center;justify-content:center;margin-bottom:14px}
  152.         .hero-jobs-empty-icon svg{width:22px;height:22px}
  153.         .hero-jobs-empty-title{font-weight:600;font-size:14px;color:var(--wr-ink);margin:0 0 4px}
  154.         .hero-jobs-empty-hint{font-size:13px;margin:0;color:var(--wr-muted)}
  155.         .hero-jobs-loading{text-align:center;padding:36px 20px;color:var(--wr-muted);font-size:13px;display:flex;align-items:center;justify-content:center;gap:10px}
  156.         .hero-jobs-spinner{width:16px;height:16px;border-radius:50%;border:2px solid var(--wr-violet-soft);border-top-color:var(--wr-violet);animation:wrSpin .7s linear infinite}
  157.         @keyframes wrSpin{to{transform:rotate(360deg)}}
  159.         .hero-popular{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;margin-bottom:18px;opacity:0;animation:wrFadeUp .9s ease .7s forwards}
  160.         .hero-popular-label{font-size:11px;font-weight:600;color:var(--wr-muted);text-transform:uppercase;letter-spacing:.06em;margin-right:4px}
  161.         .hero-popular-pill{display:inline-flex;align-items:center;gap:5px;padding:6px 12px;border-radius:100px;background:var(--wr-violet-soft);color:var(--wr-violet);font-size:12.5px;font-weight:500;font-family:inherit;text-decoration:none;cursor:pointer;border:1px solid transparent;transition:background .15s,border-color .15s,transform .15s,color .15s}
  162.         .hero-popular-pill:hover{background:#EDE9FE;border-color:rgba(138,99,192,.2);transform:translateY(-1px);color:var(--wr-violet);text-decoration:none}
  163.         .hero-popular-pill.is-active{background:var(--wr-violet);color:#fff;border-color:var(--wr-violet)}
  164.         .hero-popular-pill.is-active:hover{background:var(--wr-violet-dark);color:#fff}
  165.         .hero-popular-pill-icon{font-size:13px;line-height:1}
  167.         .hero-cta{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin:24px 0 8px;opacity:0;animation:wrFadeUp .9s ease 1.1s forwards}
  168.         .hero-cta-btn,.hero-cta-btn:link,.hero-cta-btn:visited,.hero-cta-btn:hover,.hero-cta-btn:focus,.hero-cta-btn:active{color:#fff !important;text-decoration:none !important}
  169.         .hero-cta-btn{display:inline-flex;align-items:center;gap:8px;padding:11px 20px;border-radius:11px;font-size:13.5px;font-weight:700;font-family:inherit;line-height:1;background:var(--wr-violet);border:1px solid var(--wr-violet);box-shadow:0 4px 14px rgba(138,99,193,.32);transition:background .15s,border-color .15s,transform .15s,box-shadow .15s}
  170.         .hero-cta-btn:hover{background:var(--wr-violet-dark);border-color:var(--wr-violet-dark);transform:translateY(-2px);box-shadow:0 6px 20px rgba(138,99,193,.4)}
  171.         .hero-cta-btn svg{width:15px;height:15px;flex-shrink:0;stroke:#fff !important;color:#fff !important}
  172.         .hero-cta-btn span{color:#fff !important}
  173.         @media(max-width:540px){.hero-cta{flex-direction:column;align-items:stretch}.hero-cta-btn{justify-content:center}}
  175.         .hero-default-jobs{position:relative;z-index:2;max-width:1200px;margin:0 auto;background:var(--wr-card);border:1px solid var(--wr-line);border-radius:18px;padding:8px 0;box-shadow:var(--wr-shadow);opacity:0;animation:wrFadeUp .9s ease 1s forwards;text-align:left}
  176.         .hero-default-job{display:flex;align-items:center;gap:16px;padding:14px 22px;text-decoration:none;color:inherit;border-bottom:1px solid var(--wr-line);transition:background .15s}
  177.         .hero-default-job:last-child{border-bottom:0}
  178.         .hero-default-job:hover{background:var(--wr-violet-softer);text-decoration:none;color:inherit}
  179.         .hero-default-job-logo{width:42px;height:42px;border-radius:11px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px;overflow:hidden}
  180.         .hero-default-job-logo img{width:100%;height:100%;object-fit:cover}
  181.         .hero-default-job:nth-child(7n+1) .hero-default-job-logo{background:var(--wr-acc-yellow);color:var(--wr-acc-yellow-fg)}
  182.         .hero-default-job:nth-child(7n+2) .hero-default-job-logo{background:var(--wr-acc-green);color:var(--wr-acc-green-fg)}
  183.         .hero-default-job:nth-child(7n+3) .hero-default-job-logo{background:var(--wr-acc-pink);color:var(--wr-acc-pink-fg)}
  184.         .hero-default-job:nth-child(7n+4) .hero-default-job-logo{background:var(--wr-acc-blue);color:var(--wr-acc-blue-fg)}
  185.         .hero-default-job:nth-child(7n+5) .hero-default-job-logo{background:var(--wr-acc-orange);color:var(--wr-acc-orange-fg)}
  186.         .hero-default-job:nth-child(7n+6) .hero-default-job-logo{background:var(--wr-acc-violet);color:var(--wr-acc-violet-fg)}
  187.         .hero-default-job:nth-child(7n+7) .hero-default-job-logo{background:var(--wr-acc-cyan);color:var(--wr-acc-cyan-fg)}
  188.         .hero-default-job-info{flex:1;min-width:0}
  189.         .hero-default-job-title{font-weight:600 !important;font-size:14.5px;color:var(--wr-ink) !important;margin:0 0 2px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  190.         .hero-default-job-meta{font-size:12.5px;color:var(--wr-muted);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:8px}
  191.         .hero-default-job-meta-sep{display:inline-block;width:3px;height:3px;border-radius:50%;background:var(--wr-muted-2);flex-shrink:0}
  192.         .hero-default-job-arrow{flex-shrink:0;color:var(--wr-muted-2);transition:color .15s,transform .15s}
  193.         .hero-default-job-arrow svg{width:15px;height:15px}
  194.         .hero-default-job:hover .hero-default-job-arrow{color:var(--wr-violet);transform:translateX(3px)}
  195.         @media(max-width:768px){.hero-default-jobs{margin:0 -18px;border-radius:14px}.hero-default-job{padding:12px 16px;gap:12px}.hero-default-job-logo{width:36px;height:36px;font-size:13px}.hero-default-job-title{font-size:13.5px}.hero-default-job-meta{font-size:11.5px;gap:6px;flex-wrap:wrap;white-space:normal}}
  197.         /* ═══ HOW IT WORKS ═══ */
  198.         .how-card{background:#F4ECE1;border-radius:24px;padding:32px 24px;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;position:relative}
  199.         @media(max-width:991px){.how-card{grid-template-columns:1fr;gap:8px;padding:24px 16px}}
  200.         @media(min-width:992px){.how-card .how-step + .how-step{border-left:1px solid rgba(28,25,22,.08)}}
  201.         .how-step{display:flex;flex-direction:column;align-items:center;text-align:center;padding:16px 20px;gap:16px}
  202.         .how-step-illu{width:100%;max-width:280px;aspect-ratio:1/1;border-radius:16px;background:rgba(255,255,255,.5);display:flex;align-items:center;justify-content:center;margin-bottom:4px;overflow:hidden}
  203.         .how-step-illu img{width:100%;height:100%;object-fit:contain;display:block}
  204.         .how-step-title{font-weight:700 !important;font-size:18px;line-height:1.3;letter-spacing:-0.01em;color:var(--wr-ink) !important;margin:0}
  205.         @media(min-width:992px){.how-step-title{font-size:20px}}
  206.         .how-step-desc{font-size:14px;line-height:1.55;color:var(--wr-ink-2) !important;margin:0;max-width:320px}
  208.         /* ═══ FEATURES 01-04 ═══ */
  209.         .feat-block{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;margin-bottom:64px}
  210.         .feat-block:last-child{margin-bottom:0}
  211.         @media(max-width:991px){.feat-block{grid-template-columns:1fr;gap:24px;margin-bottom:48px}}
  212.         .feat-block:nth-child(odd) .feat-illu{order:2}
  213.         .feat-block:nth-child(odd) .feat-content{order:1}
  214.         .feat-block:nth-child(even) .feat-illu{order:1}
  215.         .feat-block:nth-child(even) .feat-content{order:2}
  216.         @media(max-width:991px){.feat-block .feat-illu{order:1}.feat-block .feat-content{order:2}}
  217.         .feat-illu{background:#F5EDE3;border-radius:20px;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;color:var(--wr-violet);overflow:hidden;position:relative}
  218.         .feat-illu img{width:100%;height:100%;object-fit:contain;display:block}
  219.         .feat-content{display:flex;flex-direction:column;gap:18px}
  220.         .feat-label{font-size:30px;font-weight:800 !important;color:var(--wr-ink) !important;letter-spacing:-0.02em;margin:0;line-height:1}
  221.         .feat-title{font-weight:700 !important;font-size:24px;line-height:1.2;letter-spacing:-0.02em;color:var(--wr-ink) !important;margin:0}
  222.         @media(min-width:768px){.feat-title{font-size:28px}}
  223.         @media(min-width:1100px){.feat-title{font-size:30px}}
  224.         .feat-desc{display:flex;flex-direction:column;gap:14px}
  225.         .feat-desc p,.feat-desc li,.feat-desc span,.feat-desc div,.feat-desc strong,.feat-desc em{font-size:16px;line-height:1.6;color:var(--wr-ink-2);margin:0;opacity:.85}
  226.         .feat-desc p{margin:0 0 8px}
  227.         .feat-desc p:last-child{margin-bottom:0}
  228.         /* Bloc HTML riche descriptionPage2/3 — forcer 16px sur tout le contenu */
  229.         .wr-rich-description{margin-top:18px;text-align:center;color:var(--wr-muted)}
  230.         .wr-rich-description,
  231.         .wr-rich-description p,
  232.         .wr-rich-description li,
  233.         .wr-rich-description span,
  234.         .wr-rich-description div,
  235.         .wr-rich-description strong,
  236.         .wr-rich-description em,
  237.         .wr-rich-description a{font-size:16px;line-height:1.6}
  238.         .wr-rich-description p{margin:0 0 10px}
  239.         .wr-rich-description p:last-child{margin-bottom:0}
  240.         .feat-desc strong{color:var(--wr-ink);font-weight:700;opacity:1}
  241.         .feat-quote{background:var(--wr-card);border:1px solid var(--wr-line);border-radius:14px;padding:18px 20px;display:flex;flex-direction:column;gap:10px;margin-top:8px}
  242.         .feat-quote-text{font-size:14px;line-height:1.55;color:var(--wr-ink-2);margin:0;font-style:italic}
  243.         .feat-quote-author{display:flex;flex-direction:column}
  244.         .feat-quote-name{font-size:13px;font-weight:700;color:var(--wr-ink);margin:0}
  245.         .feat-quote-role{font-size:12px;color:var(--wr-muted);margin:0}
  247.         /* ═══ APPS ═══ */
  248.         .apps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
  249.         @media(max-width:768px){.apps-grid{grid-template-columns:1fr}}
  250.         .app-card{background:var(--wr-card);border:1px solid var(--wr-line);border-radius:18px;padding:24px;display:flex;flex-direction:column;align-items:flex-start;transition:transform .2s,border-color .2s,box-shadow .2s}
  251.         .app-card:hover{transform:translateY(-3px);border-color:var(--wr-violet-2);box-shadow:var(--wr-shadow-hover);color:inherit;text-decoration:none}
  252.         .app-card-icon{width:48px;height:48px;border-radius:14px;background:var(--wr-violet-soft);color:var(--wr-violet);display:inline-flex;align-items:center;justify-content:center;margin-bottom:18px}
  253.         .app-card-icon svg{width:22px;height:22px}
  254.         .app-card-name{font-weight:500 !important;font-size:18px;letter-spacing:-0.01em;color:var(--wr-ink) !important;margin:0 0 6px}
  255.         .app-card-desc{font-size:13px;line-height:1.5;color:var(--wr-muted);margin:0 0 16px;flex:1}
  256.         .app-card-cta{font-size:12px;font-weight:600;color:var(--wr-violet);text-transform:uppercase;letter-spacing:.1em;display:inline-flex;align-items:center;gap:6px}
  257.         .app-card-cta svg{width:11px;height:11px;transition:transform .15s}
  258.         .app-card:hover .app-card-cta svg{transform:translateX(3px)}
  260.         /* ═══ ARTICLES ═══ */
  261.         .articles-list{display:flex;flex-direction:column;gap:10px;max-width:1200px;margin:0 auto}
  262.         .wr-article{background:var(--wr-card);border-radius:14px;padding:14px;box-shadow:0 0 16px 0 rgba(0,0,0,0.04);display:flex;align-items:center;gap:14px;text-decoration:none;color:inherit;transition:transform .15s,box-shadow .2s}
  263.         .wr-article:hover{transform:translateY(-1px);box-shadow:0 4px 20px rgba(138,99,192,.1);color:inherit;text-decoration:none}
  264.         .wr-article-logo{width:50px;height:50px;border-radius:12px;flex-shrink:0;background:linear-gradient(135deg,#EDE9FE,#DDD6FE);display:flex;align-items:center;justify-content:center;color:var(--wr-violet);overflow:hidden}
  265.         .wr-article-logo svg{width:24px;height:24px;opacity:.9}
  266.         .wr-article-info{flex:1;min-width:0}
  267.         .wr-article-title{font-size:14px;font-weight:700 !important;color:var(--wr-ink) !important;line-height:1.3;margin:0 0 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  268.         .wr-article-meta{font-size:12px;color:var(--wr-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:8px;margin:0}
  269.         .wr-article-meta-sep{display:inline-block;width:3px;height:3px;border-radius:50%;background:#D1D5DB;flex-shrink:0}
  270.         .wr-article-badge{font-size:11px;font-weight:600;color:var(--wr-violet);background:var(--wr-violet-soft);padding:3px 9px;border-radius:100px;white-space:nowrap;flex-shrink:0;text-transform:uppercase;letter-spacing:.04em}
  271.         .wr-article-arrow{flex-shrink:0;color:var(--wr-muted-2);transition:color .15s,transform .15s}
  272.         .wr-article:hover .wr-article-arrow{color:var(--wr-violet);transform:translateX(2px)}
  273.         .wr-article-arrow svg{width:18px;height:18px}
  274.         @media(max-width:540px){.wr-article{padding:12px;gap:10px}.wr-article-logo{width:42px;height:42px}.wr-article-logo svg{width:20px;height:20px}.wr-article-title{font-size:13px}.wr-article-meta{font-size:11px;gap:6px;flex-wrap:wrap;white-space:normal}.wr-article-badge{display:none}}
  275.         .articles-cta{text-align:center;margin-top:36px}
  276.         .articles-cta a{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:11px;background:var(--wr-violet);color:#fff;font-size:13px;font-weight:600;text-decoration:none;box-shadow:0 4px 12px rgba(138,99,192,.3);transition:background .15s,transform .15s,box-shadow .15s}
  277.         .articles-cta a:hover{background:var(--wr-violet-dark);transform:translateY(-2px);box-shadow:0 6px 18px rgba(138,99,192,.4);text-decoration:none;color:#fff}
  278.         .articles-cta svg{width:12px;height:12px;transition:transform .15s}
  279.         .articles-cta a:hover svg{transform:translateX(3px)}
  281.         /* ═══ CTA FINAL ═══ */
  282.         .final-card{position:relative;background:linear-gradient(135deg,#8A63C0 0%,#9D7BCC 100%);border-radius:28px;padding:48px 40px;color:#fff;overflow:hidden;box-shadow:0 20px 60px -12px rgba(138,99,192,.4)}
  283.         @media(max-width:768px){.final-card{padding:32px 22px;border-radius:22px}}
  284.         .final-title{font-weight:800 !important;font-size:28px;line-height:1.15;letter-spacing:-0.02em;color:#fff !important;margin:0 0 36px;max-width:780px}
  285.         @media(min-width:768px){.final-title{font-size:38px}}
  286.         .final-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
  287.         @media(max-width:768px){.final-grid{grid-template-columns:1fr;gap:14px}}
  288.         .final-sub{background:#fff;border-radius:18px;padding:28px;display:flex;flex-direction:column}
  289.         @media(max-width:768px){.final-sub{padding:22px}}
  290.         .final-sub-head{display:flex;align-items:center;gap:14px;margin-bottom:18px}
  291.         .final-sub-icon{width:44px;height:44px;border-radius:11px;background:var(--wr-violet-soft);color:var(--wr-violet);display:flex;align-items:center;justify-content:center;flex-shrink:0}
  292.         .final-sub-icon svg{width:22px;height:22px}
  293.         .final-sub-label{font-size:12.5px;font-weight:700;color:var(--wr-violet);text-transform:uppercase;letter-spacing:.1em}
  294.         .final-sub-title{font-weight:800 !important;font-size:18px;line-height:1.3;letter-spacing:-0.01em;color:var(--wr-ink) !important;margin:0 0 10px}
  295.         .final-sub-desc{font-size:14px;line-height:1.55;color:var(--wr-muted);margin:0 0 24px;flex:1}
  296.         .final-sub-btn{display:flex;align-items:center;justify-content:center;gap:8px;background:var(--wr-violet);color:#fff;padding:14px 18px;border-radius:11px;font-size:14px;font-weight:700;text-decoration:none;transition:background .15s,transform .15s,box-shadow .15s;box-shadow:0 4px 12px rgba(138,99,192,.3)}
  297.         .final-sub-btn:hover{background:var(--wr-violet-dark);color:#fff;transform:translateY(-2px);box-shadow:0 6px 18px rgba(138,99,192,.4);text-decoration:none}
  298.         .final-sub-btn svg{width:14px;height:14px;transition:transform .15s}
  299.         .final-sub-btn:hover svg{transform:translateX(3px)}
  300.     </style>
  301. {% endblock css %}
  303. {% block body %}
  304.     <div class="wr">
  306.         {# ═══════════════ HERO ═══════════════ #}
  307.         <section class="hero" style="padding-top:60px;">
  308.             <div class="hero-inner">
  310.                 <h1 class="hero-title">{{ landing.titlePage|raw }}</h1>
  312.                 <p class="hero-lede">{{ landing.descriptionPage|raw }}</p>
  314.                 {# Pills "Populaire" — au-dessus de la recherche.
  315.                    Le 1er keyword est utilisé comme valeur par défaut du champ de recherche. #}
  316.                 {% set _firstKeyword = '' %}
  317.                 {% if popularKeywords is defined and popularKeywords|length > 0 %}
  318.                     {% set _firstKw = popularKeywords|first %}
  319.                     {% set _firstKeyword = _firstKw.keyword ?? _firstKw.searchKeyword ?? _firstKw.label ?? '' %}
  320.                     <div class="hero-popular">
  321.                         <span class="hero-popular-label">{{ t.hero_popular_label }}</span>
  322.                         {% for kw in popularKeywords|slice(0, 5) %}
  323.                             <button type="button" class="hero-popular-pill{% if loop.first %} is-active{% endif %}"
  324.                                     data-keyword="{{ kw.keyword ?? kw.searchKeyword }}"
  325.                                     data-label="{{ kw.label }}">
  326.                                 {% if kw.icon %}<span class="hero-popular-pill-icon">{{ kw.icon|raw }}</span>{% endif %}
  327.                                 <span>{{ kw.label }}</span>
  328.                             </button>
  329.                         {% endfor %}
  330.                     </div>
  331.                 {% endif %}
  333.                 {# Recherche inline AJAX #}
  334.                 <div class="hero-search-wrap">
  335.                     <div class="hero-search" id="wrHeroSearch"
  336.                          data-search-url="{% if isFR %}{{ path('locale_api_jobs_search',{'_locale':'fr'}) }}{% else %}{{ path('api_jobs_search') }}{% endif %}"
  337.                          data-jobs-list-url="{% if isFR %}{{ path('locale_whileresume_jobs_list',{'_locale':'fr'}) }}{% else %}{{ path('whileresume_jobs_list') }}{% endif %}">
  338.                         <div class="hero-search-inner">
  339.                             <span class="hero-search-icon">
  340.                                 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  341.                                     <circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/>
  342.                                 </svg>
  343.                             </span>
  344.                             <input type="text" name="q" id="wrHeroSearchInput" class="hero-search-input"
  345.                                    placeholder="{{ t.hero_search_placeholder }}"
  346.                                    value="{{ _firstKeyword }}"
  347.                                    autocomplete="off" />
  348.                             <span class="hero-search-kbd">↵ {{ isFR ? 'Entrée' : 'Enter' }}</span>
  349.                             <button type="button" class="hero-search-clear" id="wrHeroSearchClear" aria-label="{{ t.search_clear }}">
  350.                                 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
  351.                                     <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
  352.                                 </svg>
  353.                             </button>
  354.                         </div>
  355.                     </div>
  356.                 </div>
  358.                 {# Liste de jobs — par défaut popularJobsForVisitor #}
  359.                 {% set _heroCount = 0 %}
  360.                 {% set _heroTotal = 0 %}
  361.                 {% if popularJobsForVisitor is defined %}
  362.                     {% for block in popularJobsForVisitor %}
  363.                         {% if block.jobs is defined %}{% set _heroTotal = _heroTotal + block.jobs|length %}{% endif %}
  364.                     {% endfor %}
  365.                 {% endif %}
  367.                 <div class="hero-default-jobs" id="wrHeroJobsList">
  368.                     <div class="hero-jobs-header" id="wrHeroJobsHeader">
  369.                         <span class="hero-jobs-count" id="wrHeroJobsCount">
  370.                             <strong>{{ _heroTotal ?: (totalJobs ?? '') }}</strong>{{ t.search_results_count }}
  371.                         </span>
  372.                         <a href="{% if isFR %}{{ path('locale_whileresume_jobs_list',{'_locale':'fr'}) }}{% else %}{{ path('whileresume_jobs_list') }}{% endif %}" class="hero-jobs-link" id="wrHeroJobsLink">
  373.                             {{ t.search_view_all }}
  374.                             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
  375.                                 <line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/>
  376.                             </svg>
  377.                         </a>
  378.                     </div>
  380.                     <div id="wrHeroJobsBody">
  381.                         {% if popularJobsForVisitor is defined and popularJobsForVisitor|length > 0 %}
  382.                             {% for block in popularJobsForVisitor %}
  383.                                 {% if block.jobs is defined and block.jobs|length > 0 %}
  384.                                     {% for j in block.jobs %}
  385.                                         {% if _heroCount < 6 %}
  386.                                             <a href="#" class="hero-default-job">
  387.                                                 <div class="hero-default-job-logo">
  388.                                                     {{ (j.jobTitle ?? '?')|slice(0,1)|upper }}
  389.                                                 </div>
  390.                                                 <div class="hero-default-job-info">
  391.                                                     <h3 class="hero-default-job-title">{{ j.jobTitle }}</h3>
  392.                                                     <p class="hero-default-job-meta">
  393.                                                         {% if j.city %}<span>{{ j.city }}</span>{% endif %}
  394.                                                         {% if j.employmentType %}
  395.                                                             <span class="hero-default-job-meta-sep"></span>
  396.                                                             <span>{{ j.employmentType }}</span>
  397.                                                         {% endif %}
  398.                                                     </p>
  399.                                                 </div>
  400.                                                 <span class="hero-default-job-arrow">
  401.                                                     <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
  402.                                                 </span>
  403.                                             </a>
  404.                                             {% set _heroCount = _heroCount + 1 %}
  405.                                         {% endif %}
  406.                                     {% endfor %}
  407.                                 {% endif %}
  408.                             {% endfor %}
  409.                         {% endif %}
  410.                     </div>
  411.                 </div>
  413.                 {# CTA pour utilisateurs non connectés #}
  414.                 {% if app.user is null %}
  415.                     <div class="hero-cta">
  416.                         <a href="{{ path('whileresume_resume_' ~ app.request.locale) }}" class="hero-cta-btn">
  417.                             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
  418.                                 <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="8.5" cy="7" r="4"/><line x1="20" y1="8" x2="20" y2="14"/><line x1="23" y1="11" x2="17" y2="11"/>
  419.                             </svg>
  420.                             {{ t.hero_cta_signup }}
  421.                         </a>
  422.                         <a href="{% if isFR %}{{ path('locale_app_login',{'_locale':'fr'}) }}{% else %}{{ path('app_login') }}{% endif %}" class="hero-cta-btn">
  423.                             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
  424.                                 <path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"/><polyline points="10 17 15 12 10 7"/><line x1="15" y1="12" x2="3" y2="12"/>
  425.                             </svg>
  426.                             {{ t.hero_cta_login }}
  427.                         </a>
  428.                     </div>
  429.                 {% endif %}
  431.                 {% if landing.descriptionPage2 or landing.descriptionPage3 %}
  432.                     <div class="wr-rich-description">
  433.                         {% if landing.descriptionPage2 %}<div>{{ landing.descriptionPage2|raw }}</div>{% endif %}
  434.                         {% if landing.descriptionPage3 %}<div>{{ landing.descriptionPage3|raw }}</div>{% endif %}
  435.                     </div>
  436.                 {% endif %}
  438.             </div>
  439.         </section>
  441.         {# ═══════════════ COMMENT ÇA MARCHE ═══════════════ #}
  442.         <section class="wr-section">
  443.             <div class="wr-container">
  444.                 <div class="wr-section-head">
  445.                     <h2 class="wr-title">{{ t.how_title }}</h2>
  446.                 </div>
  448.                 <div class="how-card">
  449.                     <div class="how-step reveal" data-reveal-delay="1">
  450.                         <div class="how-step-illu">
  451.                             <img src="/uploads/rh/mascotte_register.png" alt="{{ landing.titleWork1 }}" loading="lazy">
  452.                         </div>
  453.                         <h3 class="how-step-title">{{ landing.titleWork1|raw }}</h3>
  454.                         <p class="how-step-desc">{{ landing.descriptionWork1|raw }}</p>
  455.                     </div>
  457.                     <div class="how-step reveal" data-reveal-delay="2">
  458.                         <div class="how-step-illu">
  459.                             <img src="/uploads/rh/mascotte_upload2.png" alt="{{ landing.titleWork2 }}" loading="lazy">
  460.                         </div>
  461.                         <h3 class="how-step-title">{{ landing.titleWork2|raw }}</h3>
  462.                         <p class="how-step-desc">{{ landing.descriptionWork2|raw }}</p>
  463.                     </div>
  465.                     <div class="how-step reveal" data-reveal-delay="3">
  466.                         <div class="how-step-illu">
  467.                             <img src="/uploads/rh/mascotte_reunion.png" alt="{{ landing.titleWork3 }}" loading="lazy">
  468.                         </div>
  469.                         <h3 class="how-step-title">{{ landing.titleWork3|raw }}</h3>
  470.                         <p class="how-step-desc">{{ landing.descriptionWork3|raw }}</p>
  471.                     </div>
  472.                 </div>
  473.             </div>
  474.         </section>
  476.         {# ═══════════════ FEATURES 01-04 ═══════════════ #}
  477.         <section class="wr-section">
  478.             <div class="wr-container">
  480.                 {% set _featImages = [
  481.                     '/uploads/rh/mascotte_filtrage3.png',
  482.                     '/uploads/rh/mascotte_upload.png',
  483.                     '/uploads/rh/mascotte_register.png',
  484.                     '/uploads/rh/mascotte_reunion.png'
  485.                 ] %}
  487.                 {% for i in 1..4 %}
  488.                     {% set _label = attribute(landing, 'labelPresentation' ~ i) ?: ('0' ~ i ~ '.') %}
  489.                     {% set _title = attribute(landing, 'titlePresentation' ~ i) %}
  490.                     {% set _desc = attribute(landing, 'descriptionPresentation' ~ i) %}
  491.                     {% set _quote = attribute(landing, 'citationPresentation' ~ i) %}
  492.                     {% set _author = attribute(landing, 'authorPresentation' ~ i) %}
  493.                     {% set _role = attribute(landing, 'rolePresentation' ~ i) %}
  495.                     {% if _title or _desc or _quote %}
  496.                         <div class="feat-block reveal">
  497.                             <div class="feat-illu">
  498.                                 <img src="{{ _featImages[i-1] }}" alt="{{ _title }}" loading="lazy">
  499.                             </div>
  500.                             <div class="feat-content">
  501.                                 {% if _label %}<span class="feat-label">{{ _label }}</span>{% endif %}
  502.                                 {% if _title %}<h3 class="feat-title">{{ _title|raw }}</h3>{% endif %}
  503.                                 {% if _desc %}
  504.                                     <div class="feat-desc">
  505.                                         <p>{{ _desc|raw }}</p>
  506.                                     </div>
  507.                                 {% endif %}
  508.                                 {% if _quote %}
  509.                                     <div class="feat-quote">
  510.                                         <p class="feat-quote-text">{{ _quote|raw }}</p>
  511.                                         {% if _author or _role %}
  512.                                             <div class="feat-quote-author">
  513.                                                 {% if _author %}<p class="feat-quote-name">{{ _author }}</p>{% endif %}
  514.                                                 {% if _role %}<p class="feat-quote-role">{{ _role }}</p>{% endif %}
  515.                                             </div>
  516.                                         {% endif %}
  517.                                     </div>
  518.                                 {% endif %}
  519.                             </div>
  520.                         </div>
  521.                     {% endif %}
  522.                 {% endfor %}
  524.             </div>
  525.         </section>
  527.         {# ═══════════════ APPS ═══════════════ #}
  528.         <section class="wr-section">
  529.             <div class="wr-container">
  530.                 <div class="apps-grid">
  531.                     <a href="{{ isFR ? (ios_fr|default('#')) : (ios_us|default('#')) }}" class="app-card">
  532.                         <span class="app-card-icon">
  533.                             <svg viewBox="0 0 24 24" fill="currentColor"><path d="M17.05 20.28c-.98.95-2.05.8-3.08.35-1.09-.46-2.09-.48-3.24 0-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09l.01-.01zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z"/></svg>
  534.                         </span>
  535.                         <h3 class="app-card-name">{{ t.apps_ios }}</h3>
  536.                         <p class="app-card-desc">{{ t.apps_ios_desc }}</p>
  537.                         <span class="app-card-cta">App Store
  538.                             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
  539.                         </span>
  540.                     </a>
  541.                     <a href="{{ isFR ? (android_fr|default('#')) : (android_us|default('#')) }}" class="app-card">
  542.                         <span class="app-card-icon">
  543.                             <svg viewBox="0 0 24 24" fill="currentColor"><path d="M17.523 15.34c-.583 0-1.06-.477-1.06-1.06 0-.582.477-1.06 1.06-1.06.583 0 1.06.478 1.06 1.06 0 .583-.477 1.06-1.06 1.06m-11.046 0c-.583 0-1.06-.477-1.06-1.06 0-.582.477-1.06 1.06-1.06.583 0 1.06.478 1.06 1.06 0 .583-.477 1.06-1.06 1.06m11.427-6.176l2.114-3.66a.439.439 0 0 0-.16-.6.439.439 0 0 0-.6.16l-2.142 3.71a13.07 13.07 0 0 0-5.116-1.034c-1.823 0-3.55.376-5.116 1.034l-2.14-3.71a.439.439 0 1 0-.76.44l2.113 3.66C2.486 10.78.659 13.658.5 17h23c-.16-3.342-1.987-6.22-5.595-7.836"/></svg>
  544.                         </span>
  545.                         <h3 class="app-card-name">{{ t.apps_android }}</h3>
  546.                         <p class="app-card-desc">{{ t.apps_android_desc }}</p>
  547.                         <span class="app-card-cta">Google Play
  548.                             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
  549.                         </span>
  550.                     </a>
  551.                     <a href="{% if app.request.locale == 'en' %}{{ path('whileresume_homepage') }}{% else %}{{ path('locale_whileresume_homepage',{'_locale':app.request.locale}) }}{% endif %}#register" class="app-card">
  552.                         <span class="app-card-icon">
  553.                             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
  554.                         </span>
  555.                         <h3 class="app-card-name">{{ t.apps_web }}</h3>
  556.                         <p class="app-card-desc">{{ t.apps_web_desc }}</p>
  557.                         <span class="app-card-cta">whileresume.com
  558.                             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
  559.                         </span>
  560.                     </a>
  561.                 </div>
  562.             </div>
  563.         </section>
  565.         {# ═══════════════ ARTICLES ═══════════════ #}
  566.         {% if articles is defined and articles|length > 0 %}
  567.             <section class="wr-section">
  568.                 <div class="wr-container">
  569.                     <div class="wr-section-head">
  570.                         <h2 class="wr-title wr-title--sm">{{ t.articles_title }}</h2>
  571.                     </div>
  573.                     <div class="articles-list">
  574.                         {% for a in articles|slice(0,6) %}
  575.                             {% set prefix = "" %}
  576.                             {% set urlA = path('cvs_website_article',{'slug': a.slug}) %}
  577.                             {% if app.request.locale != default_locale %}
  578.                                 {% set urlA = path('locale_cvs_website_article',{'_locale':app.request.locale,'slug': a.slug}) %}
  579.                                 {% set prefix = "/" ~ app.request.locale %}
  580.                             {% endif %}
  581.                             {% if a.pageslug3 is not empty %}
  582.                                 {% set urlA = prefix ~ '/' ~ a.pageslug ~ '/' ~ a.pageslug2 ~ '/' ~ a.pageslug3 %}
  583.                             {% elseif a.pageslug2 is not empty %}
  584.                                 {% set urlA = prefix ~ '/' ~ a.pageslug ~ '/' ~ a.pageslug2 %}
  585.                             {% elseif a.pageslug is not empty %}
  586.                                 {% set urlA = prefix ~ '/' ~ a.pageslug %}
  587.                             {% endif %}
  589.                             <a href="{{ urlA }}" class="wr-article">
  590.                                 <div class="wr-article-logo">
  591.                                     <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  592.                                         <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/>
  593.                                         <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/>
  594.                                     </svg>
  595.                                 </div>
  596.                                 <div class="wr-article-info">
  597.                                     <h3 class="wr-article-title">{{ a.title }}</h3>
  598.                                     <div class="wr-article-meta">
  599.                                         {% if a.subtitle is not empty %}
  600.                                             <span>{{ a.subtitle|length > 60 ? a.subtitle|slice(0,60) ~ '…' : a.subtitle }}</span>
  601.                                         {% endif %}
  602.                                     </div>
  603.                                 </div>
  604.                                 <span class="wr-article-badge">{{ t.read_article }}</span>
  605.                                 <span class="wr-article-arrow">
  606.                                     <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  607.                                         <polyline points="9 18 15 12 9 6"/>
  608.                                     </svg>
  609.                                 </span>
  610.                             </a>
  611.                         {% endfor %}
  612.                     </div>
  614.                     <div class="articles-cta">
  615.                         <a href="{% if isFR %}{{ path('locale_cvs_website_articles',{'_locale':'fr'}) }}{% else %}{{ path('cvs_website_articles') }}{% endif %}">
  616.                             {{ t.articles_view_all }}
  617.                             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
  618.                         </a>
  619.                     </div>
  620.                 </div>
  621.             </section>
  622.         {% endif %}
  624.         {# ═══════════════ CTA FINAL (visiteurs anonymes uniquement) ═══════════════ #}
  625.         {% if app.user is null %}
  626.             <section class="wr-section">
  627.                 <div class="wr-container">
  628.                     <div class="final-card">
  630.                         <h2 class="final-title">{{ t.final_title }}</h2>
  632.                         <div class="final-grid">
  633.                             {# Recruteur #}
  634.                             <div class="final-sub">
  635.                                 <div class="final-sub-head">
  636.                                 <span class="final-sub-icon">
  637.                                     <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
  638.                                         <rect x="2" y="7" width="20" height="14" rx="2" ry="2"/>
  639.                                         <path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/>
  640.                                     </svg>
  641.                                 </span>
  642.                                     <span class="final-sub-label">{{ t.final_recruiter_label }}</span>
  643.                                 </div>
  644.                                 <h3 class="final-sub-title">{{ t.final_recruiter_title }}</h3>
  645.                                 <p class="final-sub-desc">{{ t.final_recruiter_desc }}</p>
  646.                                 <a href="{{ path('whileresume_business_' ~ app.request.locale) }}" class="final-sub-btn">
  647.                                     {{ t.final_recruiter }}
  648.                                     <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
  649.                                 </a>
  650.                             </div>
  652.                             {# Candidat #}
  653.                             <div class="final-sub">
  654.                                 <div class="final-sub-head">
  655.                                 <span class="final-sub-icon">
  656.                                     <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
  657.                                         <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
  658.                                         <circle cx="12" cy="7" r="4"/>
  659.                                     </svg>
  660.                                 </span>
  661.                                     <span class="final-sub-label">{{ t.final_candidate_label }}</span>
  662.                                 </div>
  663.                                 <h3 class="final-sub-title">{{ t.final_candidate_title }}</h3>
  664.                                 <p class="final-sub-desc">{{ t.final_candidate_desc }}</p>
  665.                                 <a href="{{ path('whileresume_resume_' ~ app.request.locale) }}" class="final-sub-btn">
  666.                                     {{ t.final_candidate }}
  667.                                     <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
  668.                                 </a>
  669.                             </div>
  670.                         </div>
  671.                     </div>
  672.                 </div>
  673.             </section>
  674.         {% endif %}
  676.     </div>
  677. {% endblock body %}
  679. {% block footer_js %}
  680.     {{ parent() }}
  681.     <script>
  682.         (function(){
  683.             var search   = document.getElementById('wrHeroSearch');
  684.             var input    = document.getElementById('wrHeroSearchInput');
  685.             var clearBtn = document.getElementById('wrHeroSearchClear');
  686.             var jobsBody = document.getElementById('wrHeroJobsBody');
  687.             var countEl  = document.getElementById('wrHeroJobsCount');
  688.             var linkEl   = document.getElementById('wrHeroJobsLink');
  689.             if (!search || !input || !jobsBody) return;
  691.             var searchUrl   = search.dataset.searchUrl;
  692.             var jobsListUrl = search.dataset.jobsListUrl;
  694.             var defaultBodyHtml  = jobsBody.innerHTML;
  695.             var defaultCountHtml = countEl ? countEl.innerHTML : '';
  696.             var defaultLinkHref  = linkEl ? linkEl.getAttribute('href') : jobsListUrl;
  698.             var debounceTimer = null;
  699.             var currentRequest = null;
  700.             var lastQuery = '';
  702.             var T = {
  703.                 loading:      '{{ t.search_loading|escape('js') }}',
  704.                 empty:        '{{ t.search_no_results|escape('js') }}',
  705.                 emptyHint:    '{{ t.search_no_results_hint|escape('js') }}',
  706.                 count:        '{{ t.search_results_count|escape('js') }}',
  707.                 viewAll:      '{{ t.search_view_all|escape('js') }}',
  708.                 view:         '{{ t.search_view_offer|escape('js') }}'
  709.             };
  711.             function escHtml(s){
  712.                 if (s == null) return '';
  713.                 return String(s).replace(/[&<>"']/g, function(c){
  714.                     return {'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c];
  715.                 });
  716.             }
  717.             function setHeaderCount(total){
  718.                 if (!countEl) return;
  719.                 countEl.innerHTML = '<strong>' + total + '</strong>' + escHtml(T.count);
  720.             }
  721.             function setHeaderLink(href){ if (!linkEl) return; linkEl.setAttribute('href', href); }
  722.             function setLoading(){
  723.                 jobsBody.innerHTML = '<div class="hero-jobs-loading"><span class="hero-jobs-spinner"></span><span>' + escHtml(T.loading) + '</span></div>';
  724.             }
  725.             function setEmpty(){
  726.                 jobsBody.innerHTML =
  727.                     '<div class="hero-jobs-empty">' +
  728.                     '<div class="hero-jobs-empty-icon">' +
  729.                     '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">' +
  730.                     '<circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>' +
  731.                     '</svg></div>' +
  732.                     '<p class="hero-jobs-empty-title">' + escHtml(T.empty) + '</p>' +
  733.                     '<p class="hero-jobs-empty-hint">' + escHtml(T.emptyHint) + '</p>' +
  734.                     '</div>';
  735.             }
  736.             function restoreDefault(){
  737.                 jobsBody.innerHTML = defaultBodyHtml;
  738.                 if (countEl) countEl.innerHTML = defaultCountHtml;
  739.                 if (linkEl) linkEl.setAttribute('href', defaultLinkHref);
  740.             }
  741.             function renderResults(payload, query){
  742.                 var jobs  = (payload && payload.jobs)  || [];
  743.                 var total = (payload && typeof payload.total === 'number') ? payload.total : jobs.length;
  744.                 setHeaderCount(total);
  745.                 setHeaderLink(jobsListUrl + '?q=' + encodeURIComponent(query));
  746.                 if (!jobs.length){ setEmpty(); return; }
  748.                 var html = '';
  749.                 jobs.slice(0, 6).forEach(function(j){
  750.                     var title   = j.jobTitle || j.title || '';
  751.                     var company = j.companyName || j.company || '';
  752.                     var city    = j.city || '';
  753.                     var country = j.country || '';
  754.                     var et      = j.employmentType || '';
  755.                     var img     = j.image || j.imageUrl || '';
  756.                     var url     = j.url || (jobsListUrl + '?q=' + encodeURIComponent(query));
  757.                     var initial = (company || title || '?').charAt(0).toUpperCase();
  758.                     var location = city + (country ? ', ' + country : '');
  759.                     var metaParts = [];
  760.                     if (company)  metaParts.push('<span>' + escHtml(company) + '</span>');
  761.                     if (location) metaParts.push('<span class="hero-default-job-meta-sep"></span><span>' + escHtml(location) + '</span>');
  762.                     if (et)       metaParts.push('<span class="hero-default-job-meta-sep"></span><span>' + escHtml(et) + '</span>');
  763.                     html +=
  764.                         '<a href="' + escHtml(url) + '" class="hero-default-job">' +
  765.                         '<div class="hero-default-job-logo">' +
  766.                         (img ? '<img src="' + escHtml(img) + '" alt="">' : escHtml(initial)) +
  767.                         '</div>' +
  768.                         '<div class="hero-default-job-info">' +
  769.                         '<h3 class="hero-default-job-title">' + escHtml(title) + '</h3>' +
  770.                         '<p class="hero-default-job-meta">' + metaParts.join('') + '</p>' +
  771.                         '</div>' +
  772.                         '<span class="hero-default-job-arrow">' +
  773.                         '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>' +
  774.                         '</span>' +
  775.                         '</a>';
  776.                 });
  777.                 jobsBody.innerHTML = html;
  778.             }
  779.             function doSearch(query){
  780.                 if (currentRequest && currentRequest.abort) { try { currentRequest.abort(); } catch(e){} }
  781.                 setLoading();
  782.                 var url = searchUrl + (searchUrl.indexOf('?') > -1 ? '&' : '?') + 'q=' + encodeURIComponent(query);
  783.                 var ctrl = (typeof AbortController !== 'undefined') ? new AbortController() : null;
  784.                 currentRequest = ctrl;
  785.                 fetch(url, { headers: { 'Accept': 'application/json' }, signal: ctrl ? ctrl.signal : undefined })
  786.                     .then(function(r){ return r.ok ? r.json() : Promise.reject(r.status); })
  787.                     .then(function(data){ renderResults(data, query); })
  788.                     .catch(function(err){
  789.                         if (err && err.name === 'AbortError') return;
  790.                         setEmpty();
  791.                     });
  792.             }
  794.             input.addEventListener('input', function(){
  795.                 var q = input.value.trim();
  796.                 clearBtn.classList.toggle('is-visible', q.length > 0);
  797.                 if (debounceTimer) clearTimeout(debounceTimer);
  798.                 if (q.length < 2){ restoreDefault(); lastQuery = ''; return; }
  799.                 if (q === lastQuery) return;
  800.                 debounceTimer = setTimeout(function(){ lastQuery = q; doSearch(q); }, 280);
  801.             });
  802.             input.addEventListener('keydown', function(e){
  803.                 if (e.key === 'Enter'){
  804.                     e.preventDefault();
  805.                     var q = input.value.trim();
  806.                     if (!q) return;
  807.                     window.location.href = jobsListUrl + '?q=' + encodeURIComponent(q);
  808.                 }
  809.                 if (e.key === 'Escape'){
  810.                     input.value = ''; clearBtn.classList.remove('is-visible'); restoreDefault(); lastQuery = ''; input.blur();
  811.                 }
  812.             });
  813.             clearBtn.addEventListener('click', function(){
  814.                 input.value = ''; clearBtn.classList.remove('is-visible'); restoreDefault(); lastQuery = ''; input.focus();
  815.             });
  816.             document.querySelectorAll('.hero-popular-pill').forEach(function(pill){
  817.                 pill.addEventListener('click', function(){
  818.                     var keyword = pill.dataset.keyword || pill.dataset.label || '';
  819.                     if (!keyword) return;
  820.                     document.querySelectorAll('.hero-popular-pill').forEach(function(p){ p.classList.remove('is-active'); });
  821.                     pill.classList.add('is-active');
  822.                     input.value = keyword;
  823.                     clearBtn.classList.add('is-visible');
  824.                     lastQuery = keyword;
  825.                     doSearch(keyword);
  826.                     input.focus();
  827.                 });
  828.             });
  830.             // Si l'input est pré-rempli (1er keyword populaire), on lance la recherche automatiquement
  831.             var initialQuery = input.value.trim();
  832.             if (initialQuery.length >= 2) {
  833.                 clearBtn.classList.add('is-visible');
  834.                 lastQuery = initialQuery;
  835.                 doSearch(initialQuery);
  836.             }
  837.         })();
  839.         (function(){
  840.             var els = document.querySelectorAll('.reveal');
  841.             if (!els.length) return;
  842.             if (!('IntersectionObserver' in window)){
  843.                 els.forEach(function(el){ el.classList.add('is-revealed'); });
  844.                 return;
  845.             }
  846.             var io = new IntersectionObserver(function(entries){
  847.                 entries.forEach(function(entry){
  848.                     if (entry.isIntersecting){
  849.                         entry.target.classList.add('is-revealed');
  850.                         io.unobserve(entry.target);
  851.                     }
  852.                 });
  853.             }, { threshold: 0.12, rootMargin: '0px 0px -60px 0px' });
  854.             els.forEach(function(el){ io.observe(el); });
  855.         })();
  856.     </script>
  857. {% endblock footer_js %}