templates/application/whileresume/website/candidates/homepage.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_eyebrow','hero_title_pre','hero_title_accent','hero_title_post','hero_title_accent2','hero_title_2',
  7.     'hero_lede_pre','hero_lede_brand','hero_lede_mid','hero_lede_word','hero_lede_post',
  8.     'hero_cta_signup','hero_cta_login',
  9.     'hero_search_placeholder','hero_popular_label','hero_btn_ios','hero_btn_android',
  10.     'hero_default_title','hero_search_button','hero_byline_jobs','hero_byline_apps','hero_byline_free','hero_kbd_enter',
  11.     'search_loading','search_no_results','search_no_results_hint','search_results_count','search_view_all','search_view_offer','search_clear',
  12.     'how_eyebrow','how_title','how_lede',
  13.     'how1_title','how1_desc','how2_title','how2_desc','how3_title','how3_desc',
  14.     'feat1_label','feat1_title','feat1_p1','feat1_p2','feat1_quote','feat1_author','feat1_role',
  15.     'feat2_label','feat2_title','feat2_p1','feat2_p2','feat2_quote','feat2_author','feat2_role',
  16.     'feat3_label','feat3_title','feat3_p1','feat3_p2','feat3_quote','feat3_author','feat3_role',
  17.     'feat4_label','feat4_title','feat4_p1','feat4_p2','feat4_quote','feat4_author','feat4_role',
  18.     'signup_eyebrow','signup_title','signup_lede','signup_email_ph','signup_pass_ph','signup_pass2_ph',
  19.     'signup_terms_pre','signup_terms_link','signup_btn','signup_login_pre','signup_login_link',
  20.     'signup_perk1','signup_perk2','signup_perk3',
  21.     'apps_eyebrow','apps_title','apps_lede','apps_ios','apps_android','apps_web','apps_ios_desc','apps_android_desc','apps_web_desc',
  22.     'articles_title','articles_view_all','read_article',
  23.     'final_eyebrow','final_title',
  24.     'final_recruiter_label','final_recruiter_title','final_recruiter_desc',
  25.     'final_candidate_label','final_candidate_title','final_candidate_desc',
  26.     'final_candidate','final_recruiter'
  27. ] %}
  29. {% set t = {} %}
  30. {% for k in _keys %}
  31.     {% set t = t|merge({(k): ('homepage.' ~ k)|trans({}, 'whr-public')}) %}
  32. {% endfor %}
  35. {% block title %}{{ page.shortTitle }}{% endblock %}
  36. {% block description %}{{ page.shortDescription }}{% endblock %}
  37. {% block robots %}{{ page.robots }}{% endblock %}
  38. {% block canonical %}{% include "/vitrine/lexend/components/languages/canonical_classic.html.twig" %}{% endblock %}
  40. {% block css %}
  41.     {{ parent() }}
  42.     <style>
  43.         :root{
  44.             --wr-bg:#FBFCFE;
  45.             --wr-bg-2:#F4F6FB;
  46.             --wr-card:#FFFFFF;
  47.             --wr-violet:#8A63C1;
  48.             --wr-violet-2:#A98AD3;
  49.             --wr-violet-soft:#F2EDFA;
  50.             --wr-violet-softer:#F8F4FD;
  51.             --wr-violet-dark:#6B47A6;
  52.             --wr-ink:#1E1B2E;
  53.             --wr-ink-2:#374151;
  54.             --wr-muted:#6B7280;
  55.             --wr-muted-2:#9CA3AF;
  56.             --wr-line:#EEF1F7;
  57.             --wr-line-2:#E5E9F0;
  58.             --wr-shadow:0 1px 2px rgba(30,27,46,.04),0 4px 16px rgba(30,27,46,.04);
  59.             --wr-shadow-hover:0 4px 8px rgba(138,99,192,.08),0 12px 32px rgba(138,99,192,.1);
  60.             /* Accents colorés pour les logos d'offres (lettres) */
  61.             --wr-acc-yellow:#FEF3C7;  --wr-acc-yellow-fg:#B45309;
  62.             --wr-acc-green:#D1FAE5;   --wr-acc-green-fg:#047857;
  63.             --wr-acc-pink:#FCE7F3;    --wr-acc-pink-fg:#BE185D;
  64.             --wr-acc-blue:#DBEAFE;    --wr-acc-blue-fg:#1E40AF;
  65.             --wr-acc-orange:#FED7AA;  --wr-acc-orange-fg:#C2410C;
  66.             --wr-acc-violet:#EDE9FE;  --wr-acc-violet-fg:#6D28D9;
  67.             --wr-acc-cyan:#CFFAFE;    --wr-acc-cyan-fg:#0E7490;
  68.         }
  70.         /* ═══════════════════════════════════════════════════════════════════
  71.            PLEINE LARGEUR — On retire la réservation d'espace de la sidebar droite
  72.            ═══════════════════════════════════════════════════════════════════ */
  73.         body .main-content.right-chat-active{padding-right:0!important}
  74.         body .main-content{padding-right:0!important}
  75.         body .right-chat{display:none!important}
  76.         body .middle-sidebar-bottom .middle-sidebar-left{padding-right:0!important;max-width:none!important;width:100%!important}
  77.         body .middle-sidebar-bottom{max-width:none!important}
  79.         .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}
  80.         @media(max-width:991px){.wr{margin:0 -15px}}
  81.         .wr *{box-sizing:border-box}
  82.         .wr a{color:inherit;text-decoration:none}
  84.         /* ═══════════════════════════════════════════════════════════════════
  85.            SECTIONS GENERIC — Fond UNIFIÉ partout (pas d'alternance)
  86.            ═══════════════════════════════════════════════════════════════════ */
  87.         .wr-section{padding:80px 32px;background:var(--wr-bg);position:relative}
  88.         .wr-section--tight{padding:48px 32px}
  89.         @media(max-width:768px){.wr-section{padding:56px 20px}.wr-section--tight{padding:36px 20px}}
  91.         /* Filet décoratif au lieu d'un changement de couleur */
  92.         .wr-section + .wr-section::before{
  93.             content:"";
  94.             position:absolute;top:0;left:50%;transform:translateX(-50%);
  95.             width:80px;height:1px;
  96.             background:linear-gradient(90deg,transparent,var(--wr-line-2),transparent);
  97.         }
  99.         .wr-container{max-width:1200px;margin:0 auto;position:relative}
  101.         /* ═══ Eyebrow ═══ */
  102.         .wr-eyebrow{
  103.             display:inline-flex;align-items:center;gap:8px;
  104.             padding:6px 14px;border-radius:100px;
  105.             background:var(--wr-violet-soft);
  106.             color:var(--wr-violet-dark);
  107.             font-size:11.5px;font-weight:600;
  108.             text-transform:uppercase;letter-spacing:.12em;
  109.             margin-bottom:22px;
  110.         }
  111.         .wr-eyebrow-dot{width:6px;height:6px;border-radius:50%;background:var(--wr-violet);animation:wrPulse 2.4s ease-in-out infinite}
  112.         @keyframes wrPulse{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.3)}}
  114.         /* ═══ Titres ═══ */
  115.         .wr-title{
  116.             font-family:inherit;
  117.             font-weight:700;
  118.             font-size:28px;line-height:1.15;letter-spacing:-0.025em;
  119.             color:var(--wr-ink);
  120.             margin:0 auto 16px;
  121.             max-width:1200px;
  122.         }
  123.         @media(min-width:768px){.wr-title{font-size:34px}}
  124.         @media(min-width:1024px){.wr-title{font-size:40px}}
  125.         .wr-title--sm{font-size:24px}
  126.         @media(min-width:768px){.wr-title--sm{font-size:30px}}
  127.         .wr-title em{font-style:normal;font-weight:700;color:var(--wr-violet)}
  129.         .wr-lede{
  130.             font-size:17px;line-height:1.55;font-weight:400;
  131.             color:var(--wr-ink-2);
  132.             margin:0 auto;max-width:680px;
  133.         }
  135.         .wr-section-head{text-align:center;margin-bottom:56px}
  137.         /* ═══════════════════════════════════════════════════════════════════
  138.            HERO — Style soft, recherche dashboard, boutons pleins
  139.            ═══════════════════════════════════════════════════════════════════ */
  140.         @keyframes wrFadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
  141.         @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)}}
  143.         /* ═══ Reveal au scroll (Intersection Observer ajoute .is-revealed) ═══ */
  144.         .reveal{opacity:0;transform:translateY(24px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
  145.         .reveal.is-revealed{opacity:1;transform:translateY(0)}
  146.         .reveal--left{transform:translateX(-32px) translateY(0)}
  147.         .reveal--left.is-revealed{transform:translateX(0)}
  148.         .reveal--right{transform:translateX(32px) translateY(0)}
  149.         .reveal--right.is-revealed{transform:translateX(0)}
  150.         .reveal--scale{transform:scale(.96);opacity:0}
  151.         .reveal--scale.is-revealed{transform:scale(1);opacity:1}
  152.         .reveal[data-reveal-delay="1"]{transition-delay:.08s}
  153.         .reveal[data-reveal-delay="2"]{transition-delay:.16s}
  154.         .reveal[data-reveal-delay="3"]{transition-delay:.24s}
  155.         .reveal[data-reveal-delay="4"]{transition-delay:.32s}
  156.         @media(prefers-reduced-motion:reduce){.reveal{opacity:1!important;transform:none!important;transition:none!important}}
  158.         .hero{
  159.             position:relative;
  160.             background:var(--wr-bg);
  161.             padding:24px 32px 0;
  162.             overflow:hidden;
  163.         }
  164.         @media(max-width:768px){.hero{padding:18px 18px 0}}
  166.         /* Décor : 2 blobs très flous violet pâle */
  167.         .hero::before{
  168.             content:"";position:absolute;
  169.             top:-260px;right:-180px;width:560px;height:560px;
  170.             background:radial-gradient(circle,rgba(138,99,192,.14) 0%,transparent 65%);
  171.             pointer-events:none;filter:blur(50px);
  172.         }
  173.         .hero::after{
  174.             content:"";position:absolute;
  175.             top:120px;left:-180px;width:480px;height:480px;
  176.             background:radial-gradient(circle,rgba(138,99,192,.09) 0%,transparent 65%);
  177.             pointer-events:none;filter:blur(50px);
  178.         }
  180.         .hero-inner{position:relative;z-index:2;max-width:1200px;margin:0 auto;text-align:center}
  182.         /* ═══ Eyebrow ═══ */
  183.         .hero-badge{
  184.             display:inline-flex;align-items:center;gap:8px;
  185.             padding:7px 16px;border-radius:100px;
  186.             background:var(--wr-violet-soft);
  187.             color:var(--wr-violet-dark);
  188.             font-size:12px;font-weight:600;
  189.             text-transform:uppercase;letter-spacing:.1em;
  190.             margin-bottom:10px;
  191.             opacity:0;transform:translateY(8px);
  192.             animation:wrFadeUp .8s ease forwards;
  193.         }
  194.         .hero-badge-dot{width:6px;height:6px;border-radius:50%;background:var(--wr-violet);animation:wrPulse2 2s ease infinite}
  196.         /* ═══ Titre — 57px desktop, plein largeur conteneur ═══ */
  197.         .hero-title{
  198.             font-weight:700;
  199.             font-size:24px;line-height:1.05;letter-spacing:-0.04em;
  200.             color:var(--wr-ink);
  201.             margin:0 auto 12px;
  202.             width:100%;max-width:1200px;
  203.             opacity:0;transform:translateY(12px);
  204.             animation:wrFadeUp .9s cubic-bezier(.2,.7,.2,1) .15s forwards;
  205.         }
  206.         @media(min-width:768px){.hero-title{font-size:40px;letter-spacing:-0.045em}}
  207.         @media(min-width:1100px){.hero-title{font-size:57px;letter-spacing:-0.045em}}
  209.         .hero-title-accent{
  210.             color:var(--wr-violet);
  211.         }
  213.         .hero-lede{
  214.             font-size:15px;line-height:1.5;color:var(--wr-ink-2);font-weight:400;
  215.             margin:0 auto 16px;max-width:680px;
  216.             opacity:0;animation:wrFadeUp .9s ease .4s forwards;
  217.         }
  218.         @media(min-width:768px){.hero-lede{font-size:17px}}
  219.         .hero-lede-accent{color:var(--wr-violet);font-weight:600}
  221.         /* ═══ Recherche — pleine largeur (alignée sur la liste 1200px) ═══ */
  222.         .hero-search-wrap{
  223.             max-width:1200px;margin:0 auto 12px;
  224.             opacity:0;animation:wrFadeUp .9s ease .55s forwards;
  225.             position:relative;z-index:5;
  226.         }
  227.         .hero-search{
  228.             background:var(--wr-card);
  229.             border-radius:14px;
  230.             box-shadow:0 0 20px 0 rgba(0,0,0,0.05),0 16px 40px rgba(138,99,192,.06);
  231.             padding:10px;
  232.             position:relative;
  233.         }
  234.         .hero-search-inner{
  235.             display:flex;align-items:center;gap:10px;
  236.             padding:10px 14px;border-radius:10px;
  237.             background:#F9FAFB;border:1px solid #E5E7EB;
  238.             transition:border-color .2s,background .2s;
  239.         }
  240.         .hero-search-inner:focus-within{
  241.             border-color:rgba(138,99,192,.4);
  242.             background:#fff;
  243.         }
  244.         .hero-search-icon{color:var(--wr-muted-2);display:flex;flex-shrink:0}
  245.         .hero-search-icon svg{width:16px;height:16px}
  246.         .hero-search-input{
  247.             flex:1;border:0;outline:0;background:transparent;
  248.             font-size:14.5px;font-family:inherit;color:var(--wr-ink);
  249.             padding:6px 0;min-width:0;
  250.         }
  251.         .hero-search-input::placeholder{color:var(--wr-muted-2)}
  252.         .hero-search-clear{
  253.             background:none;border:0;color:var(--wr-muted-2);cursor:pointer;
  254.             padding:4px;display:none;font-family:inherit;
  255.             border-radius:6px;transition:background .15s,color .15s;
  256.         }
  257.         .hero-search-clear:hover{background:var(--wr-violet-soft);color:var(--wr-violet)}
  258.         .hero-search-clear.is-visible{display:flex;align-items:center}
  259.         .hero-search-clear svg{width:14px;height:14px}
  260.         .hero-search-kbd{
  261.             display:none;align-items:center;
  262.             padding:3px 8px;background:#fff;border:1px solid #E5E7EB;border-radius:6px;
  263.             font-size:10.5px;font-weight:600;color:var(--wr-muted);
  264.             font-family:inherit;letter-spacing:.02em;white-space:nowrap;flex-shrink:0;
  265.         }
  266.         .hero-search-inner:focus-within .hero-search-kbd{display:inline-flex}
  268.         /* ═══ États de la liste de jobs (header, empty, loading) ═══ */
  269.         .hero-jobs-header{
  270.             display:flex;align-items:center;justify-content:space-between;gap:10px;
  271.             padding:14px 22px 10px;
  272.             border-bottom:1px solid var(--wr-line);
  273.             margin-bottom:4px;
  274.         }
  275.         @media(max-width:540px){.hero-jobs-header{padding:12px 16px 8px}}
  276.         .hero-jobs-count{
  277.             font-size:11.5px;color:var(--wr-muted);
  278.             text-transform:uppercase;letter-spacing:.08em;font-weight:600;
  279.         }
  280.         .hero-jobs-count strong{color:var(--wr-violet);font-weight:800;font-size:13px;margin-right:4px}
  281.         .hero-jobs-link{
  282.             font-size:11px;font-weight:700;
  283.             color:var(--wr-violet);
  284.             text-transform:uppercase;letter-spacing:.08em;
  285.             text-decoration:none;
  286.             display:inline-flex;align-items:center;gap:5px;
  287.             transition:color .15s,transform .15s;
  288.         }
  289.         .hero-jobs-link:hover{color:var(--wr-violet-dark);text-decoration:none;transform:translateX(2px)}
  290.         .hero-jobs-link svg{width:11px;height:11px}
  292.         .hero-jobs-empty{text-align:center;padding:48px 20px;color:var(--wr-muted)}
  293.         .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}
  294.         .hero-jobs-empty-icon svg{width:22px;height:22px}
  295.         .hero-jobs-empty-title{font-weight:600;font-size:14px;color:var(--wr-ink);margin:0 0 4px}
  296.         .hero-jobs-empty-hint{font-size:13px;margin:0;color:var(--wr-muted)}
  298.         .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}
  299.         .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}
  300.         @keyframes wrSpin{to{transform:rotate(360deg)}}
  302.         /* ═══ Pills "Populaire" sous la recherche ═══ */
  303.         .hero-popular{
  304.             display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;
  305.             margin-bottom:18px;
  306.             opacity:0;animation:wrFadeUp .9s ease .7s forwards;
  307.         }
  308.         .hero-popular-label{
  309.             font-size:11px;font-weight:600;color:var(--wr-muted);
  310.             text-transform:uppercase;letter-spacing:.06em;
  311.             margin-right:4px;
  312.         }
  313.         .hero-popular-pill{
  314.             display:inline-flex;align-items:center;gap:5px;
  315.             padding:6px 12px;border-radius:100px;
  316.             background:var(--wr-violet-soft);
  317.             color:var(--wr-violet);
  318.             font-size:12.5px;font-weight:500;font-family:inherit;
  319.             text-decoration:none;cursor:pointer;
  320.             border:1px solid transparent;
  321.             transition:background .15s,border-color .15s,transform .15s,color .15s;
  322.         }
  323.         .hero-popular-pill:hover{
  324.             background:#EDE9FE;
  325.             border-color:rgba(138,99,192,.2);
  326.             transform:translateY(-1px);
  327.             color:var(--wr-violet);
  328.             text-decoration:none;
  329.         }
  330.         .hero-popular-pill.is-active{
  331.             background:var(--wr-violet);color:#fff;border-color:var(--wr-violet);
  332.         }
  333.         .hero-popular-pill.is-active:hover{background:var(--wr-violet-dark);color:#fff}
  334.         .hero-popular-pill-icon{font-size:13px;line-height:1}
  336.         /* ═══ CTA hero (boutons inscription + connexion pour anonymes) ═══ */
  337.         .hero-cta{
  338.             display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;
  339.             margin:24px 0 8px;
  340.             opacity:0;animation:wrFadeUp .9s ease 1.1s forwards;
  341.         }
  342.         .hero-cta-btn,
  343.         .hero-cta-btn:link,
  344.         .hero-cta-btn:visited,
  345.         .hero-cta-btn:hover,
  346.         .hero-cta-btn:focus,
  347.         .hero-cta-btn:active{
  348.             color:#fff !important;
  349.             text-decoration:none !important;
  350.         }
  351.         .hero-cta-btn{
  352.             display:inline-flex;align-items:center;gap:8px;
  353.             padding:11px 20px;border-radius:11px;
  354.             font-size:13.5px;font-weight:700;font-family:inherit;
  355.             line-height:1;
  356.             background:var(--wr-violet);border:1px solid var(--wr-violet);
  357.             box-shadow:0 4px 14px rgba(138,99,193,.32);
  358.             transition:background .15s,border-color .15s,transform .15s,box-shadow .15s;
  359.         }
  360.         .hero-cta-btn:hover{
  361.             background:var(--wr-violet-dark);border-color:var(--wr-violet-dark);
  362.             transform:translateY(-2px);
  363.             box-shadow:0 6px 20px rgba(138,99,193,.4);
  364.         }
  365.         .hero-cta-btn svg{width:15px;height:15px;flex-shrink:0;stroke:#fff !important;color:#fff !important}
  366.         .hero-cta-btn span{color:#fff !important}
  367.         @media(max-width:540px){.hero-cta{flex-direction:column;align-items:stretch}.hero-cta-btn{justify-content:center}}
  369.         /* ═══ Boutons stores — VIOLET PLEIN BLANC ═══ */
  370.         .hero-stores{
  371.             display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;
  372.             margin-bottom:48px;
  373.             opacity:0;animation:wrFadeUp .9s ease .85s forwards;
  374.         }
  375.         .hero-store-btn{
  376.             display:inline-flex;align-items:center;gap:10px;
  377.             padding:13px 24px;border-radius:12px;
  378.             background:var(--wr-violet);
  379.             border:0;
  380.             color:#fff;
  381.             font-size:14px;font-weight:600;
  382.             text-decoration:none;
  383.             transition:background .15s,transform .15s,box-shadow .15s;
  384.             box-shadow:0 4px 12px rgba(138,99,192,.3);
  385.         }
  386.         .hero-store-btn:hover{
  387.             background:var(--wr-violet-dark);
  388.             color:#fff;
  389.             transform:translateY(-2px);
  390.             box-shadow:0 8px 22px rgba(138,99,192,.4);
  391.             text-decoration:none;
  392.         }
  393.         .hero-store-btn-icon{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px}
  394.         .hero-store-btn-icon svg{width:18px;height:18px}
  395.         @media(max-width:540px){.hero-stores{flex-direction:column;align-items:stretch;gap:10px}.hero-store-btn{justify-content:center}}
  397.         /* ═══════════════════════════════════════════════════════════════════
  398.            LISTE PAR DÉFAUT SOUS LE HERO (offres récentes)
  399.            ═══════════════════════════════════════════════════════════════════ */
  400.         .hero-default-jobs{
  401.             position:relative;z-index:2;
  402.             max-width:1200px;margin:0 auto;
  403.             background:var(--wr-card);
  404.             border:1px solid var(--wr-line);
  405.             border-radius:18px;
  406.             padding:8px 0;
  407.             box-shadow:var(--wr-shadow);
  408.             opacity:0;animation:wrFadeUp .9s ease 1s forwards;
  409.             text-align:left;
  410.         }
  411.         .hero-default-job{
  412.             display:flex;align-items:center;gap:16px;
  413.             padding:14px 22px;
  414.             text-decoration:none;color:inherit;
  415.             border-bottom:1px solid var(--wr-line);
  416.             transition:background .15s;
  417.         }
  418.         .hero-default-job:last-child{border-bottom:0}
  419.         .hero-default-job:hover{background:var(--wr-violet-softer);text-decoration:none;color:inherit}
  420.         .hero-default-job-logo{
  421.             width:42px;height:42px;border-radius:11px;flex-shrink:0;
  422.             display:flex;align-items:center;justify-content:center;
  423.             font-weight:700;font-size:16px;overflow:hidden;
  424.         }
  425.         .hero-default-job-logo img{width:100%;height:100%;object-fit:cover}
  426.         /* 7 variantes de couleurs cyclées par index */
  427.         .hero-default-job:nth-child(7n+1) .hero-default-job-logo{background:var(--wr-acc-yellow);color:var(--wr-acc-yellow-fg)}
  428.         .hero-default-job:nth-child(7n+2) .hero-default-job-logo{background:var(--wr-acc-green);color:var(--wr-acc-green-fg)}
  429.         .hero-default-job:nth-child(7n+3) .hero-default-job-logo{background:var(--wr-acc-pink);color:var(--wr-acc-pink-fg)}
  430.         .hero-default-job:nth-child(7n+4) .hero-default-job-logo{background:var(--wr-acc-blue);color:var(--wr-acc-blue-fg)}
  431.         .hero-default-job:nth-child(7n+5) .hero-default-job-logo{background:var(--wr-acc-orange);color:var(--wr-acc-orange-fg)}
  432.         .hero-default-job:nth-child(7n+6) .hero-default-job-logo{background:var(--wr-acc-violet);color:var(--wr-acc-violet-fg)}
  433.         .hero-default-job:nth-child(7n+7) .hero-default-job-logo{background:var(--wr-acc-cyan);color:var(--wr-acc-cyan-fg)}
  434.         .hero-default-job-info{flex:1;min-width:0}
  435.         .hero-default-job-title{
  436.             font-weight:600;font-size:14.5px;color:var(--wr-ink);
  437.             margin:0 0 2px;line-height:1.3;
  438.             white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  439.         }
  440.         .hero-default-job-meta{
  441.             font-size:12.5px;color:var(--wr-muted);margin:0;
  442.             white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  443.             display:flex;align-items:center;gap:8px;
  444.         }
  445.         .hero-default-job-meta-sep{display:inline-block;width:3px;height:3px;border-radius:50%;background:var(--wr-muted-2);flex-shrink:0}
  446.         .hero-default-job-arrow{flex-shrink:0;color:var(--wr-muted-2);transition:color .15s,transform .15s}
  447.         .hero-default-job-arrow svg{width:15px;height:15px}
  448.         .hero-default-job:hover .hero-default-job-arrow{color:var(--wr-violet);transform:translateX(3px)}
  450.         @media(max-width:768px){
  451.             .hero-default-jobs{margin:0 -18px;border-radius:14px}
  452.             .hero-default-job{padding:12px 16px;gap:12px}
  453.             .hero-default-job-logo{width:36px;height:36px;font-size:13px}
  454.             .hero-default-job-title{font-size:13.5px}
  455.             .hero-default-job-meta{font-size:11.5px;gap:6px;flex-wrap:wrap;white-space:normal}
  456.         }
  458.         /* ═══════════════════════════════════════════════════════════════════
  459.            SECTION : 3 PARCOURS
  460.            ═══════════════════════════════════════════════════════════════════ */
  461.         .paths-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
  462.         @media(max-width:991px){.paths-grid{grid-template-columns:1fr;gap:14px}}
  464.         .path-card{
  465.             position:relative;
  466.             background:var(--wr-card);
  467.             border:1px solid var(--wr-line);
  468.             border-radius:20px;padding:28px;
  469.             display:flex;flex-direction:column;
  470.             transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
  471.             box-shadow:var(--wr-shadow);
  472.         }
  473.         .path-card:hover{transform:translateY(-4px);box-shadow:var(--wr-shadow-hover);border-color:var(--wr-violet-2)}
  474.         .path-card-illu{
  475.             width:64px;height:64px;border-radius:16px;
  476.             background:var(--wr-violet-soft);color:var(--wr-violet);
  477.             display:flex;align-items:center;justify-content:center;
  478.             margin-bottom:22px;
  479.         }
  480.         .path-card-illu svg{width:30px;height:30px}
  481.         .path-card-label{
  482.             display:inline-block;
  483.             font-size:11px;font-weight:600;
  484.             color:var(--wr-violet-dark);text-transform:uppercase;letter-spacing:.1em;
  485.             margin-bottom:10px;align-self:flex-start;
  486.         }
  487.         .path-card-title{
  488.             font-weight:500;font-size:22px;line-height:1.25;letter-spacing:-0.015em;
  489.             color:var(--wr-ink);margin:0 0 10px;
  490.         }
  491.         .path-card-desc{
  492.             font-size:14px;line-height:1.6;color:var(--wr-muted);
  493.             margin:0 0 22px;flex:1;
  494.         }
  495.         .path-card-cta{
  496.             display:inline-flex;align-items:center;justify-content:center;gap:6px;
  497.             background:var(--wr-violet);color:#fff;
  498.             padding:12px 18px;border-radius:11px;
  499.             font-size:13px;font-weight:600;
  500.             align-self:stretch;
  501.             transition:background .15s,transform .15s,box-shadow .15s;
  502.             box-shadow:0 2px 8px rgba(138,99,192,.2);
  503.         }
  504.         .path-card-cta:hover{background:var(--wr-violet-dark);color:#fff;text-decoration:none;transform:translateY(-1px);box-shadow:0 4px 12px rgba(138,99,192,.3)}
  505.         .path-card-cta svg{width:13px;height:13px;transition:transform .15s}
  506.         .path-card-cta:hover svg{transform:translateX(3px)}
  508.         /* ═══════════════════════════════════════════════════════════════════
  509.            COMMENT ÇA MARCHE — Card crème englobante avec 3 sous-cards
  510.            ═══════════════════════════════════════════════════════════════════ */
  511.         .how-card{
  512.             background:#F4ECE1;
  513.             border-radius:24px;
  514.             padding:32px 24px;
  515.             display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
  516.             position:relative;
  517.         }
  518.         @media(max-width:991px){.how-card{grid-template-columns:1fr;gap:8px;padding:24px 16px}}
  519.         @media(min-width:992px){
  520.             /* Séparateurs verticaux entre les 3 cellules */
  521.             .how-card .how-step + .how-step{border-left:1px solid rgba(28,25,22,.08)}
  522.         }
  524.         .how-step{
  525.             display:flex;flex-direction:column;align-items:center;text-align:center;
  526.             padding:16px 20px;
  527.             gap:16px;
  528.         }
  529.         .how-step-illu{
  530.             width:100%;max-width:280px;aspect-ratio:1/1;
  531.             border-radius:16px;
  532.             background:rgba(255,255,255,.5);
  533.             display:flex;align-items:center;justify-content:center;
  534.             margin-bottom:4px;
  535.             overflow:hidden;
  536.         }
  537.         .how-step-illu img{width:100%;height:100%;object-fit:contain;display:block}
  538.         .how-step-illu svg{width:55%;height:55%;opacity:.85}
  539.         .how-step-title{
  540.             font-weight:700;font-size:18px;line-height:1.3;letter-spacing:-0.01em;
  541.             color:var(--wr-ink);margin:0;
  542.         }
  543.         @media(min-width:992px){.how-step-title{font-size:20px}}
  544.         .how-step-desc{
  545.             font-size:14px;line-height:1.55;color:var(--wr-ink-2);
  546.             margin:0;max-width:320px;
  547.         }
  549.         /* ═══════════════════════════════════════════════════════════════════
  550.            FEATURES 01-04 — Splits alternés image/texte avec témoignages
  551.            ═══════════════════════════════════════════════════════════════════ */
  552.         .feat-block{
  553.             display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;
  554.             margin-bottom:64px;
  555.         }
  556.         .feat-block:last-child{margin-bottom:0}
  557.         @media(max-width:991px){
  558.             .feat-block{grid-template-columns:1fr;gap:24px;margin-bottom:48px}
  559.         }
  561.         /* Alterner : 01 illu droite, 02 illu gauche, 03 illu droite, 04 illu gauche */
  562.         .feat-block:nth-child(odd) .feat-illu{order:2}
  563.         .feat-block:nth-child(odd) .feat-content{order:1}
  564.         .feat-block:nth-child(even) .feat-illu{order:1}
  565.         .feat-block:nth-child(even) .feat-content{order:2}
  566.         @media(max-width:991px){
  567.             .feat-block .feat-illu{order:1}
  568.             .feat-block .feat-content{order:2}
  569.         }
  571.         .feat-illu{
  572.             background:#F5EDE3;
  573.             border-radius:20px;
  574.             aspect-ratio:1/1;
  575.             display:flex;align-items:center;justify-content:center;
  576.             color:var(--wr-violet);
  577.             overflow:hidden;
  578.             position:relative;
  579.         }
  580.         .feat-illu img{width:100%;height:100%;object-fit:contain;display:block}
  581.         .feat-illu svg{width:50%;height:50%;opacity:.85}
  583.         .feat-content{display:flex;flex-direction:column;gap:18px}
  584.         .feat-label{
  585.             font-size:30px;font-weight:800;
  586.             color:var(--wr-ink);
  587.             letter-spacing:-0.02em;
  588.             margin:0;line-height:1;
  589.         }
  590.         .feat-title{
  591.             font-weight:700;font-size:24px;line-height:1.2;letter-spacing:-0.02em;
  592.             color:var(--wr-ink);margin:0;
  593.         }
  594.         @media(min-width:768px){.feat-title{font-size:28px}}
  595.         @media(min-width:1100px){.feat-title{font-size:30px}}
  596.         .feat-desc{
  597.             display:flex;flex-direction:column;gap:14px;
  598.         }
  599.         .feat-desc p{
  600.             font-size:15px;line-height:1.6;color:var(--wr-ink-2);
  601.             margin:0;opacity:.85;
  602.         }
  603.         @media(min-width:1100px){.feat-desc p{font-size:16px}}
  604.         .feat-desc strong{color:var(--wr-ink);font-weight:700;opacity:1}
  606.         .feat-quote{
  607.             background:var(--wr-card);
  608.             border:1px solid var(--wr-line);
  609.             border-radius:14px;
  610.             padding:18px 20px;
  611.             display:flex;flex-direction:column;gap:10px;
  612.             margin-top:8px;
  613.         }
  614.         .feat-quote-text{
  615.             font-size:14px;line-height:1.55;color:var(--wr-ink-2);
  616.             margin:0;font-style:italic;
  617.         }
  618.         .feat-quote-author{
  619.             display:flex;flex-direction:column;
  620.         }
  621.         .feat-quote-name{font-size:13px;font-weight:700;color:var(--wr-ink);margin:0}
  622.         .feat-quote-role{font-size:12px;color:var(--wr-muted);margin:0}
  624.         /* ═══════════════════════════════════════════════════════════════════
  625.            MATCH
  626.            ═══════════════════════════════════════════════════════════════════ */
  627.         .match-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center}
  628.         @media(max-width:991px){.match-grid{grid-template-columns:1fr;gap:40px}}
  629.         .match-text .wr-title{margin-left:0;text-align:left}
  630.         .match-text .wr-lede{margin-left:0;text-align:left}
  631.         .match-text .wr-eyebrow{margin-bottom:20px}
  633.         .match-features{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:32px}
  634.         @media(max-width:540px){.match-features{grid-template-columns:1fr}}
  635.         .match-feature{
  636.             background:var(--wr-card);border:1px solid var(--wr-line);
  637.             border-radius:14px;padding:18px;
  638.             transition:transform .15s,border-color .15s,box-shadow .15s;
  639.         }
  640.         .match-feature:hover{transform:translateY(-2px);border-color:var(--wr-violet-soft);box-shadow:var(--wr-shadow)}
  641.         .match-feature-icon{
  642.             width:34px;height:34px;border-radius:10px;
  643.             background:var(--wr-violet-soft);color:var(--wr-violet);
  644.             display:inline-flex;align-items:center;justify-content:center;margin-bottom:12px;
  645.         }
  646.         .match-feature-icon svg{width:16px;height:16px}
  647.         .match-feature-title{font-weight:600;font-size:14px;line-height:1.3;color:var(--wr-ink);margin:0 0 5px}
  648.         .match-feature-desc{font-size:12.5px;line-height:1.5;color:var(--wr-muted);margin:0}
  650.         .match-visual{position:relative;display:flex;justify-content:center;align-items:center;padding:40px 0}
  651.         .match-stack{position:relative;width:100%;max-width:340px;height:340px}
  652.         .match-stack-card{
  653.             position:absolute;
  654.             background:var(--wr-card);border:1px solid var(--wr-line);
  655.             border-radius:16px;padding:14px;
  656.             display:flex;align-items:center;gap:12px;
  657.             box-shadow:var(--wr-shadow);width:100%;
  658.             transition:transform .3s ease,box-shadow .3s ease;
  659.             cursor:pointer;
  660.         }
  661.         .match-stack-card:hover{
  662.             transform:translateY(-4px) rotate(0deg)!important;
  663.             box-shadow:0 20px 50px rgba(138,99,192,.22)!important;
  664.             z-index:10!important;
  665.         }
  666.         .match-stack-card:nth-child(1){top:0;transform:rotate(-6deg) translateX(-10px);z-index:1;animation:wrFloat1 6s ease-in-out infinite}
  667.         .match-stack-card:nth-child(2){top:78px;left:14px;transform:rotate(2deg);z-index:3;box-shadow:0 16px 40px rgba(138,99,192,.18);animation:wrFloat2 6s ease-in-out -2s infinite}
  668.         .match-stack-card:nth-child(3){top:156px;transform:rotate(-3deg) translateX(8px);z-index:2;animation:wrFloat3 6s ease-in-out -4s infinite}
  669.         .match-stack-card:nth-child(4){top:234px;left:20px;transform:rotate(4deg);z-index:1;animation:wrFloat4 6s ease-in-out -1s infinite}
  670.         @keyframes wrFloat1{0%,100%{transform:rotate(-6deg) translate(-10px,0)}50%{transform:rotate(-6deg) translate(-10px,-8px)}}
  671.         @keyframes wrFloat2{0%,100%{transform:rotate(2deg) translate(0,0)}50%{transform:rotate(2deg) translate(0,-6px)}}
  672.         @keyframes wrFloat3{0%,100%{transform:rotate(-3deg) translate(8px,0)}50%{transform:rotate(-3deg) translate(8px,-7px)}}
  673.         @keyframes wrFloat4{0%,100%{transform:rotate(4deg) translate(0,0)}50%{transform:rotate(4deg) translate(0,-5px)}}
  674.         .match-stack-logo{
  675.             width:38px;height:38px;border-radius:10px;
  676.             background:var(--wr-violet-soft);color:var(--wr-violet);
  677.             display:flex;align-items:center;justify-content:center;
  678.             font-weight:700;font-size:14px;flex-shrink:0;
  679.         }
  680.         .match-stack-info{flex:1;min-width:0}
  681.         .match-stack-title{font-weight:600;font-size:13px;color:var(--wr-ink);margin:0 0 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}
  682.         .match-stack-meta{font-size:11px;color:var(--wr-muted);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  683.         .match-stack-heart{
  684.             width:28px;height:28px;border-radius:50%;
  685.             background:#FEE2E2;color:#EF4444;
  686.             display:flex;align-items:center;justify-content:center;flex-shrink:0;
  687.             animation:wrHeartbeat 1.6s ease-in-out infinite;
  688.         }
  689.         .match-stack-card:nth-child(1) .match-stack-heart{animation-delay:0s}
  690.         .match-stack-card:nth-child(2) .match-stack-heart{animation-delay:.4s}
  691.         .match-stack-card:nth-child(3) .match-stack-heart{animation-delay:.8s}
  692.         .match-stack-card:nth-child(4) .match-stack-heart{animation-delay:1.2s}
  693.         .match-stack-heart svg{width:13px;height:13px;fill:currentColor}
  694.         @keyframes wrHeartbeat{
  695.             0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(239,68,68,.4)}
  696.             10%{transform:scale(1.18);box-shadow:0 0 0 0 rgba(239,68,68,.4)}
  697.             20%{transform:scale(1)}
  698.             30%{transform:scale(1.12)}
  699.             40%{transform:scale(1);box-shadow:0 0 0 10px rgba(239,68,68,0)}
  700.             100%{box-shadow:0 0 0 0 rgba(239,68,68,0)}
  701.         }
  703.         /* ═══════════════════════════════════════════════════════════════════
  704.            SIGNUP FORM (entre feat 02 et 03)
  705.            ═══════════════════════════════════════════════════════════════════ */
  706.         .signup-card{
  707.             position:relative;
  708.             max-width:980px;margin:64px auto;
  709.             background:linear-gradient(135deg, #FFFFFF 0%, #FAF7FF 100%);
  710.             border:1px solid var(--wr-line);
  711.             border-radius:32px;
  712.             padding:48px 40px;
  713.             box-shadow:0 4px 12px rgba(30,27,46,.04), 0 24px 64px rgba(138,99,192,.1);
  714.             overflow:hidden;
  715.         }
  716.         @media(max-width:768px){.signup-card{padding:32px 22px;border-radius:24px;margin:48px auto}}
  718.         /* Décor : 2 blobs violet pâle dans les coins */
  719.         .signup-card::before{
  720.             content:"";position:absolute;
  721.             top:-120px;right:-120px;width:340px;height:340px;
  722.             background:radial-gradient(circle,rgba(138,99,192,.12) 0%,transparent 65%);
  723.             pointer-events:none;filter:blur(40px);
  724.         }
  725.         .signup-card::after{
  726.             content:"";position:absolute;
  727.             bottom:-100px;left:-80px;width:280px;height:280px;
  728.             background:radial-gradient(circle,rgba(138,99,192,.08) 0%,transparent 65%);
  729.             pointer-events:none;filter:blur(40px);
  730.         }
  732.         .signup-inner{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1.2fr;gap:48px;align-items:center}
  733.         @media(max-width:880px){.signup-inner{grid-template-columns:1fr;gap:28px}}
  735.         .signup-text{display:flex;flex-direction:column;gap:14px}
  736.         .signup-eyebrow{
  737.             display:inline-flex;align-items:center;gap:8px;
  738.             padding:7px 14px;border-radius:100px;
  739.             background:var(--wr-violet-soft);color:var(--wr-violet-dark);
  740.             font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  741.             align-self:flex-start;
  742.         }
  743.         .signup-title{
  744.             font-weight:700;font-size:28px;line-height:1.15;letter-spacing:-0.02em;
  745.             color:var(--wr-ink);margin:0;
  746.         }
  747.         @media(min-width:768px){.signup-title{font-size:34px}}
  748.         .signup-lede{font-size:15px;line-height:1.55;color:var(--wr-ink-2);margin:0;opacity:.85}
  750.         .signup-perks{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
  751.         .signup-perk{
  752.             display:inline-flex;align-items:center;gap:6px;
  753.             padding:6px 12px;border-radius:100px;
  754.             background:var(--wr-card);border:1px solid var(--wr-line-2);
  755.             font-size:12px;font-weight:600;color:var(--wr-ink-2);
  756.         }
  757.         .signup-perk svg{width:13px;height:13px;color:#10B981;stroke-width:3;flex-shrink:0}
  759.         .signup-form{
  760.             background:var(--wr-card);
  761.             border:1px solid var(--wr-line);
  762.             border-radius:20px;
  763.             padding:24px;
  764.             display:flex;flex-direction:column;gap:12px;
  765.             box-shadow:0 1px 2px rgba(30,27,46,.03);
  766.         }
  767.         .signup-form-error{
  768.             background:#FEF2F2;border:1px solid #FECACA;
  769.             color:#991B1B;
  770.             border-radius:12px;
  771.             padding:10px 14px;
  772.             font-size:13px;line-height:1.45;
  773.             margin:0;
  774.         }
  775.         .signup-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  776.         @media(max-width:540px){.signup-row{grid-template-columns:1fr}}
  777.         .signup-field{display:flex;flex-direction:column;gap:0}
  778.         .signup-card .signup-form input[type="email"],
  779.         .signup-card .signup-form input[type="password"],
  780.         .signup-card .signup-form input[type="text"]{
  781.             width:100%;
  782.             padding:13px 14px;
  783.             border:1px solid var(--wr-line-2);border-radius:11px;
  784.             background:#FAFBFD;
  785.             font-size:14px;font-family:inherit;color:var(--wr-ink);
  786.             outline:none;
  787.             transition:border-color .15s,background .15s,box-shadow .15s;
  788.             box-sizing:border-box;
  789.         }
  790.         .signup-card .signup-form input[type="email"]:focus,
  791.         .signup-card .signup-form input[type="password"]:focus,
  792.         .signup-card .signup-form input[type="text"]:focus{
  793.             border-color:var(--wr-violet);background:#fff;
  794.             box-shadow:0 0 0 3px rgba(138,99,192,.12);
  795.         }
  796.         .signup-card .signup-form input::placeholder{color:var(--wr-muted-2)}
  798.         .signup-terms{
  799.             display:flex;align-items:flex-start;gap:10px;
  800.             font-size:12.5px;line-height:1.45;color:var(--wr-muted);
  801.             margin:4px 0 0;
  802.         }
  803.         .signup-card .signup-form input[type="checkbox"]{
  804.             width:16px;height:16px;flex-shrink:0;margin-top:2px;accent-color:var(--wr-violet);cursor:pointer;
  805.         }
  806.         .signup-terms a{color:var(--wr-violet);font-weight:600;text-decoration:underline}
  807.         .signup-terms a:hover{color:var(--wr-violet-dark)}
  809.         .signup-recaptcha{margin:4px 0 0}
  810.         .signup-recaptcha > div{max-width:100%}
  812.         .signup-submit{
  813.             width:100%;
  814.             padding:14px 22px;border-radius:12px;
  815.             background:var(--wr-violet);color:#fff;border:0;
  816.             font-size:14.5px;font-weight:700;font-family:inherit;
  817.             cursor:pointer;
  818.             display:inline-flex;align-items:center;justify-content:center;gap:8px;
  819.             box-shadow:0 4px 14px rgba(138,99,192,.32);
  820.             transition:background .15s,transform .15s,box-shadow .15s;
  821.             margin-top:6px;
  822.         }
  823.         .signup-submit:hover{background:var(--wr-violet-dark);transform:translateY(-1px);box-shadow:0 6px 20px rgba(138,99,192,.4)}
  824.         .signup-submit svg{width:14px;height:14px;transition:transform .15s}
  825.         .signup-submit:hover svg{transform:translateX(3px)}
  827.         .signup-login{
  828.             text-align:center;font-size:13px;color:var(--wr-muted);margin:6px 0 0;
  829.         }
  830.         .signup-login a{color:var(--wr-violet);font-weight:600;text-decoration:none}
  831.         .signup-login a:hover{color:var(--wr-violet-dark);text-decoration:underline}
  833.         /* ═══════════════════════════════════════════════════════════════════
  834.            APPS
  835.            ═══════════════════════════════════════════════════════════════════ */
  836.         .apps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
  837.         @media(max-width:768px){.apps-grid{grid-template-columns:1fr}}
  838.         .app-card{
  839.             background:var(--wr-card);border:1px solid var(--wr-line);
  840.             border-radius:18px;padding:24px;
  841.             display:flex;flex-direction:column;align-items:flex-start;
  842.             transition:transform .2s,border-color .2s,box-shadow .2s;
  843.         }
  844.         .app-card:hover{transform:translateY(-3px);border-color:var(--wr-violet-2);box-shadow:var(--wr-shadow-hover);color:inherit;text-decoration:none}
  845.         .app-card-icon{
  846.             width:48px;height:48px;border-radius:14px;
  847.             background:var(--wr-violet-soft);color:var(--wr-violet);
  848.             display:inline-flex;align-items:center;justify-content:center;
  849.             margin-bottom:18px;
  850.         }
  851.         .app-card-icon svg{width:22px;height:22px}
  852.         .app-card-name{font-weight:500;font-size:18px;letter-spacing:-0.01em;color:var(--wr-ink);margin:0 0 6px}
  853.         .app-card-desc{font-size:13px;line-height:1.5;color:var(--wr-muted);margin:0 0 16px;flex:1}
  854.         .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}
  855.         .app-card-cta svg{width:11px;height:11px;transition:transform .15s}
  856.         .app-card:hover .app-card-cta svg{transform:translateX(3px)}
  858.         /* ═══════════════════════════════════════════════════════════════════
  859.            KEYWORDS
  860.            ═══════════════════════════════════════════════════════════════════ */
  861.         .keywords-list{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;max-width:1200px;margin:0 auto}
  862.         .keyword-pill{
  863.             display:inline-flex;align-items:center;gap:8px;
  864.             padding:9px 16px;border-radius:100px;
  865.             background:var(--wr-card);border:1px solid var(--wr-line-2);
  866.             color:var(--wr-ink-2);
  867.             font-size:13.5px;font-weight:500;
  868.             transition:transform .15s,border-color .15s,background .15s,color .15s,box-shadow .15s;
  869.         }
  870.         .keyword-pill:hover{transform:translateY(-2px);border-color:var(--wr-violet);background:var(--wr-violet-soft);color:var(--wr-violet-dark);text-decoration:none;box-shadow:0 4px 10px rgba(138,99,192,.12)}
  871.         .keyword-pill-icon{font-size:14px;line-height:1}
  873.         /* ═══════════════════════════════════════════════════════════════════
  874.            OFFRES POPULAIRES
  875.            ═══════════════════════════════════════════════════════════════════ */
  876.         .listings-block{margin-bottom:32px}
  877.         .listings-block:last-child{margin-bottom:0}
  878.         .listings-block-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px;flex-wrap:wrap}
  879.         .listings-block-title{
  880.             display:inline-flex;align-items:center;gap:10px;
  881.             font-weight:500;font-size:18px;letter-spacing:-0.005em;
  882.             color:var(--wr-ink);margin:0;
  883.         }
  884.         .listings-block-icon{font-size:20px;line-height:1}
  885.         .listings-block-link{
  886.             display:inline-flex;align-items:center;gap:4px;
  887.             padding:6px 12px;border-radius:100px;
  888.             font-size:12px;font-weight:600;
  889.             color:var(--wr-violet);
  890.             text-transform:uppercase;letter-spacing:.06em;
  891.             border:1px solid var(--wr-violet-soft);
  892.             background:var(--wr-card);
  893.             transition:background .15s,border-color .15s,transform .15s;
  894.         }
  895.         .listings-block-link:hover{background:var(--wr-violet-soft);border-color:var(--wr-violet);text-decoration:none;color:var(--wr-violet-dark);transform:translateX(2px)}
  896.         .listings-block-link svg{width:11px;height:11px}
  898.         .listings-jobs{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  899.         @media(max-width:768px){.listings-jobs{grid-template-columns:1fr}}
  900.         .listing-job{
  901.             display:flex;align-items:center;gap:14px;
  902.             background:var(--wr-card);border:1px solid var(--wr-line);
  903.             border-radius:14px;padding:12px;
  904.             transition:transform .15s,border-color .15s,box-shadow .15s;
  905.         }
  906.         .listing-job:hover{transform:translateY(-2px);border-color:var(--wr-violet-soft);box-shadow:var(--wr-shadow);color:inherit;text-decoration:none}
  907.         .listing-job-logo{
  908.             width:42px;height:42px;border-radius:11px;flex-shrink:0;
  909.             background:var(--wr-violet-soft);color:var(--wr-violet);
  910.             display:flex;align-items:center;justify-content:center;
  911.             font-weight:700;font-size:14px;overflow:hidden;
  912.         }
  913.         .listing-job-logo img{width:100%;height:100%;object-fit:cover}
  914.         .listing-job-info{flex:1;min-width:0}
  915.         .listing-job-title{font-weight:600;font-size:13.5px;color:var(--wr-ink);margin:0 0 2px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  916.         .listing-job-meta{font-size:11.5px;color:var(--wr-muted);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  917.         .listing-job-arrow{flex-shrink:0;color:var(--wr-muted-2);transition:color .15s,transform .15s}
  918.         .listing-job-arrow svg{width:14px;height:14px}
  919.         .listing-job:hover .listing-job-arrow{color:var(--wr-violet);transform:translateX(2px)}
  921.         /* ═══════════════════════════════════════════════════════════════════
  922.            ARTICLES — Liste sans miniatures (style identique aux jobs-card)
  923.            ═══════════════════════════════════════════════════════════════════ */
  924.         .articles-list{display:flex;flex-direction:column;gap:10px;max-width:1200px;margin:0 auto}
  925.         .wr-article{
  926.             background:var(--wr-card);border-radius:14px;padding:14px;
  927.             box-shadow:0 0 16px 0 rgba(0,0,0,0.04);
  928.             display:flex;align-items:center;gap:14px;
  929.             text-decoration:none;color:inherit;
  930.             transition:transform .15s,box-shadow .2s;
  931.         }
  932.         .wr-article:hover{
  933.             transform:translateY(-1px);
  934.             box-shadow:0 4px 20px rgba(138,99,192,.1);
  935.             color:inherit;text-decoration:none;
  936.         }
  937.         .wr-article-logo{
  938.             width:50px;height:50px;border-radius:12px;flex-shrink:0;
  939.             background:linear-gradient(135deg,#EDE9FE,#DDD6FE);
  940.             display:flex;align-items:center;justify-content:center;
  941.             color:var(--wr-violet);overflow:hidden;
  942.         }
  943.         .wr-article-logo svg{width:24px;height:24px;opacity:.9}
  944.         .wr-article-info{flex:1;min-width:0}
  945.         .wr-article-title{
  946.             font-size:14px;font-weight:700;color:var(--wr-ink);
  947.             line-height:1.3;margin:0 0 4px;
  948.             white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  949.         }
  950.         .wr-article-meta{
  951.             font-size:12px;color:var(--wr-muted);
  952.             white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  953.             display:flex;align-items:center;gap:8px;margin:0;
  954.         }
  955.         .wr-article-meta-sep{display:inline-block;width:3px;height:3px;border-radius:50%;background:#D1D5DB;flex-shrink:0}
  956.         .wr-article-badge{
  957.             font-size:11px;font-weight:600;
  958.             color:var(--wr-violet);background:var(--wr-violet-soft);
  959.             padding:3px 9px;border-radius:100px;
  960.             white-space:nowrap;flex-shrink:0;
  961.             text-transform:uppercase;letter-spacing:.04em;
  962.         }
  963.         .wr-article-arrow{flex-shrink:0;color:var(--wr-muted-2);transition:color .15s,transform .15s}
  964.         .wr-article:hover .wr-article-arrow{color:var(--wr-violet);transform:translateX(2px)}
  965.         .wr-article-arrow svg{width:18px;height:18px}
  966.         @media(max-width:540px){
  967.             .wr-article{padding:12px;gap:10px}
  968.             .wr-article-logo{width:42px;height:42px}
  969.             .wr-article-logo svg{width:20px;height:20px}
  970.             .wr-article-title{font-size:13px}
  971.             .wr-article-meta{font-size:11px;gap:6px;flex-wrap:wrap;white-space:normal}
  972.             .wr-article-badge{display:none}
  973.         }
  975.         .articles-cta{text-align:center;margin-top:36px}
  976.         .articles-cta a{
  977.             display:inline-flex;align-items:center;gap:8px;
  978.             padding:12px 22px;border-radius:11px;
  979.             background:var(--wr-violet);color:#fff;
  980.             font-size:13px;font-weight:600;
  981.             text-decoration:none;
  982.             box-shadow:0 4px 12px rgba(138,99,192,.3);
  983.             transition:background .15s,transform .15s,box-shadow .15s;
  984.         }
  985.         .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}
  986.         .articles-cta svg{width:12px;height:12px;transition:transform .15s}
  987.         .articles-cta a:hover svg{transform:translateX(3px)}
  989.         /* ═══════════════════════════════════════════════════════════════════
  990.            CTA FINAL — Card violet plein avec eyebrow + 2 sous-cards
  991.            ═══════════════════════════════════════════════════════════════════ */
  992.         .final-card{
  993.             position:relative;
  994.             background:linear-gradient(135deg,#8A63C0 0%,#9D7BCC 100%);
  995.             border-radius:28px;
  996.             padding:48px 40px;
  997.             color:#fff;overflow:hidden;
  998.             box-shadow:0 20px 60px -12px rgba(138,99,192,.4);
  999.         }
  1000.         @media(max-width:768px){.final-card{padding:32px 22px;border-radius:22px}}
  1002.         .final-eyebrow{
  1003.             display:inline-flex;align-items:center;gap:8px;
  1004.             padding:8px 18px;border-radius:100px;
  1005.             background:rgba(255,255,255,.2);
  1006.             color:#fff;
  1007.             font-size:12px;font-weight:700;
  1008.             text-transform:uppercase;letter-spacing:.12em;
  1009.             margin-bottom:20px;
  1010.             backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  1011.         }
  1012.         .final-eyebrow svg{width:13px;height:13px;fill:currentColor}
  1014.         .final-title{
  1015.             font-weight:800;font-size:28px;line-height:1.15;letter-spacing:-0.02em;
  1016.             color:#fff;margin:0 0 36px;
  1017.             max-width:780px;
  1018.         }
  1019.         @media(min-width:768px){.final-title{font-size:38px}}
  1021.         /* Grille 2 sous-cards */
  1022.         .final-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
  1023.         @media(max-width:768px){.final-grid{grid-template-columns:1fr;gap:14px}}
  1025.         .final-sub{
  1026.             background:#fff;
  1027.             border-radius:18px;
  1028.             padding:28px;
  1029.             display:flex;flex-direction:column;
  1030.         }
  1031.         @media(max-width:768px){.final-sub{padding:22px}}
  1033.         .final-sub-head{display:flex;align-items:center;gap:14px;margin-bottom:18px}
  1034.         .final-sub-icon{
  1035.             width:44px;height:44px;border-radius:11px;
  1036.             background:var(--wr-violet-soft);color:var(--wr-violet);
  1037.             display:flex;align-items:center;justify-content:center;flex-shrink:0;
  1038.         }
  1039.         .final-sub-icon svg{width:22px;height:22px}
  1040.         .final-sub-label{
  1041.             font-size:12.5px;font-weight:700;
  1042.             color:var(--wr-violet);
  1043.             text-transform:uppercase;letter-spacing:.1em;
  1044.         }
  1045.         .final-sub-title{
  1046.             font-weight:800;font-size:18px;line-height:1.3;letter-spacing:-0.01em;
  1047.             color:var(--wr-ink);margin:0 0 10px;
  1048.         }
  1049.         .final-sub-desc{
  1050.             font-size:14px;line-height:1.55;color:var(--wr-muted);
  1051.             margin:0 0 24px;flex:1;
  1052.         }
  1053.         .final-sub-btn{
  1054.             display:flex;align-items:center;justify-content:center;gap:8px;
  1055.             background:var(--wr-violet);color:#fff;
  1056.             padding:14px 18px;border-radius:11px;
  1057.             font-size:14px;font-weight:700;
  1058.             text-decoration:none;
  1059.             transition:background .15s,transform .15s,box-shadow .15s;
  1060.             box-shadow:0 4px 12px rgba(138,99,192,.3);
  1061.         }
  1062.         .final-sub-btn:hover{
  1063.             background:var(--wr-violet-dark);color:#fff;
  1064.             transform:translateY(-2px);
  1065.             box-shadow:0 6px 18px rgba(138,99,192,.4);
  1066.             text-decoration:none;
  1067.         }
  1068.         .final-sub-btn svg{width:14px;height:14px;transition:transform .15s}
  1069.         .final-sub-btn:hover svg{transform:translateX(3px)}
  1070.     </style>
  1071. {% endblock css %}
  1073. {% block body %}
  1074.     <div class="wr">
  1076.         {# ═══════════════ HERO ═══════════════ #}
  1077.         <section class="hero">
  1078.             <div class="hero-inner">
  1079.             <span class="hero-badge">
  1080.                 <span class="hero-badge-dot"></span>
  1081.                 {{ t.hero_eyebrow }}
  1082.             </span>
  1084.                 <h1 class="hero-title">
  1085.                     <span class="hero-title-accent">{{ t.hero_title_accent }}</span> {{ t.hero_title_post }}<br>
  1086.                     <span class="hero-title-accent">{{ t.hero_title_accent2 }}</span> {{ t.hero_title_2 }}
  1087.                 </h1>
  1089.                 <p class="hero-lede">
  1090.                     {{ t.hero_lede_pre }}
  1091.                     <span class="hero-lede-accent">{{ t.hero_lede_brand }}</span>
  1092.                     {{ t.hero_lede_mid }}
  1093.                     <span class="hero-lede-accent">{{ t.hero_lede_word }}</span>
  1094.                     {{ t.hero_lede_post }}
  1095.                 </p>
  1097.                 {# Pills "Populaire" — AU-DESSUS de la recherche, cliquer remplit l'input #}
  1098.                 {% if popularKeywords is defined and popularKeywords|length > 0 %}
  1099.                     <div class="hero-popular">
  1100.                         <span class="hero-popular-label">{{ t.hero_popular_label }}</span>
  1101.                         {% for kw in popularKeywords|slice(0, 5) %}
  1102.                             <button type="button"
  1103.                                     class="hero-popular-pill"
  1104.                                     data-keyword="{{ kw.keyword }}"
  1105.                                     data-label="{{ kw.label }}">
  1106.                                 {% if kw.icon %}<span class="hero-popular-pill-icon">{{ kw.icon|raw }}</span>{% endif %}
  1107.                                 <span>{{ kw.label }}</span>
  1108.                             </button>
  1109.                         {% endfor %}
  1110.                     </div>
  1111.                 {% endif %}
  1113.                 {# Recherche inline AJAX — style dashboard jobs #}
  1114.                 <div class="hero-search-wrap">
  1115.                     <div class="hero-search" id="wrHeroSearch"
  1116.                          data-search-url="{% if isFR %}{{ path('locale_api_jobs_search',{'_locale':'fr'}) }}{% else %}{{ path('api_jobs_search') }}{% endif %}"
  1117.                          data-jobs-list-url="{% if isFR %}{{ path('locale_whileresume_jobs_list',{'_locale':'fr'}) }}{% else %}{{ path('whileresume_jobs_list') }}{% endif %}">
  1118.                         <div class="hero-search-inner">
  1119.                         <span class="hero-search-icon">
  1120.                             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  1121.                                 <circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/>
  1122.                             </svg>
  1123.                         </span>
  1124.                             <input type="text" name="q" id="wrHeroSearchInput" class="hero-search-input"
  1125.                                    placeholder="{{ t.hero_search_placeholder }}"
  1126.                                    autocomplete="off" />
  1127.                             <span class="hero-search-kbd">↵ {{ isFR ? 'Entrée' : 'Enter' }}</span>
  1128.                             <button type="button" class="hero-search-clear" id="wrHeroSearchClear" aria-label="{{ t.search_clear }}">
  1129.                                 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
  1130.                                     <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
  1131.                                 </svg>
  1132.                             </button>
  1133.                         </div>
  1134.                     </div>
  1135.                 </div>
  1137.                 {# Liste de jobs — par défaut jobs aléatoires, remplacée par les résultats AJAX #}
  1138.                 {# Le compteur affiche le nombre total d'offres en ligne (toutes langues confondues) #}
  1139.                 {% set _heroCount = 0 %}
  1141.                 <div class="hero-default-jobs" id="wrHeroJobsList">
  1142.                     <div class="hero-jobs-header" id="wrHeroJobsHeader">
  1143.                     <span class="hero-jobs-count" id="wrHeroJobsCount">
  1144.                         <strong>{{ totalJobs ?? 0 }}</strong>{{ t.search_results_count }}
  1145.                     </span>
  1146.                         <a href="{% if isFR %}{{ path('locale_whileresume_jobs_list',{'_locale':'fr'}) }}{% else %}{{ path('whileresume_jobs_list') }}{% endif %}" class="hero-jobs-link" id="wrHeroJobsLink">
  1147.                             {{ t.search_view_all }}
  1148.                             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
  1149.                                 <line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/>
  1150.                             </svg>
  1151.                         </a>
  1152.                     </div>
  1154.                     <div id="wrHeroJobsBody">
  1155.                         {% if randomJobs is defined and randomJobs|length > 0 %}
  1156.                             {% for j in randomJobs %}
  1157.                                 {% if _heroCount < 6 %}
  1158.                                     <a href="{% if j.locale == 'fr' %}{{ path('locale_cvs_application_job_show',{'_locale':app.request.locale,'slug':j.slug}) }}{% else %}{{ path('cvs_application_job_show',{'slug':j.slug}) }}{% endif %}" class="hero-default-job">
  1159.                                         <div class="hero-default-job-logo">
  1160.                                             {% if j.image and j.image.name %}
  1161.                                                 <img src="{{ vich_uploader_asset(j, 'imageFile') }}" alt="">
  1162.                                             {% else %}
  1163.                                                 {{ j.companyName|default('?')|slice(0,1)|upper }}
  1164.                                             {% endif %}
  1165.                                         </div>
  1166.                                         <div class="hero-default-job-info">
  1167.                                             <h3 class="hero-default-job-title">{{ j.jobTitle }}</h3>
  1168.                                             <p class="hero-default-job-meta">
  1169.                                                 {% if j.companyName %}<span>{{ j.companyName }}</span>{% endif %}
  1170.                                                 {% if j.city %}
  1171.                                                     <span class="hero-default-job-meta-sep"></span>
  1172.                                                     <span>{{ j.city }}{% if j.country %}, {{ j.country }}{% endif %}</span>
  1173.                                                 {% endif %}
  1174.                                                 {% if j.employmentType %}
  1175.                                                     <span class="hero-default-job-meta-sep"></span>
  1176.                                                     <span>{{ j.employmentType }}</span>
  1177.                                                 {% endif %}
  1178.                                             </p>
  1179.                                         </div>
  1180.                                         <span class="hero-default-job-arrow">
  1181.                                             <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>
  1182.                                         </span>
  1183.                                     </a>
  1184.                                     {% set _heroCount = _heroCount + 1 %}
  1185.                                 {% endif %}
  1186.                             {% endfor %}
  1187.                         {% endif %}
  1188.                     </div>
  1189.                 </div>
  1191.                 {# CTA pour utilisateurs non connectés : Inscription + Connexion #}
  1192.                 {% if app.user is null %}
  1193.                     <div class="hero-cta">
  1194.                         <a href="#register" class="hero-cta-btn">
  1195.                             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
  1196.                                 <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"/>
  1197.                             </svg>
  1198.                             {{ t.hero_cta_signup }}
  1199.                         </a>
  1200.                         <a href="{% if isFR %}{{ path('locale_app_login',{'_locale':'fr'}) }}{% else %}{{ path('app_login') }}{% endif %}" class="hero-cta-btn">
  1201.                             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
  1202.                                 <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"/>
  1203.                             </svg>
  1204.                             {{ t.hero_cta_login }}
  1205.                         </a>
  1206.                     </div>
  1207.                 {% endif %}
  1208.             </div>
  1209.         </section>
  1211.         {# ═══════════════ COMMENT ÇA MARCHE ═══════════════ #}
  1212.         <section class="wr-section">
  1213.             <div class="wr-container">
  1214.                 <div class="wr-section-head">
  1215.                     <h2 class="wr-title">{{ t.how_title }}</h2>
  1216.                 </div>
  1218.                 <div class="how-card">
  1219.                     <div class="how-step reveal" data-reveal-delay="1">
  1220.                         <div class="how-step-illu">
  1221.                             <img src="/uploads/rh/mascotte_register.png" alt="{{ t.how1_title }}" loading="lazy">
  1222.                         </div>
  1223.                         <h3 class="how-step-title">{{ t.how1_title }}</h3>
  1224.                         <p class="how-step-desc">{{ t.how1_desc }}</p>
  1225.                     </div>
  1227.                     <div class="how-step reveal" data-reveal-delay="2">
  1228.                         <div class="how-step-illu">
  1229.                             <img src="/uploads/rh/mascotte_upload2.png" alt="{{ t.how2_title }}" loading="lazy">
  1230.                         </div>
  1231.                         <h3 class="how-step-title">{{ t.how2_title }}</h3>
  1232.                         <p class="how-step-desc">{{ t.how2_desc }}</p>
  1233.                     </div>
  1235.                     <div class="how-step reveal" data-reveal-delay="3">
  1236.                         <div class="how-step-illu">
  1237.                             <img src="/uploads/rh/mascotte_reunion.png" alt="{{ t.how3_title }}" loading="lazy">
  1238.                         </div>
  1239.                         <h3 class="how-step-title">{{ t.how3_title }}</h3>
  1240.                         <p class="how-step-desc">{{ t.how3_desc }}</p>
  1241.                     </div>
  1242.                 </div>
  1243.             </div>
  1244.         </section>
  1246.         {# ═══════════════ FEATURES 01-04 ═══════════════ #}
  1247.         <section class="wr-section">
  1248.             <div class="wr-container">
  1250.                 {# Feature 01 — Filtrage par critères #}
  1251.                 <div class="feat-block reveal">
  1252.                     <div class="feat-illu">
  1253.                         <img src="/uploads/rh/mascotte_filtrage3.png" alt="{{ t.feat1_title }}" loading="lazy">
  1254.                     </div>
  1255.                     <div class="feat-content">
  1256.                         <span class="feat-label">{{ t.feat1_label }}</span>
  1257.                         <h3 class="feat-title">{{ t.feat1_title }}</h3>
  1258.                         <div class="feat-desc">
  1259.                             <p>{{ t.feat1_p1|raw }}</p>
  1260.                             <p>{{ t.feat1_p2|raw }}</p>
  1261.                         </div>
  1262.                         <div class="feat-quote">
  1263.                             <p class="feat-quote-text">{{ t.feat1_quote }}</p>
  1264.                             <div class="feat-quote-author">
  1265.                                 <p class="feat-quote-name">{{ t.feat1_author }}</p>
  1266.                                 <p class="feat-quote-role">{{ t.feat1_role }}</p>
  1267.                             </div>
  1268.                         </div>
  1269.                     </div>
  1270.                 </div>
  1272.                 {# Feature 02 — Optimisation intelligente #}
  1273.                 <div class="feat-block reveal">
  1274.                     <div class="feat-illu">
  1275.                         <img src="/uploads/rh/mascotte_upload.png" alt="{{ t.feat2_title }}" loading="lazy">
  1276.                     </div>
  1277.                     <div class="feat-content">
  1278.                         <span class="feat-label">{{ t.feat2_label }}</span>
  1279.                         <h3 class="feat-title">{{ t.feat2_title }}</h3>
  1280.                         <div class="feat-desc">
  1281.                             <p>{{ t.feat2_p1|raw }}</p>
  1282.                             <p>{{ t.feat2_p2|raw }}</p>
  1283.                         </div>
  1284.                         <div class="feat-quote">
  1285.                             <p class="feat-quote-text">{{ t.feat2_quote }}</p>
  1286.                             <div class="feat-quote-author">
  1287.                                 <p class="feat-quote-name">{{ t.feat2_author }}</p>
  1288.                                 <p class="feat-quote-role">{{ t.feat2_role }}</p>
  1289.                             </div>
  1290.                         </div>
  1291.                     </div>
  1292.                 </div>
  1294.                 {% if app.user is null %}
  1295.                     {# ═════ INSCRIPTION (entre feat 02 et 03) ═════ #}
  1296.                     <div class="signup-card reveal reveal--scale" id="register">
  1297.                         <div class="signup-inner">
  1298.                             <div class="signup-text">
  1299.                             <span class="signup-eyebrow">
  1300.                                 <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><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"/></svg>
  1301.                                 {{ t.signup_eyebrow }}
  1302.                             </span>
  1303.                                 <h3 class="signup-title">{{ t.signup_title }}</h3>
  1304.                                 <p class="signup-lede">{{ t.signup_lede }}</p>
  1305.                                 <div class="signup-perks">
  1306.                                 <span class="signup-perk">
  1307.                                     <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
  1308.                                     {{ t.signup_perk1 }}
  1309.                                 </span>
  1310.                                     <span class="signup-perk">
  1311.                                     <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
  1312.                                     {{ t.signup_perk2 }}
  1313.                                 </span>
  1314.                                     <span class="signup-perk">
  1315.                                     <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
  1316.                                     {{ t.signup_perk3 }}
  1317.                                 </span>
  1318.                                 </div>
  1319.                             </div>
  1321.                             {% if form is defined %}
  1322.                                 {# Cas 1 : le controller passe le formulaire Symfony — rendu via form_widget #}
  1323.                                 {{ form_start(form, {'attr': {'class': 'signup-form', 'novalidate': 'novalidate'}}) }}
  1324.                                 {{ form_errors(form) }}
  1325.                                 {% for message in app.flashes('danger') %}
  1326.                                     <p class="signup-form-error">{{ message }}</p>
  1327.                                 {% endfor %}
  1329.                                 <div class="signup-field">
  1330.                                     {{ form_widget(form.email, {'attr': {'placeholder': t.signup_email_ph}}) }}
  1331.                                 </div>
  1333.                                 <div class="signup-row">
  1334.                                     <div class="signup-field">
  1335.                                         {{ form_widget(form.password.first, {'attr': {'placeholder': t.signup_pass_ph}}) }}
  1336.                                     </div>
  1337.                                     <div class="signup-field">
  1338.                                         {{ form_widget(form.password.second, {'attr': {'placeholder': t.signup_pass2_ph}}) }}
  1339.                                     </div>
  1340.                                 </div>
  1342.                                 <label class="signup-terms">
  1343.                                     {{ form_widget(form.acceptTerm) }}
  1344.                                     <span>
  1345.                                         {{ t.signup_terms_pre }}
  1346.                                         <a href="{% if isFR %}/fr/protections-donnees-candidats{% else %}/data-protection-candidates{% endif %}" target="_blank" rel="noopener">{{ t.signup_terms_link }}</a>.
  1347.                                     </span>
  1348.                                 </label>
  1350.                                 {% if form.recaptcha is defined %}
  1351.                                     <div class="signup-recaptcha">{{ form_widget(form.recaptcha) }}</div>
  1352.                                 {% endif %}
  1354.                                 <button type="submit" class="signup-submit">
  1355.                                     {{ t.signup_btn }}
  1356.                                     <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>
  1357.                                 </button>
  1359.                                 {{ form_rest(form) }}
  1360.                                 {{ form_end(form) }}
  1361.                             {% endif %}
  1362.                         </div>
  1363.                     </div>
  1364.                 {% endif %}
  1366.                 {# Feature 03 — Recherche qualifiée #}
  1367.                 <div class="feat-block reveal">
  1368.                     <div class="feat-illu">
  1369.                         <img src="/uploads/rh/mascotte_register.png" alt="{{ t.feat3_title }}" loading="lazy">
  1370.                     </div>
  1371.                     <div class="feat-content">
  1372.                         <span class="feat-label">{{ t.feat3_label }}</span>
  1373.                         <h3 class="feat-title">{{ t.feat3_title }}</h3>
  1374.                         <div class="feat-desc">
  1375.                             <p>{{ t.feat3_p1|raw }}</p>
  1376.                             <p>{{ t.feat3_p2|raw }}</p>
  1377.                         </div>
  1378.                         <div class="feat-quote">
  1379.                             <p class="feat-quote-text">{{ t.feat3_quote }}</p>
  1380.                             <div class="feat-quote-author">
  1381.                                 <p class="feat-quote-name">{{ t.feat3_author }}</p>
  1382.                                 <p class="feat-quote-role">{{ t.feat3_role }}</p>
  1383.                             </div>
  1384.                         </div>
  1385.                     </div>
  1386.                 </div>
  1388.                 {# Feature 04 — Contact direct qualifié #}
  1389.                 <div class="feat-block reveal">
  1390.                     <div class="feat-illu">
  1391.                         <img src="/uploads/rh/mascotte_reunion.png" alt="{{ t.feat4_title }}" loading="lazy">
  1392.                     </div>
  1393.                     <div class="feat-content">
  1394.                         <span class="feat-label">{{ t.feat4_label }}</span>
  1395.                         <h3 class="feat-title">{{ t.feat4_title }}</h3>
  1396.                         <div class="feat-desc">
  1397.                             <p>{{ t.feat4_p1|raw }}</p>
  1398.                             <p>{{ t.feat4_p2|raw }}</p>
  1399.                         </div>
  1400.                         <div class="feat-quote">
  1401.                             <p class="feat-quote-text">{{ t.feat4_quote }}</p>
  1402.                             <div class="feat-quote-author">
  1403.                                 <p class="feat-quote-name">{{ t.feat4_author }}</p>
  1404.                                 <p class="feat-quote-role">{{ t.feat4_role }}</p>
  1405.                             </div>
  1406.                         </div>
  1407.                     </div>
  1408.                 </div>
  1410.             </div>
  1411.         </section>
  1414.         {# ═══════════════ APPS ═══════════════ #}
  1415.         <section class="wr-section">
  1416.             <div class="wr-container">
  1417.                 <div class="apps-grid">
  1418.                     <a href="{{ isFR ? (ios_fr|default('#')) : (ios_us|default('#')) }}" class="app-card">
  1419.                     <span class="app-card-icon">
  1420.                         <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>
  1421.                     </span>
  1422.                         <h3 class="app-card-name">{{ t.apps_ios }}</h3>
  1423.                         <p class="app-card-desc">{{ t.apps_ios_desc }}</p>
  1424.                         <span class="app-card-cta">App Store
  1425.                         <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>
  1426.                     </span>
  1427.                     </a>
  1428.                     <a href="{{ isFR ? (android_fr|default('#')) : (android_us|default('#')) }}" class="app-card">
  1429.                     <span class="app-card-icon">
  1430.                         <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>
  1431.                     </span>
  1432.                         <h3 class="app-card-name">{{ t.apps_android }}</h3>
  1433.                         <p class="app-card-desc">{{ t.apps_android_desc }}</p>
  1434.                         <span class="app-card-cta">Google Play
  1435.                         <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>
  1436.                     </span>
  1437.                     </a>
  1438.                     <a href="{% if app.request.locale == 'en' %}{{ path('whileresume_homepage') }}{% else %}{{ path('locale_whileresume_homepage',{'_locale':app.request.locale}) }}{% endif %}#register" class="app-card">
  1439.                         <span class="app-card-icon">
  1440.                             <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>
  1441.                         </span>
  1442.                         <h3 class="app-card-name">{{ t.apps_web }}</h3>
  1443.                         <p class="app-card-desc">{{ t.apps_web_desc }}</p>
  1444.                         <span class="app-card-cta">whileresume.com
  1445.                         <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>
  1446.                     </span>
  1447.                     </a>
  1448.                 </div>
  1449.             </div>
  1450.         </section>
  1453.         {# ═══════════════ ARTICLES ═══════════════ #}
  1454.         {% if articles is defined and articles|length > 0 %}
  1455.             <section class="wr-section">
  1456.                 <div class="wr-container">
  1457.                     <div class="wr-section-head">
  1458.                         <h2 class="wr-title wr-title--sm">{{ t.articles_title }}</h2>
  1459.                     </div>
  1461.                     <div class="articles-list">
  1462.                         {% for a in articles|slice(0,6) %}
  1463.                             {% set prefix = "" %}
  1464.                             {% set urlA = path('cvs_website_article',{'slug': a.slug}) %}
  1465.                             {% if app.request.locale != default_locale %}
  1466.                                 {% set urlA = path('locale_cvs_website_article',{'_locale':app.request.locale,'slug': a.slug}) %}
  1467.                                 {% set prefix = "/" ~ app.request.locale %}
  1468.                             {% endif %}
  1469.                             {% if a.pageslug3 is not empty %}
  1470.                                 {% set urlA = prefix ~ '/' ~ a.pageslug ~ '/' ~ a.pageslug2 ~ '/' ~ a.pageslug3 %}
  1471.                             {% elseif a.pageslug2 is not empty %}
  1472.                                 {% set urlA = prefix ~ '/' ~ a.pageslug ~ '/' ~ a.pageslug2 %}
  1473.                             {% elseif a.pageslug is not empty %}
  1474.                                 {% set urlA = prefix ~ '/' ~ a.pageslug %}
  1475.                             {% endif %}
  1477.                             <a href="{{ urlA }}" class="wr-article">
  1478.                                 <div class="wr-article-logo">
  1479.                                     <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  1480.                                         <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/>
  1481.                                         <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/>
  1482.                                     </svg>
  1483.                                 </div>
  1484.                                 <div class="wr-article-info">
  1485.                                     <h3 class="wr-article-title">{{ a.title }}</h3>
  1486.                                     <div class="wr-article-meta">
  1487.                                         {% if a.subtitle is not empty %}
  1488.                                             <span>{{ a.subtitle|length > 60 ? a.subtitle|slice(0,60) ~ '…' : a.subtitle }}</span>
  1489.                                         {% endif %}
  1490.                                     </div>
  1491.                                 </div>
  1492.                                 <span class="wr-article-badge">{{ t.read_article }}</span>
  1493.                                 <span class="wr-article-arrow">
  1494.                                 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  1495.                                     <polyline points="9 18 15 12 9 6"/>
  1496.                                 </svg>
  1497.                             </span>
  1498.                             </a>
  1499.                         {% endfor %}
  1500.                     </div>
  1502.                     <div class="articles-cta">
  1503.                         <a href="{% if isFR %}{{ path('locale_cvs_website_articles',{'_locale':'fr'}) }}{% else %}{{ path('cvs_website_articles') }}{% endif %}">
  1504.                             {{ t.articles_view_all }}
  1505.                             <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>
  1506.                         </a>
  1507.                     </div>
  1508.                 </div>
  1509.             </section>
  1510.         {% endif %}
  1512.         {# ═══════════════ CTA FINAL ═══════════════ #}
  1513.         {% if app.user is null %}
  1514.             <section class="wr-section">
  1515.                 <div class="wr-container">
  1516.                     <div class="final-card">
  1518.                         <h2 class="final-title">{{ t.final_title }}</h2>
  1520.                         <div class="final-grid">
  1521.                             {# Recruteur #}
  1522.                             <div class="final-sub">
  1523.                                 <div class="final-sub-head">
  1524.                             <span class="final-sub-icon">
  1525.                                 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
  1526.                                     <rect x="2" y="7" width="20" height="14" rx="2" ry="2"/>
  1527.                                     <path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/>
  1528.                                 </svg>
  1529.                             </span>
  1530.                                     <span class="final-sub-label">{{ t.final_recruiter_label }}</span>
  1531.                                 </div>
  1532.                                 <h3 class="final-sub-title">{{ t.final_recruiter_title }}</h3>
  1533.                                 <p class="final-sub-desc">{{ t.final_recruiter_desc }}</p>
  1534.                                 <a href="{{ path('whileresume_business_' ~ app.request.locale) }}" class="final-sub-btn">
  1535.                                     {{ t.final_recruiter }}
  1536.                                     <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>
  1537.                                 </a>
  1538.                             </div>
  1540.                             {# Candidat #}
  1541.                             <div class="final-sub">
  1542.                                 <div class="final-sub-head">
  1543.                                 <span class="final-sub-icon">
  1544.                                     <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
  1545.                                         <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
  1546.                                         <circle cx="12" cy="7" r="4"/>
  1547.                                     </svg>
  1548.                                 </span>
  1549.                                     <span class="final-sub-label">{{ t.final_candidate_label }}</span>
  1550.                                 </div>
  1551.                                 <h3 class="final-sub-title">{{ t.final_candidate_title }}</h3>
  1552.                                 <p class="final-sub-desc">{{ t.final_candidate_desc }}</p>
  1553.                                 <a href="{% if app.request.locale == 'en' %}{{ path('whileresume_homepage') }}{% else %}{{ path('locale_whileresume_homepage',{'_locale':app.request.locale}) }}{% endif %}#register" class="final-sub-btn">
  1554.                                     {{ t.final_candidate }}
  1555.                                     <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>
  1556.                                 </a>
  1557.                             </div>
  1558.                         </div>
  1559.                     </div>
  1560.                 </div>
  1561.             </section>
  1562.         {% endif %}
  1563.     </div>
  1564. {% endblock body %}
  1566. {% block footer_js %}
  1567.     {{ parent() }}
  1568.     <script>
  1569.         (function(){
  1570.             var search   = document.getElementById('wrHeroSearch');
  1571.             var input    = document.getElementById('wrHeroSearchInput');
  1572.             var clearBtn = document.getElementById('wrHeroSearchClear');
  1573.             var jobsBody = document.getElementById('wrHeroJobsBody');
  1574.             var countEl  = document.getElementById('wrHeroJobsCount');
  1575.             var linkEl   = document.getElementById('wrHeroJobsLink');
  1576.             if (!search || !input || !jobsBody) return;
  1578.             var searchUrl   = search.dataset.searchUrl;
  1579.             var jobsListUrl = search.dataset.jobsListUrl;
  1581.             // On garde l'état initial pour pouvoir le restaurer
  1582.             var defaultBodyHtml  = jobsBody.innerHTML;
  1583.             var defaultCountHtml = countEl ? countEl.innerHTML : '';
  1584.             var defaultLinkHref  = linkEl ? linkEl.getAttribute('href') : jobsListUrl;
  1586.             var debounceTimer = null;
  1587.             var currentRequest = null;
  1588.             var lastQuery = '';
  1590.             var T = {
  1591.                 loading:      '{{ t.search_loading|escape('js') }}',
  1592.                 empty:        '{{ t.search_no_results|escape('js') }}',
  1593.                 emptyHint:    '{{ t.search_no_results_hint|escape('js') }}',
  1594.                 count:        '{{ t.search_results_count|escape('js') }}',
  1595.                 viewAll:      '{{ t.search_view_all|escape('js') }}',
  1596.                 view:         '{{ t.search_view_offer|escape('js') }}'
  1597.             };
  1599.             function escHtml(s){
  1600.                 if (s == null) return '';
  1601.                 return String(s).replace(/[&<>"']/g, function(c){
  1602.                     return {'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c];
  1603.                 });
  1604.             }
  1606.             function setHeaderCount(total){
  1607.                 if (!countEl) return;
  1608.                 countEl.innerHTML = '<strong>' + total + '</strong>' + escHtml(T.count);
  1609.             }
  1611.             function setHeaderLink(href){
  1612.                 if (!linkEl) return;
  1613.                 linkEl.setAttribute('href', href);
  1614.             }
  1616.             function setLoading(){
  1617.                 jobsBody.innerHTML =
  1618.                     '<div class="hero-jobs-loading">' +
  1619.                     '<span class="hero-jobs-spinner"></span>' +
  1620.                     '<span>' + escHtml(T.loading) + '</span>' +
  1621.                     '</div>';
  1622.             }
  1624.             function setEmpty(){
  1625.                 jobsBody.innerHTML =
  1626.                     '<div class="hero-jobs-empty">' +
  1627.                     '<div class="hero-jobs-empty-icon">' +
  1628.                     '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">' +
  1629.                     '<circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>' +
  1630.                     '</svg>' +
  1631.                     '</div>' +
  1632.                     '<p class="hero-jobs-empty-title">' + escHtml(T.empty) + '</p>' +
  1633.                     '<p class="hero-jobs-empty-hint">' + escHtml(T.emptyHint) + '</p>' +
  1634.                     '</div>';
  1635.             }
  1637.             function restoreDefault(){
  1638.                 jobsBody.innerHTML = defaultBodyHtml;
  1639.                 if (countEl) countEl.innerHTML = defaultCountHtml;
  1640.                 if (linkEl) linkEl.setAttribute('href', defaultLinkHref);
  1641.             }
  1643.             function renderResults(payload, query){
  1644.                 var jobs  = (payload && payload.jobs)  || [];
  1645.                 var total = (payload && typeof payload.total === 'number') ? payload.total : jobs.length;
  1647.                 setHeaderCount(total);
  1648.                 setHeaderLink(jobsListUrl + '?q=' + encodeURIComponent(query));
  1650.                 if (!jobs.length){
  1651.                     setEmpty();
  1652.                     return;
  1653.                 }
  1655.                 var html = '';
  1656.                 jobs.slice(0, 6).forEach(function(j){
  1657.                     var title   = j.jobTitle || j.title || '';
  1658.                     var company = j.companyName || j.company || '';
  1659.                     var city    = j.city || '';
  1660.                     var country = j.country || '';
  1661.                     var et      = j.employmentType || '';
  1662.                     var img     = j.image || j.imageUrl || '';
  1663.                     var url     = j.url || (jobsListUrl + '?q=' + encodeURIComponent(query));
  1664.                     var initial = (company || title || '?').charAt(0).toUpperCase();
  1666.                     var location = city + (country ? ', ' + country : '');
  1667.                     var metaParts = [];
  1668.                     if (company)  metaParts.push('<span>' + escHtml(company) + '</span>');
  1669.                     if (location) metaParts.push('<span class="hero-default-job-meta-sep"></span><span>' + escHtml(location) + '</span>');
  1670.                     if (et)       metaParts.push('<span class="hero-default-job-meta-sep"></span><span>' + escHtml(et) + '</span>');
  1672.                     html +=
  1673.                         '<a href="' + escHtml(url) + '" class="hero-default-job">' +
  1674.                         '<div class="hero-default-job-logo">' +
  1675.                         (img
  1676.                             ? '<img src="' + escHtml(img) + '" alt="">'
  1677.                             : escHtml(initial)) +
  1678.                         '</div>' +
  1679.                         '<div class="hero-default-job-info">' +
  1680.                         '<h3 class="hero-default-job-title">' + escHtml(title) + '</h3>' +
  1681.                         '<p class="hero-default-job-meta">' + metaParts.join('') + '</p>' +
  1682.                         '</div>' +
  1683.                         '<span class="hero-default-job-arrow">' +
  1684.                         '<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>' +
  1685.                         '</span>' +
  1686.                         '</a>';
  1687.                 });
  1689.                 jobsBody.innerHTML = html;
  1690.             }
  1692.             function doSearch(query){
  1693.                 if (currentRequest && currentRequest.abort) {
  1694.                     try { currentRequest.abort(); } catch(e){}
  1695.                 }
  1696.                 setLoading();
  1697.                 var url = searchUrl + (searchUrl.indexOf('?') > -1 ? '&' : '?') + 'q=' + encodeURIComponent(query);
  1699.                 var ctrl = (typeof AbortController !== 'undefined') ? new AbortController() : null;
  1700.                 currentRequest = ctrl;
  1702.                 fetch(url, { headers: { 'Accept': 'application/json' }, signal: ctrl ? ctrl.signal : undefined })
  1703.                     .then(function(r){ return r.ok ? r.json() : Promise.reject(r.status); })
  1704.                     .then(function(data){ renderResults(data, query); })
  1705.                     .catch(function(err){
  1706.                         if (err && err.name === 'AbortError') return;
  1707.                         setEmpty();
  1708.                     });
  1709.             }
  1711.             // Input live (debounce 280ms)
  1712.             input.addEventListener('input', function(){
  1713.                 var q = input.value.trim();
  1714.                 clearBtn.classList.toggle('is-visible', q.length > 0);
  1716.                 if (debounceTimer) clearTimeout(debounceTimer);
  1718.                 if (q.length < 2){
  1719.                     restoreDefault();
  1720.                     lastQuery = '';
  1721.                     return;
  1722.                 }
  1723.                 if (q === lastQuery) return;
  1725.                 debounceTimer = setTimeout(function(){
  1726.                     lastQuery = q;
  1727.                     doSearch(q);
  1728.                 }, 280);
  1729.             });
  1731.             // Enter → page de résultats complète
  1732.             input.addEventListener('keydown', function(e){
  1733.                 if (e.key === 'Enter'){
  1734.                     e.preventDefault();
  1735.                     var q = input.value.trim();
  1736.                     if (!q) return;
  1737.                     window.location.href = jobsListUrl + '?q=' + encodeURIComponent(q);
  1738.                 }
  1739.                 if (e.key === 'Escape'){
  1740.                     input.value = '';
  1741.                     clearBtn.classList.remove('is-visible');
  1742.                     restoreDefault();
  1743.                     lastQuery = '';
  1744.                     input.blur();
  1745.                 }
  1746.             });
  1748.             // Clear
  1749.             clearBtn.addEventListener('click', function(){
  1750.                 input.value = '';
  1751.                 clearBtn.classList.remove('is-visible');
  1752.                 restoreDefault();
  1753.                 lastQuery = '';
  1754.                 input.focus();
  1755.             });
  1757.             // Pills "Populaire" — au clic, on remplit l'input et on lance la recherche
  1758.             document.querySelectorAll('.hero-popular-pill').forEach(function(pill){
  1759.                 pill.addEventListener('click', function(){
  1760.                     var keyword = pill.dataset.keyword || pill.dataset.label || '';
  1761.                     if (!keyword) return;
  1763.                     // Visuel actif
  1764.                     document.querySelectorAll('.hero-popular-pill').forEach(function(p){ p.classList.remove('is-active'); });
  1765.                     pill.classList.add('is-active');
  1767.                     input.value = keyword;
  1768.                     clearBtn.classList.add('is-visible');
  1769.                     lastQuery = keyword;
  1770.                     doSearch(keyword);
  1771.                     input.focus();
  1772.                 });
  1773.             });
  1774.         })();
  1776.         /* ═══ Reveal au scroll (Intersection Observer) ═══ */
  1777.         (function(){
  1778.             var els = document.querySelectorAll('.reveal');
  1779.             if (!els.length) return;
  1781.             if (!('IntersectionObserver' in window)){
  1782.                 // Fallback : tout révéler
  1783.                 els.forEach(function(el){ el.classList.add('is-revealed'); });
  1784.                 return;
  1785.             }
  1787.             var io = new IntersectionObserver(function(entries){
  1788.                 entries.forEach(function(entry){
  1789.                     if (entry.isIntersecting){
  1790.                         entry.target.classList.add('is-revealed');
  1791.                         io.unobserve(entry.target);
  1792.                     }
  1793.                 });
  1794.             }, { threshold: 0.12, rootMargin: '0px 0px -60px 0px' });
  1796.             els.forEach(function(el){ io.observe(el); });
  1797.         })();
  1798.     </script>
  1799. {% endblock footer_js %}