templates/application/whileresume/website/business/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' %}
  4. {% set _keys = [
  5.     'hero_eyebrow',
  6.     'hero_title_a1','hero_title_p1','hero_title_a2','hero_title_p2','hero_title_a3','hero_title_p3',
  7.     'hero_lede',
  8.     'how_title',
  9.     'how1_title','how1_desc','how2_title','how2_desc','how3_title','how3_desc',
  10.     'feat1_label','feat1_title','feat1_p1','feat1_p2','feat1_quote','feat1_author','feat1_role',
  11.     'feat2_label','feat2_title','feat2_p1','feat2_p2','feat2_quote','feat2_author','feat2_role',
  12.     'feat3_label','feat3_title','feat3_p1','feat3_p2','feat3_quote','feat3_author','feat3_role',
  13.     'feat4_label','feat4_title','feat4_p1','feat4_p2','feat4_quote','feat4_author','feat4_role',
  14.     'signup_eyebrow','signup_title','signup_lede',
  15.     'signup_name_ph','signup_lastname_ph','signup_email_ph','signup_pass_ph','signup_pass2_ph',
  16.     'signup_terms_pre','signup_terms_link','signup_terms_and','signup_terms_link2','signup_btn','signup_login_pre','signup_login_link',
  17.     'signup_perk1','signup_perk2','signup_perk3',
  18.     'pricing_title','pricing_lede','pricing_plus',
  19.     'pricing1_name','pricing1_desc','pricing1_price','pricing1_unit','pricing1_cta','pricing1_note',
  20.     'pricing1_b1','pricing1_b2','pricing1_b3','pricing1_b4','pricing1_b5',
  21.     'pricing2_name','pricing2_desc','pricing2_price','pricing2_unit','pricing2_cta','pricing2_note',
  22.     'pricing2_b1','pricing2_b2','pricing2_b3','pricing2_b4','pricing2_b5',
  23.     'pricing3_name','pricing3_desc','pricing3_price','pricing3_price_old','pricing3_unit','pricing3_cta','pricing3_note',
  24.     'pricing3_b1','pricing3_b2','pricing3_b3','pricing3_b4','pricing3_b5','pricing3_b6','pricing3_b7',
  25.     'pricing4_name','pricing4_desc','pricing4_price','pricing4_unit','pricing4_cta','pricing4_note',
  26.     'pricing4_b1','pricing4_b2','pricing4_b3','pricing4_b4','pricing4_b5','pricing4_b6','pricing4_b7','pricing4_b8','pricing4_b9','pricing4_b10','pricing4_b11',
  27.     'compare_title',
  28.     'compare_us_rank','compare_linkedin_rank','compare_indeed_rank',
  29.     'compare_us_name','compare_linkedin_name','compare_indeed_name',
  30.     'compare_row1_label','compare_row1_us','compare_row1_linkedin','compare_row1_indeed',
  31.     'compare_row2_label','compare_row2_us','compare_row2_linkedin','compare_row2_indeed',
  32.     'compare_row3_label','compare_row3_us','compare_row3_linkedin','compare_row3_indeed',
  33.     'compare_row4_label','compare_row4_us','compare_row4_linkedin','compare_row4_indeed',
  34.     'compare_row5_label','compare_row5_us','compare_row5_linkedin','compare_row5_indeed',
  35.     'articles_title','articles_view_all','read_article',
  36.     'faq_title','faq_lede','faq_q1','faq_a1','faq_q2','faq_a2','faq_q3','faq_a3'
  37. ] %}
  38. {% set t = {} %}
  39. {% for k in _keys %}
  40.     {% set t = t|merge({(k): ('homepage_business.' ~ k)|trans({}, 'whr-public')}) %}
  41. {% endfor %}
  44. {% block title %}{{ page.shortTitle }}{% endblock %}
  45. {% block description %}{{ page.shortDescription }}{% endblock %}
  46. {% block robots %}{{ page.robots }}{% endblock %}
  47. {% block canonical %}
  48.     {# Override : on n'inclut pas canonical_classic car les routes business
  49.        ne suivent pas la convention "locale_<route>" attendue.
  50.        On gère manuellement canonical + hreflang ici. #}
  51.     {% set _urlFr = url('whileresume_business_fr') %}
  52.     {% set _urlEn = url('whileresume_business_en') %}
  53.     <link rel="canonical" href="{{ isFR ? _urlFr : _urlEn }}" />
  54.     <link rel="alternate" hreflang="fr" href="{{ _urlFr }}" />
  55.     <link rel="alternate" hreflang="en" href="{{ _urlEn }}" />
  56.     <link rel="alternate" hreflang="x-default" href="{{ _urlEn }}" />
  57. {% endblock %}
  59. {% block css %}
  60.     {{ parent() }}
  61.     <style>
  62.         /* ═══════════════════════════════════════════════════════════════════
  63.            VARIABLES
  64.         ═══════════════════════════════════════════════════════════════════ */
  65.         :root{
  66.             --wr-bg:#FBFCFE;
  67.             --wr-bg-2:#F4F6FB;
  68.             --wr-card:#FFFFFF;
  69.             --wr-violet:#8A63C1;
  70.             --wr-violet-2:#A98AD3;
  71.             --wr-violet-soft:#F2EDFA;
  72.             --wr-violet-softer:#F8F4FD;
  73.             --wr-violet-dark:#6B47A6;
  74.             --wr-ink:#1E1B2E;
  75.             --wr-ink-2:#374151;
  76.             --wr-muted:#6B7280;
  77.             --wr-muted-2:#9CA3AF;
  78.             --wr-line:#EEF1F7;
  79.             --wr-line-2:#E5E9F0;
  80.             --wr-shadow:0 1px 2px rgba(30,27,46,.04),0 4px 16px rgba(30,27,46,.04);
  81.             --wr-shadow-hover:0 4px 8px rgba(138,99,192,.08),0 12px 32px rgba(138,99,192,.1);
  82.             /* Accents colorés pour les logos d'offres (lettres) */
  83.             --wr-acc-yellow:#FEF3C7;  --wr-acc-yellow-fg:#B45309;
  84.             --wr-acc-green:#D1FAE5;   --wr-acc-green-fg:#047857;
  85.             --wr-acc-pink:#FCE7F3;    --wr-acc-pink-fg:#BE185D;
  86.             --wr-acc-blue:#DBEAFE;    --wr-acc-blue-fg:#1E40AF;
  87.             --wr-acc-orange:#FED7AA;  --wr-acc-orange-fg:#C2410C;
  88.             --wr-acc-violet:#EDE9FE;  --wr-acc-violet-fg:#6D28D9;
  89.             --wr-acc-cyan:#CFFAFE;    --wr-acc-cyan-fg:#0E7490;
  90.         }
  92.         /* ═══════════════════════════════════════════════════════════════════
  93.            PLEINE LARGEUR — On retire la réservation d'espace de la sidebar droite
  94.            ═══════════════════════════════════════════════════════════════════ */
  95.         body .main-content.right-chat-active{padding-right:0!important}
  96.         body .main-content{padding-right:0!important}
  97.         body .right-chat{display:none!important}
  98.         body .middle-sidebar-bottom .middle-sidebar-left{padding-right:0!important;max-width:none!important;width:100%!important}
  99.         body .middle-sidebar-bottom{max-width:none!important}
  101.         .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}
  102.         @media(max-width:991px){.wr{margin:0 -15px}}
  103.         .wr *{box-sizing:border-box}
  104.         .wr a{color:inherit;text-decoration:none}
  106.         /* ═══════════════════════════════════════════════════════════════════
  107.            SECTIONS GENERIC — Fond UNIFIÉ partout (pas d'alternance)
  108.            ═══════════════════════════════════════════════════════════════════ */
  109.         .wr-section{padding:80px 32px;background:var(--wr-bg);position:relative}
  110.         .wr-section--tight{padding:48px 32px}
  111.         @media(max-width:768px){.wr-section{padding:56px 20px}.wr-section--tight{padding:36px 20px}}
  113.         /* Filet décoratif au lieu d'un changement de couleur */
  114.         .wr-section + .wr-section::before{
  115.             content:"";
  116.             position:absolute;top:0;left:50%;transform:translateX(-50%);
  117.             width:80px;height:1px;
  118.             background:linear-gradient(90deg,transparent,var(--wr-line-2),transparent);
  119.         }
  121.         .wr-container{max-width:1200px;margin:0 auto;position:relative}
  123.         /* ═══ Eyebrow ═══ */
  124.         .wr-eyebrow{
  125.             display:inline-flex;align-items:center;gap:8px;
  126.             padding:6px 14px;border-radius:100px;
  127.             background:var(--wr-violet-soft);
  128.             color:var(--wr-violet-dark);
  129.             font-size:11.5px;font-weight:600;
  130.             text-transform:uppercase;letter-spacing:.12em;
  131.             margin-bottom:22px;
  132.         }
  133.         .wr-eyebrow-dot{width:6px;height:6px;border-radius:50%;background:var(--wr-violet);animation:wrPulse 2.4s ease-in-out infinite}
  134.         @keyframes wrPulse{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.3)}}
  136.         /* ═══ Titres ═══ */
  137.         .wr-title{
  138.             font-family:inherit;
  139.             font-weight:700;
  140.             font-size:28px;line-height:1.15;letter-spacing:-0.025em;
  141.             color:var(--wr-ink);
  142.             margin:0 auto 16px;
  143.             max-width:1200px;
  144.         }
  145.         @media(min-width:768px){.wr-title{font-size:34px}}
  146.         @media(min-width:1024px){.wr-title{font-size:40px}}
  147.         .wr-title--sm{font-size:24px}
  148.         @media(min-width:768px){.wr-title--sm{font-size:30px}}
  149.         .wr-title em{font-style:normal;font-weight:700;color:var(--wr-violet)}
  151.         .wr-lede{
  152.             font-size:17px;line-height:1.55;font-weight:400;
  153.             color:var(--wr-ink-2);
  154.             margin:0 auto;max-width:680px;
  155.         }
  157.         .wr-section-head{text-align:center;margin-bottom:56px}
  159.         /* ═══════════════════════════════════════════════════════════════════
  160.            HERO — Style soft, recherche dashboard, boutons pleins
  161.            ═══════════════════════════════════════════════════════════════════ */
  162.         @keyframes wrFadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
  163.         @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)}}
  165.         /* ═══ Reveal au scroll (Intersection Observer ajoute .is-revealed) ═══ */
  166.         .reveal{opacity:0;transform:translateY(24px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
  167.         .reveal.is-revealed{opacity:1;transform:translateY(0)}
  168.         .reveal--left{transform:translateX(-32px) translateY(0)}
  169.         .reveal--left.is-revealed{transform:translateX(0)}
  170.         .reveal--right{transform:translateX(32px) translateY(0)}
  171.         .reveal--right.is-revealed{transform:translateX(0)}
  172.         .reveal--scale{transform:scale(.96);opacity:0}
  173.         .reveal--scale.is-revealed{transform:scale(1);opacity:1}
  174.         .reveal[data-reveal-delay="1"]{transition-delay:.08s}
  175.         .reveal[data-reveal-delay="2"]{transition-delay:.16s}
  176.         .reveal[data-reveal-delay="3"]{transition-delay:.24s}
  177.         .reveal[data-reveal-delay="4"]{transition-delay:.32s}
  178.         @media(prefers-reduced-motion:reduce){.reveal{opacity:1!important;transform:none!important;transition:none!important}}
  180.         .hero{
  181.             position:relative;
  182.             background:var(--wr-bg);
  183.             padding:24px 32px 0;
  184.             overflow:hidden;
  185.         }
  186.         @media(max-width:768px){.hero{padding:18px 18px 0}}
  188.         /* Décor : 2 blobs très flous violet pâle */
  189.         .hero::before{
  190.             content:"";position:absolute;
  191.             top:-260px;right:-180px;width:560px;height:560px;
  192.             background:radial-gradient(circle,rgba(138,99,192,.14) 0%,transparent 65%);
  193.             pointer-events:none;filter:blur(50px);
  194.         }
  195.         .hero::after{
  196.             content:"";position:absolute;
  197.             top:120px;left:-180px;width:480px;height:480px;
  198.             background:radial-gradient(circle,rgba(138,99,192,.09) 0%,transparent 65%);
  199.             pointer-events:none;filter:blur(50px);
  200.         }
  202.         .hero-inner{position:relative;z-index:2;max-width:1200px;margin:0 auto;text-align:center}
  204.         /* ═══ Eyebrow ═══ */
  205.         .hero-badge{
  206.             display:inline-flex;align-items:center;gap:8px;
  207.             padding:7px 16px;border-radius:100px;
  208.             background:var(--wr-violet-soft);
  209.             color:var(--wr-violet-dark);
  210.             font-size:12px;font-weight:600;
  211.             text-transform:uppercase;letter-spacing:.1em;
  212.             margin-bottom:10px;
  213.             opacity:0;transform:translateY(8px);
  214.             animation:wrFadeUp .8s ease forwards;
  215.         }
  216.         .hero-badge-dot{width:6px;height:6px;border-radius:50%;background:var(--wr-violet);animation:wrPulse2 2s ease infinite}
  218.         /* ═══ Titre — 57px desktop, plein largeur conteneur ═══ */
  219.         .hero-title{
  220.             font-weight:700;
  221.             font-size:24px;line-height:1.05;letter-spacing:-0.04em;
  222.             color:var(--wr-ink);
  223.             margin:0 auto 12px;
  224.             width:100%;max-width:1200px;
  225.             opacity:0;transform:translateY(12px);
  226.             animation:wrFadeUp .9s cubic-bezier(.2,.7,.2,1) .15s forwards;
  227.         }
  228.         @media(min-width:768px){.hero-title{font-size:40px;letter-spacing:-0.045em}}
  229.         @media(min-width:1100px){.hero-title{font-size:57px;letter-spacing:-0.045em}}
  231.         .hero-title-accent{
  232.             color:var(--wr-violet);
  233.         }
  235.         .hero-lede{
  236.             font-size:15px;line-height:1.5;color:var(--wr-ink-2);font-weight:400;
  237.             margin:0 auto 16px;max-width:680px;
  238.             opacity:0;animation:wrFadeUp .9s ease .4s forwards;
  239.         }
  240.         @media(min-width:768px){.hero-lede{font-size:17px}}
  241.         .hero-lede-accent{color:var(--wr-violet);font-weight:600}
  243.         /* ═══ Recherche — pleine largeur (alignée sur la liste 1200px) ═══ */
  244.         .hero-search-wrap{
  245.             max-width:1200px;margin:0 auto 12px;
  246.             opacity:0;animation:wrFadeUp .9s ease .55s forwards;
  247.             position:relative;z-index:5;
  248.         }
  249.         .hero-search{
  250.             background:var(--wr-card);
  251.             border-radius:14px;
  252.             box-shadow:0 0 20px 0 rgba(0,0,0,0.05),0 16px 40px rgba(138,99,192,.06);
  253.             padding:10px;
  254.             position:relative;
  255.         }
  256.         .hero-search-inner{
  257.             display:flex;align-items:center;gap:10px;
  258.             padding:10px 14px;border-radius:10px;
  259.             background:#F9FAFB;border:1px solid #E5E7EB;
  260.             transition:border-color .2s,background .2s;
  261.         }
  262.         .hero-search-inner:focus-within{
  263.             border-color:rgba(138,99,192,.4);
  264.             background:#fff;
  265.         }
  266.         .hero-search-icon{color:var(--wr-muted-2);display:flex;flex-shrink:0}
  267.         .hero-search-icon svg{width:16px;height:16px}
  268.         .hero-search-input{
  269.             flex:1;border:0;outline:0;background:transparent;
  270.             font-size:14.5px;font-family:inherit;color:var(--wr-ink);
  271.             padding:6px 0;min-width:0;
  272.         }
  273.         .hero-search-input::placeholder{color:var(--wr-muted-2)}
  274.         .hero-search-clear{
  275.             background:none;border:0;color:var(--wr-muted-2);cursor:pointer;
  276.             padding:4px;display:none;font-family:inherit;
  277.             border-radius:6px;transition:background .15s,color .15s;
  278.         }
  279.         .hero-search-clear:hover{background:var(--wr-violet-soft);color:var(--wr-violet)}
  280.         .hero-search-clear.is-visible{display:flex;align-items:center}
  281.         .hero-search-clear svg{width:14px;height:14px}
  282.         .hero-search-kbd{
  283.             display:none;align-items:center;
  284.             padding:3px 8px;background:#fff;border:1px solid #E5E7EB;border-radius:6px;
  285.             font-size:10.5px;font-weight:600;color:var(--wr-muted);
  286.             font-family:inherit;letter-spacing:.02em;white-space:nowrap;flex-shrink:0;
  287.         }
  288.         .hero-search-inner:focus-within .hero-search-kbd{display:inline-flex}
  290.         /* ═══ États de la liste de jobs (header, empty, loading) ═══ */
  291.         .hero-jobs-header{
  292.             display:flex;align-items:center;justify-content:space-between;gap:10px;
  293.             padding:14px 22px 10px;
  294.             border-bottom:1px solid var(--wr-line);
  295.             margin-bottom:4px;
  296.         }
  297.         @media(max-width:540px){.hero-jobs-header{padding:12px 16px 8px}}
  298.         .hero-jobs-count{
  299.             font-size:11.5px;color:var(--wr-muted);
  300.             text-transform:uppercase;letter-spacing:.08em;font-weight:600;
  301.         }
  302.         .hero-jobs-count strong{color:var(--wr-violet);font-weight:800;font-size:13px;margin-right:4px}
  303.         .hero-jobs-link{
  304.             font-size:11px;font-weight:700;
  305.             color:var(--wr-violet);
  306.             text-transform:uppercase;letter-spacing:.08em;
  307.             text-decoration:none;
  308.             display:inline-flex;align-items:center;gap:5px;
  309.             transition:color .15s,transform .15s;
  310.         }
  311.         .hero-jobs-link:hover{color:var(--wr-violet-dark);text-decoration:none;transform:translateX(2px)}
  312.         .hero-jobs-link svg{width:11px;height:11px}
  314.         .hero-jobs-empty{text-align:center;padding:48px 20px;color:var(--wr-muted)}
  315.         .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}
  316.         .hero-jobs-empty-icon svg{width:22px;height:22px}
  317.         .hero-jobs-empty-title{font-weight:600;font-size:14px;color:var(--wr-ink);margin:0 0 4px}
  318.         .hero-jobs-empty-hint{font-size:13px;margin:0;color:var(--wr-muted)}
  320.         .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}
  321.         .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}
  322.         @keyframes wrSpin{to{transform:rotate(360deg)}}
  324.         /* ═══ Pills "Populaire" sous la recherche ═══ */
  325.         .hero-popular{
  326.             display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;
  327.             margin-bottom:18px;
  328.             opacity:0;animation:wrFadeUp .9s ease .7s forwards;
  329.         }
  330.         .hero-popular-label{
  331.             font-size:11px;font-weight:600;color:var(--wr-muted);
  332.             text-transform:uppercase;letter-spacing:.06em;
  333.             margin-right:4px;
  334.         }
  335.         .hero-popular-pill{
  336.             display:inline-flex;align-items:center;gap:5px;
  337.             padding:6px 12px;border-radius:100px;
  338.             background:var(--wr-violet-soft);
  339.             color:var(--wr-violet);
  340.             font-size:12.5px;font-weight:500;font-family:inherit;
  341.             text-decoration:none;cursor:pointer;
  342.             border:1px solid transparent;
  343.             transition:background .15s,border-color .15s,transform .15s,color .15s;
  344.         }
  345.         .hero-popular-pill:hover{
  346.             background:#EDE9FE;
  347.             border-color:rgba(138,99,192,.2);
  348.             transform:translateY(-1px);
  349.             color:var(--wr-violet);
  350.             text-decoration:none;
  351.         }
  352.         .hero-popular-pill.is-active{
  353.             background:var(--wr-violet);color:#fff;border-color:var(--wr-violet);
  354.         }
  355.         .hero-popular-pill.is-active:hover{background:var(--wr-violet-dark);color:#fff}
  356.         .hero-popular-pill-icon{font-size:13px;line-height:1}
  358.         /* ═══ CTA hero (boutons inscription + connexion pour anonymes) ═══ */
  359.         .hero-cta{
  360.             display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;
  361.             margin:24px 0 8px;
  362.             opacity:0;animation:wrFadeUp .9s ease 1.1s forwards;
  363.         }
  364.         .hero-cta-btn,
  365.         .hero-cta-btn:link,
  366.         .hero-cta-btn:visited,
  367.         .hero-cta-btn:hover,
  368.         .hero-cta-btn:focus,
  369.         .hero-cta-btn:active{
  370.             color:#fff !important;
  371.             text-decoration:none !important;
  372.         }
  373.         .hero-cta-btn{
  374.             display:inline-flex;align-items:center;gap:8px;
  375.             padding:11px 20px;border-radius:11px;
  376.             font-size:13.5px;font-weight:700;font-family:inherit;
  377.             line-height:1;
  378.             background:var(--wr-violet);border:1px solid var(--wr-violet);
  379.             box-shadow:0 4px 14px rgba(138,99,193,.32);
  380.             transition:background .15s,border-color .15s,transform .15s,box-shadow .15s;
  381.         }
  382.         .hero-cta-btn:hover{
  383.             background:var(--wr-violet-dark);border-color:var(--wr-violet-dark);
  384.             transform:translateY(-2px);
  385.             box-shadow:0 6px 20px rgba(138,99,193,.4);
  386.         }
  387.         .hero-cta-btn svg{width:15px;height:15px;flex-shrink:0;stroke:#fff !important;color:#fff !important}
  388.         .hero-cta-btn span{color:#fff !important}
  389.         @media(max-width:540px){.hero-cta{flex-direction:column;align-items:stretch}.hero-cta-btn{justify-content:center}}
  391.         /* ═══ Boutons stores — VIOLET PLEIN BLANC ═══ */
  392.         .hero-stores{
  393.             display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;
  394.             margin-bottom:48px;
  395.             opacity:0;animation:wrFadeUp .9s ease .85s forwards;
  396.         }
  397.         .hero-store-btn{
  398.             display:inline-flex;align-items:center;gap:10px;
  399.             padding:13px 24px;border-radius:12px;
  400.             background:var(--wr-violet);
  401.             border:0;
  402.             color:#fff;
  403.             font-size:14px;font-weight:600;
  404.             text-decoration:none;
  405.             transition:background .15s,transform .15s,box-shadow .15s;
  406.             box-shadow:0 4px 12px rgba(138,99,192,.3);
  407.         }
  408.         .hero-store-btn:hover{
  409.             background:var(--wr-violet-dark);
  410.             color:#fff;
  411.             transform:translateY(-2px);
  412.             box-shadow:0 8px 22px rgba(138,99,192,.4);
  413.             text-decoration:none;
  414.         }
  415.         .hero-store-btn-icon{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px}
  416.         .hero-store-btn-icon svg{width:18px;height:18px}
  417.         @media(max-width:540px){.hero-stores{flex-direction:column;align-items:stretch;gap:10px}.hero-store-btn{justify-content:center}}
  419.         /* ═══════════════════════════════════════════════════════════════════
  420.            LISTE PAR DÉFAUT SOUS LE HERO (offres récentes)
  421.            ═══════════════════════════════════════════════════════════════════ */
  422.         .hero-default-jobs{
  423.             position:relative;z-index:2;
  424.             max-width:1200px;margin:0 auto;
  425.             background:var(--wr-card);
  426.             border:1px solid var(--wr-line);
  427.             border-radius:18px;
  428.             padding:8px 0;
  429.             box-shadow:var(--wr-shadow);
  430.             opacity:0;animation:wrFadeUp .9s ease 1s forwards;
  431.             text-align:left;
  432.         }
  433.         .hero-default-job{
  434.             display:flex;align-items:center;gap:16px;
  435.             padding:14px 22px;
  436.             text-decoration:none;color:inherit;
  437.             border-bottom:1px solid var(--wr-line);
  438.             transition:background .15s;
  439.         }
  440.         .hero-default-job:last-child{border-bottom:0}
  441.         .hero-default-job:hover{background:var(--wr-violet-softer);text-decoration:none;color:inherit}
  442.         .hero-default-job-logo{
  443.             width:42px;height:42px;border-radius:11px;flex-shrink:0;
  444.             display:flex;align-items:center;justify-content:center;
  445.             font-weight:700;font-size:16px;overflow:hidden;
  446.         }
  447.         .hero-default-job-logo img{width:100%;height:100%;object-fit:cover}
  448.         /* 7 variantes de couleurs cyclées par index */
  449.         .hero-default-job:nth-child(7n+1) .hero-default-job-logo{background:var(--wr-acc-yellow);color:var(--wr-acc-yellow-fg)}
  450.         .hero-default-job:nth-child(7n+2) .hero-default-job-logo{background:var(--wr-acc-green);color:var(--wr-acc-green-fg)}
  451.         .hero-default-job:nth-child(7n+3) .hero-default-job-logo{background:var(--wr-acc-pink);color:var(--wr-acc-pink-fg)}
  452.         .hero-default-job:nth-child(7n+4) .hero-default-job-logo{background:var(--wr-acc-blue);color:var(--wr-acc-blue-fg)}
  453.         .hero-default-job:nth-child(7n+5) .hero-default-job-logo{background:var(--wr-acc-orange);color:var(--wr-acc-orange-fg)}
  454.         .hero-default-job:nth-child(7n+6) .hero-default-job-logo{background:var(--wr-acc-violet);color:var(--wr-acc-violet-fg)}
  455.         .hero-default-job:nth-child(7n+7) .hero-default-job-logo{background:var(--wr-acc-cyan);color:var(--wr-acc-cyan-fg)}
  456.         .hero-default-job-info{flex:1;min-width:0}
  457.         .hero-default-job-title{
  458.             font-weight:600;font-size:14.5px;color:var(--wr-ink);
  459.             margin:0 0 2px;line-height:1.3;
  460.             white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  461.         }
  462.         .hero-default-job-meta{
  463.             font-size:12.5px;color:var(--wr-muted);margin:0;
  464.             white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  465.             display:flex;align-items:center;gap:8px;
  466.         }
  467.         .hero-default-job-meta-sep{display:inline-block;width:3px;height:3px;border-radius:50%;background:var(--wr-muted-2);flex-shrink:0}
  468.         .hero-default-job-arrow{flex-shrink:0;color:var(--wr-muted-2);transition:color .15s,transform .15s}
  469.         .hero-default-job-arrow svg{width:15px;height:15px}
  470.         .hero-default-job:hover .hero-default-job-arrow{color:var(--wr-violet);transform:translateX(3px)}
  472.         @media(max-width:768px){
  473.             .hero-default-jobs{margin:0 -18px;border-radius:14px}
  474.             .hero-default-job{padding:12px 16px;gap:12px}
  475.             .hero-default-job-logo{width:36px;height:36px;font-size:13px}
  476.             .hero-default-job-title{font-size:13.5px}
  477.             .hero-default-job-meta{font-size:11.5px;gap:6px;flex-wrap:wrap;white-space:normal}
  478.         }
  480.         /* ═══════════════════════════════════════════════════════════════════
  481.            SECTION : 3 PARCOURS
  482.            ═══════════════════════════════════════════════════════════════════ */
  483.         .paths-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
  484.         @media(max-width:991px){.paths-grid{grid-template-columns:1fr;gap:14px}}
  486.         .path-card{
  487.             position:relative;
  488.             background:var(--wr-card);
  489.             border:1px solid var(--wr-line);
  490.             border-radius:20px;padding:28px;
  491.             display:flex;flex-direction:column;
  492.             transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
  493.             box-shadow:var(--wr-shadow);
  494.         }
  495.         .path-card:hover{transform:translateY(-4px);box-shadow:var(--wr-shadow-hover);border-color:var(--wr-violet-2)}
  496.         .path-card-illu{
  497.             width:64px;height:64px;border-radius:16px;
  498.             background:var(--wr-violet-soft);color:var(--wr-violet);
  499.             display:flex;align-items:center;justify-content:center;
  500.             margin-bottom:22px;
  501.         }
  502.         .path-card-illu svg{width:30px;height:30px}
  503.         .path-card-label{
  504.             display:inline-block;
  505.             font-size:11px;font-weight:600;
  506.             color:var(--wr-violet-dark);text-transform:uppercase;letter-spacing:.1em;
  507.             margin-bottom:10px;align-self:flex-start;
  508.         }
  509.         .path-card-title{
  510.             font-weight:500;font-size:22px;line-height:1.25;letter-spacing:-0.015em;
  511.             color:var(--wr-ink);margin:0 0 10px;
  512.         }
  513.         .path-card-desc{
  514.             font-size:14px;line-height:1.6;color:var(--wr-muted);
  515.             margin:0 0 22px;flex:1;
  516.         }
  517.         .path-card-cta{
  518.             display:inline-flex;align-items:center;justify-content:center;gap:6px;
  519.             background:var(--wr-violet);color:#fff;
  520.             padding:12px 18px;border-radius:11px;
  521.             font-size:13px;font-weight:600;
  522.             align-self:stretch;
  523.             transition:background .15s,transform .15s,box-shadow .15s;
  524.             box-shadow:0 2px 8px rgba(138,99,192,.2);
  525.         }
  526.         .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)}
  527.         .path-card-cta svg{width:13px;height:13px;transition:transform .15s}
  528.         .path-card-cta:hover svg{transform:translateX(3px)}
  530.         /* ═══════════════════════════════════════════════════════════════════
  531.            COMMENT ÇA MARCHE — Card crème englobante avec 3 sous-cards
  532.            ═══════════════════════════════════════════════════════════════════ */
  533.         .how-card{
  534.             background:#F4ECE1;
  535.             border-radius:24px;
  536.             padding:32px 24px;
  537.             display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
  538.             position:relative;
  539.         }
  540.         @media(max-width:991px){.how-card{grid-template-columns:1fr;gap:8px;padding:24px 16px}}
  541.         @media(min-width:992px){
  542.             /* Séparateurs verticaux entre les 3 cellules */
  543.             .how-card .how-step + .how-step{border-left:1px solid rgba(28,25,22,.08)}
  544.         }
  546.         .how-step{
  547.             display:flex;flex-direction:column;align-items:center;text-align:center;
  548.             padding:16px 20px;
  549.             gap:16px;
  550.         }
  551.         .how-step-illu{
  552.             width:100%;max-width:280px;aspect-ratio:1/1;
  553.             border-radius:16px;
  554.             background:rgba(255,255,255,.5);
  555.             display:flex;align-items:center;justify-content:center;
  556.             margin-bottom:4px;
  557.             overflow:hidden;
  558.         }
  559.         .how-step-illu img{width:100%;height:100%;object-fit:contain;display:block}
  560.         .how-step-illu svg{width:55%;height:55%;opacity:.85}
  561.         .how-step-title{
  562.             font-weight:700;font-size:18px;line-height:1.3;letter-spacing:-0.01em;
  563.             color:var(--wr-ink);margin:0;
  564.         }
  565.         @media(min-width:992px){.how-step-title{font-size:20px}}
  566.         .how-step-desc{
  567.             font-size:14px;line-height:1.55;color:var(--wr-ink-2);
  568.             margin:0;max-width:320px;
  569.         }
  571.         /* ═══════════════════════════════════════════════════════════════════
  572.            FEATURES 01-04 — Splits alternés image/texte avec témoignages
  573.            ═══════════════════════════════════════════════════════════════════ */
  574.         .feat-block{
  575.             display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;
  576.             margin-bottom:64px;
  577.         }
  578.         .feat-block:last-child{margin-bottom:0}
  579.         @media(max-width:991px){
  580.             .feat-block{grid-template-columns:1fr;gap:24px;margin-bottom:48px}
  581.         }
  583.         /* Alterner : 01 illu droite, 02 illu gauche, 03 illu droite, 04 illu gauche */
  584.         .feat-block:nth-child(odd) .feat-illu{order:2}
  585.         .feat-block:nth-child(odd) .feat-content{order:1}
  586.         .feat-block:nth-child(even) .feat-illu{order:1}
  587.         .feat-block:nth-child(even) .feat-content{order:2}
  588.         @media(max-width:991px){
  589.             .feat-block .feat-illu{order:1}
  590.             .feat-block .feat-content{order:2}
  591.         }
  593.         .feat-illu{
  594.             background:#F5EDE3;
  595.             border-radius:20px;
  596.             aspect-ratio:1/1;
  597.             display:flex;align-items:center;justify-content:center;
  598.             color:var(--wr-violet);
  599.             overflow:hidden;
  600.             position:relative;
  601.         }
  602.         .feat-illu img{width:100%;height:100%;object-fit:contain;display:block}
  603.         .feat-illu svg{width:50%;height:50%;opacity:.85}
  605.         .feat-content{display:flex;flex-direction:column;gap:18px}
  606.         .feat-label{
  607.             font-size:30px;font-weight:800;
  608.             color:var(--wr-ink);
  609.             letter-spacing:-0.02em;
  610.             margin:0;line-height:1;
  611.         }
  612.         .feat-title{
  613.             font-weight:700;font-size:24px;line-height:1.2;letter-spacing:-0.02em;
  614.             color:var(--wr-ink);margin:0;
  615.         }
  616.         @media(min-width:768px){.feat-title{font-size:28px}}
  617.         @media(min-width:1100px){.feat-title{font-size:30px}}
  618.         .feat-desc{
  619.             display:flex;flex-direction:column;gap:14px;
  620.         }
  621.         .feat-desc p{
  622.             font-size:15px;line-height:1.6;color:var(--wr-ink-2);
  623.             margin:0;opacity:.85;
  624.         }
  625.         @media(min-width:1100px){.feat-desc p{font-size:16px}}
  626.         .feat-desc strong{color:var(--wr-ink);font-weight:700;opacity:1}
  628.         .feat-quote{
  629.             background:var(--wr-card);
  630.             border:1px solid var(--wr-line);
  631.             border-radius:14px;
  632.             padding:18px 20px;
  633.             display:flex;flex-direction:column;gap:10px;
  634.             margin-top:8px;
  635.         }
  636.         .feat-quote-text{
  637.             font-size:14px;line-height:1.55;color:var(--wr-ink-2);
  638.             margin:0;font-style:italic;
  639.         }
  640.         .feat-quote-author{
  641.             display:flex;flex-direction:column;
  642.         }
  643.         .feat-quote-name{font-size:13px;font-weight:700;color:var(--wr-ink);margin:0}
  644.         .feat-quote-role{font-size:12px;color:var(--wr-muted);margin:0}
  646.         /* ═══════════════════════════════════════════════════════════════════
  647.            MATCH
  648.            ═══════════════════════════════════════════════════════════════════ */
  649.         .match-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center}
  650.         @media(max-width:991px){.match-grid{grid-template-columns:1fr;gap:40px}}
  651.         .match-text .wr-title{margin-left:0;text-align:left}
  652.         .match-text .wr-lede{margin-left:0;text-align:left}
  653.         .match-text .wr-eyebrow{margin-bottom:20px}
  655.         .match-features{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:32px}
  656.         @media(max-width:540px){.match-features{grid-template-columns:1fr}}
  657.         .match-feature{
  658.             background:var(--wr-card);border:1px solid var(--wr-line);
  659.             border-radius:14px;padding:18px;
  660.             transition:transform .15s,border-color .15s,box-shadow .15s;
  661.         }
  662.         .match-feature:hover{transform:translateY(-2px);border-color:var(--wr-violet-soft);box-shadow:var(--wr-shadow)}
  663.         .match-feature-icon{
  664.             width:34px;height:34px;border-radius:10px;
  665.             background:var(--wr-violet-soft);color:var(--wr-violet);
  666.             display:inline-flex;align-items:center;justify-content:center;margin-bottom:12px;
  667.         }
  668.         .match-feature-icon svg{width:16px;height:16px}
  669.         .match-feature-title{font-weight:600;font-size:14px;line-height:1.3;color:var(--wr-ink);margin:0 0 5px}
  670.         .match-feature-desc{font-size:12.5px;line-height:1.5;color:var(--wr-muted);margin:0}
  672.         .match-visual{position:relative;display:flex;justify-content:center;align-items:center;padding:40px 0}
  673.         .match-stack{position:relative;width:100%;max-width:340px;height:340px}
  674.         .match-stack-card{
  675.             position:absolute;
  676.             background:var(--wr-card);border:1px solid var(--wr-line);
  677.             border-radius:16px;padding:14px;
  678.             display:flex;align-items:center;gap:12px;
  679.             box-shadow:var(--wr-shadow);width:100%;
  680.             transition:transform .3s ease,box-shadow .3s ease;
  681.             cursor:pointer;
  682.         }
  683.         .match-stack-card:hover{
  684.             transform:translateY(-4px) rotate(0deg)!important;
  685.             box-shadow:0 20px 50px rgba(138,99,192,.22)!important;
  686.             z-index:10!important;
  687.         }
  688.         .match-stack-card:nth-child(1){top:0;transform:rotate(-6deg) translateX(-10px);z-index:1;animation:wrFloat1 6s ease-in-out infinite}
  689.         .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}
  690.         .match-stack-card:nth-child(3){top:156px;transform:rotate(-3deg) translateX(8px);z-index:2;animation:wrFloat3 6s ease-in-out -4s infinite}
  691.         .match-stack-card:nth-child(4){top:234px;left:20px;transform:rotate(4deg);z-index:1;animation:wrFloat4 6s ease-in-out -1s infinite}
  692.         @keyframes wrFloat1{0%,100%{transform:rotate(-6deg) translate(-10px,0)}50%{transform:rotate(-6deg) translate(-10px,-8px)}}
  693.         @keyframes wrFloat2{0%,100%{transform:rotate(2deg) translate(0,0)}50%{transform:rotate(2deg) translate(0,-6px)}}
  694.         @keyframes wrFloat3{0%,100%{transform:rotate(-3deg) translate(8px,0)}50%{transform:rotate(-3deg) translate(8px,-7px)}}
  695.         @keyframes wrFloat4{0%,100%{transform:rotate(4deg) translate(0,0)}50%{transform:rotate(4deg) translate(0,-5px)}}
  696.         .match-stack-logo{
  697.             width:38px;height:38px;border-radius:10px;
  698.             background:var(--wr-violet-soft);color:var(--wr-violet);
  699.             display:flex;align-items:center;justify-content:center;
  700.             font-weight:700;font-size:14px;flex-shrink:0;
  701.         }
  702.         .match-stack-info{flex:1;min-width:0}
  703.         .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}
  704.         .match-stack-meta{font-size:11px;color:var(--wr-muted);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  705.         .match-stack-heart{
  706.             width:28px;height:28px;border-radius:50%;
  707.             background:#FEE2E2;color:#EF4444;
  708.             display:flex;align-items:center;justify-content:center;flex-shrink:0;
  709.             animation:wrHeartbeat 1.6s ease-in-out infinite;
  710.         }
  711.         .match-stack-card:nth-child(1) .match-stack-heart{animation-delay:0s}
  712.         .match-stack-card:nth-child(2) .match-stack-heart{animation-delay:.4s}
  713.         .match-stack-card:nth-child(3) .match-stack-heart{animation-delay:.8s}
  714.         .match-stack-card:nth-child(4) .match-stack-heart{animation-delay:1.2s}
  715.         .match-stack-heart svg{width:13px;height:13px;fill:currentColor}
  716.         @keyframes wrHeartbeat{
  717.             0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(239,68,68,.4)}
  718.             10%{transform:scale(1.18);box-shadow:0 0 0 0 rgba(239,68,68,.4)}
  719.             20%{transform:scale(1)}
  720.             30%{transform:scale(1.12)}
  721.             40%{transform:scale(1);box-shadow:0 0 0 10px rgba(239,68,68,0)}
  722.             100%{box-shadow:0 0 0 0 rgba(239,68,68,0)}
  723.         }
  725.         /* ═══════════════════════════════════════════════════════════════════
  726.            SIGNUP FORM (entre feat 02 et 03)
  727.            ═══════════════════════════════════════════════════════════════════ */
  728.         .signup-section{padding-top:0 !important}
  729.         .signup-card{
  730.             position:relative;
  731.             max-width:980px;margin:0 auto 64px;
  732.             background:linear-gradient(135deg, #FFFFFF 0%, #FAF7FF 100%);
  733.             border:1px solid var(--wr-line);
  734.             border-radius:32px;
  735.             padding:48px 40px;
  736.             box-shadow:0 4px 12px rgba(30,27,46,.04), 0 24px 64px rgba(138,99,192,.1);
  737.             overflow:hidden;
  738.         }
  739.         @media(max-width:768px){.signup-card{padding:32px 22px;border-radius:24px;margin:0 auto 48px}}
  741.         /* Décor : 2 blobs violet pâle dans les coins */
  742.         .signup-card::before{
  743.             content:"";position:absolute;
  744.             top:-120px;right:-120px;width:340px;height:340px;
  745.             background:radial-gradient(circle,rgba(138,99,192,.12) 0%,transparent 65%);
  746.             pointer-events:none;filter:blur(40px);
  747.         }
  748.         .signup-card::after{
  749.             content:"";position:absolute;
  750.             bottom:-100px;left:-80px;width:280px;height:280px;
  751.             background:radial-gradient(circle,rgba(138,99,192,.08) 0%,transparent 65%);
  752.             pointer-events:none;filter:blur(40px);
  753.         }
  755.         .signup-inner{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1.2fr;gap:48px;align-items:center}
  756.         @media(max-width:880px){.signup-inner{grid-template-columns:1fr;gap:28px}}
  758.         .signup-text{display:flex;flex-direction:column;gap:14px}
  759.         .signup-eyebrow{
  760.             display:inline-flex;align-items:center;gap:8px;
  761.             padding:7px 14px;border-radius:100px;
  762.             background:var(--wr-violet-soft);color:var(--wr-violet-dark);
  763.             font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  764.             align-self:flex-start;
  765.         }
  766.         .signup-title{
  767.             font-weight:700;font-size:28px;line-height:1.15;letter-spacing:-0.02em;
  768.             color:var(--wr-ink);margin:0;
  769.         }
  770.         @media(min-width:768px){.signup-title{font-size:34px}}
  771.         .signup-lede{font-size:15px;line-height:1.55;color:var(--wr-ink-2);margin:0;opacity:.85}
  773.         .signup-perks{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
  774.         .signup-perk{
  775.             display:inline-flex;align-items:center;gap:6px;
  776.             padding:6px 12px;border-radius:100px;
  777.             background:var(--wr-card);border:1px solid var(--wr-line-2);
  778.             font-size:12px;font-weight:600;color:var(--wr-ink-2);
  779.         }
  780.         .signup-perk svg{width:13px;height:13px;color:#10B981;stroke-width:3;flex-shrink:0}
  782.         .signup-form{
  783.             background:var(--wr-card);
  784.             border:1px solid var(--wr-line);
  785.             border-radius:20px;
  786.             padding:24px;
  787.             display:flex;flex-direction:column;gap:12px;
  788.             box-shadow:0 1px 2px rgba(30,27,46,.03);
  789.         }
  790.         .signup-form-error{
  791.             background:#FEF2F2;border:1px solid #FECACA;
  792.             color:#991B1B;
  793.             border-radius:12px;
  794.             padding:10px 14px;
  795.             font-size:13px;line-height:1.45;
  796.             margin:0;
  797.         }
  798.         .signup-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  799.         @media(max-width:540px){.signup-row{grid-template-columns:1fr}}
  800.         .signup-field{display:flex;flex-direction:column;gap:0}
  801.         .signup-card .signup-form input[type="email"],
  802.         .signup-card .signup-form input[type="password"],
  803.         .signup-card .signup-form input[type="text"]{
  804.             width:100%;
  805.             padding:13px 14px;
  806.             border:1px solid var(--wr-line-2);border-radius:11px;
  807.             background:#FAFBFD;
  808.             font-size:14px;font-family:inherit;color:var(--wr-ink);
  809.             outline:none;
  810.             transition:border-color .15s,background .15s,box-shadow .15s;
  811.             box-sizing:border-box;
  812.         }
  813.         .signup-card .signup-form input[type="email"]:focus,
  814.         .signup-card .signup-form input[type="password"]:focus,
  815.         .signup-card .signup-form input[type="text"]:focus{
  816.             border-color:var(--wr-violet);background:#fff;
  817.             box-shadow:0 0 0 3px rgba(138,99,192,.12);
  818.         }
  819.         .signup-card .signup-form input::placeholder{color:var(--wr-muted-2)}
  821.         .signup-terms{
  822.             display:flex;align-items:flex-start;gap:10px;
  823.             font-size:12.5px;line-height:1.45;color:var(--wr-muted);
  824.             margin:4px 0 0;
  825.         }
  826.         .signup-card .signup-form input[type="checkbox"]{
  827.             width:16px;height:16px;flex-shrink:0;margin-top:2px;accent-color:var(--wr-violet);cursor:pointer;
  828.         }
  829.         .signup-terms a{color:var(--wr-violet);font-weight:600;text-decoration:underline}
  830.         .signup-terms a:hover{color:var(--wr-violet-dark)}
  832.         .signup-recaptcha{margin:4px 0 0}
  833.         .signup-recaptcha > div{max-width:100%}
  835.         .signup-submit{
  836.             width:100%;
  837.             padding:14px 22px;border-radius:12px;
  838.             background:var(--wr-violet);color:#fff;border:0;
  839.             font-size:14.5px;font-weight:700;font-family:inherit;
  840.             cursor:pointer;
  841.             display:inline-flex;align-items:center;justify-content:center;gap:8px;
  842.             box-shadow:0 4px 14px rgba(138,99,192,.32);
  843.             transition:background .15s,transform .15s,box-shadow .15s;
  844.             margin-top:6px;
  845.         }
  846.         .signup-submit:hover{background:var(--wr-violet-dark);transform:translateY(-1px);box-shadow:0 6px 20px rgba(138,99,192,.4)}
  847.         .signup-submit svg{width:14px;height:14px;transition:transform .15s}
  848.         .signup-submit:hover svg{transform:translateX(3px)}
  850.         .signup-login{
  851.             text-align:center;font-size:13px;color:var(--wr-muted);margin:6px 0 0;
  852.         }
  853.         .signup-login a{color:var(--wr-violet);font-weight:600;text-decoration:none}
  854.         .signup-login a:hover{color:var(--wr-violet-dark);text-decoration:underline}
  856.         /* ═══════════════════════════════════════════════════════════════════
  857.            PRICING — 4 tiers (Gratuit / Unique / Business / Business+)
  858.            ═══════════════════════════════════════════════════════════════════ */
  859.         .pricing-grid{display:grid;gap:18px;max-width:980px;margin:0 auto}
  860.         .pricing-grid--2{grid-template-columns:repeat(2,1fr)}
  861.         .pricing-grid--mt{margin-top:24px}
  862.         @media(max-width:768px){.pricing-grid--2{grid-template-columns:1fr;gap:14px}}
  863.         .pricing-card{
  864.             background:var(--wr-card);border:1px solid var(--wr-line);
  865.             border-radius:22px;padding:32px 26px;
  866.             display:flex;flex-direction:column;gap:20px;
  867.             box-shadow:var(--wr-shadow);
  868.             transition:transform .2s,box-shadow .25s,border-color .2s;
  869.             position:relative;
  870.         }
  871.         .pricing-card:hover{transform:translateY(-3px);box-shadow:var(--wr-shadow-hover);border-color:var(--wr-violet-soft)}
  872.         .pricing-card--featured{
  873.             background:#F4ECE1;
  874.             border-color:#E5D8C5;
  875.         }
  876.         .pricing-card--featured:hover{border-color:var(--wr-violet)}
  877.         .pricing-badge{
  878.             position:absolute;top:24px;right:24px;
  879.             background:var(--wr-violet);color:#fff !important;
  880.             font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;
  881.             padding:6px 12px;border-radius:6px;
  882.             box-shadow:0 4px 12px rgba(138,99,193,.32);
  883.         }
  884.         .pricing-head{display:flex;flex-direction:column;gap:6px}
  885.         .pricing-name{font-weight:800;font-size:22px;letter-spacing:-0.01em;color:var(--wr-ink);margin:0}
  886.         .pricing-desc{font-size:14px;line-height:1.5;color:var(--wr-muted);margin:0}
  887.         .pricing-price{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
  888.         .pricing-price-amount{font-size:38px;font-weight:800;color:var(--wr-ink);letter-spacing:-0.03em;line-height:1}
  889.         .pricing-price-amount--quote{font-size:32px}
  890.         .pricing-price-old{font-size:22px;font-weight:600;color:var(--wr-muted-2);text-decoration:line-through;align-self:baseline}
  891.         .pricing-price-unit{font-size:13px;color:var(--wr-muted);font-weight:500;width:100%;line-height:1.5}
  892.         .pricing-features{display:flex;flex-direction:column;gap:10px;list-style:none;padding:0;margin:0}
  893.         .pricing-feature{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;line-height:1.45;color:var(--wr-ink-2)}
  894.         .pricing-feature-check{
  895.             width:18px;height:18px;border-radius:50%;flex-shrink:0;
  896.             background:var(--wr-violet);color:#fff;
  897.             display:inline-flex;align-items:center;justify-content:center;
  898.             margin-top:1px;
  899.         }
  900.         .pricing-feature-check svg{width:11px;height:11px;stroke-width:3;stroke:#fff}
  901.         .pricing-plus{
  902.             font-size:18px;font-weight:700;color:var(--wr-muted-2);
  903.             text-align:center;margin:4px 0;line-height:1;list-style:none;
  904.         }
  905.         .pricing-cta{
  906.             display:flex;align-items:center;justify-content:center;gap:8px;
  907.             padding:13px 18px;border-radius:11px;
  908.             background:var(--wr-violet);color:#fff !important;
  909.             font-size:14px;font-weight:700;
  910.             box-shadow:0 4px 12px rgba(138,99,193,.3);
  911.             transition:background .15s,transform .15s,box-shadow .15s;
  912.             text-decoration:none !important;
  913.         }
  914.         .pricing-cta:hover{background:var(--wr-violet-dark);transform:translateY(-2px);box-shadow:0 6px 18px rgba(138,99,193,.4)}
  915.         .pricing-cta svg{width:14px;height:14px;transition:transform .15s;stroke:#fff}
  916.         .pricing-cta:hover svg{transform:translateX(3px)}
  917.         .pricing-note{font-size:12px;color:var(--wr-muted);text-align:center;margin:0}
  919.         /* ═══════════════════════════════════════════════════════════════════
  920.            COMPARISON — 3 cards (Whileresume / LinkedIn / Indeed)
  921.            ═══════════════════════════════════════════════════════════════════ */
  922.         .compare-cards{
  923.             display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
  924.             max-width:1100px;margin:0 auto;
  925.         }
  926.         @media(max-width:991px){.compare-cards{grid-template-columns:1fr;gap:14px}}
  927.         .compare-card{
  928.             background:var(--wr-card);border:1px solid var(--wr-line);
  929.             border-radius:18px;
  930.             padding:8px;
  931.             display:flex;flex-direction:column;gap:8px;
  932.             box-shadow:var(--wr-shadow);
  933.             transition:transform .2s,box-shadow .25s,border-color .2s;
  934.         }
  935.         .compare-card:hover{transform:translateY(-3px);box-shadow:var(--wr-shadow-hover)}
  936.         .compare-card--featured{border:2px solid #10B981}
  937.         .compare-card-head{
  938.             display:flex;align-items:center;gap:12px;
  939.             background:var(--wr-violet-soft);
  940.             padding:14px 18px;border-radius:12px;
  941.         }
  942.         .compare-card-logo{width:32px;height:32px;object-fit:contain;flex-shrink:0}
  943.         .compare-card-title{
  944.             font-weight:700;font-size:18px;letter-spacing:-0.01em;
  945.             color:var(--wr-ink);margin:0;
  946.         }
  947.         .compare-card-body{padding:8px 12px;display:flex;flex-direction:column}
  948.         .compare-row{
  949.             padding:14px 0;
  950.             border-bottom:1px solid var(--wr-line);
  951.         }
  952.         .compare-row:last-child{border-bottom:0}
  953.         .compare-row-label{
  954.             font-size:14px;color:var(--wr-muted);
  955.             margin:0 0 8px;line-height:1.4;
  956.         }
  957.         .compare-row-value{
  958.             display:inline-flex;align-items:center;gap:6px;
  959.             font-size:15px;font-weight:600;margin:0;
  960.         }
  961.         .compare-row-value svg{width:18px;height:18px;flex-shrink:0}
  962.         .compare-row-value--good{color:var(--wr-violet)}
  963.         .compare-row-value--good svg{stroke:var(--wr-violet)}
  964.         .compare-row-value--warn{color:#F59E0B}
  965.         .compare-row-value--warn svg{stroke:#F59E0B}
  966.         .compare-row-value--bad{color:#EF4444}
  967.         .compare-row-value--bad svg{stroke:#EF4444}
  968.         /* ═══════════════════════════════════════════════════════════════════
  969.            FAQ — Accordéons natifs (details/summary)
  970.            ═══════════════════════════════════════════════════════════════════ */
  971.         .faq-list{display:flex;flex-direction:column;gap:10px;max-width:850px;margin:0 auto}
  972.         .faq-item{
  973.             background:var(--wr-card);border:1px solid var(--wr-line);
  974.             border-radius:14px;
  975.             transition:border-color .2s,box-shadow .2s;
  976.         }
  977.         .faq-item[open]{border-color:var(--wr-violet-soft);box-shadow:var(--wr-shadow)}
  978.         .faq-q{
  979.             list-style:none;cursor:pointer;
  980.             padding:18px 22px;
  981.             display:flex;align-items:center;justify-content:space-between;gap:16px;
  982.             font-weight:700;font-size:15.5px;letter-spacing:-0.005em;color:var(--wr-ink);
  983.             transition:color .15s;
  984.         }
  985.         .faq-q::-webkit-details-marker{display:none}
  986.         .faq-q:hover{color:var(--wr-violet)}
  987.         .faq-chevron{width:18px;height:18px;flex-shrink:0;color:var(--wr-violet);transition:transform .25s}
  988.         .faq-item[open] .faq-chevron{transform:rotate(180deg)}
  989.         .faq-a{padding:0 22px 22px;color:var(--wr-ink-2);font-size:14.5px;line-height:1.6}
  990.         .faq-a p{margin:0}
  992.         /* ═══════════════════════════════════════════════════════════════════
  993.            ARTICLES — Liste sans miniatures (style identique aux jobs-card)
  994.            ═══════════════════════════════════════════════════════════════════ */
  995.         .articles-list{display:flex;flex-direction:column;gap:10px;max-width:1200px;margin:0 auto}
  996.         .wr-article{
  997.             background:var(--wr-card);border-radius:14px;padding:14px;
  998.             box-shadow:0 0 16px 0 rgba(0,0,0,0.04);
  999.             display:flex;align-items:center;gap:14px;
  1000.             text-decoration:none;color:inherit;
  1001.             transition:transform .15s,box-shadow .2s;
  1002.         }
  1003.         .wr-article:hover{
  1004.             transform:translateY(-1px);
  1005.             box-shadow:0 4px 20px rgba(138,99,192,.1);
  1006.             color:inherit;text-decoration:none;
  1007.         }
  1008.         .wr-article-logo{
  1009.             width:50px;height:50px;border-radius:12px;flex-shrink:0;
  1010.             background:linear-gradient(135deg,#EDE9FE,#DDD6FE);
  1011.             display:flex;align-items:center;justify-content:center;
  1012.             color:var(--wr-violet);overflow:hidden;
  1013.         }
  1014.         .wr-article-logo svg{width:24px;height:24px;opacity:.9}
  1015.         .wr-article-info{flex:1;min-width:0}
  1016.         .wr-article-title{
  1017.             font-size:14px;font-weight:700;color:var(--wr-ink);
  1018.             line-height:1.3;margin:0 0 4px;
  1019.             white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  1020.         }
  1021.         .wr-article-meta{
  1022.             font-size:12px;color:var(--wr-muted);
  1023.             white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  1024.             display:flex;align-items:center;gap:8px;margin:0;
  1025.         }
  1026.         .wr-article-meta-sep{display:inline-block;width:3px;height:3px;border-radius:50%;background:#D1D5DB;flex-shrink:0}
  1027.         .wr-article-badge{
  1028.             font-size:11px;font-weight:600;
  1029.             color:var(--wr-violet);background:var(--wr-violet-soft);
  1030.             padding:3px 9px;border-radius:100px;
  1031.             white-space:nowrap;flex-shrink:0;
  1032.             text-transform:uppercase;letter-spacing:.04em;
  1033.         }
  1034.         .wr-article-arrow{flex-shrink:0;color:var(--wr-muted-2);transition:color .15s,transform .15s}
  1035.         .wr-article:hover .wr-article-arrow{color:var(--wr-violet);transform:translateX(2px)}
  1036.         .wr-article-arrow svg{width:18px;height:18px}
  1037.         @media(max-width:540px){
  1038.             .wr-article{padding:12px;gap:10px}
  1039.             .wr-article-logo{width:42px;height:42px}
  1040.             .wr-article-logo svg{width:20px;height:20px}
  1041.             .wr-article-title{font-size:13px}
  1042.             .wr-article-meta{font-size:11px;gap:6px;flex-wrap:wrap;white-space:normal}
  1043.             .wr-article-badge{display:none}
  1044.         }
  1046.         .articles-cta{text-align:center;margin-top:36px}
  1047.         .articles-cta a{
  1048.             display:inline-flex;align-items:center;gap:8px;
  1049.             padding:12px 22px;border-radius:11px;
  1050.             background:var(--wr-violet);color:#fff;
  1051.             font-size:13px;font-weight:600;
  1052.             text-decoration:none;
  1053.             box-shadow:0 4px 12px rgba(138,99,192,.3);
  1054.             transition:background .15s,transform .15s,box-shadow .15s;
  1055.         }
  1056.         .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}
  1057.         .articles-cta svg{width:12px;height:12px;transition:transform .15s}
  1058.         .articles-cta a:hover svg{transform:translateX(3px)}
  1060.         /* ═══════════════════════════════════════════════════════════════════
  1061.            CTA FINAL — Card violet plein avec eyebrow + 2 sous-cards
  1062.            ═══════════════════════════════════════════════════════════════════ */
  1063.         .final-card{
  1064.             position:relative;
  1065.             background:linear-gradient(135deg,#8A63C0 0%,#9D7BCC 100%);
  1066.             border-radius:28px;
  1067.             padding:48px 40px;
  1068.             color:#fff;overflow:hidden;
  1069.             box-shadow:0 20px 60px -12px rgba(138,99,192,.4);
  1070.         }
  1071.         .final-card--center{text-align:center}
  1072.         .final-card--center .final-eyebrow{margin-left:auto;margin-right:auto}
  1073.         .final-title--center{margin-left:auto;margin-right:auto;text-align:center}
  1074.         .final-lede{font-size:16px;line-height:1.55;color:rgba(255,255,255,.92);margin:0 auto 28px;max-width:600px}
  1075.         @media(min-width:768px){.final-lede{font-size:18px}}
  1076.         .final-cta-btn{
  1077.             display:inline-flex;align-items:center;gap:10px;
  1078.             padding:14px 28px;border-radius:12px;
  1079.             background:#fff;color:var(--wr-violet-dark) !important;
  1080.             font-size:14.5px;font-weight:800;text-decoration:none !important;
  1081.             box-shadow:0 6px 20px rgba(0,0,0,.18);
  1082.             transition:transform .15s,box-shadow .15s;
  1083.         }
  1084.         .final-cta-btn:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(0,0,0,.22);color:var(--wr-violet-dark) !important}
  1085.         .final-cta-btn svg{width:14px;height:14px;transition:transform .15s;stroke:var(--wr-violet-dark)}
  1086.         .final-cta-btn:hover svg{transform:translateX(4px)}
  1087.         @media(max-width:768px){.final-card{padding:32px 22px;border-radius:22px}}
  1089.         .final-eyebrow{
  1090.             display:inline-flex;align-items:center;gap:8px;
  1091.             padding:8px 18px;border-radius:100px;
  1092.             background:rgba(255,255,255,.2);
  1093.             color:#fff;
  1094.             font-size:12px;font-weight:700;
  1095.             text-transform:uppercase;letter-spacing:.12em;
  1096.             margin-bottom:20px;
  1097.             backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  1098.         }
  1099.         .final-eyebrow svg{width:13px;height:13px;fill:currentColor}
  1101.         .final-title{
  1102.             font-weight:800;font-size:28px;line-height:1.15;letter-spacing:-0.02em;
  1103.             color:#fff;margin:0 0 36px;
  1104.             max-width:780px;
  1105.         }
  1106.         @media(min-width:768px){.final-title{font-size:38px}}
  1108.         /* Grille 2 sous-cards */
  1109.         .final-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
  1110.         @media(max-width:768px){.final-grid{grid-template-columns:1fr;gap:14px}}
  1112.         .final-sub{
  1113.             background:#fff;
  1114.             border-radius:18px;
  1115.             padding:28px;
  1116.             display:flex;flex-direction:column;
  1117.         }
  1118.         @media(max-width:768px){.final-sub{padding:22px}}
  1120.         .final-sub-head{display:flex;align-items:center;gap:14px;margin-bottom:18px}
  1121.         .final-sub-icon{
  1122.             width:44px;height:44px;border-radius:11px;
  1123.             background:var(--wr-violet-soft);color:var(--wr-violet);
  1124.             display:flex;align-items:center;justify-content:center;flex-shrink:0;
  1125.         }
  1126.         .final-sub-icon svg{width:22px;height:22px}
  1127.         .final-sub-label{
  1128.             font-size:12.5px;font-weight:700;
  1129.             color:var(--wr-violet);
  1130.             text-transform:uppercase;letter-spacing:.1em;
  1131.         }
  1132.         .final-sub-title{
  1133.             font-weight:800;font-size:18px;line-height:1.3;letter-spacing:-0.01em;
  1134.             color:var(--wr-ink);margin:0 0 10px;
  1135.         }
  1136.         .final-sub-desc{
  1137.             font-size:14px;line-height:1.55;color:var(--wr-muted);
  1138.             margin:0 0 24px;flex:1;
  1139.         }
  1140.         .final-sub-btn{
  1141.             display:flex;align-items:center;justify-content:center;gap:8px;
  1142.             background:var(--wr-violet);color:#fff;
  1143.             padding:14px 18px;border-radius:11px;
  1144.             font-size:14px;font-weight:700;
  1145.             text-decoration:none;
  1146.             transition:background .15s,transform .15s,box-shadow .15s;
  1147.             box-shadow:0 4px 12px rgba(138,99,192,.3);
  1148.         }
  1149.         .final-sub-btn:hover{
  1150.             background:var(--wr-violet-dark);color:#fff;
  1151.             transform:translateY(-2px);
  1152.             box-shadow:0 6px 18px rgba(138,99,192,.4);
  1153.             text-decoration:none;
  1154.         }
  1155.         .final-sub-btn svg{width:14px;height:14px;transition:transform .15s}
  1156.         .final-sub-btn:hover svg{transform:translateX(3px)}
  1157.     </style>
  1158. {% endblock css %}
  1160. {% block body %}
  1161.     <div class="wr">
  1163.         {# ═══════════════ HERO ═══════════════ #}
  1164.         <section class="hero">
  1165.             <div class="hero-inner">
  1166.                 <span class="hero-badge">
  1167.                     <span class="hero-badge-dot"></span>
  1168.                     {{ t.hero_eyebrow }}
  1169.                 </span>
  1171.                 {# H1 sur 2 lignes :
  1172.                    Ligne 1 : "Publiez vos offres, attirez les bons talents,"
  1173.                    Ligne 2 : "échangez directement"
  1174.                    Avec les 3 verbes en violet. #}
  1175.                 <h1 class="hero-title">
  1176.                     <span class="hero-title-accent">{{ t.hero_title_a1 }}</span> {{ t.hero_title_p1 }}
  1177.                     <span class="hero-title-accent">{{ t.hero_title_a2 }}</span> {{ t.hero_title_p2 }}<br>
  1178.                     <span class="hero-title-accent">{{ t.hero_title_a3 }}</span> {{ t.hero_title_p3 }}
  1179.                 </h1>
  1181.                 <p class="hero-lede">{{ t.hero_lede }}</p>
  1182.             </div>
  1183.         </section>
  1185.         {% if app.user is null %}
  1186.         {# ═══════════════ INSCRIPTION (juste après le hero) ═══════════════ #}
  1187.         <section class="wr-section signup-section">
  1188.             <div class="wr-container">
  1189.                 <div class="signup-card reveal reveal--scale" id="wr-signup">
  1190.                     <div class="signup-inner">
  1191.                         <div class="signup-text">
  1192.                             <span class="signup-eyebrow">
  1193.                                 <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>
  1194.                                 {{ t.signup_eyebrow }}
  1195.                             </span>
  1196.                             <h3 class="signup-title">{{ t.signup_title }}</h3>
  1197.                             <p class="signup-lede">{{ t.signup_lede }}</p>
  1198.                             <div class="signup-perks">
  1199.                                 <span class="signup-perk">
  1200.                                     <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>
  1201.                                     {{ t.signup_perk1 }}
  1202.                                 </span>
  1203.                                 <span class="signup-perk">
  1204.                                     <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>
  1205.                                     {{ t.signup_perk2 }}
  1206.                                 </span>
  1207.                                 <span class="signup-perk">
  1208.                                     <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>
  1209.                                     {{ t.signup_perk3 }}
  1210.                                 </span>
  1211.                             </div>
  1212.                         </div>
  1214.                         {% if form is defined %}
  1215.                             {# Form Symfony complet rendu via les widgets #}
  1216.                             {{ form_start(form, {'attr': {'class': 'signup-form', 'novalidate': 'novalidate'}}) }}
  1217.                             {{ form_errors(form) }}
  1218.                             {% for message in app.flashes('danger') %}
  1219.                                 <p class="signup-form-error">{{ message }}</p>
  1220.                             {% endfor %}
  1222.                             {# Prénom + nom #}
  1223.                             <div class="signup-row">
  1224.                                 {% if form.name is defined %}
  1225.                                     <div class="signup-field">
  1226.                                         {{ form_widget(form.name, {'attr': {'placeholder': t.signup_name_ph}}) }}
  1227.                                     </div>
  1228.                                 {% endif %}
  1229.                                 {% if form.lastname is defined %}
  1230.                                     <div class="signup-field">
  1231.                                         {{ form_widget(form.lastname, {'attr': {'placeholder': t.signup_lastname_ph}}) }}
  1232.                                     </div>
  1233.                                 {% endif %}
  1234.                             </div>
  1236.                             {# Email pro #}
  1237.                             <div class="signup-field">
  1238.                                 {{ form_widget(form.email, {'attr': {'placeholder': t.signup_email_ph}}) }}
  1239.                             </div>
  1241.                             {# Mot de passe + confirmation #}
  1242.                             <div class="signup-row">
  1243.                                 <div class="signup-field">
  1244.                                     {{ form_widget(form.password.first, {'attr': {'placeholder': t.signup_pass_ph}}) }}
  1245.                                 </div>
  1246.                                 <div class="signup-field">
  1247.                                     {{ form_widget(form.password.second, {'attr': {'placeholder': t.signup_pass2_ph}}) }}
  1248.                                 </div>
  1249.                             </div>
  1251.                             <label class="signup-terms">
  1252.                                 {{ form_widget(form.acceptTerm) }}
  1253.                                 <span>
  1254.                                         {{ t.signup_terms_pre }}
  1255.                                         <a href="{% if isFR %}/fr/protections-donnees-recruteurs{% else %}/data-protection-recruiters{% endif %}" target="_blank" rel="noopener">{{ t.signup_terms_link }}</a>
  1256.                                         {{ t.signup_terms_and }}
  1257.                                         <a href="{% if isFR %}/fr/conditions-generales-vente{% else %}/general-terms{% endif %}" target="_blank" rel="noopener">{{ t.signup_terms_link2 }}</a>.
  1258.                                     </span>
  1259.                             </label>
  1261.                             {% if form.recaptcha is defined %}
  1262.                                 <div class="signup-recaptcha">{{ form_widget(form.recaptcha) }}</div>
  1263.                             {% endif %}
  1265.                             <button type="submit" class="signup-submit">
  1266.                                 {{ t.signup_btn }}
  1267.                                 <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>
  1268.                             </button>
  1270.                             <p class="signup-login">
  1271.                                 {{ t.signup_login_pre }}
  1272.                                 <a href="{% if isFR %}{{ path('locale_app_login',{'_locale':'fr'}) }}{% else %}{{ path('app_login') }}{% endif %}">{{ t.signup_login_link }}</a>
  1273.                             </p>
  1275.                             {{ form_rest(form) }}
  1276.                             {{ form_end(form) }}
  1277.                         {% endif %}
  1278.                     </div>
  1279.                 </div>
  1280.             </div>
  1281.         </section>
  1282.         {% endif %}
  1284.         {# ═══════════════ COMMENT ÇA MARCHE ═══════════════ #}
  1285.         <section class="wr-section">
  1286.             <div class="wr-container">
  1287.                 <div class="wr-section-head">
  1288.                     <h2 class="wr-title">{{ t.how_title }}</h2>
  1289.                 </div>
  1291.                 <div class="how-card">
  1292.                     <div class="how-step reveal" data-reveal-delay="1">
  1293.                         <div class="how-step-illu">
  1294.                             <img src="/uploads/rh/mascotte_register.png" alt="{{ t.how1_title }}" loading="lazy">
  1295.                         </div>
  1296.                         <h3 class="how-step-title">{{ t.how1_title }}</h3>
  1297.                         <p class="how-step-desc">{{ t.how1_desc }}</p>
  1298.                     </div>
  1300.                     <div class="how-step reveal" data-reveal-delay="2">
  1301.                         <div class="how-step-illu">
  1302.                             <img src="/uploads/rh/mascotte_upload2.png" alt="{{ t.how2_title }}" loading="lazy">
  1303.                         </div>
  1304.                         <h3 class="how-step-title">{{ t.how2_title }}</h3>
  1305.                         <p class="how-step-desc">{{ t.how2_desc }}</p>
  1306.                     </div>
  1308.                     <div class="how-step reveal" data-reveal-delay="3">
  1309.                         <div class="how-step-illu">
  1310.                             <img src="/uploads/rh/mascotte_reunion.png" alt="{{ t.how3_title }}" loading="lazy">
  1311.                         </div>
  1312.                         <h3 class="how-step-title">{{ t.how3_title }}</h3>
  1313.                         <p class="how-step-desc">{{ t.how3_desc }}</p>
  1314.                     </div>
  1315.                 </div>
  1316.             </div>
  1317.         </section>
  1319.         {# ═══════════════ FEATURES 01-04 ═══════════════ #}
  1320.         <section class="wr-section">
  1321.             <div class="wr-container">
  1323.                 {# Feature 01 — Filtrage par critères #}
  1324.                 <div class="feat-block reveal">
  1325.                     <div class="feat-illu">
  1326.                         <img src="/uploads/rh/mascotte_filtrage3.png" alt="{{ t.feat1_title }}" loading="lazy">
  1327.                     </div>
  1328.                     <div class="feat-content">
  1329.                         <span class="feat-label">{{ t.feat1_label }}</span>
  1330.                         <h3 class="feat-title">{{ t.feat1_title }}</h3>
  1331.                         <div class="feat-desc">
  1332.                             <p>{{ t.feat1_p1|raw }}</p>
  1333.                             <p>{{ t.feat1_p2|raw }}</p>
  1334.                         </div>
  1335.                         <div class="feat-quote">
  1336.                             <p class="feat-quote-text">{{ t.feat1_quote }}</p>
  1337.                             <div class="feat-quote-author">
  1338.                                 <p class="feat-quote-name">{{ t.feat1_author }}</p>
  1339.                                 <p class="feat-quote-role">{{ t.feat1_role }}</p>
  1340.                             </div>
  1341.                         </div>
  1342.                     </div>
  1343.                 </div>
  1345.                 {# Feature 02 — Optimisation intelligente #}
  1346.                 <div class="feat-block reveal">
  1347.                     <div class="feat-illu">
  1348.                         <img src="/uploads/rh/mascotte_upload.png" alt="{{ t.feat2_title }}" loading="lazy">
  1349.                     </div>
  1350.                     <div class="feat-content">
  1351.                         <span class="feat-label">{{ t.feat2_label }}</span>
  1352.                         <h3 class="feat-title">{{ t.feat2_title }}</h3>
  1353.                         <div class="feat-desc">
  1354.                             <p>{{ t.feat2_p1|raw }}</p>
  1355.                             <p>{{ t.feat2_p2|raw }}</p>
  1356.                         </div>
  1357.                         <div class="feat-quote">
  1358.                             <p class="feat-quote-text">{{ t.feat2_quote }}</p>
  1359.                             <div class="feat-quote-author">
  1360.                                 <p class="feat-quote-name">{{ t.feat2_author }}</p>
  1361.                                 <p class="feat-quote-role">{{ t.feat2_role }}</p>
  1362.                             </div>
  1363.                         </div>
  1364.                     </div>
  1365.                 </div>
  1368.                 {# Feature 03 — Recherche qualifiée #}
  1369.                 <div class="feat-block reveal">
  1370.                     <div class="feat-illu">
  1371.                         <img src="/uploads/rh/mascotte_register.png" alt="{{ t.feat3_title }}" loading="lazy">
  1372.                     </div>
  1373.                     <div class="feat-content">
  1374.                         <span class="feat-label">{{ t.feat3_label }}</span>
  1375.                         <h3 class="feat-title">{{ t.feat3_title }}</h3>
  1376.                         <div class="feat-desc">
  1377.                             <p>{{ t.feat3_p1|raw }}</p>
  1378.                             <p>{{ t.feat3_p2|raw }}</p>
  1379.                         </div>
  1380.                         <div class="feat-quote">
  1381.                             <p class="feat-quote-text">{{ t.feat3_quote }}</p>
  1382.                             <div class="feat-quote-author">
  1383.                                 <p class="feat-quote-name">{{ t.feat3_author }}</p>
  1384.                                 <p class="feat-quote-role">{{ t.feat3_role }}</p>
  1385.                             </div>
  1386.                         </div>
  1387.                     </div>
  1388.                 </div>
  1390.                 {# Feature 04 — Contact direct qualifié #}
  1391.                 <div class="feat-block reveal">
  1392.                     <div class="feat-illu">
  1393.                         <img src="/uploads/rh/mascotte_reunion.png" alt="{{ t.feat4_title }}" loading="lazy">
  1394.                     </div>
  1395.                     <div class="feat-content">
  1396.                         <span class="feat-label">{{ t.feat4_label }}</span>
  1397.                         <h3 class="feat-title">{{ t.feat4_title }}</h3>
  1398.                         <div class="feat-desc">
  1399.                             <p>{{ t.feat4_p1|raw }}</p>
  1400.                             <p>{{ t.feat4_p2|raw }}</p>
  1401.                         </div>
  1402.                         <div class="feat-quote">
  1403.                             <p class="feat-quote-text">{{ t.feat4_quote }}</p>
  1404.                             <div class="feat-quote-author">
  1405.                                 <p class="feat-quote-name">{{ t.feat4_author }}</p>
  1406.                                 <p class="feat-quote-role">{{ t.feat4_role }}</p>
  1407.                             </div>
  1408.                         </div>
  1409.                     </div>
  1410.                 </div>
  1412.             </div>
  1413.         </section>
  1415.         {% if app.user is null %}
  1416.         {# ═══════════════ PRICING ═══════════════ #}
  1417.         <section class="wr-section" id="pricing">
  1418.             <div class="wr-container">
  1419.                 <div class="wr-section-head">
  1420.                     <h2 class="wr-title">{{ t.pricing_title }}</h2>
  1421.                     <p class="wr-lede">{{ t.pricing_lede }}</p>
  1422.                 </div>
  1424.                 {# Première rangée : Gratuit + Unique #}
  1425.                 <div class="pricing-grid pricing-grid--2">
  1426.                     {# Tier 1 - Gratuit #}
  1427.                     <div class="pricing-card reveal" data-reveal-delay="1">
  1428.                         <div class="pricing-head">
  1429.                             <h3 class="pricing-name">{{ t.pricing1_name }}</h3>
  1430.                             <p class="pricing-desc">{{ t.pricing1_desc }}</p>
  1431.                         </div>
  1432.                         <div class="pricing-price">
  1433.                             <span class="pricing-price-amount">{{ t.pricing1_price }}</span>
  1434.                             <span class="pricing-price-unit">{{ t.pricing1_unit }}</span>
  1435.                         </div>
  1436.                         <ul class="pricing-features">
  1437.                             <li class="pricing-feature"><span class="pricing-feature-check"><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></span>{{ t.pricing1_b1 }}</li>
  1438.                             <li class="pricing-feature"><span class="pricing-feature-check"><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></span>{{ t.pricing1_b2 }}</li>
  1439.                             <li class="pricing-feature"><span class="pricing-feature-check"><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></span>{{ t.pricing1_b3 }}</li>
  1440.                             <li class="pricing-feature"><span class="pricing-feature-check"><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></span>{{ t.pricing1_b4 }}</li>
  1441.                             <li class="pricing-feature"><span class="pricing-feature-check"><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></span>{{ t.pricing1_b5 }}</li>
  1442.                         </ul>
  1443.                         <a href="#wr-signup" class="pricing-cta">
  1444.                             {{ t.pricing1_cta }}
  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.                         </a>
  1447.                         <p class="pricing-note">{{ t.pricing1_note }}</p>
  1448.                     </div>
  1450.                     {# Tier 2 - Unique #}
  1451.                     <div class="pricing-card reveal" data-reveal-delay="2">
  1452.                         <div class="pricing-head">
  1453.                             <h3 class="pricing-name">{{ t.pricing2_name }}</h3>
  1454.                             <p class="pricing-desc">{{ t.pricing2_desc }}</p>
  1455.                         </div>
  1456.                         <div class="pricing-price">
  1457.                             <span class="pricing-price-amount">{{ t.pricing2_price }}</span>
  1458.                             <span class="pricing-price-unit">{{ t.pricing2_unit }}</span>
  1459.                         </div>
  1460.                         <ul class="pricing-features">
  1461.                             <li class="pricing-feature"><span class="pricing-feature-check"><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></span>{{ t.pricing2_b1 }}</li>
  1462.                             <li class="pricing-feature"><span class="pricing-feature-check"><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></span>{{ t.pricing2_b2 }}</li>
  1463.                             <li class="pricing-feature"><span class="pricing-feature-check"><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></span>{{ t.pricing2_b3 }}</li>
  1464.                             <li class="pricing-feature"><span class="pricing-feature-check"><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></span>{{ t.pricing2_b4 }}</li>
  1465.                             <li class="pricing-feature"><span class="pricing-feature-check"><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></span>{{ t.pricing2_b5 }}</li>
  1466.                         </ul>
  1467.                         <a href="#wr-signup" class="pricing-cta">
  1468.                             {{ t.pricing2_cta }}
  1469.                             <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>
  1470.                         </a>
  1471.                         <p class="pricing-note">{{ t.pricing2_note }}</p>
  1472.                     </div>
  1473.                 </div>
  1475.                 {# Deuxième rangée : Business (populaire) + Business+ #}
  1476.                 <div class="pricing-grid pricing-grid--2 pricing-grid--mt">
  1477.                     {# Tier 3 - Business (featured) #}
  1478.                     <div class="pricing-card pricing-card--featured reveal" data-reveal-delay="1">
  1479.                         <span class="pricing-badge">{{ isFR ? 'Populaire' : 'Popular' }}</span>
  1480.                         <div class="pricing-head">
  1481.                             <h3 class="pricing-name">{{ t.pricing3_name }}</h3>
  1482.                             <p class="pricing-desc">{{ t.pricing3_desc }}</p>
  1483.                         </div>
  1484.                         <div class="pricing-price">
  1485.                             <span class="pricing-price-amount">{{ t.pricing3_price }}</span>
  1486.                             {% if t.pricing3_price_old %}<span class="pricing-price-old">{{ t.pricing3_price_old }}</span>{% endif %}
  1487.                             <span class="pricing-price-unit">{{ t.pricing3_unit }}</span>
  1488.                         </div>
  1489.                         <a href="#wr-signup" class="pricing-cta">
  1490.                             {{ t.pricing3_cta }}
  1491.                             <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>
  1492.                         </a>
  1493.                         <p class="pricing-note">{{ t.pricing3_note }}</p>
  1494.                         <ul class="pricing-features">
  1495.                             <li class="pricing-feature"><span class="pricing-feature-check"><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></span>{{ t.pricing3_b1 }}</li>
  1496.                             <li class="pricing-plus">{{ t.pricing_plus }}</li>
  1497.                             <li class="pricing-feature"><span class="pricing-feature-check"><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></span>{{ t.pricing3_b2 }}</li>
  1498.                             <li class="pricing-feature"><span class="pricing-feature-check"><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></span>{{ t.pricing3_b3 }}</li>
  1499.                             <li class="pricing-feature"><span class="pricing-feature-check"><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></span>{{ t.pricing3_b4 }}</li>
  1500.                             <li class="pricing-feature"><span class="pricing-feature-check"><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></span>{{ t.pricing3_b5 }}</li>
  1501.                             <li class="pricing-feature"><span class="pricing-feature-check"><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></span>{{ t.pricing3_b6 }}</li>
  1502.                             <li class="pricing-feature"><span class="pricing-feature-check"><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></span>{{ t.pricing3_b7 }}</li>
  1503.                         </ul>
  1504.                     </div>
  1506.                     {# Tier 4 - Business+ (Sur devis) #}
  1507.                     <div class="pricing-card reveal" data-reveal-delay="2">
  1508.                         <div class="pricing-head">
  1509.                             <h3 class="pricing-name">{{ t.pricing4_name }}</h3>
  1510.                             <p class="pricing-desc">{{ t.pricing4_desc }}</p>
  1511.                         </div>
  1512.                         <div class="pricing-price">
  1513.                             <span class="pricing-price-amount pricing-price-amount--quote">{{ t.pricing4_price }}</span>
  1514.                         </div>
  1515.                         <a href="mailto:contact@whileresume.com?subject={{ t.pricing4_cta|url_encode }}" class="pricing-cta">
  1516.                             {{ t.pricing4_cta }}
  1517.                             <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>
  1518.                         </a>
  1519.                         <p class="pricing-note">{{ t.pricing4_note }}</p>
  1520.                         <ul class="pricing-features">
  1521.                             <li class="pricing-feature"><span class="pricing-feature-check"><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></span>{{ t.pricing4_b1 }}</li>
  1522.                             <li class="pricing-plus">{{ t.pricing_plus }}</li>
  1523.                             <li class="pricing-feature"><span class="pricing-feature-check"><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></span>{{ t.pricing4_b2 }}</li>
  1524.                             <li class="pricing-feature"><span class="pricing-feature-check"><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></span>{{ t.pricing4_b3 }}</li>
  1525.                             <li class="pricing-feature"><span class="pricing-feature-check"><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></span>{{ t.pricing4_b4 }}</li>
  1526.                             <li class="pricing-feature"><span class="pricing-feature-check"><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></span>{{ t.pricing4_b5 }}</li>
  1527.                             <li class="pricing-feature"><span class="pricing-feature-check"><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></span>{{ t.pricing4_b6 }}</li>
  1528.                             <li class="pricing-feature"><span class="pricing-feature-check"><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></span>{{ t.pricing4_b7 }}</li>
  1529.                             <li class="pricing-feature"><span class="pricing-feature-check"><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></span>{{ t.pricing4_b8 }}</li>
  1530.                             <li class="pricing-feature"><span class="pricing-feature-check"><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></span>{{ t.pricing4_b9 }}</li>
  1531.                             <li class="pricing-feature"><span class="pricing-feature-check"><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></span>{{ t.pricing4_b10 }}</li>
  1532.                             <li class="pricing-feature"><span class="pricing-feature-check"><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></span>{{ t.pricing4_b11 }}</li>
  1533.                         </ul>
  1534.                     </div>
  1535.                 </div>
  1536.             </div>
  1537.         </section>
  1538.         {% endif %}
  1540.         {# ═══════════════ COMPARISON ═══════════════ #}
  1541.         <section class="wr-section">
  1542.             <div class="wr-container">
  1543.                 <div class="wr-section-head">
  1544.                     <h2 class="wr-title">{{ t.compare_title }}</h2>
  1545.                 </div>
  1547.                 <div class="compare-cards">
  1548.                     {# Card 1 - Whileresume #}
  1549.                     <div class="compare-card compare-card--featured reveal" data-reveal-delay="1">
  1550.                         <div class="compare-card-head">
  1551.                             <img class="compare-card-logo" src="https://whileresume.com/uploads/favicon.png" alt="Whileresume">
  1552.                             <h3 class="compare-card-title">{{ t.compare_us_rank }} {{ t.compare_us_name }}</h3>
  1553.                         </div>
  1554.                         <div class="compare-card-body">
  1555.                             <div class="compare-row">
  1556.                                 <p class="compare-row-label">{{ t.compare_row1_label }}</p>
  1557.                                 <p class="compare-row-value compare-row-value--good">
  1558.                                     <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
  1559.                                     {{ t.compare_row1_us }}
  1560.                                 </p>
  1561.                             </div>
  1562.                             <div class="compare-row">
  1563.                                 <p class="compare-row-label">{{ t.compare_row2_label }}</p>
  1564.                                 <p class="compare-row-value compare-row-value--good">
  1565.                                     <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
  1566.                                     {{ t.compare_row2_us }}
  1567.                                 </p>
  1568.                             </div>
  1569.                             <div class="compare-row">
  1570.                                 <p class="compare-row-label">{{ t.compare_row3_label }}</p>
  1571.                                 <p class="compare-row-value compare-row-value--good">
  1572.                                     <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
  1573.                                     {{ t.compare_row3_us }}
  1574.                                 </p>
  1575.                             </div>
  1576.                             <div class="compare-row">
  1577.                                 <p class="compare-row-label">{{ t.compare_row4_label }}</p>
  1578.                                 <p class="compare-row-value compare-row-value--good">
  1579.                                     <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
  1580.                                     {{ t.compare_row4_us }}
  1581.                                 </p>
  1582.                             </div>
  1583.                             <div class="compare-row">
  1584.                                 <p class="compare-row-label">{{ t.compare_row5_label }}</p>
  1585.                                 <p class="compare-row-value compare-row-value--good">
  1586.                                     <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
  1587.                                     {{ t.compare_row5_us }}
  1588.                                 </p>
  1589.                             </div>
  1590.                         </div>
  1591.                     </div>
  1593.                     {# Card 2 - LinkedIn #}
  1594.                     <div class="compare-card reveal" data-reveal-delay="2">
  1595.                         <div class="compare-card-head">
  1596.                             <img class="compare-card-logo" src="/images/linkedin.png" alt="LinkedIn">
  1597.                             <h3 class="compare-card-title">{{ t.compare_linkedin_rank }} {{ t.compare_linkedin_name }}</h3>
  1598.                         </div>
  1599.                         <div class="compare-card-body">
  1600.                             <div class="compare-row">
  1601.                                 <p class="compare-row-label">{{ t.compare_row1_label }}</p>
  1602.                                 <p class="compare-row-value compare-row-value--warn">
  1603.                                     <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
  1604.                                     {{ t.compare_row1_linkedin }}
  1605.                                 </p>
  1606.                             </div>
  1607.                             <div class="compare-row">
  1608.                                 <p class="compare-row-label">{{ t.compare_row2_label }}</p>
  1609.                                 <p class="compare-row-value compare-row-value--bad">
  1610.                                     <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
  1611.                                     {{ t.compare_row2_linkedin }}
  1612.                                 </p>
  1613.                             </div>
  1614.                             <div class="compare-row">
  1615.                                 <p class="compare-row-label">{{ t.compare_row3_label }}</p>
  1616.                                 <p class="compare-row-value compare-row-value--warn">
  1617.                                     <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
  1618.                                     {{ t.compare_row3_linkedin }}
  1619.                                 </p>
  1620.                             </div>
  1621.                             <div class="compare-row">
  1622.                                 <p class="compare-row-label">{{ t.compare_row4_label }}</p>
  1623.                                 <p class="compare-row-value compare-row-value--warn">
  1624.                                     <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
  1625.                                     {{ t.compare_row4_linkedin }}
  1626.                                 </p>
  1627.                             </div>
  1628.                             <div class="compare-row">
  1629.                                 <p class="compare-row-label">{{ t.compare_row5_label }}</p>
  1630.                                 <p class="compare-row-value compare-row-value--good">
  1631.                                     <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
  1632.                                     {{ t.compare_row5_linkedin }}
  1633.                                 </p>
  1634.                             </div>
  1635.                         </div>
  1636.                     </div>
  1638.                     {# Card 3 - Indeed #}
  1639.                     <div class="compare-card reveal" data-reveal-delay="3">
  1640.                         <div class="compare-card-head">
  1641.                             <img class="compare-card-logo" src="/images/indeed.png" alt="Indeed">
  1642.                             <h3 class="compare-card-title">{{ t.compare_indeed_rank }} {{ t.compare_indeed_name }}</h3>
  1643.                         </div>
  1644.                         <div class="compare-card-body">
  1645.                             <div class="compare-row">
  1646.                                 <p class="compare-row-label">{{ t.compare_row1_label }}</p>
  1647.                                 <p class="compare-row-value compare-row-value--warn">
  1648.                                     <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
  1649.                                     {{ t.compare_row1_indeed }}
  1650.                                 </p>
  1651.                             </div>
  1652.                             <div class="compare-row">
  1653.                                 <p class="compare-row-label">{{ t.compare_row2_label }}</p>
  1654.                                 <p class="compare-row-value compare-row-value--bad">
  1655.                                     <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
  1656.                                     {{ t.compare_row2_indeed }}
  1657.                                 </p>
  1658.                             </div>
  1659.                             <div class="compare-row">
  1660.                                 <p class="compare-row-label">{{ t.compare_row3_label }}</p>
  1661.                                 <p class="compare-row-value compare-row-value--warn">
  1662.                                     <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
  1663.                                     {{ t.compare_row3_indeed }}
  1664.                                 </p>
  1665.                             </div>
  1666.                             <div class="compare-row">
  1667.                                 <p class="compare-row-label">{{ t.compare_row4_label }}</p>
  1668.                                 <p class="compare-row-value compare-row-value--warn">
  1669.                                     <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
  1670.                                     {{ t.compare_row4_indeed }}
  1671.                                 </p>
  1672.                             </div>
  1673.                             <div class="compare-row">
  1674.                                 <p class="compare-row-label">{{ t.compare_row5_label }}</p>
  1675.                                 <p class="compare-row-value compare-row-value--bad">
  1676.                                     <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
  1677.                                     {{ t.compare_row5_indeed }}
  1678.                                 </p>
  1679.                             </div>
  1680.                         </div>
  1681.                     </div>
  1682.                 </div>
  1683.             </div>
  1684.         </section>
  1686.         {# ═══════════════ ARTICLES ═══════════════ #}
  1687.         {% if articles is defined and articles|length > 0 %}
  1688.             <section class="wr-section">
  1689.                 <div class="wr-container">
  1690.                     <div class="wr-section-head">
  1691.                         <h2 class="wr-title wr-title--sm">{{ t.articles_title }}</h2>
  1692.                     </div>
  1694.                     <div class="articles-list">
  1695.                         {% for a in articles|slice(0,6) %}
  1696.                             {% set prefix = "" %}
  1697.                             {% set urlA = path('cvs_website_article',{'slug': a.slug}) %}
  1698.                             {% if app.request.locale != default_locale %}
  1699.                                 {% set urlA = path('locale_cvs_website_article',{'_locale':app.request.locale,'slug': a.slug}) %}
  1700.                                 {% set prefix = "/" ~ app.request.locale %}
  1701.                             {% endif %}
  1702.                             {% if a.pageslug3 is not empty %}
  1703.                                 {% set urlA = prefix ~ '/' ~ a.pageslug ~ '/' ~ a.pageslug2 ~ '/' ~ a.pageslug3 %}
  1704.                             {% elseif a.pageslug2 is not empty %}
  1705.                                 {% set urlA = prefix ~ '/' ~ a.pageslug ~ '/' ~ a.pageslug2 %}
  1706.                             {% elseif a.pageslug is not empty %}
  1707.                                 {% set urlA = prefix ~ '/' ~ a.pageslug %}
  1708.                             {% endif %}
  1710.                             <a href="{{ urlA }}" class="wr-article">
  1711.                                 <div class="wr-article-logo">
  1712.                                     <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  1713.                                         <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/>
  1714.                                         <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/>
  1715.                                     </svg>
  1716.                                 </div>
  1717.                                 <div class="wr-article-info">
  1718.                                     <h3 class="wr-article-title">{{ a.title }}</h3>
  1719.                                     <div class="wr-article-meta">
  1720.                                         {% if a.subtitle is not empty %}
  1721.                                             <span>{{ a.subtitle|length > 60 ? a.subtitle|slice(0,60) ~ '…' : a.subtitle }}</span>
  1722.                                         {% endif %}
  1723.                                     </div>
  1724.                                 </div>
  1725.                                 <span class="wr-article-badge">{{ t.read_article }}</span>
  1726.                                 <span class="wr-article-arrow">
  1727.                                 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  1728.                                     <polyline points="9 18 15 12 9 6"/>
  1729.                                 </svg>
  1730.                             </span>
  1731.                             </a>
  1732.                         {% endfor %}
  1733.                     </div>
  1735.                     <div class="articles-cta">
  1736.                         <a href="{% if isFR %}{{ path('locale_cvs_website_articles',{'_locale':'fr'}) }}{% else %}{{ path('cvs_website_articles') }}{% endif %}">
  1737.                             {{ t.articles_view_all }}
  1738.                             <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>
  1739.                         </a>
  1740.                     </div>
  1741.                 </div>
  1742.             </section>
  1743.         {% endif %}
  1745.         {# ═══════════════ FAQ ═══════════════ #}
  1746.         <section class="wr-section" id="faq">
  1747.             <div class="wr-container">
  1748.                 <div class="wr-section-head">
  1749.                     <h2 class="wr-title">{{ t.faq_title }}</h2>
  1750.                     <p class="wr-lede">{{ t.faq_lede }}</p>
  1751.                 </div>
  1753.                 <div class="faq-list">
  1754.                     <details class="faq-item reveal" data-reveal-delay="1">
  1755.                         <summary class="faq-q">
  1756.                             <span>{{ t.faq_q1 }}</span>
  1757.                             <svg class="faq-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>
  1758.                         </summary>
  1759.                         <div class="faq-a"><p>{{ t.faq_a1 }}</p></div>
  1760.                     </details>
  1761.                     <details class="faq-item reveal" data-reveal-delay="2">
  1762.                         <summary class="faq-q">
  1763.                             <span>{{ t.faq_q2 }}</span>
  1764.                             <svg class="faq-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>
  1765.                         </summary>
  1766.                         <div class="faq-a"><p>{{ t.faq_a2 }}</p></div>
  1767.                     </details>
  1768.                     <details class="faq-item reveal" data-reveal-delay="3">
  1769.                         <summary class="faq-q">
  1770.                             <span>{{ t.faq_q3 }}</span>
  1771.                             <svg class="faq-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>
  1772.                         </summary>
  1773.                         <div class="faq-a"><p>{{ t.faq_a3 }}</p></div>
  1774.                     </details>
  1775.                 </div>
  1776.             </div>
  1777.         </section>
  1779.     </div>
  1780. {% endblock body %}
  1782. {% block footer_js %}
  1783.     {{ parent() }}
  1784.     <script>
  1786.         /* ═══ Reveal au scroll (Intersection Observer) ═══ */
  1787.         (function(){
  1788.             var els = document.querySelectorAll('.reveal');
  1789.             if (!els.length) return;
  1791.             if (!('IntersectionObserver' in window)){
  1792.                 // Fallback : tout révéler
  1793.                 els.forEach(function(el){ el.classList.add('is-revealed'); });
  1794.                 return;
  1795.             }
  1797.             var io = new IntersectionObserver(function(entries){
  1798.                 entries.forEach(function(entry){
  1799.                     if (entry.isIntersecting){
  1800.                         entry.target.classList.add('is-revealed');
  1801.                         io.unobserve(entry.target);
  1802.                     }
  1803.                 });
  1804.             }, { threshold: 0.12, rootMargin: '0px 0px -60px 0px' });
  1806.             els.forEach(function(el){ io.observe(el); });
  1807.         })();
  1808.     </script>
  1809. {% endblock footer_js %}