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 %}