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

Open in your IDE?
  1. {% extends 'application/whileresume/website/candidates/layout-social.html.twig' %}
  3. {# ═══════════════════════════════════════════════════════════════════
  4.    STRINGS bilingues
  5. ═══════════════════════════════════════════════════════════════════ #}
  6. {% set isFR = app.request.locale == 'fr' %}
  7. {% set t = {
  8.     hero_eyebrow:        isFR ? 'Plateforme d’emploi nouvelle génération' : 'A new-generation job platform',
  9.     hero_title_1:        isFR ? 'Faites parler' : 'Let your',
  10.     hero_title_2:        isFR ? 'votre CV.' : 'CV speak.',
  11.     hero_title_3:        isFR ? 'On s’occupe du reste.' : 'We handle the rest.',
  12.     hero_lede:           isFR ? 'Whileresume met en relation les talents avec les entreprises qui recrutent — sans candidature à rallonge, sans CV à refaire 10 fois. Likez, matchez, échangez.' : 'Whileresume connects talent with hiring companies — no endless applications, no CVs rewritten ten times. Like, match, chat.',
  13.     hero_search_placeholder: isFR ? 'Un poste, une ville, une entreprise…' : 'A job, a city, a company…',
  14.     hero_search_button:  isFR ? 'Rechercher' : 'Search',
  15.     hero_byline_jobs:    isFR ? 'offres en ligne' : 'jobs online',
  16.     hero_byline_apps:    isFR ? 'iOS · Android · Web' : 'iOS · Android · Web',
  17.     hero_byline_free:    isFR ? 'gratuit pour les candidats' : 'free for candidates',
  18.     search_loading:      isFR ? 'Recherche…' : 'Searching…',
  19.     search_no_results:   isFR ? 'Aucune offre ne correspond à votre recherche' : 'No job matches your search',
  20.     search_no_results_hint: isFR ? 'Essayez avec d’autres mots-clés' : 'Try other keywords',
  21.     search_results_count: isFR ? 'offres trouvées' : 'jobs found',
  22.     search_view_all:     isFR ? 'Voir toutes les offres' : 'See all jobs',
  23.     search_view_offer:   isFR ? 'Voir l’offre' : 'View job',
  24.     search_clear:        isFR ? 'Effacer' : 'Clear',
  26.     paths_eyebrow:       isFR ? 'Trois manières d’entrer' : 'Three ways in',
  27.     paths_title:         isFR ? 'Choisissez votre point de départ' : 'Choose your starting point',
  28.     paths_lede:          isFR ? 'Que vous arriviez avec un CV bien rangé ou simplement avec l’envie de bouger, il existe une porte qui vous correspond.' : 'Whether you arrive with a polished CV or just the urge to move on, there’s a door for you.',
  29.     path1_label:         isFR ? 'J’ai déjà un CV' : 'I have a CV',
  30.     path1_title:         isFR ? 'Envoyez. On lit. On améliore.' : 'Send. Read. Refine.',
  31.     path1_desc:          isFR ? 'Vous déposez votre CV, on en extrait les compétences, on identifie ce qui peut être renforcé, et on régénère deux versions propres dans la langue et le thème de votre choix.' : 'You upload your CV, we extract your skills, identify what can be strengthened, and regenerate two clean versions in the language and theme of your choice.',
  32.     path1_cta:           isFR ? 'Déposer mon CV' : 'Upload my CV',
  33.     path2_label:         isFR ? 'Je pars de zéro' : 'Starting fresh',
  34.     path2_title:         isFR ? 'Quelques étapes. Un beau CV.' : 'A few steps. A clean CV.',
  35.     path2_desc:          isFR ? 'Pas de CV ? On vous accompagne dans un tunnel guidé. À la fin, vous repartez avec un document construit, lisible, prêt à être envoyé — ou à laisser parler pour vous, ici.' : 'No CV? We guide you through. At the end, you walk out with a structured, readable document, ready to send — or to let it speak for you, here.',
  36.     path2_cta:           isFR ? 'Construire mon CV' : 'Build my CV',
  37.     path3_label:         isFR ? 'Je veux d’abord regarder' : 'Browse first',
  38.     path3_title:         isFR ? 'Liker, c’est déjà commencer.' : 'Liking is already starting.',
  39.     path3_desc:          isFR ? 'Parcourez les offres et les entreprises. Likez celles qui vous parlent. On en déduit vos goûts, on vous propose mieux, et les recruteurs intéressés peuvent vous trouver.' : 'Browse jobs and companies. Like the ones that speak to you. We learn your taste, suggest better ones, and interested recruiters find you.',
  40.     path3_cta:           isFR ? 'Voir les offres' : 'See jobs',
  42.     how_eyebrow:         isFR ? 'Comment ça marche' : 'How it works',
  43.     how_title:           isFR ? 'Quatre temps, un mouvement.' : 'Four moves, one motion.',
  44.     how_lede:            isFR ? 'On a réduit le parcours à l’essentiel. Pas de remplissage, pas de vous demander deux fois la même chose.' : 'We pared the journey down to the essentials. No filler, no asking the same thing twice.',
  45.     step1_title:         isFR ? 'Vous racontez' : 'You tell',
  46.     step1_desc:          isFR ? 'CV uploadé ou tunnel guidé. On collecte ce qu’il faut savoir : compétences, parcours, envies, langues.' : 'CV uploaded or guided tunnel. We collect what matters: skills, experience, wishes, languages.',
  47.     step2_title:         isFR ? 'On analyse' : 'We analyze',
  48.     step2_desc:          isFR ? 'Notre intelligence relit votre profil. Forces, axes d’amélioration : vous recevez un retour clair.' : 'Our intelligence re-reads your profile. Strengths, areas to improve: you get a clear report.',
  49.     step3_title:         isFR ? 'On génère' : 'We generate',
  50.     step3_desc:          isFR ? 'Votre CV est généré dans deux thèmes, plusieurs couleurs, plusieurs langues. Téléchargeable à tout moment.' : 'Your CV is generated in two themes, multiple colors, multiple languages. Downloadable any time.',
  51.     step4_title:         isFR ? 'On vous expose' : 'We expose you',
  52.     step4_desc:          isFR ? 'Votre profil devient visible des recruteurs qui cherchent exactement votre type de talent.' : 'Your profile becomes visible to recruiters looking for exactly your type of talent.',
  54.     apps_eyebrow:        isFR ? 'Disponible partout' : 'Available everywhere',
  55.     apps_title:          isFR ? 'Trois plateformes, une seule expérience' : 'Three platforms, one experience',
  56.     apps_lede:           isFR ? 'Vos préférences vous suivent. Likez une offre dans le métro, envoyez votre CV depuis votre canapé.' : 'Your preferences follow you. Like an offer on the subway, send your CV from the couch.',
  57.     apps_ios:            'iOS',
  58.     apps_android:        'Android',
  59.     apps_web:            isFR ? 'Web' : 'Web',
  60.     apps_ios_desc:       isFR ? 'Téléchargez sur l’App Store' : 'Download on the App Store',
  61.     apps_android_desc:   isFR ? 'Téléchargez sur Google Play' : 'Get it on Google Play',
  62.     apps_web_desc:       isFR ? 'Connectez-vous depuis le navigateur' : 'Log in from your browser',
  64.     match_eyebrow:       isFR ? 'Le match ne se force pas' : 'A match cannot be forced',
  65.     match_title:         isFR ? 'Likez. Matchez. Échangez.' : 'Like. Match. Chat.',
  66.     match_lede:          isFR ? 'Vous likez ce qui vous plaît, on apprend, et les entreprises intéressées passent la première.' : 'You like what catches your eye, we learn, and interested companies make the first move.',
  67.     match_b1_title:      isFR ? 'Likez ce qui vous parle' : 'Like what speaks to you',
  68.     match_b1_desc:       isFR ? 'Offres, entreprises, recruteurs. On retient tout pour mieux vous connaître.' : 'Jobs, companies, recruiters. We remember everything to know you better.',
  69.     match_b2_title:      isFR ? 'Recommandations sur mesure' : 'Tailored recommendations',
  70.     match_b2_desc:       isFR ? 'Plus vous likez, plus on vous propose des offres alignées avec votre profil.' : 'The more you like, the more we suggest offers aligned with your profile.',
  71.     match_b3_title:      isFR ? 'Les recruteurs viennent à vous' : 'Recruiters come to you',
  72.     match_b3_desc:       isFR ? 'Quand votre profil match, c’est l’entreprise qui passe la première.' : 'When your profile matches, the company makes the first move.',
  73.     match_b4_title:      isFR ? 'Offres externes incluses' : 'External offers included',
  74.     match_b4_desc:       isFR ? 'On indexe aussi des offres externes pour maximiser vos chances. Lien direct vers le site de l’employeur.' : 'We also index external offers to maximize your chances. Direct link to the employer’s site.',
  76.     keywords_title:      isFR ? 'Cherchez par domaine' : 'Search by field',
  77.     keywords_lede:       isFR ? 'Une porte d’entrée par métier' : 'One door per craft',
  78.     popular_title:       isFR ? 'Offres populaires' : 'Popular jobs',
  79.     popular_lede:        isFR ? 'Une sélection d’offres ouvertes en ce moment, par catégorie' : 'A selection of currently open positions, by category',
  80.     btn_more:            isFR ? 'Tout voir' : 'See all',
  82.     articles_title:      isFR ? 'Conseils, ressources & guides' : 'Advice, resources & guides',
  83.     articles_lede:       isFR ? 'Pour rebondir, négocier, postuler mieux.' : 'To bounce back, negotiate and apply better.',
  84.     articles_view_all:   isFR ? 'Voir tous les articles' : 'See all articles',
  85.     read_article:        isFR ? 'Lire' : 'Read',
  87.     final_title:         isFR ? 'Prêt à propulser votre carrière ?' : 'Ready to take your career further?',
  88.     final_subtitle:      isFR ? 'Rejoignez celles et ceux qui ont déjà tourné la page.' : 'Join those who have already turned the page.',
  89.     final_candidate:     isFR ? 'Je suis candidat·e' : 'I’m a candidate',
  90.     final_recruiter:     isFR ? 'Je recrute' : 'I’m hiring'
  91. } %}
  93. {% block title %}{{ page.shortTitle }}{% endblock %}
  94. {% block description %}{{ page.shortDescription }}{% endblock %}
  95. {% block robots %}{{ page.robots }}{% endblock %}
  96. {% block canonical %}{% include "/vitrine/lexend/components/languages/canonical_classic.html.twig" %}{% endblock %}
  98. {% block css %}
  99.     {{ parent() }}
  100.     <style>
  101.         /* ═══════════════════════════════════════════════════════════════════
  102.            VARIABLES
  103.         ═══════════════════════════════════════════════════════════════════ */
  104.         :root{
  105.             --wr-bg:#FBFCFE;
  106.             --wr-card:#FFFFFF;
  107.             --wr-violet:#8A63C0;
  108.             --wr-violet-2:#A98AD3;
  109.             --wr-violet-soft:#F2EDFA;
  110.             --wr-violet-softer:#F8F4FD;
  111.             --wr-violet-dark:#6B47A6;
  112.             --wr-ink:#1E1B2E;
  113.             --wr-ink-2:#374151;
  114.             --wr-muted:#6B7280;
  115.             --wr-muted-2:#9CA3AF;
  116.             --wr-line:#EEF1F7;
  117.             --wr-line-2:#E5E9F0;
  118.             --wr-shadow:0 1px 2px rgba(30,27,46,.04),0 4px 16px rgba(30,27,46,.04);
  119.             --wr-shadow-hover:0 4px 8px rgba(138,99,192,.08),0 12px 32px rgba(138,99,192,.1);
  120.         }
  122.         /* ═══════════════════════════════════════════════════════════════════
  123.            PLEINE LARGEUR — On retire la réservation d'espace de la sidebar droite
  124.            ═══════════════════════════════════════════════════════════════════ */
  125.         body .main-content.right-chat-active{padding-right:0!important}
  126.         body .main-content{padding-right:0!important}
  127.         body .right-chat{display:none!important}
  128.         body .middle-sidebar-bottom .middle-sidebar-left{padding-right:0!important;max-width:none!important;width:100%!important}
  129.         body .middle-sidebar-bottom{max-width:none!important}
  131.         .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}
  132.         @media(max-width:991px){.wr{margin:0 -15px}}
  133.         .wr *{box-sizing:border-box}
  134.         .wr a{color:inherit;text-decoration:none}
  136.         /* ═══════════════════════════════════════════════════════════════════
  137.            SECTIONS GENERIC — Fond UNIFIÉ partout (pas d'alternance)
  138.            ═══════════════════════════════════════════════════════════════════ */
  139.         .wr-section{padding:80px 32px;background:var(--wr-bg);position:relative}
  140.         .wr-section--tight{padding:48px 32px}
  141.         @media(max-width:768px){.wr-section{padding:56px 20px}.wr-section--tight{padding:36px 20px}}
  143.         /* Filet décoratif au lieu d'un changement de couleur */
  144.         .wr-section + .wr-section::before{
  145.             content:"";
  146.             position:absolute;top:0;left:50%;transform:translateX(-50%);
  147.             width:80px;height:1px;
  148.             background:linear-gradient(90deg,transparent,var(--wr-line-2),transparent);
  149.         }
  151.         .wr-container{max-width:1200px;margin:0 auto;position:relative}
  153.         /* ═══ Eyebrow ═══ */
  154.         .wr-eyebrow{
  155.             display:inline-flex;align-items:center;gap:8px;
  156.             padding:6px 14px;border-radius:100px;
  157.             background:var(--wr-violet-soft);
  158.             color:var(--wr-violet-dark);
  159.             font-size:11.5px;font-weight:600;
  160.             text-transform:uppercase;letter-spacing:.12em;
  161.             margin-bottom:22px;
  162.         }
  163.         .wr-eyebrow-dot{width:6px;height:6px;border-radius:50%;background:var(--wr-violet);animation:wrPulse 2.4s ease-in-out infinite}
  164.         @keyframes wrPulse{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.3)}}
  166.         /* ═══ Titres — THIN + LARGE ═══ */
  167.         .wr-title{
  168.             font-family:inherit;
  169.             font-weight:500;
  170.             font-size:36px;line-height:1.1;letter-spacing:-0.03em;
  171.             color:var(--wr-ink);
  172.             margin:0 auto 16px;
  173.             max-width:920px;
  174.         }
  175.         @media(min-width:768px){.wr-title{font-size:48px}}
  176.         @media(min-width:1024px){.wr-title{font-size:58px}}
  177.         .wr-title--sm{font-size:30px}
  178.         @media(min-width:768px){.wr-title--sm{font-size:38px}}
  179.         .wr-title em{font-style:normal;font-weight:600;color:var(--wr-violet)}
  181.         .wr-lede{
  182.             font-size:17px;line-height:1.55;font-weight:400;
  183.             color:var(--wr-ink-2);
  184.             margin:0 auto;max-width:680px;
  185.         }
  187.         .wr-section-head{text-align:center;margin-bottom:56px}
  189.         /* ═══════════════════════════════════════════════════════════════════
  190.            HERO — Plein texte, fond uni, animation discrète
  191.            ═══════════════════════════════════════════════════════════════════ */
  192.         .hero{
  193.             position:relative;
  194.             background:var(--wr-bg);
  195.             padding:100px 32px 80px;
  196.             overflow:hidden;
  197.         }
  198.         @media(max-width:768px){.hero{padding:60px 20px 60px}}
  200.         /* Décor : 2 blobs très flous violet pâle, plus discrets */
  201.         .hero::before{
  202.             content:"";position:absolute;
  203.             top:-260px;right:-180px;width:560px;height:560px;
  204.             background:radial-gradient(circle,rgba(138,99,192,.14) 0%,transparent 65%);
  205.             pointer-events:none;filter:blur(50px);
  206.         }
  207.         .hero::after{
  208.             content:"";position:absolute;
  209.             bottom:-200px;left:-180px;width:480px;height:480px;
  210.             background:radial-gradient(circle,rgba(138,99,192,.09) 0%,transparent 65%);
  211.             pointer-events:none;filter:blur(50px);
  212.         }
  214.         .hero-dots{
  215.             position:absolute;inset:0;
  216.             background-image:radial-gradient(circle,rgba(138,99,192,.07) 1px,transparent 1px);
  217.             background-size:32px 32px;
  218.             mask-image:radial-gradient(ellipse 60% 45% at 50% 45%,black,transparent 80%);
  219.             -webkit-mask-image:radial-gradient(ellipse 60% 45% at 50% 45%,black,transparent 80%);
  220.             pointer-events:none;
  221.         }
  223.         .hero-inner{position:relative;z-index:2;max-width:1100px;margin:0 auto;text-align:center}
  225.         .hero-badge{
  226.             display:inline-flex;align-items:center;gap:8px;
  227.             padding:7px 14px;border-radius:100px;
  228.             background:var(--wr-card);
  229.             border:1px solid var(--wr-line-2);
  230.             color:var(--wr-violet-dark);
  231.             font-size:12px;font-weight:500;
  232.             margin-bottom:28px;
  233.             box-shadow:var(--wr-shadow);
  234.             opacity:0;transform:translateY(8px);
  235.             animation:wrFadeUp .8s ease forwards;
  236.         }
  237.         .hero-badge-dot{width:6px;height:6px;border-radius:50%;background:#10B981;box-shadow:0 0 0 0 rgba(16,185,129,.4);animation:wrPulse2 2s ease infinite}
  238.         @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)}}
  239.         @keyframes wrFadeUp{to{opacity:1;transform:translateY(0)}}
  241.         /* ═══ Titre hero — THIN large ═══ */
  242.         .hero-title{
  243.             font-weight:400;
  244.             font-size:44px;line-height:1.04;letter-spacing:-0.04em;
  245.             color:var(--wr-ink);
  246.             margin:0 auto 24px;
  247.             max-width:1000px;
  248.         }
  249.         @media(min-width:768px){.hero-title{font-size:68px;letter-spacing:-0.045em}}
  250.         @media(min-width:1100px){.hero-title{font-size:88px}}
  252.         .hero-title-line{display:block;opacity:0;transform:translateY(12px);animation:wrFadeUp .9s cubic-bezier(.2,.7,.2,1) forwards}
  253.         .hero-title-line:nth-child(1){animation-delay:.1s}
  254.         .hero-title-line:nth-child(2){animation-delay:.25s}
  255.         .hero-title-line:nth-child(3){animation-delay:.4s}
  257.         .hero-title-accent{
  258.             color:var(--wr-violet);
  259.             font-weight:500;
  260.             position:relative;display:inline-block;
  261.         }
  262.         .hero-title-accent::after{
  263.             content:"";
  264.             position:absolute;left:0;right:0;bottom:.04em;
  265.             height:.1em;
  266.             background:var(--wr-violet);
  267.             opacity:.22;
  268.             transform-origin:left center;
  269.             transform:scaleX(0);
  270.             animation:wrUnderline 1.1s cubic-bezier(.6,0,.4,1) 1s forwards;
  271.             border-radius:2px;
  272.         }
  273.         @keyframes wrUnderline{to{transform:scaleX(1)}}
  275.         .hero-lede{
  276.             font-size:17px;line-height:1.55;color:var(--wr-ink-2);font-weight:400;
  277.             margin:0 auto 36px;max-width:620px;
  278.             opacity:0;animation:wrFadeUp .9s ease 1.1s forwards;
  279.         }
  280.         @media(min-width:768px){.hero-lede{font-size:18px}}
  282.         /* ═══════════════════════════════════════════════════════════════════
  283.            HERO — RECHERCHE INLINE (avec résultats AJAX)
  284.            ═══════════════════════════════════════════════════════════════════ */
  285.         .hero-search-wrap{
  286.             max-width:680px;margin:0 auto 28px;
  287.             opacity:0;animation:wrFadeUp .9s ease 1.3s forwards;
  288.         }
  290.         .hero-search{
  291.             display:flex;align-items:center;
  292.             background:var(--wr-card);
  293.             border:1px solid var(--wr-line-2);
  294.             border-radius:16px;
  295.             padding:6px;
  296.             box-shadow:0 2px 6px rgba(30,27,46,.04),0 16px 40px rgba(138,99,192,.08);
  297.             transition:transform .2s,box-shadow .2s,border-color .2s,border-radius .25s;
  298.             position:relative;z-index:5;
  299.         }
  300.         .hero-search:focus-within,
  301.         .hero-search.has-results{
  302.             border-color:var(--wr-violet-2);
  303.             box-shadow:0 4px 10px rgba(30,27,46,.05),0 20px 50px rgba(138,99,192,.16);
  304.         }
  305.         .hero-search.has-results{
  306.             border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom-color:var(--wr-line);
  307.         }
  308.         .hero-search-icon{
  309.             display:flex;align-items:center;justify-content:center;
  310.             width:42px;height:42px;flex-shrink:0;color:var(--wr-muted-2);
  311.         }
  312.         .hero-search-icon svg{width:18px;height:18px}
  313.         .hero-search-input{
  314.             flex:1;border:0;outline:0;background:transparent;
  315.             font-size:15px;font-family:inherit;color:var(--wr-ink);
  316.             padding:0 6px;height:42px;min-width:0;
  317.         }
  318.         .hero-search-input::placeholder{color:var(--wr-muted-2)}
  319.         .hero-search-clear{
  320.             display:none;align-items:center;justify-content:center;
  321.             width:32px;height:32px;flex-shrink:0;color:var(--wr-muted-2);
  322.             border:0;background:transparent;cursor:pointer;border-radius:8px;
  323.             transition:background .15s,color .15s;
  324.         }
  325.         .hero-search-clear:hover{background:var(--wr-violet-soft);color:var(--wr-violet)}
  326.         .hero-search-clear svg{width:14px;height:14px}
  327.         .hero-search-clear.is-visible{display:inline-flex}
  328.         .hero-search-btn{
  329.             background:var(--wr-violet);color:#fff;
  330.             border:0;padding:0 22px;border-radius:11px;
  331.             font-size:14px;font-weight:600;font-family:inherit;
  332.             cursor:pointer;flex-shrink:0;height:42px;
  333.             display:inline-flex;align-items:center;gap:6px;
  334.             transition:background .15s,transform .15s,box-shadow .15s;
  335.             box-shadow:0 4px 12px rgba(138,99,192,.3);
  336.         }
  337.         .hero-search-btn:hover{background:var(--wr-violet-dark);transform:translateY(-1px);box-shadow:0 6px 18px rgba(138,99,192,.4)}
  338.         .hero-search-btn svg{width:13px;height:13px}
  339.         @media(max-width:540px){.hero-search-btn span{display:none}.hero-search-btn{padding:0 14px}}
  341.         /* Résultats inline */
  342.         .hero-search-results{
  343.             background:var(--wr-card);
  344.             border:1px solid var(--wr-line);
  345.             border-top:0;
  346.             border-radius:0 0 16px 16px;
  347.             max-height:0;
  348.             overflow:hidden;
  349.             transition:max-height .35s ease,padding .25s ease;
  350.             text-align:left;
  351.             box-shadow:0 16px 40px rgba(138,99,192,.1);
  352.             padding:0 14px;
  353.         }
  354.         .hero-search-results.is-visible{max-height:560px;overflow-y:auto;padding:8px 14px 12px}
  355.         .hero-search-results::-webkit-scrollbar{width:6px}
  356.         .hero-search-results::-webkit-scrollbar-thumb{background:var(--wr-line-2);border-radius:6px}
  358.         .hero-search-meta{
  359.             display:flex;align-items:center;justify-content:space-between;gap:10px;
  360.             padding:10px 4px;
  361.             font-size:11.5px;color:var(--wr-muted);
  362.             text-transform:uppercase;letter-spacing:.08em;font-weight:600;
  363.         }
  364.         .hero-search-meta strong{color:var(--wr-violet);font-weight:700;font-size:13px}
  365.         .hero-search-meta a{color:var(--wr-violet);font-weight:700;display:inline-flex;align-items:center;gap:4px}
  366.         .hero-search-meta a svg{width:11px;height:11px}
  368.         .hero-search-result{
  369.             display:flex;align-items:center;gap:12px;
  370.             padding:10px 8px;border-radius:11px;
  371.             text-decoration:none;color:inherit;
  372.             transition:background .15s;
  373.         }
  374.         .hero-search-result:hover{background:var(--wr-violet-softer);text-decoration:none;color:inherit}
  375.         .hero-search-result-logo{
  376.             width:38px;height:38px;border-radius:10px;flex-shrink:0;
  377.             background:var(--wr-violet-soft);color:var(--wr-violet);
  378.             display:flex;align-items:center;justify-content:center;
  379.             font-weight:700;font-size:13px;overflow:hidden;
  380.         }
  381.         .hero-search-result-logo img{width:100%;height:100%;object-fit:cover}
  382.         .hero-search-result-info{flex:1;min-width:0}
  383.         .hero-search-result-title{
  384.             font-weight:600;font-size:13.5px;color:var(--wr-ink);
  385.             margin:0 0 2px;line-height:1.3;
  386.             white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  387.         }
  388.         .hero-search-result-meta{
  389.             font-size:11.5px;color:var(--wr-muted);margin:0;
  390.             white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  391.         }
  392.         .hero-search-result-cta{
  393.             font-size:11px;font-weight:600;color:var(--wr-violet);
  394.             text-transform:uppercase;letter-spacing:.06em;
  395.             display:inline-flex;align-items:center;gap:4px;flex-shrink:0;
  396.             opacity:0;transition:opacity .15s,transform .15s;transform:translateX(-4px);
  397.         }
  398.         .hero-search-result:hover .hero-search-result-cta{opacity:1;transform:translateX(0)}
  399.         .hero-search-result-cta svg{width:11px;height:11px}
  401.         .hero-search-empty{
  402.             text-align:center;padding:36px 20px;color:var(--wr-muted);
  403.         }
  404.         .hero-search-empty-icon{
  405.             width:48px;height:48px;border-radius:14px;
  406.             background:var(--wr-violet-soft);color:var(--wr-violet);
  407.             display:inline-flex;align-items:center;justify-content:center;
  408.             margin-bottom:14px;
  409.         }
  410.         .hero-search-empty-icon svg{width:22px;height:22px}
  411.         .hero-search-empty-title{font-weight:600;font-size:14px;color:var(--wr-ink);margin:0 0 4px}
  412.         .hero-search-empty-hint{font-size:13px;margin:0;color:var(--wr-muted)}
  414.         .hero-search-loading{
  415.             text-align:center;padding:30px 20px;color:var(--wr-muted);font-size:13px;
  416.             display:flex;align-items:center;justify-content:center;gap:10px;
  417.         }
  418.         .hero-search-spinner{
  419.             width:16px;height:16px;border-radius:50%;
  420.             border:2px solid var(--wr-violet-soft);border-top-color:var(--wr-violet);
  421.             animation:wrSpin .7s linear infinite;
  422.         }
  423.         @keyframes wrSpin{to{transform:rotate(360deg)}}
  425.         /* Byline */
  426.         .hero-byline{
  427.             display:flex;align-items:center;justify-content:center;gap:20px;flex-wrap:wrap;
  428.             font-size:13px;color:var(--wr-muted);
  429.             opacity:0;animation:wrFadeUp .9s ease 1.5s forwards;
  430.         }
  431.         .hero-byline strong{color:var(--wr-violet);font-weight:700;font-size:15px;margin-right:3px}
  432.         .hero-byline-sep{color:var(--wr-line-2)}
  433.         .hero-byline svg{width:14px;height:14px;color:#10B981;flex-shrink:0}
  434.         .hero-byline span{display:inline-flex;align-items:center;gap:6px}
  435.         @media(max-width:540px){.hero-byline{gap:10px;font-size:12px}.hero-byline-sep{display:none}}
  437.         /* ═══════════════════════════════════════════════════════════════════
  438.            SECTION : 3 PARCOURS
  439.            ═══════════════════════════════════════════════════════════════════ */
  440.         .paths-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
  441.         @media(max-width:991px){.paths-grid{grid-template-columns:1fr;gap:14px}}
  443.         .path-card{
  444.             position:relative;
  445.             background:var(--wr-card);
  446.             border:1px solid var(--wr-line);
  447.             border-radius:20px;padding:28px;
  448.             display:flex;flex-direction:column;
  449.             transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
  450.             box-shadow:var(--wr-shadow);
  451.         }
  452.         .path-card:hover{transform:translateY(-4px);box-shadow:var(--wr-shadow-hover);border-color:var(--wr-violet-2)}
  453.         .path-card-illu{
  454.             width:64px;height:64px;border-radius:16px;
  455.             background:var(--wr-violet-soft);color:var(--wr-violet);
  456.             display:flex;align-items:center;justify-content:center;
  457.             margin-bottom:22px;
  458.         }
  459.         .path-card-illu svg{width:30px;height:30px}
  460.         .path-card-label{
  461.             display:inline-block;
  462.             font-size:11px;font-weight:600;
  463.             color:var(--wr-violet-dark);text-transform:uppercase;letter-spacing:.1em;
  464.             margin-bottom:10px;align-self:flex-start;
  465.         }
  466.         .path-card-title{
  467.             font-weight:500;font-size:22px;line-height:1.25;letter-spacing:-0.015em;
  468.             color:var(--wr-ink);margin:0 0 10px;
  469.         }
  470.         .path-card-desc{
  471.             font-size:14px;line-height:1.6;color:var(--wr-muted);
  472.             margin:0 0 22px;flex:1;
  473.         }
  474.         .path-card-cta{
  475.             display:inline-flex;align-items:center;justify-content:center;gap:6px;
  476.             background:var(--wr-violet);color:#fff;
  477.             padding:12px 18px;border-radius:11px;
  478.             font-size:13px;font-weight:600;
  479.             align-self:stretch;
  480.             transition:background .15s,transform .15s,box-shadow .15s;
  481.             box-shadow:0 2px 8px rgba(138,99,192,.2);
  482.         }
  483.         .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)}
  484.         .path-card-cta svg{width:13px;height:13px;transition:transform .15s}
  485.         .path-card-cta:hover svg{transform:translateX(3px)}
  487.         /* ═══════════════════════════════════════════════════════════════════
  488.            MÉTHODE
  489.            ═══════════════════════════════════════════════════════════════════ */
  490.         .method-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
  491.         @media(max-width:991px){.method-grid{grid-template-columns:repeat(2,1fr)}}
  492.         @media(max-width:540px){.method-grid{grid-template-columns:1fr}}
  494.         .method-step{
  495.             background:var(--wr-card);
  496.             border:1px solid var(--wr-line);
  497.             border-radius:18px;padding:24px;
  498.             transition:transform .2s,box-shadow .2s,border-color .2s;
  499.         }
  500.         .method-step:hover{transform:translateY(-3px);box-shadow:var(--wr-shadow-hover);border-color:var(--wr-violet-soft)}
  501.         .method-num{
  502.             display:inline-flex;align-items:center;justify-content:center;
  503.             width:36px;height:36px;border-radius:10px;
  504.             background:var(--wr-violet-soft);color:var(--wr-violet);
  505.             font-weight:700;font-size:14px;margin-bottom:16px;
  506.         }
  507.         .method-title{
  508.             font-weight:500;font-size:17px;line-height:1.25;letter-spacing:-0.005em;
  509.             color:var(--wr-ink);margin:0 0 6px;
  510.         }
  511.         .method-desc{font-size:13px;line-height:1.55;color:var(--wr-muted);margin:0}
  513.         /* ═══════════════════════════════════════════════════════════════════
  514.            MATCH
  515.            ═══════════════════════════════════════════════════════════════════ */
  516.         .match-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center}
  517.         @media(max-width:991px){.match-grid{grid-template-columns:1fr;gap:40px}}
  518.         .match-text .wr-title{margin-left:0;text-align:left}
  519.         .match-text .wr-lede{margin-left:0;text-align:left}
  520.         .match-text .wr-eyebrow{margin-bottom:20px}
  522.         .match-features{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:32px}
  523.         @media(max-width:540px){.match-features{grid-template-columns:1fr}}
  524.         .match-feature{
  525.             background:var(--wr-card);border:1px solid var(--wr-line);
  526.             border-radius:14px;padding:18px;
  527.             transition:transform .15s,border-color .15s,box-shadow .15s;
  528.         }
  529.         .match-feature:hover{transform:translateY(-2px);border-color:var(--wr-violet-soft);box-shadow:var(--wr-shadow)}
  530.         .match-feature-icon{
  531.             width:34px;height:34px;border-radius:10px;
  532.             background:var(--wr-violet-soft);color:var(--wr-violet);
  533.             display:inline-flex;align-items:center;justify-content:center;margin-bottom:12px;
  534.         }
  535.         .match-feature-icon svg{width:16px;height:16px}
  536.         .match-feature-title{font-weight:600;font-size:14px;line-height:1.3;color:var(--wr-ink);margin:0 0 5px}
  537.         .match-feature-desc{font-size:12.5px;line-height:1.5;color:var(--wr-muted);margin:0}
  539.         .match-visual{position:relative;display:flex;justify-content:center;align-items:center;padding:40px 0}
  540.         .match-stack{position:relative;width:100%;max-width:340px;height:340px}
  541.         .match-stack-card{
  542.             position:absolute;
  543.             background:var(--wr-card);border:1px solid var(--wr-line);
  544.             border-radius:16px;padding:14px;
  545.             display:flex;align-items:center;gap:12px;
  546.             box-shadow:var(--wr-shadow);width:100%;
  547.             transition:transform .3s ease;
  548.         }
  549.         .match-stack-card:nth-child(1){top:0;transform:rotate(-6deg) translateX(-10px);z-index:1;animation:wrFloat 6s ease-in-out infinite}
  550.         .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:wrFloat 6s ease-in-out -2s infinite}
  551.         .match-stack-card:nth-child(3){top:156px;transform:rotate(-3deg) translateX(8px);z-index:2;animation:wrFloat 6s ease-in-out -4s infinite}
  552.         .match-stack-card:nth-child(4){top:234px;left:20px;transform:rotate(4deg);z-index:1;animation:wrFloat 6s ease-in-out -1s infinite}
  553.         @keyframes wrFloat{0%,100%{transform:translateY(0) rotate(var(--r,0))}50%{transform:translateY(-6px) rotate(var(--r,0))}}
  554.         .match-stack-logo{
  555.             width:38px;height:38px;border-radius:10px;
  556.             background:var(--wr-violet-soft);color:var(--wr-violet);
  557.             display:flex;align-items:center;justify-content:center;
  558.             font-weight:700;font-size:14px;flex-shrink:0;
  559.         }
  560.         .match-stack-info{flex:1;min-width:0}
  561.         .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}
  562.         .match-stack-meta{font-size:11px;color:var(--wr-muted);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  563.         .match-stack-heart{width:28px;height:28px;border-radius:50%;background:#FEE2E2;color:#EF4444;display:flex;align-items:center;justify-content:center;flex-shrink:0}
  564.         .match-stack-heart svg{width:13px;height:13px;fill:currentColor}
  566.         /* ═══════════════════════════════════════════════════════════════════
  567.            APPS
  568.            ═══════════════════════════════════════════════════════════════════ */
  569.         .apps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
  570.         @media(max-width:768px){.apps-grid{grid-template-columns:1fr}}
  571.         .app-card{
  572.             background:var(--wr-card);border:1px solid var(--wr-line);
  573.             border-radius:18px;padding:24px;
  574.             display:flex;flex-direction:column;align-items:flex-start;
  575.             transition:transform .2s,border-color .2s,box-shadow .2s;
  576.         }
  577.         .app-card:hover{transform:translateY(-3px);border-color:var(--wr-violet-2);box-shadow:var(--wr-shadow-hover);color:inherit;text-decoration:none}
  578.         .app-card-icon{
  579.             width:48px;height:48px;border-radius:14px;
  580.             background:var(--wr-violet-soft);color:var(--wr-violet);
  581.             display:inline-flex;align-items:center;justify-content:center;
  582.             margin-bottom:18px;
  583.         }
  584.         .app-card-icon svg{width:22px;height:22px}
  585.         .app-card-name{font-weight:500;font-size:18px;letter-spacing:-0.01em;color:var(--wr-ink);margin:0 0 6px}
  586.         .app-card-desc{font-size:13px;line-height:1.5;color:var(--wr-muted);margin:0 0 16px;flex:1}
  587.         .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}
  588.         .app-card-cta svg{width:11px;height:11px;transition:transform .15s}
  589.         .app-card:hover .app-card-cta svg{transform:translateX(3px)}
  591.         /* ═══════════════════════════════════════════════════════════════════
  592.            KEYWORDS
  593.            ═══════════════════════════════════════════════════════════════════ */
  594.         .keywords-list{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;max-width:920px;margin:0 auto}
  595.         .keyword-pill{
  596.             display:inline-flex;align-items:center;gap:8px;
  597.             padding:9px 16px;border-radius:100px;
  598.             background:var(--wr-card);border:1px solid var(--wr-line-2);
  599.             color:var(--wr-ink-2);
  600.             font-size:13.5px;font-weight:500;
  601.             transition:transform .15s,border-color .15s,background .15s,color .15s,box-shadow .15s;
  602.         }
  603.         .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)}
  604.         .keyword-pill-icon{font-size:14px;line-height:1}
  606.         /* ═══════════════════════════════════════════════════════════════════
  607.            OFFRES POPULAIRES
  608.            ═══════════════════════════════════════════════════════════════════ */
  609.         .listings-block{margin-bottom:32px}
  610.         .listings-block:last-child{margin-bottom:0}
  611.         .listings-block-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px;flex-wrap:wrap}
  612.         .listings-block-title{
  613.             display:inline-flex;align-items:center;gap:10px;
  614.             font-weight:500;font-size:18px;letter-spacing:-0.005em;
  615.             color:var(--wr-ink);margin:0;
  616.         }
  617.         .listings-block-icon{font-size:20px;line-height:1}
  618.         .listings-block-link{
  619.             display:inline-flex;align-items:center;gap:4px;
  620.             padding:6px 12px;border-radius:100px;
  621.             font-size:12px;font-weight:600;
  622.             color:var(--wr-violet);
  623.             text-transform:uppercase;letter-spacing:.06em;
  624.             border:1px solid var(--wr-violet-soft);
  625.             background:var(--wr-card);
  626.             transition:background .15s,border-color .15s,transform .15s;
  627.         }
  628.         .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)}
  629.         .listings-block-link svg{width:11px;height:11px}
  631.         .listings-jobs{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  632.         @media(max-width:768px){.listings-jobs{grid-template-columns:1fr}}
  633.         .listing-job{
  634.             display:flex;align-items:center;gap:14px;
  635.             background:var(--wr-card);border:1px solid var(--wr-line);
  636.             border-radius:14px;padding:12px;
  637.             transition:transform .15s,border-color .15s,box-shadow .15s;
  638.         }
  639.         .listing-job:hover{transform:translateY(-2px);border-color:var(--wr-violet-soft);box-shadow:var(--wr-shadow);color:inherit;text-decoration:none}
  640.         .listing-job-logo{
  641.             width:42px;height:42px;border-radius:11px;flex-shrink:0;
  642.             background:var(--wr-violet-soft);color:var(--wr-violet);
  643.             display:flex;align-items:center;justify-content:center;
  644.             font-weight:700;font-size:14px;overflow:hidden;
  645.         }
  646.         .listing-job-logo img{width:100%;height:100%;object-fit:cover}
  647.         .listing-job-info{flex:1;min-width:0}
  648.         .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}
  649.         .listing-job-meta{font-size:11.5px;color:var(--wr-muted);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  650.         .listing-job-arrow{flex-shrink:0;color:var(--wr-muted-2);transition:color .15s,transform .15s}
  651.         .listing-job-arrow svg{width:14px;height:14px}
  652.         .listing-job:hover .listing-job-arrow{color:var(--wr-violet);transform:translateX(2px)}
  654.         /* ═══════════════════════════════════════════════════════════════════
  655.            ARTICLES
  656.            ═══════════════════════════════════════════════════════════════════ */
  657.         .articles-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
  658.         @media(max-width:991px){.articles-grid{grid-template-columns:repeat(2,1fr)}}
  659.         @media(max-width:640px){.articles-grid{grid-template-columns:1fr}}
  661.         .wr-article{
  662.             background:var(--wr-card);border:1px solid var(--wr-line);
  663.             border-radius:18px;overflow:hidden;
  664.             display:flex;flex-direction:column;
  665.             transition:transform .2s,box-shadow .2s,border-color .2s;
  666.         }
  667.         .wr-article:hover{transform:translateY(-3px);box-shadow:var(--wr-shadow-hover);border-color:var(--wr-violet-2);color:inherit;text-decoration:none}
  668.         .wr-article-img{aspect-ratio:16/10;background:var(--wr-violet-soft);overflow:hidden;flex-shrink:0}
  669.         .wr-article-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
  670.         .wr-article:hover .wr-article-img img{transform:scale(1.04)}
  671.         .wr-article-body{padding:18px;flex:1;display:flex;flex-direction:column}
  672.         .wr-article-meta{font-size:11px;font-weight:600;color:var(--wr-violet-dark);text-transform:uppercase;letter-spacing:.08em;margin:0 0 8px}
  673.         .wr-article-title{font-weight:500;font-size:16px;line-height:1.35;letter-spacing:-0.005em;color:var(--wr-ink);margin:0 0 8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  674.         .wr-article-excerpt{font-size:13px;line-height:1.5;color:var(--wr-muted);margin:0 0 14px;flex:1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  675.         .wr-article-link{font-size:12px;font-weight:600;color:var(--wr-violet);text-transform:uppercase;letter-spacing:.06em;display:inline-flex;align-items:center;gap:4px}
  676.         .wr-article-link svg{width:11px;height:11px;transition:transform .15s}
  677.         .wr-article:hover .wr-article-link svg{transform:translateX(3px)}
  679.         .articles-cta{text-align:center;margin-top:36px}
  680.         .articles-cta a{
  681.             display:inline-flex;align-items:center;gap:8px;
  682.             padding:12px 22px;border-radius:11px;
  683.             background:var(--wr-card);border:1px solid var(--wr-line-2);
  684.             color:var(--wr-violet);
  685.             font-size:13px;font-weight:600;
  686.             transition:background .15s,transform .15s,border-color .15s;
  687.         }
  688.         .articles-cta a:hover{background:var(--wr-violet-soft);border-color:var(--wr-violet);transform:translateY(-2px);text-decoration:none;color:var(--wr-violet-dark)}
  689.         .articles-cta svg{width:12px;height:12px}
  691.         /* ═══════════════════════════════════════════════════════════════════
  692.            CTA FINAL
  693.            ═══════════════════════════════════════════════════════════════════ */
  694.         .final-card{
  695.             position:relative;
  696.             background:linear-gradient(135deg,var(--wr-violet) 0%,var(--wr-violet-dark) 100%);
  697.             border-radius:28px;
  698.             padding:64px 32px;text-align:center;
  699.             color:#fff;overflow:hidden;
  700.             box-shadow:0 20px 60px -12px rgba(138,99,192,.4);
  701.         }
  702.         @media(max-width:768px){.final-card{padding:48px 24px;border-radius:22px}}
  703.         .final-card::before{content:"";position:absolute;top:-100px;right:-100px;width:300px;height:300px;background:radial-gradient(circle,rgba(255,255,255,.18) 0%,transparent 65%);pointer-events:none}
  704.         .final-card::after{content:"";position:absolute;bottom:-120px;left:-100px;width:280px;height:280px;background:radial-gradient(circle,rgba(255,255,255,.12) 0%,transparent 65%);pointer-events:none}
  705.         .final-title{font-weight:500;font-size:32px;line-height:1.1;letter-spacing:-0.025em;color:#fff;margin:0 0 14px;position:relative;z-index:2}
  706.         @media(min-width:768px){.final-title{font-size:44px}}
  707.         .final-subtitle{font-size:16px;line-height:1.55;color:rgba(255,255,255,.88);margin:0 auto 32px;max-width:520px;position:relative;z-index:2}
  708.         .final-buttons{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;position:relative;z-index:2}
  709.         .final-btn{
  710.             display:inline-flex;align-items:center;gap:8px;
  711.             padding:14px 24px;border-radius:12px;
  712.             font-size:14px;font-weight:600;
  713.             transition:transform .15s,background .15s,box-shadow .15s;
  714.         }
  715.         .final-btn--primary{background:#fff;color:var(--wr-violet-dark)}
  716.         .final-btn--primary:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,0,0,.15);color:var(--wr-violet-dark);text-decoration:none}
  717.         .final-btn--ghost{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.25);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
  718.         .final-btn--ghost:hover{background:rgba(255,255,255,.2);transform:translateY(-2px);color:#fff;text-decoration:none}
  719.         .final-btn svg{width:14px;height:14px;transition:transform .15s}
  720.         .final-btn:hover svg{transform:translateX(3px)}
  721.     </style>
  722. {% endblock css %}
  724. {% block body %}
  725.     <div class="wr">
  727.         {# ═══════════════ HERO ═══════════════ #}
  728.         <section class="hero">
  729.             <span class="hero-dots"></span>
  731.             <div class="hero-inner">
  732.             <span class="hero-badge">
  733.                 <span class="hero-badge-dot"></span>
  734.                 {{ t.hero_eyebrow }}
  735.             </span>
  737.                 <h1 class="hero-title">
  738.                     <span class="hero-title-line">{{ t.hero_title_1 }}</span>
  739.                     <span class="hero-title-line"><span class="hero-title-accent">{{ t.hero_title_2 }}</span></span>
  740.                     <span class="hero-title-line">{{ t.hero_title_3 }}</span>
  741.                 </h1>
  743.                 <p class="hero-lede">{{ t.hero_lede }}</p>
  745.                 {# Recherche inline AJAX #}
  746.                 <div class="hero-search-wrap">
  747.                     <form class="hero-search" id="wrHeroSearch" autocomplete="off"
  748.                           data-search-url="{% if isFR %}{{ path('locale_api_jobs_search',{'_locale':'fr'}) }}{% else %}{{ path('api_jobs_search') }}{% endif %}"
  749.                           data-jobs-list-url="{% if isFR %}{{ path('locale_whileresume_jobs_list',{'_locale':'fr'}) }}{% else %}{{ path('whileresume_jobs_list') }}{% endif %}">
  750.                     <span class="hero-search-icon">
  751.                         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  752.                             <circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
  753.                         </svg>
  754.                     </span>
  755.                         <input type="text" name="q" id="wrHeroSearchInput" class="hero-search-input" placeholder="{{ t.hero_search_placeholder }}" />
  756.                         <button type="button" class="hero-search-clear" id="wrHeroSearchClear" aria-label="{{ t.search_clear }}">
  757.                             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
  758.                                 <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
  759.                             </svg>
  760.                         </button>
  761.                         <button type="submit" class="hero-search-btn">
  762.                             <span>{{ t.hero_search_button }}</span>
  763.                             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
  764.                                 <line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/>
  765.                             </svg>
  766.                         </button>
  767.                     </form>
  769.                     {# Container des résultats inline #}
  770.                     <div class="hero-search-results" id="wrHeroSearchResults" aria-live="polite"></div>
  771.                 </div>
  773.                 <div class="hero-byline">
  774.                     <span><strong>{{ totalJobs ?? '—' }}</strong> {{ t.hero_byline_jobs }}</span>
  775.                     <span class="hero-byline-sep">·</span>
  776.                     <span>{{ t.hero_byline_apps }}</span>
  777.                     <span class="hero-byline-sep">·</span>
  778.                     <span>
  779.                     <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
  780.                     {{ t.hero_byline_free }}
  781.                 </span>
  782.                 </div>
  783.             </div>
  784.         </section>
  786.         {# ═══════════════ 3 PARCOURS ═══════════════ #}
  787.         <section class="wr-section">
  788.             <div class="wr-container">
  789.                 <div class="wr-section-head">
  790.                     <span class="wr-eyebrow">{{ t.paths_eyebrow }}</span>
  791.                     <h2 class="wr-title">{{ t.paths_title }}</h2>
  792.                     <p class="wr-lede">{{ t.paths_lede }}</p>
  793.                 </div>
  795.                 <div class="paths-grid">
  796.                     <article class="path-card">
  797.                         <div class="path-card-illu">
  798.                             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
  799.                                 <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/>
  800.                                 <line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/>
  801.                             </svg>
  802.                         </div>
  803.                         <span class="path-card-label">{{ t.path1_label }}</span>
  804.                         <h3 class="path-card-title">{{ t.path1_title }}</h3>
  805.                         <p class="path-card-desc">{{ t.path1_desc }}</p>
  806.                         <a href="{{ path('whileresume_resume_' ~ app.request.locale) }}" class="path-card-cta">
  807.                             {{ t.path1_cta }}
  808.                             <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>
  809.                         </a>
  810.                     </article>
  812.                     <article class="path-card">
  813.                         <div class="path-card-illu">
  814.                             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
  815.                                 <path d="M9 11H5a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7a2 2 0 0 0-2-2h-4"/>
  816.                                 <polyline points="9 7 12 4 15 7"/><line x1="12" y1="4" x2="12" y2="14"/>
  817.                             </svg>
  818.                         </div>
  819.                         <span class="path-card-label">{{ t.path2_label }}</span>
  820.                         <h3 class="path-card-title">{{ t.path2_title }}</h3>
  821.                         <p class="path-card-desc">{{ t.path2_desc }}</p>
  822.                         <a href="{{ path('whileresume_resume_' ~ app.request.locale) }}" class="path-card-cta">
  823.                             {{ t.path2_cta }}
  824.                             <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>
  825.                         </a>
  826.                     </article>
  828.                     <article class="path-card">
  829.                         <div class="path-card-illu">
  830.                             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
  831.                                 <rect x="2" y="6" width="20" height="14" rx="2"/>
  832.                                 <path d="M16 6V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2"/>
  833.                                 <line x1="2" y1="13" x2="22" y2="13"/>
  834.                             </svg>
  835.                         </div>
  836.                         <span class="path-card-label">{{ t.path3_label }}</span>
  837.                         <h3 class="path-card-title">{{ t.path3_title }}</h3>
  838.                         <p class="path-card-desc">{{ t.path3_desc }}</p>
  839.                         <a href="{% if isFR %}{{ path('locale_whileresume_jobs_list',{'_locale':'fr'}) }}{% else %}{{ path('whileresume_jobs_list') }}{% endif %}" class="path-card-cta">
  840.                             {{ t.path3_cta }}
  841.                             <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>
  842.                         </a>
  843.                     </article>
  844.                 </div>
  845.             </div>
  846.         </section>
  848.         {# ═══════════════ MÉTHODE ═══════════════ #}
  849.         <section class="wr-section">
  850.             <div class="wr-container">
  851.                 <div class="wr-section-head">
  852.                     <span class="wr-eyebrow">{{ t.how_eyebrow }}</span>
  853.                     <h2 class="wr-title">{{ t.how_title }}</h2>
  854.                     <p class="wr-lede">{{ t.how_lede }}</p>
  855.                 </div>
  857.                 <div class="method-grid">
  858.                     <div class="method-step">
  859.                         <div class="method-num">01</div>
  860.                         <h3 class="method-title">{{ t.step1_title }}</h3>
  861.                         <p class="method-desc">{{ t.step1_desc }}</p>
  862.                     </div>
  863.                     <div class="method-step">
  864.                         <div class="method-num">02</div>
  865.                         <h3 class="method-title">{{ t.step2_title }}</h3>
  866.                         <p class="method-desc">{{ t.step2_desc }}</p>
  867.                     </div>
  868.                     <div class="method-step">
  869.                         <div class="method-num">03</div>
  870.                         <h3 class="method-title">{{ t.step3_title }}</h3>
  871.                         <p class="method-desc">{{ t.step3_desc }}</p>
  872.                     </div>
  873.                     <div class="method-step">
  874.                         <div class="method-num">04</div>
  875.                         <h3 class="method-title">{{ t.step4_title }}</h3>
  876.                         <p class="method-desc">{{ t.step4_desc }}</p>
  877.                     </div>
  878.                 </div>
  879.             </div>
  880.         </section>
  882.         {# ═══════════════ MATCH ═══════════════ #}
  883.         <section class="wr-section">
  884.             <div class="wr-container">
  885.                 <div class="match-grid">
  886.                     <div class="match-text">
  887.                         <span class="wr-eyebrow">{{ t.match_eyebrow }}</span>
  888.                         <h2 class="wr-title wr-title--sm">{{ t.match_title }}</h2>
  889.                         <p class="wr-lede">{{ t.match_lede }}</p>
  891.                         <div class="match-features">
  892.                             <div class="match-feature">
  893.                                 <div class="match-feature-icon">
  894.                                     <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
  895.                                 </div>
  896.                                 <h4 class="match-feature-title">{{ t.match_b1_title }}</h4>
  897.                                 <p class="match-feature-desc">{{ t.match_b1_desc }}</p>
  898.                             </div>
  899.                             <div class="match-feature">
  900.                                 <div class="match-feature-icon">
  901.                                     <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"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/></svg>
  902.                                 </div>
  903.                                 <h4 class="match-feature-title">{{ t.match_b2_title }}</h4>
  904.                                 <p class="match-feature-desc">{{ t.match_b2_desc }}</p>
  905.                             </div>
  906.                             <div class="match-feature">
  907.                                 <div class="match-feature-icon">
  908.                                     <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
  909.                                 </div>
  910.                                 <h4 class="match-feature-title">{{ t.match_b3_title }}</h4>
  911.                                 <p class="match-feature-desc">{{ t.match_b3_desc }}</p>
  912.                             </div>
  913.                             <div class="match-feature">
  914.                                 <div class="match-feature-icon">
  915.                                     <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>
  916.                                 </div>
  917.                                 <h4 class="match-feature-title">{{ t.match_b4_title }}</h4>
  918.                                 <p class="match-feature-desc">{{ t.match_b4_desc }}</p>
  919.                             </div>
  920.                         </div>
  921.                     </div>
  923.                     <div class="match-visual">
  924.                         <div class="match-stack">
  925.                             <div class="match-stack-card">
  926.                                 <div class="match-stack-logo">A</div>
  927.                                 <div class="match-stack-info">
  928.                                     <p class="match-stack-title">Lead Designer</p>
  929.                                     <p class="match-stack-meta">Acme · Remote</p>
  930.                                 </div>
  931.                                 <div class="match-stack-heart"><svg viewBox="0 0 24 24"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg></div>
  932.                             </div>
  933.                             <div class="match-stack-card">
  934.                                 <div class="match-stack-logo">N</div>
  935.                                 <div class="match-stack-info">
  936.                                     <p class="match-stack-title">Frontend Engineer</p>
  937.                                     <p class="match-stack-meta">Notion · Paris</p>
  938.                                 </div>
  939.                                 <div class="match-stack-heart"><svg viewBox="0 0 24 24"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg></div>
  940.                             </div>
  941.                             <div class="match-stack-card">
  942.                                 <div class="match-stack-logo">L</div>
  943.                                 <div class="match-stack-info">
  944.                                     <p class="match-stack-title">Product Manager</p>
  945.                                     <p class="match-stack-meta">Linear · {{ isFR ? 'Hybride' : 'Hybrid' }}</p>
  946.                                 </div>
  947.                                 <div class="match-stack-heart"><svg viewBox="0 0 24 24"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg></div>
  948.                             </div>
  949.                             <div class="match-stack-card">
  950.                                 <div class="match-stack-logo">F</div>
  951.                                 <div class="match-stack-info">
  952.                                     <p class="match-stack-title">Data Analyst</p>
  953.                                     <p class="match-stack-meta">Figma · Lyon</p>
  954.                                 </div>
  955.                                 <div class="match-stack-heart"><svg viewBox="0 0 24 24"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg></div>
  956.                             </div>
  957.                         </div>
  958.                     </div>
  959.                 </div>
  960.             </div>
  961.         </section>
  963.         {# ═══════════════ APPS ═══════════════ #}
  964.         <section class="wr-section">
  965.             <div class="wr-container">
  966.                 <div class="wr-section-head">
  967.                     <span class="wr-eyebrow">{{ t.apps_eyebrow }}</span>
  968.                     <h2 class="wr-title wr-title--sm">{{ t.apps_title }}</h2>
  969.                     <p class="wr-lede">{{ t.apps_lede }}</p>
  970.                 </div>
  972.                 <div class="apps-grid">
  973.                     <a href="#" class="app-card">
  974.                     <span class="app-card-icon">
  975.                         <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>
  976.                     </span>
  977.                         <h3 class="app-card-name">{{ t.apps_ios }}</h3>
  978.                         <p class="app-card-desc">{{ t.apps_ios_desc }}</p>
  979.                         <span class="app-card-cta">App Store
  980.                         <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>
  981.                     </span>
  982.                     </a>
  983.                     <a href="#" class="app-card">
  984.                     <span class="app-card-icon">
  985.                         <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>
  986.                     </span>
  987.                         <h3 class="app-card-name">{{ t.apps_android }}</h3>
  988.                         <p class="app-card-desc">{{ t.apps_android_desc }}</p>
  989.                         <span class="app-card-cta">Google Play
  990.                         <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>
  991.                     </span>
  992.                     </a>
  993.                     <a href="{{ path('whileresume_resume_' ~ app.request.locale) }}" class="app-card">
  994.                     <span class="app-card-icon">
  995.                         <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>
  996.                     </span>
  997.                         <h3 class="app-card-name">{{ t.apps_web }}</h3>
  998.                         <p class="app-card-desc">{{ t.apps_web_desc }}</p>
  999.                         <span class="app-card-cta">whileresume.com
  1000.                         <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>
  1001.                     </span>
  1002.                     </a>
  1003.                 </div>
  1004.             </div>
  1005.         </section>
  1007.         {# ═══════════════ KEYWORDS ═══════════════ #}
  1008.         {% if popularKeywords is defined and popularKeywords|length > 0 %}
  1009.             <section class="wr-section wr-section--tight">
  1010.                 <div class="wr-container">
  1011.                     <div class="wr-section-head">
  1012.                         <h2 class="wr-title wr-title--sm">{{ t.keywords_title }}</h2>
  1013.                         <p class="wr-lede">{{ t.keywords_lede }}</p>
  1014.                     </div>
  1016.                     <div class="keywords-list">
  1017.                         {% for kw in popularKeywords %}
  1018.                             <a href="{% if isFR %}{{ path('locale_whileresume_jobs_list',{'_locale':'fr'}) }}{% else %}{{ path('whileresume_jobs_list') }}{% endif %}?q={{ kw.keyword|url_encode }}" class="keyword-pill">
  1019.                                 {% if kw.icon %}<span class="keyword-pill-icon">{{ kw.icon|raw }}</span>{% endif %}
  1020.                                 <span>{{ kw.label }}</span>
  1021.                             </a>
  1022.                         {% endfor %}
  1023.                     </div>
  1024.                 </div>
  1025.             </section>
  1026.         {% endif %}
  1028.         {# ═══════════════ OFFRES POPULAIRES ═══════════════ #}
  1029.         {% if popularJobs is defined and popularJobs|length > 0 %}
  1030.             <section class="wr-section">
  1031.                 <div class="wr-container">
  1032.                     <div class="wr-section-head">
  1033.                         <h2 class="wr-title wr-title--sm">{{ t.popular_title }}</h2>
  1034.                         <p class="wr-lede">{{ t.popular_lede }}</p>
  1035.                     </div>
  1037.                     {% for block in popularJobs %}
  1038.                         {% if block.jobs|length > 0 %}
  1039.                             <div class="listings-block">
  1040.                                 <div class="listings-block-head">
  1041.                                     <h3 class="listings-block-title">
  1042.                                         {% if block.icon %}<span class="listings-block-icon">{{ block.icon|raw }}</span>{% endif %}
  1043.                                         {{ block.label }}
  1044.                                     </h3>
  1045.                                     <a href="{% if isFR %}{{ path('locale_whileresume_jobs_list',{'_locale':'fr'}) }}{% else %}{{ path('whileresume_jobs_list') }}{% endif %}?q={{ block.label|url_encode }}" class="listings-block-link">
  1046.                                         {{ t.btn_more }}
  1047.                                         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
  1048.                                     </a>
  1049.                                 </div>
  1051.                                 <div class="listings-jobs">
  1052.                                     {% for j in block.jobs|slice(0, 4) %}
  1053.                                         <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="listing-job">
  1054.                                             <div class="listing-job-logo">
  1055.                                                 {% if j.image and j.image.name %}
  1056.                                                     <img src="{{ vich_uploader_asset(j, 'imageFile') }}" alt="">
  1057.                                                 {% else %}
  1058.                                                     {{ j.companyName|default('?')|slice(0,1)|upper }}
  1059.                                                 {% endif %}
  1060.                                             </div>
  1061.                                             <div class="listing-job-info">
  1062.                                                 <h4 class="listing-job-title">{{ j.jobTitle }}</h4>
  1063.                                                 <p class="listing-job-meta">
  1064.                                                     {{ j.companyName }}{% if j.city %} · {{ j.city }}{% endif %}{% if j.employmentType %} · {{ j.employmentType }}{% endif %}
  1065.                                                 </p>
  1066.                                             </div>
  1067.                                             <span class="listing-job-arrow">
  1068.                                             <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>
  1069.                                         </span>
  1070.                                         </a>
  1071.                                     {% endfor %}
  1072.                                 </div>
  1073.                             </div>
  1074.                         {% endif %}
  1075.                     {% endfor %}
  1076.                 </div>
  1077.             </section>
  1078.         {% endif %}
  1080.         {# ═══════════════ ARTICLES ═══════════════ #}
  1081.         {% if articles is defined and articles|length > 0 %}
  1082.             <section class="wr-section">
  1083.                 <div class="wr-container">
  1084.                     <div class="wr-section-head">
  1085.                         <h2 class="wr-title wr-title--sm">{{ t.articles_title }}</h2>
  1086.                         <p class="wr-lede">{{ t.articles_lede }}</p>
  1087.                     </div>
  1089.                     <div class="articles-grid">
  1090.                         {% for a in articles|slice(0,6) %}
  1091.                             {% set prefix = "" %}
  1092.                             {% set urlA = path('cvs_website_article',{'slug': a.slug}) %}
  1093.                             {% if app.request.locale != default_locale %}
  1094.                                 {% set urlA = path('locale_cvs_website_article',{'_locale':app.request.locale,'slug': a.slug}) %}
  1095.                                 {% set prefix = "/" ~ app.request.locale %}
  1096.                             {% endif %}
  1097.                             {% if a.pageslug3 is not empty %}
  1098.                                 {% set urlA = prefix ~ '/' ~ a.pageslug ~ '/' ~ a.pageslug2 ~ '/' ~ a.pageslug3 %}
  1099.                             {% elseif a.pageslug2 is not empty %}
  1100.                                 {% set urlA = prefix ~ '/' ~ a.pageslug ~ '/' ~ a.pageslug2 %}
  1101.                             {% elseif a.pageslug is not empty %}
  1102.                                 {% set urlA = prefix ~ '/' ~ a.pageslug %}
  1103.                             {% endif %}
  1105.                             <a href="{{ urlA }}" class="wr-article">
  1106.                                 <div class="wr-article-img">
  1107.                                     {% if a.image.name is not null %}
  1108.                                         <img src="{{ vich_uploader_asset(a, 'imageFile') }}" alt="{{ a.title }}">
  1109.                                     {% endif %}
  1110.                                 </div>
  1111.                                 <div class="wr-article-body">
  1112.                                     <p class="wr-article-meta">
  1113.                                         {{ a.publishedAt|date(isFR ? 'd M Y' : 'M d, Y') }}{% if a.author %} · {{ a.author }}{% endif %}
  1114.                                     </p>
  1115.                                     <h3 class="wr-article-title">{{ a.title }}</h3>
  1116.                                     {% if a.subtitle %}<p class="wr-article-excerpt">{{ a.subtitle }}</p>{% endif %}
  1117.                                     <span class="wr-article-link">
  1118.                                     {{ t.read_article }}
  1119.                                     <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>
  1120.                                 </span>
  1121.                                 </div>
  1122.                             </a>
  1123.                         {% endfor %}
  1124.                     </div>
  1126.                     <div class="articles-cta">
  1127.                         <a href="{% if isFR %}{{ path('locale_cvs_website_articles',{'_locale':'fr'}) }}{% else %}{{ path('cvs_website_articles') }}{% endif %}">
  1128.                             {{ t.articles_view_all }}
  1129.                             <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>
  1130.                         </a>
  1131.                     </div>
  1132.                 </div>
  1133.             </section>
  1134.         {% endif %}
  1136.         {# ═══════════════ CTA FINAL ═══════════════ #}
  1137.         <section class="wr-section">
  1138.             <div class="wr-container">
  1139.                 <div class="final-card">
  1140.                     <h2 class="final-title">{{ t.final_title }}</h2>
  1141.                     <p class="final-subtitle">{{ t.final_subtitle }}</p>
  1142.                     <div class="final-buttons">
  1143.                         <a href="{{ path('whileresume_resume_' ~ app.request.locale) }}" class="final-btn final-btn--primary">
  1144.                             {{ t.final_candidate }}
  1145.                             <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>
  1146.                         </a>
  1147.                         <a href="{{ path('whileresume_business_' ~ app.request.locale) }}" class="final-btn final-btn--ghost">
  1148.                             {{ t.final_recruiter }}
  1149.                             <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>
  1150.                         </a>
  1151.                     </div>
  1152.                 </div>
  1153.             </div>
  1154.         </section>
  1156.     </div>
  1157. {% endblock body %}
  1159. {% block footer_js %}
  1160.     {{ parent() }}
  1161.     <script>
  1162.         (function(){
  1163.             var form     = document.getElementById('wrHeroSearch');
  1164.             var input    = document.getElementById('wrHeroSearchInput');
  1165.             var clearBtn = document.getElementById('wrHeroSearchClear');
  1166.             var results  = document.getElementById('wrHeroSearchResults');
  1167.             if (!form || !input || !results) return;
  1169.             var searchUrl   = form.dataset.searchUrl;
  1170.             var jobsListUrl = form.dataset.jobsListUrl;
  1171.             var debounceTimer = null;
  1172.             var currentRequest = null;
  1173.             var lastQuery = '';
  1175.             var T = {
  1176.                 loading:  '{{ t.search_loading|escape('js') }}',
  1177.                 empty:    '{{ t.search_no_results|escape('js') }}',
  1178.                 emptyHint:'{{ t.search_no_results_hint|escape('js') }}',
  1179.                 count:    '{{ t.search_results_count|escape('js') }}',
  1180.                 viewAll:  '{{ t.search_view_all|escape('js') }}',
  1181.                 view:     '{{ t.search_view_offer|escape('js') }}'
  1182.             };
  1184.             function escHtml(s){
  1185.                 if (s == null) return '';
  1186.                 return String(s).replace(/[&<>"']/g, function(c){
  1187.                     return {'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c];
  1188.                 });
  1189.             }
  1191.             function showResults(){
  1192.                 results.classList.add('is-visible');
  1193.                 form.classList.add('has-results');
  1194.             }
  1195.             function hideResults(){
  1196.                 results.classList.remove('is-visible');
  1197.                 form.classList.remove('has-results');
  1198.             }
  1199.             function setLoading(){
  1200.                 results.innerHTML =
  1201.                     '<div class="hero-search-loading">' +
  1202.                     '<span class="hero-search-spinner"></span>' +
  1203.                     '<span>' + escHtml(T.loading) + '</span>' +
  1204.                     '</div>';
  1205.                 showResults();
  1206.             }
  1208.             function renderResults(payload, query){
  1209.                 var jobs  = (payload && payload.jobs)  || [];
  1210.                 var total = (payload && typeof payload.total === 'number') ? payload.total : jobs.length;
  1212.                 if (!jobs.length){
  1213.                     results.innerHTML =
  1214.                         '<div class="hero-search-empty">' +
  1215.                         '<div class="hero-search-empty-icon">' +
  1216.                         '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">' +
  1217.                         '<circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>' +
  1218.                         '</svg>' +
  1219.                         '</div>' +
  1220.                         '<p class="hero-search-empty-title">' + escHtml(T.empty) + '</p>' +
  1221.                         '<p class="hero-search-empty-hint">' + escHtml(T.emptyHint) + '</p>' +
  1222.                         '</div>';
  1223.                     showResults();
  1224.                     return;
  1225.                 }
  1227.                 var html =
  1228.                     '<div class="hero-search-meta">' +
  1229.                     '<span><strong>' + total + '</strong> ' + escHtml(T.count) + '</span>' +
  1230.                     '<a href="' + jobsListUrl + '?q=' + encodeURIComponent(query) + '">' +
  1231.                     escHtml(T.viewAll) +
  1232.                     '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">' +
  1233.                     '<line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/>' +
  1234.                     '</svg>' +
  1235.                     '</a>' +
  1236.                     '</div>';
  1238.                 jobs.slice(0, 6).forEach(function(j){
  1239.                     var title   = j.jobTitle || j.title || '';
  1240.                     var company = j.companyName || j.company || '';
  1241.                     var city    = j.city || '';
  1242.                     var et      = j.employmentType || '';
  1243.                     var slug    = j.slug || '';
  1244.                     var img     = j.image || j.imageUrl || '';
  1245.                     var url     = j.url || (jobsListUrl + '?q=' + encodeURIComponent(query));
  1246.                     var initial = (company || title || '?').charAt(0).toUpperCase();
  1248.                     var meta = [company, city, et].filter(function(x){ return x; }).join(' · ');
  1250.                     html +=
  1251.                         '<a href="' + escHtml(url) + '" class="hero-search-result">' +
  1252.                         '<div class="hero-search-result-logo">' +
  1253.                         (img
  1254.                             ? '<img src="' + escHtml(img) + '" alt="">'
  1255.                             : escHtml(initial)) +
  1256.                         '</div>' +
  1257.                         '<div class="hero-search-result-info">' +
  1258.                         '<p class="hero-search-result-title">' + escHtml(title) + '</p>' +
  1259.                         '<p class="hero-search-result-meta">' + escHtml(meta) + '</p>' +
  1260.                         '</div>' +
  1261.                         '<span class="hero-search-result-cta">' +
  1262.                         escHtml(T.view) +
  1263.                         '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">' +
  1264.                         '<line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/>' +
  1265.                         '</svg>' +
  1266.                         '</span>' +
  1267.                         '</a>';
  1268.                 });
  1270.                 results.innerHTML = html;
  1271.                 showResults();
  1272.             }
  1274.             function doSearch(query){
  1275.                 if (currentRequest && currentRequest.abort) {
  1276.                     try { currentRequest.abort(); } catch(e){}
  1277.                 }
  1278.                 setLoading();
  1279.                 var url = searchUrl + (searchUrl.indexOf('?') > -1 ? '&' : '?') + 'q=' + encodeURIComponent(query);
  1281.                 var ctrl = (typeof AbortController !== 'undefined') ? new AbortController() : null;
  1282.                 currentRequest = ctrl;
  1284.                 fetch(url, { headers: { 'Accept': 'application/json' }, signal: ctrl ? ctrl.signal : undefined })
  1285.                     .then(function(r){ return r.ok ? r.json() : Promise.reject(r.status); })
  1286.                     .then(function(data){ renderResults(data, query); })
  1287.                     .catch(function(err){
  1288.                         if (err && err.name === 'AbortError') return;
  1289.                         results.innerHTML =
  1290.                             '<div class="hero-search-empty">' +
  1291.                             '<p class="hero-search-empty-title">' + escHtml(T.empty) + '</p>' +
  1292.                             '<p class="hero-search-empty-hint">' + escHtml(T.emptyHint) + '</p>' +
  1293.                             '</div>';
  1294.                         showResults();
  1295.                     });
  1296.             }
  1298.             // Input live (debounce 280ms)
  1299.             input.addEventListener('input', function(){
  1300.                 var q = input.value.trim();
  1301.                 clearBtn.classList.toggle('is-visible', q.length > 0);
  1303.                 if (debounceTimer) clearTimeout(debounceTimer);
  1305.                 if (q.length < 2){
  1306.                     hideResults();
  1307.                     lastQuery = '';
  1308.                     return;
  1309.                 }
  1310.                 if (q === lastQuery) return;
  1312.                 debounceTimer = setTimeout(function(){
  1313.                     lastQuery = q;
  1314.                     doSearch(q);
  1315.                 }, 280);
  1316.             });
  1318.             // Submit → page de résultats complète
  1319.             form.addEventListener('submit', function(e){
  1320.                 var q = input.value.trim();
  1321.                 if (!q) { e.preventDefault(); return; }
  1322.                 window.location.href = jobsListUrl + '?q=' + encodeURIComponent(q);
  1323.                 e.preventDefault();
  1324.             });
  1326.             // Clear
  1327.             clearBtn.addEventListener('click', function(){
  1328.                 input.value = '';
  1329.                 clearBtn.classList.remove('is-visible');
  1330.                 hideResults();
  1331.                 lastQuery = '';
  1332.                 input.focus();
  1333.             });
  1335.             // Escape ferme
  1336.             input.addEventListener('keydown', function(e){
  1337.                 if (e.key === 'Escape'){
  1338.                     hideResults();
  1339.                     input.blur();
  1340.                 }
  1341.             });
  1343.             // Clic en dehors ferme (mais pas si on clique dedans)
  1344.             document.addEventListener('click', function(e){
  1345.                 if (!form.contains(e.target) && !results.contains(e.target)){
  1346.                     hideResults();
  1347.                 }
  1348.             });
  1350.             // Refocus input → ré-affiche les derniers résultats si on en avait
  1351.             input.addEventListener('focus', function(){
  1352.                 if (input.value.trim().length >= 2 && results.innerHTML.trim()) showResults();
  1353.             });
  1354.         })();
  1355.     </script>
  1356. {% endblock footer_js %}