templates/application/whileresume/application/jobs/show.html.twig line 1

Open in your IDE?
  1. {% extends 'application/whileresume/application/jobs/layout-social.html.twig' %}
  3. {% trans_default_domain 'whr-public' %}
  5. {% block title %}{{ job.jobTitle }} — {{ job.companyName }}{% endblock title %}
  6. {% block description %}{{ job.jobSummary|striptags|slice(0, 160) }}{% endblock description %}
  7. {% block robots %}index,follow{% endblock robots %}
  9. {% block css %}
  10.     <style>
  11.         /* ═══════════════════════════════════════════════════════════════
  12.            PAGE OFFRE — Pile de cards swipeable + AJAX
  13.         ═══════════════════════════════════════════════════════════════ */
  15.         /* ─── Layout 2 colonnes ─── */
  16.         .job-layout{display:block;max-width:880px;margin:0 auto}
  17.         .job-main{width:100%}
  19.         /* ─── Bandeau d'info "swipez pour naviguer" ─── */
  20.         .swipe-banner{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;background:linear-gradient(135deg,#F5F3FF,#EDE9FE);border:1px solid rgba(108,58,237,.15);border-radius:10px;margin-bottom:14px;font-size:12px}
  21.         .swipe-banner-info{display:flex;align-items:center;gap:8px;flex:1;min-width:0}
  22.         .swipe-banner-icon{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:6px;background:#fff;color:var(--theme-color,#6C3AED);flex-shrink:0;animation:bannerPulse 2s ease-in-out infinite}
  23.         .swipe-banner-icon svg{width:13px;height:13px}
  24.         @keyframes bannerPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
  25.         .swipe-banner-text{color:#5B21B6;font-weight:500;line-height:1.4}
  26.         .swipe-banner-text strong{color:var(--theme-color,#6C3AED);font-weight:700}
  27.         .swipe-banner-counter{font-size:11px;font-weight:700;color:var(--theme-color,#6C3AED);background:#fff;padding:3px 10px;border-radius:100px;white-space:nowrap;flex-shrink:0}
  29.         /* ─── Boutons navigation prev/next ─── */
  30.         .job-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;gap:12px}
  31.         .job-nav-btn{display:flex;align-items:center;gap:8px;padding:10px 16px;border-radius:10px;font-size:13px;font-weight:600;cursor:pointer;text-decoration:none;transition:transform .15s,filter .15s,border-color .15s;font-family:inherit;border:1px solid transparent}
  32.         .job-nav-btn:hover{transform:translateY(-1px)}
  33.         .job-nav-btn-prev{background:#fff;border-color:#E5E7EB;color:#1E1B2E}
  34.         .job-nav-btn-prev:hover{border-color:var(--theme-color,#6C3AED);color:var(--theme-color,#6C3AED)}
  35.         .job-nav-btn-next{background:#1E1B2E;color:#fff}
  36.         .job-nav-btn-next:hover{filter:brightness(1.5);color:#fff}
  37.         .job-nav-btn svg{width:14px;height:14px;flex-shrink:0}
  38.         @media(max-width:480px){
  39.             .job-nav-btn span{display:none}
  40.             .job-nav-btn{padding:10px 12px}
  41.         }
  43.         /* ═══════════════════════════════════════════════════════════════
  44.            PILE DE CARDS — Card centrale + cards fantômes
  45.         ═══════════════════════════════════════════════════════════════ */
  46.         .stack-wrap{position:relative;perspective:1000px}
  48.         /* Cards fantômes derrière (effet pile) */
  49.         .stack-ghost{position:absolute;left:0;right:0;background:#fff;border-radius:16px;border:1px solid #E5E7EB;pointer-events:none;transition:transform .3s ease,opacity .3s ease}
  50.         .stack-ghost-1{top:8px;left:3%;right:3%;bottom:0;opacity:.6;transform:scale(.97)}
  51.         .stack-ghost-2{top:16px;left:6%;right:6%;bottom:0;opacity:.3;transform:scale(.94)}
  52.         @media(max-width:480px){.stack-ghost{display:none}}
  54.         /* Card centrale */
  55.         .job-card-main{position:relative;background:#fff;border-radius:16px;box-shadow:0 4px 20px 0 rgba(0,0,0,0.06);overflow:hidden;will-change:transform,opacity;transition:transform .3s ease,opacity .3s ease;touch-action:pan-y;z-index:2;cursor:grab}
  56.         .job-card-main:active{cursor:grabbing}
  57.         .job-card-main.dragging{transition:none}
  58.         .job-card-main.swipe-out-right{transform:translateX(120%) rotate(8deg);opacity:0}
  59.         .job-card-main.swipe-out-left{transform:translateX(-120%) rotate(-8deg);opacity:0}
  60.         .job-card-main.swipe-in{animation:swipeIn .35s ease forwards}
  61.         @keyframes swipeIn{0%{transform:translateX(0) scale(.95);opacity:.5}100%{transform:translateX(0) scale(1);opacity:1}}
  63.         /* ─── Skeleton loader (pendant chargement AJAX) ─── */
  64.         .skeleton{padding:24px}
  65.         @media(max-width:480px){.skeleton{padding:18px}}
  66.         .skeleton-line{background:linear-gradient(90deg,#F3F4F6 0%,#E5E7EB 50%,#F3F4F6 100%);background-size:200% 100%;border-radius:6px;animation:skeletonShimmer 1.4s ease-in-out infinite}
  67.         @keyframes skeletonShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
  68.         .skeleton-pills{display:flex;gap:6px;margin-bottom:16px}
  69.         .skeleton-pill{height:22px;width:70px;border-radius:100px;background:linear-gradient(90deg,#F3F4F6 0%,#E5E7EB 50%,#F3F4F6 100%);background-size:200% 100%;animation:skeletonShimmer 1.4s ease-in-out infinite}
  70.         .skeleton-pill.s-w90{width:90px}
  71.         .skeleton-title{height:32px;width:75%;margin-bottom:8px;border-radius:8px}
  72.         .skeleton-title-2{height:32px;width:50%;margin-bottom:18px;border-radius:8px}
  73.         .skeleton-meta{display:flex;gap:6px;margin-bottom:24px;flex-wrap:wrap}
  74.         .skeleton-meta-item{height:24px;width:80px;border-radius:100px;background:linear-gradient(90deg,#F3F4F6 0%,#E5E7EB 50%,#F3F4F6 100%);background-size:200% 100%;animation:skeletonShimmer 1.4s ease-in-out infinite}
  75.         .skeleton-section{padding:20px 24px;border-top:1px solid #F3F4F6}
  76.         @media(max-width:480px){.skeleton-section{padding:16px 18px}}
  77.         .skeleton-section-head{display:flex;align-items:center;gap:10px;margin-bottom:14px}
  78.         .skeleton-section-icon{width:32px;height:32px;border-radius:10px;background:linear-gradient(90deg,#F3F4F6 0%,#E5E7EB 50%,#F3F4F6 100%);background-size:200% 100%;animation:skeletonShimmer 1.4s ease-in-out infinite;flex-shrink:0}
  79.         .skeleton-section-title{height:18px;width:140px;border-radius:6px}
  80.         .skeleton-line-text{height:13px;margin-bottom:8px}
  81.         .skeleton-w-full{width:100%}
  82.         .skeleton-w-90{width:90%}
  83.         .skeleton-w-75{width:75%}
  84.         .skeleton-w-60{width:60%}
  86.         /* Pulse au chargement initial (1 fois) */
  87.         .job-card-main.intro-pulse{animation:introPulse 1.5s ease-out forwards}
  88.         @keyframes introPulse{
  89.             0%{transform:translateX(0)}
  90.             20%{transform:translateX(20px) rotate(2deg)}
  91.             40%{transform:translateX(-15px) rotate(-1.5deg)}
  92.             60%{transform:translateX(8px) rotate(.8deg)}
  93.             80%{transform:translateX(-3px) rotate(-.3deg)}
  94.             100%{transform:translateX(0)}
  95.         }
  97.         /* Indicateurs swipe (apparaissent pendant le drag) */
  98.         .swipe-indicator{position:absolute;top:50%;padding:12px 20px;border-radius:12px;font-size:14px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;border:3px solid;opacity:0;transition:opacity .15s ease;pointer-events:none;z-index:10;transform:translateY(-50%) rotate(-15deg)}
  99.         .swipe-indicator-prev{left:20px;color:#16A34A;border-color:#16A34A;background:rgba(220,252,231,.95)}
  100.         .swipe-indicator-next{right:20px;color:#6C3AED;border-color:#6C3AED;background:rgba(245,243,255,.95);transform:translateY(-50%) rotate(15deg)}
  102.         /* Header card minimaliste : titre direct */
  103.         .job-card-head{padding:24px 24px 16px}
  104.         @media(max-width:480px){.job-card-head{padding:18px 18px 14px}}
  106.         .job-card-title{font-size:24px;font-weight:800;color:#1E1B2E;line-height:1.2;letter-spacing:-0.02em;margin:0 0 12px}
  107.         @media(min-width:768px){.job-card-title{font-size:28px}}
  108.         @media(max-width:480px){.job-card-title{font-size:22px}}
  110.         .job-card-meta{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:0}
  111.         .job-card-meta-item{display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border-radius:100px;background:#F3F4F6;font-size:12px;color:#4B5563;font-weight:500}
  112.         .job-card-meta-item svg{width:12px;height:12px;flex-shrink:0;color:#6B7280}
  113.         .job-card-meta-salary{background:#F5F3FF;color:var(--theme-color,#6C3AED);font-weight:600}
  114.         .job-card-meta-salary svg{color:currentColor}
  115.         .job-card-meta-active{background:#ECFDF5;color:#059669;font-weight:600}
  116.         .job-card-meta-external{background:#FFFBEB;color:#92400E;font-weight:600}
  117.         .job-card-active-dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:#10B981;box-shadow:0 0 6px rgba(16,185,129,.5);flex-shrink:0}
  119.         /* Sections */
  120.         .job-card-section{padding:20px 24px;border-top:1px solid #F3F4F6}
  121.         @media(max-width:480px){.job-card-section{padding:16px 18px}}
  122.         .job-card-section-title{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:700;color:#1E1B2E;margin:0 0 12px;letter-spacing:-0.01em;scroll-margin-top:80px}
  123.         .job-card-section-icon{width:32px;height:32px;border-radius:10px;background:#F5F3FF;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--theme-color,#6C3AED)}
  124.         .job-card-section-icon svg{width:16px;height:16px}
  125.         .job-card-section-text{font-size:14px;line-height:1.7;color:#374151;margin:0}
  127.         /* Footer card */
  128.         .job-card-actions{display:flex;align-items:center;gap:8px;padding:16px 24px;border-top:1px solid #F3F4F6;background:#FAFAFA}
  129.         @media(max-width:480px){.job-card-actions{padding:12px 16px;flex-wrap:wrap}}
  130.         .job-action-btn{display:flex;align-items:center;justify-content:center;gap:6px;padding:10px 16px;border-radius:10px;background:#fff;border:1px solid #E5E7EB;font-size:13px;font-weight:600;color:#374151;cursor:pointer;text-decoration:none;transition:border-color .15s,transform .15s;font-family:inherit}
  131.         .job-action-btn:hover{border-color:var(--theme-color,#6C3AED);color:var(--theme-color,#6C3AED);transform:translateY(-1px)}
  132.         .job-action-btn svg{width:14px;height:14px}
  133.         .job-action-btn-primary{background:var(--theme-color,#6C3AED);color:#fff;border-color:var(--theme-color,#6C3AED);flex:1;justify-content:center}
  134.         .job-action-btn-primary:hover{background:#5B21B6;color:#fff;border-color:#5B21B6}
  135.         .job-action-btn-locked{background:#fff !important;color:var(--theme-color,#6C3AED) !important;border:1.5px dashed rgba(108,58,237,.35) !important;position:relative}
  136.         .job-action-btn-locked:hover{background:#F5F3FF !important;border-color:var(--theme-color,#6C3AED) !important;color:var(--theme-color,#6C3AED) !important}
  138.         /* ─── Bouton like (état + animation) ─── */
  139.         .job-action-like{position:relative;overflow:hidden}
  140.         .job-action-like .job-action-like-icon{transition:transform .25s ease,fill .2s ease}
  141.         .job-action-like.is-liked{background:#16A34A !important;border-color:#16A34A !important;color:#fff !important}
  142.         .job-action-like.is-liked:hover{background:#15803D !important;border-color:#15803D !important;color:#fff !important}
  143.         .job-action-like.is-liked .job-action-like-icon{fill:#fff;transform:scale(1.05)}
  144.         .job-action-like.is-loading{opacity:.65;pointer-events:none}
  145.         .job-action-like.is-loading .job-action-like-icon{animation:likeSpin .8s linear infinite}
  146.         @keyframes likeSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
  147.         .job-action-like.like-pulse{animation:likePulse .42s cubic-bezier(.34,1.56,.64,1)}
  148.         @keyframes likePulse{0%{transform:scale(1)}45%{transform:scale(1.08)}100%{transform:scale(1)}}
  150.         /* Card lock (non-connectés) */
  151.         .job-card-locked{padding:24px;background:linear-gradient(135deg,#F5F3FF,#FAFAFA);border-top:1px solid #F3F4F6;text-align:center}
  152.         .job-card-locked-icon{width:48px;height:48px;border-radius:14px;background:#fff;display:inline-flex;align-items:center;justify-content:center;margin-bottom:12px;box-shadow:0 4px 12px rgba(108,58,237,.15);color:var(--theme-color,#6C3AED)}
  153.         .job-card-locked-title{font-size:16px;font-weight:700;color:#1E1B2E;margin:0 0 4px}
  154.         .job-card-locked-text{font-size:13px;color:#6B7280;margin:0 0 14px;line-height:1.5}
  155.         .job-card-locked-buttons{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
  156.         .job-card-locked-btn{display:inline-flex;align-items:center;gap:5px;padding:10px 18px;border-radius:10px;font-size:13px;font-weight:600;text-decoration:none;cursor:pointer;transition:all .15s;font-family:inherit;border:none}
  157.         .job-card-locked-btn-primary{background:var(--theme-color,#6C3AED);color:#fff}
  158.         .job-card-locked-btn-primary:hover{background:#5B21B6;color:#fff;transform:translateY(-1px)}
  159.         .job-card-locked-btn-secondary{background:#fff;color:#1E1B2E;border:1.5px solid #E5E7EB}
  160.         .job-card-locked-btn-secondary:hover{border-color:var(--theme-color,#6C3AED);color:var(--theme-color,#6C3AED)}
  162.         /* ─── Card promo (blanche, logo centré, bullet list, boutons empilés) ─── */
  163.         .promo-card{background:#fff;border-radius:16px;padding:32px 28px;text-align:center;box-shadow:0 4px 20px 0 rgba(0,0,0,0.06)}
  164.         @media(max-width:480px){.promo-card{padding:24px 20px}}
  165.         .promo-card-logo{width:80px !important;height:80px !important;border-radius:20px !important;display:inline-flex !important;align-items:center !important;justify-content:center !important;margin:0 auto 18px !important;overflow:hidden !important;padding:14px !important;box-sizing:border-box !important;box-shadow:0 4px 16px rgba(108,58,237,.12)}
  166.         .promo-card-logo img{width:100% !important;height:100% !important;object-fit:contain !important;display:block !important;border-radius:0 !important;border:0 !important;box-shadow:none !important;background:transparent !important}
  167.         .promo-card-title{font-size:22px;font-weight:800;color:#1E1B2E;margin:0 0 10px;line-height:1.2;letter-spacing:-0.01em}
  168.         @media(min-width:768px){.promo-card-title{font-size:26px}}
  169.         .promo-card-text{font-size:14px;line-height:1.6;color:#6B7280;margin:0 0 22px;max-width:420px;margin-left:auto;margin-right:auto}
  171.         .promo-card-bullets{list-style:none;padding:0;margin:0 0 24px;text-align:left;max-width:380px;margin-left:auto;margin-right:auto;display:flex;flex-direction:column;gap:10px}
  172.         .promo-card-bullet{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:#374151;line-height:1.5}
  173.         .promo-card-bullet-icon{width:22px;height:22px;border-radius:50%;background:#F5F3FF;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}
  174.         .promo-card-bullet-icon svg{width:12px;height:12px;color:var(--theme-color,#6C3AED)}
  175.         .promo-card-bullet-text{flex:1}
  176.         .promo-card-bullet-text strong{color:#1E1B2E;font-weight:700}
  178.         .promo-card-buttons{display:flex;flex-direction:column;gap:10px;max-width:340px;margin-left:auto;margin-right:auto}
  179.         .promo-card-btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 18px;border-radius:10px;font-size:14px;font-weight:600;text-decoration:none;cursor:pointer;font-family:inherit;transition:transform .15s,background .15s,border-color .15s;width:100%;border:none}
  180.         .promo-card-btn:hover{transform:translateY(-1px)}
  181.         .promo-card-btn svg{width:16px;height:16px;flex-shrink:0}
  182.         .promo-card-btn-pastel{background:#F5F3FF;color:var(--theme-color,#6C3AED)}
  183.         .promo-card-btn-pastel:hover{background:#EDE9FE;color:var(--theme-color,#6C3AED)}
  184.         .promo-card-btn-outline{background:#fff;color:var(--theme-color,#6C3AED);border:1.5px solid #EDE9FE}
  185.         .promo-card-btn-outline:hover{background:#FAFAFA;border-color:#DDD6FE;color:var(--theme-color,#6C3AED)}
  187.         /* Hint clavier sous la pile */
  188.         .job-keyboard-hint{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:14px;font-size:11px;color:#9CA3AF}
  189.         .job-keyboard-hint kbd{padding:2px 6px;background:#F3F4F6;border-radius:4px;font-size:10px;font-family:monospace}
  190.         .job-keyboard-hint-sep{color:#D1D5DB}
  191.         @media(max-width:640px){.job-keyboard-hint{display:none}}
  193.         /* ─── Section "Toutes les offres similaires" en feed (en bas) ─── */
  194.         .similar-section-title{font-size:11px;font-weight:700;color:#9CA3AF;text-transform:uppercase;letter-spacing:.08em;margin:32px 0 12px;padding-left:4px}
  195.         .similar-card{background:#fff;border-radius:14px;padding:14px;box-shadow:0 0 16px 0 rgba(0,0,0,0.04);margin-bottom:10px;display:flex;align-items:center;gap:14px;text-decoration:none;color:inherit;transition:transform .15s,box-shadow .2s}
  196.         .similar-card:hover{transform:translateY(-1px);box-shadow:0 4px 20px rgba(108,58,237,.1);color:inherit}
  197.         .similar-card-logo{width:50px;height:50px;border-radius:12px;background:linear-gradient(135deg,#EDE9FE,#DDD6FE);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:20px;color:var(--theme-color,#6C3AED);flex-shrink:0;overflow:hidden}
  198.         .similar-card-logo img{width:100%;height:100%;object-fit:cover;border-radius:8px}
  199.         .similar-card-logo svg{width:24px;height:24px;opacity:.85}
  200.         .similar-card-info{flex:1;min-width:0}
  201.         .similar-card-title{font-size:14px;font-weight:700;color:#1E1B2E;line-height:1.3;margin:0 0 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  202.         .similar-card-meta{font-size:12px;color:#6B7280;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  203.         .similar-card-arrow{flex-shrink:0;color:#9CA3AF;transition:color .15s}
  204.         .similar-card:hover .similar-card-arrow{color:var(--theme-color,#6C3AED)}
  206.         /* Auth modal */
  207.         .auth-modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:9998;opacity:0;pointer-events:none;transition:opacity .25s ease}
  208.         .auth-modal-backdrop.visible{opacity:1;pointer-events:auto}
  209.         .auth-modal{position:fixed;left:50%;top:50%;transform:translate(-50%,-45%) scale(.95);background:#fff;border-radius:24px;width:calc(100% - 32px);max-width:440px;max-height:90vh;overflow-y:auto;z-index:9999;box-shadow:0 24px 64px rgba(0,0,0,.3);opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s ease}
  210.         .auth-modal.visible{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}
  211.         .auth-modal-header{padding:24px 24px 8px;text-align:center;position:relative}
  212.         .auth-modal-close{position:absolute;top:16px;right:16px;width:36px;height:36px;border-radius:50%;background:#F3F4F6;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#6B7280}
  213.         .auth-modal-close:hover{background:#E5E7EB}
  214.         .auth-modal-icon{width:64px;height:64px;border-radius:20px;background:#F5F3FF;display:inline-flex;align-items:center;justify-content:center;margin-bottom:16px;color:var(--theme-color,#6C3AED)}
  215.         .auth-modal-title{font-size:22px;font-weight:800;color:#1E1B2E;margin:0 0 8px}
  216.         .auth-modal-subtitle{font-size:14px;color:#6B7280;margin:0;line-height:1.5}
  217.         .auth-modal-body{padding:8px 24px 24px}
  218.         .auth-option{display:flex;align-items:center;gap:14px;padding:16px;border:2px solid #F3F4F6;border-radius:16px;text-decoration:none;color:inherit;transition:all .2s;margin-bottom:10px;background:#fff;cursor:pointer;width:100%;font-family:inherit;text-align:left}
  219.         .auth-option:hover{border-color:rgba(108,58,237,.3);background:#FAFAFA;transform:translateY(-1px);color:inherit}
  220.         .auth-option-icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
  221.         .auth-option-icon.ios{background:#000;color:#fff}
  222.         .auth-option-icon.android{background:#34A853;color:#fff}
  223.         .auth-option-icon.web{background:#F5F3FF;color:var(--theme-color,#6C3AED)}
  224.         .auth-option-text{flex:1;min-width:0}
  225.         .auth-option-title{font-size:15px;font-weight:700;color:#1E1B2E;margin:0 0 2px}
  226.         .auth-option-desc{font-size:13px;color:#6B7280;margin:0}
  227.         .auth-option-arrow{color:#9CA3AF;flex-shrink:0}
  228.         .auth-divider{display:flex;align-items:center;gap:12px;margin:16px 0;font-size:12px;color:#9CA3AF;text-transform:uppercase;letter-spacing:.08em;font-weight:600}
  229.         .auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:#E5E7EB}
  230.     </style>
  231. {% endblock css %}
  233. {% block body %}
  235.     {# ═══ Layout 1 colonne centrée (les filtres sont dans la sidebar Sociala gauche) ═══ #}
  236.     <div class="job-layout">
  238.         <main class="job-main">
  240.             {# Variables pile #}
  241.             {% set hasNeighbors = similarJobs is defined and similarJobs is not empty %}
  242.             {% if hasNeighbors %}
  243.                 {% set prevSlug = (similarJobs|last).slug %}
  244.                 {% set nextSlug = (similarJobs|first).slug %}
  245.                 {% set totalOffers = similarJobs|length + 1 %}
  246.             {% endif %}
  248.             {# Bandeau d'info "Vous pouvez swiper" #}
  249.             {% if hasNeighbors %}
  250.                 <div class="swipe-banner">
  251.                     <div class="swipe-banner-info">
  252.                         <span class="swipe-banner-icon">
  253.                             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="5 12 19 12"/><polyline points="5 12 11 6"/><polyline points="5 12 11 18"/><polyline points="19 12 13 6"/><polyline points="19 12 13 18"/></svg>
  254.                         </span>
  255.                         <span class="swipe-banner-text">
  256.                             <strong>{{ similarJobs|length }}</strong> {{ 'job.show.bannerSimilar'|trans }}
  257.                         </span>
  258.                     </div>
  259.                     <span class="swipe-banner-counter" id="bannerCounter">1 / {{ totalOffers }}</span>
  260.                 </div>
  261.             {% endif %}
  263.             {# Boutons navigation prev/next (URL change) #}
  264.             {% if hasNeighbors %}
  265.                 <div class="job-nav">
  266.                     <a href="{% if app.request.locale == 'en' %}{{ path('cvs_application_job_show',{'slug':prevSlug}) }}{% else %}{{ path('locale_cvs_application_job_show',{'_locale':app.request.locale,'slug':prevSlug}) }}{% endif %}"
  267.                        class="job-nav-btn job-nav-btn-prev"
  268.                        id="jobNavPrev"
  269.                        data-slug="{{ prevSlug }}">
  270.                         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="15 18 9 12 15 6"/></svg>
  271.                         <span>{{ 'job.show.previousOffer'|trans }}</span>
  272.                     </a>
  273.                     <a href="{% if app.request.locale == 'en' %}{{ path('cvs_application_job_show',{'slug':nextSlug}) }}{% else %}{{ path('locale_cvs_application_job_show',{'_locale':app.request.locale,'slug':nextSlug}) }}{% endif %}"
  274.                        class="job-nav-btn job-nav-btn-next"
  275.                        id="jobNavNext"
  276.                        data-slug="{{ nextSlug }}">
  277.                         <span>{{ 'job.show.nextOffer'|trans }}</span>
  278.                         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="9 18 15 12 9 6"/></svg>
  279.                     </a>
  280.                 </div>
  281.             {% endif %}
  283.             {# ═══ PILE de cards ═══ #}
  284.             <div class="stack-wrap" id="stackWrap">
  285.                 {# Cards fantômes derrière #}
  286.                 {% if hasNeighbors %}
  287.                     <div class="stack-ghost stack-ghost-2"></div>
  288.                     <div class="stack-ghost stack-ghost-1"></div>
  289.                 {% endif %}
  291.                 {# Card centrale (contenu remplacé en AJAX au swipe) #}
  292.                 <div class="job-card-main {% if hasNeighbors %}intro-pulse{% endif %}" id="jobCardMain" data-current-slug="{{ job.slug }}">
  294.                     <div class="swipe-indicator swipe-indicator-prev" id="swipeIndicatorPrev">{{ 'job.show.previousOffer'|trans }}</div>
  295.                     <div class="swipe-indicator swipe-indicator-next" id="swipeIndicatorNext">{{ 'job.show.nextOffer'|trans }}</div>
  297.                     <div id="jobCardContent">
  298.                         {% include "application/whileresume/application/jobs/_card-content.html.twig" %}
  299.                     </div>
  301.                 </div>
  302.             </div>
  304.             {# Hint clavier + swipe #}
  305.             {% if hasNeighbors %}
  306.                 <div class="job-keyboard-hint">
  307.                     {{ 'job.show.swipeHintFull'|trans|raw }}
  308.                 </div>
  309.             {% endif %}
  311.             {# ═══ Liste des offres similaires en bas ═══ #}
  312.             {% if hasNeighbors %}
  313.                 <h4 class="similar-section-title">{{ 'job.show.similarOffers'|trans }} · {{ similarJobs|length }}</h4>
  314.                 {% for sj in similarJobs %}
  315.                     <a href="{% if app.request.locale == 'en' %}{{ path('cvs_application_job_show',{'slug':sj.slug}) }}{% else %}{{ path('locale_cvs_application_job_show',{'_locale':app.request.locale,'slug':sj.slug}) }}{% endif %}"
  316.                        class="similar-card">
  317.                         <div class="similar-card-logo">
  318.                             {% if sj.enterprise and sj.enterprise.image and sj.enterprise.image.name %}
  319.                                 <img src="{{ vich_uploader_asset(sj.enterprise, 'imageFile') }}" alt="">
  320.                             {% else %}
  321.                                 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3 21h18"/><path d="M5 21V7l8-4v18"/><path d="M19 21V11l-6-4"/><path d="M9 9h.01"/><path d="M9 13h.01"/><path d="M9 17h.01"/></svg>
  322.                             {% endif %}
  323.                         </div>
  324.                         <div class="similar-card-info">
  325.                             <div class="similar-card-title">{{ sj.jobTitle }}</div>
  326.                             <div class="similar-card-meta">
  327.                                 {{ sj.companyName }}{% if sj.city is not empty %} · {{ sj.city }}{% endif %}{% if sj.employmentType is not empty %} · {{ sj.employmentType }}{% endif %}
  328.                             </div>
  329.                         </div>
  330.                         <span class="similar-card-arrow">
  331.                             <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
  332.                         </span>
  333.                     </a>
  334.                 {% endfor %}
  335.             {% endif %}
  337.         </main>
  339.     </div>
  341.     {# Auth modal #}
  342.     {% if not isCandidateUser %}
  343.         <div class="auth-modal-backdrop" id="authModalBackdrop"></div>
  344.         <div class="auth-modal" id="authModal" role="dialog" aria-modal="true">
  345.             <div class="auth-modal-header">
  346.                 <button class="auth-modal-close" id="authModalClose" aria-label="Close">
  347.                     <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
  348.                 </button>
  349.                 <div class="auth-modal-icon">
  350.                     <svg width="32" height="32" viewBox="0 0 24 24" fill="currentColor"><path d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z"/></svg>
  351.                 </div>
  352.                 <h3 class="auth-modal-title">{{ 'job.show.authModalTitle'|trans }}</h3>
  353.                 <p class="auth-modal-subtitle">{{ 'job.show.authModalSubtitle'|trans }}</p>
  354.             </div>
  355.             <div class="auth-modal-body">
  356.                 <a href="{{ ios }}" target="_blank" rel="noopener" class="auth-option">
  357.                     <div class="auth-option-icon ios">
  358.                         <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor"><path d="M17.05 20.28c-.98.95-2.05.8-3.08.35-1.09-.46-2.09-.48-3.24 0-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09l.01-.01zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z"/></svg>
  359.                     </div>
  360.                     <div class="auth-option-text">
  361.                         <p class="auth-option-title">{{ 'job.show.authIosTitle'|trans }}</p>
  362.                         <p class="auth-option-desc">{{ 'job.show.authIosDesc'|trans }}</p>
  363.                     </div>
  364.                     <svg class="auth-option-arrow" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
  365.                 </a>
  366.                 <a href="{{ android }}" target="_blank" rel="noopener" class="auth-option">
  367.                     <div class="auth-option-icon android">
  368.                         <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor"><path d="M3 20.5V3.5c0-.41.34-.75.75-.75.18 0 .35.07.49.18l13.42 8.5a.75.75 0 010 1.27L4.24 21.07a.75.75 0 01-1.24-.57z"/></svg>
  369.                     </div>
  370.                     <div class="auth-option-text">
  371.                         <p class="auth-option-title">{{ 'job.show.authAndroidTitle'|trans }}</p>
  372.                         <p class="auth-option-desc">{{ 'job.show.authAndroidDesc'|trans }}</p>
  373.                     </div>
  374.                     <svg class="auth-option-arrow" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
  375.                 </a>
  376.                 <div class="auth-divider">{{ 'job.show.orDivider'|trans }}</div>
  377.                 <a href="{% if app.request.locale == 'en' %}{{ path('app_login') }}{% else %}{{ path('locale_app_login',{'_locale':app.request.locale}) }}{% endif %}" class="auth-option">
  378.                     <div class="auth-option-icon web">
  379.                         <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 3h4a2 2 0 012 2v14a2 2 0 01-2 2h-4"/><polyline points="10 17 15 12 10 7"/><line x1="15" y1="12" x2="3" y2="12"/></svg>
  380.                     </div>
  381.                     <div class="auth-option-text">
  382.                         <p class="auth-option-title">{{ 'job.show.authWebTitle'|trans }}</p>
  383.                         <p class="auth-option-desc">{{ 'job.show.authWebDesc'|trans }}</p>
  384.                     </div>
  385.                     <svg class="auth-option-arrow" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
  386.                 </a>
  387.             </div>
  388.         </div>
  389.     {% endif %}
  391. {% endblock body %}
  394. {% block footerjs %}
  395.     {# Re-déclaration variables (pas accessible cross-block) #}
  396.     {% set hasNeighbors = similarJobs is defined and similarJobs is not empty %}
  398.     <script>
  399.         (function(){
  400.             'use strict';
  401.             try {
  402.                 console.log('[whr-job] init script');
  404.                 var IS_AUTHENTICATED = {{ app.user is not null ? 'true' : 'false' }};
  405.                 var IS_CANDIDATE = {{ (app.user is not null and app.user.candidate is not null) ? 'true' : 'false' }};
  406.                 var LOCALE = '{{ app.request.locale }}';
  407.                 var IOS_URL = '{{ ios|default('')|escape('js') }}';
  408.                 var ANDROID_URL = '{{ android|default('')|escape('js') }}';
  409.                 // Fallbacks vers la home si les liens stores ne sont pas configurés
  410.                 if(!IOS_URL) IOS_URL = '{{ ios }}';
  411.                 if(!ANDROID_URL) ANDROID_URL = '{{ android }}';
  413.                 {% if app.request.locale == "fr" %}
  414.                 var SEARCH_API_URL = '{{ path("locale_cvs_application_jobs_api_search",{"_locale":app.request.locale}) }}';
  415.                 var AJAX_SHOW_URL_TEMPLATE = '{{ path("locale_cvs_application_job_ajax",{"_locale":app.request.locale,"slug":"__SLUG__"}) }}';
  416.                 var REGISTER_URL = '{{ path("whileresume_resume_fr") }}';
  417.                 var LOGIN_URL = '{{ path("locale_app_login",{"_locale":app.request.locale}) }}';
  418.                 {% else %}
  419.                 var SEARCH_API_URL = '{{ path("cvs_application_jobs_api_search",{"_locale":app.request.locale}) }}';
  420.                 var AJAX_SHOW_URL_TEMPLATE = '{{ path("cvs_application_job_ajax",{"_locale":app.request.locale,"slug":"__SLUG__"}) }}';
  421.                 var REGISTER_URL = '{{ path("whileresume_resume_en") }}';
  422.                 var LOGIN_URL = '{{ path("app_login") }}';
  423.                 {% endif %}
  425.                 // Liste cyclique des slugs (offre courante + similaires)
  426.                 var SLUGS = [
  427.                     '{{ job.slug }}'
  428.                     {% if hasNeighbors %}{% for sj in similarJobs %},
  429.                     '{{ sj.slug }}'{% endfor %}{% endif %}
  430.                 ];
  431.                 var TOTAL = SLUGS.length;
  432.                 var currentIndex = 0;
  433.                 var swipeCount = 0;        // nombre de cards (vraies offres) chargées via swipe
  434.                 var PROMO_EVERY_N_SWIPES = 3; // afficher la promo toutes les N navigations (cyclique)
  436.                 // ═══ Auth modal ═══
  437.                 var authModal = document.getElementById('authModal');
  438.                 var authBackdrop = document.getElementById('authModalBackdrop');
  439.                 var authClose = document.getElementById('authModalClose');
  441.                 function openAuthModal(){
  442.                     if(!authModal) return;
  443.                     authModal.classList.add('visible');
  444.                     authBackdrop.classList.add('visible');
  445.                     document.body.style.overflow = 'hidden';
  446.                 }
  447.                 function closeAuthModal(){
  448.                     if(!authModal) return;
  449.                     authModal.classList.remove('visible');
  450.                     authBackdrop.classList.remove('visible');
  451.                     document.body.style.overflow = '';
  452.                 }
  453.                 if(authClose) authClose.addEventListener('click', closeAuthModal);
  454.                 if(authBackdrop) authBackdrop.addEventListener('click', closeAuthModal);
  456.                 // Labels du bouton like (utilisés par applyLikeState et buildJobHtml)
  457.                 var LIKE_LABEL_DEFAULT = {{ 'job.show.imInterested'|trans|json_encode|raw }};
  458.                 var LIKE_LABEL_LIKED  = {{ 'job.show.interested'|trans|json_encode|raw }};
  460.                 function applyLikeState(btn, liked){
  461.                     if(!btn) return;
  462.                     btn.dataset.liked = liked ? '1' : '0';
  463.                     btn.classList.toggle('is-liked', liked);
  465.                     var label = btn.querySelector('.job-action-like-label');
  466.                     if(label){
  467.                         label.textContent = liked ? LIKE_LABEL_LIKED : LIKE_LABEL_DEFAULT;
  468.                     }
  470.                     // Animation pulse au like (pas à l'unlike)
  471.                     if(liked){
  472.                         btn.classList.remove('like-pulse');
  473.                         // Force reflow pour relancer l'animation
  474.                         void btn.offsetWidth;
  475.                         btn.classList.add('like-pulse');
  476.                     }
  477.                 }
  479.                 function bindLikeHandlers(){
  480.                     var apply = document.getElementById('sideCtaApply');
  481.                     var save = document.getElementById('sideCtaSave');
  482.                     var cardLike = document.getElementById('cardLikeBtn');
  484.                     // Boutons sidebar (sideCtaApply, sideCtaSave) : modal d'auth si non-candidat
  485.                     [apply, save].forEach(function(el){
  486.                         if(!el) return;
  487.                         if(el.dataset.likeBound) return;
  488.                         el.dataset.likeBound = '1';
  489.                         el.addEventListener('click', function(e){
  490.                             if(!IS_CANDIDATE){
  491.                                 e.preventDefault();
  492.                                 openAuthModal();
  493.                             }
  494.                         });
  495.                     });
  497.                     // Bouton card : toggle AJAX (like / unlike)
  498.                     if(cardLike && !cardLike.dataset.likeBound){
  499.                         cardLike.dataset.likeBound = '1';
  500.                         cardLike.addEventListener('click', function(e){
  501.                             // Bouton "locked" → modal d'auth
  502.                             if(cardLike.dataset.locked === '1' || !IS_CANDIDATE){
  503.                                 e.preventDefault();
  504.                                 openAuthModal();
  505.                                 return;
  506.                             }
  508.                             // Pas de navigation : on gère en AJAX
  509.                             e.preventDefault();
  511.                             // Anti double-clic
  512.                             if(cardLike.dataset.likeBusy === '1') return;
  513.                             cardLike.dataset.likeBusy = '1';
  514.                             cardLike.classList.add('is-loading');
  516.                             var url = cardLike.getAttribute('href');
  518.                             fetch(url, {
  519.                                 method: 'GET',
  520.                                 headers: {
  521.                                     'X-Requested-With': 'XMLHttpRequest',
  522.                                     'Accept': 'application/json'
  523.                                 },
  524.                                 credentials: 'same-origin'
  525.                             })
  526.                                 .then(function(r){
  527.                                     if(r.status === 401){
  528.                                         openAuthModal();
  529.                                         return null;
  530.                                     }
  531.                                     if(!r.ok) throw new Error('HTTP ' + r.status);
  532.                                     return r.json();
  533.                                 })
  534.                                 .then(function(data){
  535.                                     if(!data || !data.success) return;
  536.                                     applyLikeState(cardLike, !!data.liked);
  538.                                     // Synchronise le cache des voisins prefetchées :
  539.                                     // sans ça, un swipe vers cette card ré-utiliserait
  540.                                     // l'ancien isLiked figé lors du prefetch initial.
  541.                                     var slugChanged = cardLike.dataset.jobSlug || jobCard.dataset.currentSlug;
  542.                                     if(slugChanged && cardCache[slugChanged]){
  543.                                         cardCache[slugChanged].isLiked = !!data.liked;
  544.                                     }
  545.                                 })
  546.                                 .catch(function(err){
  547.                                     console.error('Like AJAX error', err);
  548.                                 })
  549.                                 .then(function(){
  550.                                     cardLike.dataset.likeBusy = '0';
  551.                                     cardLike.classList.remove('is-loading');
  552.                                 });
  553.                         });
  554.                     }
  555.                 }
  556.                 bindLikeHandlers();
  558.                 // ═══ Pile : navigation par AJAX (swipe) vs URL (boutons) ═══
  559.                 var jobCard = document.getElementById('jobCardMain');
  560.                 var jobCardContent = document.getElementById('jobCardContent');
  561.                 var indicatorPrev = document.getElementById('swipeIndicatorPrev');
  562.                 var indicatorNext = document.getElementById('swipeIndicatorNext');
  563.                 var bannerCounter = document.getElementById('bannerCounter');
  565.                 function getSlugAt(offset){
  566.                     var idx = (currentIndex + offset + TOTAL) % TOTAL;
  567.                     return SLUGS[idx];
  568.                 }
  570.                 function updateCounter(){
  571.                     if(bannerCounter) bannerCounter.textContent = (currentIndex + 1) + ' / ' + TOTAL;
  572.                 }
  574.                 function renderSkeleton(){
  575.                     return '' +
  576.                         '<div class="skeleton">' +
  577.                         '<div class="skeleton-pills">' +
  578.                         '<div class="skeleton-pill"></div>' +
  579.                         '<div class="skeleton-pill s-w90"></div>' +
  580.                         '</div>' +
  581.                         '<div class="skeleton-line skeleton-title"></div>' +
  582.                         '<div class="skeleton-line skeleton-title-2"></div>' +
  583.                         '<div class="skeleton-meta">' +
  584.                         '<div class="skeleton-meta-item"></div>' +
  585.                         '<div class="skeleton-meta-item"></div>' +
  586.                         '<div class="skeleton-meta-item" style="width:100px;"></div>' +
  587.                         '</div>' +
  588.                         '</div>' +
  589.                         '<div class="skeleton-section">' +
  590.                         '<div class="skeleton-section-head">' +
  591.                         '<div class="skeleton-section-icon"></div>' +
  592.                         '<div class="skeleton-line skeleton-section-title"></div>' +
  593.                         '</div>' +
  594.                         '<div class="skeleton-line skeleton-line-text skeleton-w-full"></div>' +
  595.                         '<div class="skeleton-line skeleton-line-text skeleton-w-90"></div>' +
  596.                         '<div class="skeleton-line skeleton-line-text skeleton-w-full"></div>' +
  597.                         '<div class="skeleton-line skeleton-line-text skeleton-w-75"></div>' +
  598.                         '<div class="skeleton-line skeleton-line-text skeleton-w-60"></div>' +
  599.                         '</div>' +
  600.                         '<div class="skeleton-section">' +
  601.                         '<div class="skeleton-section-head">' +
  602.                         '<div class="skeleton-section-icon"></div>' +
  603.                         '<div class="skeleton-line skeleton-section-title"></div>' +
  604.                         '</div>' +
  605.                         '<div class="skeleton-line skeleton-line-text skeleton-w-full"></div>' +
  606.                         '<div class="skeleton-line skeleton-line-text skeleton-w-90"></div>' +
  607.                         '<div class="skeleton-line skeleton-line-text skeleton-w-75"></div>' +
  608.                         '</div>';
  609.                 }
  611.                 function renderPromoCard(){
  612.                     var checkSvg = '<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>';
  614.                     return '' +
  615.                         '<div class="promo-card">' +
  616.                         '<div class="promo-card-logo">' +
  617.                         '<img src="/uploads/favicon.png" alt="Whileresume">' +
  618.                         '</div>' +
  619.                         '<h2 class="promo-card-title">{{ 'job.show.promoTitle'|trans|escape('js') }}</h2>' +
  620.                         '<p class="promo-card-text">{{ 'job.show.promoText'|trans|escape('js') }}</p>' +
  621.                         '<ul class="promo-card-bullets">' +
  622.                         '<li class="promo-card-bullet">' +
  623.                         '<span class="promo-card-bullet-icon">' + checkSvg + '</span>' +
  624.                         '<span class="promo-card-bullet-text">{{ 'job.show.promoBullet1'|trans|escape('js') }}</span>' +
  625.                         '</li>' +
  626.                         '<li class="promo-card-bullet">' +
  627.                         '<span class="promo-card-bullet-icon">' + checkSvg + '</span>' +
  628.                         '<span class="promo-card-bullet-text">{{ 'job.show.promoBullet2'|trans|escape('js') }}</span>' +
  629.                         '</li>' +
  630.                         '<li class="promo-card-bullet">' +
  631.                         '<span class="promo-card-bullet-icon">' + checkSvg + '</span>' +
  632.                         '<span class="promo-card-bullet-text">{{ 'job.show.promoBullet3'|trans|escape('js') }}</span>' +
  633.                         '</li>' +
  634.                         '</ul>' +
  635.                         '<div class="promo-card-buttons">' +
  636.                         '<a href="' + REGISTER_URL + '" class="promo-card-btn promo-card-btn-pastel">' +
  637.                         '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M16 21v-2a4 4 0 00-4-4H5a4 4 0 00-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>' +
  638.                         '{{ 'job.show.promoBtnSignup'|trans|escape('js') }}' +
  639.                         '</a>' +
  640.                         '<a href="' + LOGIN_URL + '" class="promo-card-btn promo-card-btn-outline">' +
  641.                         '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 3h4a2 2 0 012 2v14a2 2 0 01-2 2h-4"/><polyline points="10 17 15 12 10 7"/><line x1="15" y1="12" x2="3" y2="12"/></svg>' +
  642.                         '{{ 'job.show.promoBtnSignin'|trans|escape('js') }}' +
  643.                         '</a>' +
  644.                         '<a href="' + IOS_URL + '" target="_blank" rel="noopener" class="promo-card-btn promo-card-btn-pastel">' +
  645.                         '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M17.05 20.28c-.98.95-2.05.8-3.08.35-1.09-.46-2.09-.48-3.24 0-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09l.01-.01zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z"/></svg>' +
  646.                         '{{ 'job.show.promoBtnIos'|trans|escape('js') }}' +
  647.                         '</a>' +
  648.                         '<a href="' + ANDROID_URL + '" target="_blank" rel="noopener" class="promo-card-btn promo-card-btn-pastel">' +
  649.                         '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M3 20.5V3.5c0-.41.34-.75.75-.75.18 0 .35.07.49.18l13.42 8.5a.75.75 0 010 1.27L4.24 21.07a.75.75 0 01-1.24-.57z"/></svg>' +
  650.                         '{{ 'job.show.promoBtnAndroid'|trans|escape('js') }}' +
  651.                         '</a>' +
  652.                         '</div>' +
  653.                         '</div>';
  654.                 }
  656.                 function buildJobHtml(data){
  657.                     if(!data) return '';
  658.                     var meta = '';
  659.                     // Pilule "Offre active" en premier dans les meta
  660.                     meta += '<span class="job-card-meta-item job-card-meta-active"><span class="job-card-active-dot"></span>{{ 'job.show.activeOffer'|trans|escape('js') }}</span>';
  661.                     if(data.verification === 0 || data.verification === false){
  662.                         meta += '<span class="job-card-meta-item job-card-meta-external">⚡ {{ 'job.show.externalSource'|trans|escape('js') }}</span>';
  663.                     }
  664.                     if(data.city){
  665.                         meta += '<span class="job-card-meta-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"/><circle cx="12" cy="10" r="3"/></svg>' + escapeHtml(data.city) + (data.country ? ', ' + escapeHtml(data.country) : '') + '</span>';
  666.                     }
  667.                     if(data.employmentType){
  668.                         meta += '<span class="job-card-meta-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="7" width="20" height="14" rx="2"/><path d="M16 7V5a4 4 0 00-8 0v2"/></svg>' + escapeHtml(data.employmentType) + '</span>';
  669.                     }
  670.                     if(data.remoteWork){
  671.                         meta += '<span class="job-card-meta-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/></svg>' + escapeHtml(data.remoteWork) + '</span>';
  672.                     }
  673.                     if(data.salaryPeriod){
  674.                         meta += '<span class="job-card-meta-item job-card-meta-salary"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 000 7h5a3.5 3.5 0 010 7H6"/></svg>' + data.salaryMin + '–' + data.salaryMax + ' ' + (data.devise || '') + '/' + escapeHtml(data.salaryPeriod) + '</span>';
  675.                     }
  677.                     var html = '<div class="job-card-head">' +
  678.                         '<h1 class="job-card-title">' + escapeHtml(data.title) + '</h1>' +
  679.                         '<div class="job-card-meta">' + meta + '</div>' +
  680.                         '</div>';
  682.                     if(data.jobSummary){
  683.                         html += '<div class="job-card-section" id="section-presentation">' +
  684.                             '<div class="job-card-section-title"><span class="job-card-section-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14 2 14 8 20 8"/></svg></span><span>{{ 'job.show.sectionPresentation'|trans|escape('js') }}</span></div>' +
  685.                             '<p class="job-card-section-text">' + nl2brEscape(data.jobSummary) + '</p>' +
  686.                             '</div>';
  687.                     }
  689.                     if(data.locked){
  690.                         html += '<div class="job-card-locked">' +
  691.                             '<div class="job-card-locked-icon"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0110 0v4"/></svg></div>' +
  692.                             '<div class="job-card-locked-title">{{ 'job.show.unlockTitle'|trans|escape('js') }}</div>' +
  693.                             '<div class="job-card-locked-text">{{ 'job.show.unlockText'|trans|escape('js') }}</div>' +
  694.                             '<div class="job-card-locked-buttons">' +
  695.                             '<a href="' + REGISTER_URL + '" class="job-card-locked-btn job-card-locked-btn-primary">{{ 'job.show.createProfileFree'|trans|escape('js') }}</a>' +
  696.                             '</div>' +
  697.                             '</div>';
  698.                     } else {
  699.                         if(data.keyResponsabilities){
  700.                             html += '<div class="job-card-section"><div class="job-card-section-title"><span class="job-card-section-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 11 12 14 22 4"/><path d="M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11"/></svg></span><span>{{ 'job.show.sectionMissions'|trans|escape('js') }}</span></div><p class="job-card-section-text">' + nl2brEscape(data.keyResponsabilities) + '</p></div>';
  701.                         }
  702.                         if(data.requirements){
  703.                             html += '<div class="job-card-section"><div class="job-card-section-title"><span class="job-card-section-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/><circle cx="12" cy="7" r="4"/></svg></span><span>{{ 'job.show.sectionProfile'|trans|escape('js') }}</span></div><p class="job-card-section-text">' + nl2brEscape(data.requirements) + '</p></div>';
  704.                         }
  705.                         if(data.benefits){
  706.                             html += '<div class="job-card-section"><div class="job-card-section-title"><span class="job-card-section-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg></span><span>{{ 'job.show.sectionBenefits'|trans|escape('js') }}</span></div><p class="job-card-section-text">' + nl2brEscape(data.benefits) + '</p></div>';
  707.                         }
  708.                     }
  710.                     // ═══ BOUTONS D'ACTION ═══
  711.                     // Logique :
  712.                     // - Offre indexée (websearch=1) + website : 'Postuler en externe' = bouton PRINCIPAL violet
  713.                     //                                            'Sauvegarder' = bouton SECONDAIRE (heart)
  714.                     // - Offre interne : 'Je suis intéressé' reste le bouton principal (heart)
  715.                     // Le bouton 'Sauvegarder' demande la connexion si user anonyme.
  716.                     var isIndexed = (data.websearch == 1 && data.website);
  717.                     var actionsHtml = '<div class="job-card-actions">';
  719.                     if(isIndexed){
  720.                         // 1. Bouton PRINCIPAL : Postuler en externe (toujours dispo, même anonyme)
  721.                         actionsHtml +=
  722.                             '<a href="' + escapeHtml(data.website) + '" target="_blank" rel="noopener" class="job-action-btn job-action-btn-primary">' +
  723.                             '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>' +
  724.                             '{{ 'job.show.applyNow'|trans|escape('js') }}' +
  725.                             '</a>';
  727.                         // 2. Bouton SECONDAIRE : Sauvegarder (heart, en favori)
  728.                         if(data.likeUrl){
  729.                             actionsHtml +=
  730.                                 '<a href="' + data.likeUrl + '" class="job-action-btn">' +
  731.                                 '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z"/></svg>' +
  732.                                 '{{ 'job.show.save'|trans|escape('js') }}' +
  733.                                 '</a>';
  734.                         } else {
  735.                             actionsHtml +=
  736.                                 '<button class="job-action-btn job-action-btn-locked" id="cardLikeBtn" type="button" data-locked="1">' +
  737.                                 '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0110 0v4"/></svg>' +
  738.                                 '{{ 'job.show.save'|trans|escape('js') }}' +
  739.                                 '</button>';
  740.                         }
  741.                     } else {
  742.                         // Offre interne : 'Je suis intéressé' reste le bouton principal
  743.                         if(data.likeUrl){
  744.                             var liked = !!data.isLiked;
  745.                             var likeLabel = liked ? LIKE_LABEL_LIKED : LIKE_LABEL_DEFAULT;
  746.                             actionsHtml +=
  747.                                 '<a href="' + data.likeUrl + '" ' +
  748.                                 'class="job-action-btn job-action-btn-primary job-action-like' + (liked ? ' is-liked' : '') + '" ' +
  749.                                 'id="cardLikeBtn" ' +
  750.                                 'data-liked="' + (liked ? '1' : '0') + '" ' +
  751.                                 'data-job-slug="' + escapeHtml(data.slug) + '">' +
  752.                                 '<svg class="job-action-like-icon" viewBox="0 0 24 24" fill="currentColor"><path d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z"/></svg>' +
  753.                                 '<span class="job-action-like-label">' + escapeHtml(likeLabel) + '</span>' +
  754.                                 '</a>';
  755.                         } else {
  756.                             actionsHtml +=
  757.                                 '<button class="job-action-btn job-action-btn-primary job-action-btn-locked" id="cardLikeBtn" type="button" data-locked="1">' +
  758.                                 '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0110 0v4"/></svg>' +
  759.                                 '{{ 'job.show.imInterestedLocked'|trans|escape('js') }}' +
  760.                                 '</button>';
  761.                         }
  762.                     }
  764.                     actionsHtml += '</div>';
  765.                     html += actionsHtml;
  767.                     return html;
  768.                 }
  770.                 function escapeHtml(s){
  771.                     if(s == null) return '';
  772.                     return String(s).replace(/[&<>"']/g, function(c){
  773.                         return {'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c];
  774.                     });
  775.                 }
  777.                 function nl2brEscape(s){
  778.                     if(s == null) return '';
  779.                     // Décoder les \n littéraux puis échapper et remplacer en <br>
  780.                     var t = String(s).replace(/\\n/g, '\n');
  781.                     return escapeHtml(t).replace(/\n/g, '<br>');
  782.                 }
  784.                 // ═══ Cache des cards déjà chargées ═══
  785.                 var cardCache = {};
  786.                 // On préload la card courante depuis le DOM (vu qu'elle est déjà rendue)
  787.                 // Pas nécessaire — on ne la rechargera jamais via AJAX vu qu'on est dessus.
  789.                 function loadCardAjax(slug, direction){
  790.                     if(!slug) return Promise.resolve(null);
  791.                     if(cardCache[slug]) return Promise.resolve(cardCache[slug]);
  793.                     var url = AJAX_SHOW_URL_TEMPLATE.replace('__SLUG__', encodeURIComponent(slug));
  794.                     return fetch(url, {headers:{'Accept':'application/json'}})
  795.                         .then(function(r){ return r.ok ? r.json() : null; })
  796.                         .then(function(data){
  797.                             if(data) cardCache[slug] = data;
  798.                             return data;
  799.                         })
  800.                         .catch(function(){ return null; });
  801.                 }
  803.                 // Précharger les voisins de la card courante en background
  804.                 function prefetchNeighbors(){
  805.                     if(TOTAL < 2) return;
  806.                     var prevIdx = (currentIndex - 1 + TOTAL) % TOTAL;
  807.                     var nextIdx = (currentIndex + 1) % TOTAL;
  808.                     if(currentIndex >= 0){
  809.                         loadCardAjax(SLUGS[prevIdx]);
  810.                         loadCardAjax(SLUGS[nextIdx]);
  811.                     }
  812.                 }
  814.                 // Lock pour éviter les swipes en parallèle pendant l'animation
  815.                 var isAnimating = false;
  817.                 function navigateAjax(direction){
  818.                     if(isAnimating) return;
  820.                     isAnimating = true;
  821.                     jobCard.classList.remove('intro-pulse');
  823.                     var leavingPromo = (currentIndex === -1);
  825.                     // Toujours incrémenter à chaque swipe valide (sauf sortie de promo)
  826.                     if(!leavingPromo){
  827.                         swipeCount = swipeCount + 1;
  828.                     }
  830.                     // Promo cyclique : tous les N swipes (peu importe direction)
  831.                     var goingToPromo = (!leavingPromo && swipeCount > 0 && swipeCount % PROMO_EVERY_N_SWIPES === 0);
  833.                     console.log('[whr-job] swipe direction=' + direction + ' currentIndex=' + currentIndex + ' swipeCount=' + swipeCount + ' goingToPromo=' + goingToPromo + ' leavingPromo=' + leavingPromo);
  835.                     // Sortir de la promo
  836.                     if(leavingPromo){
  837.                         var lastIdx = parseInt(jobCard.dataset.lastJobIndex || '0', 10);
  838.                         var targetIdx = (direction > 0)
  839.                             ? (lastIdx + 1 + TOTAL) % TOTAL
  840.                             : lastIdx;
  841.                         var targetSlug = SLUGS[targetIdx];
  843.                         swipeOutWithSkeleton(direction, function(){
  844.                             loadCardAjax(targetSlug, direction).then(function(data){
  845.                                 if(data){
  846.                                     jobCardContent.innerHTML = buildJobHtml(data);
  847.                                     currentIndex = targetIdx;
  848.                                     jobCard.dataset.currentSlug = targetSlug;
  849.                                     jobCard.dataset.lastJobIndex = String(targetIdx);
  850.                                     updateCounter();
  851.                                     bindLikeHandlers();
  852.                                     prefetchNeighbors();
  853.                                 }
  854.                                 swipeIn(function(){ isAnimating = false; });
  855.                             }).catch(function(err){
  856.                                 console.error('[whr-job] error leaving promo', err);
  857.                                 swipeIn(function(){ isAnimating = false; });
  858.                             });
  859.                         });
  860.                         return;
  861.                     }
  863.                     // Afficher la promo
  864.                     if(goingToPromo){
  865.                         console.log('[whr-job] >>> PROMO');
  866.                         jobCard.dataset.lastJobIndex = String(currentIndex);
  867.                         swipeOutWithSkeleton(direction, function(){
  868.                             jobCardContent.innerHTML = renderPromoCard();
  869.                             currentIndex = -1;
  870.                             if(bannerCounter) bannerCounter.textContent = '★';
  871.                             swipeIn(function(){ isAnimating = false; });
  872.                         });
  873.                         return;
  874.                     }
  876.                     // Navigation normale
  877.                     var nextIdx = (currentIndex + direction + TOTAL) % TOTAL;
  878.                     var nextSlug = SLUGS[nextIdx];
  880.                     swipeOutWithSkeleton(direction, function(){
  881.                         loadCardAjax(nextSlug, direction).then(function(data){
  882.                             if(data){
  883.                                 jobCardContent.innerHTML = buildJobHtml(data);
  884.                                 currentIndex = nextIdx;
  885.                                 jobCard.dataset.currentSlug = nextSlug;
  886.                                 jobCard.dataset.lastJobIndex = String(nextIdx);
  887.                                 updateCounter();
  888.                                 bindLikeHandlers();
  889.                                 prefetchNeighbors();
  890.                             } else {
  891.                                 console.warn('[whr-job] AJAX failed for slug', nextSlug);
  892.                             }
  893.                             swipeIn(function(){ isAnimating = false; });
  894.                         }).catch(function(err){
  895.                             console.error('[whr-job] AJAX error', err);
  896.                             swipeIn(function(){ isAnimating = false; });
  897.                         });
  898.                     });
  899.                 }
  901.                 // Variante de swipeOut qui affiche le skeleton DÈS que la card est sortie
  902.                 function swipeOutWithSkeleton(direction, cb){
  903.                     if(!jobCard) { if(cb) cb(); return; }
  905.                     jobCard.classList.remove('dragging');
  906.                     jobCard.style.transform = '';
  907.                     if(indicatorPrev) indicatorPrev.style.opacity = '0';
  908.                     if(indicatorNext) indicatorNext.style.opacity = '0';
  910.                     void jobCard.offsetWidth;
  912.                     var outClass = direction > 0 ? 'swipe-out-left' : 'swipe-out-right';
  913.                     jobCard.classList.add(outClass);
  915.                     setTimeout(function(){
  916.                         // Afficher le skeleton dès la sortie de la card (avant le AJAX)
  917.                         jobCardContent.innerHTML = renderSkeleton();
  918.                         jobCard.classList.remove('swipe-out-left', 'swipe-out-right');
  919.                         if(cb) cb();
  920.                     }, 320);
  921.                 }
  923.                 function swipeOut(direction, cb){
  924.                     if(!jobCard) { if(cb) cb(); return; }
  926.                     // Nettoyer toute transform inline et la classe dragging
  927.                     jobCard.classList.remove('dragging');
  928.                     jobCard.style.transform = '';
  930.                     // Cacher les indicateurs visuels du drag
  931.                     if(indicatorPrev) indicatorPrev.style.opacity = '0';
  932.                     if(indicatorNext) indicatorNext.style.opacity = '0';
  934.                     // Force un reflow avant d'ajouter la classe pour que la transition redémarre
  935.                     void jobCard.offsetWidth;
  937.                     var outClass = direction > 0 ? 'swipe-out-left' : 'swipe-out-right';
  938.                     jobCard.classList.add(outClass);
  940.                     setTimeout(function(){
  941.                         jobCard.classList.remove('swipe-out-left', 'swipe-out-right');
  942.                         if(cb) cb();
  943.                     }, 320);
  944.                 }
  946.                 function swipeIn(cb){
  947.                     if(!jobCard) { if(cb) cb(); return; }
  949.                     // Nettoyer tout transform inline résiduel
  950.                     jobCard.style.transform = '';
  951.                     jobCard.classList.remove('swipe-in');
  953.                     // Force un reflow puis lance l'animation
  954.                     void jobCard.offsetWidth;
  955.                     jobCard.classList.add('swipe-in');
  957.                     setTimeout(function(){
  958.                         jobCard.classList.remove('swipe-in');
  959.                         if(cb) cb();
  960.                     }, 380);
  961.                 }
  963.                 // ═══ Drag & swipe ═══
  964.                 var SWIPE_THRESHOLD = 100;
  965.                 var startX = 0, startY = 0, currentX = 0, currentY = 0;
  966.                 var isDragging = false, hasMoved = false;
  968.                 function resetCard(){
  969.                     if(!jobCard) return;
  970.                     jobCard.classList.remove('dragging');
  971.                     jobCard.style.transform = '';
  972.                     if(indicatorPrev) indicatorPrev.style.opacity = '0';
  973.                     if(indicatorNext) indicatorNext.style.opacity = '0';
  974.                 }
  976.                 function updateDragPos(deltaX, deltaY){
  977.                     var rotate = deltaX / 30;
  978.                     jobCard.style.transform = 'translate(' + deltaX + 'px,' + deltaY + 'px) rotate(' + rotate + 'deg)';
  980.                     var ratio = Math.min(Math.abs(deltaX) / SWIPE_THRESHOLD, 1);
  981.                     if(deltaX > 0){
  982.                         if(indicatorPrev) indicatorPrev.style.opacity = ratio;
  983.                         if(indicatorNext) indicatorNext.style.opacity = '0';
  984.                     } else if(deltaX < 0){
  985.                         if(indicatorNext) indicatorNext.style.opacity = ratio;
  986.                         if(indicatorPrev) indicatorPrev.style.opacity = '0';
  987.                     } else {
  988.                         if(indicatorPrev) indicatorPrev.style.opacity = '0';
  989.                         if(indicatorNext) indicatorNext.style.opacity = '0';
  990.                     }
  991.                 }
  993.                 function onPointerDown(e){
  994.                     if(isAnimating) return; // pas de drag pendant l'animation
  995.                     var target = e.target;
  996.                     if(target.closest('a, button, input')) return;
  997.                     isDragging = true;
  998.                     hasMoved = false;
  999.                     jobCard.classList.remove('intro-pulse');
  1000.                     var pt = e.touches ? e.touches[0] : e;
  1001.                     startX = pt.clientX;
  1002.                     startY = pt.clientY;
  1003.                     jobCard.classList.add('dragging');
  1004.                 }
  1006.                 function onPointerMove(e){
  1007.                     if(!isDragging) return;
  1008.                     var pt = e.touches ? e.touches[0] : e;
  1009.                     currentX = pt.clientX - startX;
  1010.                     currentY = pt.clientY - startY;
  1011.                     if(Math.abs(currentX) > 6) hasMoved = true;
  1012.                     if(Math.abs(currentY) > Math.abs(currentX) * 1.5 && !hasMoved) return;
  1013.                     if(e.cancelable && hasMoved && Math.abs(currentX) > 12) e.preventDefault();
  1014.                     updateDragPos(currentX, currentY * 0.3);
  1015.                 }
  1017.                 function onPointerUp(){
  1018.                     if(!isDragging) return;
  1019.                     isDragging = false;
  1020.                     if(Math.abs(currentX) > SWIPE_THRESHOLD){
  1021.                         if(currentX > 0){
  1022.                             // Swipe droite → précédent (AJAX)
  1023.                             navigateAjax(-1);
  1024.                         } else {
  1025.                             // Swipe gauche → suivant (AJAX)
  1026.                             navigateAjax(1);
  1027.                         }
  1028.                     } else {
  1029.                         resetCard();
  1030.                     }
  1031.                     currentX = 0; currentY = 0;
  1032.                     if(indicatorPrev) indicatorPrev.style.opacity = '0';
  1033.                     if(indicatorNext) indicatorNext.style.opacity = '0';
  1034.                 }
  1036.                 if(jobCard){
  1037.                     jobCard.addEventListener('touchstart', onPointerDown, {passive:true});
  1038.                     jobCard.addEventListener('touchmove', onPointerMove, {passive:false});
  1039.                     jobCard.addEventListener('touchend', onPointerUp);
  1040.                     jobCard.addEventListener('touchcancel', onPointerUp);
  1041.                     jobCard.addEventListener('mousedown', onPointerDown);
  1042.                     document.addEventListener('mousemove', onPointerMove);
  1043.                     document.addEventListener('mouseup', onPointerUp);
  1044.                 }
  1046.                 // ═══ Raccourcis clavier ═══
  1047.                 document.addEventListener('keydown', function(e){
  1048.                     var tag = (e.target && e.target.tagName) ? e.target.tagName.toUpperCase() : '';
  1049.                     if(tag === 'INPUT' || tag === 'TEXTAREA') return;
  1050.                     if(e.key === 'ArrowLeft' && TOTAL > 1){ e.preventDefault(); navigateAjax(-1); }
  1051.                     else if(e.key === 'ArrowRight' && TOTAL > 1){ e.preventDefault(); navigateAjax(1); }
  1052.                 });
  1054.                 // ═══ Table of contents — scroll spy ═══
  1055.                 var tocLinks = document.querySelectorAll('.side-toc-link');
  1056.                 if(tocLinks.length){
  1057.                     tocLinks.forEach(function(link){
  1058.                         link.addEventListener('click', function(e){
  1059.                             e.preventDefault();
  1060.                             var targetId = link.getAttribute('data-target');
  1061.                             var target = document.getElementById(targetId);
  1062.                             if(target) target.scrollIntoView({behavior:'smooth', block:'start'});
  1063.                         });
  1064.                     });
  1065.                     var sections = [];
  1066.                     tocLinks.forEach(function(link){
  1067.                         var id = link.getAttribute('data-target');
  1068.                         var el = document.getElementById(id);
  1069.                         if(el) sections.push({id:id, el:el, link:link});
  1070.                     });
  1071.                     function updateActiveTocLink(){
  1072.                         var scrollPos = window.scrollY + 100;
  1073.                         var current = sections[0];
  1074.                         sections.forEach(function(s){ if(s.el.offsetTop <= scrollPos) current = s; });
  1075.                         tocLinks.forEach(function(l){ l.classList.remove('active'); });
  1076.                         if(current) current.link.classList.add('active');
  1077.                     }
  1078.                     window.addEventListener('scroll', updateActiveTocLink, {passive:true});
  1079.                     updateActiveTocLink();
  1080.                 }
  1082.                 // Init counter
  1083.                 updateCounter();
  1084.                 prefetchNeighbors();
  1086.                 // Stop intro-pulse au premier interaction utilisateur
  1087.                 ['mousedown','touchstart','keydown'].forEach(function(evt){
  1088.                     document.addEventListener(evt, function(){
  1089.                         if(jobCard) jobCard.classList.remove('intro-pulse');
  1090.                     }, {once:true});
  1091.                 });
  1093.                 console.log('[whr-job] init done', {TOTAL: TOTAL, SLUGS: SLUGS});
  1094.             } catch(err){
  1095.                 console.error('[whr-job] init error:', err);
  1096.             }
  1097.         })();
  1098.     </script>
  1099. {% endblock footerjs %}