Pricing

from $0.50 / 1,000 job listings

Try for free

Go to Apify Store

HelloWork Jobs Scraper (France)

Try for free

Extract job offers from hellowork.com — France's largest private job board. Title, company, city, contract (CDI/CDD/intérim/alternance…), salary range, experience, education, industry and full description. No browser, fast and cheap.

Pricing

from $0.50 / 1,000 job listings

Rating

0.0

(0)

Developer

Jules Deparis

Actor stats

Bookmarked

Total users

Monthly active users

7 days ago

Last modified

Indeed Germany Jobs Scraper — Full Descriptions & Salary

totaka/indeed-germany-jobs-scraper

Scrape job listings from Indeed Germany (de.indeed.com) — job title, company, location, salary, contract type, and full description. No API key required.

Thomas Gharbi

HelloWork Scraper d'Offres d'Emploi (Français)

parsebird/hellowork-jobs-scraper-francais

Extrayez les offres d'emploi HelloWork partout en France — titres, entreprises, salaires, compétences, localisations, types de contrat et descriptions. Filtrez par mot-clé, lieu ou catégorie. Exportez en JSON, CSV, Excel.

ParseBird

RemoteOK Jobs Scraper

happitap/remoteok-jobs-scraper

Extract remote tech jobs, salaries, tags, and hiring companies from RemoteOK. Fast, reliable crawler

HappiTap

Hellowork Search Scraper

jobsapi/hellowork-jobs-search-scraper

Scrape job listings from Hellowork.com (formerly RegionJobs), a major French job board. Extract job titles, companies, locations, salary ranges, contract types and descriptions for French recruitment.

Jobs API

HelloWork Job Search Scraper – Cheap 🇫🇷🌍💼

scrapestorm/hellowork-job-search-scraper---cheap

🔍 Easily collect job listings from HelloWork Extract structured job data from HelloWork job search results, including job titles, company names, locations, contract types, salaries, work modes, posting dates, job URLs & more Ideal for job market research, and hiring trend analysis in France 🌍

Storm_Scraper

Welcome to the Jungle Jobs Scraper

slxcx_0/wttj-jobs-scraper

Search and extract job offers from welcometothejungle.com (90k+ live listings, FR/EN/US/UK). Salary, remote policy, contract type, experience level, skills, full description, apply URL and company data. No browser, fast and cheap.

Jules Deparis

K Beauty Scout

kwsoft/k-beauty-scout

Real-time Olive Young ranking tracker & price scraper. Extracts top 100 Korean skincare, makeup, and cosmetics with KRW/USD prices, discounts, ratings, and stock status in seconds.

KW Studio

Ticjob Scraper: Spain Tech Job Postings

bibian/ticjob-jobs-scraper

Extract IT and tech job postings from Ticjob, a Spanish job board specialized in technology roles (SAP, developers, cloud, infrastructure): title, company, location, contract type, dates and full description.

Vivien MORVAN

ATS Job Board Scraper - Greenhouse

chain_link/ats-job-board-scraper

Pull every open job from company career boards hosted on Greenhouse, Lever and Ashby using their public, documented job board APIs. Returns full descriptions, departments, locations, salary ranges where published, and apply links. No browser, no login.

James White

Meteojob Scraper: France Jobs API [USD 0.90/1K]

usefulapi/meteojob-scraper

Scrape Meteojob.com job offers in France: title, company, city, salary range, CDI/CDD/intérim/stage contract, full description, date and apply link. Search by keyword and location or paste search URLs. Only-new-jobs mode for alerts. USD 0.90 per 1,000 jobs.

Useful API

.dockerignore

node_modules
storage
test
x402
*.md
!README.md

.gitignore

node_modules
storage
*.zip

DEPLOY.md

1# Deploying and monetizing this Actor (your checklist)
2
3Everything below requires your account and your approval. Nothing has been created or published on your behalf.
4
5## 0. Prerequisites (free)
6- An Apify account (free plan is enough to publish; no subscription needed). Sign up with GitHub at https://console.apify.com/sign-up
7- Node 20+ and the Apify CLI: `npm i -g apify-cli`
8
9## 1. Local check
10```bash
11cd hellowork-jobs-scraper
12npm install
13npm test                    # 7 unit tests
14HW_LIVE=1 npm test        # + live endpoint check
15APIFY_LOCAL_STORAGE_DIR=./storage node src/main.js   # uses storage/key_value_stores/default/INPUT.json
16```
17
18## 2. Push to your Apify account
19```bash
20apify login                 # opens browser / asks for API token
21apify push                  # builds the Actor from .actor/Dockerfile
22```
23Run it once from the Console with the default input and confirm the dataset looks right.
24
25## 3. Monetization (Pay-per-event)
26Console → your Actor → **Publication** → **Monetization** → *Pay per event*, and define exactly these two events (names must match `src/main.js`):
27
28| Event name | Suggested price | Note |
29| --- | --- | --- |
30| `job-listing` | **$0.0005** | charged once per job |
31| `job-detail` | **$0.0010** | charged only when details are fetched |
32
33→ $0.0015 per fully-detailed job, at the category price floor (`solidcode/hellowork-scraper`, $0.00095/item, 64 users in the last 30 days; price floor here is ~$0.001), with more fields and filters. Leave "pass platform usage cost to users" ON (it's tiny here).
34
35Then **Publication → Publish to Store**: title, SEO description (README is already written), categories *Jobs* + *Lead generation*, and a 1–2 line changelog.
36
37## 4. Getting paid
38- Console → **Settings → Payouts**: add **PayPal** (minimum payout **$20**; bank transfer minimum is $100) and complete **identity verification (KYC)** — required before any payout.
39- Payouts are monthly: an invoice is generated after each calendar month, you approve it within 3 days, then it's paid. First realistic payout: **the month after your first ≥$20 of earnings**, i.e. 5–9 weeks from publishing if the Actor gets traction.
40- You receive 80% of what users pay minus platform usage for their runs (Apify Store terms, updated 2026-09-15).
41- Declare the income as micro-entrepreneur BNC/BIC revenue (Apify's invoice is auto-generated).
42
43## 5. After publishing (10 min/week, not automated)
44- Watch **Insights → Analytics** for runs/users; answer issues in the Actor's Issues tab (ratings drive ranking).
45- If `npm test` with `HW_LIVE=1` ever fails, the site changed its data layer; the touchpoints are the search-card selectors (`data-cy` attributes) and the JobPosting JSON-LD / section parser in `src/hellowork.js`; fixtures in `test/fixtures` show the last known layout.
46
47## Compliance notes
48- Only public listing data is collected; no login, no personal data of candidates.
49- Scraping public pages of a third-party site may conflict with that site's ToS even when it is lawful; this is the standard risk of every Actor in this category. Keep request volume modest (the code uses the site's own public search endpoints and caps at 8 concurrent detail requests).

package.json

{
  "name": "hellowork-jobs-scraper",
  "version": "1.0.0",
  "description": "HelloWork (hellowork.com) jobs scraper — French job offers with salary, contract, location, experience and full description.",
  "type": "module",
  "main": "src/main.js",
  "scripts": { "start": "node src/main.js", "test": "node --test test/*.test.js" },
  "dependencies": { "apify": "^3.4.0", "cheerio": "^1.0.0" },
  "engines": { "node": ">=20" },
  "license": "ISC"
}

.actor/actor.json

{
  "actorSpecification": 1,
  "name": "hellowork-jobs-scraper",
  "title": "HelloWork Jobs Scraper (France)",
  "description": "Extract job offers from hellowork.com — France's largest private job board. Title, company, city, contract (CDI/CDD/intérim/alternance…), salary range, experience, education, industry and full description. No browser, fast and cheap.",
  "version": "1.1",
  "buildTag": "latest",
  "meta": {
    "templateId": "js-empty"
  },
  "input": "./input_schema.json",
  "dockerfile": "./Dockerfile",
  "readme": "../README.md",
  "storages": {
    "dataset": {
      "actorSpecification": 1,
      "title": "Job offers",
      "views": {
        "overview": {
          "title": "Overview",
          "transformation": {
            "fields": [
              "title",
              "companyName",
              "location",
              "contract",
              "salaryMin",
              "salaryMax",
              "salaryPeriod",
              "experienceMonths",
              "datePosted",
              "url"
            ]
          },
          "display": {
            "component": "table",
            "properties": {
              "title": {
                "label": "Job",
                "format": "text"
              },
              "companyName": {
                "label": "Company",
                "format": "text"
              },
              "location": {
                "label": "Location",
                "format": "text"
              },
              "contract": {
                "label": "Contract",
                "format": "text"
              },
              "salaryMin": {
                "label": "Salary min",
                "format": "number"
              },
              "salaryMax": {
                "label": "Salary max",
                "format": "number"
              },
              "datePosted": {
                "label": "Posted",
                "format": "date"
              },
              "url": {
                "label": "URL",
                "format": "link"
              }
            }
          }
        }
      }
    }
  },
  "output": "./output_schema.json"
}

.actor/Dockerfile

FROM apify/actor-node:22

COPY package*.json ./
RUN npm --quiet set progress=false \
    && npm install --omit=dev --omit=optional \
    && echo "Installed NPM packages:" \
    && (npm list --omit=dev --all || true) \
    && echo "Node.js version:" \
    && node --version

COPY . ./

CMD npm start --silent

.actor/input_schema.json

{
  "title": "HelloWork Jobs Scraper input",
  "type": "object",
  "schemaVersion": 1,
  "properties": {
    "keywords": {
      "title": "Keywords (métier, compétence, entreprise)",
      "type": "array",
      "editor": "stringList",
      "description": "One search per keyword, e.g. \"développeur\", \"comptable\", \"infirmier\".",
      "prefill": [
        "développeur"
      ]
    },
    "location": {
      "title": "Location",
      "type": "string",
      "editor": "textfield",
      "description": "City, department or region as typed on hellowork.com (e.g. \"Lille\", \"Nord\", \"Île-de-France\"). Empty = all France.",
      "prefill": "Lille"
    },
    "radiusKm": {
      "title": "Radius (km)",
      "type": "integer",
      "description": "Search radius around the location (default 20).",
      "default": 20,
      "minimum": 0
    },
    "contracts": {
      "title": "Contract types",
      "type": "array",
      "editor": "select",
      "description": "CDI, CDD, Travail_temp (intérim), Stage, Alternance, Independant, Franchise, Associe, Fonctionnaire, Freelance, Stage_de_lycee.",
      "items": {
        "type": "string",
        "enum": [
          "CDI",
          "CDD",
          "Travail_temp",
          "Stage",
          "Alternance",
          "Independant",
          "Franchise",
          "Associe",
          "Fonctionnaire",
          "Freelance",
          "Stage_de_lycee"
        ]
      },
      "default": []
    },
    "period": {
      "title": "Published within",
      "type": "string",
      "editor": "select",
      "enum": [
        "all",
        "1h",
        "24h",
        "7d",
        "30d"
      ],
      "enumTitles": [
        "Any time",
        "Last hour",
        "Last 24 hours",
        "Last 7 days",
        "Last 30 days"
      ],
      "default": "all",
      "description": "Only offers published within this period."
    },
    "sortBy": {
      "title": "Sort by",
      "type": "string",
      "editor": "select",
      "enum": [
        "date",
        "relevance"
      ],
      "enumTitles": [
        "Newest first",
        "Relevance"
      ],
      "default": "date",
      "description": "Order of results. Newest first is best for scheduled runs."
    },
    "startUrls": {
      "title": "HelloWork search URLs (optional)",
      "type": "array",
      "editor": "requestListSources",
      "description": "Paste search URLs from hellowork.com; keyword, location, contracts, radius and period are read from the URL.",
      "default": []
    },
    "includeDetails": {
      "title": "Fetch full job details",
      "type": "boolean",
      "description": "Full description, qualifications, experience (months), education, industry, postal code, exact posting date. Charged as a separate 'job-detail' event.",
      "default": true
    },
    "maxItems": {
      "title": "Max jobs",
      "type": "integer",
      "description": "0 = unlimited.",
      "default": 100,
      "minimum": 0
    }
  }
}

.actor/output_schema.json

{
  "actorOutputSchemaVersion": 1,
  "title": "Job offers",
  "properties": {
    "jobs": {
      "type": "string",
      "title": "Jobs (JSON)",
      "description": "All scraped job offers as JSON. Append ?format=csv or ?format=xlsx for other formats.",
      "template": "{{links.apiDefaultDatasetUrl}}/items"
    },
    "summary": {
      "type": "string",
      "title": "Run summary",
      "template": "{{links.apiDefaultKeyValueStoreUrl}}/records/SUMMARY"
    }
  }
}

src/hellowork.js

1/**
2 * HelloWork (hellowork.com) client: server-rendered search pages + schema.org JobPosting JSON-LD on detail pages.
3 * No browser, no login.
4 */
5import * as cheerio from 'cheerio';
6
7const SITE = 'https://www.hellowork.com';
8const HEADERS = {
9    'user-agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0 Safari/537.36',
10    'accept-language': 'fr-FR,fr;q=0.9,en;q=0.8',
11    accept: 'text/html,application/xhtml+xml',
12};
13
14export const CONTRACTS = ['CDI', 'CDD', 'Travail_temp', 'Stage', 'Alternance', 'Independant', 'Franchise', 'Associe', 'Fonctionnaire', 'Freelance', 'Stage_de_lycee'];
15export const PERIODS = { all: 'all', '1h': 'h', '24h': 'd', '7d': 'w', '30d': 'm' };
16
17export async function fetchText(url, { retries = 4, baseDelayMs = 600, fetchImpl = fetch } = {}) {
18    let lastErr;
19    for (let attempt = 0; attempt <= retries; attempt++) {
20        try {
21            const res = await fetchImpl(url, { headers: HEADERS, redirect: 'follow' });
22            if (res.status === 404 || res.status === 410) return { status: res.status, text: null };
23            if (res.status === 429 || res.status >= 500 || res.status === 403) throw new Error(`HTTP ${res.status}`);
24            if (!res.ok) throw new Error(`HTTP ${res.status}`);
25            return { status: res.status, text: await res.text() };
26        } catch (err) {
27            lastErr = err;
28            if (attempt === retries) break;
29            await new Promise((r) => setTimeout(r, baseDelayMs * 2 ** attempt));
30        }
31    }
32    throw lastErr;
33}
34
35/** Build a search URL from input. */
36export function buildSearchUrl({ keyword = '', location = '', contracts = [], radiusKm, period = 'all', sortBy = 'date', page = 1 } = {}) {
37    const p = new URLSearchParams();
38    if (keyword) p.set('k', keyword);
39    if (location) p.set('l', location);
40    for (const c of contracts) if (CONTRACTS.includes(c)) p.append('c', c);
41    if (Number.isFinite(radiusKm)) p.set('ray', String(radiusKm));
42    const d = PERIODS[period] || (Object.values(PERIODS).includes(period) ? period : 'all');
43    if (d !== 'all') p.set('d', d);
44    p.set('st', sortBy === 'relevance' ? 'relevance' : 'date');
45    if (page > 1) p.set('p', String(page));
46    return `${SITE}/fr-fr/emploi/recherche.html?${p.toString()}`;
47}
48
49/** Parse a hellowork search URL pasted by the user into input fields. */
50export function parseSearchUrl(url) {
51    const u = new URL(url);
52    const q = u.searchParams;
53    const out = {};
54    if (q.get('k')) out.keyword = q.get('k');
55    if (q.get('l')) out.location = q.get('l');
56    const c = q.getAll('c');
57    if (c.length) out.contracts = c;
58    if (q.get('ray')) out.radiusKm = Number(q.get('ray'));
59    if (q.get('d')) out.period = q.get('d');
60    if (q.get('st')) out.sortBy = q.get('st');
61    return out;
62}
63
64const parseNumber = (s) => {
65    const n = String(s || '').replace(/[\s  ]/g, '').replace(',', '.');
66    const m = n.match(/\d+(?:\.\d+)?/);
67    return m ? Number(m[0]) : null;
68};
69
70/** Parse "35 000 - 40 000 € / an" → { min, max, period } */
71export function parseSalary(text) {
72    if (!text) return null;
73    const t = text.replace(/[  ]/g, ' ');
74    const nums = (t.match(/\d[\d\s]*(?:[.,]\d+)?/g) || []).map(parseNumber).filter((n) => n !== null);
75    if (!nums.length) return null;
76    const period = /\/\s*an|annuel/i.test(t) ? 'year' : /\/\s*mois|mensuel/i.test(t) ? 'month' : /\/\s*jour|tjm/i.test(t) ? 'day' : /\/\s*h/i.test(t) ? 'hour' : null;
77    return { min: nums[0], max: nums[1] ?? nums[0], period, raw: t.trim() };
78}
79
80/** "il y a 16 jours" → ISO date (approx, day precision). */
81export function parseRelativeDate(text, now = new Date()) {
82    if (!text) return null;
83    const m = text.match(/il y a\s+(?:(\d+)|une?)\s*(minute|heure|jour|semaine|mois|an)/i);
84    if (!m) return null;
85    const n = m[1] ? Number(m[1]) : 1;
86    const unit = m[2].toLowerCase();
87    const ms = { minute: 60e3, heure: 3600e3, jour: 86400e3, semaine: 7 * 86400e3, mois: 30 * 86400e3, an: 365 * 86400e3 }[unit];
88    return new Date(now.getTime() - n * ms).toISOString();
89}
90
91/** Parse a search results page → { total, jobs: [{id,url,title,company,location,contract,salaryText,postedText}] } */
92export function parseSearchPage(html) {
93    const $ = cheerio.load(html);
94    const m = $.root().text().match(/(\d[\d\s  ]*)\s*offres?/i);
95    const total = m ? parseNumber(m[1]) : null;
96    const jobs = [];
97    $('[data-cy="serpCard"]').each((_, card) => {
98        const c = $(card);
99        const a = c.find('a[data-cy="offerTitle"]').first();
100        const href = a.attr('href');
101        if (!href) return;
102        const id = (href.match(/\/emplois\/(\d+)\.html/) || [])[1];
103        const title = a.find('h3 p').first().text().trim() || a.attr('title') || '';
104        const company = a.find('h3 p').eq(1).text().trim() || null;
105        const tags = c.find('.tag-secondary-s, .readonly').map((_, t) => $(t).text().trim()).get();
106        const salaryText = tags.find((t) => /€/.test(t)) || null;
107        jobs.push({
108            id,
109            url: new URL(href, SITE).href,
110            title,
111            company,
112            location: c.find('[data-cy="localisationCard"]').first().text().trim() || null,
113            contract: c.find('[data-cy="contractCard"]').first().text().trim() || null,
114            salaryText,
115            postedText: (c.text().match(/il y a [^\n<]+?(?:minutes?|heures?|jours?|semaines?|mois|ans?)/i) || [null])[0]?.trim() || null,
116        });
117    });
118    return { total, jobs };
119}
120
121/** Parse the detail page JSON-LD JobPosting → normalized record (or null). */
122export function parseDetailPage(html) {
123    const $ = cheerio.load(html);
124    let posting = null;
125    $('script[type="application/ld+json"]').each((_, s) => {
126        try {
127            const d = JSON.parse($(s).text());
128            const arr = Array.isArray(d) ? d : [d];
129            for (const x of arr) if (x && x['@type'] === 'JobPosting') posting = x;
130        } catch { /* ignore */ }
131    });
132    const strip = (s) => (typeof s === 'string' ? cheerio.load(`<div>${s.replace(/<br\s*\/?>/gi, '\n').replace(/<\/(p|li|h\d)>/gi, '\n')}</div>`).text().replace(/\n{3,}/g, '\n\n').trim() : null);
133    if (!posting) return parseDetailHtml($, strip);
134    const sal = posting.baseSalary?.value || {};
135    const loc = posting.jobLocation?.address || {};
136    const edu = Array.isArray(posting.educationRequirements) ? posting.educationRequirements.map((e) => e.credentialCategory).filter(Boolean) : posting.educationRequirements ? [posting.educationRequirements.credentialCategory || posting.educationRequirements] : [];
137    return {
138        title: posting.title || null,
139        url: posting.url || null,
140        companyName: posting.hiringOrganization?.name || null,
141        companyUrl: posting.hiringOrganization?.sameAs || null,
142        companyLogo: posting.hiringOrganization?.logo || null,
143        reference: posting.identifier?.value || null,
144        datePosted: posting.datePosted || null,
145        validThrough: posting.validThrough || null,
146        employmentType: posting.employmentType || null,
147        salaryMin: sal.minValue ?? null,
148        salaryMax: sal.maxValue ?? null,
149        salaryCurrency: posting.baseSalary?.currency || null,
150        salaryUnit: sal.unitText || null,
151        experienceMonths: posting.experienceRequirements?.monthsOfExperience ?? null,
152        educationRequirements: edu,
153        industry: posting.industry || null,
154        occupationalCategory: posting.occupationalCategory || null,
155        city: loc.addressLocality || null,
156        region: loc.addressRegion || null,
157        postalCode: loc.postalCode || null,
158        countryCode: loc.addressCountry || null,
159        directApply: posting.directApply ?? null,
160        description: strip(posting.description),
161        descriptionHtml: posting.description || null,
162        qualifications: strip(posting.qualifications),
163        skills: posting.skills ? strip(String(posting.skills)) : null,
164    };
165}
166
167/** Fallback for ATS-sourced offers that ship no JSON-LD: read the header tags and the description sections. */
168function parseDetailHtml($, strip) {
169    const title = $('[data-cy="jobTitle"]').first().text().trim();
170    if (!title) return null;
171    const tags = $('h1').closest('div').parent().find('li').map((_, li) => $(li).text().replace(/\s+/g, ' ').trim()).get().filter(Boolean);
172    const salaryTag = tags.find((t) => /€/.test(t)) || null;
173    const sal = parseSalary(salaryTag);
174    const exp = tags.map((t) => t.match(/Exp\.\s*(\d+)\s*an/i)).find(Boolean);
175    const edu = tags.filter((t) => /^Bac\b/i.test(t));
176    const remote = tags.find((t) => /t[ée]l[ée]travail/i.test(t)) || null;
177    const sector = tags.find((t) => /secteur/i.test(t)) || null;
178    const sections = {};
179    $('section, details').each((_, el) => {
180        const h = $(el).find('h2').first().text().replace(/\s+/g, ' ').trim();
181        if (!h) return;
182        const body = $(el).clone();
183        body.find('h2, button, summary, svg').remove();
184        const txt = strip(body.html() || '');
185        if (txt && txt.length > 20) sections[h] = txt;
186    });
187    const missions = Object.entries(sections).find(([k]) => /missions|d[ée]tail du poste/i.test(k))?.[1] || null;
188    const profile = Object.entries(sections).find(([k]) => /profil/i.test(k))?.[1] || null;
189    const company = Object.entries(sections).find(([k]) => /entreprise|bienvenue/i.test(k))?.[1] || null;
190    return {
191        title,
192        salaryMin: sal?.min ?? null,
193        salaryMax: sal?.max ?? null,
194        salaryCurrency: sal ? 'EUR' : null,
195        salaryUnit: sal?.period === 'year' ? 'YEAR' : sal?.period === 'month' ? 'MONTH' : sal?.period ? sal.period.toUpperCase() : null,
196        salaryIsEstimate: /estimation/i.test(salaryTag || ''),
197        experienceMonths: exp ? Number(exp[1]) * 12 : null,
198        educationRequirements: edu,
199        remote,
200        industry: sector ? sector.split('•').map((s) => s.trim()) : null,
201        description: [missions, profile].filter(Boolean).join('\n\n') || null,
202        qualifications: profile,
203        companyDescription: company,
204        source: 'html',
205    };
206}
207
208export async function fetchSearch(params, opts) {
209    const url = buildSearchUrl(params);
210    const { text } = await fetchText(url, opts);
211    if (!text) return { url, total: 0, jobs: [] };
212    return { url, ...parseSearchPage(text) };
213}
214
215export async function fetchDetail(url, opts) {
216    const { text } = await fetchText(url, opts);
217    return text ? parseDetailPage(text) : null;
218}

src/main.js

1import { Actor, log } from 'apify';
2import { fetchDetail, fetchSearch, parseRelativeDate, parseSalary, parseSearchUrl } from './hellowork.js';
3
4const DETAIL_CONCURRENCY = 6;
5const MAX_PAGES = 100; // 30 jobs per page
6
7await Actor.init();
8const input = (await Actor.getInput()) || {};
9const { keywords = [], startUrls = [], includeDetails = true, maxItems = 100 } = input;
10
11const chargeable = Actor.getChargingManager().getPricingInfo().isPayPerEvent;
12const charge = async (eventName) => (chargeable ? Actor.charge({ eventName }) : { eventChargeLimitReached: false });
13
14const searches = [];
15for (const k of keywords) if (typeof k === 'string') searches.push({ ...input, keyword: k.trim() });
16for (const s of startUrls) {
17    const url = typeof s === 'string' ? s : s?.url;
18    if (!url) continue;
19    try { searches.push({ ...input, ...parseSearchUrl(url) }); } catch (e) { log.warning(`Bad start URL ${url}: ${e.message}`); }
20}
21if (!searches.length) searches.push({ ...input, keyword: '' });
22
23const limit = maxItems > 0 ? maxItems : Infinity;
24const seen = new Set();
25let pushed = 0;
26let detailMisses = 0;
27let stop = false;
28
29for (const s of searches) {
30    if (stop) break;
31    let page = 1;
32    let total = null;
33    while (!stop && page <= MAX_PAGES) {
34        const res = await fetchSearch({ ...s, page });
35        if (page === 1) { total = res.total; log.info(`Search "${s.keyword || '*'}" ${s.location ? `@ ${s.location}` : ''}: ${total ?? '?'} offers`, { url: res.url }); }
36        const fresh = res.jobs.filter((j) => j.id && !seen.has(j.id));
37        for (const j of fresh) seen.add(j.id);
38        if (!fresh.length) break;
39        const batch = fresh.slice(0, Math.max(0, limit - pushed));
40
41        for (let i = 0; i < batch.length && !stop; i += DETAIL_CONCURRENCY) {
42            const slice = batch.slice(i, i + DETAIL_CONCURRENCY);
43            const details = includeDetails
44                ? await Promise.all(slice.map((j) => fetchDetail(j.url).catch((e) => { log.debug(`detail failed ${j.url}: ${e.message}`); return null; })))
45                : slice.map(() => null);
46            for (let k = 0; k < slice.length; k++) {
47                const j = slice[k];
48                const d = details[k];
49                if (includeDetails && !d) detailMisses++;
50                const sal = parseSalary(j.salaryText);
51                const base = {
52                    id: j.id,
53                    url: j.url,
54                    title: j.title,
55                    companyName: j.company,
56                    location: j.location,
57                    contract: j.contract,
58                    salaryMin: sal?.min ?? null,
59                    salaryMax: sal?.max ?? null,
60                    salaryPeriod: sal?.period ?? null,
61                    salaryText: j.salaryText,
62                    postedText: j.postedText,
63                    postedAtApprox: parseRelativeDate(j.postedText),
64                    scrapedAt: new Date().toISOString(),
65                };
66                const l = await charge('job-listing');
67                if (l.eventChargeLimitReached) { stop = true; break; }
68                if (d) {
69                    const dc = await charge('job-detail');
70                    if (dc.eventChargeLimitReached) { await Actor.pushData(base); pushed++; stop = true; break; }
71                }
72                await Actor.pushData(d ? { ...base, ...d, title: d.title || base.title, companyName: d.companyName || base.companyName, salaryMin: d.salaryMin ?? base.salaryMin, salaryMax: d.salaryMax ?? base.salaryMax } : base);
73                pushed++;
74                if (pushed >= limit) { stop = true; break; }
75            }
76        }
77        if (res.jobs.length < 30) break;
78        page++;
79    }
80}
81
82log.info(`Done. Pushed ${pushed} jobs${includeDetails ? ` (${detailMisses} without details)` : ''}.`);
83await Actor.setValue('SUMMARY', { pushed, detailMisses, searches: searches.length, finishedAt: new Date().toISOString() });
84await Actor.exit();

test/hellowork.test.js

1import { test } from 'node:test';
2import assert from 'node:assert/strict';
3import { readFileSync } from 'node:fs';
4import { buildSearchUrl, parseSearchUrl, parseSalary, parseRelativeDate, parseSearchPage, parseDetailPage, fetchSearch, fetchDetail } from '../src/hellowork.js';
5
6const fx = (n) => readFileSync(new URL(`./fixtures/${n}`, import.meta.url), 'utf8');
7
8test('buildSearchUrl encodes keyword, location, contracts, radius, period, sort, page', () => {
9    const u = new URL(buildSearchUrl({ keyword: 'développeur', location: 'Lille', contracts: ['CDI', 'CDD', 'BOGUS'], radiusKm: 30, period: '7d', sortBy: 'date', page: 3 }));
10    assert.equal(u.searchParams.get('k'), 'développeur');
11    assert.equal(u.searchParams.get('l'), 'Lille');
12    assert.deepEqual(u.searchParams.getAll('c'), ['CDI', 'CDD']);
13    assert.equal(u.searchParams.get('ray'), '30');
14    assert.equal(u.searchParams.get('d'), 'w');
15    assert.equal(u.searchParams.get('st'), 'date');
16    assert.equal(u.searchParams.get('p'), '3');
17});
18
19test('parseSearchUrl round-trips', () => {
20    const out = parseSearchUrl('https://www.hellowork.com/fr-fr/emploi/recherche.html?k=comptable&l=Paris&c=CDI&c=Stage&ray=10&d=m&st=relevance');
21    assert.deepEqual(out, { keyword: 'comptable', location: 'Paris', contracts: ['CDI', 'Stage'], radiusKm: 10, period: 'm', sortBy: 'relevance' });
22});
23
24test('parseSalary handles ranges, single values, periods and narrow spaces', () => {
25    assert.deepEqual(parseSalary('35 000 - 40 000 € / an'), { min: 35000, max: 40000, period: 'year', raw: '35 000 - 40 000 € / an' });
26    assert.equal(parseSalary('2 100 € / mois').period, 'month');
27    assert.equal(parseSalary('38 000 € / an').max, 38000);
28    assert.equal(parseSalary('Estimation Hellowork → 40 000 - 47 500 € / an').max, 47500);
29    assert.equal(parseSalary(''), null);
30});
31
32test('parseRelativeDate converts French relative text', () => {
33    const now = new Date('2026-10-14T12:00:00Z');
34    assert.equal(parseRelativeDate('il y a 16 jours', now), '2026-09-28T12:00:00.000Z');
35    assert.equal(parseRelativeDate('il y a une heure', now), '2026-10-14T11:00:00.000Z');
36    assert.equal(parseRelativeDate('hier', now), null);
37});
38
39test('parseSearchPage extracts cards from a real page', () => {
40    const { total, jobs } = parseSearchPage(fx('search.html'));
41    assert.equal(total, 623);
42    assert.equal(jobs.length, 30);
43    const j = jobs.find((x) => x.id === '67170737');
44    assert.ok(j);
45    assert.match(j.title, /Automatisme/);
46    assert.equal(j.company, "Mercato de l'emploi");
47    assert.equal(j.location, 'Lille - 59');
48    assert.equal(j.contract, 'CDI');
49    assert.match(j.salaryText, /40.000/);
50    assert.equal(j.postedText, 'il y a 16 jours');
51    assert.equal(j.url, 'https://www.hellowork.com/fr-fr/emplois/67170737.html');
52});
53
54test('parseDetailPage reads schema.org JobPosting', () => {
55    const d = parseDetailPage(fx('detail-jsonld.html'));
56    assert.equal(d.companyName, "Mercato de l'emploi");
57    assert.equal(d.salaryMin, 35000);
58    assert.equal(d.salaryMax, 40000);
59    assert.equal(d.experienceMonths, 12);
60    assert.equal(d.city, 'Lille');
61    assert.equal(d.postalCode, '59000');
62    assert.equal(d.employmentType, 'FULL_TIME');
63    assert.ok(d.description.length > 500);
64    assert.ok(!/<p>/.test(d.description));
65});
66
67test('parseDetailPage falls back to HTML for ATS offers without JSON-LD', () => {
68    const d = parseDetailPage(fx('detail-html-only.html'));
69    assert.equal(d.source, 'html');
70    assert.match(d.title, /Fullstack Java/);
71    assert.equal(d.salaryMin, 40000);
72    assert.equal(d.salaryIsEstimate, true);
73    assert.equal(d.experienceMonths, 60);
74    assert.equal(d.remote, 'Télétravail partiel');
75    assert.ok(d.description.includes('Vos missions'));
76    assert.ok(d.qualifications.includes('5 ans minimum'));
77});
78
79test('live: search and detail endpoints still work', { skip: !process.env.HW_LIVE }, async () => {
80    const r = await fetchSearch({ keyword: 'développeur', location: 'Lille', period: '30d' });
81    assert.ok(r.total > 10 && r.jobs.length > 5, `got ${r.total}/${r.jobs.length}`);
82    const d = await fetchDetail(r.jobs[0].url);
83    assert.ok(d && d.title);
84});

test/fixtures/detail-html-only.html

<!DOCTYPE html>
<html lang="fr-fr"
    class="scroll-smooth"
    data-controller="fetch-account-data"
    data-fetch-account-data-url-value="/fr-fr/compte/accountdata"
>
<head>
    
<!--
En visualisant le code source vous acceptez les CGU accessibles à l’adresse : https://www.hellowork.comhttps://www.hellowork-group.com/fr/legal/cgu-hellowork/
Notamment l’article 8.2
L’Utilisateur peut uniquement utiliser le Site aux fins d’accéder aux Services, ce exclusivement à des fins privées et non commerciales.
Il est notamment expressément reconnu et accepté par l’Utilisateur que l’utilisation de systèmes automatisés ou de logiciels pour extraire des données du Site, en particulier le Contenu et la CVthèque (« capture de données d’écran » / « screen scraping / web scraping» notamment), à quelques fins que ce soit, commerciales ou non, est strictement interdite, à moins que Hellowork n’ait conclu une convention de licence écrite autorisant expressément l’Utilisateur à extraire une partie des données du Site.
-->


    <meta charset="UTF-8"/>

    <title>Offre Emploi CDI D&#xE9;veloppeur Fullstack Java Angular Kubernetes Lille (59) | Hellowork</title>

    <script type="text/javascript">
    /* Init du push de piano analytics */
     window._pac = window._pac || {};
      _pac.queueVarName = "_paqpiano";
      var _paqpiano = window._paqpiano || [];
</script>


    <!-- #region Google_Tag_Manager -->
<script>window.dataLayer = window.dataLayer || [];window.dataLayer.push({"categoryPage":"Detail","sujetPage":"Offre","typePage":"DO-Classique","idOffre":"84336130","Metier":"developpeur","IsNewJob":"new","Domaine":"informatique","Tags":"cdi, oracle, stable, developpement, cycle, java, support, planning, confirme, agile, api, autonomie, equipe, experience, front, integration, jira, kubernetes, postgresql, spring-boot, test-automatise, typescript","Fonction":"informatique","Region":"hauts-de-france","Departement":"nord","Ville":"lille-59000","Nom-Entreprise":"","typeEntreprise":"","Taille-Texte":"260","IsMobile":"False","searchLocalite":"","searchFonction":"","searchTypeContrat":"","searchMetier":"","searchDomaine":"","contrat":"CDI","datePublicationOffre":"20261012","idCategory":1,"page_tab":"","EnhancedEcommerce":"true","ecommerce":{"currencyCode":"EUR","detail":{"products":[{"name":"none","id":"84336130","price":"1","brand":"none","category":"1","response_type":"ATS","dimension77":"False"}]},"impressions":[{"name":"none","id":"83881052","price":"1","brand":"none","category":"1","response_type":"ATS","list":"LO-Suggest-Detail","position":"1"},{"name":"none","id":"82502480","price":"1","brand":"none","category":"1","response_type":"ATS","list":"LO-Suggest-Detail","position":"2"},{"name":"none","id":"83302602","price":"1","brand":"none","category":"1","response_type":"UrlWithForm","list":"LO-Suggest-Detail","position":"3"},{"name":"none","id":"84245968","price":"1","brand":"none","category":"1","response_type":"ATS","list":"LO-Suggest-Detail","position":"4"}]},"page_component":["salaire-estime","competences-requises","esn","profil-recherché"]});</script>    <!-- Conditionne l'ajout du script en fonction de la navigation turbo -->
    

    
<script>
    (function (w, d, s, l, i) {
    w[l] = w[l] || []; w[l].push({
        'gtm.start':
            new Date().getTime(), event: 'gtm.js'
    }); var f = d.getElementsByTagName(s)[0],
        j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src =
            'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f);
    })(window, document, 'script', 'dataLayer', 'GTM-PZLHDH');</script>

    <!-- #endregion Google_Tag_Manager -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <meta name="view-transition" content="same-origin"/>
    <meta name="google-site-verification" content="b_h5Dmw6rHMyhuTzlkJkv2R0MhFhbL2wqV1cEoud_Bg"/>
    <meta property="og:title" content="Offre Emploi CDI D&#xE9;veloppeur Fullstack Java Angular Kubernetes Lille (59) | Hellowork">
    <meta property="og:description" content="Decouvrez l&#x27;offre d&#x27;Emploi D&#xE9;veloppeur Fullstack Java Angular Kubernetes Lille (59) en CDI. &#x2713; Postulez d&#xE8;s maintenant &#x2713; Candidature Simple &amp; Rapide !">
    <meta name="description" content="Decouvrez l&#x27;offre d&#x27;Emploi D&#xE9;veloppeur Fullstack Java Angular Kubernetes Lille (59) en CDI. &#x2713; Postulez d&#xE8;s maintenant &#x2713; Candidature Simple &amp; Rapide !">
    <meta property="og:url" content="https://www.hellowork.com/fr-fr/emplois/84336130.html">
    <meta property="og:site_name" content="www.hellowork.com">
    <meta property="og:image" content="https://f.hellowork.com/hellowork/img/placeholders/og-image-hellowork.jpg" itemprop="image">
    <meta property="og:locale" content="fr_FR">
    <meta property="og:type" content="website">


        <meta name="twitter:card" content="summary">
        <meta name="twitter:site" content="@hellowork">
        <meta name="twitter:title" content="Offre Emploi CDI D&#xE9;veloppeur Fullstack Java Angular Kubernetes Lille (59) | Hellowork">
        <meta name="twitter:description" content="Decouvrez l&#x27;offre d&#x27;Emploi D&#xE9;veloppeur Fullstack Java Angular Kubernetes Lille (59) en CDI. &#x2713; Postulez d&#xE8;s maintenant &#x2713; Candidature Simple &amp; Rapide !">
        <meta name="twitter:domain" content="www.hellowork.com">
        <meta name="twitter:app:id:googleplay" content="com.regionsjob.android"/>
        <meta name="twitter:app:id:ipad" content="408615037"/>
        <meta name="twitter:app:id:iphone" content="408615037"/>
        <meta name="twitter:app:name:iphone" content="Hellowork"/>
        <meta name="twitter:app:name:ipad" content="Hellowork"/>
        <meta name="twitter:app:name:googleplay" content="Hellowork"/>

    <meta property="al:ios:app_name" content="Hellowork"/>
    <meta property="al:ios:app_store_id" content="408615037"/>
    <meta property="al:android:app_name" content="Hellowork"/>
    <meta property="al:android:package" content="com.regionsjob.android"/>

    
<meta name="robots" content="index, follow">
<link rel="canonical" href="https://www.hellowork.com/fr-fr/emplois/84336130.html" />

    
     
 

    
    <link rel="preload" href="https://f.hellowork.com/hellowork/ressources/2.57.9/fonts/inter-roman-latin-sliced.woff2" as="font" type="font/woff2" crossorigin />

    
    <link rel="stylesheet" type="text/css" href="https://f.hellowork.com/hellowork/ressources/2.57.9/styles/tailwind.dist.css">

    
<link rel="icon" type="image/x-icon" href="https://f.hellowork.com/hellowork/img/favicons/hellowork/favicon.ico" />
    

    <meta name="turbo-prefetch" content="false">
    

    


<script type="application/ld&#x2B;json">
    {"@context": "https://schema.org","@type": "WebSite","name" : "Hellowork","url": "https://www.hellowork.com/fr-fr/"}
</script>



    
<script type="application/ld&#x2B;json">
  {"@context":"https://schema.org","@type":"Organization","name":"Hellowork","sameAs":["https://www.facebook.com/helloworkcom","https://www.youtube.com/channel/UCry7TiN8-dFKQUgyUMYANTQ","https://twitter.com/hellowork","https://www.tiktok.com/@helloworkcom","https://www.instagram.com/hellowork_/","https://www.linkedin.com/company/helloworkcom/"],"url":"https://www.hellowork.com","logo":{"@type":"ImageObject","url":"https://f.hellowork.com/hellowork/ressources/2.57.9/images/png/logo_hellowork.png"}}
</script>

        
    <!-- section MicroDataBreadCrumbTrail -->
    <script type="application/ld&#x2B;json">
        {"@context":"https://schema.org","@type":"BreadcrumbList","name":"Fil d\u0027Ariane","itemListElement":[{"@type":"ListItem","name":"Accueil","item":"https://www.hellowork.com/fr-fr/","position":1},{"@type":"ListItem","name":"Emploi","item":"https://www.hellowork.com/fr-fr/emploi.html","position":2},{"@type":"ListItem","name":"Emploi Lille","item":"https://www.hellowork.com/fr-fr/emploi/ville_lille-59000.html","position":3},{"@type":"ListItem","name":"Emploi Informatique Lille","item":"https://www.hellowork.com/fr-fr/emploi/domaine_informatique-ville_lille-59000.html","position":4},{"@type":"ListItem","name":"Emploi D\u00E9veloppeur Lille","item":"https://www.hellowork.com/fr-fr/emploi/metier_developpeur-ville_lille-59000.html","position":5},{"@type":"ListItem","name":"D\u00E9veloppeur Fullstack Java - Angular - Kubernetes H/F","position":6}]}
    </script>

        
    
    
    
    
    
    

        <meta name="rjtrackaction" content="4" />
    <meta name="rjtrackcontent" content="2" />
    <meta name="rjtrackcontentid" content="84336130" />
    <meta name="rjtrackcontentappid" content="41" />
    <meta name="rjtrak" content="[7630731289,8640123374,8709946588,9314096828,9549184342,9590446725,9644231707,9702113544,9855024576,10263716004,10364331932,10460755625,10899737476,10999975599,11080455355,11156039385,11181966478,11186916096,11378898563,11383006874,11490867111,11632368976,11930092782,12005652539,12042955760,12084112055,12265317483,12327276852,12333894124,12488136615,12716735131,64455322732,70548286087,89656274803,97764593725,103953702508,104680829473,117377806347,117384733456,117861814021,120637135294,434814930880,435315064208,445739691350,38663883327,60373542938,30064773265,30064773280,34359740616]" />

    <script>
    document.addEventListener("DOMContentLoaded", function (event) {
        var isCookedMarketing = function () {
            var value = '; ' + document.cookie,
                parts = value.split('; hw-cc-first-party=');
            if (parts.length !== 2) return false;
            return JSON.parse(decodeURIComponent(parts.pop().split(';').shift())).marketing;
        }
        if (isCookedMarketing()) {
            var script = document.createElement("script");
            script.setAttribute("async", "true");
            script.setAttribute("src", "https://securepubads.g.doubleclick.net/tag/js/gpt.js");
            
            var ref = document.querySelector("script");

            ref.parentNode.insertBefore(script, ref);
        }
    });

    window.googletag = window.googletag || { cmd: [] };
</script>
</head>

    <body class="relative typo-s" data-controller="toggle-on-body analytics tracker scroll-to-top mutable content-missing display-toast-message service-unsubscriber page-restore" data-mutable-event-name-value="pageLoaded" data-toggle-on-body-toggled-class="overflow-hidden" data-action="mutable:pageLoaded->tracker#identify turbo:frame-missing@window->content-missing#handleFrameMissing">
        <a
            class="
                hidden
                xl:block
                sr-only
                focus-visible:!btn-primary-l
                focus-visible:not-sr-only
                focus-visible:w-64
                focus-visible:top-4
                focus-visible:left-4
                focus-visible:absolute
                focus-visible:z-40
                focus-visible:py-3
            "
            href="#main-content"
        >
            Aller au contenu principal
        </a>
        <main>
            

<script>
    window.HelloworkCookieConsentCustomConfig = {
        privacyPolicyUrl: "https://www.hellowork-group.com/fr/legal/pdc-hellowork/",
        noticeModal: true,
        primaryBtnBackgroundColor: "#000000",
        continueWithoutAcceptingTextOutlineColor: "#ffffff",
        noticeModalLogo: "/images/logo/hellowork.svg",
        btnDenyCookies: true,
        btnDenyCookiesType: "continue-without-accepting",
        cookieSelectedCallback: (hasAccepted = false) => {
            document.dispatchEvent(new CustomEvent('marketingCookiesChanged', {"detail": { "hasAccepted": hasAccepted }}));
        }
    };

    document.addEventListener("DOMContentLoaded", function () {
        window.helloworkCookieConsent = new HelloworkCookieConsent();
    })
</script>
<script src="https://f.hellowork.com/hw-cookie-consent/latest/embed.js" defer></script>

<noscript>
    <iframe title="Hellowork" src="https://www.googletagmanager.com/ns.html?id=GTM-PZLHDH"
            height="0" width="0" style="display:none;visibility:hidden"></iframe>
</noscript>
    
<script>
    (function(d,s,b,u){if(!b.__SV){window.tracker=b;b._c=[];
        b.init=function(c){function f(b, h){b[h]=function(){
                b.push([h].concat(Array.prototype.slice.call(arguments, 0)));}}c.trackerUrl=u;b._c=c;
            var i="track extract_metas identify set_config whoami track_metas track_action loaded getWk".split(" ");
            for(g=0;g<i.length;g++)f(b, i[g]);};b.__SV = 1.0;var f=d.getElementsByTagName(s)[0],
            j=d.createElement(s);j.async=!0;j.src=u+"javascripts/tracker-2-latest.min.js";
        f.parentNode.insertBefore(j, f);}})
    (document,"script",[],"//t.hellowork.com/");
    
    tracker.init({
        /* Debug mode pour logs */
        isDebug:  false,
        /* Identifiant du site de tracking */
        trackerSiteId: 41,
        /* Domaine de tracking */
        trackerDomainId: 2,
        /* Cookie consent */
        cookieConsent: false
    });
</script>

            <script>dataLayer.push({ 'Connexion' : 'Non-Connecte','UAIdXjob' : 'UA-32617926-5'})</script>

                <div class="flex">
                    <div class="grow">
                      




















<turbo-frame id="modal-new-profile" data-content-missing-target="excluded">
    <form 
        id="formCustomOneTap"
        data-controller="auto-submittable"
        action="/fr-fr/candidat/onetapturbocustom"
        method="post"
    >
        <input 
            type="hidden" 
            name="auto-submit" 
            data-controller="mutable" 
            data-action="mutable:connected->auto-submittable#submit"
        >

    </form>

    <form id="formOneTap" action="/fr-fr/candidat/onetapturbo" method="post">
        <input type="hidden" name="clientId">
        <input type="hidden" name="credential">
        <input type="hidden" name="selectBy">
    </form>

    <div id="g_id_onload"
         data-client_id="983461533668-5f2b35au8h7fpiu443ich72bb8juf60l.apps.googleusercontent.com"
        data-callback="setFormWithGoogleCredential"
        data-skip_prompt_cookie="hw_onetap"
        data-auto_select="false"
        data-cancel_on_tap_outside="false"
        data-use_fedcm_for_prompt="true"
        class="z-50">
    </div>

    <script>
        function setFormWithGoogleCredential(response) {
            const formOneTap = document.getElementById('formOneTap')
            formOneTap.querySelector('input[name="clientId"]').value = response.clientId
            formOneTap.querySelector('input[name="credential"]').value = response.credential
            formOneTap.querySelector('input[name="selectBy"]').value = response.select_by
            formOneTap.requestSubmit()
        }
    </script>
</turbo-frame>

<div 
    data-controller="onetap-importer"
    data-onetap-importer-custom-url-value="/fr-fr/candidat/customonetapframeview"
>
    <turbo-frame id="one-tap-custom" data-onetap-importer-target="customFrame" src="" ></turbo-frame>
    <script
        async defer
        data-action="marketingCookiesChanged@document-&gt;onetap-importer#importScriptFromEvent:once"
        data-onetap-importer-target="scriptElement"
    ></script>
</div>


<div>
    <!-- input caché utilisé pour déclencher l'affichage du side pannel  -->
    <input type="checkbox" hidden id="cp-mobile-menu-side-panel" class="peer">
    <!-- Side Panel pour le menu mobile -->
    <div class="fixed
                flex
                flex-col
                h-full 
                z-50
                top-0
                cp-menu-width
                bg-grey-50 
                transform 
                ease-in 
                duration-400
                peer-checked:translate-x-full
                xl:hidden">
        <nav aria-label="Menu de navigation" 
             class="h-full flex flex-col justify-between overflow-y-auto" 
             data-controller="focus-trap"
             data-focus-trap-target="container">
            <div class="hidden connected:block px-6 py-8 flex-grow">
                


<div class="flex pb-14 xl:hidden justify-between">
    <div class="flex justify-between">
        <div data-controller="toggle"
             data-toggle-toggled-class="hidden"
             data-action="from-account-data:empty@document->toggle#add from-account-data:copied:Initials@document->toggle#remove"
             data-toggle-target="toToggle"
             class="flex flex-col gap-3">
            



<div
    class="bg-blue-500 min-w-16 min-h-16 size-16 rounded-full flex items-center justify-center relative overflow-hidden">
    <div class="text-white absolute typo-xl-bold"
         data-controller="from-account-data"
         data-action="fetch-account-data:account-data-refreshed@document->from-account-data#copy"
         data-from-account-data-copy-value="Initials"
         data-from-account-data-into-value="innerText">
    </div>
</div>
            <div class="flex flex-col">
                <span class="flex flex-wrap typo-l-bold pb-1 break-all">
                    <span data-controller="from-account-data"
                          data-action="fetch-account-data:account-data-refreshed@document->from-account-data#copy"
                          data-from-account-data-copy-value="FirstName"
                          data-from-account-data-into-value="innerText">
                    </span>
                    <span class="px-[2px]"></span>
                    <span data-controller="from-account-data"
                          data-action="fetch-account-data:account-data-refreshed@document->from-account-data#copy"
                          data-from-account-data-copy-value="LastName"
                          data-from-account-data-into-value="innerText">
                    </span>
                </span>
                <span class="typo-m text-grey-500 break-all"
                      data-controller="from-account-data"
                      data-action="fetch-account-data:account-data-refreshed@document->from-account-data#copy"
                      data-from-account-data-copy-value="Email"
                      data-from-account-data-into-value="innerText">
                </span>
            </div>
        </div>
        <div data-controller="toggle"
             data-toggle-toggled-class="hidden"
             data-action="from-account-data:empty@document->toggle#remove from-account-data:copied:Initials@document->toggle#add"
             data-toggle-target="toToggle"
             class="hidden flex flex-col gap-4">
            


<div
    class="bg-grey-100 min-w-16 min-h-16 size-16 rounded-full flex items-center justify-center relative overflow-hidden">
    <svg
        class="text-grey-300 aspect-[38/44] w-[38px] absolute bottom-0">
        <use href="/svg/icons/user.svg#avatar"></use>
    </svg>
</div>
            <span class="typo-s">
                <span data-controller="atc" data-atc-l-value="x/se-se/pnaqvqng/zba-cebsvy=pt=ugzyf">Complétez votre profil</span> pour recevoir des offres adaptées.
            </span>
        </div>
    </div>
    <button class="self-start"
        data-controller="input-checker"
        data-input-checker-input-value="#cp-mobile-menu-side-panel"
        aria-label="Fermer le menu"
        data-action="toggle-on-body#remove click->input-checker#uncheck">
        <!-- Icône de fermeture -->
        <svg class="size-3">
            <use href="/svg/icons/nav/close.svg#close"></use>
        </svg>
    </button>
</div>
<div class="flex flex-col gap">
    <span class="mb-[148px] hidden xl:block"
          data-controller="atc"
          data-atc-l-value="x/se-sef"
    >
        <svg class="aspect-[99/44] h-10">
            <use href="/svg/logo/hellowork.svg#black"></use>
        </svg>
    </span>
    <div class="flex flex-col gap-8">
        <span class="rounded-full px-4 py-2 no-underline hover:bg-grey-100 focus:bg-grey-100 active:bg-grey-300"
              data-controller="atc cp-menu-item"
              data-cy="cpMenuDashboard"
              data-atc-l-value="x/se-se/pnaqvqng/zba-rfcnpr=pt=ugzyf"
              data-cp-menu-item-url-value="/fr-fr/candidat/mon-espace.html"
              data-cp-menu-item-active-class="bg-grey-100"
              data-cp-menu-item-hidden-class="hidden"
              data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;event_info&quot;:&quot;espace-candidat&quot;,&quot;wording&quot;:&quot;Mon espace&quot;}"
              data-action="click->analytics#push"
        >
            <div class="flex typo-m gap-3 items-center">
                <svg
                    class="size-4"
                    data-cp-menu-item-target="inactiveIcon">
                    <use href="/svg/icons/home.svg#home"></use>
                </svg>
                <svg
                    class="size-4 hidden"
                    data-cp-menu-item-target="activeIcon">
                    <use href="/svg/icons/home.svg#home-active"></use>
                </svg>
                Mon espace
            </div>
        </span>
        <span class="rounded-full px-4 py-2 no-underline hover:bg-grey-100 focus:bg-grey-100 active:bg-grey-300"
              data-controller="atc cp-menu-item"
              data-cy="cpMenuCV"
              data-atc-l-value="x/se-se/pnaqvqng/zrf-pi-ihf=pt=ugzyf"
              data-cp-menu-item-url-value="/fr-fr/candidat/mes-cv-vus.html"
              data-cp-menu-item-active-class="bg-grey-100"
              data-cp-menu-item-hidden-class="hidden"
              data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;event_info&quot;:&quot;espace-candidat&quot;,&quot;wording&quot;:&quot;Mes CV vus&quot;}"
              data-action="click->analytics#push"
        >
            <div class="flex typo-m gap-3 items-center">
                <svg class="size-4"
                     data-cp-menu-item-target="inactiveIcon">
                    <use href="/svg/icons/cv.svg#cv"></use>
                </svg>
                <svg class="size-4 hidden"
                     data-cp-menu-item-target="activeIcon">
                    <use href="/svg/icons/cv.svg#cv-active"></use>
                </svg>
                Mes CV vus
            </div>
        </span>
        <span class="rounded-full px-4 py-2 no-underline hover:bg-grey-100 focus:bg-grey-100 active:bg-grey-300"
              data-controller="atc cp-menu-item"
              data-cy="cpMenuOfferResponses"
              data-atc-l-value="x/se-se/pnaqvqng/zrf-pnaqvqngherf=pt=ugzyf"
              data-cp-menu-item-url-value="/fr-fr/candidat/mes-candidatures.html"
              data-cp-menu-item-active-class="bg-grey-100"
              data-cp-menu-item-hidden-class="hidden"
              data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;event_info&quot;:&quot;espace-candidat&quot;,&quot;wording&quot;:&quot;Mes candidatures&quot;}"
              data-action="click->analytics#push"
        >
            <div class="flex typo-m gap-3 items-center">
                <svg
                    class="size-4"
                    data-cp-menu-item-target="inactiveIcon">
                    <use href="/svg/icons/offre.svg#offre"></use>
                </svg>
                <svg
                    class="size-4 hidden"
                    data-cp-menu-item-target="activeIcon">
                    <use href="/svg/icons/offre.svg#offre-active"></use>
                </svg>
                Mes candidatures
            </div>
        </span>
        <span class="rounded-full px-4 py-2 no-underline hover:bg-grey-100 focus:bg-grey-100 active:bg-grey-300"
              data-controller="atc cp-menu-item"
              data-cy="cpMenuAlerts"
              data-atc-l-value="x/se-se/pnaqvqng/zrf-nyregrf=pt=ugzyf"
              data-cp-menu-item-url-value="/fr-fr/candidat/mes-alertes.html"
              data-cp-menu-item-active-class="bg-grey-100"
              data-cp-menu-item-hidden-class="hidden"
              data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;event_info&quot;:&quot;espace-candidat&quot;,&quot;wording&quot;:&quot;Mes alertes&quot;}"
              data-action="click->analytics#push"
        >
            <div class="flex typo-m gap-3 items-center">
                <svg
                    class="size-4"
                    data-cp-menu-item-target="inactiveIcon">
                    <use href="/svg/icons/alertes.svg#alertes"></use>
                </svg>
                <svg
                    class="size-4 hidden"
                    data-cp-menu-item-target="activeIcon">
                    <use href="/svg/icons/alertes.svg#alertes-active"></use>
                </svg>
                Mes alertes
            </div>
        </span>
        <span class="rounded-full px-4 py-2 no-underline hover:bg-grey-100 focus:bg-grey-100 active:bg-grey-300"
              data-controller="atc cp-menu-item"
              data-cy="cpMenuProfil"
              data-atc-l-value="x/se-se/pnaqvqng/zba-cebsvy=pt=ugzyf"
              data-cp-menu-item-url-value="/fr-fr/candidat/mon-profil.html"
              data-cp-menu-item-active-class="bg-grey-100"
              data-cp-menu-item-hidden-class="hidden"
              data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;event_info&quot;:&quot;espace-candidat&quot;,&quot;wording&quot;:&quot;Mon profil&quot;}"
              data-action="click->analytics#push"
        >
            <div class="flex typo-m gap-3 items-center">
                <svg
                    class="size-4"
                    data-cp-menu-item-target="inactiveIcon">
                    <use href="/svg/icons/user.svg#user"></use>
                </svg>
                <svg
                    class="size-4 hidden"
                    data-cp-menu-item-target="activeIcon">
                    <use href="/svg/icons/user.svg#user-active"></use>
                </svg>
                Mon profil
            </div>
        </span>
        <span class="rounded-full px-4 py-2 no-underline hover:bg-grey-100 focus:bg-grey-100 active:bg-grey-300"
              data-controller="atc cp-menu-item"
              data-cy="cpMenuParameters"
              data-atc-l-value="x/se-se/pnaqvqng/cnenzrgerf=pt=ugzyf"
              data-cp-menu-item-url-value="/fr-fr/candidat/parametres.html"
              data-cp-menu-item-active-class="bg-grey-100"
              data-cp-menu-item-hidden-class="hidden"
              data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;event_info&quot;:&quot;espace-candidat&quot;,&quot;wording&quot;:&quot;Param&#xE8;tres&quot;}"
              data-action="click->analytics#push"
        >
            <div class="flex typo-m gap-3 items-center">
                <svg
                    class="size-4"
                    data-cp-menu-item-target="inactiveIcon">
                    <use href="/svg/icons/settings.svg#settings"></use>
                </svg>
                <svg
                    class="size-4 hidden"
                    data-cp-menu-item-target="activeIcon">
                    <use href="/svg/icons/settings.svg#settings-active"></use>
                </svg>
                Param&#xE8;tres
            </div>
        </span>
        <span class="xl:hidden rounded-full px-4 py-2 no-underline hover:bg-grey-100 focus:bg-grey-100 active:bg-grey-300"
              data-controller="atc cp-menu-item"
              data-cy="cpMenuLogOff"
              data-atc-l-value="x/se-se/pnaqvqng/ybtbssf"
              data-cp-menu-item-url-value="/fr-fr/candidat/logoff"
              data-cp-menu-item-active-class="bg-grey-100"
              data-cp-menu-item-hidden-class="hidden"
              data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;event_info&quot;:&quot;espace-candidat&quot;,&quot;wording&quot;:&quot;D&#xE9;connexion&quot;}"
              data-action="click->analytics#push"
        >
            <div class="flex typo-m gap-3 items-center">
                <svg class="size-4">
                    <use href="/svg/icons/exit.svg#exit"></use>
                </svg>
                D&#xE9;connexion
            </div>
        </span>
    </div>
</div>

            </div>
            <div class="hidden not-connected:block px-6 py-8 flex-grow">
                



<div class="flex pb-14 xl:hidden justify-between">
    <input type="checkbox" hidden id="cp-mobile-menu-side-panel-employment" class="peer/employment">
    <!-- Side Panel pour l'onglet Emploi -->
    <div class="fixed flex flex-col h-full z-50 top-0 w-full -left-full bg-grey-50 transform ease-in duration-400 xl:hidden peer-checked/employment:translate-x-full">
        <nav aria-label="Onglet Emploi" 
                class="h-full flex flex-col justify-between overflow-y-auto" 
                data-controller="focus-trap"
                data-focus-trap-target="container">
                <div class="px-6 py-8 flex-grow">
                

<div class="flex pb-14 xl:hidden justify-between">
    <button class="self-start"
        data-controller="input-checker"
        data-input-checker-input-value="#cp-mobile-menu-side-panel-employment"
        aria-label="Retour" 
        data-action="toggle-on-body#remove click->input-checker#uncheck">
        <svg class="size-3" aria-hidden="true">
            <use href="/svg/icons/arrow.svg#left"></use>
        </svg>
    </button>
    <button class="self-start"
        data-controller="input-checker"
        data-input-checker-input-value="#cp-mobile-menu-side-panel-employment"
        aria-label="Fermer le menu"
        data-action="toggle-on-body#remove click->input-checker#uncheck">
        <!-- Icône de fermeture -->
        <svg class="size-3">
            <use href="/svg/icons/nav/close.svg#close"></use>
        </svg>
    </button>
</div>
<ul class="flex flex-col gap-6">
    <li>
        <a data-cy="headerJobInterimLink" href="/fr-fr/interim.html" class="typo-m no-underline">Missions d'intérim</a>
    </li>
    <li>
        <a data-cy="headerJobInternshipLink" href="/fr-fr/stage.html" class="typo-m no-underline">Offres de stage</a>
    </li>
    <li>
        <a data-cy="headerJobAlternatelyLink" href="/fr-fr/alternance.html" class="typo-m no-underline">Offres en alternance</a>
    </li>
    <li>
        <span 
            data-cy="headerJobAlertAtc" 
            data-atc-l-value="x/se-se/pnaqvqng/perngvba-nyregr=pt=ugzyf" 
            data-controller="atc" 
            class="typo-m no-underline"
        >
            Créer mon alerte
        </span>
    </li>
    <li>
        <span 
            data-cy="navJobCvAtc" 
            data-controller="atc" 
            data-atc-l-value="x/se-se/cntr/qrcbg-pi=pt=ugzyf" 
            class="typo-m no-underline"
        >
            Déposer mon CV
        </span>
    </li>
    <li>
        <a
            title="Calcul du salaire brut en net"
            href="/fr-fr/outil/salaire-brut-net.html"
            class="typo-m no-underline"
        >
            Salaire brut net
        </a>
    </li>
</ul>


            </div>
            <div class="shrink-0">
                


<div class="bg-blue-200 overflow-hidden px-6 py-4 xl:hidden bg-auto bg-[calc(50%-9px)_center] "
     data-controller="mobile-app"
     style="background-image: url(/svg/illustrations/pattern-chevron.svg)">
    <div class="flex gap-4 items-center justify-between z-10">
        <div class="flex flex-col">
            <span class="typo-m-bold">Téléchargez l'app</span>
            <span class="typo-m-">et postulez dans les <span class="whitespace-nowrap">premiers !</span></span>
        </div>
        <span data-controller="atc"
              data-atc-l-value="xuggcf://nccf=pt=nccyr=pt=pbz/se/ncc/ertvbafwbo-rzcybv/vq408615037?zg=8f"
              data-mobile-app-target="ios"
              data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;app_download&quot;,&quot;event_info&quot;:&quot;Apple&quot;}"
              data-action="click->analytics#push"
        >
            <svg class="w-[108px] h-[31px]">
                <use href="/svg/icons/apps/appstore-badge.svg#appstore-badge"></use>
            </svg>
        </span>
        <span data-controller="atc"
           data-atc-l-value="xuggcf://cynl=pt=tbbtyr=pt=pbz/fgber/nccf/qrgnvyf?vq=pbz=pt=ertvbafwbo=pt=naqebvqf"
           data-mobile-app-target="android"
           data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;app_download&quot;,&quot;event_info&quot;:&quot;Android&quot;}"
           data-action="click->analytics#push"
        >
            <svg class="w-[108px] h-[31px]">
                <use href="/svg/icons/playstore-badge.svg#playstore-badge"></use>
            </svg>
        </span>
    </div>
</div>
            </div>
        </nav>
    </div>
    <input type="checkbox" hidden id="cp-mobile-menu-side-panel-recruiter-access" class="peer/recruiter">
    <!-- Side Panel pour le menu mobile -->
    <div class="fixed flex flex-col h-full z-50 top-0 w-full -left-full bg-grey-50 transform ease-in duration-400 xl:hidden peer-checked/recruiter:translate-x-full">
        <nav aria-label="Onglet Accès Recruteur" 
                class="h-full flex flex-col justify-between overflow-y-auto" 
                data-controller="focus-trap"
                data-focus-trap-target="container">
            <div class="px-6 py-8 flex-grow">
                

<div class="flex pb-14 xl:hidden justify-between">
    <button class="self-start"
            data-controller="input-checker"
            data-input-checker-input-value="#cp-mobile-menu-side-panel-recruiter-access"
            aria-label="Retour" 
            data-action="toggle-on-body#remove click->input-checker#uncheck">
            <svg class="size-3" aria-hidden="true">
                <use href="/svg/icons/arrow.svg#left"></use>
            </svg>
    </button>
    <button class="self-start"
        data-controller="input-checker"
        data-input-checker-input-value="#cp-mobile-menu-side-panel-recruiter-access"
        aria-label="Fermer le menu"
        data-action="toggle-on-body#remove click->input-checker#uncheck">
        <!-- Icône de fermeture -->
        <svg class="size-3">
            <use href="/svg/icons/nav/close.svg#close"></use>
        </svg>
    </button>
</div>
<div class="flex flex-col gap-6">
    <span class="no-underline typo-m"
        data-cy="headerRecruiterLinkPublish"
        data-controller="atc"
        data-atc-l-value="xuggcf://erpehgrhe=pt=uryybjbex=pt=pbz/se/cebqhvg/cyngrsbezr-erpehgrzrag/pbagnpg=pt=ugzyf"
    >
        Diffuser ma première offre
    </span>
    <span class="no-underline typo-m"
        data-cy="headerRecruiterLinkCustomers"
        data-controller="atc"
        data-atc-l-value="xuggcf://ohqqv=pt=uryybjbex=pt=pbzf"
    >
        Déjà client
    </span>
</div>


            </div>
            <div class="shrink-0">
                


<div class="bg-blue-200 overflow-hidden px-6 py-4 xl:hidden bg-auto bg-[calc(50%-9px)_center] "
     data-controller="mobile-app"
     style="background-image: url(/svg/illustrations/pattern-chevron.svg)">
    <div class="flex gap-4 items-center justify-between z-10">
        <div class="flex flex-col">
            <span class="typo-m-bold">Téléchargez l'app</span>
            <span class="typo-m-">et postulez dans les <span class="whitespace-nowrap">premiers !</span></span>
        </div>
        <span data-controller="atc"
              data-atc-l-value="xuggcf://nccf=pt=nccyr=pt=pbz/se/ncc/ertvbafwbo-rzcybv/vq408615037?zg=8f"
              data-mobile-app-target="ios"
              data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;app_download&quot;,&quot;event_info&quot;:&quot;Apple&quot;}"
              data-action="click->analytics#push"
        >
            <svg class="w-[108px] h-[31px]">
                <use href="/svg/icons/apps/appstore-badge.svg#appstore-badge"></use>
            </svg>
        </span>
        <span data-controller="atc"
           data-atc-l-value="xuggcf://cynl=pt=tbbtyr=pt=pbz/fgber/nccf/qrgnvyf?vq=pbz=pt=ertvbafwbo=pt=naqebvqf"
           data-mobile-app-target="android"
           data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;app_download&quot;,&quot;event_info&quot;:&quot;Android&quot;}"
           data-action="click->analytics#push"
        >
            <svg class="w-[108px] h-[31px]">
                <use href="/svg/icons/playstore-badge.svg#playstore-badge"></use>
            </svg>
        </span>
    </div>
</div>
            </div>
        </nav>
    </div>

    <div class="flex justify-between">
        <div class="relative max-w-max top-0 left-0 transition-all ease-in-out duration-300 peer-parent-checked:left-[calc(50%-40px)]">
            <a href="https://www.hellowork.com/fr-fr/" class="inline-flex" aria-label="Aller à l'accueil">
                <svg class="aspect-[99/44] mt-0 mb-0 h-10">
                    <use href="/svg/logo/hellowork.svg#black"></use>
                </svg>
            </a>
        </div>
    </div>
    <button class="self-start"
        data-controller="input-checker"
        data-input-checker-input-value="#cp-mobile-menu-side-panel"
        aria-label="Fermer le menu"
        data-action="toggle-on-body#remove click->input-checker#uncheck">
        <!-- Icône de fermeture -->
        <svg class="size-3">
            <use href="/svg/icons/nav/close.svg#close"></use>
        </svg>
    </button>
</div>
<div class="flex flex-col gap-6">
    <span class="no-underline typo-m"
          data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;cta&quot;:&quot;menu-burger&quot;,&quot;wording&quot;:&quot;Se connecter&quot;}"
        data-action="click->analytics#push"
        data-controller="atc"
        data-atc-l-value="x/se-se/pnaqvqng/pbaarkvba-vafpevcgvba=pt=ugzy#pbaarkvbaf"
    >
        Se connecter
    </span>
    <span class="no-underline typo-m"
        data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;cta&quot;:&quot;menu-burger&quot;,&quot;wording&quot;:&quot;S&#x27;inscrire&quot;}"
        data-action="click->analytics#push"
        data-cy="headerAccountRegister"
        data-controller="atc"
        data-atc-l-value="x/se-se/pnaqvqng/pbaarkvba-vafpevcgvba=pt=ugzy#vafpevcgvbaf"
    >
        S'inscrire
    </span>
    <button class="flex h-fit items-center cursor-pointer connected:hidden lg:hidden typo-m w-auto gap-2"
            data-controller="input-checker toggle"
            data-toggle-toggled-class="hidden"
            data-input-checker-input-value="#cp-mobile-menu-side-panel-employment"
            aria-label="Ouvrir le menu"
            data-action="toggle-on-body#add click->input-checker#check from-account-data:empty->toggle#toggle">
        Emploi
        <svg class="size-3" aria-hidden="true">
            <use href="/svg/icons/arrow.svg#right"></use>
        </svg>
    </button>
    <a class="no-underline typo-m"
        data-cy="headerEduLink" aria-label="Accès Formation" href="https://www.maformation.fr/"
    >
        Formation
    </a>
    <button class="flex h-fit items-center cursor-pointer connected:hidden lg:hidden typo-m w-auto gap-2"
            data-controller="input-checker toggle"
            data-toggle-toggled-class="hidden"
            data-input-checker-input-value="#cp-mobile-menu-side-panel-recruiter-access"
            aria-label="Ouvrir le menu"
            data-action="toggle-on-body#add click->input-checker#check from-account-data:empty->toggle#toggle">
        Accès recruteur
        <svg class="size-3" aria-hidden="true">
            <use href="/svg/icons/arrow.svg#right"></use>
        </svg>
    </button>
</div>
            </div>
            <div class="shrink-0">
                


<div class="bg-blue-200 overflow-hidden px-6 py-4 xl:hidden bg-auto bg-[calc(50%-9px)_center] "
     data-controller="mobile-app"
     style="background-image: url(/svg/illustrations/pattern-chevron.svg)">
    <div class="flex gap-4 items-center justify-between z-10">
        <div class="flex flex-col">
            <span class="typo-m-bold">Téléchargez l'app</span>
            <span class="typo-m-">et postulez dans les <span class="whitespace-nowrap">premiers !</span></span>
        </div>
        <span data-controller="atc"
              data-atc-l-value="xuggcf://nccf=pt=nccyr=pt=pbz/se/ncc/ertvbafwbo-rzcybv/vq408615037?zg=8f"
              data-mobile-app-target="ios"
              data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;app_download&quot;,&quot;event_info&quot;:&quot;Apple&quot;}"
              data-action="click->analytics#push"
        >
            <svg class="w-[108px] h-[31px]">
                <use href="/svg/icons/apps/appstore-badge.svg#appstore-badge"></use>
            </svg>
        </span>
        <span data-controller="atc"
           data-atc-l-value="xuggcf://cynl=pt=tbbtyr=pt=pbz/fgber/nccf/qrgnvyf?vq=pbz=pt=ertvbafwbo=pt=naqebvqf"
           data-mobile-app-target="android"
           data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;app_download&quot;,&quot;event_info&quot;:&quot;Android&quot;}"
           data-action="click->analytics#push"
        >
            <svg class="w-[108px] h-[31px]">
                <use href="/svg/icons/playstore-badge.svg#playstore-badge"></use>
            </svg>
        </span>
    </div>
</div>
            </div>
        </nav>
    </div>
    <!-- Overlay pour le menu mobile -->
    <div
        id="mobile-overlay"
        data-controller="input-checker"
        data-input-checker-input-value="#cp-mobile-menu-side-panel"
        data-action="click->input-checker#uncheck modal:form-submitted@document->input-checker#uncheck click->toggle-on-body#remove"
        class="fixed
               top-0
               h-full
               w-full
               bg-black
               opacity-0
               pointer-events-none
               transition-all
               duration-600
               peer-checked:!z-40
               peer-checked:opacity-40
               peer-checked:pointer-events-auto
               peer-checked:z-fade-in
               z-fade-out
               overflow-hidden
               xl:hidden">
    </div>
</div>


<div class="layout-wrapper md:mx-auto lg:px-6 xl:layout-grid">
    <div class="xl:layout-inner-grid">
        <div class="col-span-full xl:col-start-1 xl:col-end-13">
            <header
                class="
                flex
                justify-between
                overflow-y-auto
                sm:overflow-y-visible
                z-30
                py-3
                px-4
                sm:px-0
                bg-white
                relative
                sm:static
                sm:flex-row
                sm:justify-between
                sm:items-center">

                <div class="relative max-w-max top-0 left-0 transition-all ease-in-out duration-300">
                    <a href="https://www.hellowork.com/fr-fr/" class="inline-flex" aria-label="Aller à l'accueil">
                        <svg class="aspect-[99/44] mt-0 mb-0 h-8 sm:mt-0 sm:h-10">
                            <use href="/svg/logo/hellowork.svg#black"></use>
                        </svg>
                    </a>
                </div>

                <div class="flex items-center justify-end gap-4 sm:gap-6"
                     data-controller="show-on-auth-state"
                     data-show-on-auth-state-hidden-class="hidden">

                    <div data-show-on-auth-state-target="skeleton" class="flex items-center gap-4 sm:gap-6">
                        <div class="skeleton h-8 w-12 sm:w-24 rounded-full"></div>
                        <div class="skeleton h-8 w-12 sm:w-24 rounded-full"></div>
                        <div class="skeleton h-10 w-16 sm:w-32 rounded-full"></div>
                    </div>

                    


<div data-show-on-auth-state-target="notConnected" class="hidden">
  <nav class="flex connected:items-center sm:ml-4">
    <menu class="
        py-0 
        connected:h-auto 
        overflow-hidden 
        flex items-center 
        justify-end 
        sm:flex-row 
        sm:p-0 
        sm:overflow-visible 
        sm:h-auto 
        w-auto 
        gap-4 
        sm:gap-6">
      <li class="text-center">
        <a
          href="/fr-fr/emploi.html"
          title="Offres d’emploi"
          aria-label="Trouver mon job"
          data-analytics-values-param="
            Hw.Emploi.Web.Common.Models.Tracking.TrackingAnalytics;.AsJson()"
          data-action="click->analytics#push"
          class="link-header typo-s gap-1 ">
          <span class="hidden sm:inline">Trouver mon </span>
          <span class="uppercase sm:lowercase">j</span>ob<span class="sm:hidden">s</span>
        </a>
      </li>

      <li class="text-center">
        <a
          href="/fr-fr/entreprise.html"
          title="Entreprises qui recrutent"
          aria-label="Trouver mon entreprise"
          data-analytics-values-param="
              {&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;cta&quot;:&quot;trouver-mon-entreprise&quot;,&quot;wording&quot;:&quot;Trouver-mon-entreprise&quot;}"
          data-action="click->analytics#push"
          class="link-header typo-s gap-1
                                                ">
          <span class="hidden sm:inline">Trouver mon </span>
          <span class="uppercase sm:lowercase">e</span>ntreprise<span class="sm:hidden">s</span>
        </a>
      </li>

      <li class="hidden lg:block">
        <details
          data-controller="details"
          data-action="
            details:not:sm->details#expand
            details:not:sm->details#disableClickOutside
            details:is:sm->details#collapse
            details:is:sm->details#enableClickOutside
            details:click:outside->details#collapse
        ">
          <summary
            data-cy="headerRecruiterMenu"
            class="
              mx-auto 
              w-max 
              mt-10 
              mb-4 
              uppercase 
              link-header 
              typo-s 
              border-b 
              border-grey-100 
              sm:my-0 
              sm:flex 
              sm:normal-case 
              sm:border-0">
            Accès recruteur
            <svg class="size-2">
              <use href="/svg/icons/arrow.svg#down"></use>
            </svg>
          </summary>
          <div class="sm:relative">
            <menu class="flex flex-col items-center bg-white rounded-sm border-grey-300 right-0 sm:z-10 sm:p-2 sm:mt-2 sm:items-start sm:w-max sm:absolute sm:border">
              <li class="sm:w-full">
                <span
                  data-cy="headerRecruiterLinkPublish"
                  data-controller="atc"
                  data-atc-l-value="xuggcf://erpehgrhe=pt=uryybjbex=pt=pbz/se/cebqhvg/cyngrsbezr-erpehgrzrag/pbagnpg=pt=ugzyf"
                  class="atc-m sm:atc-s sm:rounded-xs sm:p-2">
                  Diffuser ma première offre
                </span>
              </li>
              <li class="mt-4 sm:mt-auto sm:w-full">
                <span
                  data-cy="headerRecruiterLinkCustomers"
                  data-controller="atc"
                  data-atc-l-value="xuggcf://ohqqv=pt=uryybjbex=pt=pbzf"
                  class="atc-m sm:atc-s sm:rounded-xs sm:p-2">
                  Déjà client
                </span>
              </li>
            </menu>
          </div>
        </details>
      </li>

      <li class="hidden lg:block">
        <details
          data-controller="details"
          data-action="
            details:not:sm->details#expand
            details:not:sm->details#disableClickOutside
            details:is:sm->details#collapse
            details:is:sm->details#enableClickOutside
            details:click:outside->details#collapse
        ">
          <summary data-cy="headerJobMenu" class="hidden link-header typo-s sm:rounded-sm sm:flex connected:sm:mr-4" aria-label="Accès Emploi">
            Emploi
            <svg class="size-2">
              <use href="/svg/icons/arrow.svg#down"></use>
            </svg>
          </summary>
          <div class="
                hidden 
                sm:relative 
                sm:block 
          ">
            <menu class="
                space-y-4
                flex flex-col
                items-center
                bg-white
                rounded-sm
                border-grey-300
                right-0
                sm:space-y-0
                sm:p-2
                sm:mt-2
                sm:items-start
                sm:w-max
                sm:absolute
                sm:border
                sm:z-20">
              <li class="sm:w-full hidden sm:block">
                <a data-cy="headerJobInterimLink" href="/fr-fr/interim.html" class="link-m sm:link-s sm:rounded-xs sm:p-2">Missions d'intérim</a>
              </li>

              <li class="sm:w-full hidden sm:block">
                <a data-cy="headerJobInternshipLink" href="/fr-fr/stage.html" class="link-m sm:link-s sm:rounded-xs sm:p-2">Offres de stage</a>
              </li>

              <li class="sm:w-full hidden sm:block">
                <a data-cy="headerJobAlternatelyLink" href="/fr-fr/alternance.html" class="link-m sm:link-s sm:rounded-xs sm:p-2">Offres en alternance</a>
              </li>

              <li class="sm:w-full hidden sm:block">
                <span
                  data-cy="headerJobAlertAtc"
                  data-atc-l-value="x/se-se/pnaqvqng/perngvba-nyregr=pt=ugzyf"
                  data-controller="atc"
                  class="atc-m sm:atc-s sm:rounded-xs sm:p-2">
                  Créer mon alerte
                </span>
              </li>

              <li class="sm:w-full hidden sm:block">
                <span
                  data-cy="navJobCvAtc"
                  data-controller="atc"
                  data-atc-l-value="x/se-se/cntr/qrcbg-pi=pt=ugzyf"
                  class="atc-m sm:atc-s sm:rounded-xs sm:p-2">
                  Déposer mon CV
                </span>
              </li>

              <li class="sm:w-full hidden sm:block">
                <a
                  title="Calcul du salaire brut en net"
                  href="/fr-fr/outil/salaire-brut-net.html"
                  class="link-m sm:link-s sm:rounded-xs sm:p-2">
                  Salaire brut net
                </a>
              </li>
            </menu>
          </div>
        </details>
      </li>

      <li class="hidden not-connected:lg:block connected:hidden">
        <a
          data-cy="headerEduLink"
          aria-label="Accès Formation"
          href="https://www.maformation.fr/"
          class="
            link-header 
            typo-s 
            mt-4
            sm:mt-0
            connected:hidden">
          Formation
        </a>
      </li>

      <li class="max-w-[250px] hidden not-connected:lg:block connected:hidden">
        <details data-controller="details"
                 data-action="
                    details:not:sm->details#expand
                    details:not:sm->details#disableClickOutside
                    details:is:sm->details#collapse
                    details:is:sm->details#enableClickOutside
                    details:click:outside->details#collapse
                ">
          <summary 
            data-cy="headerAccountMenu" 
            class="hidden text-white sm:btn-primary-l relative" 
            aria-label="Accès mon compte"
            data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;cta&quot;:&quot;menu-se-connecter&quot;,&quot;wording&quot;:&quot;menu-se-connecter&quot;}"
            data-action="click->analytics#push"
          >
            <svg class="size-4">
              <use href="/svg/icons/user.svg#user"></use>
            </svg>
            Se&nbsp;connecter
            <div class="absolute -top-1 right-1">
              

<div class="
  rounded-full 
  bg-error-500
  size-3 border-solid border-[2px] border-white
">
</div>
            </div>
          </summary>
          <div class="sm:relative">
            <menu class="flex flex-col items-center bg-white rounded-sm border-grey-300 sm:z-10 sm:p-2 sm:mt-3 sm:w-max sm:absolute sm:border sm:right-0">
              <li class="sm:w-full connected:hidden">
                <span
                  data-controller="atc"
                  data-atc-l-value="x/se-se/pnaqvqng/pbaarkvba-vafpevcgvba=pt=ugzy#pbaarkvbaf"
                  data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;cta&quot;:&quot;menu-se-connecter&quot;,&quot;wording&quot;:&quot;Se connecter&quot;}"
                  data-action="click->analytics#push"
                  class="no-underline"
                >
                  <span data-cy="headerAccountLogIn" class="hidden sm:block atc-m sm:atc-s sm:rounded-xs sm:p-2">Se&nbsp;connecter</span>
                </span>
              </li>
              <li class="sm:w-full connected:hidden">
                <span
                  data-cy="headerAccountRegister"
                  data-controller="atc"
                  data-atc-l-value="x/se-se/pnaqvqng/pbaarkvba-vafpevcgvba=pt=ugzy#vafpevcgvbaf"
                  data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;cta&quot;:&quot;menu-se-connecter&quot;,&quot;wording&quot;:&quot;S&#x27;inscrire&quot;}"
                  data-action="click->analytics#push"
                  class="atc-m sm:atc-s sm:rounded-xs sm:p-2"
                >
                  S'inscrire
                </span>
              </li>
            </menu>
          </div>

        </details>
      </li>
      <button
          class="flex w-min h-fit items-center cursor-pointer connected:hidden lg:hidden"
          data-controller="input-checker toggle"
          data-toggle-toggled-class="hidden"
          data-input-checker-input-value="#cp-mobile-menu-side-panel"
          data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;cta&quot;:&quot;menu-burger&quot;,&quot;wording&quot;:&quot;menu-burger&quot;}"
          aria-label="Ouvrir le menu"
          data-action="toggle-on-body#add click->input-checker#check analytics#push from-account-data:empty->toggle#toggle">
          <svg class="size-4 relative">
            <use href="/svg/header/burger.svg#burger"/>
            <div class="absolute top-4 sm:top-5 right-3 sm:right-5">
              

<div class="
  rounded-full 
  bg-error-500
  size-3 border-solid border-[2px] border-white
">
</div>
            </div>
          </svg>
      </button>
    </menu>
  </nav>
</div>


                    



<div data-show-on-auth-state-target="connected" class="hidden">
  <nav class="flex items-center sm:ml-4">
    <menu class="flex items-center gap-4 sm:gap-6">
      <li class="text-center">
        <a
          href="/fr-fr/emploi.html"
          title="Offres d'emploi"
          aria-label="Trouver mon job"
          data-analytics-values-param="
            {&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;cta&quot;:&quot;trouver-mon-job&quot;,&quot;wording&quot;:&quot;Trouver-mon-job&quot;}"
          data-action="click->analytics#push"
          class="
            link-header 
            typo-s 
            gap-1
            
        ">
          <span class="hidden sm:inline">Trouver mon </span>
          <span>
            <span class="uppercase sm:lowercase">j</span>ob<span class="sm:hidden">s</span>
          </span>
        </a>
      </li>

      <li class="text-center">
        <a
          href="/fr-fr/entreprise.html"
          title="Entreprises qui recrutent"
          aria-label="Trouver mon entreprise"
          data-analytics-values-param="
            {&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;cta&quot;:&quot;trouver-mon-entreprise&quot;,&quot;wording&quot;:&quot;Trouver-mon-entreprise&quot;}"
          data-action="click->analytics#push"
          class="
            link-header 
            typo-s 
            gap-1
            
          ">
          <span class="hidden sm:inline">Trouver mon </span>
          <span>
            <span class="uppercase sm:lowercase">e</span>ntreprise<span class="sm:hidden">s</span>
          </span>
        </a>
      </li>

      <li class="flex items-center">
        <details
          class="hidden sm:flex relative"
          data-controller="click-outside toggle-attribute toggle"
          data-toggle-toggled-additional-class="rotate-180"
          data-toggle-attribute-target="element"
          data-toggle-attribute-attribute-param="open"
          data-action="
            click-outside:click:outside->toggle-attribute#unsetAttribute
            click-outside:click:outside->toggle#removeAdditional
            click->toggle#toggleAdditional"
        >
          <summary aria-label="Ouvrir le menu déroulant"
                   class="cursor-pointer flex items-center justify-center">
            <div class="pr-0 sm:pr-2">
              <span
                  data-controller="toggle"
                  data-toggle-toggled-class="hidden"
                  data-toggle-target="toToggle"
                  data-action="from-account-data:empty@document->toggle#add from-account-data:copied:Initials@document->toggle#remove">
                



<div
    class="bg-blue-500 min-w-8 min-h-8 size-8 rounded-full flex items-center justify-center relative overflow-hidden">
    <div class="text-white absolute typo-s-bold"
         data-controller="from-account-data"
         data-action="fetch-account-data:account-data-refreshed@document->from-account-data#copy"
         data-from-account-data-copy-value="Initials"
         data-from-account-data-into-value="innerText">
    </div>
</div>
              </span>
              <span class="hidden"
                  data-controller="toggle"
                  data-toggle-toggled-class="hidden"
                  data-toggle-target="toToggle"
                  data-action="from-account-data:empty@document->toggle#remove from-account-data:copied:Initials@document->toggle#add">
                


<div
    class="bg-grey-100 min-w-8 min-h-8 size-8 rounded-full flex items-center justify-center relative overflow-hidden">
    <svg
        class="text-grey-300 aspect-[38/44] w-[21px] absolute bottom-0">
        <use href="/svg/icons/user.svg#avatar"></use>
    </svg>
</div>
              </span>
            </div>
            <svg class="size-3"
                 data-toggle-target="toToggleAdditional">
              <use href="/svg/icons/arrow.svg#down"></use>
            </svg>
          </summary>
          <menu class="
              flex
              z-[11]
              flex-col 
              items-center 
              bg-white 
              rounded-sm 
              border-grey-300 
              sm:p-2
              sm:mt-3
              sm:w-max
              sm:absolute
              sm:border
              sm:right-0
              sm:top-8
          ">
            <li class="
                hidden connected:block 
                mt-4 
                sm:mt-auto 
                sm:w-full
            ">
              <span
                data-controller="atc"
                data-cy="headerAccountMyDashboardLink"
                data-atc-l-value="x/se-se/pnaqvqng/zba-rfcnpr=pt=ugzyf"
                class="atc-m sm:atc-s sm:rounded-xs sm:p-2">
                Mon espace
              </span>
            </li>
            <li class="
                hidden connected:block 
                mt-4 
                sm:mt-auto 
                sm:w-full
            ">
              <span
                data-controller="atc"
                data-cy="headerAccountMyDashboardLink"
                data-atc-l-value="x/se-se/pnaqvqng/zrf-pi-ihf=pt=ugzyf"
                class="atc-m sm:atc-s sm:rounded-xs sm:p-2">
                Mes CV vus
              </span>
            </li>
            <li class="
                hidden connected:block 
                mt-4 
                sm:mt-auto 
                sm:w-full
            ">
              <span
                data-controller="atc"
                data-cy="headerAccountMyDashboardLink"
                data-atc-l-value="x/se-se/pnaqvqng/zrf-pnaqvqngherf=pt=ugzyf"
                class="atc-m sm:atc-s sm:rounded-xs sm:p-2">
                Mes candidatures
              </span>
            </li>
            <li class="
                hidden
                connected:block
                mt-4
                sm:mt-auto
                sm:w-full
            ">
              <span
                data-controller="atc"
                data-cy="headerAccountMyAlertLink"
                data-atc-l-value="x/se-se/pnaqvqng/zrf-nyregrf=pt=ugzyf"
                class="atc-m sm:atc-s sm:rounded-xs sm:p-2">
                Mes alertes
              </span>
            </li>
            <li class="
                hidden connected:block
                mt-4
                sm:mt-auto sm:w-full
            ">
              <span
                data-controller="atc"
                data-cy="headerAccountMyAccountLink"
                data-atc-l-value="x/se-se/pnaqvqng/zba-cebsvy=pt=ugzyf"
                class="atc-m sm:atc-s sm:rounded-xs sm:p-2">
                Mon profil
              </span>
            </li>
            <li class="
                hidden connected:block
                mt-4
                sm:mt-auto sm:w-full
            ">
              <span
                data-controller="atc"
                data-cy="headerAccountMyParametersLink"
                data-atc-l-value="x/se-se/pnaqvqng/cnenzrgerf=pt=ugzyf"
                class="atc-m sm:atc-s sm:rounded-xs sm:p-2">
                Paramètres
              </span>
            </li>
            <li class="
                hidden connected:block
                mt-4
                sm:mt-auto sm:w-full
            ">
              <span
                data-controller="atc"
                data-cy="headerAccountLogOut"
                data-atc-l-value="x/se-se/pnaqvqng/ybtbss?ergheaHey=%2Sse-se%2Srzcybvf%2S84336130=pt=ugzyf"
                class="atc-m sm:atc-s sm:rounded-xs sm:p-2">
                Déconnexion
              </span>
            </li>
          </menu>
        </details>

        <button
          class="flex w-min h-fit items-center cursor-pointer sm:hidden"
          data-controller="input-checker"
          data-input-checker-input-value="#cp-mobile-menu-side-panel"
          aria-label="Ouvrir le menu"
          data-action="toggle-on-body#add click->input-checker#check">
          <div class="flex mr-2">
            <span
                data-controller="toggle"
                data-toggle-toggled-class="hidden"
                data-toggle-target="toToggle"
                data-action="from-account-data:empty@document->toggle#add from-account-data:copied:Initials@document->toggle#remove">
              



<div
    class="bg-blue-500 min-w-8 min-h-8 size-8 rounded-full flex items-center justify-center relative overflow-hidden">
    <div class="text-white absolute typo-s-bold"
         data-controller="from-account-data"
         data-action="fetch-account-data:account-data-refreshed@document->from-account-data#copy"
         data-from-account-data-copy-value="Initials"
         data-from-account-data-into-value="innerText">
    </div>
</div>
            </span>
            <span class="hidden"
                data-controller="toggle"
                data-toggle-toggled-class="hidden"
                data-toggle-target="toToggle"
                data-action="from-account-data:empty@document->toggle#remove from-account-data:copied:Initials@document->toggle#add">
              


<div
    class="bg-grey-100 min-w-8 min-h-8 size-8 rounded-full flex items-center justify-center relative overflow-hidden">
    <svg
        class="text-grey-300 aspect-[38/44] w-[21px] absolute bottom-0">
        <use href="/svg/icons/user.svg#avatar"></use>
    </svg>
</div>
            </span>
          </div>
          <svg class="size-4">
            <use href="/svg/header/burger.svg#burger"></use>
          </svg>
        </button>
      </li>
    </menu>
  </nav>
</div>
                </div>
            </header>
        </div>
        </div>
</div>







    
<div 
    data-controller="smart-banner removable"
    data-action="removable:removed->smart-banner#close"
    data-smart-banner-cookie-lifespan-value="30"
    data-smart-banner-display-on-first-page-value="False"
>
    <div data-smart-banner-target="container"></div>

    <template data-smart-banner-target="template">
        <div class="fixed inset-0 z-50 bg-black/40"
             data-controller="intersect"
             data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;appbox_click&quot;,&quot;event_info&quot;:&quot;Affichage de la banni&#xE8;re&quot;}"
             data-action="intersect:enter->analytics#push:once">
            <div class="fixed inset-x-0 bottom-0 flex flex-col gap-8 bg-white rounded-t-sm p-6"
                 data-controller="focus-trap"
                 data-focus-trap-target="container"
                 role="dialog"
                 aria-modal="true"
                 aria-labelledby="smart-banner-title">
                <div class="flex flex-col gap-3">
                    <div class="flex items-start">
                        <img
                            alt=""
                            loading="lazy"
                            src="/images/smartbanner/astro-buddy.webp"
                            width="1000" height="563"
                            class="flex-1 min-w-0 h-auto"
                        />
                        <button type="button" aria-label="Fermer" class="shrink-0" data-action="removable#remove">
                            <svg class="size-3" aria-hidden="true">
                                <use href="/svg/icons/nav/close.svg#close"></use>
                            </svg>
                        </button>
                    </div>
                    <p id="smart-banner-title" class="typo-l-bold">Gagnez du temps avec l'app</p>
                </div>

                <p class="typo-long-s">Recevez une notification dès qu'une offre est publiée et postulez en quelques clics.</p>

                <div class="flex flex-col items-center gap-4">
                    <span 
                        data-controller="atc"
                        aria-label="Continuer dans l'application Hellowork (nouvelle fenêtre)"
                        data-atc-l-value="xuggcf://uryybjbex=pt=baryvax=pt=zr/7XHy/76h4uumdf"
                        data-atc-t-value="x_oynaxf"
                        data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;appbox_click&quot;,&quot;event_info&quot;:&quot;T&#xE9;l&#xE9;chargement de l&#x27;application&quot;,&quot;cta&quot;:&quot;download-button&quot;,&quot;wording&quot;:&quot;Continuer dans l&#x27;app&quot;}"
                        data-action="analytics#push removable#remove"
                        class="btn-primary-l w-full justify-center"
                    >
                        Continuer dans l'app
                        <svg class="size-4 text-white" aria-hidden="true">
                            <use href="/svg/icons/external-link.svg#external-link"></use>
                        </svg>
                    </span>
                    <button type="button" class="typo-long-m underline" data-action="removable#remove">
                        Rester sur le navigateur
                    </button>
                </div>
            </div>
        </div>
    </template>
</div>
   





<div data-controller="cookie-from-url-param id-storage switch-display ab-test"
     data-switch-display-show-class="block"
     data-switch-display-hide-class="hidden"
     data-switch-display-active-class="tab-nav-switch"
     data-switch-display-opacity-class="opacity-0"
     data-switch-display-hashes-value='["offre","entreprise"]'
     data-cookie-from-url-param-cookies-list-value="hcid,jj_token"
     data-fetch-account-data-target="offersInPage"
     data-id-storage-id-param="84336130"
     data-id-storage-local-storage-key-param="visited_offers"
     data-ab-test-feature-value="hw_web_job_matcher"
     data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;identity.login&quot;}"
     data-action="pageshow@window->cookie-from-url-param#track:once pageshow@window->id-storage#save analytics:connected@window->analytics#push:once"
     class="relative mt-4">

    <div id="toolbar" class="layout-grid sticky h-12 sm:h-16 z-[3] top-0">
        <div class="layout-inner-grid content-center">
            <div class="col-span-full xl:col-start-2 xl:col-end-12">
                



<div class="flex justify-between items-center bg-transparent">

    <div class="flex items-center gap-4">
            <button
                data-controller="history"
                data-history-default-url-value="https://www.hellowork.com/fr-fr/emploi/recherche.html?k=D%c3%a9veloppeur&#x2B;full-stack&amp;k_autocomplete=http%3a%2f%2fwww.rj.com%2fCommun%2fPost%2fDeveloppeur_fullstack&amp;l=Lille&#x2B;59000&amp;l_autocomplete=http%3a%2f%2fwww.rj.com%2fcommun%2flocalite%2fcommune%2f59350"
                data-analytics-values-param='{"event": "generic", "EventName" : "back"}'
                data-action="analytics#push history#redirect"
                data-cy="backButton"
                class="rounded-full btn-icon-secondary-outline-m sm:btn-icon-secondary-outline-l p-[10px] sm:p-[14px] flex-shrink-0"
            >
                <svg class="size-3 sm:size-4">
                    <use href="/svg/icons/arrow.svg#left"></use>
                </svg>
            </button>
    </div>

    <template id="copyTemplate">
        


    <div
    data-controller="removable intersect toggle timer"
    data-toggle-target="toToggle"
    data-intersect-name-value="notification"
    data-timer-timeout-value="5000"
    data-toggle-toggled-class="slidein"
    data-removable-animation-class="slideout"
    data-action="intersect:notification:enter->timer#start:once
    intersect:notification:enter->toggle#add
    timer:timeout->removable#remove
    mouseover->timer#pause
    mouseout->timer#pause"
    role="status"
    class="rounded-sm
               flex
               items-center
               bg-blackToast
               shadow-toast
               p-4
               gap-4
               w-full
               min-h-[90px]
               sm:min-h-fit
               sm:w-[388px]
               xl:w-[448px]
               toast-scale">

        <svg class="h-7 w-7 flex-shrink-0" aria-hidden="true">
            <use href="/svg/badges/success.svg#success"></use>
        </svg>

        <div class="flex flex-col gap-2 text-white w-full">
                <p class="typo-s-bold">Lien copi&#xE9;</p>


        </div>

        <button data-action="removable#remove" class="block" aria-label="Fermer la notification">
            <svg class="size-3 text-white">
                <use href="/svg/icons/nav/close.svg#close"></use>
            </svg>
        </button>



    </div>

    </template>

    <div id="toolbar-actions" class="flex items-center gap-4">
        <button class="btn-icon-secondary-outline-m sm:btn-icon-secondary-outline-l"
                aria-label="Copier le lien"
                data-controller="clipboard"
                data-display-toast-message-id-param="copyTemplate"
                data-action="analytics#push clipboard#copyContent display-toast-message#display"
                data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;copy&quot;,&quot;cta&quot;:&quot;bouton&quot;,&quot;wording&quot;:&quot;Copier le lien&quot;}"
                data-cy="clipboardButton">
            <span class="hidden" data-clipboard-target="source" >https://www.hellowork.com/fr-fr/emplois/84336130.html</span>
            <svg class="size-3 sm:size-4" aria-hidden="true">
                <use href="/svg/icons/share.svg#share"></use>
            </svg>
        </button>
        

<turbo-frame id="bookmark-frame-do-84336130">
    <form 
        action="/fr-fr/candidat/tooglebookmark"
        method="GET"
        data-controller="bookmark"
        data-bookmark-offer-id-value="84336130"
        data-bookmark-bookmarked-icon-value="/svg/icons/bookmark.svg#bookmark-active"
        data-bookmark-unbookmarked-icon-value="/svg/icons/bookmark.svg#bookmark"
        data-bookmark-bookmarked-class="text-pink-500"
        data-fetch-account-data-event-param="turbo:submit-end"
        data-action="fetch-account-data#refreshAfterNextTurboEvent"
    >
        <input type="hidden" name="idOffre" value="84336130">
        <input type="hidden" name="turboFrameId" value="bookmark-frame-do-84336130">
        <input type="hidden" name="isFromToolbar" value="True"/>
        <button 
            class="btn-icon-secondary-outline-m sm:btn-icon-secondary-outline-l small-group:sm:btn-icon-no-outline-m"
            data-bookmark-target="button"
            data-analytics-values-param='{"event": "generic", "EventName" : "bookmark_add", "EventLibelle": "bookmark_do_toolbar" }'
            data-action="analytics#push:stop"
            data-cy="bookmarkBtn"
        >
            <svg class="size-3 sm:size-4 small-group:sm:size-3">
                <use data-bookmark-target="icon" href="/svg/icons/bookmark.svg#bookmark"></use>
            </svg>
        </button>
    </form>

    


</turbo-frame>
        <button
            aria-label="Créer une alerte"
            data-controller="input-checker analytics"
            data-input-checker-input-value="#alert-modal"
            data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;alert_load&quot;,&quot;event_info&quot;:&quot;do-top&quot;}"
            data-action="input-checker#check analytics#push"
            class="rounded-full btn-icon-yellow-300-m sm:btn-icon-yellow-300-l"
            data-cy="alertButton">
            <svg class="size-3 sm:size-4" aria-hidden="true">
                <use href="/svg/services/alert.svg#alert"></use>
            </svg>
        </button>
    </div>
</div>

            </div>
        </div>
    </div>
    <div class="w-full lg:layout-grid -mt-16 sm:-mt-20">
        <div class="xl:layout-inner-grid">
            <div class="col-span-full col-start-1 col-end-13">


<section class="
    relative
    flex
    justify-end
    bg-pumpkin-100
    text-pumpkin-200
    overflow-hidden
    rounded-none lg:rounded-sm
    h-[144px] sm:h-[192px] xl:h-[200px]
    ">

    


    <svg class="absolute
        -left-[230px] sm:-left-[400px]
        -bottom-[190px] sm:-bottom-[290px]
        w-[880px] sm:w-[1865px]
        h-[586px] sm:h-[910px]
        opacity-20 -rotate-[15deg]">
        <use href="/svg/illustrations/chevron.svg#chevron"></use>
    </svg>
    <div
        class="absolute
            left-0 bottom-0
            w-24 sm:w-40
            flex justify-center
            ml-3 sm:ml-6 lg:ml-40 xl:ml-[152px]
            mb-3 sm:mb-6
            px-3 py-2
            rounded-sm
            bg-white">
            <svg class="size-7 sm:size-11 text-grey-300">
                <use href="/svg/icons/default-company.svg#default-company"></use>
            </svg>
    </div>
</section>
            </div>
        </div>

    </div>
    <div id="toolbar-background"
         class="sticky bg-white h-12 sm:h-16 z-[1] -top-px overflow-hidden"
         data-controller="sticky-detector"
         data-sticky-detector-stuck-class="shadow-engine sm:shadow-engine-desk"></div>




<div id="salaryModalInformation-container"
     data-controller="input-checker modal"
     data-modal-form-validator-outlet="form"
     
     data-input-checker-input-value="#salaryModalInformation"
     data-action="modal:navigate-to-next-page@document->input-checker#uncheck"
     >
    <input type="checkbox" hidden id="salaryModalInformation" class="peer" >
    <div class="
            fixed
            inset-0
            z-50
            overflow-auto
            bg-black/60
            sm:bg-black/40
            backdrop-blur
            sm:backdrop-blur-md
            items-end
            sm:items-center
            collapse
            opacity-0
            peer-checked:visible
            peer-checked:opacity-100
            transition-[visibility,_opacity]
            duration-700
        ">
        <div class="px-0 sm:px-6 layout-wrapper h-full hidden peer-parent-checked:block">
            <div
                class="layout-outer-grid h-full content-end sm:content-center"
                data-toggle-on-body-force-param="false"
                data-action="click-&gt;input-checker#uncheck:self click-&gt;modal#dispatchDiscardedEvent:self">

                <div
                    data-controller="intersect focus-trap toggle-attribute"
                    data-focus-trap-target="container"
                    data-toggle-attribute-target="element"
                    data-toggle-on-body-force-param="true"
                    data-action="intersect:enter->toggle-on-body#add intersect:enter->toggle-attribute#setAttribute intersect:exit->toggle-on-body#remove intersect:exit->toggle-attribute#unsetAttribute"
                    data-toggle-attribute-attribute-param="aria-modal"
                    data-toggle-attribute-value-param="true"
                    role="dialog"
                    data-cy="modalContainer"
                    class=" bg-white shadow-modal overflow-auto col-span-full sm:col-start-4 xl:col-start-5 sm:col-span-6 rounded-t-sm  mt-4 sm:rounded-sm px-6 sm:px-10 py-6 sm:py-8 sm:my-6"
                    aria-labelledby=salaryModalInformation-title>
                    <div class="flex flex-col gap-4">
                        <div class="flex items-start justify-between">


    <div class="rounded-full flex justify-center items-center w-10 h-10 bg-pumpkin-50">
        <svg class="h-4 w-4 text-pumpkin-400 font-bold" aria-hidden="true">
            <use href="/svg/icons/euro.svg#bold-euro"></use>
        </svg>
    </div>

                            <div class="ml-auto">
                                    <button
                                        aria-label="Fermer la fenêtre modale"
                                        class="ml-6"
                                        data-toggle-on-body-force-param="false"
                                        data-action="click->input-checker#uncheck click->modal#dispatchDiscardedEvent"
                                        data-cy="crossButton"
                                        type="button"
                                    >
                                            <svg class="size-3" aria-hidden="true">
                                                <use href="/svg/icons/nav/close.svg#close"></use>
                                            </svg>
                                    </button>
                            </div>
                        </div>




                                <p id="salaryModalInformation-title" class="typo-l-bold text-pretty">Hellowork a estim&#xE9; le salaire pour cette offre</@titleMarkup>
                                                </div>

                    
    <div class="flex flex-col">
        <div class="mt-6 mb-8">
            



<p class="typo-long-s sm:typo-long-m mb-3">Cette estimation de salaire pour le poste de <span
        class="typo-long-s sm:typo-long-m-bold">D&#xE9;veloppeur Fullstack Java - Angular - Kubernetes H/F</span> à <span
        class="typo-long-s sm:typo-long-m-bold">Lille</span> est calculée grâce à des
    offres similaires et aux données de l’INSEE.</p>
<p class="typo-long-s sm:typo-long-m mb-6">Cette fourchette est variable selon expérience.</p>

    <input type="radio" name="salariesSwitch"
           id="annually"
           class="sr-only"
           checked>
    <input type="radio" name="salariesSwitch"
           id="monthly"
           class="sr-only"
           >
    <input type="radio" name="salariesSwitch"
           id="hourly"
           class="sr-only"
           >

<div>
    <nav
        class="flex typo-s md:typo-m p-1 bg-grey-100 rounded-xs overflow-x-auto items-stretch hidden-scrollbar">
            <label
                class="cursor-pointer typo-s bg-grey-100 text-center w-full py-2 px-4 rounded-xs hover:bg-black hover:text-white
                        [#annually:checked_~*_&amp;]:bg-white [#annually:checked_~*_&amp;]:text-black [#annually:focus-visible~*_&amp;]:outline [&:nth-child(2)]:mx-1"
                for="annually">
                Annuel
            </label>
            <label
                class="cursor-pointer typo-s bg-grey-100 text-center w-full py-2 px-4 rounded-xs hover:bg-black hover:text-white
                        [#monthly:checked_~*_&amp;]:bg-white [#monthly:checked_~*_&amp;]:text-black [#monthly:focus-visible~*_&amp;]:outline [&:nth-child(2)]:mx-1"
                for="monthly">
                Mensuel
            </label>
            <label
                class="cursor-pointer typo-s bg-grey-100 text-center w-full py-2 px-4 rounded-xs hover:bg-black hover:text-white
                        [#hourly:checked_~*_&amp;]:bg-white [#hourly:checked_~*_&amp;]:text-black [#hourly:focus-visible~*_&amp;]:outline [&:nth-child(2)]:mx-1"
                for="hourly">
                Horaire
            </label>
    </nav>
</div>

<div class="flex flex-col my-6">
    <div class="pr-6">
        <p class="typo-s-bold">Salaire brut min</p>
            <span
                class="hidden typo-m [#annually:checked_~*_&amp;]:block">40&#x202F;000 &#x20AC; / an</span>
            <span
                class="hidden typo-m [#monthly:checked_~*_&amp;]:block">3&#x202F;333 &#x20AC; / mois</span>
            <span
                class="hidden typo-m [#hourly:checked_~*_&amp;]:block">21,98 &#x20AC; / heure</span>
    </div>
    <span
        class="border-t border-grey-300 w-9 my-4"></span>
    <div class="">
        <p class="typo-l-bold mb-1">Salaire brut estimé</p>
            <span
                class="hidden px-2 py-1 typo-m-bold rounded-xs bg-pumpkin-100 w-fit [#annually:checked_~*_&amp;]:block"
                data-cy="medianEstimation_Annually">42&#x202F;500 &#x20AC; / an</span>
            <span
                class="hidden px-2 py-1 typo-m-bold rounded-xs bg-pumpkin-100 w-fit [#monthly:checked_~*_&amp;]:block"
                data-cy="medianEstimation_Monthly">3&#x202F;542 &#x20AC; / mois</span>
            <span
                class="hidden px-2 py-1 typo-m-bold rounded-xs bg-pumpkin-100 w-fit [#hourly:checked_~*_&amp;]:block"
                data-cy="medianEstimation_Hourly">23,35 &#x20AC; / heure</span>
    </div>
    <span class="border-t border-grey-300 w-9 my-4"></span>
    <div class="">
        <p class="typo-s-bold">Salaire brut max</p>
            <span
                class="hidden typo-m [#annually:checked_~*_&amp;]:block"
                data-cy="highEstimation_Annually">47&#x202F;500 &#x20AC; / an</span>
            <span
                class="hidden typo-m [#monthly:checked_~*_&amp;]:block"
                data-cy="highEstimation_Monthly">3&#x202F;958 &#x20AC; / mois</span>
            <span
                class="hidden typo-m [#hourly:checked_~*_&amp;]:block"
                data-cy="highEstimation_Hourly">26,10 &#x20AC; / heure</span>
    </div>
</div>

<div
    data-controller="toggle"
    data-toggle-toggled-class="hidden"
    class="typo-s sm:typo-m"
>
    <div data-toggle-target="toToggle">
        <p class="mb-2">Cette information vous semble-t-elle utile ?</p>
        <div class="flex">
            <button
                class="btn-outline-s mr-3"
                data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;salary_click&quot;,&quot;cta&quot;:&quot;estimation&quot;,&quot;wording&quot;:&quot;Oui&quot;}"
                data-action="toggle#toggle analytics#push"
                data-cy="yesButton">
                Oui
            </button>
            <button
                class="btn-outline-s"
                data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;salary_click&quot;,&quot;cta&quot;:&quot;estimation&quot;,&quot;wording&quot;:&quot;Non&quot;}"
                data-action="toggle#toggle analytics#push"
                data-cy="noButton">
                Non
            </button>
        </div>
    </div>
    <p data-toggle-target="toToggle" class="hidden typo-s text-grey-500" data-cy="feedbackMessage">
        Merci pour votre retour !</p>
</div>
        </div>
        <button data-controller="input-checker"
                data-input-checker-input-value="#salaryModalInformation"
                data-action="click->input-checker#uncheck"
                class="btn-primary-l">
            C'est noté
        </button>

    </div>


                </div>
            </div>
        </div>
    </div>
</div>



<div id="third-party-information-modal-container"
     data-controller="input-checker modal"
     data-modal-form-validator-outlet="form"
     
     data-input-checker-input-value="#third-party-information-modal"
     data-action="modal:navigate-to-next-page@document->input-checker#uncheck"
     >
    <input type="checkbox" hidden id="third-party-information-modal" class="peer" >
    <div class="
            fixed
            inset-0
            z-50
            overflow-auto
            bg-black/60
            sm:bg-black/40
            backdrop-blur
            sm:backdrop-blur-md
            items-end
            sm:items-center
            collapse
            opacity-0
            peer-checked:visible
            peer-checked:opacity-100
            transition-[visibility,_opacity]
            duration-700
        ">
        <div class="px-0 sm:px-6 layout-wrapper h-full hidden peer-parent-checked:block">
            <div
                class="layout-outer-grid h-full content-end sm:content-center"
                data-toggle-on-body-force-param="false"
                data-action="click-&gt;input-checker#uncheck:self click-&gt;modal#dispatchDiscardedEvent:self">

                <div
                    data-controller="intersect focus-trap toggle-attribute"
                    data-focus-trap-target="container"
                    data-toggle-attribute-target="element"
                    data-toggle-on-body-force-param="true"
                    data-action="intersect:enter->toggle-on-body#add intersect:enter->toggle-attribute#setAttribute intersect:exit->toggle-on-body#remove intersect:exit->toggle-attribute#unsetAttribute"
                    data-toggle-attribute-attribute-param="aria-modal"
                    data-toggle-attribute-value-param="true"
                    role="dialog"
                    data-cy="modalContainer"
                    class=" bg-white shadow-modal overflow-auto col-span-full sm:col-start-4 xl:col-start-5 sm:col-span-6 rounded-t-sm  mt-4 sm:rounded-sm px-6 sm:px-10 py-6 sm:py-8 sm:my-6"
                    aria-labelledby=third-party-information-modal-title>
                    <div class="flex flex-col gap-4">
                        <div class="flex items-start justify-between">

    <div class="flex items-center flex-shrink-0 rounded-full">
        <svg class="size-7">
            <use href="/svg/badges/info.svg#info"></use>
        </svg>
    </div>

                            <div class="ml-auto">
                                    <button
                                        aria-label="Fermer la fenêtre modale"
                                        class="ml-6"
                                        data-toggle-on-body-force-param="false"
                                        data-action="click->input-checker#uncheck click->modal#dispatchDiscardedEvent"
                                        data-cy="crossButton"
                                        type="button"
                                    >
                                            <svg class="size-3" aria-hidden="true">
                                                <use href="/svg/icons/nav/close.svg#close"></use>
                                            </svg>
                                    </button>
                            </div>
                        </div>


                                <p id="third-party-information-modal-title" class="typo-l-bold text-pretty">ESN</@titleMarkup>
                                                </div>

                    
    <div class="flex flex-col mt-6 sm:mt-8 gap-8">
        <ul
            aria-label="Liste des informations liées à l'offre d'emploi publiée par un intermédiaire"
            class="flex flex-col gap-y-3">
                <li class="flex flex-row typo-long-m ">
                    <div class="">
                        Cette offre est publi&#xE9;e par une ESN. Le poste peut &#xEA;tre situ&#xE9; au sein de l&#x2019;entreprise indiqu&#xE9;e ou chez un client pour lequel elle recrute.
                    </div>
                </li>
        </ul>
        <button
            aria-label="Fermer la fenêtre"
            class="w-full btn-primary-l"
            data-action="input-checker#uncheck"
            data-cy="see-third-party-info">
            C'est noté
        </button>
    </div>

                </div>
            </div>
        </div>
    </div>
</div>

    <div class="layout-grid sticky z-[2] group -top-px mb-6 lg:mb-9" data-controller="sticky-detector"
         data-sticky-detector-stuck-class="stuck">
        <div class="layout-inner-grid gap-4 sm:gap-6">
            <div class="flex flex-col gap-4 sm:gap-6 col-span-full lg:col-start-3 lg:col-end-11 lg:[&:has(.overlapping)]:col-end-13 xl:[&:has(.overlapping)]:col-end-12">
                    <div id="tabs-toolbar-background" class="h-8 mt-2 sm:mt-2.5">
                        <div class="flex justify-between items-center">
                            <div data-controller="overlap-detector"
                                 data-overlap-detector-observe-id-value="toolbar"
                                 data-overlap-detector-overlap-class="translate-x-12 sm:translate-x-16 lg:translate-x-0"
                                 data-overlap-detector-disable-pointer-events-value="true">
                                <div class="relative
                                            z-[1]
                                            overflow-visible
                                            transition-all
                                            duration-300
                                            ease-in-out
                                            mt-2
                                            sm:mb-1
                                            sm:mt-2"
                                     data-overlap-detector-target="target">
                                    
<div class="flex sm:w-full gap-6 " data-controller="toggle" role="tablist" aria-label="Navigation sur les onglets" >
    <button
        type="button"
        id="first-tab"
        aria-selected="true"
        aria-controls="first-panel"
        role="tab"
        tabindex="0"
        data-controller="action-forwarder scroll-to"
        data-switch-display-target="tab"
        class="flex gap-2 whitespace-nowrap no-underline pb-3 sm:pb-5 typo-s text-grey-500 hover:text-black"
                    data-scroll-to-element-value="#content"
        data-analytics-values-param=""
                data-action="toggle#singleToggle click->switch-display#changeTab click->scroll-to#scrollToElement keydown.enter->switch-display#changeTab click->analytics#push"
        data-cy="jobTabButton">

            <div class="relative size-4 group-stuck:hidden group-stuck:sm:block">
                <svg class="size-4 transition-opacity duration-300 ease-in-out" data-switch-display-target="inactiveIcon">
                    <use href="/svg/icons/offre.svg#offre"></use>
                </svg>
                <svg class="size-4 absolute top-0 left-0 opacity-0 transition-opacity duration-300 ease-in-out" data-switch-display-target="activeIcon">
                    <use href="/svg/icons/offre.svg#offre-active"></use>
                </svg>
            </div>
        Le job
    </button>
</div>

                                </div>
                            </div>
                            <div data-controller="overlap-detector"
                                 data-overlap-detector-observe-id-value="toolbar"
                                 data-overlap-detector-overlap-class="mb-3 sm:mb-5 mr-[164px] -translate-x-4 overlapping"
                                 class="grid col-span-3 hidden lg:flex">
                                <a
                                    href="#postuler"
                                    class="transition-[padding-top,transform,font-size] duration-300 ease-in-out btn-primary-candidacy-m group-stuck:btn-primary-candidacy-l min-w-[115px] justify-center"
                                    data-cy="applyButtonHeader"
                                    data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;cta_click&quot;,&quot;cta&quot;:&quot;Postuler-FormRO&quot;,&quot;wording&quot;:&quot;Postuler&quot;}"
                                    data-action="analytics#push"
                                    data-overlap-detector-target="target">
                                    Postuler
                                </a>
                            </div>
                        </div>
                    </div>
            </div>
        </div>
    </div>

    <div id="content" class="layout-grid scroll-mt-12 sm:scroll-mt-20">
        <div class="layout-inner-grid gap-4 sm:gap-6">
            <div class="flex flex-col gap-4 sm:gap-6 col-span-full lg:col-start-3 lg:col-end-11">
                <div class="col-span-full">
                    <div class="pb-6 sm:pb-16">
                        <div class="col-span-full transition-all duration-300 ease-in-out"
                             data-switch-display-target="tabContent"
                             role="tabpanel"
                             tabindex="0"
                             id="offer-panel"
                             aria-labelledby="offer-tab">

                            <div class="border-b border-b-grey-100 mb-8 sm:mb-10">
                                <div class="flex flex-col gap-8 sm:gap-10 mb-10 sm:mb-12">
                                    <div>
                                        <h1 id="main-content" class="inline scroll-mt-[4.5rem]" data-controller="intersect" data-intersect-name-value="coachCta">
                                            <span class="block typo-xl sm:typo-2xl mb-3" data-cy="jobTitle">D&#xE9;veloppeur Fullstack Java - Angular - Kubernetes H/F</span>
                                        </h1>

                                            <ul class="mt-3 flex">
                                                    <li class="typo-long-m-bold flex after:content-['·'] after:mx-2 last:after:hidden">
                                                        Lille - 59
                                                    </li>
                                                    <li class="typo-long-m-bold flex after:content-['·'] after:mx-2 last:after:hidden">
                                                        CDI
                                                    </li>
                                            </ul>
                                    </div>

                                    

<ul class="flex flex-wrap gap-3">


        <li>
            <button class="tag-border
                           border-0
                           bg-grey-50
                           hocus:bg-grey-100
                           active:bg-grey-300
                           py-1.5
                           px-2
                           typo-s-bold
                           inline-flex
                           gap-2"
                    data-controller="input-checker"
                    data-input-checker-input-value="#salaryModalInformation"
                    data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;salary_click&quot;,&quot;cta&quot;:&quot;tooltip&quot;,&quot;wording&quot;:&quot;Salaire estim&#xE9;&quot;}"
                    data-action="input-checker#check analytics#push"
                    data-cy="salary-tag-button">
                <span class="truncate max-w-[250px] sm:max-w-full">
                    Estimation Hellowork &#x2192; 40&#x202F;000 - 47&#x202F;500 &#x20AC; / an
                </span>
                <svg class="size-3" aria-hidden="true">
                    <use href="/svg/icons/tooltip.svg#tooltip"></use>
                </svg>
            </button>
        </li>

        <li>
            <button
                class="tag-border
                           border-0
                           bg-grey-50
                           hocus:bg-grey-100
                           active:bg-grey-300
                           py-1.5
                           px-2
                           typo-s-bold
                           inline-flex
                           gap-2"
                data-controller="input-checker"
                data-input-checker-input-value="#third-party-information-modal"
                data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;cta_click&quot;,&quot;wording&quot;:&quot;ESN&quot;}"
                data-action="input-checker#check analytics#push"
                data-cy="thirdPartyButton"
            >
                ESN
                <svg class="size-3" aria-hidden="true">
                    <use href="/svg/icons/tooltip.svg#tooltip"></use>
                </svg>
            </button>
        </li>


            <li class="tag-secondary-s border-0 readonly">
                T&#xE9;l&#xE9;travail partiel
            </li>

            <li class="block tag-secondary-s border-0 readonly">
                Bac &#x2B;2
            </li>
            <li class="block tag-secondary-s border-0 readonly">
                Bac &#x2B;3, Bac &#x2B;4
            </li>
            <li class="block tag-secondary-s border-0 readonly">
                Bac &#x2B;5
            </li>
            <li class="block tag-secondary-s border-0 readonly">
                Secteur informatique &#x2022; ESN
            </li>
            <li class="block tag-secondary-s border-0 readonly">
                Exp. 5 ans min.
            </li>
</ul>


                                    <span
                                        class="btn-outline-s sm:hidden inline-flex w-max "
                                        data-controller="atc"
                                        data-atc-l-value="xuggcf://uryybjbex=pt=baryvax=pt=zr/7XHy/6czkeelrf"
                                        data-analytics-values-param='{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;cta_click&quot;,&quot;cta&quot;:&quot;Lire dans l&#x27;app&quot;,&quot;wording&quot;:&quot;Lire dans l&#x27;app&quot;}'
                                        data-action="analytics#push"
                                    >
                                        Lire dans l'app
                                        <svg class="size-3">
                                            <use href="/svg/icons/external-link.svg#external-link"></use>
                                        </svg>
                                    </span>
                                </div>






    
<section
    class="
        peer
        flex flex-col
        w-full
        pb-8
        sm:pb-10"
>
    <h2>
        <div class="flex items-center gap-2">
            <svg role="graphics-symbol" class="size-4">
                <use href="/svg/icons/key-info.svg#key-info"></use>
            </svg>

            <span class="text-left typo-m-bold sm:typo-long-2m-bold">&#xC0; noter sur ce job</span>
        </div>
    </h2>
    
        <p id="candidate-skills-intro" class="mt-2 typo-long-s text-grey-500">Vous avez ces compétences ? Cliquez dessus pour les ajouter rapidement à votre profil !</p>
    
    <div class="mt-6 flex flex-col gap-4"
         data-controller="toggle"
         data-toggle-toggled-class="hidden">

            <turbo-frame id="candidate-skills-84336130"
                         src="/fr-fr/offres/getoffercandidateskillsframeview?offerId=84336130">
                
                <ul class="inline-flex gap-3 flex-wrap w-full items-center" aria-hidden="true">
                        <li class="max-w-full sm:max-w-[calc(50%-6px)] rounded-xs bg-grey-50 typo-s py-2 px-4 truncate">Angular</li>
                        <li class="max-w-full sm:max-w-[calc(50%-6px)] rounded-xs bg-grey-50 typo-s py-2 px-4 truncate">Java</li>
                        <li class="max-w-full sm:max-w-[calc(50%-6px)] rounded-xs bg-grey-50 typo-s py-2 px-4 truncate">Kubernetes</li>
                        
                </ul>
            </turbo-frame>
        

    </div>
</section>


                            </div>


                            



<div class="flex flex-col gap-8 sm:gap-10">
    <div>



<section
    class="
        peer
        flex flex-col
        w-full
        border-b border-b-grey-100
        pb-8 sm:pb-10"
>
    <h2 class="py-4 sm:pt-0">
        <div class="flex items-center gap-2">
            <svg role="graphics-symbol" class="size-4">
                <use href="/svg/icons/offre.svg#offre"></use>
            </svg>

            <span
                class="text-left typo-m-bold sm:typo-long-2m-bold">D&#xE9;tail du poste</span>
        </div>
    </h2>
    <div class="mt-2">
        


<div
     data-controller="truncate-text"
     data-truncate-text-show-more-text-value="Voir plus"
     data-truncate-text-show-less-text-value="Voir moins"
     data-truncate-text-hidden-class="hidden"
     data-truncate-text-line-clamp-class="line-clamp-[17] sm:line-clamp-[20]"
     data-truncate-text-should-collapse-on-connect-value="True"
     >

    <div
        id="22b"
        class="leading-relaxed  mb-4 typo-long-m"
        data-truncate-text-target="content">
        <p><p class="do-html-p-margin">Au sein d'une équipe Agile chez l'un de nos clients, vous intervenez sur la conception, le développement et la maintenance d'applications web métier. Vous participez à l'ensemble du cycle de développement, de la prise en compte des besoins fonctionnels à la mise en production.</p><p class="do-html-p-margin">Vos missions</p><ul class="ml-6 list-disc mb-4"><li>Concevoir et développer des fonctionnalités back-end en Java / Spring Boot</li><li>Développer les interfaces front-end en Angular (composants, services, intégration API)</li><li>Rédiger les tests unitaires et d'intégration (JUnit, Mockito, Jasmine/Karma)</li><li>Participer aux revues de code et à l'amélioration continue de la qualité logicielle</li><li>Contribuer aux cérémonies Agile (daily, refinement, sprint planning, rétro)</li><li>Assurer le support, la maintenance corrective et évolutive des applications</li><li>Documenter les développements et partager les bonnes pratiques</li></ul><p class="do-html-p-margin">Environnement technique</p><ul class="ml-6 list-disc mb-4"><li>Back-end : Java 11/17, Spring Boot, Spring Security, JPA/Hibernate, API REST, Maven</li><li>Front-end : Angular 14+, TypeScript, RxJS, HTML5/CSS3/SCSS</li><li>Tests : JUnit, Mockito, Jasmine, Karma</li><li>DevOps : Kubernetes, Git, GitLab CI / Jenkins, Docker, SonarQube</li><li>BDD : PostgreSQL, Oracle</li><li>Outils : Jira, Confluence</li></ul> </p>
    </div>

    <button
        type="button"
        class="bg-transparent border-none p-0 cursor-pointer hidden typo-s-bold underline"
        data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;cta_click&quot;,&quot;cta&quot;:&quot;mission-du-poste&quot;}"
        data-truncate-text-target="toggleButton"
        data-action="click->truncate-text#toggle analytics#push:once"
        aria-controls="22b"
        aria-expanded="false"
        data-cy="toggleShowButton"
    >
        Voir plus
    </button>
</div>


    </div>
</section>


            
<details
    class="
        flex flex-col
        w-full
        border-b
        border-b-grey-100
        py-4
        sm:py-6"
    open     data-controller="remove-attribute" data-remove-attribute-named-value="open">
    <summary
        class="
            list-none
            cursor-pointer
            flex
            items-center
            justify-between
            py-4
            focus-visible:outline-2
            focus-visible:outline-offset-2
            focus-visible:rounded-xs"
        data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;cta_click&quot;,&quot;cta&quot;:&quot;profil-recherch&#xE9;&quot;,&quot;wording&quot;:&quot;Le profil recherch&#xE9;&quot;}"
        data-action="click->analytics#push:once"
        data-cy="profileCollapseButton"
    >
        <h2 class="flex items-center gap-2">
            <svg class="size-4">
                <use href="/svg/icons/user.svg#user"></use>
            </svg>

            <span class="text-left typo-m-bold sm:typo-long-2m-bold">Le profil recherch&#xE9;</span>
        </h2>

        <svg
            aria-hidden="true"
            class="
                size-4
                transition-transform
                duration-200
                parent-open:rotate-180">
            <use href="/svg/icons/arrow.svg#down"></use>
        </svg>
    </summary>

    <div class="mt-2">
        
                <div class="typo-long-m break-words">
                    <p class="do-html-p-margin"><b>Le profil recherché</b></p><ul class="ml-6 list-disc mb-4"><li>5 ans minimum d'expérience confirmée en développement Fullstack Java / Angular</li><li>Maîtrise des principes SOLID, des design patterns et des bonnes pratiques de développement</li><li>Expérience en environnement Agile / Scrum</li><li>Autonomie, rigueur, esprit d'équipe et force de proposition</li></ul><p class="do-html-p-margin">Atouts appréciés</p><ul class="ml-6 list-disc mb-4"><li>Expérience dans le secteur de l'assurance ou de la banque</li><li>Connaissance des architectures microservices et événementielles (Kafka)</li><li>Sensibilité DevOps et culture du test automatisé</li></ul>
                </div>
            
    </div>
</details>

    </div>

</div>

                            <p class="block mt-8 sm:mt-12 typo-xs text-grey-500 break-words">
                                 Publi&#xE9;e le 12/10/2026 - R&#xE9;f : 4144655/30538227 DFJAK/59L
                            </p>
                        </div>
                        <div data-switch-display-target="tabContent" class="col-span-full hidden transition-all duration-300 ease-in-out min-h-[95dvh]" role="tabpanel" tabindex="0" id="company-panel" aria-labelledby="company-tab">
                                <turbo-frame id="companyDetailFrame" loading="lazy" src="https://www.hellowork.com/fr-fr/getcompanypageofferframeview/197857/84336130"></turbo-frame>
                        </div>
                    </div>

                    


<div id="alert-modal-container"
     data-controller="input-checker modal"
     data-modal-form-validator-outlet="form"
     
     data-input-checker-input-value="#alert-modal"
     data-action="modal:navigate-to-next-page@document->input-checker#uncheck"
     >
    <input type="checkbox" hidden id="alert-modal" class="peer" >
    <div class="
            fixed
            inset-0
            z-50
            overflow-auto
            bg-black/60
            sm:bg-black/40
            backdrop-blur
            sm:backdrop-blur-md
            items-end
            sm:items-center
            collapse
            opacity-0
            peer-checked:visible
            peer-checked:opacity-100
            transition-[visibility,_opacity]
            duration-700
        ">
        <div class="px-0 sm:px-6 layout-wrapper h-full hidden peer-parent-checked:block">
            <div
                class="layout-outer-grid h-full content-end sm:content-center"
                data-toggle-on-body-force-param="false"
                data-action="click-&gt;input-checker#uncheck:self click-&gt;modal#dispatchDiscardedEvent:self">

                <div
                    data-controller="intersect focus-trap toggle-attribute"
                    data-focus-trap-target="container"
                    data-toggle-attribute-target="element"
                    data-toggle-on-body-force-param="true"
                    data-action="intersect:enter->toggle-on-body#add intersect:enter->toggle-attribute#setAttribute intersect:exit->toggle-on-body#remove intersect:exit->toggle-attribute#unsetAttribute"
                    data-toggle-attribute-attribute-param="aria-modal"
                    data-toggle-attribute-value-param="true"
                    role="dialog"
                    data-cy="modalContainer"
                    class=" bg-white shadow-modal overflow-auto col-span-full sm:col-start-3 xl:col-start-4 sm:col-span-8 rounded-t-sm  mt-4 sm:rounded-sm px-6 sm:px-10 py-6 sm:py-8 sm:my-6"
                    aria-labelledby=alert-modal-form-title alert-modal-otp-title>
                    <div class="flex flex-col gap-4">
                        <div class="flex items-start justify-between">

    <div class="flex justify-center items-center h-10 w-10 flex-shrink-0 rounded-full bg-yellow-50">
        <svg class="size-4 text-yellow-300" aria-hidden="true">
            <use href="/svg/services/alert.svg#alert"></use>
        </svg>
    </div>

                            <div class="ml-auto">
                                    <button
                                        aria-label="Fermer la fenêtre modale"
                                        class="ml-6"
                                        data-toggle-on-body-force-param="false"
                                        data-action="click->input-checker#uncheck click->modal#dispatchDiscardedEvent"
                                        data-cy="crossButton"
                                        type="button"
                                    >
                                            <svg class="size-3" aria-hidden="true">
                                                <use href="/svg/icons/nav/close.svg#close"></use>
                                            </svg>
                                    </button>
                            </div>
                        </div>

                    </div>

                    
    


<turbo-frame
    id="create-alert-modal"
    data-controller="update-turbo-src"
    data-update-turbo-src-target="turboFrame"
>
    <div
        data-controller="form-validator"
        data-form-validator-show-class="flex"
        data-form-validator-hide-class="hidden"
        data-form-validator-disabled-class="pointer-events-none"
        data-action="
            modal:discarded@document->form-validator#resetValidation
            page-restore:restored@document->form-validator#resetValidation
        "
    >
        <form
            id="alert-form"
            method="POST"
            data-form-validator-target="form"
            action="/fr-fr/alerte/create"
            data-turbo-frame="otp-input"
        >
            <turbo-frame
                id="otp-input"
                data-controller="frame-clearable"
                data-action="turbo:frame-render->form-validator#activateSubmitButton"
                class="block peer has-child:mt-3"
            ></turbo-frame>

            <span id="alert-modal-form-title" class="block typo-l-bold text-pretty mt-4 peer-has-child:hidden">
                <span class="not-connected:inline connected:hidden">Créez votre compte Hellowork et activez votre alerte</span>
                <span class="connected:inline not-connected:hidden">Créez une alerte</span>
            </span>

            <div
                class="peer-has-child:hidden mt-0"
                data-analytics-values-param='{"event": "EventGeneric", "EventName": "alert_step"}'
                data-action="focusin->analytics#push:once">
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6 w-full mt-8 mb-4 sm:mb-6">
                    

<div
    data-controller="input-validity autocomplete autocomplete-simple focus-group"
    data-input-validity-input-type-value="job"    data-input-validity-show-error-class="inline-flex"
    data-input-validity-hide-error-class="hidden"
    data-input-validity-label-error-class="input-label-error"
    data-input-validity-container-error-class="input-container-error"
    
    data-action="
        autocomplete:click:outside->autocomplete#closeDropdown
        autocomplete:click:outside:hasValue->input-validity#checkValidity
        autocomplete:selected->autocomplete-simple#fillSuggestion
        autocomplete:Job:selected->autocomplete-simple#fillSuggestion
        autocomplete:selected->input-validity#checkValidity
        autocomplete:Job:selected->input-validity#checkValidity
        valid-form:alert-form@window->input-validity#checkValidity
        reset-form:alert-form@window->input-validity#hideError
        reset-form:alert-form@window->autocomplete-simple#clearFieldIfNoSelection
        keydown.up->focus-group#focusPreviousElement
        keydown.down->focus-group#focusNextElement
    "
    data-autocomplete-url-value="https://www.hellowork.com/fr-fr/searchoffers/getjobsuggestionsframeview?displayMissingResultMessage=True"
    data-autocomplete-hiding-class="hidden"
    data-autocomplete-id-value="Job"
    class="relative"
>
    <label
        for="Job"
        data-input-validity-target="label"
        class="input-label"
    >
        M&#xE9;tier
    </label>
    <div
        class="input-container"
        data-input-validity-target="container"
        data-controller="clearable"
    >
        <input
            form="alert-form"
            id="Job"
            name="Job.DisplayLabel"
            data-input-validity-target="input"
            data-autocomplete-target="input"
            data-clearable-target="field"
            data-autocomplete-simple-target="field"
            data-action="
                autocomplete#suggestIfNeeded
                autocomplete-simple#clearSuggestion
                click->toggle#add
                click->toggle#removeAdditional
                focus->toggle#add
                focus->toggle#removeAdditional
            "
            class="peer"
            placeholder="Infirmier, commercial, comptable..."
            autocomplete="off"
            required
            value="D&#xE9;veloppeur full-stack"
            data-cy="jobAutocompleteInput"
            aria-describedby="Job_error"
            
        >
        <button
            type="button"
            class="hocus:!scale-[1.33] transform transition-transform peer-placeholder-shown:hidden"
            data-action="clearable#clear autocomplete-simple#clearSuggestion"
        >
            <svg class="size-3">
                <use href="/svg/icons/nav/close.svg#close"></use>
            </svg>
        </button>
    </div>
    <input
        
        data-input-validity-target="input"
        name="Job.JobCriterionUri"
        data-autocomplete-simple-target="hiddenInput"
        required
        class="absolute w-0 h-1 opacity-0"
        tabindex="-1"
        value="http://www.rj.com/Commun/Post/Developpeur_fullstack"
        data-action=""
    >
    <div class="relative">
        <turbo-frame
            id="jobAutocompleteFrame"
            data-autocomplete-target="dropdown frame"
            data-turbo="true"
            src=""
            class="absolute h-auto z-[1] top-0 left-0 w-full overflow-visible"
        >
        </turbo-frame>
    </div>
    <span
        id="Job_error"
        data-input-validity-target="error errorMessage"
        data-cy="Job_errorMessage"
        class="input-subtext-error hidden"
    >
        
    </span>
</div>


                    

<div
    data-controller="input-validity autocomplete autocomplete-simple focus-group"
        data-input-validity-show-error-class="inline-flex"
    data-input-validity-hide-error-class="hidden"
    data-input-validity-label-error-class="input-label-error"
    data-input-validity-container-error-class="input-container-error"
    
    data-action="
        autocomplete:click:outside->autocomplete#closeDropdown
        autocomplete:click:outside:hasValue->input-validity#checkValidity
        autocomplete:selected->autocomplete-simple#fillSuggestion
        autocomplete:Locality:selected->autocomplete-simple#fillSuggestion
        autocomplete:selected->input-validity#checkValidity
        autocomplete:Locality:selected->input-validity#checkValidity
        valid-form:alert-form@window->input-validity#checkValidity
        reset-form:alert-form@window->input-validity#hideError
        reset-form:alert-form@window->autocomplete-simple#clearFieldIfNoSelection
        keydown.up->focus-group#focusPreviousElement
        keydown.down->focus-group#focusNextElement
    "
    data-autocomplete-url-value="https://www.hellowork.com/fr-fr/search/getlocationsuggestionsframeview?displayMissingResultMessage=True"
    data-autocomplete-hiding-class="hidden"
    data-autocomplete-id-value="Locality"
    class="relative"
>
    <label
        for="Locality"
        data-input-validity-target="label"
        class="input-label"
    >
        Localit&#xE9;
    </label>
    <div
        class="input-container"
        data-input-validity-target="container"
        data-controller="clearable"
    >
        <input
            form="alert-form"
            id="Locality"
            data-input-validity-target="input"
            data-autocomplete-target="input"
            data-clearable-target="field"
            data-autocomplete-simple-target="field"
            data-action="
                autocomplete#suggestIfNeeded
                autocomplete-simple#clearSuggestion
                click->toggle#add
                click->toggle#removeAdditional
                focus->toggle#add
                focus->toggle#removeAdditional
            "
            class="peer"
            placeholder="Ville, d&#xE9;partement..."
            autocomplete="off"
            required
            value="Lille 59000"
            data-cy="localityAutocompleteInput"
            aria-describedby="Locality_error"
            
        >
        <button
            type="button"
            class="hocus:!scale-[1.33] transform transition-transform peer-placeholder-shown:hidden"
            data-action="clearable#clear autocomplete-simple#clearSuggestion"
        >
            <svg class="size-3">
                <use href="/svg/icons/nav/close.svg#close"></use>
            </svg>
        </button>
    </div>
    <input
        
        data-input-validity-target="input"
        name="Location.Uri"
        data-autocomplete-simple-target="hiddenInput"
        required
        class="absolute w-0 h-1 opacity-0"
        tabindex="-1"
        value="http://www.rj.com/commun/localite/commune/59350"
        data-action=""
    >
    <div class="relative">
        <turbo-frame
            id="localityAutocompleteFrame"
            data-autocomplete-target="dropdown frame"
            data-turbo="true"
            src=""
            class="absolute h-auto z-[1] top-0 left-0 w-full overflow-visible"
        >
        </turbo-frame>
    </div>
    <span
        id="Locality_error"
        data-input-validity-target="error errorMessage"
        data-cy="Locality_errorMessage"
        class="input-subtext-error hidden"
    >
        
    </span>
</div>


                        

<div
    data-controller="input-validity input-checker email-autocomplete autocomplete-simple focus-group toggle-property toggle"
    data-input-checker-input-value="#emailReadonly"
    
            data-toggle-property-named-value=readOnly
            data-toggle-toggled-class=""
        
    data-action="
        toggle-property:toggled->input-checker#check
        toggle-property:toggled->toggle#toggle
        email-autocomplete:click:outside:hasValue->input-validity#checkValidity
        email-autocomplete:selected->autocomplete-simple#fillSuggestion
        email-autocomplete:selected->input-validity#checkValidity
        valid-form:alert-form@window->input-validity#checkValidity
        reset-form:alert-form@window->input-validity#hideError
        keydown.up->focus-group#focusPreviousElement
        keydown.down->focus-group#focusNextElement
        keydown.esc->email-autocomplete#closeDropdown
    "
    data-input-validity-show-error-class="inline-flex"
    data-input-validity-hide-error-class="hidden"
    data-input-validity-label-error-class="input-label-error"
    data-input-validity-container-error-class="input-container-error"
    data-email-autocomplete-hiding-class="hidden"
    class="relative"
>
    <input type="checkbox" id="emailReadonly" class="peer" hidden>

        <label
            for="Email"
            data-input-validity-target="label"
            class="input-label peer-checked:input-label-disabled "
        >
            Email
        </label>
    <div
        class="input-container peer-checked:input-container-disabled "
        data-input-validity-target="container"
        data-controller="clearable"
        data-toggle-target="toToggle"
    >
        <input
            class="peer input rounded-sm"
            data-cy="emailInput"
            type="email"
            id="Email"
            form="alert-form"
            name="OtpData.Email"
            value=""
            placeholder="contactezmoi@vite.com"
            autocomplete="email"
            pattern="^[a-zA-Z0-9]&#x2B;([a-zA-Z0-9._\&#x2B;\-]*[a-zA-Z0-9_\&#x2B;\-])?@[a-zA-Z0-9]&#x2B;([.\-][a-zA-Z0-9]&#x2B;)*\.[a-zA-Z]{2,}$"
            role="combobox"
            aria-autocomplete="list"
            aria-expanded="false"
            aria-controls="Email_suggestions"
            data-controller=from-account-data
            data-from-account-data-copy-value="Email"
            data-from-account-data-into-value="value"
            data-email-autocomplete-target="input"
            data-autocomplete-simple-target="field"
            data-clearable-target="field"
            data-input-validity-target="input"
            data-action="
                email-autocomplete#suggestEmail
                valid-form:alert-form@window->input-validity#checkValidity
                from-account-data:copied:Email-&gt;toggle-property#toggle"
            
            
            
            required
            
            
            
            data-toggle-property-target=toToggle
            
            aria-describedby="Email_error Email_info"
            
        >
            <button
                type="button"
                class="hocus:!scale-[1.33] transform transition-transform peer-placeholder-shown:hidden [input#emailReadonly:checked_~*_&]:hidden"
                data-cy="Email_clearButton"
                data-action="clearable#clear form-exit#makeDirty"
                aria-label="Effacer le champ email"
            >
                <svg class="size-3" aria-hidden="true">
                    <use href="/svg/icons/nav/close.svg#close"></use>
                </svg>
            </button>
    </div>
    <div class="relative">
        <div class="absolute h-auto top-0 left-0 w-full overflow-visible z-[1]">
            <ul id="Email_suggestions"
                role="listbox"
                data-email-autocomplete-target="dropdown"
                class="hidden bg-white typo-m mt-3 sm:border sm:border-grey-300 sm:rounded-sm sm:py-2">
                <template
                    data-email-autocomplete-target="itemTemplate"
                >
                    

<li role="option" class="hidden sm:px-2" data-email-autocomplete-provider-value="{{provider}}" data-email-autocomplete-target="item">
    <button
        type="button"
        class="w-full text-start hocus:bg-grey-50 rounded-xs pr-3 sm:pr-2 sm:py-2 overflow-hidden text-ellipsis py-3.5 pl-3 sm:pl-2"
        data-email-autocomplete-id-param="{{id}}"
        data-email-autocomplete-label-param="{{provider}}"
        data-focus-group-target="element"
        data-action="email-autocomplete#selectSuggestion">
        {{provider}}
    </button>
</li>
                </template>
            </ul>
        </div>
    </div>
    <span
        id="Email_error"
        data-input-validity-target="error errorMessage"
        data-cy="Email_errorMessage"
        class="input-subtext-error hidden"
    >
        
    </span>

    <div
        id="Email_info"
        class="input-subtext items-center hidden"
    >
        <svg class="mr-2 flex-shrink-0" aria-hidden="true">
            <use href="/svg/badges/info-xs.svg#info-xs"></use>
        </svg>
        <span></span>
    </div>
</div>

                </div>

                <div class="mt-4 sm:mt-6">
                    

<fieldset
    data-controller="input-validity"
        data-action="
        valid-form:alert-form@window->input-validity#checkValidity
        reset-form:alert-form@window->input-validity#hideError
        input->input-validity#checkValidity
    "
    data-input-validity-show-error-class="inline-flex"
    data-input-validity-hide-error-class="hidden"
    data-input-validity-container-error-class="checkbox-button-error"
    data-input-validity-label-error-class="input-label-error"
    >

        <legend
            data-input-validity-target="label"
            class="inline-block mb-3 text-sm ">
            Type de contrat
        </legend>

    <div
        id="Contracts"
        data-controller="checkbox-selector toggle"
        data-checkbox-selector-target="parent"
        data-toggle-toggled-class=hidden
        data-cy="checkboxList"
        class="flex flex-row flex-wrap gap-3"
    >
            

<div class="checkbox-button-secondary checkbox-button-secondary-s checkbox-black "
    data-input-validity-target="container"
    
    
>
    <input
        form="alert-form"
        data-cy="checkbox-CDI"
        type="checkbox"
        class="peer"
        id="ContractsCDI"
        name="Contracts"
        value="CDI"
        data-input-validity-target="input"
        
        
        data-action="
            click-&gt;checkbox-selector#atLeastOneIsChecked
            checkbox-selector:connected@window-&gt;checkbox-selector#atLeastOneIsChecked
            
            
            
        "
        checked
        
        
            >
    <label for="ContractsCDI" class="flex items-center">
        <span class="hidden">
            <svg class="size-3 mr-2 peer-checked:[label_&]:hidden" aria-hidden="true">
                <use href="/svg/icons/add.svg#add"></use>
            </svg>
            <svg class="size-3 mr-2 hidden peer-checked:[label_&]:inline" aria-hidden="true">
                <use href="/svg/icons/tick.svg#tick"></use>
            </svg>
        </span>
        <span>
            CDI
        </span>
    </label>
</div>

            

<div class="checkbox-button-secondary checkbox-button-secondary-s checkbox-black "
    data-input-validity-target="container"
    
    
>
    <input
        form="alert-form"
        data-cy="checkbox-CDD"
        type="checkbox"
        class="peer"
        id="ContractsCDD"
        name="Contracts"
        value="CDD"
        data-input-validity-target="input"
        
        
        data-action="
            click-&gt;checkbox-selector#atLeastOneIsChecked
            
            
            
            
        "
        
        
        
            >
    <label for="ContractsCDD" class="flex items-center">
        <span class="hidden">
            <svg class="size-3 mr-2 peer-checked:[label_&]:hidden" aria-hidden="true">
                <use href="/svg/icons/add.svg#add"></use>
            </svg>
            <svg class="size-3 mr-2 hidden peer-checked:[label_&]:inline" aria-hidden="true">
                <use href="/svg/icons/tick.svg#tick"></use>
            </svg>
        </span>
        <span>
            CDD
        </span>
    </label>
</div>

            

<div class="checkbox-button-secondary checkbox-button-secondary-s checkbox-black "
    data-input-validity-target="container"
    
    
>
    <input
        form="alert-form"
        data-cy="checkbox-Int&#xE9;rim"
        type="checkbox"
        class="peer"
        id="ContractsTravail_temp"
        name="Contracts"
        value="Travail_temp"
        data-input-validity-target="input"
        
        
        data-action="
            click-&gt;checkbox-selector#atLeastOneIsChecked
            
            
            
            
        "
        
        
        
            >
    <label for="ContractsTravail_temp" class="flex items-center">
        <span class="hidden">
            <svg class="size-3 mr-2 peer-checked:[label_&]:hidden" aria-hidden="true">
                <use href="/svg/icons/add.svg#add"></use>
            </svg>
            <svg class="size-3 mr-2 hidden peer-checked:[label_&]:inline" aria-hidden="true">
                <use href="/svg/icons/tick.svg#tick"></use>
            </svg>
        </span>
        <span>
            Int&#xE9;rim
        </span>
    </label>
</div>

            

<div class="checkbox-button-secondary checkbox-button-secondary-s checkbox-black "
    data-input-validity-target="container"
    
    
>
    <input
        form="alert-form"
        data-cy="checkbox-Stage"
        type="checkbox"
        class="peer"
        id="ContractsStage"
        name="Contracts"
        value="Stage"
        data-input-validity-target="input"
        
        
        data-action="
            click-&gt;checkbox-selector#atLeastOneIsChecked
            
            
            
            
        "
        
        
        
            >
    <label for="ContractsStage" class="flex items-center">
        <span class="hidden">
            <svg class="size-3 mr-2 peer-checked:[label_&]:hidden" aria-hidden="true">
                <use href="/svg/icons/add.svg#add"></use>
            </svg>
            <svg class="size-3 mr-2 hidden peer-checked:[label_&]:inline" aria-hidden="true">
                <use href="/svg/icons/tick.svg#tick"></use>
            </svg>
        </span>
        <span>
            Stage
        </span>
    </label>
</div>

            

<div class="checkbox-button-secondary checkbox-button-secondary-s checkbox-black "
    data-input-validity-target="container"
    
    
>
    <input
        form="alert-form"
        data-cy="checkbox-Alternance"
        type="checkbox"
        class="peer"
        id="ContractsAlternance"
        name="Contracts"
        value="Alternance"
        data-input-validity-target="input"
        
        
        data-action="
            click-&gt;checkbox-selector#atLeastOneIsChecked
            
            
            
            
        "
        
        
        
            >
    <label for="ContractsAlternance" class="flex items-center">
        <span class="hidden">
            <svg class="size-3 mr-2 peer-checked:[label_&]:hidden" aria-hidden="true">
                <use href="/svg/icons/add.svg#add"></use>
            </svg>
            <svg class="size-3 mr-2 hidden peer-checked:[label_&]:inline" aria-hidden="true">
                <use href="/svg/icons/tick.svg#tick"></use>
            </svg>
        </span>
        <span>
            Alternance
        </span>
    </label>
</div>

            

<div class="checkbox-button-secondary checkbox-button-secondary-s checkbox-black "
    data-input-validity-target="container"
    
    
>
    <input
        form="alert-form"
        data-cy="checkbox-Ind&#xE9;pendant"
        type="checkbox"
        class="peer"
        id="ContractsIndependant"
        name="Contracts"
        value="Independant"
        data-input-validity-target="input"
        
        
        data-action="
            click-&gt;checkbox-selector#atLeastOneIsChecked
            
            
            
            
        "
        
        
        
            >
    <label for="ContractsIndependant" class="flex items-center">
        <span class="hidden">
            <svg class="size-3 mr-2 peer-checked:[label_&]:hidden" aria-hidden="true">
                <use href="/svg/icons/add.svg#add"></use>
            </svg>
            <svg class="size-3 mr-2 hidden peer-checked:[label_&]:inline" aria-hidden="true">
                <use href="/svg/icons/tick.svg#tick"></use>
            </svg>
        </span>
        <span>
            Ind&#xE9;pendant
        </span>
    </label>
</div>

            

<div class="checkbox-button-secondary checkbox-button-secondary-s checkbox-black hidden"
    data-input-validity-target="container"
    
    data-toggle-target=toToggle
>
    <input
        form="alert-form"
        data-cy="checkbox-Franchise"
        type="checkbox"
        class="peer"
        id="ContractsFranchise"
        name="Contracts"
        value="Franchise"
        data-input-validity-target="input"
        
        
        data-action="
            click-&gt;checkbox-selector#atLeastOneIsChecked
            
            
            
            
        "
        
        
        
            >
    <label for="ContractsFranchise" class="flex items-center">
        <span class="hidden">
            <svg class="size-3 mr-2 peer-checked:[label_&]:hidden" aria-hidden="true">
                <use href="/svg/icons/add.svg#add"></use>
            </svg>
            <svg class="size-3 mr-2 hidden peer-checked:[label_&]:inline" aria-hidden="true">
                <use href="/svg/icons/tick.svg#tick"></use>
            </svg>
        </span>
        <span>
            Franchise
        </span>
    </label>
</div>

            

<div class="checkbox-button-secondary checkbox-button-secondary-s checkbox-black hidden"
    data-input-validity-target="container"
    
    data-toggle-target=toToggle
>
    <input
        form="alert-form"
        data-cy="checkbox-Associ&#xE9;"
        type="checkbox"
        class="peer"
        id="ContractsAssocie"
        name="Contracts"
        value="Associe"
        data-input-validity-target="input"
        
        
        data-action="
            click-&gt;checkbox-selector#atLeastOneIsChecked
            
            
            
            
        "
        
        
        
            >
    <label for="ContractsAssocie" class="flex items-center">
        <span class="hidden">
            <svg class="size-3 mr-2 peer-checked:[label_&]:hidden" aria-hidden="true">
                <use href="/svg/icons/add.svg#add"></use>
            </svg>
            <svg class="size-3 mr-2 hidden peer-checked:[label_&]:inline" aria-hidden="true">
                <use href="/svg/icons/tick.svg#tick"></use>
            </svg>
        </span>
        <span>
            Associ&#xE9;
        </span>
    </label>
</div>

            

<div class="checkbox-button-secondary checkbox-button-secondary-s checkbox-black hidden"
    data-input-validity-target="container"
    
    data-toggle-target=toToggle
>
    <input
        form="alert-form"
        data-cy="checkbox-Fonctionnaire"
        type="checkbox"
        class="peer"
        id="ContractsFonctionnaire"
        name="Contracts"
        value="Fonctionnaire"
        data-input-validity-target="input"
        
        
        data-action="
            click-&gt;checkbox-selector#atLeastOneIsChecked
            
            
            
            
        "
        
        
        
            >
    <label for="ContractsFonctionnaire" class="flex items-center">
        <span class="hidden">
            <svg class="size-3 mr-2 peer-checked:[label_&]:hidden" aria-hidden="true">
                <use href="/svg/icons/add.svg#add"></use>
            </svg>
            <svg class="size-3 mr-2 hidden peer-checked:[label_&]:inline" aria-hidden="true">
                <use href="/svg/icons/tick.svg#tick"></use>
            </svg>
        </span>
        <span>
            Fonctionnaire
        </span>
    </label>
</div>

            

<div class="checkbox-button-secondary checkbox-button-secondary-s checkbox-black hidden"
    data-input-validity-target="container"
    
    data-toggle-target=toToggle
>
    <input
        form="alert-form"
        data-cy="checkbox-Freelance"
        type="checkbox"
        class="peer"
        id="ContractsFreelance"
        name="Contracts"
        value="Freelance"
        data-input-validity-target="input"
        
        
        data-action="
            click-&gt;checkbox-selector#atLeastOneIsChecked
            
            
            
            
        "
        
        
        
            >
    <label for="ContractsFreelance" class="flex items-center">
        <span class="hidden">
            <svg class="size-3 mr-2 peer-checked:[label_&]:hidden" aria-hidden="true">
                <use href="/svg/icons/add.svg#add"></use>
            </svg>
            <svg class="size-3 mr-2 hidden peer-checked:[label_&]:inline" aria-hidden="true">
                <use href="/svg/icons/tick.svg#tick"></use>
            </svg>
        </span>
        <span>
            Freelance
        </span>
    </label>
</div>

            

<div class="checkbox-button-secondary checkbox-button-secondary-s checkbox-black hidden"
    data-input-validity-target="container"
    
    data-toggle-target=toToggle
>
    <input
        form="alert-form"
        data-cy="checkbox-Stage de lyc&#xE9;e"
        type="checkbox"
        class="peer"
        id="ContractsStage_de_lycee"
        name="Contracts"
        value="Stage_de_lycee"
        data-input-validity-target="input"
        
        
        data-action="
            click-&gt;checkbox-selector#atLeastOneIsChecked
            
            
            
            
        "
        
        
        
            >
    <label for="ContractsStage_de_lycee" class="flex items-center">
        <span class="hidden">
            <svg class="size-3 mr-2 peer-checked:[label_&]:hidden" aria-hidden="true">
                <use href="/svg/icons/add.svg#add"></use>
            </svg>
            <svg class="size-3 mr-2 hidden peer-checked:[label_&]:inline" aria-hidden="true">
                <use href="/svg/icons/tick.svg#tick"></use>
            </svg>
        </span>
        <span>
            Stage de lyc&#xE9;e
        </span>
    </label>
</div>


            <button
                type="button"
                data-toggle-target="toToggle"
                class="basis-full hidden inline-flex gap-1 items-center hover:underline cursor-pointer bg-transparent typo-s"
                data-action="toggle#toggle"
                aria-expanded="true"
                aria-controls="Contracts"
                data-cy="seeLessButton">
                Voir moins
                <svg class="size-2" aria-hidden="true">
                    <use href="/svg/icons/arrow.svg#up"></use>
                </svg>
            </button>
            <button
                type="button"
                data-toggle-target="toToggle"
                class="basis-full inline-flex gap-1 items-center hover:underline cursor-pointer typo-s"
                data-action="toggle#toggle"
                aria-expanded="false"
                aria-controls="Contracts"
                data-cy="seeMoreButton">
                Voir plus
                <svg class="size-2" aria-hidden="true">
                    <use href="/svg/icons/arrow.svg#down"></use>
                </svg>
            </button>
    </div>

    <span
        data-input-validity-target="error errorMessage"
        data-cy="Contracts_errorMessage"
        class="input-subtext-error hidden">
        
    </span>
</fieldset>

                </div>
            </div>

            <div class="peer-has-child:hidden flex flex-col items-center connected:flex-col-reverse">
                <turbo-frame
                    id="gcu-checkbox-frame"
                    src="/fr-fr/gcu-checkbox-frame?formId=alert-form&amp;actionWording=cliquant%20sur%20Cr%C3%A9er%20mon%20alerte"
                    class="has-[[data-cgu=checkbox]]:mt-8 has-[[data-cgu=checkbox]]:mb-4 has-[[data-cgu=checkbox]]:sm:mb-3 has-[[data-cgu=wording]]:mt-4 has-[[data-cgu=wording]]:sm:mt-3 has-[[data-cgu=wording]]:text-center">
                </turbo-frame>
                <button
                    type="submit"
                    data-cy="alertCreation"
                    data-action="click->form-validator#onSubmit"
                    class="btn-primary-l bg-yellow-300 text-black w-full connected:mt-8">
                    <span data-form-validator-target="text" class="connected:inline not-connected:hidden">
                        Cr&#xE9;er mon alerte
                    </span>
                    <span data-form-validator-target="text" class="not-connected:inline connected:hidden">
                        Continuer
                    </span>
                    <div
                        data-form-validator-target="logo"
                        class="hidden">
                        <svg id="loader" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 60 60" xml:space="preserve" class="size-5 flex-shrink-0">
    <circle id="circle1" fill="currentColor" stroke="none" cx="6" cy="30" r="6">
        <animateTransform
            attributeName="transform"
            dur="1s"
            type="translate"
            values="0 15 ; 0 -15; 0 15"
            repeatCount="indefinite"
            begin="0.1"/>
    </circle>
    <circle fill="currentColor" stroke="none" cx="30" cy="30" r="6">
        <animateTransform
            attributeName="transform"
            dur="1s"
            type="translate"
            values="0 10 ; 0 -10; 0 10"
            repeatCount="indefinite"
            begin="0.2"/>
    </circle>
    <circle fill="currentColor" stroke="none" cx="54" cy="30" r="6">
        <animateTransform
            attributeName="transform"
            dur="1s"
            type="translate"
            values="0 5 ; 0 -5; 0 5"
            repeatCount="indefinite"
            begin="0.3"/>
    </circle>
</svg>
                    </div>
                </button>
            </div>
        </form>
    </div>

    


</turbo-frame>


                </div>
            </div>
        </div>
    </div>
</div>


                    <div class="hidden not-connected:block">
                        <input type="checkbox" id="alertModal" class="peer" hidden>
                        <div class="relative hidden peer-checked:block"
                             data-controller="removable cookie-from-value alert-scroll-up mutable"
                             data-alert-scroll-up-category-value="1"
                             data-cookie-from-value-name-value="hw_hide_alert_scrollup"
                             data-cookie-from-value-val-value="true" data-cookie-from-value-duration-value="30" data-action="
                                mutable:connected->cookie-from-value#hasCookie:once
                                mutable:connected->alert-scroll-up#checkIfShouldBeRemoved
                                modal:discarded@document->removable#remove
                                cookie-from-value:hasCookie->removable#remove
                                ">
                            <div class="absolute bottom-0">
                                <div data-controller="intersect input-checker analytics"
                                     data-input-checker-input-value="#alert-modal" data-intersect-name-value="modal"
                                     data-analytics-values-param='{"event": "generic", "EventName": "alert_load", "EventLibelle": "do-scroll-up"}'
                                     data-action="
                                        intersect:modal:enter->input-checker#check
                                        intersect:modal:enter->analytics#push
                                        intersect:modal:enter->cookie-from-value#setCookie
                                        ">
                                </div>
                                <div class="h-screen"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>




<div id="postuler"
     data-controller="toggle intersect"
     data-intersect-name-value="form"
     data-toggle-toggled-additional-class="hidden"
     data-action="intersect:form:enter->toggle#addAdditional intersect:form:exit->toggle#removeAdditional"
     class="block w-full bg-purple-200 mb-12 lg:mb-24">
	<div
		data-toggle-target="toToggleAdditional"
		class="
			fixed flex gap-x-4 w-full justify-center sm:justify-end z-[3] bottom-0 left-0 right-0
			sm:bottom-6 py-3 px-4 sm:px-6 sm:py-0 lg:hidden bg-white
			sm:bg-transparent shadow-sticky-button sm:shadow-none
			"
		>

		<div
			aria-hidden="true"
			data-controller="toggle"
			data-toggle-toggled-class="!hidden"
			data-toggle-toggled-additional-class="coach-cta-out bg-none"
			data-toggle-target="toToggle toToggleAdditional"
			data-action="ab-test:exposed@document->toggle#remove intersect:coachCta:exit@window->toggle#addAdditional:once"
			class="!hidden sm:hidden pointer-events-none absolute inset-x-0 bottom-full h-56 bg-gradient-to-t from-white to-transparent"
		></div>
		<a
			id="mobile-sticky-button"
			class="btn-primary-candidacy-l grow sm:max-w-80 coach-cta-in"
			href="#postuler"
		>
			Postuler
		</a>
		<div
			data-controller="toggle"
			data-toggle-toggled-class="hidden"
			data-toggle-toggled-additional-class="!hidden"
			data-toggle-target="toToggle toToggleAdditional"
			data-action="ab-test:exposed@document->toggle#remove intersect:coachCta:exit@window->toggle#removeAdditional:once"
			class="coach-cta-in h-11 hidden !hidden"
		>
			


<button
    title="Ouvrir le coach emploi"
    data-turbo-frame="coach-panel-frame"
    class="btn-outline-purple-l pl-2 py-2 pr-4 h-full border-2 text-purple-500 bg-white"
    data-controller="input-checker"
    data-input-checker-input-value="#coach-visibility"
    data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;ai_assistant_launch&quot;,&quot;event_info&quot;:&quot;coach_emploi&quot;,&quot;cta&quot;:&quot;button&quot;,&quot;wording&quot;:&quot;Me pr&#xE9;parer&quot;}"
    data-action="input-checker#check click->analytics#push"
    aria-controls="coach-panel"
>
    <div class="w-[30px] h-6 shrink-0" aria-hidden="true">
        
<div class="relative size-full text-purple-500" aria-hidden="true">
    <img
        alt=""
        class="h-full w-4/5 object-contain object-bottom absolute left-0"
        src="/images/ai-agent/coach/sophia.webp"
        loading="lazy"
    />
    <svg class="h-1/5 aspect-square absolute top-0 right-[20%] small-star-animation">
        <use href="/svg/ai-agent/agent-star.svg#agent-star"></use>
    </svg>
    <svg class="h-1/3 aspect-square absolute top-[10%] right-0 big-star-animation">
        <use href="/svg/ai-agent/agent-star.svg#agent-star"></use>
    </svg>
</div>

    </div>
    Me&nbsp;préparer
</button>

		</div>
	</div>
	<div class="layout-grid" data-controller="intersect input-checker"
	     data-intersect-name-value="alert" data-intersect-threshold-value="0.5"
	     data-input-checker-input-value="#alertModal" data-action="intersect:alert:enter->input-checker#check">
		<div class="layout-inner-grid">
			<div class="col-span-full lg:col-start-3 lg:col-end-11 mt-8 sm:mt-14"
			     data-controller="user-authenticated toggle" data-toggle-toggled-class="hidden"
			     data-action="user-authenticated:userIsAuthenticated->toggle#toggle">
					<h2 class="text-xl sm:text-3xl hidden" data-toggle-target="toToggle">
						<span>Envoyez votre candidature</span>
						<p class="overflow-ellipsis whitespace-nowrap font-bold">dès maintenant !</p>
					</h2>
					<div class="text-xl sm:text-3xl" data-toggle-target="toToggle" role="heading" aria-level="2">
						<span>Créez votre compte Hellowork et</span>
						<p class="overflow-ellipsis whitespace-nowrap font-bold">envoyez votre candidature !</p>
					</div>
			</div>
		</div>
		<div class="layout-inner-grid" id="offer-detail-funnel-container"
		     data-controller="update-turbo-src"
		     data-update-turbo-src-endpoint-value="/fr-fr/offres/getinitialformframeview"
		     data-update-turbo-src-query-params-value='{ "offerId": 84336130 }'
		     data-action="pageshow@window->update-turbo-src#forceUpdate">
			<div class="col-span-full sm:col-start-1 sm:col-end-13 lg:col-start-3 lg:col-end-11 sm:col-span-8 mb-16 mt-6 sm:mt-8">
				<turbo-frame id="offer-detail-step-frame"
					data-update-turbo-src-target="turboFrame"
					src="/fr-fr/offres/getinitialformframeview?offerId=84336130"
					loading="lazy"
				>
					<div class="px-4 py-6 sm:w-auto sm:py-10 sm:px-[88px] lg:p-8 bg-white rounded-sm">
						<div class="flex justify-center items-center min-h-[620px] lg:min-h-[420px]">
							<svg id="loader" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 60 60" xml:space="preserve" class="size-10">
    <circle id="circle1" fill="currentColor" stroke="none" cx="6" cy="30" r="6">
        <animateTransform
            attributeName="transform"
            dur="1s"
            type="translate"
            values="0 15 ; 0 -15; 0 15"
            repeatCount="indefinite"
            begin="0.1"/>
    </circle>
    <circle fill="currentColor" stroke="none" cx="30" cy="30" r="6">
        <animateTransform
            attributeName="transform"
            dur="1s"
            type="translate"
            values="0 10 ; 0 -10; 0 10"
            repeatCount="indefinite"
            begin="0.2"/>
    </circle>
    <circle fill="currentColor" stroke="none" cx="54" cy="30" r="6">
        <animateTransform
            attributeName="transform"
            dur="1s"
            type="translate"
            values="0 5 ; 0 -5; 0 5"
            repeatCount="indefinite"
            begin="0.3"/>
    </circle>
</svg>
						</div>
					</div>
				</turbo-frame>
			</div>
		</div>
	</div>
</div>


<div class="layout-grid mb-12 sm:mb-16 lg:mb-24">
        <div id="similar-offers" class="layout-inner-grid gap-y-6 mb-4 sm:mb-10">
            

    <div class="col-span-full">
        <h2 class="typo-xl sm:typo-3xl">
            Ces offres pourraient aussi <br><span class="font-bold"> vous intéresser</span>
        </h2>
    </div>
        <div class="small-group col-span-4 sm:col-span-6 xl:col-span-4">
            
<div
    class="group h-full overflow-hidden bg-white rounded-sm border border-grey-100 hover:border-grey-500 focus-within:outline focus-within:transition-none transition-border-color duration-100"
>
    <div class="h-full relative flex flex-col sm:flex-row sm:small-group:flex-col ">
        <div class="absolute right-6 sm:small-group:right-4 top-6 sm:small-group:top-[21px] z-[2] flex gap-4 sm:gap-0">
            

<turbo-frame id="bookmark-frame-card83881052">
    <form 
        action="/fr-fr/candidat/tooglebookmark"
        method="GET"
        data-controller="bookmark"
        data-bookmark-offer-id-value="83881052"
        data-bookmark-bookmarked-icon-value="/svg/icons/bookmark.svg#bookmark-active"
        data-bookmark-unbookmarked-icon-value="/svg/icons/bookmark.svg#bookmark"
        data-bookmark-bookmarked-class="text-pink-500"
        data-fetch-account-data-event-param="turbo:submit-end"
        data-action="fetch-account-data#refreshAfterNextTurboEvent"
    >
        <input type="hidden" name="idOffre" value="83881052">
        <input type="hidden" name="turboFrameId" value="bookmark-frame-card83881052">
        <input type="hidden" name="isFromToolbar" value="False"/>
        <button 
            class="btn-icon-no-outline-m sm:btn-icon-no-outline-l small-group:sm:btn-icon-no-outline-m"
            data-bookmark-target="button"
            data-analytics-values-param='{"event": "generic", "EventName" : "bookmark_add", "EventLibelle": "" }'
            data-action="analytics#push:stop"
            data-cy="bookmarkBtn"
        >
            <svg class="size-3 sm:size-4 small-group:sm:size-3">
                <use data-bookmark-target="icon" href="/svg/icons/bookmark.svg#bookmark"></use>
            </svg>
        </button>
    </form>

    


</turbo-frame>
        </div>
        



    <header
        class="
            max-h-[74px]
            min-h-[74px]
            sm:max-h-none
            relative
            w-full
            overflow-hidden
            sm:max-w-64
            sm:small-group:w-full
            sm:small-group:max-h-[74px]
            sm:small-group:max-w-none
        ">

            <div
                class="
                    relative
                    h-[74px]
                    sm:h-full
                    bg-purple-100
                    text-purple-200
                ">
                <svg class="absolute
                        -left-[110px] sm:-left-[120px]
                        -bottom-[100px] sm:bottom-[20px] sm:small-group:-bottom-[95px]
                        w-[617px] sm:w-[547px]
                        h-[301px] sm:h-[267px]
                        opacity-20 rotate-[158deg]">
                    <use href="/svg/illustrations/chevron.svg#chevron"></use>
                </svg>
            </div>

        <div class="
                z-[2]
                absolute
                sm:top-auto
                inset-4
                sm:inset-6
                flex
                justify-center
                items-center
                w-[5.75rem]
                h-11
                rounded-xs
                bg-white
                sm:small-group:inset-4"
        >
                <img
                    loading="lazy"
                    src="https://f.hellowork.com/img/entreprises/190084.png"
                    alt="Klanik recrutement"
                    title="Recrutement Klanik"
                    class="
                        w-full
                        h-full
                        px-3
                        py-2
                        object-contain"
                >
        </div>
    </header>

        



<div
    
            data-controller="intersect"
            data-analytics-values-param="{&quot;event&quot;:&quot;generic_product&quot;,&quot;event_name&quot;:&quot;product.display&quot;,&quot;product_data&quot;:[{&quot;product_id&quot;:&quot;83881052&quot;,&quot;product_response_type&quot;:&quot;ATS&quot;,&quot;product_list&quot;:&quot;LO-Suggest-Detail&quot;,&quot;product_position&quot;:1,&quot;product_category&quot;:&quot;1&quot;,&quot;product_status&quot;:&quot;NotDefined&quot;}]}"
            data-action="intersect:enter->analytics#push:once"
            class="flex flex-col justify-between size-full p-4 sm:p-6 sm:small-group:p-4 min-w-0"
    data-cy="serpCard"
>
    <div class="flex flex-col">
        <header class="w-11/12">
                <div>
                        <a 
                            data-analytics-values-param="{&quot;event&quot;:&quot;generic_product&quot;,&quot;event_name&quot;:&quot;productClick&quot;,&quot;product_data&quot;:[{&quot;product_id&quot;:&quot;83881052&quot;,&quot;product_response_type&quot;:&quot;ATS&quot;,&quot;product_list&quot;:&quot;LO-Suggest-Detail&quot;,&quot;product_position&quot;:1}],&quot;app_version_array&quot;:{&quot;one-time-password-V1.0&quot;:&quot;Version_B&quot;}}"
                            data-action="analytics#push"
                            data-turbo="false"
                            href="/fr-fr/emplois/83881052.html"
                            title="D&#xE9;veloppeur Full Stack Java H/F - Klanik"
                            class="no-underline outline-none focus-within:underline forwarder inline"
                            data-cy="offerTitle"
                                                        aria-label="Voir offre de D&#xE9;veloppeur Full Stack Java H/F &#xE0; Lille - 59, chez Klanik, pour un CDI, avec un salaire de 40&#x202F;000 - 45&#x202F;000 &#x20AC; / an, en temps plein, T&#xE9;l&#xE9;travail partiel"
                        >
                            


<h3 class="inline">
    <p class="typo-l sm:small-group:typo-l sm:typo-xl">D&#xE9;veloppeur Full Stack Java H/F</p>
        <p class="typo-s inline">Klanik</p>
</h3>

                        </a>

                </div>

        </header>
            <div class="mt-6 flex flex-col gap-3 sm:flex-row sm:small-group:flex-col">
                <div class="flex gap-3 flex-wrap">
                        <div
                            class="readonly tag-secondary-s w-fit border-0"
                            data-cy="localisationCard"
                        >
                            Lille - 59
                        </div>
                        <div
                            class="readonly tag-secondary-s w-fit border-0"
                            data-cy="contractCard"
                        >
                            CDI
                        </div>
                        <div class="readonly tag-secondary-s typo-s-bold w-fit border-0">40&#x202F;000 - 45&#x202F;000 &#x20AC; / an</div>
                            <div
                                class="readonly tag-secondary-s border-0 w-fit"
                                data-cy="contractTag"
                            >
                                T&#xE9;l&#xE9;travail partiel
                            </div>
                </div>
            </div>

    </div>


            <div class="mt-6 sm:mt-3 flex sm:flex-row-reverse items-end justify-between sm:small-group:mt-6 sm:small-group:flex-row flex-wrap">
                    <span class="btn-outline-m group-hocus-within:bg-black group-hocus-within:border-transparent group-hocus-within:text-white group-hocus-within:opacity-100">Voir l’offre</span>
                    <div class="typo-s text-grey-500 pl-1 pt-1">il y a 15 jours</div>
            </div>
</div>
    </div>
</div>
        </div>
        <div class="small-group col-span-4 sm:col-span-6 xl:col-span-4">
            
<div
    class="group h-full overflow-hidden bg-white rounded-sm border border-grey-100 hover:border-grey-500 focus-within:outline focus-within:transition-none transition-border-color duration-100"
>
    <div class="h-full relative flex flex-col sm:flex-row sm:small-group:flex-col ">
        <div class="absolute right-6 sm:small-group:right-4 top-6 sm:small-group:top-[21px] z-[2] flex gap-4 sm:gap-0">
            

<turbo-frame id="bookmark-frame-card82502480">
    <form 
        action="/fr-fr/candidat/tooglebookmark"
        method="GET"
        data-controller="bookmark"
        data-bookmark-offer-id-value="82502480"
        data-bookmark-bookmarked-icon-value="/svg/icons/bookmark.svg#bookmark-active"
        data-bookmark-unbookmarked-icon-value="/svg/icons/bookmark.svg#bookmark"
        data-bookmark-bookmarked-class="text-pink-500"
        data-fetch-account-data-event-param="turbo:submit-end"
        data-action="fetch-account-data#refreshAfterNextTurboEvent"
    >
        <input type="hidden" name="idOffre" value="82502480">
        <input type="hidden" name="turboFrameId" value="bookmark-frame-card82502480">
        <input type="hidden" name="isFromToolbar" value="False"/>
        <button 
            class="btn-icon-no-outline-m sm:btn-icon-no-outline-l small-group:sm:btn-icon-no-outline-m"
            data-bookmark-target="button"
            data-analytics-values-param='{"event": "generic", "EventName" : "bookmark_add", "EventLibelle": "" }'
            data-action="analytics#push:stop"
            data-cy="bookmarkBtn"
        >
            <svg class="size-3 sm:size-4 small-group:sm:size-3">
                <use data-bookmark-target="icon" href="/svg/icons/bookmark.svg#bookmark"></use>
            </svg>
        </button>
    </form>

    


</turbo-frame>
        </div>
        



    <header
        class="
            max-h-[74px]
            min-h-[74px]
            sm:max-h-none
            relative
            w-full
            overflow-hidden
            sm:max-w-64
            sm:small-group:w-full
            sm:small-group:max-h-[74px]
            sm:small-group:max-w-none
        ">

            <div class="absolute inset-0 bg-black/5 z-[1]"></div>
            <img
                class="
                    size-full
                    object-cover
                    object-center
                "
                src="https://f.hellowork.com/media/companypage/201060/350_233/86909_63867694933416325616757530.jpg"
                loading="lazy"
                alt="Proxiad recrutement">

        <div class="
                z-[2]
                absolute
                sm:top-auto
                inset-4
                sm:inset-6
                flex
                justify-center
                items-center
                w-[5.75rem]
                h-11
                rounded-xs
                bg-white
                sm:small-group:inset-4"
        >
                <img
                    loading="lazy"
                    src="https://f.hellowork.com/img/entreprises/201060.png"
                    alt="Proxiad recrutement"
                    title="Recrutement Proxiad"
                    class="
                        w-full
                        h-full
                        px-3
                        py-2
                        object-contain"
                >
        </div>
    </header>

        



<div
    
            data-controller="intersect"
            data-analytics-values-param="{&quot;event&quot;:&quot;generic_product&quot;,&quot;event_name&quot;:&quot;product.display&quot;,&quot;product_data&quot;:[{&quot;product_id&quot;:&quot;82502480&quot;,&quot;product_response_type&quot;:&quot;ATS&quot;,&quot;product_list&quot;:&quot;LO-Suggest-Detail&quot;,&quot;product_position&quot;:2,&quot;product_category&quot;:&quot;1&quot;,&quot;product_status&quot;:&quot;NotDefined&quot;}]}"
            data-action="intersect:enter->analytics#push:once"
            class="flex flex-col justify-between size-full p-4 sm:p-6 sm:small-group:p-4 min-w-0"
    data-cy="serpCard"
>
    <div class="flex flex-col">
        <header class="w-11/12">
                <div>
                        <a 
                            data-analytics-values-param="{&quot;event&quot;:&quot;generic_product&quot;,&quot;event_name&quot;:&quot;productClick&quot;,&quot;product_data&quot;:[{&quot;product_id&quot;:&quot;82502480&quot;,&quot;product_response_type&quot;:&quot;ATS&quot;,&quot;product_list&quot;:&quot;LO-Suggest-Detail&quot;,&quot;product_position&quot;:2}],&quot;app_version_array&quot;:{&quot;one-time-password-V1.0&quot;:&quot;Version_B&quot;}}"
                            data-action="analytics#push"
                            data-turbo="false"
                            href="/fr-fr/emplois/82502480.html"
                            title="D&#xE9;veloppeur Full Stack Java H/F - Proxiad"
                            class="no-underline outline-none focus-within:underline forwarder inline"
                            data-cy="offerTitle"
                                                        aria-label="Voir offre de D&#xE9;veloppeur Full Stack Java H/F &#xE0; Lille - 59, chez Proxiad, pour un CDI, avec un salaire de 38&#x202F;000 - 45&#x202F;000 &#x20AC; / an, en temps plein, T&#xE9;l&#xE9;travail partiel"
                        >
                            


<h3 class="inline">
    <p class="typo-l sm:small-group:typo-l sm:typo-xl">D&#xE9;veloppeur Full Stack Java H/F</p>
        <p class="typo-s inline">Proxiad</p>
</h3>

                        </a>

                </div>

        </header>
            <div class="mt-6 flex flex-col gap-3 sm:flex-row sm:small-group:flex-col">
                <div class="flex gap-3 flex-wrap">
                        <div
                            class="readonly tag-secondary-s w-fit border-0"
                            data-cy="localisationCard"
                        >
                            Lille - 59
                        </div>
                        <div
                            class="readonly tag-secondary-s w-fit border-0"
                            data-cy="contractCard"
                        >
                            CDI
                        </div>
                        <div class="readonly tag-secondary-s typo-s-bold w-fit border-0">38&#x202F;000 - 45&#x202F;000 &#x20AC; / an</div>
                            <div
                                class="readonly tag-secondary-s border-0 w-fit"
                                data-cy="contractTag"
                            >
                                T&#xE9;l&#xE9;travail partiel
                            </div>
                </div>
            </div>

    </div>


            <div class="mt-6 sm:mt-3 flex sm:flex-row-reverse items-end justify-between sm:small-group:mt-6 sm:small-group:flex-row flex-wrap">
                    <span class="btn-outline-m group-hocus-within:bg-black group-hocus-within:border-transparent group-hocus-within:text-white group-hocus-within:opacity-100">Voir l’offre</span>
                    <div class="typo-s text-grey-500 pl-1 pt-1">il y a 24 jours</div>
            </div>
</div>
    </div>
</div>
        </div>
        <div class="small-group col-span-4 sm:col-span-6 xl:col-span-4">
            
<div
    class="group h-full overflow-hidden bg-white rounded-sm border border-grey-100 hover:border-grey-500 focus-within:outline focus-within:transition-none transition-border-color duration-100"
>
    <div class="h-full relative flex flex-col sm:flex-row sm:small-group:flex-col ">
        <div class="absolute right-6 sm:small-group:right-4 top-6 sm:small-group:top-[21px] z-[2] flex gap-4 sm:gap-0">
            

<turbo-frame id="bookmark-frame-card83302602">
    <form 
        action="/fr-fr/candidat/tooglebookmark"
        method="GET"
        data-controller="bookmark"
        data-bookmark-offer-id-value="83302602"
        data-bookmark-bookmarked-icon-value="/svg/icons/bookmark.svg#bookmark-active"
        data-bookmark-unbookmarked-icon-value="/svg/icons/bookmark.svg#bookmark"
        data-bookmark-bookmarked-class="text-pink-500"
        data-fetch-account-data-event-param="turbo:submit-end"
        data-action="fetch-account-data#refreshAfterNextTurboEvent"
    >
        <input type="hidden" name="idOffre" value="83302602">
        <input type="hidden" name="turboFrameId" value="bookmark-frame-card83302602">
        <input type="hidden" name="isFromToolbar" value="False"/>
        <button 
            class="btn-icon-no-outline-m sm:btn-icon-no-outline-l small-group:sm:btn-icon-no-outline-m"
            data-bookmark-target="button"
            data-analytics-values-param='{"event": "generic", "EventName" : "bookmark_add", "EventLibelle": "" }'
            data-action="analytics#push:stop"
            data-cy="bookmarkBtn"
        >
            <svg class="size-3 sm:size-4 small-group:sm:size-3">
                <use data-bookmark-target="icon" href="/svg/icons/bookmark.svg#bookmark"></use>
            </svg>
        </button>
    </form>

    


</turbo-frame>
        </div>
        



    <header
        class="
            max-h-[74px]
            min-h-[74px]
            sm:max-h-none
            relative
            w-full
            overflow-hidden
            sm:max-w-64
            sm:small-group:w-full
            sm:small-group:max-h-[74px]
            sm:small-group:max-w-none
        ">

            <div class="absolute inset-0 bg-black/5 z-[1]"></div>
            <img
                class="
                    size-full
                    object-cover
                    object-center
                "
                src="https://f.hellowork.com/media/companypage/201216/350_233/110434_6386708640138297648371950.jpeg"
                loading="lazy"
                alt="Randstad Digital recrutement">

        <div class="
                z-[2]
                absolute
                sm:top-auto
                inset-4
                sm:inset-6
                flex
                justify-center
                items-center
                w-[5.75rem]
                h-11
                rounded-xs
                bg-white
                sm:small-group:inset-4"
        >
                <img
                    loading="lazy"
                    src="https://f.hellowork.com/img/entreprises/201216.png"
                    alt="Randstad Digital recrutement"
                    title="Recrutement Randstad Digital"
                    class="
                        w-full
                        h-full
                        px-3
                        py-2
                        object-contain"
                >
        </div>
    </header>

        



<div
    
            data-controller="intersect"
            data-analytics-values-param="{&quot;event&quot;:&quot;generic_product&quot;,&quot;event_name&quot;:&quot;product.display&quot;,&quot;product_data&quot;:[{&quot;product_id&quot;:&quot;83302602&quot;,&quot;product_response_type&quot;:&quot;UrlWithForm&quot;,&quot;product_list&quot;:&quot;LO-Suggest-Detail&quot;,&quot;product_position&quot;:3,&quot;product_category&quot;:&quot;1&quot;,&quot;product_status&quot;:&quot;NotDefined&quot;}]}"
            data-action="intersect:enter->analytics#push:once"
            class="flex flex-col justify-between size-full p-4 sm:p-6 sm:small-group:p-4 min-w-0"
    data-cy="serpCard"
>
    <div class="flex flex-col">
        <header class="w-11/12">
                <div>
                        <a 
                            data-analytics-values-param="{&quot;event&quot;:&quot;generic_product&quot;,&quot;event_name&quot;:&quot;productClick&quot;,&quot;product_data&quot;:[{&quot;product_id&quot;:&quot;83302602&quot;,&quot;product_response_type&quot;:&quot;UrlWithForm&quot;,&quot;product_list&quot;:&quot;LO-Suggest-Detail&quot;,&quot;product_position&quot;:3}],&quot;app_version_array&quot;:{&quot;one-time-password-V1.0&quot;:&quot;Version_B&quot;}}"
                            data-action="analytics#push"
                            data-turbo="false"
                            href="/fr-fr/emplois/83302602.html"
                            title="D&#xE9;veloppeur Fullstack Java H/F - Randstad Digital"
                            class="no-underline outline-none focus-within:underline forwarder inline"
                            data-cy="offerTitle"
                                                        aria-label="Voir offre de D&#xE9;veloppeur Fullstack Java H/F &#xE0; Lille - 59, chez Randstad Digital, pour un CDI, en temps plein, T&#xE9;l&#xE9;travail partiel"
                        >
                            


<h3 class="inline">
    <p class="typo-l sm:small-group:typo-l sm:typo-xl">D&#xE9;veloppeur Fullstack Java H/F</p>
        <p class="typo-s inline">Randstad Digital</p>
</h3>

                        </a>

                </div>

        </header>
            <div class="mt-6 flex flex-col gap-3 sm:flex-row sm:small-group:flex-col">
                <div class="flex gap-3 flex-wrap">
                        <div
                            class="readonly tag-secondary-s w-fit border-0"
                            data-cy="localisationCard"
                        >
                            Lille - 59
                        </div>
                        <div
                            class="readonly tag-secondary-s w-fit border-0"
                            data-cy="contractCard"
                        >
                            CDI
                        </div>
                            <div
                                class="readonly tag-secondary-s border-0 w-fit"
                                data-cy="contractTag"
                            >
                                T&#xE9;l&#xE9;travail partiel
                            </div>
                </div>
            </div>

    </div>


            <div class="mt-6 sm:mt-3 flex sm:flex-row-reverse items-end justify-between sm:small-group:mt-6 sm:small-group:flex-row flex-wrap">
                    <span class="btn-outline-m group-hocus-within:bg-black group-hocus-within:border-transparent group-hocus-within:text-white group-hocus-within:opacity-100">Voir l’offre</span>
                    <div class="typo-s text-grey-500 pl-1 pt-1">il y a 2 jours</div>
            </div>
</div>
    </div>
</div>
        </div>

        </div>

        <span data-controller="atc"
              data-atc-l-value="xuggcf://jjj=pt=uryybjbex=pt=pbz/se-se/rzcybv/erpurepur=pt=ugzy?x=Q%p3%n9irybccrhe&#x2B;shyy-fgnpx&amp;x_nhgbpbzcyrgr=uggc%3n%2s%2sjjj=pt=ew=pt=pbz%2sPbzzha%2sCbfg%2sQrirybccrhe_shyyfgnpx&amp;y=Yvyyr&#x2B;59000&amp;y_nhgbpbzcyrgr=uggc%3n%2s%2sjjj=pt=ew=pt=pbz%2spbzzha%2sybpnyvgr%2spbzzhar%2s59350f"
              data-atc-t-value="x_oynaxf"
              data-analytics-values-param='{
                    "event": "generic",
                    "EventName" : "cta_click",
                    "cta" : "bouton-offres",
                    "wording" : "Voir plus doffres"
                }'
              data-action="click->analytics#push"
              class="w-fit btn-primary-l">
            Voir plus d'offres
        </span>
</div>

    <div id="similar-searches" class="layout-grid">
        <div class="layout-inner-grid">
            <div class="col-span-full mb-16 lg:mb-10 p-8 rounded-sm bg-blue-50"
                 data-controller="expandable-section toggle"
                 data-expandable-section-max-displayed-items-desktop-value="15"
                 data-expandable-section-max-displayed-items-mobile-value="7"
                 data-expandable-section-hidden-class="hidden"
                 data-toggle-toggled-class="hidden"
                 data-toggle-toggled-additional-class="hidden">
                <h2 class="typo-xl">Recherches similaires</h2>
                <ul class="mt-6 grid space-y-2 sm:space-y-0 sm:gap-x-8 sm:gap-y-3 sm:grid-cols-2 lg:grid-cols-3">
                        <li data-expandable-section-target="elementToHide"
                            data-toggle-target="toToggle">
                            <a class="typo-m link-text my-1 block" href="/fr-fr/emploi/metier_developpeur.html" title="Offres d&#x27;emploi D&#xE9;veloppeur" data-turbo="false">Emploi D&#xE9;veloppeur</a>
                        </li>
                        <li data-expandable-section-target="elementToHide"
                            data-toggle-target="toToggle">
                            <a class="typo-m link-text my-1 block" href="/fr-fr/emploi/domaine_informatique.html" title="Offres d&#x27;emploi Informatique" data-turbo="false">Emploi Informatique</a>
                        </li>
                        <li data-expandable-section-target="elementToHide"
                            data-toggle-target="toToggle">
                            <a class="typo-m link-text my-1 block" href="/fr-fr/emploi/ville_dunkerque-59240.html" title="Offres d&#x27;emploi Dunkerque" data-turbo="false">Emploi Dunkerque</a>
                        </li>
                        <li data-expandable-section-target="elementToHide"
                            data-toggle-target="toToggle">
                            <a class="typo-m link-text my-1 block" href="/fr-fr/emploi/ville_valenciennes-59300.html" title="Offres d&#x27;emploi Valenciennes" data-turbo="false">Emploi Valenciennes</a>
                        </li>
                        <li data-expandable-section-target="elementToHide"
                            data-toggle-target="toToggle">
                            <a class="typo-m link-text my-1 block" href="/fr-fr/emploi/ville_cambrai-59400.html" title="Offres d&#x27;emploi Cambrai" data-turbo="false">Emploi Cambrai</a>
                        </li>
                        <li data-expandable-section-target="elementToHide"
                            data-toggle-target="toToggle">
                            <a class="typo-m link-text my-1 block" href="/fr-fr/emploi/ville_douai-59500.html" title="Offres d&#x27;emploi Douai" data-turbo="false">Emploi Douai</a>
                        </li>
                        <li data-expandable-section-target="elementToHide"
                            data-toggle-target="toToggle">
                            <a class="typo-m link-text my-1 block" href="/fr-fr/emploi/ville_maubeuge-59600.html" title="Offres d&#x27;emploi Maubeuge" data-turbo="false">Emploi Maubeuge</a>
                        </li>
                        <li data-expandable-section-target="elementToHide"
                            data-toggle-target="toToggle">
                            <a class="typo-m link-text my-1 block" href="/fr-fr/emploi/ville_hazebrouck-59190.html" title="Offres d&#x27;emploi Hazebrouck" data-turbo="false">Emploi Hazebrouck</a>
                        </li>
                        <li data-expandable-section-target="elementToHide"
                            data-toggle-target="toToggle">
                            <a class="typo-m link-text my-1 block" href="/fr-fr/emploi/ville_tourcoing-59200.html" title="Offres d&#x27;emploi Tourcoing" data-turbo="false">Emploi Tourcoing</a>
                        </li>
                        <li data-expandable-section-target="elementToHide"
                            data-toggle-target="toToggle">
                            <a class="typo-m link-text my-1 block" href="/fr-fr/emploi/ville_caudry-59540.html" title="Offres d&#x27;emploi Caudry" data-turbo="false">Emploi Caudry</a>
                        </li>
                        <li data-expandable-section-target="elementToHide"
                            data-toggle-target="toToggle">
                            <a class="typo-m link-text my-1 block" href="/fr-fr/emploi/ville_saint-amand-les-eaux-59230.html" title="Offres d&#x27;emploi Saint-Amand-les-Eaux" data-turbo="false">Emploi Saint-Amand-les-Eaux</a>
                        </li>
                        <li data-expandable-section-target="elementToHide"
                            data-toggle-target="toToggle">
                            <a class="typo-m link-text my-1 block" href="/fr-fr/emploi/ville_roubaix-59100.html" title="Offres d&#x27;emploi Roubaix" data-turbo="false">Emploi Roubaix</a>
                        </li>
                        <li data-expandable-section-target="elementToHide"
                            data-toggle-target="toToggle">
                            <a class="typo-m link-text my-1 block" href="/fr-fr/emploi/metier_technicien-support-informatique.html" title="Offres d&#x27;emploi Technicien support informatique" data-turbo="false">Emploi Technicien support informatique</a>
                        </li>
                        <li data-expandable-section-target="elementToHide"
                            data-toggle-target="toToggle">
                            <a class="typo-m link-text my-1 block" href="/fr-fr/emploi/metier_charge-projet.html" title="Offres d&#x27;emploi Charg&#xE9; de projet" data-turbo="false">Emploi Charg&#xE9; de projet</a>
                        </li>
                        <li data-expandable-section-target="elementToHide"
                            data-toggle-target="toToggle">
                            <a class="typo-m link-text my-1 block" href="/fr-fr/emploi/metier_chef-de-projet-informatique.html" title="Offres d&#x27;emploi Chef de projet informatique" data-turbo="false">Emploi Chef de projet informatique</a>
                        </li>
                        <li data-expandable-section-target="elementToHide"
                            data-toggle-target="toToggle">
                            <a class="typo-m link-text my-1 block" href="/fr-fr/emploi/metier_chef-de-projet-informatique.html" title="Offres d&#x27;emploi Chef de projet informatique" data-turbo="false">Emploi Chef de projet informatique</a>
                        </li>
                        <li data-expandable-section-target="elementToHide"
                            data-toggle-target="toToggle">
                            <a class="typo-m link-text my-1 block" href="/fr-fr/emploi/metier_tech-lead.html" title="Offres d&#x27;emploi Tech lead" data-turbo="false">Emploi Tech lead</a>
                        </li>
                        <li data-expandable-section-target="elementToHide"
                            data-toggle-target="toToggle">
                            <a class="typo-m link-text my-1 block" href="/fr-fr/entreprise/domaine_informatique.html" title="Informatique Entreprises" data-turbo="false">Entreprises Informatique</a>
                        </li>
                        <li data-expandable-section-target="elementToHide"
                            data-toggle-target="toToggle">
                            <a class="typo-m link-text my-1 block" href="/fr-fr/entreprise/metier_developpeur.html" title="D&#xE9;veloppeur Entreprises" data-turbo="false">Entreprises D&#xE9;veloppeur</a>
                        </li>
                        <li data-expandable-section-target="elementToHide"
                            data-toggle-target="toToggle">
                            <a class="typo-m link-text my-1 block" href="/fr-fr/entreprise/ville_lille-59000.html" title="Lille Entreprises" data-turbo="false">Entreprises Lille</a>
                        </li>
                        <li data-expandable-section-target="elementToHide"
                            data-toggle-target="toToggle">
                            <a class="typo-m link-text my-1 block" href="/fr-fr/emploi/mot-cle_java.html" title="Offres d&#x27;emploi Java" data-turbo="false">Emploi Java</a>
                        </li>
                        <li data-expandable-section-target="elementToHide"
                            data-toggle-target="toToggle">
                            <a class="typo-m link-text my-1 block" href="/fr-fr/emploi/mot-cle_confirme.html" title="Offres d&#x27;emploi Confirm&#xE9;" data-turbo="false">Emploi Confirm&#xE9;</a>
                        </li>
                        <li data-expandable-section-target="elementToHide"
                            data-toggle-target="toToggle">
                            <a class="typo-m link-text my-1 block" href="/fr-fr/emploi/mot-cle_oracle.html" title="Offres d&#x27;emploi Oracle" data-turbo="false">Emploi Oracle</a>
                        </li>
                        <li data-expandable-section-target="elementToHide"
                            data-toggle-target="toToggle">
                            <a class="typo-m link-text my-1 block" href="/fr-fr/emploi/mot-cle_developpement.html" title="Offres d&#x27;emploi D&#xE9;veloppement" data-turbo="false">Emploi D&#xE9;veloppement</a>
                        </li>
                        <li data-expandable-section-target="elementToHide"
                            data-toggle-target="toToggle">
                            <a class="typo-m link-text my-1 block" href="/fr-fr/emploi/mot-cle_cycle.html" title="Offres d&#x27;emploi Cycle" data-turbo="false">Emploi Cycle</a>
                        </li>
                        <li data-expandable-section-target="elementToHide"
                            data-toggle-target="toToggle">
                            <a class="typo-m link-text my-1 block" href="/fr-fr/emploi/mot-cle_cdi-ville_lille-59000.html" title="Offres d&#x27;emploi CDI Lille" data-turbo="false">Emploi CDI Lille</a>
                        </li>
                        <li data-expandable-section-target="elementToHide"
                            data-toggle-target="toToggle">
                            <a class="typo-m link-text my-1 block" href="/fr-fr/emploi/mot-cle_stable-ville_lille-59000.html" title="Offres d&#x27;emploi Stable Lille" data-turbo="false">Emploi Stable Lille</a>
                        </li>
                        <li data-expandable-section-target="elementToHide"
                            data-toggle-target="toToggle">
                            <a class="typo-m link-text my-1 block" href="/fr-fr/emploi/mot-cle_developpement-ville_lille-59000.html" title="Offres d&#x27;emploi D&#xE9;veloppement Lille" data-turbo="false">Emploi D&#xE9;veloppement Lille</a>
                        </li>
                        <li data-expandable-section-target="elementToHide"
                            data-toggle-target="toToggle">
                            <a class="typo-m link-text my-1 block" href="/fr-fr/emploi/mot-cle_cycle-ville_lille-59000.html" title="Offres d&#x27;emploi Cycle Lille" data-turbo="false">Emploi Cycle Lille</a>
                        </li>
                </ul>
                <button class="hidden typo-s block mt-4 w-fit"
                        aria-label="Voir plus de recherches similaires"
                        data-expandable-section-target="buttonToDisplay"
                        data-toggle-target="toToggleAdditional"
                        data-action="click->toggle#remove click->toggle#addAdditional">
                    Voir plus
                    <svg class="w-2 h-4 inline" aria-hidden="true">
                        <use href="/svg/icons/arrow.svg#down"></use>
                    </svg>
                </button>
            </div>
        </div>
    </div>




    <script type="text/javascript">
        dataLayer.push({ 'event': 'view_item', 'items': [{ 'id': '84336130', 'location_id': 'Lille - 59', 'google_business_vertical': 'jobs' }] });
    </script>


    <input type="hidden" name="JobsUri" form="formOneTap" value="http://www.rj.com/Commun/Post/Developpeur_fullstack">
    <input type="hidden" name="JobsUri" form="formCustomOneTap" value="http://www.rj.com/Commun/Post/Developpeur_fullstack">
    <input type="hidden" name="LocationsUri" form="formOneTap" value="http://www.rj.com/commun/localite/commune/59350">
    <input type="hidden" name="LocationsUri" form="formCustomOneTap" value="http://www.rj.com/commun/localite/commune/59350">
        <input type="hidden" name="Contracts" form="formOneTap" value="CDI">
        <input type="hidden" name="Contracts" form="formCustomOneTap" value="CDI">





<turbo-frame id="service-adaptation" src=""
             data-controller="service-adaptation"
             data-service-adaptation-url-value="/fr-fr/country/getpopinframeview"
             data-service-adaptation-hide-message-class="hidden">
</turbo-frame>


<div 
    id="breadcrumb"
    class="layout-grid"
>

    <!-- delete asSection when serp is done and use layout-grid-->

	<nav class="asSection pt-12 sm:pt-20">
		<ol class="flex flex-wrap gap-x-2 text-grey-500 text-sm">
					<li class="py-1 first:before:content-[''] before:content-['>']">
						<a href="https://www.hellowork.com/fr-fr/" title="Accueil" class="link-text">
							Accueil
						</a>
					</li>
					<li class="py-1 first:before:content-[''] before:content-['>']">
						<a href="https://www.hellowork.com/fr-fr/emploi.html" title="Emploi" class="link-text">
							Emploi
						</a>
					</li>
					<li class="py-1 first:before:content-[''] before:content-['>']">
						<a href="https://www.hellowork.com/fr-fr/emploi/ville_lille-59000.html" title="Emploi Lille" class="link-text">
							Emploi Lille
						</a>
					</li>
					<li class="py-1 first:before:content-[''] before:content-['>']">
						<a href="https://www.hellowork.com/fr-fr/emploi/domaine_informatique-ville_lille-59000.html" title="Emploi Informatique Lille" class="link-text">
							Emploi Informatique Lille
						</a>
					</li>
					<li class="py-1 first:before:content-[''] before:content-['>']">
						<a href="https://www.hellowork.com/fr-fr/emploi/metier_developpeur-ville_lille-59000.html" title="Emploi D&#xE9;veloppeur Lille" class="link-text">
							Emploi D&#xE9;veloppeur Lille
						</a>
					</li>
					<li class="py-1 before:content-['>']">
						<span class="font-semibold text-black">
                        	D&#xE9;veloppeur Fullstack Java - Angular - Kubernetes H/F
                    	</span>
					</li>
		</ol>
	</nav>

</div>

<div class="mt-10">
    



<footer class="sm:layout-grid 2xl:mx-auto typo-s 2xl:mb-20 sm:mb-6 m-0">
    <div class="bg-grey-50 sm:rounded-sm !col-[full] grid grid-cols-subgrid py-6 xl:py-12
           sm:py-14 px-4 sm:px-0">
        <div class="layout-inner-grid sm:col-[main]">
            <div class="xl:col-span-3 col-span-5 sm:col-start-2 xl:col-start-1">      
                <span class="typo-l">
                    Les sites
                </span>
                <ul
                    class="flex flex-col gap-6 mt-4 mb-6 sm:mt-6 sm:mb-10"
                >
                    <li><a class="link-text" href="https://hellocv.com/" target="_blank" rel="noopener">HelloCV</a></li>
                    <li><a class="link-text" href="https://www.helloworkplace.fr/" target="_blank" rel="noopener">Helloworkplace</a></li>
                    <li><a class="link-text" href="https://www.blogdumoderateur.com/" target="_blank" rel="noopener">BDM</a></li>
                    <li><a class="link-text" href="https://www.jobijoba.com/fr/" target="_blank" rel="noopener">Jobijoba</a></li>
                    <li>
                        <span 
                            class="atc-text" 
                            data-controller="atc"
                            data-atc-l-value="xuggcf://jjj=pt=znsbezngvba=pt=se/f" 
                            data-atc-t-value="x_oynaxf"
                        >
                            Maformation
                        </span>
                    </li>
                    <li><a class="link-text" href="https://diplomeo.com/" target="_blank" rel="noopener">Diplomeo</a></li>
                </ul>
            </div>
            <div class="xl:col-span-3 col-span-5 sm:col-start-7 xl:col-start-4">
                <span class="typo-l">L&#x27;emploi</span>
                <ul
                    class="flex flex-col gap-6 mt-4 mb-6 sm:mt-6 sm:mb-10"
                >
                        <li>
                            <span 
                                class="atc-text" 
                                data-controller="atc"
                                data-atc-l-value="x/se-se/rzcybv/vaqrk-pngrtbevr=pt=ugzyf"
                            >
                                Offres d&#x27;emploi par m&#xE9;tier
                            </span>
                        </li>
                        <li>
                            <span 
                                class="atc-text" 
                                data-controller="atc"
                                data-atc-l-value="x/se-se/rzcybv/vaqrk-ybpnyvgr=pt=ugzyf"
                            >
                                Offres d&#x27;emploi par ville
                            </span>
                        </li>
                        <li>
                            <span 
                                class="atc-text" 
                                data-controller="atc"
                                data-atc-l-value="x/se-se/ragercevfr=pt=ugzyf"
                            >
                                Offres d&#x27;emploi par entreprise
                            </span>
                        </li>
                        <li>
                            <span 
                                class="atc-text" 
                                data-controller="atc"
                                data-atc-l-value="x/se-se/rzcybv/vaqrk-zbg-pyr=pt=ugzyf"
                            >
                                Offres d&#x27;emploi par mots cl&#xE9;s
                            </span>
                        </li>
                </ul>
            </div>
            <div class="xl:col-span-3 col-span-5 sm:col-start-2 xl:col-start-7">
                <span class="typo-l">
                    L'entreprise
                </span>
                <ul
                    class="flex flex-col gap-6 mt-4 mb-6 sm:mt-6 sm:mb-10"
                >
                    <li>
                        <span 
                            class="atc-text" 
                            data-controller="atc"
                            data-atc-l-value="xuggcf://jjj=pt=uryybjbex-tebhc=pt=pbzf" 
                            data-atc-t-value="x_oynaxf"
                        >
                            Qui sommes-nous&nbsp;?
                        </span>
                    </li>
                    <li>
                        <span 
                            class="atc-text" 
                            data-controller="atc"
                            data-atc-l-value="xuggcf://pneevrerf=pt=uryybjbex-tebhc=pt=pbzf" 
                            data-atc-t-value="x_oynaxf"
                        >
                            On recrute
                        </span>
                    </li>
                    <li>
                        <span 
                            class="atc-text" 
                            data-controller="atc"
                            data-atc-l-value="xuggcf://ohqqv=pt=uryybjbex=pt=pbzf"
                        >
                            Accès client
                        </span>
                    </li>
                </ul>
            </div>
            <div class="xl:col-span-3 col-span-5 sm:col-start-7 xl:col-start-10">
                <span class="typo-l">
                    Les apps
                </span>
                <div 
                    class="flex flex-wrap items-left flex-row sm:flex-col mt-4 sm:mt-6 mb-6 sm:mb-10 gap-6 sm:gap-4 sm:w-36 text-white"
                >
                        <span 
                            data-controller="atc"
                            data-atc-l-value="xuggcf://cynl=pt=tbbtyr=pt=pbz/fgber/nccf/qrgnvyf?vq=pbz=pt=ertvbafwbo=pt=naqebvqf"
                            data-atc-t-value="x_oynaxf"
                        >
                            <svg class="w-36 h-[42px] cursor-pointer rounded-sm"
                                 alt="Application Android (nouvelle fenêtre)">
                                <use href="/svg/icons/playstore-badge.svg#playstore-badge"></use>
                            </svg>
                        </span>
                        <span
                            data-controller="atc"
                            data-atc-l-value="xuggcf://nccf=pt=nccyr=pt=pbz/se/ncc/ertvbafwbo-rzcybv/vq408615037?zg=8f"
                            data-atc-t-value="x_oynaxf"
                        >
                            <svg class="w-[133px] h-[42px] cursor-pointer rounded-sm"
                                 alt="Application iOS (nouvelle fenêtre)">
                                <use href="/svg/icons/apps/appstore-badge.svg#appstore-badge"></use>
                            </svg>
                        </span>
                </div>
            </div>
            <div class="col-span-full sm:col-start-2 xl:col-start-1 flex flex-col gap-4 flex-wrap justify-between">
                <div
                    class="flex flex-col sm:flex-row gap-x-4 gap-y-2"
                >
                    <div>Nous suivre sur :</div>
                    <ul class="flex gap-4" aria-label="Liste de nos réseaux sociaux">
                            <li class="flex">
                                    <span
                                        class="m-auto hocus:text-grey-500 cursor-pointer"
                                        data-controller="atc"
                                        data-atc-l-value="xuggcf://jjj=pt=snprobbx=pt=pbz/uryybjbexpbzf"
                                        data-atc-t-value="x_oynaxf"
                                    >
                                        <svg class="size-4">
                                            <use href="/svg/icons/social-networks/facebook.svg#facebook"></use>
                                        </svg>
                                </span>
                            </li>
                            <li class="flex">
                                    <span
                                        class="m-auto hocus:text-grey-500 cursor-pointer"
                                        data-controller="atc"
                                        data-atc-l-value="xuggcf://jjj=pt=lbhghor=pt=pbz/punaary/HPel7GvA8-qSXDHtlHZLNAGDf"
                                        data-atc-t-value="x_oynaxf"
                                    >
                                        <svg class="size-4">
                                            <use href="/svg/icons/social-networks/youtube.svg#youtube"></use>
                                        </svg>
                                </span>
                            </li>
                            <li class="flex">
                                    <span
                                        class="m-auto hocus:text-grey-500 cursor-pointer"
                                        data-controller="atc"
                                        data-atc-l-value="xuggcf://gjvggre=pt=pbz/uryybjbexf"
                                        data-atc-t-value="x_oynaxf"
                                    >
                                        <svg class="size-4">
                                            <use href="/svg/icons/social-networks/x.svg#x"></use>
                                        </svg>
                                </span>
                            </li>
                            <li class="flex">
                                    <span
                                        class="m-auto hocus:text-grey-500 cursor-pointer"
                                        data-controller="atc"
                                        data-atc-l-value="xuggcf://jjj=pt=gvxgbx=pt=pbz/@uryybjbexpbzf"
                                        data-atc-t-value="x_oynaxf"
                                    >
                                        <svg class="size-4">
                                            <use href="/svg/icons/social-networks/tiktok.svg#tiktok"></use>
                                        </svg>
                                </span>
                            </li>
                            <li class="flex">
                                    <span
                                        class="m-auto hocus:text-grey-500 cursor-pointer"
                                        data-controller="atc"
                                        data-atc-l-value="xuggcf://jjj=pt=vafgntenz=pt=pbz/uryybjbex_/f"
                                        data-atc-t-value="x_oynaxf"
                                    >
                                        <svg class="size-4">
                                            <use href="/svg/icons/social-networks/instagram.svg#instagram"></use>
                                        </svg>
                                </span>
                            </li>
                            <li class="flex">
                                    <span
                                        class="m-auto hocus:text-grey-500 cursor-pointer"
                                        data-controller="atc"
                                        data-atc-l-value="xuggcf://jjj=pt=yvaxrqva=pt=pbz/pbzcnal/uryybjbexpbz/f"
                                        data-atc-t-value="x_oynaxf"
                                    >
                                        <svg class="size-4">
                                            <use href="/svg/icons/social-networks/linkedin.svg#linkedin"></use>
                                        </svg>
                                </span>
                            </li>
                            <li class="flex">
                                    <span
                                        class="m-auto hocus:text-grey-500 cursor-pointer"
                                        data-controller="atc"
                                        data-atc-l-value="xuggcf://cebsvyr=pt=tbbtyr=pt=pbz/pc/Pt0iMl8kZJM5ZKSeL3cef"
                                        data-atc-t-value="x_oynaxf"
                                    >
                                        <svg class="size-4">
                                            <use href="/svg/icons/social-networks/google.svg#google"></use>
                                        </svg>
                                </span>
                            </li>
                            <li class="flex">
                                    <span
                                        class="m-auto hocus:text-grey-500 cursor-pointer"
                                        data-controller="atc"
                                        data-atc-l-value="xuggcf://se=pt=cvagrerfg=pt=pbz/Uryybjbex_/f"
                                        data-atc-t-value="x_oynaxf"
                                    >
                                        <svg class="size-4">
                                            <use href="/svg/icons/social-networks/pinterest.svg#pinterest"></use>
                                        </svg>
                                </span>
                            </li>
                    </ul>
                </div>
                <div class="flex flex-wrap gap-x-2 sm:gap-x-4 gap-y-4">
                        <span 
                            class="atc-text" 
                            data-controller="atc"
                            data-atc-t-value="x_oynaxf"
                            data-atc-l-value="x/se-se/cntr/vasbf-yrtnyrf=pt=ugzyf"
                        >
                            Informations légales
                        </span>
                    <span 
                        class="atc-text" 
                        data-controller="atc"
                        data-atc-t-value="x_oynaxf"
                        data-atc-l-value="xuggcf://jjj=pt=uryybjbex-tebhc=pt=pbz/se/yrtny/pth-uryybjbex/f">
                        CGU
                    </span>
                    <span 
                        class="atc-text"
                        data-controller="atc"
                        data-atc-t-value="x_oynaxf"
                        data-atc-l-value="xuggcf://jjj=pt=uryybjbex-tebhc=pt=pbz/se/yrtny/cqp-uryybjbex/f">
                        Politique de confidentialité
                    </span>
                    <span 
                        class="link-text" 
                        data-hw-cc-btn-toggle-modal
                    >
                        Gérer les traceurs
                    </span>
                    <span
                        class="atc-text"
                        data-controller="atc"
                        data-atc-t-value="x_oynaxf"
                        data-atc-l-value="xuggcf://jjj=pt=uryybjbex-tebhc=pt=pbz/se/yrtny/qrpynengvba-npprffvovyvgr-uryybjbex/f">
                        Accessibilité : non conforme
                    </span>
                    <span 
                        class="atc-text" 
                        data-controller="atc"
                        data-atc-t-value="x_oynaxf"
                        data-atc-l-value="xuggcf://uryybjbex-pnaqvqng=pt=mraqrfx=pt=pbz/up/sef">
                        Aide et contact
                    </span>
                </div>
            </div>
        </div>
    </div>
</footer>
</div>



                    </div>
                    
        
    



<input
    id="coach-visibility"
    type="checkbox"
    hidden
    class="peer"
/>

<div 
    data-controller="toggle update-turbo-src"
    data-toggle-toggled-class="!hidden"
    data-toggle-toggled-additional-class="coach-cta-out"
    data-toggle-target="toToggle toToggleAdditional"
    data-update-turbo-src-turbo-frame-id-value="coach-panel-frame"
    data-action="ab-test:exposed@document->toggle#remove intersect:coachCta:exit@window->toggle#addAdditional:once"
    class="flex lg:flex flex-col items-end gap-2 peer-checked:!hidden fixed bottom-20 right-4 lg:bottom-6 z-40 !hidden"
>
    <button
        type="button"
        data-update-turbo-src-url-param="/ai/agent/job-matcher?offerId=84336130"
        class="btn-outline-purple-m border-[2px] bg-white"
        data-controller="input-checker"
        data-input-checker-input-value="#coach-visibility"
        data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;ai_assistant_launch&quot;,&quot;event_info&quot;:&quot;coach_emploi&quot;,&quot;cta&quot;:&quot;button&quot;,&quot;wording&quot;:&quot;Analyser mon CV&quot;}"
        data-action="click->update-turbo-src#update input-checker#check click->analytics#push"
        aria-controls="coach-panel"
    >
        Analyser mon CV
    </button>

    <button
        type="button"
        data-update-turbo-src-url-param="/ai/agent/offer-summary?offerId=84336130"
        class="btn-outline-purple-m border-[2px] bg-white"
        data-controller="input-checker"
        data-input-checker-input-value="#coach-visibility"
        data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;ai_assistant_launch&quot;,&quot;event_info&quot;:&quot;coach_emploi&quot;,&quot;cta&quot;:&quot;button&quot;,&quot;wording&quot;:&quot;R&#xE9;sumer l&#x27;offre&quot;}"
        data-action="click->update-turbo-src#update input-checker#check click->analytics#push"
        aria-controls="coach-panel"
    >
        Résumer l'offre
    </button>

    <button
        type="button"
        data-update-turbo-src-url-param="/ai/agent/coach?offerId=84336130"
        aria-label="Ouvrir le coach emploi"
        data-controller="input-checker"
        data-input-checker-input-value="#coach-visibility"
        data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;ai_assistant_launch&quot;,&quot;event_info&quot;:&quot;coach_emploi&quot;,&quot;cta&quot;:&quot;icon&quot;}"
        data-action="click->update-turbo-src#update input-checker#check click->analytics#push"
        aria-controls="coach-panel"
    >
        <div class="w-16 h-[52px]" aria-hidden="true">
            
<div class="relative size-full text-purple-500" aria-hidden="true">
    <img
        alt=""
        class="h-full w-4/5 object-contain object-bottom absolute left-0"
        src="/images/ai-agent/coach/sophia.webp"
        loading="lazy"
    />
    <svg class="h-1/5 aspect-square absolute top-0 right-[20%] small-star-animation">
        <use href="/svg/ai-agent/agent-star.svg#agent-star"></use>
    </svg>
    <svg class="h-1/3 aspect-square absolute top-[10%] right-0 big-star-animation">
        <use href="/svg/ai-agent/agent-star.svg#agent-star"></use>
    </svg>
</div>

        </div>
    </button>
</div>
    
<aside class="absolute sm:relative inset-0 hidden peer-checked:!block">
    <div
        id="coach-panel"
        data-controller="coach-error"
        data-action="turbo:before-fetch-response->coach-error#handleResponse"
        class="
            sticky w-full sm:w-[376px] inset-0 h-dvh z-40 overflow-hidden
            sm:border-l sm:border-l-grey-100 bg-black/60 backdrop-blur
        "
    >
        <div
            class="sm:hidden"
            data-controller="intersect"
            data-action="intersect:enter->toggle-on-body#add intersect:exit->toggle-on-body#remove">
        </div>
        <div class="mt-24 sm:mt-0 h-[calc(100%-96px)] sm:h-full rounded-t-sm sm:rounded-t-none bg-white text-pretty">
            <div class="flex flex-col size-full">
                <div class="relative flex-1 flex flex-col overflow-hidden">
                    <header class="flex items-center px-6 py-4 typo-l-bold shrink-0">
                        <div class="w-10 h-8 shrink-0 aspect-square mr-2">
                            
<div class="relative size-full text-purple-500" aria-hidden="true">
    <img
        alt=""
        class="h-full w-4/5 object-contain object-bottom absolute left-0"
        src="/images/ai-agent/coach/sophia.webp"
        loading="lazy"
    />
    <svg class="h-1/5 aspect-square absolute top-0 right-[20%] ">
        <use href="/svg/ai-agent/agent-star.svg#agent-star"></use>
    </svg>
    <svg class="h-1/3 aspect-square absolute top-[10%] right-0 ">
        <use href="/svg/ai-agent/agent-star.svg#agent-star"></use>
    </svg>
</div>

                        </div>
                        Coach Emploi
                        <div class="badge-blue-s ml-2">
                            Bêta
                        </div>
                        <button
                            title="Fermer le coach emploi"
                            data-controller="input-checker"
                            data-input-checker-input-value="#coach-visibility"
                            data-action="input-checker#uncheck"
                            class="ml-auto">
                            <svg class="size-3" aria-hidden="true">
                                <use href="/svg/icons/nav/close.svg#close"></use>
                            </svg>
                        </button>
                    </header>

                    <template data-coach-error-target="template">
                        <div
                            role="alert"
                            aria-live="assertive"
                            tabindex="-1"
                            class="focus:outline-2 focus:outline-offset-2 focus:outline-error-600">
                            <div class="bg-error-50 flex gap-4 items-start p-4 rounded-sm">
                                <div class="bg-error-600 flex items-center justify-center size-6 min-w-6 rounded-full">
                                    <svg aria-hidden="true" class="size-3 text-white">
                                        <use href="/svg/icons/nav/close.svg#close"></use>
                                    </svg>
                                </div>
                                <div class="flex flex-col gap-1.5 min-w-0">
                                    <p class="text-error-600 typo-s-bold">
                                        Nous avons eu un problème, veuillez recharger ou revenir plus tard.
                                    </p>
                                    <button
                                        type="button"
                                        data-action="click->coach-error#reload"
                                        class="text-black typo-s underline self-start">
                                        Recharger
                                    </button>
                                </div>
                            </div>
                        </div>
                    </template>

                    <turbo-frame
                        id="coach-panel-frame"
                        src="/ai/agent/coach?offerId=84336130"
                        loading="lazy"
                        class="flex-1 overflow-y-auto overscroll-contain hidden connected:block">
                        <div class="w-full mt-8">
                            <svg id="loader" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 60 60" xml:space="preserve" class="size-8 mx-auto">
    <circle id="circle1" fill="currentColor" stroke="none" cx="6" cy="30" r="6">
        <animateTransform
            attributeName="transform"
            dur="1s"
            type="translate"
            values="0 15 ; 0 -15; 0 15"
            repeatCount="indefinite"
            begin="0.1"/>
    </circle>
    <circle fill="currentColor" stroke="none" cx="30" cy="30" r="6">
        <animateTransform
            attributeName="transform"
            dur="1s"
            type="translate"
            values="0 10 ; 0 -10; 0 10"
            repeatCount="indefinite"
            begin="0.2"/>
    </circle>
    <circle fill="currentColor" stroke="none" cx="54" cy="30" r="6">
        <animateTransform
            attributeName="transform"
            dur="1s"
            type="translate"
            values="0 5 ; 0 -5; 0 5"
            repeatCount="indefinite"
            begin="0.3"/>
    </circle>
</svg>
                            <span class="sr-only">Chargement du coach emploi...</span>
                        </div>
                    </turbo-frame>
                    <div class="flex-1 overflow-y-auto overscroll-contain flex flex-col items-center justify-center px-6 py-8 text-center connected:hidden">
                        <div class="pl-[22px] mb-4">
                            <div class="w-28 h-[90px]">
                                
<div class="relative size-full text-purple-500" aria-hidden="true">
    <img
        alt=""
        class="h-full w-4/5 object-contain object-bottom absolute left-0"
        src="/images/ai-agent/coach/sophia.webp"
        loading="lazy"
    />
    <svg class="h-1/5 aspect-square absolute top-0 right-[20%] small-star-animation">
        <use href="/svg/ai-agent/agent-star.svg#agent-star"></use>
    </svg>
    <svg class="h-1/3 aspect-square absolute top-[10%] right-0 big-star-animation">
        <use href="/svg/ai-agent/agent-star.svg#agent-star"></use>
    </svg>
</div>

                            </div>
                        </div>
                        <div class="typo-m-bold sm:typo-long-2m-bold mb-8 text-balance text-center">
                            <p class="mb-0">Connectez-vous</p>
                            <p>pour profiter de Coach Emploi</p>
                            <ul class="mt-6 list-none flex flex-wrap justify-center gap-3">
                                <li class="badge-grey-m">
                                    <svg class="size-2 shrink-0" aria-hidden="true">
                                        <use href="/svg/icons/check-bold.svg#check-bold"></use>
                                    </svg>
                                    Analyse de CV
                                </li>
                                <li class="badge-grey-m">
                                    <svg class="size-2 shrink-0" aria-hidden="true">
                                        <use href="/svg/icons/check-bold.svg#check-bold"></use>
                                    </svg>
                                    Résumé d'offre
                                </li>
                                <li class="badge-grey-m">
                                    <svg class="size-2 shrink-0" aria-hidden="true">
                                        <use href="/svg/icons/check-bold.svg#check-bold"></use>
                                    </svg>
                                    Entretien avec un coach virtuel
                                </li>
                            </ul>
                            <p class="mt-3 typo-xs font-normal">… et bien plus !</p>
                        </div>
                        <a
                            data-controller="atc"
                            data-atc-l-value="x/se-se/pnaqvqng/pbaarkvba-vafpevcgvba=pt=ugzy?ergheaHey=%2Sse-se%2Srzcybvf%2S84336130=pt=ugzy#pbaarkvbaf"
                            data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;account_login&quot;,&quot;event_info&quot;:&quot;coach_emploi&quot;,&quot;wording&quot;:&quot;Continuer avec un compte&quot;}"
                            data-action="analytics#push"
                            class="btn-primary-candidacy-l">
                            Continuer avec un compte
                        </a>
                    </div>
                </div>

                <footer class="shrink-0 px-6 py-3 text-center text-grey-600 text-[10px] leading-[14px] hidden connected:block">
                    En dialoguant avec notre assistant IA, vous déclarez avoir pris connaissance de notre
                    <span
                        data-controller="atc"
                        data-atc-l-value="xuggcf://jjj=pt=uryybjbex-tebhc=pt=pbz/se/yrtny/cqp-uryybjbex/f"
                        data-atc-t-value="x_oynaxf"
                        class="atc-underline">
                        politique de confidentialité
                    </span>.
                    Notre assistant IA est en version bêta test et peut faire des erreurs. Pour tout savoir sur le fonctionnement, consultez la
                    <span
                        data-controller="atc"
                        data-atc-l-value="xuggcf://jjj=pt=uryybjbex-tebhc=pt=pbz/se/yrtny/abgvpr-vasbezngvba-uryybjbex-20251120/f"
                        data-atc-t-value="x_oynaxf"
                        class="atc-underline">
                        notice d'information
                    </span>.
                </footer>
            </div>
        </div>
    </div>
</aside>


    
                </div>
          
            <section
                id="turboStreamToastMessage"
                data-display-toast-message-target="turboStreamToastMessage"
                data-content-missing-target="container"
                class="
                    fixed
                    flex
                    flex-col
                    gap-y-4
                    z-50
                    w-full
                    -top-[90px]
                    px-4
                    sm:px-0
                    sm:w-auto
                    sm:top-24
                    sm:-right-[388px]
                    xl:-right-[448px]
                ">
            </section>

                <turbo-frame
                    id="dynamic-toast-messages"
                    src="/fr-fr/toastmessages">
                </turbo-frame>
            
<template data-content-missing-target="template"
          data-display-toast-message-target="errorTemplate">
    <div data-content-missing-target="instance">
        


    <div
    data-controller="removable intersect toggle timer"
    data-toggle-target="toToggle"
    data-intersect-name-value="notification"
    data-timer-timeout-value="5000"
    data-toggle-toggled-class="slidein"
    data-removable-animation-class="slideout"
    data-action="intersect:notification:enter->timer#start:once
    intersect:notification:enter->toggle#add
    timer:timeout->removable#remove
    mouseover->timer#pause
    mouseout->timer#pause"
    role="alert"
    class="rounded-sm
               flex
               items-center
               bg-blackToast
               shadow-toast
               p-4
               gap-4
               w-full
               min-h-[90px]
               sm:min-h-fit
               sm:w-[388px]
               xl:w-[448px]
               toast-scale">

        <svg class="h-7 w-7 flex-shrink-0" aria-hidden="true">
            <use href="/svg/badges/error.svg#error"></use>
        </svg>

        <div class="flex flex-col gap-2 text-white w-full">
                <p class="typo-s-bold">{{title}}</p>

                <div class="typo-s overflow-wrap-anywhere">
                    {{message}}
                </div>

                <span
                class="typo-s-bold atc-underline hover:no-underline"
                data-controller="atc"
                data-atc-l-value="{{link}}"
                >
                    {{linkLabel}}
                </span>
        </div>

        <button data-action="removable#remove" class="block" aria-label="Fermer la notification">
            <svg class="size-3 text-white">
                <use href="/svg/icons/nav/close.svg#close"></use>
            </svg>
        </button>



    </div>

    </div>
</template>

            

        </main>

        

        <script data-turbo-suppress-warning src="https://f.hellowork.com/hellowork/ressources/2.57.9/scripts/js/stimulus.js" data-turbo-eval="false" defer></script>
        <script src="https://f.hellowork.com/hellowork/ressources/2.57.9/scripts/js/general.js" defer></script>

        

        
    </body>
</html>

test/fixtures/detail-jsonld.html

<!DOCTYPE html>
<html lang="fr-fr"
    class="scroll-smooth"
    data-controller="fetch-account-data"
    data-fetch-account-data-url-value="/fr-fr/compte/accountdata"
>
<head>
    
<!--
En visualisant le code source vous acceptez les CGU accessibles à l’adresse : https://www.hellowork.comhttps://www.hellowork-group.com/fr/legal/cgu-hellowork/
Notamment l’article 8.2
L’Utilisateur peut uniquement utiliser le Site aux fins d’accéder aux Services, ce exclusivement à des fins privées et non commerciales.
Il est notamment expressément reconnu et accepté par l’Utilisateur que l’utilisation de systèmes automatisés ou de logiciels pour extraire des données du Site, en particulier le Contenu et la CVthèque (« capture de données d’écran » / « screen scraping / web scraping» notamment), à quelques fins que ce soit, commerciales ou non, est strictement interdite, à moins que Hellowork n’ait conclu une convention de licence écrite autorisant expressément l’Utilisateur à extraire une partie des données du Site.
-->


    <meta charset="UTF-8"/>

    <title>Offre Emploi CDI D&#xE9;veloppeur en Automatisme et Supervision Industrielle Lille (59) - Recrutement par Mercato de l&#x27;emploi | Hellowork</title>

    <script type="text/javascript">
    /* Init du push de piano analytics */
     window._pac = window._pac || {};
      _pac.queueVarName = "_paqpiano";
      var _paqpiano = window._paqpiano || [];
</script>


    <!-- #region Google_Tag_Manager -->
<script>window.dataLayer = window.dataLayer || [];window.dataLayer.push({"categoryPage":"Detail","sujetPage":"Offre","typePage":"DO-Classique","idOffre":"67170737","Metier":"developpeur","IsNewJob":"new","Domaine":"informatique","Tags":"cdi, responsable, pharmaceutique, stable, developpement, metropole, anglais, pme, bureau, junior, relation-client, expert, robotique, automatisme, bts-cira, reseau, licence, permis-d, support-technique, bts-crsa, but-geii, informatique-industrielle, analyse, autonomie, capteurs, client, donnees, etudes, experience, firewall, ihm, integration, machine, supervision, tolerie","Fonction":"informatique","Region":"hauts-de-france","Departement":"nord","Ville":"lille-59000","Nom-Entreprise":"mercato-de-l-emploi","typeEntreprise":"cabinet-recr","Taille-Texte":"281","IsMobile":"False","searchLocalite":"","searchFonction":"","searchTypeContrat":"","searchMetier":"","searchDomaine":"","contrat":"CDI","datePublicationOffre":"20260928","idCategory":1,"page_tab":"","EnhancedEcommerce":"true","ecommerce":{"currencyCode":"EUR","detail":{"products":[{"name":"none","id":"67170737","price":"1","brand":"none","category":"1","response_type":"ATS","dimension77":"False"}]},"impressions":[{"name":"none","id":"84206121","price":"1","brand":"none","category":"1","response_type":"ATS","list":"LO-Suggest-Detail","position":"1"},{"name":"none","id":"77669119","price":"1","brand":"none","category":"1","response_type":"Smartapply_v2","list":"LO-Suggest-Detail","position":"2"},{"name":"none","id":"78551624","price":"1","brand":"none","category":"1","response_type":"ATS","list":"LO-Suggest-Detail","position":"3"},{"name":"none","id":"83302598","price":"1","brand":"none","category":"1","response_type":"UrlWithForm","list":"LO-Suggest-Detail","position":"4"}]},"page_component":["salaire-renseigne","cabinet-recrutement","profil-recherché","infos-entreprise"]});</script>    <!-- Conditionne l'ajout du script en fonction de la navigation turbo -->
    

    
<script>
    (function (w, d, s, l, i) {
    w[l] = w[l] || []; w[l].push({
        'gtm.start':
            new Date().getTime(), event: 'gtm.js'
    }); var f = d.getElementsByTagName(s)[0],
        j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src =
            'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f);
    })(window, document, 'script', 'dataLayer', 'GTM-PZLHDH');</script>

    <!-- #endregion Google_Tag_Manager -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <meta name="view-transition" content="same-origin"/>
    <meta name="google-site-verification" content="b_h5Dmw6rHMyhuTzlkJkv2R0MhFhbL2wqV1cEoud_Bg"/>
    <meta property="og:title" content="Offre Emploi CDI D&#xE9;veloppeur en Automatisme et Supervision Industrielle Lille (59) - Recrutement par Mercato de l&#x27;emploi | Hellowork">
    <meta property="og:description" content="Decouvrez l&#x27;offre d&#x27;Emploi D&#xE9;veloppeur en Automatisme et Supervision Industrielle Lille (59) en CDI pour Mercato de l&#x27;emploi. Mercato de l&#x27;emploi recrute actuellement &#x2713; Postulez d&#xE8;s maintenant &#x2713; Candidature Simple &amp; Rapide !">
    <meta name="description" content="Decouvrez l&#x27;offre d&#x27;Emploi D&#xE9;veloppeur en Automatisme et Supervision Industrielle Lille (59) en CDI pour Mercato de l&#x27;emploi. Mercato de l&#x27;emploi recrute actuellement &#x2713; Postulez d&#xE8;s maintenant &#x2713; Candidature Simple &amp; Rapide !">
    <meta property="og:url" content="https://www.hellowork.com/fr-fr/emplois/67170737.html">
    <meta property="og:site_name" content="www.hellowork.com">
    <meta property="og:image" content="https://f.hellowork.com/hellowork/img/placeholders/og-image-hellowork.jpg" itemprop="image">
    <meta property="og:locale" content="fr_FR">
    <meta property="og:type" content="website">


        <meta name="twitter:card" content="summary">
        <meta name="twitter:site" content="@hellowork">
        <meta name="twitter:title" content="Offre Emploi CDI D&#xE9;veloppeur en Automatisme et Supervision Industrielle Lille (59) - Recrutement par Mercato de l&#x27;emploi | Hellowork">
        <meta name="twitter:description" content="Decouvrez l&#x27;offre d&#x27;Emploi D&#xE9;veloppeur en Automatisme et Supervision Industrielle Lille (59) en CDI pour Mercato de l&#x27;emploi. Mercato de l&#x27;emploi recrute actuellement &#x2713; Postulez d&#xE8;s maintenant &#x2713; Candidature Simple &amp; Rapide !">
        <meta name="twitter:domain" content="www.hellowork.com">
        <meta name="twitter:app:id:googleplay" content="com.regionsjob.android"/>
        <meta name="twitter:app:id:ipad" content="408615037"/>
        <meta name="twitter:app:id:iphone" content="408615037"/>
        <meta name="twitter:app:name:iphone" content="Hellowork"/>
        <meta name="twitter:app:name:ipad" content="Hellowork"/>
        <meta name="twitter:app:name:googleplay" content="Hellowork"/>

    <meta property="al:ios:app_name" content="Hellowork"/>
    <meta property="al:ios:app_store_id" content="408615037"/>
    <meta property="al:android:app_name" content="Hellowork"/>
    <meta property="al:android:package" content="com.regionsjob.android"/>

    
<meta name="robots" content="index, follow">
<link rel="canonical" href="https://www.hellowork.com/fr-fr/emplois/67170737.html" />

    
     
 

    
    <link rel="preload" href="https://f.hellowork.com/hellowork/ressources/2.57.11/fonts/inter-roman-latin-sliced.woff2" as="font" type="font/woff2" crossorigin />

    
    <link rel="stylesheet" type="text/css" href="https://f.hellowork.com/hellowork/ressources/2.57.11/styles/tailwind.dist.css">

    
<link rel="icon" type="image/x-icon" href="https://f.hellowork.com/hellowork/img/favicons/hellowork/favicon.ico" />
    

    <meta name="turbo-prefetch" content="false">
    

    


<script type="application/ld&#x2B;json">
    {"@context": "https://schema.org","@type": "WebSite","name" : "Hellowork","url": "https://www.hellowork.com/fr-fr/"}
</script>



    
<script type="application/ld&#x2B;json">
  {"@context":"https://schema.org","@type":"Organization","name":"Hellowork","sameAs":["https://www.facebook.com/helloworkcom","https://www.youtube.com/channel/UCry7TiN8-dFKQUgyUMYANTQ","https://twitter.com/hellowork","https://www.tiktok.com/@helloworkcom","https://www.instagram.com/hellowork_/","https://www.linkedin.com/company/helloworkcom/"],"url":"https://www.hellowork.com","logo":{"@type":"ImageObject","url":"https://f.hellowork.com/hellowork/ressources/2.57.11/images/png/logo_hellowork.png"}}
</script>

        
    <!-- section MicroDataBreadCrumbTrail -->
    <script type="application/ld&#x2B;json">
        {"@context":"https://schema.org","@type":"BreadcrumbList","name":"Fil d\u0027Ariane","itemListElement":[{"@type":"ListItem","name":"Accueil","item":"https://www.hellowork.com/fr-fr/","position":1},{"@type":"ListItem","name":"Job","item":"https://www.hellowork.com/fr-fr/emploi.html","position":2},{"@type":"ListItem","name":"Job Lille","item":"https://www.hellowork.com/fr-fr/emploi/ville_lille-59000.html","position":3},{"@type":"ListItem","name":"Job Informatique Lille","item":"https://www.hellowork.com/fr-fr/emploi/domaine_informatique-ville_lille-59000.html","position":4},{"@type":"ListItem","name":"Job D\u00E9veloppeur Lille","item":"https://www.hellowork.com/fr-fr/emploi/metier_developpeur-ville_lille-59000.html","position":5},{"@type":"ListItem","name":"D\u00E9veloppeur en Automatisme et Supervision Industrielle H/F","position":6}]}
    </script>

        
    
    
    
    
        
        <script type="application/ld&#x2B;json">
            {"@context":"https://schema.org","@type":"JobPosting","title":"Développeur en Automatisme et Supervision Industrielle H/F","description":"<h2>Les missions du poste</h2><p>Rejoignez une entreprise à taille humaine au service de l'innovation industrielle ! Implantée dans la métropole lilloise, cette PME industrielle de 70 collaborateurs conçoit, fabrique et intègre des équipements à haute valeur ajoutée pour les secteurs agroalimentaire, médical et pharmaceutique. Spécialisée dans la machine spéciale, la robotique, les automatismes et la tôlerie fine, elle accompagne ses clients industriels de A à Z grâce à un bureau d'études pluridisciplinaire.<br /><br />Vos missions Rattaché(e) au Responsable Automatismes, vous intervenez en amont des projets sur la conception, le développement et l'amélioration de solutions de supervision pour des machines spéciales.<br /><br />En lien avec les automaticiens, vos missions principales seront :<br /><br />- Recueillir et analyser les besoins fonctionnels clients<br /><br />- Rédiger les spécifications techniques<br /><br />- Concevoir l'architecture logicielle et matérielle des systèmes de supervision<br /><br />- Développer les interfaces (IHM, synoptiques), intégrations et protocoles de communication<br /><br />- Assurer l'intégration avec les automates, capteurs, réseaux industriels<br /><br />- Installer les systèmes sur site client et assurer leur mise en service<br /><br />- Former les utilisateurs et assurer le support technique<br /><br />- Participer à l'amélioration continue des solutions logicielles</p><h2>Le profil recherché</h2><p>Profil recherché<br /><br />Issu(e) d'une formation technique de type :<br /><br />- BUT GEII, BTS CIRA, BTS CRSA<br /><br />- ou Licence Professionnelle en automatisme, supervision ou informatique industrielle<br /><br />- Vous justifiez d'une expérience en bureau d'études ou sur des projets industriels mêlant supervision et automatisme.<br /><br />Compétences techniques attendues :<br /><br />- Supervision : Wonderware InTouch, System Platform, ou équivalents<br /><br />- Programmation : TIA Portal, Control Expert (Ladder, Structuré, Littéral)<br /><br />- Réseaux industriels : ProfiBus, Modbus, Ethernet/IP<br /><br />- Bases de données et intégration automate/supervision<br /><br />- Architecture réseau (Switch, routeur, firewall)<br /><br />Vos atouts :<br /><br />- Autonomie, curiosité technique<br /><br />- Sens du service et relation client<br /><br />- Rigueur, capacité d'analyse<br /><br />- Bon niveau d'anglais technique<br /><br />- Permis B obligatoire (déplacements ponctuels)<br /><br />Ref: m0n2j5iu9f</p><h2>Bienvenue chez Mercato de l'emploi</h2><p>Rejoignez une entreprise à taille humaine au service de l'innovation industrielle ! Implantée dans la métropole lilloise, cette PME industrielle de 70 collaborateurs conçoit, fabrique et intègre des équipements à haute valeur ajoutée pour les secteurs agroalimentaire, médical et pharmaceutique. Spécialisée dans la machine spéciale, la robotique, les automatismes et la tôlerie fine, elle accompagne ses clients industriels de A à Z grâce à un bureau d'études pluridisciplinaire.</p>","identifier":{"@type":"PropertyValue","name":"Mercato de l'emploi","value":"m0n2j5iu9f"},"url":"https://www.hellowork.com/fr-fr/emplois/67170737.html","baseSalary":{"@type":"MonetaryAmount","currency":"EUR","value":{"@type":"QuantitativeValue","maxValue":40000,"minValue":35000,"unitText":"YEAR"}},"datePosted":"2026-09-28T00:10:04Z","directApply":true,"educationRequirements":[{"@type":"EducationalOccupationalCredential","credentialCategory":"bachelor degree"},{"@type":"EducationalOccupationalCredential","credentialCategory":"associate degree"}],"employmentType":"FULL_TIME","experienceRequirements":{"@type":"OccupationalExperienceRequirements","monthsOfExperience":12},"hiringOrganization":{"@type":"Organization","name":"Mercato de l'emploi","sameAs":"https://www.hellowork.com/fr-fr/entreprises/mercato-de-l-emploi-101937.html","logo":"https://f.hellowork.com/img/entreprises/160_160/199596.png"},"industry":"Industrie Manufacturière","jobLocation":{"@type":"Place","address":{"@type":"PostalAddress","addressCountry":"FR","addressLocality":"Lille","addressRegion":"Hauts-de-France","postalCode":"59000"}},"occupationalCategory":"Informatique","qualifications":"Profil recherché<br /><br />Issu(e) d'une formation technique de type :<br /><br />- BUT GEII, BTS CIRA, BTS CRSA<br /><br />- ou Licence Professionnelle en automatisme, supervision ou informatique industrielle<br /><br />- Vous justifiez d'une expérience en bureau d'études ou sur des projets industriels mêlant supervision et automatisme.<br /><br />Compétences techniques attendues :<br /><br />- Supervision : Wonderware InTouch, System Platform, ou équivalents<br /><br />- Programmation : TIA Portal, Control Expert (Ladder, Structuré, Littéral)<br /><br />- Réseaux industriels : ProfiBus, Modbus, Ethernet/IP<br /><br />- Bases de données et intégration automate/supervision<br /><br />- Architecture réseau (Switch, routeur, firewall)<br /><br />Vos atouts :<br /><br />- Autonomie, curiosité technique<br /><br />- Sens du service et relation client<br /><br />- Rigueur, capacité d'analyse<br /><br />- Bon niveau d'anglais technique<br /><br />- Permis B obligatoire (déplacements ponctuels)<br /><br />Ref: m0n2j5iu9f","salaryCurrency":"EUR","skills":["IP","Relation client","Ladder","IHM","SGBD","Assistance technique","Ethernet","Modbus","InTouch","Autonomie","Routeur","Automation","Programmation","Esprit d'analyse"],"validThrough":"2026-10-28T00:10:04Z"}
        </script>
    
    
    
    

        <meta name="rjtrackaction" content="4" />
    <meta name="rjtrackcontent" content="2" />
    <meta name="rjtrackcontentid" content="67170737" />
    <meta name="rjtrackcontentappid" content="41" />
    <meta name="rjtrak" content="[7053528848,8775120711,8821524322,9396402451,9574545208,9644231707,9920196877,10293884456,10690595490,10994611221,11383006874,11403548275,12578960914,12580932374,12795131362,65897089874,70548286087,77431263634,89656274803,96810412986,103953702508,104680829473,117377806347,117384733456,120637135294,434814930880,435315064208,445739691350,38663883327,60373542938,30064773265,30064773280,34359740616]" />

    <script>
    document.addEventListener("DOMContentLoaded", function (event) {
        var isCookedMarketing = function () {
            var value = '; ' + document.cookie,
                parts = value.split('; hw-cc-first-party=');
            if (parts.length !== 2) return false;
            return JSON.parse(decodeURIComponent(parts.pop().split(';').shift())).marketing;
        }
        if (isCookedMarketing()) {
            var script = document.createElement("script");
            script.setAttribute("async", "true");
            script.setAttribute("src", "https://securepubads.g.doubleclick.net/tag/js/gpt.js");
            
            var ref = document.querySelector("script");

            ref.parentNode.insertBefore(script, ref);
        }
    });

    window.googletag = window.googletag || { cmd: [] };
</script>
</head>

    <body class="relative typo-s" data-controller="toggle-on-body analytics tracker scroll-to-top mutable content-missing display-toast-message service-unsubscriber page-restore" data-mutable-event-name-value="pageLoaded" data-toggle-on-body-toggled-class="overflow-hidden" data-action="mutable:pageLoaded->tracker#identify turbo:frame-missing@window->content-missing#handleFrameMissing">
        <a
            class="
                hidden
                xl:block
                sr-only
                focus-visible:!btn-primary-l
                focus-visible:not-sr-only
                focus-visible:w-64
                focus-visible:top-4
                focus-visible:left-4
                focus-visible:absolute
                focus-visible:z-40
                focus-visible:py-3
            "
            href="#main-content"
        >
            Aller au contenu principal
        </a>
        <main>
            

<script>
    window.HelloworkCookieConsentCustomConfig = {
        privacyPolicyUrl: "https://www.hellowork-group.com/fr/legal/pdc-hellowork/",
        noticeModal: true,
        primaryBtnBackgroundColor: "#000000",
        continueWithoutAcceptingTextOutlineColor: "#ffffff",
        noticeModalLogo: "/images/logo/hellowork.svg",
        btnDenyCookies: true,
        btnDenyCookiesType: "continue-without-accepting",
        cookieSelectedCallback: (hasAccepted = false) => {
            document.dispatchEvent(new CustomEvent('marketingCookiesChanged', {"detail": { "hasAccepted": hasAccepted }}));
        }
    };

    document.addEventListener("DOMContentLoaded", function () {
        window.helloworkCookieConsent = new HelloworkCookieConsent();
    })
</script>
<script src="https://f.hellowork.com/hw-cookie-consent/latest/embed.js" defer></script>

<noscript>
    <iframe title="Hellowork" src="https://www.googletagmanager.com/ns.html?id=GTM-PZLHDH"
            height="0" width="0" style="display:none;visibility:hidden"></iframe>
</noscript>
    
<script>
    (function(d,s,b,u){if(!b.__SV){window.tracker=b;b._c=[];
        b.init=function(c){function f(b, h){b[h]=function(){
                b.push([h].concat(Array.prototype.slice.call(arguments, 0)));}}c.trackerUrl=u;b._c=c;
            var i="track extract_metas identify set_config whoami track_metas track_action loaded getWk".split(" ");
            for(g=0;g<i.length;g++)f(b, i[g]);};b.__SV = 1.0;var f=d.getElementsByTagName(s)[0],
            j=d.createElement(s);j.async=!0;j.src=u+"javascripts/tracker-2-latest.min.js";
        f.parentNode.insertBefore(j, f);}})
    (document,"script",[],"//t.hellowork.com/");
    
    tracker.init({
        /* Debug mode pour logs */
        isDebug:  false,
        /* Identifiant du site de tracking */
        trackerSiteId: 41,
        /* Domaine de tracking */
        trackerDomainId: 2,
        /* Cookie consent */
        cookieConsent: false
    });
</script>

            <script>dataLayer.push({ 'Connexion' : 'Non-Connecte','UAIdXjob' : 'UA-32617926-5'})</script>

                <div class="flex">
                    <div class="grow">
                      




















<turbo-frame id="modal-new-profile" data-content-missing-target="excluded">
    <form 
        id="formCustomOneTap"
        data-controller="auto-submittable"
        action="/fr-fr/candidat/onetapturbocustom"
        method="post"
    >
        <input 
            type="hidden" 
            name="auto-submit" 
            data-controller="mutable" 
            data-action="mutable:connected->auto-submittable#submit"
        >

    </form>

    <form id="formOneTap" action="/fr-fr/candidat/onetapturbo" method="post">
        <input type="hidden" name="clientId">
        <input type="hidden" name="credential">
        <input type="hidden" name="selectBy">
    </form>

    <div id="g_id_onload"
         data-client_id="983461533668-5f2b35au8h7fpiu443ich72bb8juf60l.apps.googleusercontent.com"
        data-callback="setFormWithGoogleCredential"
        data-skip_prompt_cookie="hw_onetap"
        data-auto_select="false"
        data-cancel_on_tap_outside="false"
        data-use_fedcm_for_prompt="true"
        class="z-50">
    </div>

    <script>
        function setFormWithGoogleCredential(response) {
            const formOneTap = document.getElementById('formOneTap')
            formOneTap.querySelector('input[name="clientId"]').value = response.clientId
            formOneTap.querySelector('input[name="credential"]').value = response.credential
            formOneTap.querySelector('input[name="selectBy"]').value = response.select_by
            formOneTap.requestSubmit()
        }
    </script>
</turbo-frame>

<div 
    data-controller="onetap-importer"
    data-onetap-importer-custom-url-value="/fr-fr/candidat/customonetapframeview"
>
    <turbo-frame id="one-tap-custom" data-onetap-importer-target="customFrame" src="" ></turbo-frame>
    <script
        async defer
        data-action="marketingCookiesChanged@document-&gt;onetap-importer#importScriptFromEvent:once"
        data-onetap-importer-target="scriptElement"
    ></script>
</div>


<div>
    <!-- input caché utilisé pour déclencher l'affichage du side pannel  -->
    <input type="checkbox" hidden id="cp-mobile-menu-side-panel" class="peer">
    <!-- Side Panel pour le menu mobile -->
    <div class="fixed
                flex
                flex-col
                h-full 
                z-50
                top-0
                cp-menu-width
                bg-grey-50 
                transform 
                ease-in 
                duration-400
                peer-checked:translate-x-full
                xl:hidden">
        <nav aria-label="Menu de navigation" 
             class="h-full flex flex-col justify-between overflow-y-auto" 
             data-controller="focus-trap"
             data-focus-trap-target="container">
            <div class="hidden connected:block px-6 py-8 flex-grow">
                


<div class="flex pb-14 xl:hidden justify-between">
    <div class="flex justify-between">
        <div data-controller="toggle"
             data-toggle-toggled-class="hidden"
             data-action="from-account-data:empty@document->toggle#add from-account-data:copied:Initials@document->toggle#remove"
             data-toggle-target="toToggle"
             class="flex flex-col gap-3">
            



<div
    class="bg-blue-500 min-w-16 min-h-16 size-16 rounded-full flex items-center justify-center relative overflow-hidden">
    <div class="text-white absolute typo-xl-bold"
         data-controller="from-account-data"
         data-action="fetch-account-data:account-data-refreshed@document->from-account-data#copy"
         data-from-account-data-copy-value="Initials"
         data-from-account-data-into-value="innerText">
    </div>
</div>
            <div class="flex flex-col">
                <span class="flex flex-wrap typo-l-bold pb-1 break-all">
                    <span data-controller="from-account-data"
                          data-action="fetch-account-data:account-data-refreshed@document->from-account-data#copy"
                          data-from-account-data-copy-value="FirstName"
                          data-from-account-data-into-value="innerText">
                    </span>
                    <span class="px-[2px]"></span>
                    <span data-controller="from-account-data"
                          data-action="fetch-account-data:account-data-refreshed@document->from-account-data#copy"
                          data-from-account-data-copy-value="LastName"
                          data-from-account-data-into-value="innerText">
                    </span>
                </span>
                <span class="typo-m text-grey-500 break-all"
                      data-controller="from-account-data"
                      data-action="fetch-account-data:account-data-refreshed@document->from-account-data#copy"
                      data-from-account-data-copy-value="Email"
                      data-from-account-data-into-value="innerText">
                </span>
            </div>
        </div>
        <div data-controller="toggle"
             data-toggle-toggled-class="hidden"
             data-action="from-account-data:empty@document->toggle#remove from-account-data:copied:Initials@document->toggle#add"
             data-toggle-target="toToggle"
             class="hidden flex flex-col gap-4">
            


<div
    class="bg-grey-100 min-w-16 min-h-16 size-16 rounded-full flex items-center justify-center relative overflow-hidden">
    <svg
        class="text-grey-300 aspect-[38/44] w-[38px] absolute bottom-0">
        <use href="/svg/icons/user.svg#avatar"></use>
    </svg>
</div>
            <span class="typo-s">
                <span data-controller="atc" data-atc-l-value="x/se-se/pnaqvqng/zba-cebsvy=pt=ugzyf">Complétez votre profil</span> pour recevoir des offres adaptées.
            </span>
        </div>
    </div>
    <button class="self-start"
        data-controller="input-checker"
        data-input-checker-input-value="#cp-mobile-menu-side-panel"
        aria-label="Fermer le menu"
        data-action="toggle-on-body#remove click->input-checker#uncheck">
        <!-- Icône de fermeture -->
        <svg class="size-3">
            <use href="/svg/icons/nav/close.svg#close"></use>
        </svg>
    </button>
</div>
<div class="flex flex-col gap">
    <span class="mb-[148px] hidden xl:block"
          data-controller="atc"
          data-atc-l-value="x/se-sef"
    >
        <svg class="aspect-[99/44] h-10">
            <use href="/svg/logo/hellowork.svg#black"></use>
        </svg>
    </span>
    <div class="flex flex-col gap-8">
        <span class="rounded-full px-4 py-2 no-underline hover:bg-grey-100 focus:bg-grey-100 active:bg-grey-300"
              data-controller="atc cp-menu-item"
              data-cy="cpMenuDashboard"
              data-atc-l-value="x/se-se/pnaqvqng/zba-rfcnpr=pt=ugzyf"
              data-cp-menu-item-url-value="/fr-fr/candidat/mon-espace.html"
              data-cp-menu-item-active-class="bg-grey-100"
              data-cp-menu-item-hidden-class="hidden"
              data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;event_info&quot;:&quot;espace-candidat&quot;,&quot;wording&quot;:&quot;Mon espace&quot;}"
              data-action="click->analytics#push"
        >
            <div class="flex typo-m gap-3 items-center">
                <svg
                    class="size-4"
                    data-cp-menu-item-target="inactiveIcon">
                    <use href="/svg/icons/home.svg#home"></use>
                </svg>
                <svg
                    class="size-4 hidden"
                    data-cp-menu-item-target="activeIcon">
                    <use href="/svg/icons/home.svg#home-active"></use>
                </svg>
                Mon espace
            </div>
        </span>
        <span class="rounded-full px-4 py-2 no-underline hover:bg-grey-100 focus:bg-grey-100 active:bg-grey-300"
              data-controller="atc cp-menu-item"
              data-cy="cpMenuCV"
              data-atc-l-value="x/se-se/pnaqvqng/zrf-pi-ihf=pt=ugzyf"
              data-cp-menu-item-url-value="/fr-fr/candidat/mes-cv-vus.html"
              data-cp-menu-item-active-class="bg-grey-100"
              data-cp-menu-item-hidden-class="hidden"
              data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;event_info&quot;:&quot;espace-candidat&quot;,&quot;wording&quot;:&quot;Mes CV vus&quot;}"
              data-action="click->analytics#push"
        >
            <div class="flex typo-m gap-3 items-center">
                <svg class="size-4"
                     data-cp-menu-item-target="inactiveIcon">
                    <use href="/svg/icons/cv.svg#cv"></use>
                </svg>
                <svg class="size-4 hidden"
                     data-cp-menu-item-target="activeIcon">
                    <use href="/svg/icons/cv.svg#cv-active"></use>
                </svg>
                Mes CV vus
            </div>
        </span>
        <span class="rounded-full px-4 py-2 no-underline hover:bg-grey-100 focus:bg-grey-100 active:bg-grey-300"
              data-controller="atc cp-menu-item"
              data-cy="cpMenuOfferResponses"
              data-atc-l-value="x/se-se/pnaqvqng/zrf-pnaqvqngherf=pt=ugzyf"
              data-cp-menu-item-url-value="/fr-fr/candidat/mes-candidatures.html"
              data-cp-menu-item-active-class="bg-grey-100"
              data-cp-menu-item-hidden-class="hidden"
              data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;event_info&quot;:&quot;espace-candidat&quot;,&quot;wording&quot;:&quot;Mes candidatures&quot;}"
              data-action="click->analytics#push"
        >
            <div class="flex typo-m gap-3 items-center">
                <svg
                    class="size-4"
                    data-cp-menu-item-target="inactiveIcon">
                    <use href="/svg/icons/offre.svg#offre"></use>
                </svg>
                <svg
                    class="size-4 hidden"
                    data-cp-menu-item-target="activeIcon">
                    <use href="/svg/icons/offre.svg#offre-active"></use>
                </svg>
                Mes candidatures
            </div>
        </span>
        <span class="rounded-full px-4 py-2 no-underline hover:bg-grey-100 focus:bg-grey-100 active:bg-grey-300"
              data-controller="atc cp-menu-item"
              data-cy="cpMenuAlerts"
              data-atc-l-value="x/se-se/pnaqvqng/zrf-nyregrf=pt=ugzyf"
              data-cp-menu-item-url-value="/fr-fr/candidat/mes-alertes.html"
              data-cp-menu-item-active-class="bg-grey-100"
              data-cp-menu-item-hidden-class="hidden"
              data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;event_info&quot;:&quot;espace-candidat&quot;,&quot;wording&quot;:&quot;Mes alertes&quot;}"
              data-action="click->analytics#push"
        >
            <div class="flex typo-m gap-3 items-center">
                <svg
                    class="size-4"
                    data-cp-menu-item-target="inactiveIcon">
                    <use href="/svg/icons/alertes.svg#alertes"></use>
                </svg>
                <svg
                    class="size-4 hidden"
                    data-cp-menu-item-target="activeIcon">
                    <use href="/svg/icons/alertes.svg#alertes-active"></use>
                </svg>
                Mes alertes
            </div>
        </span>
        <span class="rounded-full px-4 py-2 no-underline hover:bg-grey-100 focus:bg-grey-100 active:bg-grey-300"
              data-controller="atc cp-menu-item"
              data-cy="cpMenuProfil"
              data-atc-l-value="x/se-se/pnaqvqng/zba-cebsvy=pt=ugzyf"
              data-cp-menu-item-url-value="/fr-fr/candidat/mon-profil.html"
              data-cp-menu-item-active-class="bg-grey-100"
              data-cp-menu-item-hidden-class="hidden"
              data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;event_info&quot;:&quot;espace-candidat&quot;,&quot;wording&quot;:&quot;Mon profil&quot;}"
              data-action="click->analytics#push"
        >
            <div class="flex typo-m gap-3 items-center">
                <svg
                    class="size-4"
                    data-cp-menu-item-target="inactiveIcon">
                    <use href="/svg/icons/user.svg#user"></use>
                </svg>
                <svg
                    class="size-4 hidden"
                    data-cp-menu-item-target="activeIcon">
                    <use href="/svg/icons/user.svg#user-active"></use>
                </svg>
                Mon profil
            </div>
        </span>
        <span class="rounded-full px-4 py-2 no-underline hover:bg-grey-100 focus:bg-grey-100 active:bg-grey-300"
              data-controller="atc cp-menu-item"
              data-cy="cpMenuParameters"
              data-atc-l-value="x/se-se/pnaqvqng/cnenzrgerf=pt=ugzyf"
              data-cp-menu-item-url-value="/fr-fr/candidat/parametres.html"
              data-cp-menu-item-active-class="bg-grey-100"
              data-cp-menu-item-hidden-class="hidden"
              data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;event_info&quot;:&quot;espace-candidat&quot;,&quot;wording&quot;:&quot;Param&#xE8;tres&quot;}"
              data-action="click->analytics#push"
        >
            <div class="flex typo-m gap-3 items-center">
                <svg
                    class="size-4"
                    data-cp-menu-item-target="inactiveIcon">
                    <use href="/svg/icons/settings.svg#settings"></use>
                </svg>
                <svg
                    class="size-4 hidden"
                    data-cp-menu-item-target="activeIcon">
                    <use href="/svg/icons/settings.svg#settings-active"></use>
                </svg>
                Param&#xE8;tres
            </div>
        </span>
        <span class="xl:hidden rounded-full px-4 py-2 no-underline hover:bg-grey-100 focus:bg-grey-100 active:bg-grey-300"
              data-controller="atc cp-menu-item"
              data-cy="cpMenuLogOff"
              data-atc-l-value="x/se-se/pnaqvqng/ybtbssf"
              data-cp-menu-item-url-value="/fr-fr/candidat/logoff"
              data-cp-menu-item-active-class="bg-grey-100"
              data-cp-menu-item-hidden-class="hidden"
              data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;event_info&quot;:&quot;espace-candidat&quot;,&quot;wording&quot;:&quot;D&#xE9;connexion&quot;}"
              data-action="click->analytics#push"
        >
            <div class="flex typo-m gap-3 items-center">
                <svg class="size-4">
                    <use href="/svg/icons/exit.svg#exit"></use>
                </svg>
                D&#xE9;connexion
            </div>
        </span>
    </div>
</div>

            </div>
            <div class="hidden not-connected:block px-6 py-8 flex-grow">
                



<div class="flex pb-14 xl:hidden justify-between">
    <input type="checkbox" hidden id="cp-mobile-menu-side-panel-employment" class="peer/employment">
    <!-- Side Panel pour l'onglet Emploi -->
    <div class="fixed flex flex-col h-full z-50 top-0 w-full -left-full bg-grey-50 transform ease-in duration-400 xl:hidden peer-checked/employment:translate-x-full">
        <nav aria-label="Onglet Emploi" 
                class="h-full flex flex-col justify-between overflow-y-auto" 
                data-controller="focus-trap"
                data-focus-trap-target="container">
                <div class="px-6 py-8 flex-grow">
                

<div class="flex pb-14 xl:hidden justify-between">
    <button class="self-start"
        data-controller="input-checker"
        data-input-checker-input-value="#cp-mobile-menu-side-panel-employment"
        aria-label="Retour" 
        data-action="toggle-on-body#remove click->input-checker#uncheck">
        <svg class="size-3" aria-hidden="true">
            <use href="/svg/icons/arrow.svg#left"></use>
        </svg>
    </button>
    <button class="self-start"
        data-controller="input-checker"
        data-input-checker-input-value="#cp-mobile-menu-side-panel-employment"
        aria-label="Fermer le menu"
        data-action="toggle-on-body#remove click->input-checker#uncheck">
        <!-- Icône de fermeture -->
        <svg class="size-3">
            <use href="/svg/icons/nav/close.svg#close"></use>
        </svg>
    </button>
</div>
<ul class="flex flex-col gap-6">
    <li>
        <a data-cy="headerJobInterimLink" href="/fr-fr/interim.html" class="typo-m no-underline">Missions d'intérim</a>
    </li>
    <li>
        <a data-cy="headerJobInternshipLink" href="/fr-fr/stage.html" class="typo-m no-underline">Offres de stage</a>
    </li>
    <li>
        <a data-cy="headerJobAlternatelyLink" href="/fr-fr/alternance.html" class="typo-m no-underline">Offres en alternance</a>
    </li>
    <li>
        <span 
            data-cy="headerJobAlertAtc" 
            data-atc-l-value="x/se-se/pnaqvqng/perngvba-nyregr=pt=ugzyf" 
            data-controller="atc" 
            class="typo-m no-underline"
        >
            Créer mon alerte
        </span>
    </li>
    <li>
        <span 
            data-cy="navJobCvAtc" 
            data-controller="atc" 
            data-atc-l-value="x/se-se/cntr/qrcbg-pi=pt=ugzyf" 
            class="typo-m no-underline"
        >
            Déposer mon CV
        </span>
    </li>
    <li>
        <a
            title="Calcul du salaire brut en net"
            href="/fr-fr/outil/salaire-brut-net.html"
            class="typo-m no-underline"
        >
            Salaire brut net
        </a>
    </li>
</ul>


            </div>
            <div class="shrink-0">
                


<div class="bg-blue-200 overflow-hidden px-6 py-4 xl:hidden bg-auto bg-[calc(50%-9px)_center] "
     data-controller="mobile-app"
     style="background-image: url(/svg/illustrations/pattern-chevron.svg)">
    <div class="flex gap-4 items-center justify-between z-10">
        <div class="flex flex-col">
            <span class="typo-m-bold">Téléchargez l'app</span>
            <span class="typo-m-">et postulez dans les <span class="whitespace-nowrap">premiers !</span></span>
        </div>
        <span data-controller="atc"
              data-atc-l-value="xuggcf://nccf=pt=nccyr=pt=pbz/se/ncc/ertvbafwbo-rzcybv/vq408615037?zg=8f"
              data-mobile-app-target="ios"
              data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;app_download&quot;,&quot;event_info&quot;:&quot;Apple&quot;}"
              data-action="click->analytics#push"
        >
            <svg class="w-[108px] h-[31px]">
                <use href="/svg/icons/apps/appstore-badge.svg#appstore-badge"></use>
            </svg>
        </span>
        <span data-controller="atc"
           data-atc-l-value="xuggcf://cynl=pt=tbbtyr=pt=pbz/fgber/nccf/qrgnvyf?vq=pbz=pt=ertvbafwbo=pt=naqebvqf"
           data-mobile-app-target="android"
           data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;app_download&quot;,&quot;event_info&quot;:&quot;Android&quot;}"
           data-action="click->analytics#push"
        >
            <svg class="w-[108px] h-[31px]">
                <use href="/svg/icons/playstore-badge.svg#playstore-badge"></use>
            </svg>
        </span>
    </div>
</div>
            </div>
        </nav>
    </div>
    <input type="checkbox" hidden id="cp-mobile-menu-side-panel-recruiter-access" class="peer/recruiter">
    <!-- Side Panel pour le menu mobile -->
    <div class="fixed flex flex-col h-full z-50 top-0 w-full -left-full bg-grey-50 transform ease-in duration-400 xl:hidden peer-checked/recruiter:translate-x-full">
        <nav aria-label="Onglet Accès Recruteur" 
                class="h-full flex flex-col justify-between overflow-y-auto" 
                data-controller="focus-trap"
                data-focus-trap-target="container">
            <div class="px-6 py-8 flex-grow">
                

<div class="flex pb-14 xl:hidden justify-between">
    <button class="self-start"
            data-controller="input-checker"
            data-input-checker-input-value="#cp-mobile-menu-side-panel-recruiter-access"
            aria-label="Retour" 
            data-action="toggle-on-body#remove click->input-checker#uncheck">
            <svg class="size-3" aria-hidden="true">
                <use href="/svg/icons/arrow.svg#left"></use>
            </svg>
    </button>
    <button class="self-start"
        data-controller="input-checker"
        data-input-checker-input-value="#cp-mobile-menu-side-panel-recruiter-access"
        aria-label="Fermer le menu"
        data-action="toggle-on-body#remove click->input-checker#uncheck">
        <!-- Icône de fermeture -->
        <svg class="size-3">
            <use href="/svg/icons/nav/close.svg#close"></use>
        </svg>
    </button>
</div>
<div class="flex flex-col gap-6">
    <span class="no-underline typo-m"
        data-cy="headerRecruiterLinkPublish"
        data-controller="atc"
        data-atc-l-value="xuggcf://erpehgrhe=pt=uryybjbex=pt=pbz/se/cebqhvg/cyngrsbezr-erpehgrzrag/pbagnpg=pt=ugzyf"
    >
        Diffuser ma première offre
    </span>
    <span class="no-underline typo-m"
        data-cy="headerRecruiterLinkCustomers"
        data-controller="atc"
        data-atc-l-value="xuggcf://ohqqv=pt=uryybjbex=pt=pbzf"
    >
        Déjà client
    </span>
</div>


            </div>
            <div class="shrink-0">
                


<div class="bg-blue-200 overflow-hidden px-6 py-4 xl:hidden bg-auto bg-[calc(50%-9px)_center] "
     data-controller="mobile-app"
     style="background-image: url(/svg/illustrations/pattern-chevron.svg)">
    <div class="flex gap-4 items-center justify-between z-10">
        <div class="flex flex-col">
            <span class="typo-m-bold">Téléchargez l'app</span>
            <span class="typo-m-">et postulez dans les <span class="whitespace-nowrap">premiers !</span></span>
        </div>
        <span data-controller="atc"
              data-atc-l-value="xuggcf://nccf=pt=nccyr=pt=pbz/se/ncc/ertvbafwbo-rzcybv/vq408615037?zg=8f"
              data-mobile-app-target="ios"
              data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;app_download&quot;,&quot;event_info&quot;:&quot;Apple&quot;}"
              data-action="click->analytics#push"
        >
            <svg class="w-[108px] h-[31px]">
                <use href="/svg/icons/apps/appstore-badge.svg#appstore-badge"></use>
            </svg>
        </span>
        <span data-controller="atc"
           data-atc-l-value="xuggcf://cynl=pt=tbbtyr=pt=pbz/fgber/nccf/qrgnvyf?vq=pbz=pt=ertvbafwbo=pt=naqebvqf"
           data-mobile-app-target="android"
           data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;app_download&quot;,&quot;event_info&quot;:&quot;Android&quot;}"
           data-action="click->analytics#push"
        >
            <svg class="w-[108px] h-[31px]">
                <use href="/svg/icons/playstore-badge.svg#playstore-badge"></use>
            </svg>
        </span>
    </div>
</div>
            </div>
        </nav>
    </div>

    <div class="flex justify-between">
        <div class="relative max-w-max top-0 left-0 transition-all ease-in-out duration-300 peer-parent-checked:left-[calc(50%-40px)]">
            <a href="https://www.hellowork.com/fr-fr/" class="inline-flex" aria-label="Aller à l'accueil">
                <svg class="aspect-[99/44] mt-0 mb-0 h-10">
                    <use href="/svg/logo/hellowork.svg#black"></use>
                </svg>
            </a>
        </div>
    </div>
    <button class="self-start"
        data-controller="input-checker"
        data-input-checker-input-value="#cp-mobile-menu-side-panel"
        aria-label="Fermer le menu"
        data-action="toggle-on-body#remove click->input-checker#uncheck">
        <!-- Icône de fermeture -->
        <svg class="size-3">
            <use href="/svg/icons/nav/close.svg#close"></use>
        </svg>
    </button>
</div>
<div class="flex flex-col gap-6">
    <span class="no-underline typo-m"
          data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;cta&quot;:&quot;menu-burger&quot;,&quot;wording&quot;:&quot;Se connecter&quot;}"
        data-action="click->analytics#push"
        data-controller="atc"
        data-atc-l-value="x/se-se/pnaqvqng/pbaarkvba-vafpevcgvba=pt=ugzy#pbaarkvbaf"
    >
        Se connecter
    </span>
    <span class="no-underline typo-m"
        data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;cta&quot;:&quot;menu-burger&quot;,&quot;wording&quot;:&quot;S&#x27;inscrire&quot;}"
        data-action="click->analytics#push"
        data-cy="headerAccountRegister"
        data-controller="atc"
        data-atc-l-value="x/se-se/pnaqvqng/pbaarkvba-vafpevcgvba=pt=ugzy#vafpevcgvbaf"
    >
        S'inscrire
    </span>
    <button class="flex h-fit items-center cursor-pointer connected:hidden lg:hidden typo-m w-auto gap-2"
            data-controller="input-checker toggle"
            data-toggle-toggled-class="hidden"
            data-input-checker-input-value="#cp-mobile-menu-side-panel-employment"
            aria-label="Ouvrir le menu"
            data-action="toggle-on-body#add click->input-checker#check from-account-data:empty->toggle#toggle">
        Emploi
        <svg class="size-3" aria-hidden="true">
            <use href="/svg/icons/arrow.svg#right"></use>
        </svg>
    </button>
    <a class="no-underline typo-m"
        data-cy="headerEduLink" aria-label="Accès Formation" href="https://www.maformation.fr/"
    >
        Formation
    </a>
    <button class="flex h-fit items-center cursor-pointer connected:hidden lg:hidden typo-m w-auto gap-2"
            data-controller="input-checker toggle"
            data-toggle-toggled-class="hidden"
            data-input-checker-input-value="#cp-mobile-menu-side-panel-recruiter-access"
            aria-label="Ouvrir le menu"
            data-action="toggle-on-body#add click->input-checker#check from-account-data:empty->toggle#toggle">
        Accès recruteur
        <svg class="size-3" aria-hidden="true">
            <use href="/svg/icons/arrow.svg#right"></use>
        </svg>
    </button>
</div>
            </div>
            <div class="shrink-0">
                


<div class="bg-blue-200 overflow-hidden px-6 py-4 xl:hidden bg-auto bg-[calc(50%-9px)_center] "
     data-controller="mobile-app"
     style="background-image: url(/svg/illustrations/pattern-chevron.svg)">
    <div class="flex gap-4 items-center justify-between z-10">
        <div class="flex flex-col">
            <span class="typo-m-bold">Téléchargez l'app</span>
            <span class="typo-m-">et postulez dans les <span class="whitespace-nowrap">premiers !</span></span>
        </div>
        <span data-controller="atc"
              data-atc-l-value="xuggcf://nccf=pt=nccyr=pt=pbz/se/ncc/ertvbafwbo-rzcybv/vq408615037?zg=8f"
              data-mobile-app-target="ios"
              data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;app_download&quot;,&quot;event_info&quot;:&quot;Apple&quot;}"
              data-action="click->analytics#push"
        >
            <svg class="w-[108px] h-[31px]">
                <use href="/svg/icons/apps/appstore-badge.svg#appstore-badge"></use>
            </svg>
        </span>
        <span data-controller="atc"
           data-atc-l-value="xuggcf://cynl=pt=tbbtyr=pt=pbz/fgber/nccf/qrgnvyf?vq=pbz=pt=ertvbafwbo=pt=naqebvqf"
           data-mobile-app-target="android"
           data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;app_download&quot;,&quot;event_info&quot;:&quot;Android&quot;}"
           data-action="click->analytics#push"
        >
            <svg class="w-[108px] h-[31px]">
                <use href="/svg/icons/playstore-badge.svg#playstore-badge"></use>
            </svg>
        </span>
    </div>
</div>
            </div>
        </nav>
    </div>
    <!-- Overlay pour le menu mobile -->
    <div
        id="mobile-overlay"
        data-controller="input-checker"
        data-input-checker-input-value="#cp-mobile-menu-side-panel"
        data-action="click->input-checker#uncheck modal:form-submitted@document->input-checker#uncheck click->toggle-on-body#remove"
        class="fixed
               top-0
               h-full
               w-full
               bg-black
               opacity-0
               pointer-events-none
               transition-all
               duration-600
               peer-checked:!z-40
               peer-checked:opacity-40
               peer-checked:pointer-events-auto
               peer-checked:z-fade-in
               z-fade-out
               overflow-hidden
               xl:hidden">
    </div>
</div>


<div class="layout-wrapper md:mx-auto lg:px-6 xl:layout-grid">
    <div class="xl:layout-inner-grid">
        <div class="col-span-full xl:col-start-1 xl:col-end-13">
            <header
                class="
                flex
                justify-between
                overflow-y-auto
                sm:overflow-y-visible
                z-30
                py-3
                px-4
                sm:px-0
                bg-white
                relative
                sm:static
                sm:flex-row
                sm:justify-between
                sm:items-center">

                <div class="relative max-w-max top-0 left-0 transition-all ease-in-out duration-300">
                    <a href="https://www.hellowork.com/fr-fr/" class="inline-flex" aria-label="Aller à l'accueil">
                        <svg class="aspect-[99/44] mt-0 mb-0 h-8 sm:mt-0 sm:h-10">
                            <use href="/svg/logo/hellowork.svg#black"></use>
                        </svg>
                    </a>
                </div>

                <div class="flex items-center justify-end gap-4 sm:gap-6"
                     data-controller="show-on-auth-state"
                     data-show-on-auth-state-hidden-class="hidden">

                    <div data-show-on-auth-state-target="skeleton" class="flex items-center gap-4 sm:gap-6">
                        <div class="skeleton h-8 w-12 sm:w-24 rounded-full"></div>
                        <div class="skeleton h-8 w-12 sm:w-24 rounded-full"></div>
                        <div class="skeleton h-10 w-16 sm:w-32 rounded-full"></div>
                    </div>

                    


<div data-show-on-auth-state-target="notConnected" class="hidden">
  <nav class="flex connected:items-center sm:ml-4">
    <menu class="
        py-0 
        connected:h-auto 
        overflow-hidden 
        flex items-center 
        justify-end 
        sm:flex-row 
        sm:p-0 
        sm:overflow-visible 
        sm:h-auto 
        w-auto 
        gap-4 
        sm:gap-6">
      <li class="text-center">
        <a
          href="/fr-fr/emploi.html"
          title="Offres d’emploi"
          aria-label="Trouver mon job"
          data-analytics-values-param="
            Hw.Emploi.Web.Common.Models.Tracking.TrackingAnalytics;.AsJson()"
          data-action="click->analytics#push"
          class="link-header typo-s gap-1 ">
          <span class="hidden sm:inline">Trouver mon </span>
          <span class="uppercase sm:lowercase">j</span>ob<span class="sm:hidden">s</span>
        </a>
      </li>

      <li class="text-center">
        <a
          href="/fr-fr/entreprise.html"
          title="Entreprises qui recrutent"
          aria-label="Trouver mon entreprise"
          data-analytics-values-param="
              {&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;cta&quot;:&quot;trouver-mon-entreprise&quot;,&quot;wording&quot;:&quot;Trouver-mon-entreprise&quot;}"
          data-action="click->analytics#push"
          class="link-header typo-s gap-1
                                                ">
          <span class="hidden sm:inline">Trouver mon </span>
          <span class="uppercase sm:lowercase">e</span>ntreprise<span class="sm:hidden">s</span>
        </a>
      </li>

      <li class="hidden lg:block">
        <details
          data-controller="details"
          data-action="
            details:not:sm->details#expand
            details:not:sm->details#disableClickOutside
            details:is:sm->details#collapse
            details:is:sm->details#enableClickOutside
            details:click:outside->details#collapse
        ">
          <summary
            data-cy="headerRecruiterMenu"
            class="
              mx-auto 
              w-max 
              mt-10 
              mb-4 
              uppercase 
              link-header 
              typo-s 
              border-b 
              border-grey-100 
              sm:my-0 
              sm:flex 
              sm:normal-case 
              sm:border-0">
            Accès recruteur
            <svg class="size-2">
              <use href="/svg/icons/arrow.svg#down"></use>
            </svg>
          </summary>
          <div class="sm:relative">
            <menu class="flex flex-col items-center bg-white rounded-sm border-grey-300 right-0 sm:z-10 sm:p-2 sm:mt-2 sm:items-start sm:w-max sm:absolute sm:border">
              <li class="sm:w-full">
                <span
                  data-cy="headerRecruiterLinkPublish"
                  data-controller="atc"
                  data-atc-l-value="xuggcf://erpehgrhe=pt=uryybjbex=pt=pbz/se/cebqhvg/cyngrsbezr-erpehgrzrag/pbagnpg=pt=ugzyf"
                  class="atc-m sm:atc-s sm:rounded-xs sm:p-2">
                  Diffuser ma première offre
                </span>
              </li>
              <li class="mt-4 sm:mt-auto sm:w-full">
                <span
                  data-cy="headerRecruiterLinkCustomers"
                  data-controller="atc"
                  data-atc-l-value="xuggcf://ohqqv=pt=uryybjbex=pt=pbzf"
                  class="atc-m sm:atc-s sm:rounded-xs sm:p-2">
                  Déjà client
                </span>
              </li>
            </menu>
          </div>
        </details>
      </li>

      <li class="hidden lg:block">
        <details
          data-controller="details"
          data-action="
            details:not:sm->details#expand
            details:not:sm->details#disableClickOutside
            details:is:sm->details#collapse
            details:is:sm->details#enableClickOutside
            details:click:outside->details#collapse
        ">
          <summary data-cy="headerJobMenu" class="hidden link-header typo-s sm:rounded-sm sm:flex connected:sm:mr-4" aria-label="Accès Emploi">
            Emploi
            <svg class="size-2">
              <use href="/svg/icons/arrow.svg#down"></use>
            </svg>
          </summary>
          <div class="
                hidden 
                sm:relative 
                sm:block 
          ">
            <menu class="
                space-y-4
                flex flex-col
                items-center
                bg-white
                rounded-sm
                border-grey-300
                right-0
                sm:space-y-0
                sm:p-2
                sm:mt-2
                sm:items-start
                sm:w-max
                sm:absolute
                sm:border
                sm:z-20">
              <li class="sm:w-full hidden sm:block">
                <a data-cy="headerJobInterimLink" href="/fr-fr/interim.html" class="link-m sm:link-s sm:rounded-xs sm:p-2">Missions d'intérim</a>
              </li>

              <li class="sm:w-full hidden sm:block">
                <a data-cy="headerJobInternshipLink" href="/fr-fr/stage.html" class="link-m sm:link-s sm:rounded-xs sm:p-2">Offres de stage</a>
              </li>

              <li class="sm:w-full hidden sm:block">
                <a data-cy="headerJobAlternatelyLink" href="/fr-fr/alternance.html" class="link-m sm:link-s sm:rounded-xs sm:p-2">Offres en alternance</a>
              </li>

              <li class="sm:w-full hidden sm:block">
                <span
                  data-cy="headerJobAlertAtc"
                  data-atc-l-value="x/se-se/pnaqvqng/perngvba-nyregr=pt=ugzyf"
                  data-controller="atc"
                  class="atc-m sm:atc-s sm:rounded-xs sm:p-2">
                  Créer mon alerte
                </span>
              </li>

              <li class="sm:w-full hidden sm:block">
                <span
                  data-cy="navJobCvAtc"
                  data-controller="atc"
                  data-atc-l-value="x/se-se/cntr/qrcbg-pi=pt=ugzyf"
                  class="atc-m sm:atc-s sm:rounded-xs sm:p-2">
                  Déposer mon CV
                </span>
              </li>

              <li class="sm:w-full hidden sm:block">
                <a
                  title="Calcul du salaire brut en net"
                  href="/fr-fr/outil/salaire-brut-net.html"
                  class="link-m sm:link-s sm:rounded-xs sm:p-2">
                  Salaire brut net
                </a>
              </li>
            </menu>
          </div>
        </details>
      </li>

      <li class="hidden not-connected:lg:block connected:hidden">
        <a
          data-cy="headerEduLink"
          aria-label="Accès Formation"
          href="https://www.maformation.fr/"
          class="
            link-header 
            typo-s 
            mt-4
            sm:mt-0
            connected:hidden">
          Formation
        </a>
      </li>

      <li class="max-w-[250px] hidden not-connected:lg:block connected:hidden">
        <details data-controller="details"
                 data-action="
                    details:not:sm->details#expand
                    details:not:sm->details#disableClickOutside
                    details:is:sm->details#collapse
                    details:is:sm->details#enableClickOutside
                    details:click:outside->details#collapse
                ">
          <summary 
            data-cy="headerAccountMenu" 
            class="hidden text-white sm:btn-primary-l relative" 
            aria-label="Accès mon compte"
            data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;cta&quot;:&quot;menu-se-connecter&quot;,&quot;wording&quot;:&quot;menu-se-connecter&quot;}"
            data-action="click->analytics#push"
          >
            <svg class="size-4">
              <use href="/svg/icons/user.svg#user"></use>
            </svg>
            Se&nbsp;connecter
            <div class="absolute -top-1 right-1">
              

<div class="
  rounded-full 
  bg-error-500
  size-3 border-solid border-[2px] border-white
">
</div>
            </div>
          </summary>
          <div class="sm:relative">
            <menu class="flex flex-col items-center bg-white rounded-sm border-grey-300 sm:z-10 sm:p-2 sm:mt-3 sm:w-max sm:absolute sm:border sm:right-0">
              <li class="sm:w-full connected:hidden">
                <span
                  data-controller="atc"
                  data-atc-l-value="x/se-se/pnaqvqng/pbaarkvba-vafpevcgvba=pt=ugzy#pbaarkvbaf"
                  data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;cta&quot;:&quot;menu-se-connecter&quot;,&quot;wording&quot;:&quot;Se connecter&quot;}"
                  data-action="click->analytics#push"
                  class="no-underline"
                >
                  <span data-cy="headerAccountLogIn" class="hidden sm:block atc-m sm:atc-s sm:rounded-xs sm:p-2">Se&nbsp;connecter</span>
                </span>
              </li>
              <li class="sm:w-full connected:hidden">
                <span
                  data-cy="headerAccountRegister"
                  data-controller="atc"
                  data-atc-l-value="x/se-se/pnaqvqng/pbaarkvba-vafpevcgvba=pt=ugzy#vafpevcgvbaf"
                  data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;cta&quot;:&quot;menu-se-connecter&quot;,&quot;wording&quot;:&quot;S&#x27;inscrire&quot;}"
                  data-action="click->analytics#push"
                  class="atc-m sm:atc-s sm:rounded-xs sm:p-2"
                >
                  S'inscrire
                </span>
              </li>
            </menu>
          </div>

        </details>
      </li>
      <button
          class="flex w-min h-fit items-center cursor-pointer connected:hidden lg:hidden"
          data-controller="input-checker toggle"
          data-toggle-toggled-class="hidden"
          data-input-checker-input-value="#cp-mobile-menu-side-panel"
          data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;cta&quot;:&quot;menu-burger&quot;,&quot;wording&quot;:&quot;menu-burger&quot;}"
          aria-label="Ouvrir le menu"
          data-action="toggle-on-body#add click->input-checker#check analytics#push from-account-data:empty->toggle#toggle">
          <svg class="size-4 relative">
            <use href="/svg/header/burger.svg#burger"/>
            <div class="absolute top-4 sm:top-5 right-3 sm:right-5">
              

<div class="
  rounded-full 
  bg-error-500
  size-3 border-solid border-[2px] border-white
">
</div>
            </div>
          </svg>
      </button>
    </menu>
  </nav>
</div>


                    



<div data-show-on-auth-state-target="connected" class="hidden">
  <nav class="flex items-center sm:ml-4">
    <menu class="flex items-center gap-4 sm:gap-6">
      <li class="text-center">
        <a
          href="/fr-fr/emploi.html"
          title="Offres d'emploi"
          aria-label="Trouver mon job"
          data-analytics-values-param="
            {&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;cta&quot;:&quot;trouver-mon-job&quot;,&quot;wording&quot;:&quot;Trouver-mon-job&quot;}"
          data-action="click->analytics#push"
          class="
            link-header 
            typo-s 
            gap-1
            
        ">
          <span class="hidden sm:inline">Trouver mon </span>
          <span>
            <span class="uppercase sm:lowercase">j</span>ob<span class="sm:hidden">s</span>
          </span>
        </a>
      </li>

      <li class="text-center">
        <a
          href="/fr-fr/entreprise.html"
          title="Entreprises qui recrutent"
          aria-label="Trouver mon entreprise"
          data-analytics-values-param="
            {&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;cta&quot;:&quot;trouver-mon-entreprise&quot;,&quot;wording&quot;:&quot;Trouver-mon-entreprise&quot;}"
          data-action="click->analytics#push"
          class="
            link-header 
            typo-s 
            gap-1
            
          ">
          <span class="hidden sm:inline">Trouver mon </span>
          <span>
            <span class="uppercase sm:lowercase">e</span>ntreprise<span class="sm:hidden">s</span>
          </span>
        </a>
      </li>

      <li class="flex items-center">
        <details
          class="hidden sm:flex relative"
          data-controller="click-outside toggle-attribute toggle"
          data-toggle-toggled-additional-class="rotate-180"
          data-toggle-attribute-target="element"
          data-toggle-attribute-attribute-param="open"
          data-action="
            click-outside:click:outside->toggle-attribute#unsetAttribute
            click-outside:click:outside->toggle#removeAdditional
            click->toggle#toggleAdditional"
        >
          <summary aria-label="Ouvrir le menu déroulant"
                   class="cursor-pointer flex items-center justify-center">
            <div class="pr-0 sm:pr-2">
              <span
                  data-controller="toggle"
                  data-toggle-toggled-class="hidden"
                  data-toggle-target="toToggle"
                  data-action="from-account-data:empty@document->toggle#add from-account-data:copied:Initials@document->toggle#remove">
                



<div
    class="bg-blue-500 min-w-8 min-h-8 size-8 rounded-full flex items-center justify-center relative overflow-hidden">
    <div class="text-white absolute typo-s-bold"
         data-controller="from-account-data"
         data-action="fetch-account-data:account-data-refreshed@document->from-account-data#copy"
         data-from-account-data-copy-value="Initials"
         data-from-account-data-into-value="innerText">
    </div>
</div>
              </span>
              <span class="hidden"
                  data-controller="toggle"
                  data-toggle-toggled-class="hidden"
                  data-toggle-target="toToggle"
                  data-action="from-account-data:empty@document->toggle#remove from-account-data:copied:Initials@document->toggle#add">
                


<div
    class="bg-grey-100 min-w-8 min-h-8 size-8 rounded-full flex items-center justify-center relative overflow-hidden">
    <svg
        class="text-grey-300 aspect-[38/44] w-[21px] absolute bottom-0">
        <use href="/svg/icons/user.svg#avatar"></use>
    </svg>
</div>
              </span>
            </div>
            <svg class="size-3"
                 data-toggle-target="toToggleAdditional">
              <use href="/svg/icons/arrow.svg#down"></use>
            </svg>
          </summary>
          <menu class="
              flex
              z-[11]
              flex-col 
              items-center 
              bg-white 
              rounded-sm 
              border-grey-300 
              sm:p-2
              sm:mt-3
              sm:w-max
              sm:absolute
              sm:border
              sm:right-0
              sm:top-8
          ">
            <li class="
                hidden connected:block 
                mt-4 
                sm:mt-auto 
                sm:w-full
            ">
              <span
                data-controller="atc"
                data-cy="headerAccountMyDashboardLink"
                data-atc-l-value="x/se-se/pnaqvqng/zba-rfcnpr=pt=ugzyf"
                class="atc-m sm:atc-s sm:rounded-xs sm:p-2">
                Mon espace
              </span>
            </li>
            <li class="
                hidden connected:block 
                mt-4 
                sm:mt-auto 
                sm:w-full
            ">
              <span
                data-controller="atc"
                data-cy="headerAccountMyDashboardLink"
                data-atc-l-value="x/se-se/pnaqvqng/zrf-pi-ihf=pt=ugzyf"
                class="atc-m sm:atc-s sm:rounded-xs sm:p-2">
                Mes CV vus
              </span>
            </li>
            <li class="
                hidden connected:block 
                mt-4 
                sm:mt-auto 
                sm:w-full
            ">
              <span
                data-controller="atc"
                data-cy="headerAccountMyDashboardLink"
                data-atc-l-value="x/se-se/pnaqvqng/zrf-pnaqvqngherf=pt=ugzyf"
                class="atc-m sm:atc-s sm:rounded-xs sm:p-2">
                Mes candidatures
              </span>
            </li>
            <li class="
                hidden
                connected:block
                mt-4
                sm:mt-auto
                sm:w-full
            ">
              <span
                data-controller="atc"
                data-cy="headerAccountMyAlertLink"
                data-atc-l-value="x/se-se/pnaqvqng/zrf-nyregrf=pt=ugzyf"
                class="atc-m sm:atc-s sm:rounded-xs sm:p-2">
                Mes alertes
              </span>
            </li>
            <li class="
                hidden connected:block
                mt-4
                sm:mt-auto sm:w-full
            ">
              <span
                data-controller="atc"
                data-cy="headerAccountMyAccountLink"
                data-atc-l-value="x/se-se/pnaqvqng/zba-cebsvy=pt=ugzyf"
                class="atc-m sm:atc-s sm:rounded-xs sm:p-2">
                Mon profil
              </span>
            </li>
            <li class="
                hidden connected:block
                mt-4
                sm:mt-auto sm:w-full
            ">
              <span
                data-controller="atc"
                data-cy="headerAccountMyParametersLink"
                data-atc-l-value="x/se-se/pnaqvqng/cnenzrgerf=pt=ugzyf"
                class="atc-m sm:atc-s sm:rounded-xs sm:p-2">
                Paramètres
              </span>
            </li>
            <li class="
                hidden connected:block
                mt-4
                sm:mt-auto sm:w-full
            ">
              <span
                data-controller="atc"
                data-cy="headerAccountLogOut"
                data-atc-l-value="x/se-se/pnaqvqng/ybtbss?ergheaHey=%2Sse-se%2Srzcybvf%2S67170737=pt=ugzyf"
                class="atc-m sm:atc-s sm:rounded-xs sm:p-2">
                Déconnexion
              </span>
            </li>
          </menu>
        </details>

        <button
          class="flex w-min h-fit items-center cursor-pointer sm:hidden"
          data-controller="input-checker"
          data-input-checker-input-value="#cp-mobile-menu-side-panel"
          aria-label="Ouvrir le menu"
          data-action="toggle-on-body#add click->input-checker#check">
          <div class="flex mr-2">
            <span
                data-controller="toggle"
                data-toggle-toggled-class="hidden"
                data-toggle-target="toToggle"
                data-action="from-account-data:empty@document->toggle#add from-account-data:copied:Initials@document->toggle#remove">
              



<div
    class="bg-blue-500 min-w-8 min-h-8 size-8 rounded-full flex items-center justify-center relative overflow-hidden">
    <div class="text-white absolute typo-s-bold"
         data-controller="from-account-data"
         data-action="fetch-account-data:account-data-refreshed@document->from-account-data#copy"
         data-from-account-data-copy-value="Initials"
         data-from-account-data-into-value="innerText">
    </div>
</div>
            </span>
            <span class="hidden"
                data-controller="toggle"
                data-toggle-toggled-class="hidden"
                data-toggle-target="toToggle"
                data-action="from-account-data:empty@document->toggle#remove from-account-data:copied:Initials@document->toggle#add">
              


<div
    class="bg-grey-100 min-w-8 min-h-8 size-8 rounded-full flex items-center justify-center relative overflow-hidden">
    <svg
        class="text-grey-300 aspect-[38/44] w-[21px] absolute bottom-0">
        <use href="/svg/icons/user.svg#avatar"></use>
    </svg>
</div>
            </span>
          </div>
          <svg class="size-4">
            <use href="/svg/header/burger.svg#burger"></use>
          </svg>
        </button>
      </li>
    </menu>
  </nav>
</div>
                </div>
            </header>
        </div>
        </div>
</div>







    
<div 
    data-controller="smart-banner removable"
    data-action="removable:removed->smart-banner#close"
    data-smart-banner-cookie-lifespan-value="30"
    data-smart-banner-display-on-first-page-value="False"
>
    <div data-smart-banner-target="container"></div>

    <template data-smart-banner-target="template">
        <div class="fixed inset-0 z-50 bg-black/40"
             data-controller="intersect"
             data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;appbox_click&quot;,&quot;event_info&quot;:&quot;Affichage de la banni&#xE8;re&quot;}"
             data-action="intersect:enter->analytics#push:once">
            <div class="fixed inset-x-0 bottom-0 flex flex-col gap-8 bg-white rounded-t-sm p-6"
                 data-controller="focus-trap"
                 data-focus-trap-target="container"
                 role="dialog"
                 aria-modal="true"
                 aria-labelledby="smart-banner-title">
                <div class="flex flex-col gap-3">
                    <div class="flex items-start">
                        <img
                            alt=""
                            loading="lazy"
                            src="/images/smartbanner/astro-buddy.webp"
                            width="1000" height="563"
                            class="flex-1 min-w-0 h-auto"
                        />
                        <button type="button" aria-label="Fermer" class="shrink-0" data-action="removable#remove">
                            <svg class="size-3" aria-hidden="true">
                                <use href="/svg/icons/nav/close.svg#close"></use>
                            </svg>
                        </button>
                    </div>
                    <p id="smart-banner-title" class="typo-l-bold">Gagnez du temps avec l'app</p>
                </div>

                <p class="typo-long-s">Recevez une notification dès qu'une offre est publiée et postulez en quelques clics.</p>

                <div class="flex flex-col items-center gap-4">
                    <span 
                        data-controller="atc"
                        aria-label="Continuer dans l'application Hellowork (nouvelle fenêtre)"
                        data-atc-l-value="xuggcf://uryybjbex=pt=baryvax=pt=zr/7XHy/76h4uumdf"
                        data-atc-t-value="x_oynaxf"
                        data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;appbox_click&quot;,&quot;event_info&quot;:&quot;T&#xE9;l&#xE9;chargement de l&#x27;application&quot;,&quot;cta&quot;:&quot;download-button&quot;,&quot;wording&quot;:&quot;Continuer dans l&#x27;app&quot;}"
                        data-action="analytics#push removable#remove"
                        class="btn-primary-l w-full justify-center"
                    >
                        Continuer dans l'app
                        <svg class="size-4 text-white" aria-hidden="true">
                            <use href="/svg/icons/external-link.svg#external-link"></use>
                        </svg>
                    </span>
                    <button type="button" class="typo-long-m underline" data-action="removable#remove">
                        Rester sur le navigateur
                    </button>
                </div>
            </div>
        </div>
    </template>
</div>
   





<div data-controller="cookie-from-url-param id-storage switch-display ab-test"
     data-switch-display-show-class="block"
     data-switch-display-hide-class="hidden"
     data-switch-display-active-class="tab-nav-switch"
     data-switch-display-opacity-class="opacity-0"
     data-switch-display-hashes-value='["offre","entreprise"]'
     data-cookie-from-url-param-cookies-list-value="hcid,jj_token"
     data-fetch-account-data-target="offersInPage"
     data-id-storage-id-param="67170737"
     data-id-storage-local-storage-key-param="visited_offers"
     data-ab-test-feature-value="hw_web_job_matcher"
     data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;identity.login&quot;}"
     data-action="pageshow@window->cookie-from-url-param#track:once pageshow@window->id-storage#save analytics:connected@window->analytics#push:once"
     class="relative mt-4">

    <div id="toolbar" class="layout-grid sticky h-12 sm:h-16 z-[3] top-0">
        <div class="layout-inner-grid content-center">
            <div class="col-span-full xl:col-start-2 xl:col-end-12">
                



<div class="flex justify-between items-center bg-transparent">

    <div class="flex items-center gap-4">
            <button
                data-controller="history"
                data-history-default-url-value="https://www.hellowork.com/fr-fr/emploi/recherche.html?k=D%c3%a9veloppeur&#x2B;informatique&amp;k_autocomplete=http%3a%2f%2fwww.rj.com%2fCommun%2fPost%2fDeveloppeur&amp;l=Lille&#x2B;59000&amp;l_autocomplete=http%3a%2f%2fwww.rj.com%2fcommun%2flocalite%2fcommune%2f59350"
                data-analytics-values-param='{"event": "generic", "EventName" : "back"}'
                data-action="analytics#push history#redirect"
                data-cy="backButton"
                class="rounded-full btn-icon-secondary-outline-m sm:btn-icon-secondary-outline-l p-[10px] sm:p-[14px] flex-shrink-0"
            >
                <svg class="size-3 sm:size-4">
                    <use href="/svg/icons/arrow.svg#left"></use>
                </svg>
            </button>
    </div>

    <template id="copyTemplate">
        


    <div
    data-controller="removable intersect toggle timer"
    data-toggle-target="toToggle"
    data-intersect-name-value="notification"
    data-timer-timeout-value="5000"
    data-toggle-toggled-class="slidein"
    data-removable-animation-class="slideout"
    data-action="intersect:notification:enter->timer#start:once
    intersect:notification:enter->toggle#add
    timer:timeout->removable#remove
    mouseover->timer#pause
    mouseout->timer#pause"
    role="status"
    class="rounded-sm
               flex
               items-center
               bg-blackToast
               shadow-toast
               p-4
               gap-4
               w-full
               min-h-[90px]
               sm:min-h-fit
               sm:w-[388px]
               xl:w-[448px]
               toast-scale">

        <svg class="h-7 w-7 flex-shrink-0" aria-hidden="true">
            <use href="/svg/badges/success.svg#success"></use>
        </svg>

        <div class="flex flex-col gap-2 text-white w-full">
                <p class="typo-s-bold">Lien copi&#xE9;</p>


        </div>

        <button data-action="removable#remove" class="block" aria-label="Fermer la notification">
            <svg class="size-3 text-white">
                <use href="/svg/icons/nav/close.svg#close"></use>
            </svg>
        </button>



    </div>

    </template>

    <div id="toolbar-actions" class="flex items-center gap-4">
        <button class="btn-icon-secondary-outline-m sm:btn-icon-secondary-outline-l"
                aria-label="Copier le lien"
                data-controller="clipboard"
                data-display-toast-message-id-param="copyTemplate"
                data-action="analytics#push clipboard#copyContent display-toast-message#display"
                data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;copy&quot;,&quot;cta&quot;:&quot;bouton&quot;,&quot;wording&quot;:&quot;Copier le lien&quot;}"
                data-cy="clipboardButton">
            <span class="hidden" data-clipboard-target="source" >https://www.hellowork.com/fr-fr/emplois/67170737.html</span>
            <svg class="size-3 sm:size-4" aria-hidden="true">
                <use href="/svg/icons/share.svg#share"></use>
            </svg>
        </button>
        

<turbo-frame id="bookmark-frame-do-67170737">
    <form 
        action="/fr-fr/candidat/tooglebookmark"
        method="GET"
        data-controller="bookmark"
        data-bookmark-offer-id-value="67170737"
        data-bookmark-bookmarked-icon-value="/svg/icons/bookmark.svg#bookmark-active"
        data-bookmark-unbookmarked-icon-value="/svg/icons/bookmark.svg#bookmark"
        data-bookmark-bookmarked-class="text-pink-500"
        data-fetch-account-data-event-param="turbo:submit-end"
        data-action="fetch-account-data#refreshAfterNextTurboEvent"
    >
        <input type="hidden" name="idOffre" value="67170737">
        <input type="hidden" name="turboFrameId" value="bookmark-frame-do-67170737">
        <input type="hidden" name="isFromToolbar" value="True"/>
        <button 
            class="btn-icon-secondary-outline-m sm:btn-icon-secondary-outline-l small-group:sm:btn-icon-no-outline-m"
            data-bookmark-target="button"
            data-analytics-values-param='{"event": "generic", "EventName" : "bookmark_add", "EventLibelle": "bookmark_do_toolbar" }'
            data-action="analytics#push:stop"
            data-cy="bookmarkBtn"
        >
            <svg class="size-3 sm:size-4 small-group:sm:size-3">
                <use data-bookmark-target="icon" href="/svg/icons/bookmark.svg#bookmark"></use>
            </svg>
        </button>
    </form>

    


</turbo-frame>
        <button
            aria-label="Créer une alerte"
            data-controller="input-checker analytics"
            data-input-checker-input-value="#alert-modal"
            data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;alert_load&quot;,&quot;event_info&quot;:&quot;do-top&quot;}"
            data-action="input-checker#check analytics#push"
            class="rounded-full btn-icon-yellow-300-m sm:btn-icon-yellow-300-l"
            data-cy="alertButton">
            <svg class="size-3 sm:size-4" aria-hidden="true">
                <use href="/svg/services/alert.svg#alert"></use>
            </svg>
        </button>
    </div>
</div>

            </div>
        </div>
    </div>
    <div class="w-full lg:layout-grid -mt-16 sm:-mt-20">
        <div class="xl:layout-inner-grid">
            <div class="col-span-full col-start-1 col-end-13">


<section class="
    relative
    flex
    justify-end
    bg-purple-100
    text-purple-200
    overflow-hidden
    rounded-none lg:rounded-sm
    h-[144px] sm:h-[192px] xl:h-[200px]
    ">

    


    <svg class="absolute
        -left-[230px] sm:-left-[400px]
        -bottom-[190px] sm:-bottom-[290px]
        w-[880px] sm:w-[1865px]
        h-[586px] sm:h-[910px]
        opacity-20 rotate-[158deg] sm:rotate-[152deg]">
        <use href="/svg/illustrations/chevron.svg#chevron"></use>
    </svg>
    <div
        class="absolute
            left-0 bottom-0
            w-24 sm:w-40
            flex justify-center
            ml-3 sm:ml-6 lg:ml-40 xl:ml-[152px]
            mb-3 sm:mb-6
            px-3 py-2
            rounded-sm
            bg-white">
            <span
                data-controller="atc"
                data-atc-l-value="x/se-se/ragercevfrf/zrepngb-qr-y-rzcybv-101937=pt=ugzyf"
                data-atc-t-value="x_oynaxf"
                data-analytics-values-param='{"event" : "generic", "EventName":"cta_click", "EventLibelle": "logo", "cta" : "page-entreprise"}'
                data-action="click->analytics#push"
                class="cursor-pointer">
                <img
                    class="h-7 sm:h-11"
                    src="https://f.hellowork.com/img/entreprises/199596.png"
                    alt="Mercato de l&#x27;emploi recrutement"
                    title="Recrutement Mercato de l&#x27;emploi">
            </span>
    </div>
</section>
            </div>
        </div>

    </div>
    <div id="toolbar-background"
         class="sticky bg-white h-12 sm:h-16 z-[1] -top-px overflow-hidden"
         data-controller="sticky-detector"
         data-sticky-detector-stuck-class="shadow-engine sm:shadow-engine-desk"></div>




<div id="salaryModalInformation-container"
     data-controller="input-checker modal"
     data-modal-form-validator-outlet="form"
     
     data-input-checker-input-value="#salaryModalInformation"
     data-action="modal:navigate-to-next-page@document->input-checker#uncheck"
     >
    <input type="checkbox" hidden id="salaryModalInformation" class="peer" >
    <div class="
            fixed
            inset-0
            z-50
            overflow-auto
            bg-black/60
            sm:bg-black/40
            backdrop-blur
            sm:backdrop-blur-md
            items-end
            sm:items-center
            collapse
            opacity-0
            peer-checked:visible
            peer-checked:opacity-100
            transition-[visibility,_opacity]
            duration-700
        ">
        <div class="px-0 sm:px-6 layout-wrapper h-full hidden peer-parent-checked:block">
            <div
                class="layout-outer-grid h-full content-end sm:content-center"
                data-toggle-on-body-force-param="false"
                data-action="click-&gt;input-checker#uncheck:self click-&gt;modal#dispatchDiscardedEvent:self">

                <div
                    data-controller="intersect focus-trap toggle-attribute"
                    data-focus-trap-target="container"
                    data-toggle-attribute-target="element"
                    data-toggle-on-body-force-param="true"
                    data-action="intersect:enter->toggle-on-body#add intersect:enter->toggle-attribute#setAttribute intersect:exit->toggle-on-body#remove intersect:exit->toggle-attribute#unsetAttribute"
                    data-toggle-attribute-attribute-param="aria-modal"
                    data-toggle-attribute-value-param="true"
                    role="dialog"
                    data-cy="modalContainer"
                    class=" bg-white shadow-modal overflow-auto col-span-full sm:col-start-4 xl:col-start-5 sm:col-span-6 rounded-t-sm  mt-4 sm:rounded-sm px-6 sm:px-10 py-6 sm:py-8 sm:my-6"
                    aria-labelledby=salaryModalInformation-title>
                    <div class="flex flex-col gap-4">
                        <div class="flex items-start justify-between">


    <div class="rounded-full flex justify-center items-center w-10 h-10 bg-pumpkin-50">
        <svg class="h-4 w-4 text-pumpkin-400 font-bold" aria-hidden="true">
            <use href="/svg/icons/euro.svg#bold-euro"></use>
        </svg>
    </div>

                            <div class="ml-auto">
                                    <button
                                        aria-label="Fermer la fenêtre modale"
                                        class="ml-6"
                                        data-toggle-on-body-force-param="false"
                                        data-action="click->input-checker#uncheck click->modal#dispatchDiscardedEvent"
                                        data-cy="crossButton"
                                        type="button"
                                    >
                                            <svg class="size-3" aria-hidden="true">
                                                <use href="/svg/icons/nav/close.svg#close"></use>
                                            </svg>
                                    </button>
                            </div>
                        </div>



        <div class="flex justify-center">
            <svg class="h-[100px] min-w-[79px]" aria-hidden="true">
                <use href="/svg/illustrations/recruiter-provided-salary.svg#recruiter-provided-salary"></use>
            </svg>
        </div>

                                <p id="salaryModalInformation-title" class="typo-l-bold text-pretty">Salaire fourni par le recruteur</@titleMarkup>
                                                </div>

                    
    <div class="flex flex-col">
        <div class="mt-6 mb-8">
            
<span class="typo-long-m text-pretty mb-8">Ce recruteur joue le jeu de la transparence en transmettant le salaire pour cette offre.</span>
        </div>
        <button data-controller="input-checker"
                data-input-checker-input-value="#salaryModalInformation"
                data-action="click->input-checker#uncheck"
                class="btn-primary-l">
            C'est noté
        </button>

    </div>


                </div>
            </div>
        </div>
    </div>
</div>



<div id="third-party-information-modal-container"
     data-controller="input-checker modal"
     data-modal-form-validator-outlet="form"
     
     data-input-checker-input-value="#third-party-information-modal"
     data-action="modal:navigate-to-next-page@document->input-checker#uncheck"
     >
    <input type="checkbox" hidden id="third-party-information-modal" class="peer" >
    <div class="
            fixed
            inset-0
            z-50
            overflow-auto
            bg-black/60
            sm:bg-black/40
            backdrop-blur
            sm:backdrop-blur-md
            items-end
            sm:items-center
            collapse
            opacity-0
            peer-checked:visible
            peer-checked:opacity-100
            transition-[visibility,_opacity]
            duration-700
        ">
        <div class="px-0 sm:px-6 layout-wrapper h-full hidden peer-parent-checked:block">
            <div
                class="layout-outer-grid h-full content-end sm:content-center"
                data-toggle-on-body-force-param="false"
                data-action="click-&gt;input-checker#uncheck:self click-&gt;modal#dispatchDiscardedEvent:self">

                <div
                    data-controller="intersect focus-trap toggle-attribute"
                    data-focus-trap-target="container"
                    data-toggle-attribute-target="element"
                    data-toggle-on-body-force-param="true"
                    data-action="intersect:enter->toggle-on-body#add intersect:enter->toggle-attribute#setAttribute intersect:exit->toggle-on-body#remove intersect:exit->toggle-attribute#unsetAttribute"
                    data-toggle-attribute-attribute-param="aria-modal"
                    data-toggle-attribute-value-param="true"
                    role="dialog"
                    data-cy="modalContainer"
                    class=" bg-white shadow-modal overflow-auto col-span-full sm:col-start-4 xl:col-start-5 sm:col-span-6 rounded-t-sm  mt-4 sm:rounded-sm px-6 sm:px-10 py-6 sm:py-8 sm:my-6"
                    aria-labelledby=third-party-information-modal-title>
                    <div class="flex flex-col gap-4">
                        <div class="flex items-start justify-between">

    <div class="flex items-center flex-shrink-0 rounded-full">
        <svg class="size-7">
            <use href="/svg/badges/info.svg#info"></use>
        </svg>
    </div>

                            <div class="ml-auto">
                                    <button
                                        aria-label="Fermer la fenêtre modale"
                                        class="ml-6"
                                        data-toggle-on-body-force-param="false"
                                        data-action="click->input-checker#uncheck click->modal#dispatchDiscardedEvent"
                                        data-cy="crossButton"
                                        type="button"
                                    >
                                            <svg class="size-3" aria-hidden="true">
                                                <use href="/svg/icons/nav/close.svg#close"></use>
                                            </svg>
                                    </button>
                            </div>
                        </div>


                                <p id="third-party-information-modal-title" class="typo-l-bold text-pretty">Cabinet de recrutement</@titleMarkup>
                                                </div>

                    
    <div class="flex flex-col mt-6 sm:mt-8 gap-8">
        <ul
            aria-label="Liste des informations liées à l'offre d'emploi publiée par un intermédiaire"
            class="flex flex-col gap-y-3">
                <li class="flex flex-row typo-long-m ">
                    <div class="">
                        Cette offre est publi&#xE9;e par un cabinet de recrutement. Le poste peut &#xEA;tre situ&#xE9; au sein de l&#x2019;entreprise indiqu&#xE9;e ou chez un client pour lequel il recrute.
                    </div>
                </li>
        </ul>
        <button
            aria-label="Fermer la fenêtre"
            class="w-full btn-primary-l"
            data-action="input-checker#uncheck"
            data-cy="see-third-party-info">
            C'est noté
        </button>
    </div>

                </div>
            </div>
        </div>
    </div>
</div>

    <div class="layout-grid sticky z-[2] group -top-px mb-6 lg:mb-9" data-controller="sticky-detector"
         data-sticky-detector-stuck-class="stuck">
        <div class="layout-inner-grid gap-4 sm:gap-6">
            <div class="flex flex-col gap-4 sm:gap-6 col-span-full lg:col-start-3 lg:col-end-11 lg:[&:has(.overlapping)]:col-end-13 xl:[&:has(.overlapping)]:col-end-12">
                    <div id="tabs-toolbar-background" class="h-8 mt-2 sm:mt-2.5">
                        <div class="flex justify-between items-center">
                            <div data-controller="overlap-detector"
                                 data-overlap-detector-observe-id-value="toolbar"
                                 data-overlap-detector-overlap-class="translate-x-12 sm:translate-x-16 lg:translate-x-0"
                                 data-overlap-detector-disable-pointer-events-value="true">
                                <div class="relative
                                            z-[1]
                                            overflow-visible
                                            transition-all
                                            duration-300
                                            ease-in-out
                                            mt-2
                                            sm:mb-1
                                            sm:mt-2"
                                     data-overlap-detector-target="target">
                                    
<div class="flex sm:w-full gap-6 " data-controller="toggle" role="tablist" aria-label="Navigation sur les onglets" >
    <button
        type="button"
        id="first-tab"
        aria-selected="true"
        aria-controls="first-panel"
        role="tab"
        tabindex="0"
        data-controller="action-forwarder scroll-to"
        data-switch-display-target="tab"
        class="flex gap-2 whitespace-nowrap no-underline pb-3 sm:pb-5 typo-s text-grey-500 hover:text-black"
                    data-scroll-to-element-value="#content"
        data-analytics-values-param=""
                data-action="toggle#singleToggle click->switch-display#changeTab click->scroll-to#scrollToElement keydown.enter->switch-display#changeTab click->analytics#push"
        data-cy="jobTabButton">

            <div class="relative size-4 group-stuck:hidden group-stuck:sm:block">
                <svg class="size-4 transition-opacity duration-300 ease-in-out" data-switch-display-target="inactiveIcon">
                    <use href="/svg/icons/offre.svg#offre"></use>
                </svg>
                <svg class="size-4 absolute top-0 left-0 opacity-0 transition-opacity duration-300 ease-in-out" data-switch-display-target="activeIcon">
                    <use href="/svg/icons/offre.svg#offre-active"></use>
                </svg>
            </div>
        Le job
    </button>
</div>

                                </div>
                            </div>
                            <div data-controller="overlap-detector"
                                 data-overlap-detector-observe-id-value="toolbar"
                                 data-overlap-detector-overlap-class="mb-3 sm:mb-5 mr-[164px] -translate-x-4 overlapping"
                                 class="grid col-span-3 hidden lg:flex">
                                <a
                                    href="#postuler"
                                    class="transition-[padding-top,transform,font-size] duration-300 ease-in-out btn-primary-candidacy-m group-stuck:btn-primary-candidacy-l min-w-[115px] justify-center"
                                    data-cy="applyButtonHeader"
                                    data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;cta_click&quot;,&quot;cta&quot;:&quot;Postuler-FormRO&quot;,&quot;wording&quot;:&quot;Postuler&quot;}"
                                    data-action="analytics#push"
                                    data-overlap-detector-target="target">
                                    Postuler
                                </a>
                            </div>
                        </div>
                    </div>
            </div>
        </div>
    </div>

    <div id="content" class="layout-grid scroll-mt-12 sm:scroll-mt-20">
        <div class="layout-inner-grid gap-4 sm:gap-6">
            <div class="flex flex-col gap-4 sm:gap-6 col-span-full lg:col-start-3 lg:col-end-11">
                <div class="col-span-full">
                    <div class="pb-6 sm:pb-16">
                        <div class="col-span-full transition-all duration-300 ease-in-out"
                             data-switch-display-target="tabContent"
                             role="tabpanel"
                             tabindex="0"
                             id="offer-panel"
                             aria-labelledby="offer-tab">

                            <div class="border-b border-b-grey-100 mb-8 sm:mb-10">
                                <div class="flex flex-col gap-8 sm:gap-10 mb-10 sm:mb-12">
                                    <div>
                                        <h1 id="main-content" class="inline scroll-mt-[4.5rem]" data-controller="intersect" data-intersect-name-value="coachCta">
                                            <span class="block typo-xl sm:typo-2xl mb-3" data-cy="jobTitle">D&#xE9;veloppeur en Automatisme et Supervision Industrielle H/F</span>
                                                    <a
                                                        href="/fr-fr/entreprises/mercato-de-l-emploi-101937.html"
                                                        class="typo-s sm:typo-m link-underline"
                                                        title="Mercato de l&#x27;emploi recrutement">Mercato de l&#x27;emploi</a>
                                        </h1>

                                            <ul class="mt-3 flex">
                                                    <li class="typo-long-m-bold flex after:content-['·'] after:mx-2 last:after:hidden">
                                                        Lille - 59
                                                    </li>
                                                    <li class="typo-long-m-bold flex after:content-['·'] after:mx-2 last:after:hidden">
                                                        CDI
                                                    </li>
                                            </ul>
                                    </div>

                                    

<ul class="flex flex-wrap gap-3">


        <li>
            <button class="tag-border
                           border-0
                           bg-grey-50
                           hocus:bg-grey-100
                           active:bg-grey-300
                           py-1.5
                           px-2
                           typo-s-bold
                           inline-flex
                           gap-2"
                    data-controller="input-checker"
                    data-input-checker-input-value="#salaryModalInformation"
                    data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;salary_click&quot;,&quot;cta&quot;:&quot;tooltip&quot;,&quot;wording&quot;:&quot;Salaire r&#xE9;el&quot;}"
                    data-action="input-checker#check analytics#push"
                    data-cy="salary-tag-button">
                <span class="truncate max-w-[250px] sm:max-w-full">
                    35&#x202F;000 - 40&#x202F;000 &#x20AC; / an
                </span>
                <svg class="size-3" aria-hidden="true">
                    <use href="/svg/icons/tooltip.svg#tooltip"></use>
                </svg>
            </button>
        </li>

        <li>
            <button
                class="tag-border
                           border-0
                           bg-grey-50
                           hocus:bg-grey-100
                           active:bg-grey-300
                           py-1.5
                           px-2
                           typo-s-bold
                           inline-flex
                           gap-2"
                data-controller="input-checker"
                data-input-checker-input-value="#third-party-information-modal"
                data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;cta_click&quot;,&quot;wording&quot;:&quot;Cabinet de recrutement&quot;}"
                data-action="input-checker#check analytics#push"
                data-cy="thirdPartyButton"
            >
                Cabinet de recrutement
                <svg class="size-3" aria-hidden="true">
                    <use href="/svg/icons/tooltip.svg#tooltip"></use>
                </svg>
            </button>
        </li>



            <li class="block tag-secondary-s border-0 readonly">
                Bac &#x2B;2
            </li>
            <li class="block tag-secondary-s border-0 readonly">
                Bac &#x2B;3, Bac &#x2B;4
            </li>
            <li class="block tag-secondary-s border-0 readonly">
                Industrie Manufacturi&#xE8;re
            </li>
            <li class="block tag-secondary-s border-0 readonly">
                Exp. 1 an min.
            </li>
</ul>


                                    <span
                                        class="btn-outline-s sm:hidden inline-flex w-max "
                                        data-controller="atc"
                                        data-atc-l-value="xuggcf://uryybjbex=pt=baryvax=pt=zr/7XHy/6czkeelrf"
                                        data-analytics-values-param='{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;cta_click&quot;,&quot;cta&quot;:&quot;Lire dans l&#x27;app&quot;,&quot;wording&quot;:&quot;Lire dans l&#x27;app&quot;}'
                                        data-action="analytics#push"
                                    >
                                        Lire dans l'app
                                        <svg class="size-3">
                                            <use href="/svg/icons/external-link.svg#external-link"></use>
                                        </svg>
                                    </span>
                                </div>


                            </div>


                            



<div class="flex flex-col gap-8 sm:gap-10">
    <div>



<section
    class="
        peer
        flex flex-col
        w-full
        border-b border-b-grey-100
        pb-8 sm:pb-10"
>
    <h2 class="py-4 sm:pt-0">
        <div class="flex items-center gap-2">
            <svg role="graphics-symbol" class="size-4">
                <use href="/svg/icons/offre.svg#offre"></use>
            </svg>

            <span
                class="text-left typo-m-bold sm:typo-long-2m-bold">Les missions du poste</span>
        </div>
    </h2>
    <div class="mt-2">
        


<div
     data-controller="truncate-text"
     data-truncate-text-show-more-text-value="Voir plus"
     data-truncate-text-show-less-text-value="Voir moins"
     data-truncate-text-hidden-class="hidden"
     data-truncate-text-line-clamp-class="line-clamp-[17] sm:line-clamp-[20]"
     data-truncate-text-should-collapse-on-connect-value="True"
     >

    <div
        id="1ff"
        class="leading-relaxed  mb-4 typo-long-m"
        data-truncate-text-target="content">
        <p>Vos missions Rattaché(e) au Responsable Automatismes, vous intervenez en amont des projets sur la conception, le développement et l'amélioration de solutions de supervision pour des machines spéciales.<br /><br />En lien avec les automaticiens, vos missions principales seront :<br /><br />- Recueillir et analyser les besoins fonctionnels clients<br /><br />- Rédiger les spécifications techniques<br /><br />- Concevoir l'architecture logicielle et matérielle des systèmes de supervision<br /><br />- Développer les interfaces (IHM, synoptiques), intégrations et protocoles de communication<br /><br />- Assurer l'intégration avec les automates, capteurs, réseaux industriels<br /><br />- Installer les systèmes sur site client et assurer leur mise en service<br /><br />- Former les utilisateurs et assurer le support technique<br /><br />- Participer à l'amélioration continue des solutions logicielles </p>
    </div>

    <button
        type="button"
        class="bg-transparent border-none p-0 cursor-pointer hidden typo-s-bold underline"
        data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;cta_click&quot;,&quot;cta&quot;:&quot;mission-du-poste&quot;}"
        data-truncate-text-target="toggleButton"
        data-action="click->truncate-text#toggle analytics#push:once"
        aria-controls="1ff"
        aria-expanded="false"
        data-cy="toggleShowButton"
    >
        Voir plus
    </button>
</div>


    </div>
</section>


            
<details
    class="
        flex flex-col
        w-full
        border-b
        border-b-grey-100
        py-4
        sm:py-6"
    open     data-controller="remove-attribute" data-remove-attribute-named-value="open">
    <summary
        class="
            list-none
            cursor-pointer
            flex
            items-center
            justify-between
            py-4
            focus-visible:outline-2
            focus-visible:outline-offset-2
            focus-visible:rounded-xs"
        data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;cta_click&quot;,&quot;cta&quot;:&quot;profil-recherch&#xE9;&quot;,&quot;wording&quot;:&quot;Le profil recherch&#xE9;&quot;}"
        data-action="click->analytics#push:once"
        data-cy="profileCollapseButton"
    >
        <h2 class="flex items-center gap-2">
            <svg class="size-4">
                <use href="/svg/icons/user.svg#user"></use>
            </svg>

            <span class="text-left typo-m-bold sm:typo-long-2m-bold">Le profil recherch&#xE9;</span>
        </h2>

        <svg
            aria-hidden="true"
            class="
                size-4
                transition-transform
                duration-200
                parent-open:rotate-180">
            <use href="/svg/icons/arrow.svg#down"></use>
        </svg>
    </summary>

    <div class="mt-2">
        
                <div class="typo-long-m break-words">
                    Profil recherché<br /><br />Issu(e) d'une formation technique de type :<br /><br />- BUT GEII, BTS CIRA, BTS CRSA<br /><br />- ou Licence Professionnelle en automatisme, supervision ou informatique industrielle<br /><br />- Vous justifiez d'une expérience en bureau d'études ou sur des projets industriels mêlant supervision et automatisme.<br /><br />Compétences techniques attendues :<br /><br />- Supervision : Wonderware InTouch, System Platform, ou équivalents<br /><br />- Programmation : TIA Portal, Control Expert (Ladder, Structuré, Littéral)<br /><br />- Réseaux industriels : ProfiBus, Modbus, Ethernet/IP<br /><br />- Bases de données et intégration automate/supervision<br /><br />- Architecture réseau (Switch, routeur, firewall)<br /><br />Vos atouts :<br /><br />- Autonomie, curiosité technique<br /><br />- Sens du service et relation client<br /><br />- Rigueur, capacité d'analyse<br /><br />- Bon niveau d'anglais technique<br /><br />- Permis B obligatoire (déplacements ponctuels)<br /><br />Ref: m0n2j5iu9f
                </div>
            
    </div>
</details>

            
<details
    class="
        flex flex-col
        w-full
        border-b
        border-b-grey-100
        py-4
        sm:py-6"
    open     data-controller="remove-attribute" data-remove-attribute-named-value="open">
    <summary
        class="
            list-none
            cursor-pointer
            flex
            items-center
            justify-between
            py-4
            focus-visible:outline-2
            focus-visible:outline-offset-2
            focus-visible:rounded-xs"
        data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;cta_click&quot;,&quot;cta&quot;:&quot;infos-entreprise&quot;,&quot;wording&quot;:&quot;L&#x27;entreprise&quot;}"
        data-action="click->analytics#push:once"
        data-cy="companyCollapseButton"
    >
        <h2 class="flex items-center gap-2">
            <svg class="size-4">
                <use href="/svg/icons/entreprise.svg#entreprise"></use>
            </svg>

            <span class="text-left typo-m-bold sm:typo-long-2m-bold">L&#x27;entreprise</span>
        </h2>

        <svg
            aria-hidden="true"
            class="
                size-4
                transition-transform
                duration-200
                parent-open:rotate-180">
            <use href="/svg/icons/arrow.svg#down"></use>
        </svg>
    </summary>

    <div class="mt-2">
        
                <div class="typo-long-m break-words">
                    Rejoignez une entreprise à taille humaine au service de l'innovation industrielle ! Implantée dans la métropole lilloise, cette PME industrielle de 70 collaborateurs conçoit, fabrique et intègre des équipements à haute valeur ajoutée pour les secteurs agroalimentaire, médical et pharmaceutique. Spécialisée dans la machine spéciale, la robotique, les automatismes et la tôlerie fine, elle accompagne ses clients industriels de A à Z grâce à un bureau d'études pluridisciplinaire.
                </div>
            
    </div>
</details>

    </div>

</div>

                            <p class="block mt-8 sm:mt-12 typo-xs text-grey-500 break-words">
                                 Publi&#xE9;e le 28/09/2026 - R&#xE9;f : m0n2j5iu9f
                            </p>
                        </div>
                        <div data-switch-display-target="tabContent" class="col-span-full hidden transition-all duration-300 ease-in-out min-h-[95dvh]" role="tabpanel" tabindex="0" id="company-panel" aria-labelledby="company-tab">
                                <turbo-frame id="companyDetailFrame" loading="lazy" src="https://www.hellowork.com/fr-fr/getcompanypageofferframeview/199596/67170737"></turbo-frame>
                        </div>
                    </div>

                    


<div id="alert-modal-container"
     data-controller="input-checker modal"
     data-modal-form-validator-outlet="form"
     
     data-input-checker-input-value="#alert-modal"
     data-action="modal:navigate-to-next-page@document->input-checker#uncheck"
     >
    <input type="checkbox" hidden id="alert-modal" class="peer" >
    <div class="
            fixed
            inset-0
            z-50
            overflow-auto
            bg-black/60
            sm:bg-black/40
            backdrop-blur
            sm:backdrop-blur-md
            items-end
            sm:items-center
            collapse
            opacity-0
            peer-checked:visible
            peer-checked:opacity-100
            transition-[visibility,_opacity]
            duration-700
        ">
        <div class="px-0 sm:px-6 layout-wrapper h-full hidden peer-parent-checked:block">
            <div
                class="layout-outer-grid h-full content-end sm:content-center"
                data-toggle-on-body-force-param="false"
                data-action="click-&gt;input-checker#uncheck:self click-&gt;modal#dispatchDiscardedEvent:self">

                <div
                    data-controller="intersect focus-trap toggle-attribute"
                    data-focus-trap-target="container"
                    data-toggle-attribute-target="element"
                    data-toggle-on-body-force-param="true"
                    data-action="intersect:enter->toggle-on-body#add intersect:enter->toggle-attribute#setAttribute intersect:exit->toggle-on-body#remove intersect:exit->toggle-attribute#unsetAttribute"
                    data-toggle-attribute-attribute-param="aria-modal"
                    data-toggle-attribute-value-param="true"
                    role="dialog"
                    data-cy="modalContainer"
                    class=" bg-white shadow-modal overflow-auto col-span-full sm:col-start-3 xl:col-start-4 sm:col-span-8 rounded-t-sm  mt-4 sm:rounded-sm px-6 sm:px-10 py-6 sm:py-8 sm:my-6"
                    aria-labelledby=alert-modal-form-title alert-modal-otp-title>
                    <div class="flex flex-col gap-4">
                        <div class="flex items-start justify-between">

    <div class="flex justify-center items-center h-10 w-10 flex-shrink-0 rounded-full bg-yellow-50">
        <svg class="size-4 text-yellow-300" aria-hidden="true">
            <use href="/svg/services/alert.svg#alert"></use>
        </svg>
    </div>

                            <div class="ml-auto">
                                    <button
                                        aria-label="Fermer la fenêtre modale"
                                        class="ml-6"
                                        data-toggle-on-body-force-param="false"
                                        data-action="click->input-checker#uncheck click->modal#dispatchDiscardedEvent"
                                        data-cy="crossButton"
                                        type="button"
                                    >
                                            <svg class="size-3" aria-hidden="true">
                                                <use href="/svg/icons/nav/close.svg#close"></use>
                                            </svg>
                                    </button>
                            </div>
                        </div>

                    </div>

                    
    


<turbo-frame
    id="create-alert-modal"
    data-controller="update-turbo-src"
    data-update-turbo-src-target="turboFrame"
>
    <div
        data-controller="form-validator"
        data-form-validator-show-class="flex"
        data-form-validator-hide-class="hidden"
        data-form-validator-disabled-class="pointer-events-none"
        data-action="
            modal:discarded@document->form-validator#resetValidation
            page-restore:restored@document->form-validator#resetValidation
        "
    >
        <form
            id="alert-form"
            method="POST"
            data-form-validator-target="form"
            action="/fr-fr/alerte/create"
            data-turbo-frame="otp-input"
        >
            <turbo-frame
                id="otp-input"
                data-controller="frame-clearable"
                data-action="turbo:frame-render->form-validator#activateSubmitButton"
                class="block peer has-child:mt-3"
            ></turbo-frame>

            <span id="alert-modal-form-title" class="block typo-l-bold text-pretty mt-4 peer-has-child:hidden">
                <span class="not-connected:inline connected:hidden">Créez votre compte Hellowork et activez votre alerte</span>
                <span class="connected:inline not-connected:hidden">Créez une alerte</span>
            </span>

            <div
                class="peer-has-child:hidden mt-0"
                data-analytics-values-param='{"event": "EventGeneric", "EventName": "alert_step"}'
                data-action="focusin->analytics#push:once">
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6 w-full mt-8 mb-4 sm:mb-6">
                    

<div
    data-controller="input-validity autocomplete autocomplete-simple focus-group"
    data-input-validity-input-type-value="job"    data-input-validity-show-error-class="inline-flex"
    data-input-validity-hide-error-class="hidden"
    data-input-validity-label-error-class="input-label-error"
    data-input-validity-container-error-class="input-container-error"
    
    data-action="
        autocomplete:click:outside->autocomplete#closeDropdown
        autocomplete:click:outside:hasValue->input-validity#checkValidity
        autocomplete:selected->autocomplete-simple#fillSuggestion
        autocomplete:Job:selected->autocomplete-simple#fillSuggestion
        autocomplete:selected->input-validity#checkValidity
        autocomplete:Job:selected->input-validity#checkValidity
        valid-form:alert-form@window->input-validity#checkValidity
        reset-form:alert-form@window->input-validity#hideError
        reset-form:alert-form@window->autocomplete-simple#clearFieldIfNoSelection
        keydown.up->focus-group#focusPreviousElement
        keydown.down->focus-group#focusNextElement
    "
    data-autocomplete-url-value="https://www.hellowork.com/fr-fr/searchoffers/getjobsuggestionsframeview?displayMissingResultMessage=True"
    data-autocomplete-hiding-class="hidden"
    data-autocomplete-id-value="Job"
    class="relative"
>
    <label
        for="Job"
        data-input-validity-target="label"
        class="input-label"
    >
        M&#xE9;tier
    </label>
    <div
        class="input-container"
        data-input-validity-target="container"
        data-controller="clearable"
    >
        <input
            form="alert-form"
            id="Job"
            name="Job.DisplayLabel"
            data-input-validity-target="input"
            data-autocomplete-target="input"
            data-clearable-target="field"
            data-autocomplete-simple-target="field"
            data-action="
                autocomplete#suggestIfNeeded
                autocomplete-simple#clearSuggestion
                click->toggle#add
                click->toggle#removeAdditional
                focus->toggle#add
                focus->toggle#removeAdditional
            "
            class="peer"
            placeholder="Infirmier, commercial, comptable..."
            autocomplete="off"
            required
            value="D&#xE9;veloppeur informatique"
            data-cy="jobAutocompleteInput"
            aria-describedby="Job_error"
            
        >
        <button
            type="button"
            class="hocus:!scale-[1.33] transform transition-transform peer-placeholder-shown:hidden"
            data-action="clearable#clear autocomplete-simple#clearSuggestion"
        >
            <svg class="size-3">
                <use href="/svg/icons/nav/close.svg#close"></use>
            </svg>
        </button>
    </div>
    <input
        
        data-input-validity-target="input"
        name="Job.JobCriterionUri"
        data-autocomplete-simple-target="hiddenInput"
        required
        class="absolute w-0 h-1 opacity-0"
        tabindex="-1"
        value="http://www.rj.com/Commun/Post/Developpeur"
        data-action=""
    >
    <div class="relative">
        <turbo-frame
            id="jobAutocompleteFrame"
            data-autocomplete-target="dropdown frame"
            data-turbo="true"
            src=""
            class="absolute h-auto z-[1] top-0 left-0 w-full overflow-visible"
        >
        </turbo-frame>
    </div>
    <span
        id="Job_error"
        data-input-validity-target="error errorMessage"
        data-cy="Job_errorMessage"
        class="input-subtext-error hidden"
    >
        
    </span>
</div>


                    

<div
    data-controller="input-validity autocomplete autocomplete-simple focus-group"
        data-input-validity-show-error-class="inline-flex"
    data-input-validity-hide-error-class="hidden"
    data-input-validity-label-error-class="input-label-error"
    data-input-validity-container-error-class="input-container-error"
    
    data-action="
        autocomplete:click:outside->autocomplete#closeDropdown
        autocomplete:click:outside:hasValue->input-validity#checkValidity
        autocomplete:selected->autocomplete-simple#fillSuggestion
        autocomplete:Locality:selected->autocomplete-simple#fillSuggestion
        autocomplete:selected->input-validity#checkValidity
        autocomplete:Locality:selected->input-validity#checkValidity
        valid-form:alert-form@window->input-validity#checkValidity
        reset-form:alert-form@window->input-validity#hideError
        reset-form:alert-form@window->autocomplete-simple#clearFieldIfNoSelection
        keydown.up->focus-group#focusPreviousElement
        keydown.down->focus-group#focusNextElement
    "
    data-autocomplete-url-value="https://www.hellowork.com/fr-fr/search/getlocationsuggestionsframeview?displayMissingResultMessage=True"
    data-autocomplete-hiding-class="hidden"
    data-autocomplete-id-value="Locality"
    class="relative"
>
    <label
        for="Locality"
        data-input-validity-target="label"
        class="input-label"
    >
        Localit&#xE9;
    </label>
    <div
        class="input-container"
        data-input-validity-target="container"
        data-controller="clearable"
    >
        <input
            form="alert-form"
            id="Locality"
            data-input-validity-target="input"
            data-autocomplete-target="input"
            data-clearable-target="field"
            data-autocomplete-simple-target="field"
            data-action="
                autocomplete#suggestIfNeeded
                autocomplete-simple#clearSuggestion
                click->toggle#add
                click->toggle#removeAdditional
                focus->toggle#add
                focus->toggle#removeAdditional
            "
            class="peer"
            placeholder="Ville, d&#xE9;partement..."
            autocomplete="off"
            required
            value="Lille 59000"
            data-cy="localityAutocompleteInput"
            aria-describedby="Locality_error"
            
        >
        <button
            type="button"
            class="hocus:!scale-[1.33] transform transition-transform peer-placeholder-shown:hidden"
            data-action="clearable#clear autocomplete-simple#clearSuggestion"
        >
            <svg class="size-3">
                <use href="/svg/icons/nav/close.svg#close"></use>
            </svg>
        </button>
    </div>
    <input
        
        data-input-validity-target="input"
        name="Location.Uri"
        data-autocomplete-simple-target="hiddenInput"
        required
        class="absolute w-0 h-1 opacity-0"
        tabindex="-1"
        value="http://www.rj.com/commun/localite/commune/59350"
        data-action=""
    >
    <div class="relative">
        <turbo-frame
            id="localityAutocompleteFrame"
            data-autocomplete-target="dropdown frame"
            data-turbo="true"
            src=""
            class="absolute h-auto z-[1] top-0 left-0 w-full overflow-visible"
        >
        </turbo-frame>
    </div>
    <span
        id="Locality_error"
        data-input-validity-target="error errorMessage"
        data-cy="Locality_errorMessage"
        class="input-subtext-error hidden"
    >
        
    </span>
</div>


                        

<div
    data-controller="input-validity input-checker email-autocomplete autocomplete-simple focus-group toggle-property toggle"
    data-input-checker-input-value="#emailReadonly"
    
            data-toggle-property-named-value=readOnly
            data-toggle-toggled-class=""
        
    data-action="
        toggle-property:toggled->input-checker#check
        toggle-property:toggled->toggle#toggle
        email-autocomplete:click:outside:hasValue->input-validity#checkValidity
        email-autocomplete:selected->autocomplete-simple#fillSuggestion
        email-autocomplete:selected->input-validity#checkValidity
        valid-form:alert-form@window->input-validity#checkValidity
        reset-form:alert-form@window->input-validity#hideError
        keydown.up->focus-group#focusPreviousElement
        keydown.down->focus-group#focusNextElement
        keydown.esc->email-autocomplete#closeDropdown
    "
    data-input-validity-show-error-class="inline-flex"
    data-input-validity-hide-error-class="hidden"
    data-input-validity-label-error-class="input-label-error"
    data-input-validity-container-error-class="input-container-error"
    data-email-autocomplete-hiding-class="hidden"
    class="relative"
>
    <input type="checkbox" id="emailReadonly" class="peer" hidden>

        <label
            for="Email"
            data-input-validity-target="label"
            class="input-label peer-checked:input-label-disabled "
        >
            Email
        </label>
    <div
        class="input-container peer-checked:input-container-disabled "
        data-input-validity-target="container"
        data-controller="clearable"
        data-toggle-target="toToggle"
    >
        <input
            class="peer input rounded-sm"
            data-cy="emailInput"
            type="email"
            id="Email"
            form="alert-form"
            name="OtpData.Email"
            value=""
            placeholder="contactezmoi@vite.com"
            autocomplete="email"
            pattern="^[a-zA-Z0-9]&#x2B;([a-zA-Z0-9._\&#x2B;\-]*[a-zA-Z0-9_\&#x2B;\-])?@[a-zA-Z0-9]&#x2B;([.\-][a-zA-Z0-9]&#x2B;)*\.[a-zA-Z]{2,}$"
            role="combobox"
            aria-autocomplete="list"
            aria-expanded="false"
            aria-controls="Email_suggestions"
            data-controller=from-account-data
            data-from-account-data-copy-value="Email"
            data-from-account-data-into-value="value"
            data-email-autocomplete-target="input"
            data-autocomplete-simple-target="field"
            data-clearable-target="field"
            data-input-validity-target="input"
            data-action="
                email-autocomplete#suggestEmail
                valid-form:alert-form@window->input-validity#checkValidity
                from-account-data:copied:Email-&gt;toggle-property#toggle"
            
            
            
            required
            
            
            
            data-toggle-property-target=toToggle
            
            aria-describedby="Email_error Email_info"
            
        >
            <button
                type="button"
                class="hocus:!scale-[1.33] transform transition-transform peer-placeholder-shown:hidden [input#emailReadonly:checked_~*_&]:hidden"
                data-cy="Email_clearButton"
                data-action="clearable#clear form-exit#makeDirty"
                aria-label="Effacer le champ email"
            >
                <svg class="size-3" aria-hidden="true">
                    <use href="/svg/icons/nav/close.svg#close"></use>
                </svg>
            </button>
    </div>
    <div class="relative">
        <div class="absolute h-auto top-0 left-0 w-full overflow-visible z-[1]">
            <ul id="Email_suggestions"
                role="listbox"
                data-email-autocomplete-target="dropdown"
                class="hidden bg-white typo-m mt-3 sm:border sm:border-grey-300 sm:rounded-sm sm:py-2">
                <template
                    data-email-autocomplete-target="itemTemplate"
                >
                    

<li role="option" class="hidden sm:px-2" data-email-autocomplete-provider-value="{{provider}}" data-email-autocomplete-target="item">
    <button
        type="button"
        class="w-full text-start hocus:bg-grey-50 rounded-xs pr-3 sm:pr-2 sm:py-2 overflow-hidden text-ellipsis py-3.5 pl-3 sm:pl-2"
        data-email-autocomplete-id-param="{{id}}"
        data-email-autocomplete-label-param="{{provider}}"
        data-focus-group-target="element"
        data-action="email-autocomplete#selectSuggestion">
        {{provider}}
    </button>
</li>
                </template>
            </ul>
        </div>
    </div>
    <span
        id="Email_error"
        data-input-validity-target="error errorMessage"
        data-cy="Email_errorMessage"
        class="input-subtext-error hidden"
    >
        
    </span>

    <div
        id="Email_info"
        class="input-subtext items-center hidden"
    >
        <svg class="mr-2 flex-shrink-0" aria-hidden="true">
            <use href="/svg/badges/info-xs.svg#info-xs"></use>
        </svg>
        <span></span>
    </div>
</div>

                </div>

                <div class="mt-4 sm:mt-6">
                    

<fieldset
    data-controller="input-validity"
        data-action="
        valid-form:alert-form@window->input-validity#checkValidity
        reset-form:alert-form@window->input-validity#hideError
        input->input-validity#checkValidity
    "
    data-input-validity-show-error-class="inline-flex"
    data-input-validity-hide-error-class="hidden"
    data-input-validity-container-error-class="checkbox-button-error"
    data-input-validity-label-error-class="input-label-error"
    >

        <legend
            data-input-validity-target="label"
            class="inline-block mb-3 text-sm ">
            Type de contrat
        </legend>

    <div
        id="Contracts"
        data-controller="checkbox-selector toggle"
        data-checkbox-selector-target="parent"
        data-toggle-toggled-class=hidden
        data-cy="checkboxList"
        class="flex flex-row flex-wrap gap-3"
    >
            

<div class="checkbox-button-secondary checkbox-button-secondary-s checkbox-black "
    data-input-validity-target="container"
    
    
>
    <input
        form="alert-form"
        data-cy="checkbox-CDI"
        type="checkbox"
        class="peer"
        id="ContractsCDI"
        name="Contracts"
        value="CDI"
        data-input-validity-target="input"
        
        
        data-action="
            click-&gt;checkbox-selector#atLeastOneIsChecked
            checkbox-selector:connected@window-&gt;checkbox-selector#atLeastOneIsChecked
            
            
            
        "
        checked
        
        
            >
    <label for="ContractsCDI" class="flex items-center">
        <span class="hidden">
            <svg class="size-3 mr-2 peer-checked:[label_&]:hidden" aria-hidden="true">
                <use href="/svg/icons/add.svg#add"></use>
            </svg>
            <svg class="size-3 mr-2 hidden peer-checked:[label_&]:inline" aria-hidden="true">
                <use href="/svg/icons/tick.svg#tick"></use>
            </svg>
        </span>
        <span>
            CDI
        </span>
    </label>
</div>

            

<div class="checkbox-button-secondary checkbox-button-secondary-s checkbox-black "
    data-input-validity-target="container"
    
    
>
    <input
        form="alert-form"
        data-cy="checkbox-CDD"
        type="checkbox"
        class="peer"
        id="ContractsCDD"
        name="Contracts"
        value="CDD"
        data-input-validity-target="input"
        
        
        data-action="
            click-&gt;checkbox-selector#atLeastOneIsChecked
            
            
            
            
        "
        
        
        
            >
    <label for="ContractsCDD" class="flex items-center">
        <span class="hidden">
            <svg class="size-3 mr-2 peer-checked:[label_&]:hidden" aria-hidden="true">
                <use href="/svg/icons/add.svg#add"></use>
            </svg>
            <svg class="size-3 mr-2 hidden peer-checked:[label_&]:inline" aria-hidden="true">
                <use href="/svg/icons/tick.svg#tick"></use>
            </svg>
        </span>
        <span>
            CDD
        </span>
    </label>
</div>

            

<div class="checkbox-button-secondary checkbox-button-secondary-s checkbox-black "
    data-input-validity-target="container"
    
    
>
    <input
        form="alert-form"
        data-cy="checkbox-Int&#xE9;rim"
        type="checkbox"
        class="peer"
        id="ContractsTravail_temp"
        name="Contracts"
        value="Travail_temp"
        data-input-validity-target="input"
        
        
        data-action="
            click-&gt;checkbox-selector#atLeastOneIsChecked
            
            
            
            
        "
        
        
        
            >
    <label for="ContractsTravail_temp" class="flex items-center">
        <span class="hidden">
            <svg class="size-3 mr-2 peer-checked:[label_&]:hidden" aria-hidden="true">
                <use href="/svg/icons/add.svg#add"></use>
            </svg>
            <svg class="size-3 mr-2 hidden peer-checked:[label_&]:inline" aria-hidden="true">
                <use href="/svg/icons/tick.svg#tick"></use>
            </svg>
        </span>
        <span>
            Int&#xE9;rim
        </span>
    </label>
</div>

            

<div class="checkbox-button-secondary checkbox-button-secondary-s checkbox-black "
    data-input-validity-target="container"
    
    
>
    <input
        form="alert-form"
        data-cy="checkbox-Stage"
        type="checkbox"
        class="peer"
        id="ContractsStage"
        name="Contracts"
        value="Stage"
        data-input-validity-target="input"
        
        
        data-action="
            click-&gt;checkbox-selector#atLeastOneIsChecked
            
            
            
            
        "
        
        
        
            >
    <label for="ContractsStage" class="flex items-center">
        <span class="hidden">
            <svg class="size-3 mr-2 peer-checked:[label_&]:hidden" aria-hidden="true">
                <use href="/svg/icons/add.svg#add"></use>
            </svg>
            <svg class="size-3 mr-2 hidden peer-checked:[label_&]:inline" aria-hidden="true">
                <use href="/svg/icons/tick.svg#tick"></use>
            </svg>
        </span>
        <span>
            Stage
        </span>
    </label>
</div>

            

<div class="checkbox-button-secondary checkbox-button-secondary-s checkbox-black "
    data-input-validity-target="container"
    
    
>
    <input
        form="alert-form"
        data-cy="checkbox-Alternance"
        type="checkbox"
        class="peer"
        id="ContractsAlternance"
        name="Contracts"
        value="Alternance"
        data-input-validity-target="input"
        
        
        data-action="
            click-&gt;checkbox-selector#atLeastOneIsChecked
            
            
            
            
        "
        
        
        
            >
    <label for="ContractsAlternance" class="flex items-center">
        <span class="hidden">
            <svg class="size-3 mr-2 peer-checked:[label_&]:hidden" aria-hidden="true">
                <use href="/svg/icons/add.svg#add"></use>
            </svg>
            <svg class="size-3 mr-2 hidden peer-checked:[label_&]:inline" aria-hidden="true">
                <use href="/svg/icons/tick.svg#tick"></use>
            </svg>
        </span>
        <span>
            Alternance
        </span>
    </label>
</div>

            

<div class="checkbox-button-secondary checkbox-button-secondary-s checkbox-black "
    data-input-validity-target="container"
    
    
>
    <input
        form="alert-form"
        data-cy="checkbox-Ind&#xE9;pendant"
        type="checkbox"
        class="peer"
        id="ContractsIndependant"
        name="Contracts"
        value="Independant"
        data-input-validity-target="input"
        
        
        data-action="
            click-&gt;checkbox-selector#atLeastOneIsChecked
            
            
            
            
        "
        
        
        
            >
    <label for="ContractsIndependant" class="flex items-center">
        <span class="hidden">
            <svg class="size-3 mr-2 peer-checked:[label_&]:hidden" aria-hidden="true">
                <use href="/svg/icons/add.svg#add"></use>
            </svg>
            <svg class="size-3 mr-2 hidden peer-checked:[label_&]:inline" aria-hidden="true">
                <use href="/svg/icons/tick.svg#tick"></use>
            </svg>
        </span>
        <span>
            Ind&#xE9;pendant
        </span>
    </label>
</div>

            

<div class="checkbox-button-secondary checkbox-button-secondary-s checkbox-black hidden"
    data-input-validity-target="container"
    
    data-toggle-target=toToggle
>
    <input
        form="alert-form"
        data-cy="checkbox-Franchise"
        type="checkbox"
        class="peer"
        id="ContractsFranchise"
        name="Contracts"
        value="Franchise"
        data-input-validity-target="input"
        
        
        data-action="
            click-&gt;checkbox-selector#atLeastOneIsChecked
            
            
            
            
        "
        
        
        
            >
    <label for="ContractsFranchise" class="flex items-center">
        <span class="hidden">
            <svg class="size-3 mr-2 peer-checked:[label_&]:hidden" aria-hidden="true">
                <use href="/svg/icons/add.svg#add"></use>
            </svg>
            <svg class="size-3 mr-2 hidden peer-checked:[label_&]:inline" aria-hidden="true">
                <use href="/svg/icons/tick.svg#tick"></use>
            </svg>
        </span>
        <span>
            Franchise
        </span>
    </label>
</div>

            

<div class="checkbox-button-secondary checkbox-button-secondary-s checkbox-black hidden"
    data-input-validity-target="container"
    
    data-toggle-target=toToggle
>
    <input
        form="alert-form"
        data-cy="checkbox-Associ&#xE9;"
        type="checkbox"
        class="peer"
        id="ContractsAssocie"
        name="Contracts"
        value="Associe"
        data-input-validity-target="input"
        
        
        data-action="
            click-&gt;checkbox-selector#atLeastOneIsChecked
            
            
            
            
        "
        
        
        
            >
    <label for="ContractsAssocie" class="flex items-center">
        <span class="hidden">
            <svg class="size-3 mr-2 peer-checked:[label_&]:hidden" aria-hidden="true">
                <use href="/svg/icons/add.svg#add"></use>
            </svg>
            <svg class="size-3 mr-2 hidden peer-checked:[label_&]:inline" aria-hidden="true">
                <use href="/svg/icons/tick.svg#tick"></use>
            </svg>
        </span>
        <span>
            Associ&#xE9;
        </span>
    </label>
</div>

            

<div class="checkbox-button-secondary checkbox-button-secondary-s checkbox-black hidden"
    data-input-validity-target="container"
    
    data-toggle-target=toToggle
>
    <input
        form="alert-form"
        data-cy="checkbox-Fonctionnaire"
        type="checkbox"
        class="peer"
        id="ContractsFonctionnaire"
        name="Contracts"
        value="Fonctionnaire"
        data-input-validity-target="input"
        
        
        data-action="
            click-&gt;checkbox-selector#atLeastOneIsChecked
            
            
            
            
        "
        
        
        
            >
    <label for="ContractsFonctionnaire" class="flex items-center">
        <span class="hidden">
            <svg class="size-3 mr-2 peer-checked:[label_&]:hidden" aria-hidden="true">
                <use href="/svg/icons/add.svg#add"></use>
            </svg>
            <svg class="size-3 mr-2 hidden peer-checked:[label_&]:inline" aria-hidden="true">
                <use href="/svg/icons/tick.svg#tick"></use>
            </svg>
        </span>
        <span>
            Fonctionnaire
        </span>
    </label>
</div>

            

<div class="checkbox-button-secondary checkbox-button-secondary-s checkbox-black hidden"
    data-input-validity-target="container"
    
    data-toggle-target=toToggle
>
    <input
        form="alert-form"
        data-cy="checkbox-Freelance"
        type="checkbox"
        class="peer"
        id="ContractsFreelance"
        name="Contracts"
        value="Freelance"
        data-input-validity-target="input"
        
        
        data-action="
            click-&gt;checkbox-selector#atLeastOneIsChecked
            
            
            
            
        "
        
        
        
            >
    <label for="ContractsFreelance" class="flex items-center">
        <span class="hidden">
            <svg class="size-3 mr-2 peer-checked:[label_&]:hidden" aria-hidden="true">
                <use href="/svg/icons/add.svg#add"></use>
            </svg>
            <svg class="size-3 mr-2 hidden peer-checked:[label_&]:inline" aria-hidden="true">
                <use href="/svg/icons/tick.svg#tick"></use>
            </svg>
        </span>
        <span>
            Freelance
        </span>
    </label>
</div>

            

<div class="checkbox-button-secondary checkbox-button-secondary-s checkbox-black hidden"
    data-input-validity-target="container"
    
    data-toggle-target=toToggle
>
    <input
        form="alert-form"
        data-cy="checkbox-Stage de lyc&#xE9;e"
        type="checkbox"
        class="peer"
        id="ContractsStage_de_lycee"
        name="Contracts"
        value="Stage_de_lycee"
        data-input-validity-target="input"
        
        
        data-action="
            click-&gt;checkbox-selector#atLeastOneIsChecked
            
            
            
            
        "
        
        
        
            >
    <label for="ContractsStage_de_lycee" class="flex items-center">
        <span class="hidden">
            <svg class="size-3 mr-2 peer-checked:[label_&]:hidden" aria-hidden="true">
                <use href="/svg/icons/add.svg#add"></use>
            </svg>
            <svg class="size-3 mr-2 hidden peer-checked:[label_&]:inline" aria-hidden="true">
                <use href="/svg/icons/tick.svg#tick"></use>
            </svg>
        </span>
        <span>
            Stage de lyc&#xE9;e
        </span>
    </label>
</div>


            <button
                type="button"
                data-toggle-target="toToggle"
                class="basis-full hidden inline-flex gap-1 items-center hover:underline cursor-pointer bg-transparent typo-s"
                data-action="toggle#toggle"
                aria-expanded="true"
                aria-controls="Contracts"
                data-cy="seeLessButton">
                Voir moins
                <svg class="size-2" aria-hidden="true">
                    <use href="/svg/icons/arrow.svg#up"></use>
                </svg>
            </button>
            <button
                type="button"
                data-toggle-target="toToggle"
                class="basis-full inline-flex gap-1 items-center hover:underline cursor-pointer typo-s"
                data-action="toggle#toggle"
                aria-expanded="false"
                aria-controls="Contracts"
                data-cy="seeMoreButton">
                Voir plus
                <svg class="size-2" aria-hidden="true">
                    <use href="/svg/icons/arrow.svg#down"></use>
                </svg>
            </button>
    </div>

    <span
        data-input-validity-target="error errorMessage"
        data-cy="Contracts_errorMessage"
        class="input-subtext-error hidden">
        
    </span>
</fieldset>

                </div>
            </div>

            <div class="peer-has-child:hidden flex flex-col items-center connected:flex-col-reverse">
                <turbo-frame
                    id="gcu-checkbox-frame"
                    src="/fr-fr/gcu-checkbox-frame?formId=alert-form&amp;actionWording=cliquant%20sur%20Cr%C3%A9er%20mon%20alerte"
                    class="has-[[data-cgu=checkbox]]:mt-8 has-[[data-cgu=checkbox]]:mb-4 has-[[data-cgu=checkbox]]:sm:mb-3 has-[[data-cgu=wording]]:mt-4 has-[[data-cgu=wording]]:sm:mt-3 has-[[data-cgu=wording]]:text-center">
                </turbo-frame>
                <button
                    type="submit"
                    data-cy="alertCreation"
                    data-action="click->form-validator#onSubmit"
                    class="btn-primary-l bg-yellow-300 text-black w-full connected:mt-8">
                    <span data-form-validator-target="text" class="connected:inline not-connected:hidden">
                        Cr&#xE9;er mon alerte
                    </span>
                    <span data-form-validator-target="text" class="not-connected:inline connected:hidden">
                        Continuer
                    </span>
                    <div
                        data-form-validator-target="logo"
                        class="hidden">
                        <svg id="loader" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 60 60" xml:space="preserve" class="size-5 flex-shrink-0">
    <circle id="circle1" fill="currentColor" stroke="none" cx="6" cy="30" r="6">
        <animateTransform
            attributeName="transform"
            dur="1s"
            type="translate"
            values="0 15 ; 0 -15; 0 15"
            repeatCount="indefinite"
            begin="0.1"/>
    </circle>
    <circle fill="currentColor" stroke="none" cx="30" cy="30" r="6">
        <animateTransform
            attributeName="transform"
            dur="1s"
            type="translate"
            values="0 10 ; 0 -10; 0 10"
            repeatCount="indefinite"
            begin="0.2"/>
    </circle>
    <circle fill="currentColor" stroke="none" cx="54" cy="30" r="6">
        <animateTransform
            attributeName="transform"
            dur="1s"
            type="translate"
            values="0 5 ; 0 -5; 0 5"
            repeatCount="indefinite"
            begin="0.3"/>
    </circle>
</svg>
                    </div>
                </button>
            </div>
        </form>
    </div>

    


</turbo-frame>


                </div>
            </div>
        </div>
    </div>
</div>


                    <div class="hidden not-connected:block">
                        <input type="checkbox" id="alertModal" class="peer" hidden>
                        <div class="relative hidden peer-checked:block"
                             data-controller="removable cookie-from-value alert-scroll-up mutable"
                             data-alert-scroll-up-category-value="1"
                             data-cookie-from-value-name-value="hw_hide_alert_scrollup"
                             data-cookie-from-value-val-value="true" data-cookie-from-value-duration-value="30" data-action="
                                mutable:connected->cookie-from-value#hasCookie:once
                                mutable:connected->alert-scroll-up#checkIfShouldBeRemoved
                                modal:discarded@document->removable#remove
                                cookie-from-value:hasCookie->removable#remove
                                ">
                            <div class="absolute bottom-0">
                                <div data-controller="intersect input-checker analytics"
                                     data-input-checker-input-value="#alert-modal" data-intersect-name-value="modal"
                                     data-analytics-values-param='{"event": "generic", "EventName": "alert_load", "EventLibelle": "do-scroll-up"}'
                                     data-action="
                                        intersect:modal:enter->input-checker#check
                                        intersect:modal:enter->analytics#push
                                        intersect:modal:enter->cookie-from-value#setCookie
                                        ">
                                </div>
                                <div class="h-screen"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>




<div id="postuler"
     data-controller="toggle intersect"
     data-intersect-name-value="form"
     data-toggle-toggled-additional-class="hidden"
     data-action="intersect:form:enter->toggle#addAdditional intersect:form:exit->toggle#removeAdditional"
     class="block w-full bg-purple-200 mb-12 lg:mb-24">
	<div
		data-toggle-target="toToggleAdditional"
		class="
			fixed flex gap-x-4 w-full justify-center sm:justify-end z-[3] bottom-0 left-0 right-0
			sm:bottom-6 py-3 px-4 sm:px-6 sm:py-0 lg:hidden bg-white
			sm:bg-transparent shadow-sticky-button sm:shadow-none
			"
		>

		<div
			aria-hidden="true"
			data-controller="toggle"
			data-toggle-toggled-class="!hidden"
			data-toggle-toggled-additional-class="coach-cta-out bg-none"
			data-toggle-target="toToggle toToggleAdditional"
			data-action="ab-test:exposed@document->toggle#remove intersect:coachCta:exit@window->toggle#addAdditional:once"
			class="!hidden sm:hidden pointer-events-none absolute inset-x-0 bottom-full h-56 bg-gradient-to-t from-white to-transparent"
		></div>
		<a
			id="mobile-sticky-button"
			class="btn-primary-candidacy-l grow sm:max-w-80 coach-cta-in"
			href="#postuler"
		>
			Postuler
		</a>
		<div
			data-controller="toggle"
			data-toggle-toggled-class="hidden"
			data-toggle-toggled-additional-class="!hidden"
			data-toggle-target="toToggle toToggleAdditional"
			data-action="ab-test:exposed@document->toggle#remove intersect:coachCta:exit@window->toggle#removeAdditional:once"
			class="coach-cta-in h-11 hidden !hidden"
		>
			


<button
    title="Ouvrir le coach emploi"
    data-turbo-frame="coach-panel-frame"
    class="btn-outline-purple-l pl-2 py-2 pr-4 h-full border-2 text-purple-500 bg-white"
    data-controller="input-checker"
    data-input-checker-input-value="#coach-visibility"
    data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;ai_assistant_launch&quot;,&quot;event_info&quot;:&quot;coach_emploi&quot;,&quot;cta&quot;:&quot;button&quot;,&quot;wording&quot;:&quot;Me pr&#xE9;parer&quot;}"
    data-action="input-checker#check click->analytics#push"
    aria-controls="coach-panel"
>
    <div class="w-[30px] h-6 shrink-0" aria-hidden="true">
        
<div class="relative size-full text-purple-500" aria-hidden="true">
    <img
        alt=""
        class="h-full w-4/5 object-contain object-bottom absolute left-0"
        src="/images/ai-agent/coach/sophia.webp"
        loading="lazy"
    />
    <svg class="h-1/5 aspect-square absolute top-0 right-[20%] small-star-animation">
        <use href="/svg/ai-agent/agent-star.svg#agent-star"></use>
    </svg>
    <svg class="h-1/3 aspect-square absolute top-[10%] right-0 big-star-animation">
        <use href="/svg/ai-agent/agent-star.svg#agent-star"></use>
    </svg>
</div>

    </div>
    Me&nbsp;préparer
</button>

		</div>
	</div>
	<div class="layout-grid" data-controller="intersect input-checker"
	     data-intersect-name-value="alert" data-intersect-threshold-value="0.5"
	     data-input-checker-input-value="#alertModal" data-action="intersect:alert:enter->input-checker#check">
		<div class="layout-inner-grid">
			<div class="col-span-full lg:col-start-3 lg:col-end-11 mt-8 sm:mt-14"
			     data-controller="user-authenticated toggle" data-toggle-toggled-class="hidden"
			     data-action="user-authenticated:userIsAuthenticated->toggle#toggle">
					<h2 class="text-xl sm:text-3xl hidden" data-toggle-target="toToggle">
						<span>Envoyez votre candidature</span>
						<p class="overflow-ellipsis whitespace-nowrap font-bold">dès maintenant !</p>
					</h2>
					<div class="text-xl sm:text-3xl" data-toggle-target="toToggle" role="heading" aria-level="2">
						<span>Créez votre compte Hellowork et</span>
						<p class="overflow-ellipsis whitespace-nowrap font-bold">envoyez votre candidature !</p>
					</div>
			</div>
		</div>
		<div class="layout-inner-grid" id="offer-detail-funnel-container"
		     data-controller="update-turbo-src"
		     data-update-turbo-src-endpoint-value="/fr-fr/offres/getinitialformframeview"
		     data-update-turbo-src-query-params-value='{ "offerId": 67170737 }'
		     data-action="pageshow@window->update-turbo-src#forceUpdate">
			<div class="col-span-full sm:col-start-1 sm:col-end-13 lg:col-start-3 lg:col-end-11 sm:col-span-8 mb-16 mt-6 sm:mt-8">
				<turbo-frame id="offer-detail-step-frame"
					data-update-turbo-src-target="turboFrame"
					src="/fr-fr/offres/getinitialformframeview?offerId=67170737"
					loading="lazy"
				>
					<div class="px-4 py-6 sm:w-auto sm:py-10 sm:px-[88px] lg:p-8 bg-white rounded-sm">
						<div class="flex justify-center items-center min-h-[620px] lg:min-h-[420px]">
							<svg id="loader" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 60 60" xml:space="preserve" class="size-10">
    <circle id="circle1" fill="currentColor" stroke="none" cx="6" cy="30" r="6">
        <animateTransform
            attributeName="transform"
            dur="1s"
            type="translate"
            values="0 15 ; 0 -15; 0 15"
            repeatCount="indefinite"
            begin="0.1"/>
    </circle>
    <circle fill="currentColor" stroke="none" cx="30" cy="30" r="6">
        <animateTransform
            attributeName="transform"
            dur="1s"
            type="translate"
            values="0 10 ; 0 -10; 0 10"
            repeatCount="indefinite"
            begin="0.2"/>
    </circle>
    <circle fill="currentColor" stroke="none" cx="54" cy="30" r="6">
        <animateTransform
            attributeName="transform"
            dur="1s"
            type="translate"
            values="0 5 ; 0 -5; 0 5"
            repeatCount="indefinite"
            begin="0.3"/>
    </circle>
</svg>
						</div>
					</div>
				</turbo-frame>
			</div>
		</div>
	</div>
</div>


<div class="layout-grid mb-12 sm:mb-16 lg:mb-24">
        <div id="similar-offers" class="layout-inner-grid gap-y-6 mb-4 sm:mb-10">
            

    <div class="col-span-full">
        <h2 class="typo-xl sm:typo-3xl">
            Ces offres pourraient aussi <br><span class="font-bold"> vous intéresser</span>
        </h2>
    </div>
        <div class="small-group col-span-4 sm:col-span-6 xl:col-span-4">
            
<div
    class="group h-full overflow-hidden bg-white rounded-sm border border-grey-100 hover:border-grey-500 focus-within:outline focus-within:transition-none transition-border-color duration-100"
>
    <div class="h-full relative flex flex-col sm:flex-row sm:small-group:flex-col ">
        <div class="absolute right-6 sm:small-group:right-4 top-6 sm:small-group:top-[21px] z-[2] flex gap-4 sm:gap-0">
            

<turbo-frame id="bookmark-frame-card84206121">
    <form 
        action="/fr-fr/candidat/tooglebookmark"
        method="GET"
        data-controller="bookmark"
        data-bookmark-offer-id-value="84206121"
        data-bookmark-bookmarked-icon-value="/svg/icons/bookmark.svg#bookmark-active"
        data-bookmark-unbookmarked-icon-value="/svg/icons/bookmark.svg#bookmark"
        data-bookmark-bookmarked-class="text-pink-500"
        data-fetch-account-data-event-param="turbo:submit-end"
        data-action="fetch-account-data#refreshAfterNextTurboEvent"
    >
        <input type="hidden" name="idOffre" value="84206121">
        <input type="hidden" name="turboFrameId" value="bookmark-frame-card84206121">
        <input type="hidden" name="isFromToolbar" value="False"/>
        <button 
            class="btn-icon-no-outline-m sm:btn-icon-no-outline-l small-group:sm:btn-icon-no-outline-m"
            data-bookmark-target="button"
            data-analytics-values-param='{"event": "generic", "EventName" : "bookmark_add", "EventLibelle": "" }'
            data-action="analytics#push:stop"
            data-cy="bookmarkBtn"
        >
            <svg class="size-3 sm:size-4 small-group:sm:size-3">
                <use data-bookmark-target="icon" href="/svg/icons/bookmark.svg#bookmark"></use>
            </svg>
        </button>
    </form>

    


</turbo-frame>
        </div>
        



    <header
        class="
            max-h-[74px]
            min-h-[74px]
            sm:max-h-none
            relative
            w-full
            overflow-hidden
            sm:max-w-64
            sm:small-group:w-full
            sm:small-group:max-h-[74px]
            sm:small-group:max-w-none
        ">

            <div
                class="
                    relative
                    h-[74px]
                    sm:h-full
                    bg-blue-100
                    text-blue-200
                ">
                <svg class="absolute
                        -left-[110px] sm:-left-[120px]
                        -bottom-[100px] sm:bottom-[20px] sm:small-group:-bottom-[95px]
                        w-[617px] sm:w-[547px]
                        h-[301px] sm:h-[267px]
                        opacity-20 -rotate-[160deg]">
                    <use href="/svg/illustrations/chevron.svg#chevron"></use>
                </svg>
            </div>

        <div class="
                z-[2]
                absolute
                sm:top-auto
                inset-4
                sm:inset-6
                flex
                justify-center
                items-center
                w-[5.75rem]
                h-11
                rounded-xs
                bg-white
                sm:small-group:inset-4"
        >
                <img
                    loading="lazy"
                    src="https://f.hellowork.com/img/entreprises/190084.png"
                    alt="Klanik recrutement"
                    title="Recrutement Klanik"
                    class="
                        w-full
                        h-full
                        px-3
                        py-2
                        object-contain"
                >
        </div>
    </header>

        



<div
    
            data-controller="intersect"
            data-analytics-values-param="{&quot;event&quot;:&quot;generic_product&quot;,&quot;event_name&quot;:&quot;product.display&quot;,&quot;product_data&quot;:[{&quot;product_id&quot;:&quot;84206121&quot;,&quot;product_response_type&quot;:&quot;ATS&quot;,&quot;product_list&quot;:&quot;LO-Suggest-Detail&quot;,&quot;product_position&quot;:1,&quot;product_category&quot;:&quot;1&quot;,&quot;product_status&quot;:&quot;NotDefined&quot;}]}"
            data-action="intersect:enter->analytics#push:once"
            class="flex flex-col justify-between size-full p-4 sm:p-6 sm:small-group:p-4 min-w-0"
    data-cy="serpCard"
>
    <div class="flex flex-col">
        <header class="w-11/12">
                <div>
                        <a 
                            data-analytics-values-param="{&quot;event&quot;:&quot;generic_product&quot;,&quot;event_name&quot;:&quot;productClick&quot;,&quot;product_data&quot;:[{&quot;product_id&quot;:&quot;84206121&quot;,&quot;product_response_type&quot;:&quot;ATS&quot;,&quot;product_list&quot;:&quot;LO-Suggest-Detail&quot;,&quot;product_position&quot;:1}],&quot;app_version_array&quot;:{&quot;one-time-password-V1.0&quot;:&quot;Version_B&quot;}}"
                            data-action="analytics#push"
                            data-turbo="false"
                            href="/fr-fr/emplois/84206121.html"
                            title="D&#xE9;veloppeur Confirm&#xE9; Backend GO H/F - Klanik"
                            class="no-underline outline-none focus-within:underline forwarder inline"
                            data-cy="offerTitle"
                                                        aria-label="Voir offre de D&#xE9;veloppeur Confirm&#xE9; Backend GO H/F &#xE0; Lille - 59, chez Klanik, pour un CDI, en temps plein, T&#xE9;l&#xE9;travail partiel"
                        >
                            


<h3 class="inline">
    <p class="typo-l sm:small-group:typo-l sm:typo-xl">D&#xE9;veloppeur Confirm&#xE9; Backend GO H/F</p>
        <p class="typo-s inline">Klanik</p>
</h3>

                        </a>

                </div>

        </header>
            <div class="mt-6 flex flex-col gap-3 sm:flex-row sm:small-group:flex-col">
                <div class="flex gap-3 flex-wrap">
                        <div
                            class="readonly tag-secondary-s w-fit border-0"
                            data-cy="localisationCard"
                        >
                            Lille - 59
                        </div>
                        <div
                            class="readonly tag-secondary-s w-fit border-0"
                            data-cy="contractCard"
                        >
                            CDI
                        </div>
                            <div
                                class="readonly tag-secondary-s border-0 w-fit"
                                data-cy="contractTag"
                            >
                                T&#xE9;l&#xE9;travail partiel
                            </div>
                </div>
            </div>

    </div>


            <div class="mt-6 sm:mt-3 flex sm:flex-row-reverse items-end justify-between sm:small-group:mt-6 sm:small-group:flex-row flex-wrap">
                    <span class="btn-outline-m group-hocus-within:bg-black group-hocus-within:border-transparent group-hocus-within:text-white group-hocus-within:opacity-100">Voir l’offre</span>
                    <div class="typo-s text-grey-500 pl-1 pt-1">il y a 6 jours</div>
            </div>
</div>
    </div>
</div>
        </div>
        <div class="small-group col-span-4 sm:col-span-6 xl:col-span-4">
            
<div
    class="group h-full overflow-hidden bg-white rounded-sm border border-grey-100 hover:border-grey-500 focus-within:outline focus-within:transition-none transition-border-color duration-100"
>
    <div class="h-full relative flex flex-col sm:flex-row sm:small-group:flex-col ">
        <div class="absolute right-6 sm:small-group:right-4 top-6 sm:small-group:top-[21px] z-[2] flex gap-4 sm:gap-0">
            

<turbo-frame id="bookmark-frame-card77669119">
    <form 
        action="/fr-fr/candidat/tooglebookmark"
        method="GET"
        data-controller="bookmark"
        data-bookmark-offer-id-value="77669119"
        data-bookmark-bookmarked-icon-value="/svg/icons/bookmark.svg#bookmark-active"
        data-bookmark-unbookmarked-icon-value="/svg/icons/bookmark.svg#bookmark"
        data-bookmark-bookmarked-class="text-pink-500"
        data-fetch-account-data-event-param="turbo:submit-end"
        data-action="fetch-account-data#refreshAfterNextTurboEvent"
    >
        <input type="hidden" name="idOffre" value="77669119">
        <input type="hidden" name="turboFrameId" value="bookmark-frame-card77669119">
        <input type="hidden" name="isFromToolbar" value="False"/>
        <button 
            class="btn-icon-no-outline-m sm:btn-icon-no-outline-l small-group:sm:btn-icon-no-outline-m"
            data-bookmark-target="button"
            data-analytics-values-param='{"event": "generic", "EventName" : "bookmark_add", "EventLibelle": "" }'
            data-action="analytics#push:stop"
            data-cy="bookmarkBtn"
        >
            <svg class="size-3 sm:size-4 small-group:sm:size-3">
                <use data-bookmark-target="icon" href="/svg/icons/bookmark.svg#bookmark"></use>
            </svg>
        </button>
    </form>

    


</turbo-frame>
        </div>
        



    <header
        class="
            max-h-[74px]
            min-h-[74px]
            sm:max-h-none
            relative
            w-full
            overflow-hidden
            sm:max-w-64
            sm:small-group:w-full
            sm:small-group:max-h-[74px]
            sm:small-group:max-w-none
        ">

            <div
                class="
                    relative
                    h-[74px]
                    sm:h-full
                    bg-pumpkin-100
                    text-pumpkin-200
                ">
                <svg class="absolute
                        -left-[110px] sm:-left-[120px]
                        -bottom-[100px] sm:bottom-[20px] sm:small-group:-bottom-[95px]
                        w-[617px] sm:w-[547px]
                        h-[301px] sm:h-[267px]
                        opacity-20 -rotate-[15deg]">
                    <use href="/svg/illustrations/chevron.svg#chevron"></use>
                </svg>
            </div>

        <div class="
                z-[2]
                absolute
                sm:top-auto
                inset-4
                sm:inset-6
                flex
                justify-center
                items-center
                w-[5.75rem]
                h-11
                rounded-xs
                bg-white
                sm:small-group:inset-4"
        >
                <img
                    loading="lazy"
                    src="https://f.hellowork.com/img/entreprises/210679.png"
                    alt="MCA Groupe recrutement"
                    title="Recrutement MCA Groupe"
                    class="
                        w-full
                        h-full
                        px-3
                        py-2
                        object-contain"
                >
        </div>
    </header>

        



<div
    
            data-controller="intersect"
            data-analytics-values-param="{&quot;event&quot;:&quot;generic_product&quot;,&quot;event_name&quot;:&quot;product.display&quot;,&quot;product_data&quot;:[{&quot;product_id&quot;:&quot;77669119&quot;,&quot;product_response_type&quot;:&quot;Smartapply_v2&quot;,&quot;product_list&quot;:&quot;LO-Suggest-Detail&quot;,&quot;product_position&quot;:2,&quot;product_category&quot;:&quot;1&quot;,&quot;product_status&quot;:&quot;NotDefined&quot;}]}"
            data-action="intersect:enter->analytics#push:once"
            class="flex flex-col justify-between size-full p-4 sm:p-6 sm:small-group:p-4 min-w-0"
    data-cy="serpCard"
>
    <div class="flex flex-col">
        <header class="w-11/12">
                <div>
                        <a 
                            data-analytics-values-param="{&quot;event&quot;:&quot;generic_product&quot;,&quot;event_name&quot;:&quot;productClick&quot;,&quot;product_data&quot;:[{&quot;product_id&quot;:&quot;77669119&quot;,&quot;product_response_type&quot;:&quot;Smartapply_v2&quot;,&quot;product_list&quot;:&quot;LO-Suggest-Detail&quot;,&quot;product_position&quot;:2}],&quot;app_version_array&quot;:{&quot;one-time-password-V1.0&quot;:&quot;Version_B&quot;}}"
                            data-action="analytics#push"
                            data-turbo="false"
                            href="/fr-fr/emplois/77669119.html"
                            title="Analyste D&#xE9;veloppeur COBOL H/F - MCA Groupe"
                            class="no-underline outline-none focus-within:underline forwarder inline"
                            data-cy="offerTitle"
                                                        aria-label="Voir offre de Analyste D&#xE9;veloppeur COBOL H/F &#xE0; Lille - 59, chez MCA Groupe, pour un CDI, en temps plein"
                        >
                            


<h3 class="inline">
    <p class="typo-l sm:small-group:typo-l sm:typo-xl">Analyste D&#xE9;veloppeur COBOL H/F</p>
        <p class="typo-s inline">MCA Groupe</p>
</h3>

                        </a>

                </div>

        </header>
            <div class="mt-6 flex flex-col gap-3 sm:flex-row sm:small-group:flex-col">
                <div class="flex gap-3 flex-wrap">
                        <div
                            class="readonly tag-secondary-s w-fit border-0"
                            data-cy="localisationCard"
                        >
                            Lille - 59
                        </div>
                        <div
                            class="readonly tag-secondary-s w-fit border-0"
                            data-cy="contractCard"
                        >
                            CDI
                        </div>
                </div>
            </div>

    </div>


            <div class="mt-6 sm:mt-3 flex sm:flex-row-reverse items-end justify-between sm:small-group:mt-6 sm:small-group:flex-row flex-wrap">
                    <span class="btn-outline-m group-hocus-within:bg-black group-hocus-within:border-transparent group-hocus-within:text-white group-hocus-within:opacity-100">Voir l’offre</span>
                    <div class="typo-s text-grey-500 pl-1 pt-1">il y a 5 jours</div>
            </div>
</div>
    </div>
</div>
        </div>
        <div class="small-group col-span-4 sm:col-span-6 xl:col-span-4">
            
<div
    class="group h-full overflow-hidden bg-white rounded-sm border border-grey-100 hover:border-grey-500 focus-within:outline focus-within:transition-none transition-border-color duration-100"
>
    <div class="h-full relative flex flex-col sm:flex-row sm:small-group:flex-col ">
        <div class="absolute right-6 sm:small-group:right-4 top-6 sm:small-group:top-[21px] z-[2] flex gap-4 sm:gap-0">
            

<turbo-frame id="bookmark-frame-card78551624">
    <form 
        action="/fr-fr/candidat/tooglebookmark"
        method="GET"
        data-controller="bookmark"
        data-bookmark-offer-id-value="78551624"
        data-bookmark-bookmarked-icon-value="/svg/icons/bookmark.svg#bookmark-active"
        data-bookmark-unbookmarked-icon-value="/svg/icons/bookmark.svg#bookmark"
        data-bookmark-bookmarked-class="text-pink-500"
        data-fetch-account-data-event-param="turbo:submit-end"
        data-action="fetch-account-data#refreshAfterNextTurboEvent"
    >
        <input type="hidden" name="idOffre" value="78551624">
        <input type="hidden" name="turboFrameId" value="bookmark-frame-card78551624">
        <input type="hidden" name="isFromToolbar" value="False"/>
        <button 
            class="btn-icon-no-outline-m sm:btn-icon-no-outline-l small-group:sm:btn-icon-no-outline-m"
            data-bookmark-target="button"
            data-analytics-values-param='{"event": "generic", "EventName" : "bookmark_add", "EventLibelle": "" }'
            data-action="analytics#push:stop"
            data-cy="bookmarkBtn"
        >
            <svg class="size-3 sm:size-4 small-group:sm:size-3">
                <use data-bookmark-target="icon" href="/svg/icons/bookmark.svg#bookmark"></use>
            </svg>
        </button>
    </form>

    


</turbo-frame>
        </div>
        



    <header
        class="
            max-h-[74px]
            min-h-[74px]
            sm:max-h-none
            relative
            w-full
            overflow-hidden
            sm:max-w-64
            sm:small-group:w-full
            sm:small-group:max-h-[74px]
            sm:small-group:max-w-none
        ">

            <div class="absolute inset-0 bg-black/5 z-[1]"></div>
            <img
                class="
                    size-full
                    object-cover
                    object-center
                "
                src="https://f.hellowork.com/media/companypage/202014/350_233/9409_63899315366049572866604103.jpg"
                loading="lazy"
                alt="Sergic recrutement">

        <div class="
                z-[2]
                absolute
                sm:top-auto
                inset-4
                sm:inset-6
                flex
                justify-center
                items-center
                w-[5.75rem]
                h-11
                rounded-xs
                bg-white
                sm:small-group:inset-4"
        >
                <img
                    loading="lazy"
                    src="https://f.hellowork.com/img/entreprises/202014.png"
                    alt="Sergic recrutement"
                    title="Recrutement Sergic"
                    class="
                        w-full
                        h-full
                        px-3
                        py-2
                        object-contain"
                >
        </div>
    </header>

        



<div
    
            data-controller="intersect"
            data-analytics-values-param="{&quot;event&quot;:&quot;generic_product&quot;,&quot;event_name&quot;:&quot;product.display&quot;,&quot;product_data&quot;:[{&quot;product_id&quot;:&quot;78551624&quot;,&quot;product_response_type&quot;:&quot;ATS&quot;,&quot;product_list&quot;:&quot;LO-Suggest-Detail&quot;,&quot;product_position&quot;:3,&quot;product_category&quot;:&quot;1&quot;,&quot;product_status&quot;:&quot;NotDefined&quot;}]}"
            data-action="intersect:enter->analytics#push:once"
            class="flex flex-col justify-between size-full p-4 sm:p-6 sm:small-group:p-4 min-w-0"
    data-cy="serpCard"
>
    <div class="flex flex-col">
        <header class="w-11/12">
                <div>
                        <a 
                            data-analytics-values-param="{&quot;event&quot;:&quot;generic_product&quot;,&quot;event_name&quot;:&quot;productClick&quot;,&quot;product_data&quot;:[{&quot;product_id&quot;:&quot;78551624&quot;,&quot;product_response_type&quot;:&quot;ATS&quot;,&quot;product_list&quot;:&quot;LO-Suggest-Detail&quot;,&quot;product_position&quot;:3}],&quot;app_version_array&quot;:{&quot;one-time-password-V1.0&quot;:&quot;Version_B&quot;}}"
                            data-action="analytics#push"
                            data-turbo="false"
                            href="/fr-fr/emplois/78551624.html"
                            title="DevOps H/F - Sergic"
                            class="no-underline outline-none focus-within:underline forwarder inline"
                            data-cy="offerTitle"
                                                        aria-label="Voir offre de DevOps H/F &#xE0; Wasquehal - 59, chez Sergic, pour un CDI, avec un salaire de 40&#x202F;000 - 50&#x202F;000 &#x20AC; / an, en temps plein, T&#xE9;l&#xE9;travail partiel"
                        >
                            


<h3 class="inline">
    <p class="typo-l sm:small-group:typo-l sm:typo-xl">DevOps H/F</p>
        <p class="typo-s inline">Sergic</p>
</h3>

                        </a>

                </div>

        </header>
            <div class="mt-6 flex flex-col gap-3 sm:flex-row sm:small-group:flex-col">
                <div class="flex gap-3 flex-wrap">
                        <div
                            class="readonly tag-secondary-s w-fit border-0"
                            data-cy="localisationCard"
                        >
                            Wasquehal - 59
                        </div>
                        <div
                            class="readonly tag-secondary-s w-fit border-0"
                            data-cy="contractCard"
                        >
                            CDI
                        </div>
                        <div class="readonly tag-secondary-s typo-s-bold w-fit border-0">40&#x202F;000 - 50&#x202F;000 &#x20AC; / an</div>
                            <div
                                class="readonly tag-secondary-s border-0 w-fit"
                                data-cy="contractTag"
                            >
                                T&#xE9;l&#xE9;travail partiel
                            </div>
                </div>
            </div>

    </div>


            <div class="mt-6 sm:mt-3 flex sm:flex-row-reverse items-end justify-between sm:small-group:mt-6 sm:small-group:flex-row flex-wrap">
                    <span class="btn-outline-m group-hocus-within:bg-black group-hocus-within:border-transparent group-hocus-within:text-white group-hocus-within:opacity-100">Voir l’offre</span>
                    <div class="typo-s text-grey-500 pl-1 pt-1">il y a 29 jours</div>
            </div>
</div>
    </div>
</div>
        </div>

        </div>

        <span data-controller="atc"
              data-atc-l-value="xuggcf://jjj=pt=uryybjbex=pt=pbz/se-se/rzcybv/erpurepur=pt=ugzy?x=Q%p3%n9irybccrhe&#x2B;vasbezngvdhr&amp;x_nhgbpbzcyrgr=uggc%3n%2s%2sjjj=pt=ew=pt=pbz%2sPbzzha%2sCbfg%2sQrirybccrhe&amp;y=Yvyyr&#x2B;59000&amp;y_nhgbpbzcyrgr=uggc%3n%2s%2sjjj=pt=ew=pt=pbz%2spbzzha%2sybpnyvgr%2spbzzhar%2s59350f"
              data-atc-t-value="x_oynaxf"
              data-analytics-values-param='{
                    "event": "generic",
                    "EventName" : "cta_click",
                    "cta" : "bouton-offres",
                    "wording" : "Voir plus doffres"
                }'
              data-action="click->analytics#push"
              class="w-fit btn-primary-l">
            Voir plus d'offres
        </span>
</div>

    <div id="similar-searches" class="layout-grid">
        <div class="layout-inner-grid">
            <div class="col-span-full mb-16 lg:mb-10 p-8 rounded-sm bg-blue-50"
                 data-controller="expandable-section toggle"
                 data-expandable-section-max-displayed-items-desktop-value="15"
                 data-expandable-section-max-displayed-items-mobile-value="7"
                 data-expandable-section-hidden-class="hidden"
                 data-toggle-toggled-class="hidden"
                 data-toggle-toggled-additional-class="hidden">
                <h2 class="typo-xl">Recherches similaires</h2>
                <ul class="mt-6 grid space-y-2 sm:space-y-0 sm:gap-x-8 sm:gap-y-3 sm:grid-cols-2 lg:grid-cols-3">
                        <li data-expandable-section-target="elementToHide"
                            data-toggle-target="toToggle">
                            <a class="typo-m link-text my-1 block" href="/fr-fr/emploi/metier_developpeur.html" title="Offres d&#x27;emploi D&#xE9;veloppeur" data-turbo="false">Job D&#xE9;veloppeur</a>
                        </li>
                        <li data-expandable-section-target="elementToHide"
                            data-toggle-target="toToggle">
                            <a class="typo-m link-text my-1 block" href="/fr-fr/emploi/domaine_informatique.html" title="Offres d&#x27;emploi Informatique" data-turbo="false">Job Informatique</a>
                        </li>
                        <li data-expandable-section-target="elementToHide"
                            data-toggle-target="toToggle">
                            <a class="typo-m link-text my-1 block" href="/fr-fr/emploi/ville_dunkerque-59240.html" title="Offres d&#x27;emploi Dunkerque" data-turbo="false">Job Dunkerque</a>
                        </li>
                        <li data-expandable-section-target="elementToHide"
                            data-toggle-target="toToggle">
                            <a class="typo-m link-text my-1 block" href="/fr-fr/emploi/ville_valenciennes-59300.html" title="Offres d&#x27;emploi Valenciennes" data-turbo="false">Job Valenciennes</a>
                        </li>
                        <li data-expandable-section-target="elementToHide"
                            data-toggle-target="toToggle">
                            <a class="typo-m link-text my-1 block" href="/fr-fr/emploi/ville_cambrai-59400.html" title="Offres d&#x27;emploi Cambrai" data-turbo="false">Job Cambrai</a>
                        </li>
                        <li data-expandable-section-target="elementToHide"
                            data-toggle-target="toToggle">
                            <a class="typo-m link-text my-1 block" href="/fr-fr/emploi/ville_douai-59500.html" title="Offres d&#x27;emploi Douai" data-turbo="false">Job Douai</a>
                        </li>
                        <li data-expandable-section-target="elementToHide"
                            data-toggle-target="toToggle">
                            <a class="typo-m link-text my-1 block" href="/fr-fr/emploi/ville_maubeuge-59600.html" title="Offres d&#x27;emploi Maubeuge" data-turbo="false">Job Maubeuge</a>
                        </li>
                        <li data-expandable-section-target="elementToHide"
                            data-toggle-target="toToggle">
                            <a class="typo-m link-text my-1 block" href="/fr-fr/emploi/ville_hazebrouck-59190.html" title="Offres d&#x27;emploi Hazebrouck" data-turbo="false">Job Hazebrouck</a>
                        </li>
                        <li data-expandable-section-target="elementToHide"
                            data-toggle-target="toToggle">
                            <a class="typo-m link-text my-1 block" href="/fr-fr/emploi/ville_tourcoing-59200.html" title="Offres d&#x27;emploi Tourcoing" data-turbo="false">Job Tourcoing</a>
                        </li>
                        <li data-expandable-section-target="elementToHide"
                            data-toggle-target="toToggle">
                            <a class="typo-m link-text my-1 block" href="/fr-fr/emploi/ville_caudry-59540.html" title="Offres d&#x27;emploi Caudry" data-turbo="false">Job Caudry</a>
                        </li>
                        <li data-expandable-section-target="elementToHide"
                            data-toggle-target="toToggle">
                            <a class="typo-m link-text my-1 block" href="/fr-fr/emploi/ville_saint-amand-les-eaux-59230.html" title="Offres d&#x27;emploi Saint-Amand-les-Eaux" data-turbo="false">Job Saint-Amand-les-Eaux</a>
                        </li>
                        <li data-expandable-section-target="elementToHide"
                            data-toggle-target="toToggle">
                            <a class="typo-m link-text my-1 block" href="/fr-fr/emploi/ville_roubaix-59100.html" title="Offres d&#x27;emploi Roubaix" data-turbo="false">Job Roubaix</a>
                        </li>
                        <li data-expandable-section-target="elementToHide"
                            data-toggle-target="toToggle">
                            <a class="typo-m link-text my-1 block" href="/fr-fr/emploi/metier_technicien-support-informatique.html" title="Offres d&#x27;emploi Technicien support informatique" data-turbo="false">Job Technicien support informatique</a>
                        </li>
                        <li data-expandable-section-target="elementToHide"
                            data-toggle-target="toToggle">
                            <a class="typo-m link-text my-1 block" href="/fr-fr/emploi/metier_charge-projet.html" title="Offres d&#x27;emploi Charg&#xE9; de projet" data-turbo="false">Job Charg&#xE9; de projet</a>
                        </li>
                        <li data-expandable-section-target="elementToHide"
                            data-toggle-target="toToggle">
                            <a class="typo-m link-text my-1 block" href="/fr-fr/emploi/metier_chef-de-projet-informatique.html" title="Offres d&#x27;emploi Chef de projet informatique" data-turbo="false">Job Chef de projet informatique</a>
                        </li>
                        <li data-expandable-section-target="elementToHide"
                            data-toggle-target="toToggle">
                            <a class="typo-m link-text my-1 block" href="/fr-fr/emploi/metier_chef-de-projet-informatique.html" title="Offres d&#x27;emploi Chef de projet informatique" data-turbo="false">Job Chef de projet informatique</a>
                        </li>
                        <li data-expandable-section-target="elementToHide"
                            data-toggle-target="toToggle">
                            <a class="typo-m link-text my-1 block" href="/fr-fr/emploi/metier_tech-lead.html" title="Offres d&#x27;emploi Tech lead" data-turbo="false">Job Tech lead</a>
                        </li>
                        <li data-expandable-section-target="elementToHide"
                            data-toggle-target="toToggle">
                            <a class="typo-m link-text my-1 block" href="/fr-fr/entreprise/domaine_informatique.html" title="Informatique Entreprises" data-turbo="false">Entreprises Informatique</a>
                        </li>
                        <li data-expandable-section-target="elementToHide"
                            data-toggle-target="toToggle">
                            <a class="typo-m link-text my-1 block" href="/fr-fr/entreprise/metier_developpeur.html" title="D&#xE9;veloppeur Entreprises" data-turbo="false">Entreprises D&#xE9;veloppeur</a>
                        </li>
                        <li data-expandable-section-target="elementToHide"
                            data-toggle-target="toToggle">
                            <a class="typo-m link-text my-1 block" href="/fr-fr/entreprise/ville_lille-59000.html" title="Lille Entreprises" data-turbo="false">Entreprises Lille</a>
                        </li>
                        <li data-expandable-section-target="elementToHide"
                            data-toggle-target="toToggle">
                            <a class="typo-m link-text my-1 block" href="/fr-fr/emploi/mot-cle_automatisme.html" title="Offres d&#x27;emploi Automatisme" data-turbo="false">Job Automatisme</a>
                        </li>
                        <li data-expandable-section-target="elementToHide"
                            data-toggle-target="toToggle">
                            <a class="typo-m link-text my-1 block" href="/fr-fr/emploi/mot-cle_junior.html" title="Offres d&#x27;emploi Junior" data-turbo="false">Job Junior</a>
                        </li>
                        <li data-expandable-section-target="elementToHide"
                            data-toggle-target="toToggle">
                            <a class="typo-m link-text my-1 block" href="/fr-fr/emploi/mot-cle_responsable.html" title="Offres d&#x27;emploi Responsable" data-turbo="false">Job Responsable</a>
                        </li>
                        <li data-expandable-section-target="elementToHide"
                            data-toggle-target="toToggle">
                            <a class="typo-m link-text my-1 block" href="/fr-fr/emploi/mot-cle_pharmaceutique.html" title="Offres d&#x27;emploi Pharmaceutique" data-turbo="false">Job Pharmaceutique</a>
                        </li>
                        <li data-expandable-section-target="elementToHide"
                            data-toggle-target="toToggle">
                            <a class="typo-m link-text my-1 block" href="/fr-fr/emploi/mot-cle_developpement.html" title="Offres d&#x27;emploi D&#xE9;veloppement" data-turbo="false">Job D&#xE9;veloppement</a>
                        </li>
                        <li data-expandable-section-target="elementToHide"
                            data-toggle-target="toToggle">
                            <a class="typo-m link-text my-1 block" href="/fr-fr/emploi/mot-cle_cdi-ville_lille-59000.html" title="Offres d&#x27;emploi CDI Lille" data-turbo="false">Job CDI Lille</a>
                        </li>
                        <li data-expandable-section-target="elementToHide"
                            data-toggle-target="toToggle">
                            <a class="typo-m link-text my-1 block" href="/fr-fr/emploi/mot-cle_stable-ville_lille-59000.html" title="Offres d&#x27;emploi Stable Lille" data-turbo="false">Job Stable Lille</a>
                        </li>
                        <li data-expandable-section-target="elementToHide"
                            data-toggle-target="toToggle">
                            <a class="typo-m link-text my-1 block" href="/fr-fr/emploi/mot-cle_junior-ville_lille-59000.html" title="Offres d&#x27;emploi Junior Lille" data-turbo="false">Job Junior Lille</a>
                        </li>
                        <li data-expandable-section-target="elementToHide"
                            data-toggle-target="toToggle">
                            <a class="typo-m link-text my-1 block" href="/fr-fr/emploi/mot-cle_developpement-ville_lille-59000.html" title="Offres d&#x27;emploi D&#xE9;veloppement Lille" data-turbo="false">Job D&#xE9;veloppement Lille</a>
                        </li>
                        <li data-expandable-section-target="elementToHide"
                            data-toggle-target="toToggle">
                            <a class="typo-m link-text my-1 block" href="/fr-fr/emploi/mot-cle_responsable-ville_lille-59000.html" title="Offres d&#x27;emploi Responsable Lille" data-turbo="false">Job Responsable Lille</a>
                        </li>
                </ul>
                <button class="hidden typo-s block mt-4 w-fit"
                        aria-label="Voir plus de recherches similaires"
                        data-expandable-section-target="buttonToDisplay"
                        data-toggle-target="toToggleAdditional"
                        data-action="click->toggle#remove click->toggle#addAdditional">
                    Voir plus
                    <svg class="w-2 h-4 inline" aria-hidden="true">
                        <use href="/svg/icons/arrow.svg#down"></use>
                    </svg>
                </button>
            </div>
        </div>
    </div>




    <script type="text/javascript">
        dataLayer.push({ 'event': 'view_item', 'items': [{ 'id': '67170737', 'location_id': 'Lille - 59', 'google_business_vertical': 'jobs' }] });
    </script>


    <input type="hidden" name="JobsUri" form="formOneTap" value="http://www.rj.com/Commun/Post/Developpeur">
    <input type="hidden" name="JobsUri" form="formCustomOneTap" value="http://www.rj.com/Commun/Post/Developpeur">
    <input type="hidden" name="LocationsUri" form="formOneTap" value="http://www.rj.com/commun/localite/commune/59350">
    <input type="hidden" name="LocationsUri" form="formCustomOneTap" value="http://www.rj.com/commun/localite/commune/59350">
        <input type="hidden" name="Contracts" form="formOneTap" value="CDI">
        <input type="hidden" name="Contracts" form="formCustomOneTap" value="CDI">





<turbo-frame id="service-adaptation" src=""
             data-controller="service-adaptation"
             data-service-adaptation-url-value="/fr-fr/country/getpopinframeview"
             data-service-adaptation-hide-message-class="hidden">
</turbo-frame>


<div 
    id="breadcrumb"
    class="layout-grid"
>

    <!-- delete asSection when serp is done and use layout-grid-->

	<nav class="asSection pt-12 sm:pt-20">
		<ol class="flex flex-wrap gap-x-2 text-grey-500 text-sm">
					<li class="py-1 first:before:content-[''] before:content-['>']">
						<a href="https://www.hellowork.com/fr-fr/" title="Accueil" class="link-text">
							Accueil
						</a>
					</li>
					<li class="py-1 first:before:content-[''] before:content-['>']">
						<a href="https://www.hellowork.com/fr-fr/emploi.html" title="Job" class="link-text">
							Job
						</a>
					</li>
					<li class="py-1 first:before:content-[''] before:content-['>']">
						<a href="https://www.hellowork.com/fr-fr/emploi/ville_lille-59000.html" title="Job Lille" class="link-text">
							Job Lille
						</a>
					</li>
					<li class="py-1 first:before:content-[''] before:content-['>']">
						<a href="https://www.hellowork.com/fr-fr/emploi/domaine_informatique-ville_lille-59000.html" title="Job Informatique Lille" class="link-text">
							Job Informatique Lille
						</a>
					</li>
					<li class="py-1 first:before:content-[''] before:content-['>']">
						<a href="https://www.hellowork.com/fr-fr/emploi/metier_developpeur-ville_lille-59000.html" title="Job D&#xE9;veloppeur Lille" class="link-text">
							Job D&#xE9;veloppeur Lille
						</a>
					</li>
					<li class="py-1 before:content-['>']">
						<span class="font-semibold text-black">
                        	D&#xE9;veloppeur en Automatisme et Supervision Industrielle H/F
                    	</span>
					</li>
		</ol>
	</nav>

</div>

<div class="mt-10">
    



<footer class="sm:layout-grid 2xl:mx-auto typo-s 2xl:mb-20 sm:mb-6 m-0">
    <div class="bg-grey-50 sm:rounded-sm !col-[full] grid grid-cols-subgrid py-6 xl:py-12
           sm:py-14 px-4 sm:px-0">
        <div class="layout-inner-grid sm:col-[main]">
            <div class="xl:col-span-3 col-span-5 sm:col-start-2 xl:col-start-1">      
                <span class="typo-l">
                    Les sites
                </span>
                <ul
                    class="flex flex-col gap-6 mt-4 mb-6 sm:mt-6 sm:mb-10"
                >
                    <li><a class="link-text" href="https://hellocv.com/" target="_blank" rel="noopener">HelloCV</a></li>
                    <li><a class="link-text" href="https://www.helloworkplace.fr/" target="_blank" rel="noopener">Helloworkplace</a></li>
                    <li><a class="link-text" href="https://www.blogdumoderateur.com/" target="_blank" rel="noopener">BDM</a></li>
                    <li><a class="link-text" href="https://www.jobijoba.com/fr/" target="_blank" rel="noopener">Jobijoba</a></li>
                    <li>
                        <span 
                            class="atc-text" 
                            data-controller="atc"
                            data-atc-l-value="xuggcf://jjj=pt=znsbezngvba=pt=se/f" 
                            data-atc-t-value="x_oynaxf"
                        >
                            Maformation
                        </span>
                    </li>
                    <li><a class="link-text" href="https://diplomeo.com/" target="_blank" rel="noopener">Diplomeo</a></li>
                </ul>
            </div>
            <div class="xl:col-span-3 col-span-5 sm:col-start-7 xl:col-start-4">
                <span class="typo-l">L&#x27;emploi</span>
                <ul
                    class="flex flex-col gap-6 mt-4 mb-6 sm:mt-6 sm:mb-10"
                >
                        <li>
                            <span 
                                class="atc-text" 
                                data-controller="atc"
                                data-atc-l-value="x/se-se/rzcybv/vaqrk-pngrtbevr=pt=ugzyf"
                            >
                                Offres d&#x27;emploi par m&#xE9;tier
                            </span>
                        </li>
                        <li>
                            <span 
                                class="atc-text" 
                                data-controller="atc"
                                data-atc-l-value="x/se-se/rzcybv/vaqrk-ybpnyvgr=pt=ugzyf"
                            >
                                Offres d&#x27;emploi par ville
                            </span>
                        </li>
                        <li>
                            <span 
                                class="atc-text" 
                                data-controller="atc"
                                data-atc-l-value="x/se-se/ragercevfr=pt=ugzyf"
                            >
                                Offres d&#x27;emploi par entreprise
                            </span>
                        </li>
                        <li>
                            <span 
                                class="atc-text" 
                                data-controller="atc"
                                data-atc-l-value="x/se-se/rzcybv/vaqrk-zbg-pyr=pt=ugzyf"
                            >
                                Offres d&#x27;emploi par mots cl&#xE9;s
                            </span>
                        </li>
                </ul>
            </div>
            <div class="xl:col-span-3 col-span-5 sm:col-start-2 xl:col-start-7">
                <span class="typo-l">
                    L'entreprise
                </span>
                <ul
                    class="flex flex-col gap-6 mt-4 mb-6 sm:mt-6 sm:mb-10"
                >
                    <li>
                        <span 
                            class="atc-text" 
                            data-controller="atc"
                            data-atc-l-value="xuggcf://jjj=pt=uryybjbex-tebhc=pt=pbzf" 
                            data-atc-t-value="x_oynaxf"
                        >
                            Qui sommes-nous&nbsp;?
                        </span>
                    </li>
                    <li>
                        <span 
                            class="atc-text" 
                            data-controller="atc"
                            data-atc-l-value="xuggcf://pneevrerf=pt=uryybjbex-tebhc=pt=pbzf" 
                            data-atc-t-value="x_oynaxf"
                        >
                            On recrute
                        </span>
                    </li>
                    <li>
                        <span 
                            class="atc-text" 
                            data-controller="atc"
                            data-atc-l-value="xuggcf://ohqqv=pt=uryybjbex=pt=pbzf"
                        >
                            Accès client
                        </span>
                    </li>
                </ul>
            </div>
            <div class="xl:col-span-3 col-span-5 sm:col-start-7 xl:col-start-10">
                <span class="typo-l">
                    Les apps
                </span>
                <div 
                    class="flex flex-wrap items-left flex-row sm:flex-col mt-4 sm:mt-6 mb-6 sm:mb-10 gap-6 sm:gap-4 sm:w-36 text-white"
                >
                        <span 
                            data-controller="atc"
                            data-atc-l-value="xuggcf://cynl=pt=tbbtyr=pt=pbz/fgber/nccf/qrgnvyf?vq=pbz=pt=ertvbafwbo=pt=naqebvqf"
                            data-atc-t-value="x_oynaxf"
                        >
                            <svg class="w-36 h-[42px] cursor-pointer rounded-sm"
                                 alt="Application Android (nouvelle fenêtre)">
                                <use href="/svg/icons/playstore-badge.svg#playstore-badge"></use>
                            </svg>
                        </span>
                        <span
                            data-controller="atc"
                            data-atc-l-value="xuggcf://nccf=pt=nccyr=pt=pbz/se/ncc/ertvbafwbo-rzcybv/vq408615037?zg=8f"
                            data-atc-t-value="x_oynaxf"
                        >
                            <svg class="w-[133px] h-[42px] cursor-pointer rounded-sm"
                                 alt="Application iOS (nouvelle fenêtre)">
                                <use href="/svg/icons/apps/appstore-badge.svg#appstore-badge"></use>
                            </svg>
                        </span>
                </div>
            </div>
            <div class="col-span-full sm:col-start-2 xl:col-start-1 flex flex-col gap-4 flex-wrap justify-between">
                <div
                    class="flex flex-col sm:flex-row gap-x-4 gap-y-2"
                >
                    <div>Nous suivre sur :</div>
                    <ul class="flex gap-4" aria-label="Liste de nos réseaux sociaux">
                            <li class="flex">
                                    <span
                                        class="m-auto hocus:text-grey-500 cursor-pointer"
                                        data-controller="atc"
                                        data-atc-l-value="xuggcf://jjj=pt=snprobbx=pt=pbz/uryybjbexpbzf"
                                        data-atc-t-value="x_oynaxf"
                                    >
                                        <svg class="size-4">
                                            <use href="/svg/icons/social-networks/facebook.svg#facebook"></use>
                                        </svg>
                                </span>
                            </li>
                            <li class="flex">
                                    <span
                                        class="m-auto hocus:text-grey-500 cursor-pointer"
                                        data-controller="atc"
                                        data-atc-l-value="xuggcf://jjj=pt=lbhghor=pt=pbz/punaary/HPel7GvA8-qSXDHtlHZLNAGDf"
                                        data-atc-t-value="x_oynaxf"
                                    >
                                        <svg class="size-4">
                                            <use href="/svg/icons/social-networks/youtube.svg#youtube"></use>
                                        </svg>
                                </span>
                            </li>
                            <li class="flex">
                                    <span
                                        class="m-auto hocus:text-grey-500 cursor-pointer"
                                        data-controller="atc"
                                        data-atc-l-value="xuggcf://gjvggre=pt=pbz/uryybjbexf"
                                        data-atc-t-value="x_oynaxf"
                                    >
                                        <svg class="size-4">
                                            <use href="/svg/icons/social-networks/x.svg#x"></use>
                                        </svg>
                                </span>
                            </li>
                            <li class="flex">
                                    <span
                                        class="m-auto hocus:text-grey-500 cursor-pointer"
                                        data-controller="atc"
                                        data-atc-l-value="xuggcf://jjj=pt=gvxgbx=pt=pbz/@uryybjbexpbzf"
                                        data-atc-t-value="x_oynaxf"
                                    >
                                        <svg class="size-4">
                                            <use href="/svg/icons/social-networks/tiktok.svg#tiktok"></use>
                                        </svg>
                                </span>
                            </li>
                            <li class="flex">
                                    <span
                                        class="m-auto hocus:text-grey-500 cursor-pointer"
                                        data-controller="atc"
                                        data-atc-l-value="xuggcf://jjj=pt=vafgntenz=pt=pbz/uryybjbex_/f"
                                        data-atc-t-value="x_oynaxf"
                                    >
                                        <svg class="size-4">
                                            <use href="/svg/icons/social-networks/instagram.svg#instagram"></use>
                                        </svg>
                                </span>
                            </li>
                            <li class="flex">
                                    <span
                                        class="m-auto hocus:text-grey-500 cursor-pointer"
                                        data-controller="atc"
                                        data-atc-l-value="xuggcf://jjj=pt=yvaxrqva=pt=pbz/pbzcnal/uryybjbexpbz/f"
                                        data-atc-t-value="x_oynaxf"
                                    >
                                        <svg class="size-4">
                                            <use href="/svg/icons/social-networks/linkedin.svg#linkedin"></use>
                                        </svg>
                                </span>
                            </li>
                            <li class="flex">
                                    <span
                                        class="m-auto hocus:text-grey-500 cursor-pointer"
                                        data-controller="atc"
                                        data-atc-l-value="xuggcf://cebsvyr=pt=tbbtyr=pt=pbz/pc/Pt0iMl8kZJM5ZKSeL3cef"
                                        data-atc-t-value="x_oynaxf"
                                    >
                                        <svg class="size-4">
                                            <use href="/svg/icons/social-networks/google.svg#google"></use>
                                        </svg>
                                </span>
                            </li>
                            <li class="flex">
                                    <span
                                        class="m-auto hocus:text-grey-500 cursor-pointer"
                                        data-controller="atc"
                                        data-atc-l-value="xuggcf://se=pt=cvagrerfg=pt=pbz/Uryybjbex_/f"
                                        data-atc-t-value="x_oynaxf"
                                    >
                                        <svg class="size-4">
                                            <use href="/svg/icons/social-networks/pinterest.svg#pinterest"></use>
                                        </svg>
                                </span>
                            </li>
                    </ul>
                </div>
                <div class="flex flex-wrap gap-x-2 sm:gap-x-4 gap-y-4">
                        <span 
                            class="atc-text" 
                            data-controller="atc"
                            data-atc-t-value="x_oynaxf"
                            data-atc-l-value="x/se-se/cntr/vasbf-yrtnyrf=pt=ugzyf"
                        >
                            Informations légales
                        </span>
                    <span 
                        class="atc-text" 
                        data-controller="atc"
                        data-atc-t-value="x_oynaxf"
                        data-atc-l-value="xuggcf://jjj=pt=uryybjbex-tebhc=pt=pbz/se/yrtny/pth-uryybjbex/f">
                        CGU
                    </span>
                    <span 
                        class="atc-text"
                        data-controller="atc"
                        data-atc-t-value="x_oynaxf"
                        data-atc-l-value="xuggcf://jjj=pt=uryybjbex-tebhc=pt=pbz/se/yrtny/cqp-uryybjbex/f">
                        Politique de confidentialité
                    </span>
                    <span 
                        class="link-text" 
                        data-hw-cc-btn-toggle-modal
                    >
                        Gérer les traceurs
                    </span>
                    <span
                        class="atc-text"
                        data-controller="atc"
                        data-atc-t-value="x_oynaxf"
                        data-atc-l-value="xuggcf://jjj=pt=uryybjbex-tebhc=pt=pbz/se/yrtny/qrpynengvba-npprffvovyvgr-uryybjbex/f">
                        Accessibilité : non conforme
                    </span>
                    <span 
                        class="atc-text" 
                        data-controller="atc"
                        data-atc-t-value="x_oynaxf"
                        data-atc-l-value="xuggcf://uryybjbex-pnaqvqng=pt=mraqrfx=pt=pbz/up/sef">
                        Aide et contact
                    </span>
                </div>
            </div>
        </div>
    </div>
</footer>
</div>



                    </div>
                    
        
    



<input
    id="coach-visibility"
    type="checkbox"
    hidden
    class="peer"
/>

<div 
    data-controller="toggle update-turbo-src"
    data-toggle-toggled-class="!hidden"
    data-toggle-toggled-additional-class="coach-cta-out"
    data-toggle-target="toToggle toToggleAdditional"
    data-update-turbo-src-turbo-frame-id-value="coach-panel-frame"
    data-action="ab-test:exposed@document->toggle#remove intersect:coachCta:exit@window->toggle#addAdditional:once"
    class="flex lg:flex flex-col items-end gap-2 peer-checked:!hidden fixed bottom-20 right-4 lg:bottom-6 z-40 !hidden"
>
    <button
        type="button"
        data-update-turbo-src-url-param="/ai/agent/job-matcher?offerId=67170737"
        class="btn-outline-purple-m border-[2px] bg-white"
        data-controller="input-checker"
        data-input-checker-input-value="#coach-visibility"
        data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;ai_assistant_launch&quot;,&quot;event_info&quot;:&quot;coach_emploi&quot;,&quot;cta&quot;:&quot;button&quot;,&quot;wording&quot;:&quot;Analyser mon CV&quot;}"
        data-action="click->update-turbo-src#update input-checker#check click->analytics#push"
        aria-controls="coach-panel"
    >
        Analyser mon CV
    </button>

    <button
        type="button"
        data-update-turbo-src-url-param="/ai/agent/offer-summary?offerId=67170737"
        class="btn-outline-purple-m border-[2px] bg-white"
        data-controller="input-checker"
        data-input-checker-input-value="#coach-visibility"
        data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;ai_assistant_launch&quot;,&quot;event_info&quot;:&quot;coach_emploi&quot;,&quot;cta&quot;:&quot;button&quot;,&quot;wording&quot;:&quot;R&#xE9;sumer l&#x27;offre&quot;}"
        data-action="click->update-turbo-src#update input-checker#check click->analytics#push"
        aria-controls="coach-panel"
    >
        Résumer l'offre
    </button>

    <button
        type="button"
        data-update-turbo-src-url-param="/ai/agent/coach?offerId=67170737"
        aria-label="Ouvrir le coach emploi"
        data-controller="input-checker"
        data-input-checker-input-value="#coach-visibility"
        data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;ai_assistant_launch&quot;,&quot;event_info&quot;:&quot;coach_emploi&quot;,&quot;cta&quot;:&quot;icon&quot;}"
        data-action="click->update-turbo-src#update input-checker#check click->analytics#push"
        aria-controls="coach-panel"
    >
        <div class="w-16 h-[52px]" aria-hidden="true">
            
<div class="relative size-full text-purple-500" aria-hidden="true">
    <img
        alt=""
        class="h-full w-4/5 object-contain object-bottom absolute left-0"
        src="/images/ai-agent/coach/sophia.webp"
        loading="lazy"
    />
    <svg class="h-1/5 aspect-square absolute top-0 right-[20%] small-star-animation">
        <use href="/svg/ai-agent/agent-star.svg#agent-star"></use>
    </svg>
    <svg class="h-1/3 aspect-square absolute top-[10%] right-0 big-star-animation">
        <use href="/svg/ai-agent/agent-star.svg#agent-star"></use>
    </svg>
</div>

        </div>
    </button>
</div>
    
<aside class="absolute sm:relative inset-0 hidden peer-checked:!block">
    <div
        id="coach-panel"
        data-controller="coach-error"
        data-action="turbo:before-fetch-response->coach-error#handleResponse"
        class="
            sticky w-full sm:w-[376px] inset-0 h-dvh z-40 overflow-hidden
            sm:border-l sm:border-l-grey-100 bg-black/60 backdrop-blur
        "
    >
        <div
            class="sm:hidden"
            data-controller="intersect"
            data-action="intersect:enter->toggle-on-body#add intersect:exit->toggle-on-body#remove">
        </div>
        <div class="mt-24 sm:mt-0 h-[calc(100%-96px)] sm:h-full rounded-t-sm sm:rounded-t-none bg-white text-pretty">
            <div class="flex flex-col size-full">
                <div class="relative flex-1 flex flex-col overflow-hidden">
                    <header class="flex items-center px-6 py-4 typo-l-bold shrink-0">
                        <div class="w-10 h-8 shrink-0 aspect-square mr-2">
                            
<div class="relative size-full text-purple-500" aria-hidden="true">
    <img
        alt=""
        class="h-full w-4/5 object-contain object-bottom absolute left-0"
        src="/images/ai-agent/coach/sophia.webp"
        loading="lazy"
    />
    <svg class="h-1/5 aspect-square absolute top-0 right-[20%] ">
        <use href="/svg/ai-agent/agent-star.svg#agent-star"></use>
    </svg>
    <svg class="h-1/3 aspect-square absolute top-[10%] right-0 ">
        <use href="/svg/ai-agent/agent-star.svg#agent-star"></use>
    </svg>
</div>

                        </div>
                        Coach Emploi
                        <div class="badge-blue-s ml-2">
                            Bêta
                        </div>
                        <button
                            title="Fermer le coach emploi"
                            data-controller="input-checker"
                            data-input-checker-input-value="#coach-visibility"
                            data-action="input-checker#uncheck"
                            class="ml-auto">
                            <svg class="size-3" aria-hidden="true">
                                <use href="/svg/icons/nav/close.svg#close"></use>
                            </svg>
                        </button>
                    </header>

                    <template data-coach-error-target="template">
                        <div
                            role="alert"
                            aria-live="assertive"
                            tabindex="-1"
                            class="focus:outline-2 focus:outline-offset-2 focus:outline-error-600">
                            <div class="bg-error-50 flex gap-4 items-start p-4 rounded-sm">
                                <div class="bg-error-600 flex items-center justify-center size-6 min-w-6 rounded-full">
                                    <svg aria-hidden="true" class="size-3 text-white">
                                        <use href="/svg/icons/nav/close.svg#close"></use>
                                    </svg>
                                </div>
                                <div class="flex flex-col gap-1.5 min-w-0">
                                    <p class="text-error-600 typo-s-bold">
                                        Nous avons eu un problème, veuillez recharger ou revenir plus tard.
                                    </p>
                                    <button
                                        type="button"
                                        data-action="click->coach-error#reload"
                                        class="text-black typo-s underline self-start">
                                        Recharger
                                    </button>
                                </div>
                            </div>
                        </div>
                    </template>

                    <turbo-frame
                        id="coach-panel-frame"
                        src="/ai/agent/coach?offerId=67170737"
                        loading="lazy"
                        class="flex-1 overflow-y-auto overscroll-contain hidden connected:block">
                        <div class="w-full mt-8">
                            <svg id="loader" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 60 60" xml:space="preserve" class="size-8 mx-auto">
    <circle id="circle1" fill="currentColor" stroke="none" cx="6" cy="30" r="6">
        <animateTransform
            attributeName="transform"
            dur="1s"
            type="translate"
            values="0 15 ; 0 -15; 0 15"
            repeatCount="indefinite"
            begin="0.1"/>
    </circle>
    <circle fill="currentColor" stroke="none" cx="30" cy="30" r="6">
        <animateTransform
            attributeName="transform"
            dur="1s"
            type="translate"
            values="0 10 ; 0 -10; 0 10"
            repeatCount="indefinite"
            begin="0.2"/>
    </circle>
    <circle fill="currentColor" stroke="none" cx="54" cy="30" r="6">
        <animateTransform
            attributeName="transform"
            dur="1s"
            type="translate"
            values="0 5 ; 0 -5; 0 5"
            repeatCount="indefinite"
            begin="0.3"/>
    </circle>
</svg>
                            <span class="sr-only">Chargement du coach emploi...</span>
                        </div>
                    </turbo-frame>
                    <div class="flex-1 overflow-y-auto overscroll-contain flex flex-col items-center justify-center px-6 py-8 text-center connected:hidden">
                        <div class="pl-[22px] mb-4">
                            <div class="w-28 h-[90px]">
                                
<div class="relative size-full text-purple-500" aria-hidden="true">
    <img
        alt=""
        class="h-full w-4/5 object-contain object-bottom absolute left-0"
        src="/images/ai-agent/coach/sophia.webp"
        loading="lazy"
    />
    <svg class="h-1/5 aspect-square absolute top-0 right-[20%] small-star-animation">
        <use href="/svg/ai-agent/agent-star.svg#agent-star"></use>
    </svg>
    <svg class="h-1/3 aspect-square absolute top-[10%] right-0 big-star-animation">
        <use href="/svg/ai-agent/agent-star.svg#agent-star"></use>
    </svg>
</div>

                            </div>
                        </div>
                        <div class="typo-m-bold sm:typo-long-2m-bold mb-8 text-balance text-center">
                            <p class="mb-0">Connectez-vous</p>
                            <p>pour profiter de Coach Emploi</p>
                            <ul class="mt-6 list-none flex flex-wrap justify-center gap-3">
                                <li class="badge-grey-m">
                                    <svg class="size-2 shrink-0" aria-hidden="true">
                                        <use href="/svg/icons/check-bold.svg#check-bold"></use>
                                    </svg>
                                    Analyse de CV
                                </li>
                                <li class="badge-grey-m">
                                    <svg class="size-2 shrink-0" aria-hidden="true">
                                        <use href="/svg/icons/check-bold.svg#check-bold"></use>
                                    </svg>
                                    Résumé d'offre
                                </li>
                                <li class="badge-grey-m">
                                    <svg class="size-2 shrink-0" aria-hidden="true">
                                        <use href="/svg/icons/check-bold.svg#check-bold"></use>
                                    </svg>
                                    Entretien avec un coach virtuel
                                </li>
                            </ul>
                            <p class="mt-3 typo-xs font-normal">… et bien plus !</p>
                        </div>
                        <a
                            data-controller="atc"
                            data-atc-l-value="x/se-se/pnaqvqng/pbaarkvba-vafpevcgvba=pt=ugzy?ergheaHey=%2Sse-se%2Srzcybvf%2S67170737=pt=ugzy#pbaarkvbaf"
                            data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;account_login&quot;,&quot;event_info&quot;:&quot;coach_emploi&quot;,&quot;wording&quot;:&quot;Continuer avec un compte&quot;}"
                            data-action="analytics#push"
                            class="btn-primary-candidacy-l">
                            Continuer avec un compte
                        </a>
                    </div>
                </div>

                <footer class="shrink-0 px-6 py-3 text-center text-grey-600 text-[10px] leading-[14px] hidden connected:block">
                    En dialoguant avec notre assistant IA, vous déclarez avoir pris connaissance de notre
                    <span
                        data-controller="atc"
                        data-atc-l-value="xuggcf://jjj=pt=uryybjbex-tebhc=pt=pbz/se/yrtny/cqp-uryybjbex/f"
                        data-atc-t-value="x_oynaxf"
                        class="atc-underline">
                        politique de confidentialité
                    </span>.
                    Notre assistant IA est en version bêta test et peut faire des erreurs. Pour tout savoir sur le fonctionnement, consultez la
                    <span
                        data-controller="atc"
                        data-atc-l-value="xuggcf://jjj=pt=uryybjbex-tebhc=pt=pbz/se/yrtny/abgvpr-vasbezngvba-uryybjbex-20251120/f"
                        data-atc-t-value="x_oynaxf"
                        class="atc-underline">
                        notice d'information
                    </span>.
                </footer>
            </div>
        </div>
    </div>
</aside>


    
                </div>
          
            <section
                id="turboStreamToastMessage"
                data-display-toast-message-target="turboStreamToastMessage"
                data-content-missing-target="container"
                class="
                    fixed
                    flex
                    flex-col
                    gap-y-4
                    z-50
                    w-full
                    -top-[90px]
                    px-4
                    sm:px-0
                    sm:w-auto
                    sm:top-24
                    sm:-right-[388px]
                    xl:-right-[448px]
                ">
            </section>

                <turbo-frame
                    id="dynamic-toast-messages"
                    src="/fr-fr/toastmessages">
                </turbo-frame>
            
<template data-content-missing-target="template"
          data-display-toast-message-target="errorTemplate">
    <div data-content-missing-target="instance">
        


    <div
    data-controller="removable intersect toggle timer"
    data-toggle-target="toToggle"
    data-intersect-name-value="notification"
    data-timer-timeout-value="5000"
    data-toggle-toggled-class="slidein"
    data-removable-animation-class="slideout"
    data-action="intersect:notification:enter->timer#start:once
    intersect:notification:enter->toggle#add
    timer:timeout->removable#remove
    mouseover->timer#pause
    mouseout->timer#pause"
    role="alert"
    class="rounded-sm
               flex
               items-center
               bg-blackToast
               shadow-toast
               p-4
               gap-4
               w-full
               min-h-[90px]
               sm:min-h-fit
               sm:w-[388px]
               xl:w-[448px]
               toast-scale">

        <svg class="h-7 w-7 flex-shrink-0" aria-hidden="true">
            <use href="/svg/badges/error.svg#error"></use>
        </svg>

        <div class="flex flex-col gap-2 text-white w-full">
                <p class="typo-s-bold">{{title}}</p>

                <div class="typo-s overflow-wrap-anywhere">
                    {{message}}
                </div>

                <span
                class="typo-s-bold atc-underline hover:no-underline"
                data-controller="atc"
                data-atc-l-value="{{link}}"
                >
                    {{linkLabel}}
                </span>
        </div>

        <button data-action="removable#remove" class="block" aria-label="Fermer la notification">
            <svg class="size-3 text-white">
                <use href="/svg/icons/nav/close.svg#close"></use>
            </svg>
        </button>



    </div>

    </div>
</template>

                <div data-controller="screeb"
        data-action="marketingCookiesChanged@document->screeb#updateImport"
        hidden>
    </div>


        </main>

        

        <script data-turbo-suppress-warning src="https://f.hellowork.com/hellowork/ressources/2.57.11/scripts/js/stimulus.js" data-turbo-eval="false" defer></script>
        <script src="https://f.hellowork.com/hellowork/ressources/2.57.11/scripts/js/general.js" defer></script>

        

        
    </body>
</html>

test/fixtures/search.html

<!DOCTYPE html>
<html lang="fr-fr"
    class="scroll-smooth"
    data-controller="fetch-account-data"
    data-fetch-account-data-url-value="/fr-fr/compte/accountdata"
>
<head>
    
<!--
En visualisant le code source vous acceptez les CGU accessibles à l’adresse : https://www.hellowork.comhttps://www.hellowork-group.com/fr/legal/cgu-hellowork/
Notamment l’article 8.2
L’Utilisateur peut uniquement utiliser le Site aux fins d’accéder aux Services, ce exclusivement à des fins privées et non commerciales.
Il est notamment expressément reconnu et accepté par l’Utilisateur que l’utilisation de systèmes automatisés ou de logiciels pour extraire des données du Site, en particulier le Contenu et la CVthèque (« capture de données d’écran » / « screen scraping / web scraping» notamment), à quelques fins que ce soit, commerciales ou non, est strictement interdite, à moins que Hellowork n’ait conclu une convention de licence écrite autorisant expressément l’Utilisateur à extraire une partie des données du Site.
-->


    <meta charset="UTF-8"/>

    <title>Recherche Offres d&#x27;emploi en France | Hellowork</title>

    <script type="text/javascript">
    /* Init du push de piano analytics */
     window._pac = window._pac || {};
      _pac.queueVarName = "_paqpiano";
      var _paqpiano = window._paqpiano || [];
</script>


    <!-- #region Google_Tag_Manager -->
    <!-- Conditionne l'ajout du script en fonction de la navigation turbo -->
    <script>window.dataLayer = window.dataLayer || [];if (!window.dataLayerAlreadyPushed) { window.dataLayer.push({"event":"impressionLoad","categoryPage":"SERP","sujetPage":"Offre","typePage":"LO-Moteur","idOffre":"83042329,84228168,84000048,82946546,77669119,84375713,84025104,79418480,84245951,79418431,76339718,83962460,73395675,84206121,75360092,78970072,83597910,83596489,83925261,76396628,84035838,83786259,82598447,67170737,83962451,83863734,69495710,83445214,83967982,84387452","Domaine":"","Region":"","Departement":"","Ville":"","Metier":null,"Resultat-Recherche":"[101+]","Compteur-Offre":"623","searchOu":"Lille","searchCategorie":"","searchTypeContrat":"","searchQuoi":"développeur","searchRayon":"20 km","searchDate":"Toutes","searchSecteur":"","searchTypeEntreprise":"","searchSalary":"","searchSalaryOnly":false,"searchTeletravail":"","searchRhythm":"","searchRseLabel":"","searchDuration":"Toutes les durées","searchExperience":"","searchPartTime":"","EnhancedEcommerce":"false","ecommerce":{"currencyCode":"EUR","impressions":[],"promoView":null,"click":null},"page_component":["map"],"mv_test":null,"mv_creation":null}); window.dataLayerAlreadyPushed = true; }</script>

    
<script>
    (function (w, d, s, l, i) {
    w[l] = w[l] || []; w[l].push({
        'gtm.start':
            new Date().getTime(), event: 'gtm.js'
    }); var f = d.getElementsByTagName(s)[0],
        j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src =
            'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f);
    })(window, document, 'script', 'dataLayer', 'GTM-PZLHDH');</script>

    <!-- #endregion Google_Tag_Manager -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <meta name="view-transition" content="same-origin"/>
    <meta name="google-site-verification" content="b_h5Dmw6rHMyhuTzlkJkv2R0MhFhbL2wqV1cEoud_Bg"/>
    <meta property="og:title" content="Recherche Offres d&#x27;emploi en France | Hellowork">
    <meta property="og:description" content="Retrouvez toutes les offres d&#x27;emploi dans votre region sur Hellowork. D&#xE9;couvrez d&#xE8;s maintenant votre prochain emploi en France.">
    <meta name="description" content="Retrouvez toutes les offres d&#x27;emploi dans votre region sur Hellowork. D&#xE9;couvrez d&#xE8;s maintenant votre prochain emploi en France.">
    <meta property="og:url" content="https://www.hellowork.com/fr-fr/emploi/recherche.html">
    <meta property="og:site_name" content="www.hellowork.com">
    <meta property="og:image" content="https://f.hellowork.com/hellowork/img/placeholders/og-image-hellowork.jpg" itemprop="image">
    <meta property="og:locale" content="fr_FR">
    <meta property="og:type" content="website">


        <meta name="twitter:card" content="summary">
        <meta name="twitter:site" content="@hellowork">
        <meta name="twitter:title" content="Recherche Offres d&#x27;emploi en France | Hellowork">
        <meta name="twitter:description" content="Retrouvez toutes les offres d&#x27;emploi dans votre region sur Hellowork. D&#xE9;couvrez d&#xE8;s maintenant votre prochain emploi en France.">
        <meta name="twitter:domain" content="www.hellowork.com">
        <meta name="twitter:app:id:googleplay" content="com.regionsjob.android"/>
        <meta name="twitter:app:id:ipad" content="408615037"/>
        <meta name="twitter:app:id:iphone" content="408615037"/>
        <meta name="twitter:app:name:iphone" content="Hellowork"/>
        <meta name="twitter:app:name:ipad" content="Hellowork"/>
        <meta name="twitter:app:name:googleplay" content="Hellowork"/>

    <meta property="al:ios:app_name" content="Hellowork"/>
    <meta property="al:ios:app_store_id" content="408615037"/>
    <meta property="al:android:app_name" content="Hellowork"/>
    <meta property="al:android:package" content="com.regionsjob.android"/>

    
<meta name="robots" content="noindex, follow">
    <meta name="language" content="fr-FR" />
<link rel="canonical" href="https://www.hellowork.com/fr-fr/emploi.html" />

    
     
 

    
    <link rel="preload" href="https://f.hellowork.com/hellowork/ressources/2.57.11/fonts/inter-roman-latin-sliced.woff2" as="font" type="font/woff2" crossorigin />

    
    <link rel="stylesheet" type="text/css" href="https://f.hellowork.com/hellowork/ressources/2.57.11/styles/tailwind.dist.css">

    
<link rel="icon" type="image/x-icon" href="https://f.hellowork.com/hellowork/img/favicons/hellowork/favicon.ico" />
    

    <meta name="turbo-prefetch" content="false">
    
        
    <meta name="turbo-cache-control" content="no-cache">

    

    


<script type="application/ld&#x2B;json">
    {"@context": "https://schema.org","@type": "WebSite","name" : "Hellowork","url": "https://www.hellowork.com/fr-fr/"}
</script>



    
<script type="application/ld&#x2B;json">
  {"@context":"https://schema.org","@type":"Organization","name":"Hellowork","sameAs":["https://www.facebook.com/helloworkcom","https://www.youtube.com/channel/UCry7TiN8-dFKQUgyUMYANTQ","https://twitter.com/hellowork","https://www.tiktok.com/@helloworkcom","https://www.instagram.com/hellowork_/","https://www.linkedin.com/company/helloworkcom/"],"url":"https://www.hellowork.com","logo":{"@type":"ImageObject","url":"https://f.hellowork.com/hellowork/ressources/2.57.11/images/png/logo_hellowork.png"}}
</script>

<script type="application/ld&#x2B;json">
        {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement": [
        {"@type":"ListItem","position":1,"item": { "@id":"https://www.hellowork.com/fr-fr/","name":"Accueil" }},
{"@type":"ListItem","position":2,"item": {"@id":"https://www.hellowork.com/fr-fr/emploi.html","name":"Emploi"}},{"@type":"ListItem","position":3,"item": {"name":"Recherche"}}        ]}
</script>
    
    
    
    
    
    
    

    
    <script>
    document.addEventListener("DOMContentLoaded", function (event) {
        var isCookedMarketing = function () {
            var value = '; ' + document.cookie,
                parts = value.split('; hw-cc-first-party=');
            if (parts.length !== 2) return false;
            return JSON.parse(decodeURIComponent(parts.pop().split(';').shift())).marketing;
        }
        if (isCookedMarketing()) {
            var script = document.createElement("script");
            script.setAttribute("async", "true");
            script.setAttribute("src", "https://securepubads.g.doubleclick.net/tag/js/gpt.js");
            
            var ref = document.querySelector("script");

            ref.parentNode.insertBefore(script, ref);
        }
    });

    window.googletag = window.googletag || { cmd: [] };
</script>
</head>

    <body class="relative typo-s" data-controller="toggle-on-body analytics tracker scroll-to-top mutable content-missing display-toast-message service-unsubscriber page-restore" data-mutable-event-name-value="pageLoaded" data-toggle-on-body-toggled-class="overflow-hidden" data-action="mutable:pageLoaded->tracker#identify turbo:frame-missing@window->content-missing#handleFrameMissing">
        <a
            class="
                hidden
                xl:block
                sr-only
                focus-visible:!btn-primary-l
                focus-visible:not-sr-only
                focus-visible:w-64
                focus-visible:top-4
                focus-visible:left-4
                focus-visible:absolute
                focus-visible:z-40
                focus-visible:py-3
            "
            href="#main-content"
        >
            Aller au contenu principal
        </a>
        <main>
            

<script>
    window.HelloworkCookieConsentCustomConfig = {
        privacyPolicyUrl: "https://www.hellowork-group.com/fr/legal/pdc-hellowork/",
        noticeModal: true,
        primaryBtnBackgroundColor: "#000000",
        continueWithoutAcceptingTextOutlineColor: "#ffffff",
        noticeModalLogo: "/images/logo/hellowork.svg",
        btnDenyCookies: true,
        btnDenyCookiesType: "continue-without-accepting",
        cookieSelectedCallback: (hasAccepted = false) => {
            document.dispatchEvent(new CustomEvent('marketingCookiesChanged', {"detail": { "hasAccepted": hasAccepted }}));
        }
    };

    document.addEventListener("DOMContentLoaded", function () {
        window.helloworkCookieConsent = new HelloworkCookieConsent();
    })
</script>
<script src="https://f.hellowork.com/hw-cookie-consent/latest/embed.js" defer></script>

<noscript>
    <iframe title="Hellowork" src="https://www.googletagmanager.com/ns.html?id=GTM-PZLHDH"
            height="0" width="0" style="display:none;visibility:hidden"></iframe>
</noscript>
    
<script>
    (function(d,s,b,u){if(!b.__SV){window.tracker=b;b._c=[];
        b.init=function(c){function f(b, h){b[h]=function(){
                b.push([h].concat(Array.prototype.slice.call(arguments, 0)));}}c.trackerUrl=u;b._c=c;
            var i="track extract_metas identify set_config whoami track_metas track_action loaded getWk".split(" ");
            for(g=0;g<i.length;g++)f(b, i[g]);};b.__SV = 1.0;var f=d.getElementsByTagName(s)[0],
            j=d.createElement(s);j.async=!0;j.src=u+"javascripts/tracker-2-latest.min.js";
        f.parentNode.insertBefore(j, f);}})
    (document,"script",[],"//t.hellowork.com/");
    
    tracker.init({
        /* Debug mode pour logs */
        isDebug:  false,
        /* Identifiant du site de tracking */
        trackerSiteId: 41,
        /* Domaine de tracking */
        trackerDomainId: 2,
        /* Cookie consent */
        cookieConsent: false
    });
</script>

            <script>dataLayer.push({ 'Connexion' : 'Non-Connecte','UAIdXjob' : 'UA-32617926-5'})</script>






















<turbo-frame id="modal-new-profile" data-content-missing-target="excluded">
    <form 
        id="formCustomOneTap"
        data-controller="auto-submittable"
        action="/fr-fr/candidat/onetapturbocustom"
        method="post"
    >
        <input 
            type="hidden" 
            name="auto-submit" 
            data-controller="mutable" 
            data-action="mutable:connected->auto-submittable#submit"
        >

    </form>

    <form id="formOneTap" action="/fr-fr/candidat/onetapturbo" method="post">
        <input type="hidden" name="clientId">
        <input type="hidden" name="credential">
        <input type="hidden" name="selectBy">
    </form>

    <div id="g_id_onload"
         data-client_id="983461533668-5f2b35au8h7fpiu443ich72bb8juf60l.apps.googleusercontent.com"
        data-callback="setFormWithGoogleCredential"
        data-skip_prompt_cookie="hw_onetap"
        data-auto_select="false"
        data-cancel_on_tap_outside="false"
        data-use_fedcm_for_prompt="true"
        class="z-50">
    </div>

    <script>
        function setFormWithGoogleCredential(response) {
            const formOneTap = document.getElementById('formOneTap')
            formOneTap.querySelector('input[name="clientId"]').value = response.clientId
            formOneTap.querySelector('input[name="credential"]').value = response.credential
            formOneTap.querySelector('input[name="selectBy"]').value = response.select_by
            formOneTap.requestSubmit()
        }
    </script>
</turbo-frame>

<div 
    data-controller="onetap-importer"
    data-onetap-importer-custom-url-value="/fr-fr/candidat/customonetapframeview"
>
    <turbo-frame id="one-tap-custom" data-onetap-importer-target="customFrame" src="" ></turbo-frame>
    <script
        async defer
        data-action="marketingCookiesChanged@document-&gt;onetap-importer#importScriptFromEvent:once"
        data-onetap-importer-target="scriptElement"
    ></script>
</div>


<div>
    <!-- input caché utilisé pour déclencher l'affichage du side pannel  -->
    <input type="checkbox" hidden id="cp-mobile-menu-side-panel" class="peer">
    <!-- Side Panel pour le menu mobile -->
    <div class="fixed
                flex
                flex-col
                h-full 
                z-50
                top-0
                cp-menu-width
                bg-grey-50 
                transform 
                ease-in 
                duration-400
                peer-checked:translate-x-full
                xl:hidden">
        <nav aria-label="Menu de navigation" 
             class="h-full flex flex-col justify-between overflow-y-auto" 
             data-controller="focus-trap"
             data-focus-trap-target="container">
            <div class="hidden connected:block px-6 py-8 flex-grow">
                


<div class="flex pb-14 xl:hidden justify-between">
    <div class="flex justify-between">
        <div data-controller="toggle"
             data-toggle-toggled-class="hidden"
             data-action="from-account-data:empty@document->toggle#add from-account-data:copied:Initials@document->toggle#remove"
             data-toggle-target="toToggle"
             class="flex flex-col gap-3">
            



<div
    class="bg-blue-500 min-w-16 min-h-16 size-16 rounded-full flex items-center justify-center relative overflow-hidden">
    <div class="text-white absolute typo-xl-bold"
         data-controller="from-account-data"
         data-action="fetch-account-data:account-data-refreshed@document->from-account-data#copy"
         data-from-account-data-copy-value="Initials"
         data-from-account-data-into-value="innerText">
    </div>
</div>
            <div class="flex flex-col">
                <span class="flex flex-wrap typo-l-bold pb-1 break-all">
                    <span data-controller="from-account-data"
                          data-action="fetch-account-data:account-data-refreshed@document->from-account-data#copy"
                          data-from-account-data-copy-value="FirstName"
                          data-from-account-data-into-value="innerText">
                    </span>
                    <span class="px-[2px]"></span>
                    <span data-controller="from-account-data"
                          data-action="fetch-account-data:account-data-refreshed@document->from-account-data#copy"
                          data-from-account-data-copy-value="LastName"
                          data-from-account-data-into-value="innerText">
                    </span>
                </span>
                <span class="typo-m text-grey-500 break-all"
                      data-controller="from-account-data"
                      data-action="fetch-account-data:account-data-refreshed@document->from-account-data#copy"
                      data-from-account-data-copy-value="Email"
                      data-from-account-data-into-value="innerText">
                </span>
            </div>
        </div>
        <div data-controller="toggle"
             data-toggle-toggled-class="hidden"
             data-action="from-account-data:empty@document->toggle#remove from-account-data:copied:Initials@document->toggle#add"
             data-toggle-target="toToggle"
             class="hidden flex flex-col gap-4">
            


<div
    class="bg-grey-100 min-w-16 min-h-16 size-16 rounded-full flex items-center justify-center relative overflow-hidden">
    <svg
        class="text-grey-300 aspect-[38/44] w-[38px] absolute bottom-0">
        <use href="/svg/icons/user.svg#avatar"></use>
    </svg>
</div>
            <span class="typo-s">
                <span data-controller="atc" data-atc-l-value="x/se-se/pnaqvqng/zba-cebsvy=pt=ugzyf">Complétez votre profil</span> pour recevoir des offres adaptées.
            </span>
        </div>
    </div>
    <button class="self-start"
        data-controller="input-checker"
        data-input-checker-input-value="#cp-mobile-menu-side-panel"
        aria-label="Fermer le menu"
        data-action="toggle-on-body#remove click->input-checker#uncheck">
        <!-- Icône de fermeture -->
        <svg class="size-3">
            <use href="/svg/icons/nav/close.svg#close"></use>
        </svg>
    </button>
</div>
<div class="flex flex-col gap">
    <span class="mb-[148px] hidden xl:block"
          data-controller="atc"
          data-atc-l-value="x/se-sef"
    >
        <svg class="aspect-[99/44] h-10">
            <use href="/svg/logo/hellowork.svg#black"></use>
        </svg>
    </span>
    <div class="flex flex-col gap-8">
        <span class="rounded-full px-4 py-2 no-underline hover:bg-grey-100 focus:bg-grey-100 active:bg-grey-300"
              data-controller="atc cp-menu-item"
              data-cy="cpMenuDashboard"
              data-atc-l-value="x/se-se/pnaqvqng/zba-rfcnpr=pt=ugzyf"
              data-cp-menu-item-url-value="/fr-fr/candidat/mon-espace.html"
              data-cp-menu-item-active-class="bg-grey-100"
              data-cp-menu-item-hidden-class="hidden"
              data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;event_info&quot;:&quot;espace-candidat&quot;,&quot;wording&quot;:&quot;Mon espace&quot;}"
              data-action="click->analytics#push"
        >
            <div class="flex typo-m gap-3 items-center">
                <svg
                    class="size-4"
                    data-cp-menu-item-target="inactiveIcon">
                    <use href="/svg/icons/home.svg#home"></use>
                </svg>
                <svg
                    class="size-4 hidden"
                    data-cp-menu-item-target="activeIcon">
                    <use href="/svg/icons/home.svg#home-active"></use>
                </svg>
                Mon espace
            </div>
        </span>
        <span class="rounded-full px-4 py-2 no-underline hover:bg-grey-100 focus:bg-grey-100 active:bg-grey-300"
              data-controller="atc cp-menu-item"
              data-cy="cpMenuCV"
              data-atc-l-value="x/se-se/pnaqvqng/zrf-pi-ihf=pt=ugzyf"
              data-cp-menu-item-url-value="/fr-fr/candidat/mes-cv-vus.html"
              data-cp-menu-item-active-class="bg-grey-100"
              data-cp-menu-item-hidden-class="hidden"
              data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;event_info&quot;:&quot;espace-candidat&quot;,&quot;wording&quot;:&quot;Mes CV vus&quot;}"
              data-action="click->analytics#push"
        >
            <div class="flex typo-m gap-3 items-center">
                <svg class="size-4"
                     data-cp-menu-item-target="inactiveIcon">
                    <use href="/svg/icons/cv.svg#cv"></use>
                </svg>
                <svg class="size-4 hidden"
                     data-cp-menu-item-target="activeIcon">
                    <use href="/svg/icons/cv.svg#cv-active"></use>
                </svg>
                Mes CV vus
            </div>
        </span>
        <span class="rounded-full px-4 py-2 no-underline hover:bg-grey-100 focus:bg-grey-100 active:bg-grey-300"
              data-controller="atc cp-menu-item"
              data-cy="cpMenuOfferResponses"
              data-atc-l-value="x/se-se/pnaqvqng/zrf-pnaqvqngherf=pt=ugzyf"
              data-cp-menu-item-url-value="/fr-fr/candidat/mes-candidatures.html"
              data-cp-menu-item-active-class="bg-grey-100"
              data-cp-menu-item-hidden-class="hidden"
              data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;event_info&quot;:&quot;espace-candidat&quot;,&quot;wording&quot;:&quot;Mes candidatures&quot;}"
              data-action="click->analytics#push"
        >
            <div class="flex typo-m gap-3 items-center">
                <svg
                    class="size-4"
                    data-cp-menu-item-target="inactiveIcon">
                    <use href="/svg/icons/offre.svg#offre"></use>
                </svg>
                <svg
                    class="size-4 hidden"
                    data-cp-menu-item-target="activeIcon">
                    <use href="/svg/icons/offre.svg#offre-active"></use>
                </svg>
                Mes candidatures
            </div>
        </span>
        <span class="rounded-full px-4 py-2 no-underline hover:bg-grey-100 focus:bg-grey-100 active:bg-grey-300"
              data-controller="atc cp-menu-item"
              data-cy="cpMenuAlerts"
              data-atc-l-value="x/se-se/pnaqvqng/zrf-nyregrf=pt=ugzyf"
              data-cp-menu-item-url-value="/fr-fr/candidat/mes-alertes.html"
              data-cp-menu-item-active-class="bg-grey-100"
              data-cp-menu-item-hidden-class="hidden"
              data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;event_info&quot;:&quot;espace-candidat&quot;,&quot;wording&quot;:&quot;Mes alertes&quot;}"
              data-action="click->analytics#push"
        >
            <div class="flex typo-m gap-3 items-center">
                <svg
                    class="size-4"
                    data-cp-menu-item-target="inactiveIcon">
                    <use href="/svg/icons/alertes.svg#alertes"></use>
                </svg>
                <svg
                    class="size-4 hidden"
                    data-cp-menu-item-target="activeIcon">
                    <use href="/svg/icons/alertes.svg#alertes-active"></use>
                </svg>
                Mes alertes
            </div>
        </span>
        <span class="rounded-full px-4 py-2 no-underline hover:bg-grey-100 focus:bg-grey-100 active:bg-grey-300"
              data-controller="atc cp-menu-item"
              data-cy="cpMenuProfil"
              data-atc-l-value="x/se-se/pnaqvqng/zba-cebsvy=pt=ugzyf"
              data-cp-menu-item-url-value="/fr-fr/candidat/mon-profil.html"
              data-cp-menu-item-active-class="bg-grey-100"
              data-cp-menu-item-hidden-class="hidden"
              data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;event_info&quot;:&quot;espace-candidat&quot;,&quot;wording&quot;:&quot;Mon profil&quot;}"
              data-action="click->analytics#push"
        >
            <div class="flex typo-m gap-3 items-center">
                <svg
                    class="size-4"
                    data-cp-menu-item-target="inactiveIcon">
                    <use href="/svg/icons/user.svg#user"></use>
                </svg>
                <svg
                    class="size-4 hidden"
                    data-cp-menu-item-target="activeIcon">
                    <use href="/svg/icons/user.svg#user-active"></use>
                </svg>
                Mon profil
            </div>
        </span>
        <span class="rounded-full px-4 py-2 no-underline hover:bg-grey-100 focus:bg-grey-100 active:bg-grey-300"
              data-controller="atc cp-menu-item"
              data-cy="cpMenuParameters"
              data-atc-l-value="x/se-se/pnaqvqng/cnenzrgerf=pt=ugzyf"
              data-cp-menu-item-url-value="/fr-fr/candidat/parametres.html"
              data-cp-menu-item-active-class="bg-grey-100"
              data-cp-menu-item-hidden-class="hidden"
              data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;event_info&quot;:&quot;espace-candidat&quot;,&quot;wording&quot;:&quot;Param&#xE8;tres&quot;}"
              data-action="click->analytics#push"
        >
            <div class="flex typo-m gap-3 items-center">
                <svg
                    class="size-4"
                    data-cp-menu-item-target="inactiveIcon">
                    <use href="/svg/icons/settings.svg#settings"></use>
                </svg>
                <svg
                    class="size-4 hidden"
                    data-cp-menu-item-target="activeIcon">
                    <use href="/svg/icons/settings.svg#settings-active"></use>
                </svg>
                Param&#xE8;tres
            </div>
        </span>
        <span class="xl:hidden rounded-full px-4 py-2 no-underline hover:bg-grey-100 focus:bg-grey-100 active:bg-grey-300"
              data-controller="atc cp-menu-item"
              data-cy="cpMenuLogOff"
              data-atc-l-value="x/se-se/pnaqvqng/ybtbssf"
              data-cp-menu-item-url-value="/fr-fr/candidat/logoff"
              data-cp-menu-item-active-class="bg-grey-100"
              data-cp-menu-item-hidden-class="hidden"
              data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;event_info&quot;:&quot;espace-candidat&quot;,&quot;wording&quot;:&quot;D&#xE9;connexion&quot;}"
              data-action="click->analytics#push"
        >
            <div class="flex typo-m gap-3 items-center">
                <svg class="size-4">
                    <use href="/svg/icons/exit.svg#exit"></use>
                </svg>
                D&#xE9;connexion
            </div>
        </span>
    </div>
</div>

            </div>
            <div class="hidden not-connected:block px-6 py-8 flex-grow">
                



<div class="flex pb-14 xl:hidden justify-between">
    <input type="checkbox" hidden id="cp-mobile-menu-side-panel-employment" class="peer/employment">
    <!-- Side Panel pour l'onglet Emploi -->
    <div class="fixed flex flex-col h-full z-50 top-0 w-full -left-full bg-grey-50 transform ease-in duration-400 xl:hidden peer-checked/employment:translate-x-full">
        <nav aria-label="Onglet Emploi" 
                class="h-full flex flex-col justify-between overflow-y-auto" 
                data-controller="focus-trap"
                data-focus-trap-target="container">
                <div class="px-6 py-8 flex-grow">
                

<div class="flex pb-14 xl:hidden justify-between">
    <button class="self-start"
        data-controller="input-checker"
        data-input-checker-input-value="#cp-mobile-menu-side-panel-employment"
        aria-label="Retour" 
        data-action="toggle-on-body#remove click->input-checker#uncheck">
        <svg class="size-3" aria-hidden="true">
            <use href="/svg/icons/arrow.svg#left"></use>
        </svg>
    </button>
    <button class="self-start"
        data-controller="input-checker"
        data-input-checker-input-value="#cp-mobile-menu-side-panel-employment"
        aria-label="Fermer le menu"
        data-action="toggle-on-body#remove click->input-checker#uncheck">
        <!-- Icône de fermeture -->
        <svg class="size-3">
            <use href="/svg/icons/nav/close.svg#close"></use>
        </svg>
    </button>
</div>
<ul class="flex flex-col gap-6">
    <li>
        <a data-cy="headerJobInterimLink" href="/fr-fr/interim.html" class="typo-m no-underline">Missions d'intérim</a>
    </li>
    <li>
        <a data-cy="headerJobInternshipLink" href="/fr-fr/stage.html" class="typo-m no-underline">Offres de stage</a>
    </li>
    <li>
        <a data-cy="headerJobAlternatelyLink" href="/fr-fr/alternance.html" class="typo-m no-underline">Offres en alternance</a>
    </li>
    <li>
        <span 
            data-cy="headerJobAlertAtc" 
            data-atc-l-value="x/se-se/pnaqvqng/perngvba-nyregr=pt=ugzyf" 
            data-controller="atc" 
            class="typo-m no-underline"
        >
            Créer mon alerte
        </span>
    </li>
    <li>
        <span 
            data-cy="navJobCvAtc" 
            data-controller="atc" 
            data-atc-l-value="x/se-se/cntr/qrcbg-pi=pt=ugzyf" 
            class="typo-m no-underline"
        >
            Déposer mon CV
        </span>
    </li>
    <li>
        <a
            title="Calcul du salaire brut en net"
            href="/fr-fr/outil/salaire-brut-net.html"
            class="typo-m no-underline"
        >
            Salaire brut net
        </a>
    </li>
</ul>


            </div>
            <div class="shrink-0">
                


<div class="bg-blue-200 overflow-hidden px-6 py-4 xl:hidden bg-auto bg-[calc(50%-9px)_center] "
     data-controller="mobile-app"
     style="background-image: url(/svg/illustrations/pattern-chevron.svg)">
    <div class="flex gap-4 items-center justify-between z-10">
        <div class="flex flex-col">
            <span class="typo-m-bold">Téléchargez l'app</span>
            <span class="typo-m-">et postulez dans les <span class="whitespace-nowrap">premiers !</span></span>
        </div>
        <span data-controller="atc"
              data-atc-l-value="xuggcf://nccf=pt=nccyr=pt=pbz/se/ncc/ertvbafwbo-rzcybv/vq408615037?zg=8f"
              data-mobile-app-target="ios"
              data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;app_download&quot;,&quot;event_info&quot;:&quot;Apple&quot;}"
              data-action="click->analytics#push"
        >
            <svg class="w-[108px] h-[31px]">
                <use href="/svg/icons/apps/appstore-badge.svg#appstore-badge"></use>
            </svg>
        </span>
        <span data-controller="atc"
           data-atc-l-value="xuggcf://cynl=pt=tbbtyr=pt=pbz/fgber/nccf/qrgnvyf?vq=pbz=pt=ertvbafwbo=pt=naqebvqf"
           data-mobile-app-target="android"
           data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;app_download&quot;,&quot;event_info&quot;:&quot;Android&quot;}"
           data-action="click->analytics#push"
        >
            <svg class="w-[108px] h-[31px]">
                <use href="/svg/icons/playstore-badge.svg#playstore-badge"></use>
            </svg>
        </span>
    </div>
</div>
            </div>
        </nav>
    </div>
    <input type="checkbox" hidden id="cp-mobile-menu-side-panel-recruiter-access" class="peer/recruiter">
    <!-- Side Panel pour le menu mobile -->
    <div class="fixed flex flex-col h-full z-50 top-0 w-full -left-full bg-grey-50 transform ease-in duration-400 xl:hidden peer-checked/recruiter:translate-x-full">
        <nav aria-label="Onglet Accès Recruteur" 
                class="h-full flex flex-col justify-between overflow-y-auto" 
                data-controller="focus-trap"
                data-focus-trap-target="container">
            <div class="px-6 py-8 flex-grow">
                

<div class="flex pb-14 xl:hidden justify-between">
    <button class="self-start"
            data-controller="input-checker"
            data-input-checker-input-value="#cp-mobile-menu-side-panel-recruiter-access"
            aria-label="Retour" 
            data-action="toggle-on-body#remove click->input-checker#uncheck">
            <svg class="size-3" aria-hidden="true">
                <use href="/svg/icons/arrow.svg#left"></use>
            </svg>
    </button>
    <button class="self-start"
        data-controller="input-checker"
        data-input-checker-input-value="#cp-mobile-menu-side-panel-recruiter-access"
        aria-label="Fermer le menu"
        data-action="toggle-on-body#remove click->input-checker#uncheck">
        <!-- Icône de fermeture -->
        <svg class="size-3">
            <use href="/svg/icons/nav/close.svg#close"></use>
        </svg>
    </button>
</div>
<div class="flex flex-col gap-6">
    <span class="no-underline typo-m"
        data-cy="headerRecruiterLinkPublish"
        data-controller="atc"
        data-atc-l-value="xuggcf://erpehgrhe=pt=uryybjbex=pt=pbz/se/cebqhvg/cyngrsbezr-erpehgrzrag/pbagnpg=pt=ugzyf"
    >
        Diffuser ma première offre
    </span>
    <span class="no-underline typo-m"
        data-cy="headerRecruiterLinkCustomers"
        data-controller="atc"
        data-atc-l-value="xuggcf://ohqqv=pt=uryybjbex=pt=pbzf"
    >
        Déjà client
    </span>
</div>


            </div>
            <div class="shrink-0">
                


<div class="bg-blue-200 overflow-hidden px-6 py-4 xl:hidden bg-auto bg-[calc(50%-9px)_center] "
     data-controller="mobile-app"
     style="background-image: url(/svg/illustrations/pattern-chevron.svg)">
    <div class="flex gap-4 items-center justify-between z-10">
        <div class="flex flex-col">
            <span class="typo-m-bold">Téléchargez l'app</span>
            <span class="typo-m-">et postulez dans les <span class="whitespace-nowrap">premiers !</span></span>
        </div>
        <span data-controller="atc"
              data-atc-l-value="xuggcf://nccf=pt=nccyr=pt=pbz/se/ncc/ertvbafwbo-rzcybv/vq408615037?zg=8f"
              data-mobile-app-target="ios"
              data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;app_download&quot;,&quot;event_info&quot;:&quot;Apple&quot;}"
              data-action="click->analytics#push"
        >
            <svg class="w-[108px] h-[31px]">
                <use href="/svg/icons/apps/appstore-badge.svg#appstore-badge"></use>
            </svg>
        </span>
        <span data-controller="atc"
           data-atc-l-value="xuggcf://cynl=pt=tbbtyr=pt=pbz/fgber/nccf/qrgnvyf?vq=pbz=pt=ertvbafwbo=pt=naqebvqf"
           data-mobile-app-target="android"
           data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;app_download&quot;,&quot;event_info&quot;:&quot;Android&quot;}"
           data-action="click->analytics#push"
        >
            <svg class="w-[108px] h-[31px]">
                <use href="/svg/icons/playstore-badge.svg#playstore-badge"></use>
            </svg>
        </span>
    </div>
</div>
            </div>
        </nav>
    </div>

    <div class="flex justify-between">
        <div class="relative max-w-max top-0 left-0 transition-all ease-in-out duration-300 peer-parent-checked:left-[calc(50%-40px)]">
            <a href="https://www.hellowork.com/fr-fr/" class="inline-flex" aria-label="Aller à l'accueil">
                <svg class="aspect-[99/44] mt-0 mb-0 h-10">
                    <use href="/svg/logo/hellowork.svg#black"></use>
                </svg>
            </a>
        </div>
    </div>
    <button class="self-start"
        data-controller="input-checker"
        data-input-checker-input-value="#cp-mobile-menu-side-panel"
        aria-label="Fermer le menu"
        data-action="toggle-on-body#remove click->input-checker#uncheck">
        <!-- Icône de fermeture -->
        <svg class="size-3">
            <use href="/svg/icons/nav/close.svg#close"></use>
        </svg>
    </button>
</div>
<div class="flex flex-col gap-6">
    <span class="no-underline typo-m"
          data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;cta&quot;:&quot;menu-burger&quot;,&quot;wording&quot;:&quot;Se connecter&quot;}"
        data-action="click->analytics#push"
        data-controller="atc"
        data-atc-l-value="x/se-se/pnaqvqng/pbaarkvba-vafpevcgvba=pt=ugzy#pbaarkvbaf"
    >
        Se connecter
    </span>
    <span class="no-underline typo-m"
        data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;cta&quot;:&quot;menu-burger&quot;,&quot;wording&quot;:&quot;S&#x27;inscrire&quot;}"
        data-action="click->analytics#push"
        data-cy="headerAccountRegister"
        data-controller="atc"
        data-atc-l-value="x/se-se/pnaqvqng/pbaarkvba-vafpevcgvba=pt=ugzy#vafpevcgvbaf"
    >
        S'inscrire
    </span>
    <button class="flex h-fit items-center cursor-pointer connected:hidden lg:hidden typo-m w-auto gap-2"
            data-controller="input-checker toggle"
            data-toggle-toggled-class="hidden"
            data-input-checker-input-value="#cp-mobile-menu-side-panel-employment"
            aria-label="Ouvrir le menu"
            data-action="toggle-on-body#add click->input-checker#check from-account-data:empty->toggle#toggle">
        Emploi
        <svg class="size-3" aria-hidden="true">
            <use href="/svg/icons/arrow.svg#right"></use>
        </svg>
    </button>
    <a class="no-underline typo-m"
        data-cy="headerEduLink" aria-label="Accès Formation" href="https://www.maformation.fr/"
    >
        Formation
    </a>
    <button class="flex h-fit items-center cursor-pointer connected:hidden lg:hidden typo-m w-auto gap-2"
            data-controller="input-checker toggle"
            data-toggle-toggled-class="hidden"
            data-input-checker-input-value="#cp-mobile-menu-side-panel-recruiter-access"
            aria-label="Ouvrir le menu"
            data-action="toggle-on-body#add click->input-checker#check from-account-data:empty->toggle#toggle">
        Accès recruteur
        <svg class="size-3" aria-hidden="true">
            <use href="/svg/icons/arrow.svg#right"></use>
        </svg>
    </button>
</div>
            </div>
            <div class="shrink-0">
                


<div class="bg-blue-200 overflow-hidden px-6 py-4 xl:hidden bg-auto bg-[calc(50%-9px)_center] "
     data-controller="mobile-app"
     style="background-image: url(/svg/illustrations/pattern-chevron.svg)">
    <div class="flex gap-4 items-center justify-between z-10">
        <div class="flex flex-col">
            <span class="typo-m-bold">Téléchargez l'app</span>
            <span class="typo-m-">et postulez dans les <span class="whitespace-nowrap">premiers !</span></span>
        </div>
        <span data-controller="atc"
              data-atc-l-value="xuggcf://nccf=pt=nccyr=pt=pbz/se/ncc/ertvbafwbo-rzcybv/vq408615037?zg=8f"
              data-mobile-app-target="ios"
              data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;app_download&quot;,&quot;event_info&quot;:&quot;Apple&quot;}"
              data-action="click->analytics#push"
        >
            <svg class="w-[108px] h-[31px]">
                <use href="/svg/icons/apps/appstore-badge.svg#appstore-badge"></use>
            </svg>
        </span>
        <span data-controller="atc"
           data-atc-l-value="xuggcf://cynl=pt=tbbtyr=pt=pbz/fgber/nccf/qrgnvyf?vq=pbz=pt=ertvbafwbo=pt=naqebvqf"
           data-mobile-app-target="android"
           data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;app_download&quot;,&quot;event_info&quot;:&quot;Android&quot;}"
           data-action="click->analytics#push"
        >
            <svg class="w-[108px] h-[31px]">
                <use href="/svg/icons/playstore-badge.svg#playstore-badge"></use>
            </svg>
        </span>
    </div>
</div>
            </div>
        </nav>
    </div>
    <!-- Overlay pour le menu mobile -->
    <div
        id="mobile-overlay"
        data-controller="input-checker"
        data-input-checker-input-value="#cp-mobile-menu-side-panel"
        data-action="click->input-checker#uncheck modal:form-submitted@document->input-checker#uncheck click->toggle-on-body#remove"
        class="fixed
               top-0
               h-full
               w-full
               bg-black
               opacity-0
               pointer-events-none
               transition-all
               duration-600
               peer-checked:!z-40
               peer-checked:opacity-40
               peer-checked:pointer-events-auto
               peer-checked:z-fade-in
               z-fade-out
               overflow-hidden
               xl:hidden">
    </div>
</div>


<div class="layout-wrapper md:mx-auto lg:px-6 xl:layout-grid">
    <div class="xl:layout-inner-grid">
        <div class="col-span-full xl:col-start-1 xl:col-end-13">
            <header
                class="
                flex
                justify-between
                overflow-y-auto
                sm:overflow-y-visible
                z-30
                py-3
                px-4
                sm:px-0
                bg-white
                relative
                sm:static
                sm:flex-row
                sm:justify-between
                sm:items-center">

                <div class="relative max-w-max top-0 left-0 transition-all ease-in-out duration-300">
                    <a href="https://www.hellowork.com/fr-fr/" class="inline-flex" aria-label="Aller à l'accueil">
                        <svg class="aspect-[99/44] mt-0 mb-0 h-8 sm:mt-0 sm:h-10">
                            <use href="/svg/logo/hellowork.svg#black"></use>
                        </svg>
                    </a>
                </div>

                <div class="flex items-center justify-end gap-4 sm:gap-6"
                     data-controller="show-on-auth-state"
                     data-show-on-auth-state-hidden-class="hidden">

                    <div data-show-on-auth-state-target="skeleton" class="flex items-center gap-4 sm:gap-6">
                        <div class="skeleton h-8 w-12 sm:w-24 rounded-full"></div>
                        <div class="skeleton h-8 w-12 sm:w-24 rounded-full"></div>
                        <div class="skeleton h-10 w-16 sm:w-32 rounded-full"></div>
                    </div>

                    


<div data-show-on-auth-state-target="notConnected" class="hidden">
  <nav class="flex connected:items-center sm:ml-4">
    <menu class="
        py-0 
        connected:h-auto 
        overflow-hidden 
        flex items-center 
        justify-end 
        sm:flex-row 
        sm:p-0 
        sm:overflow-visible 
        sm:h-auto 
        w-auto 
        gap-4 
        sm:gap-6">
      <li class="text-center">
        <a
          href="/fr-fr/emploi.html"
          title="Offres d’emploi"
          aria-label="Trouver mon job"
          data-analytics-values-param="
            Hw.Emploi.Web.Common.Models.Tracking.TrackingAnalytics;.AsJson()"
          data-action="click->analytics#push"
          class="link-header typo-s gap-1 ">
          <span class="hidden sm:inline">Trouver mon </span>
          <span class="uppercase sm:lowercase">j</span>ob<span class="sm:hidden">s</span>
        </a>
      </li>

      <li class="text-center">
        <a
          href="/fr-fr/entreprise.html"
          title="Entreprises qui recrutent"
          aria-label="Trouver mon entreprise"
          data-analytics-values-param="
              {&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;cta&quot;:&quot;trouver-mon-entreprise&quot;,&quot;wording&quot;:&quot;Trouver-mon-entreprise&quot;}"
          data-action="click->analytics#push"
          class="link-header typo-s gap-1
                                                ">
          <span class="hidden sm:inline">Trouver mon </span>
          <span class="uppercase sm:lowercase">e</span>ntreprise<span class="sm:hidden">s</span>
        </a>
      </li>

      <li class="hidden lg:block">
        <details
          data-controller="details"
          data-action="
            details:not:sm->details#expand
            details:not:sm->details#disableClickOutside
            details:is:sm->details#collapse
            details:is:sm->details#enableClickOutside
            details:click:outside->details#collapse
        ">
          <summary
            data-cy="headerRecruiterMenu"
            class="
              mx-auto 
              w-max 
              mt-10 
              mb-4 
              uppercase 
              link-header 
              typo-s 
              border-b 
              border-grey-100 
              sm:my-0 
              sm:flex 
              sm:normal-case 
              sm:border-0">
            Accès recruteur
            <svg class="size-2">
              <use href="/svg/icons/arrow.svg#down"></use>
            </svg>
          </summary>
          <div class="sm:relative">
            <menu class="flex flex-col items-center bg-white rounded-sm border-grey-300 right-0 sm:z-10 sm:p-2 sm:mt-2 sm:items-start sm:w-max sm:absolute sm:border">
              <li class="sm:w-full">
                <span
                  data-cy="headerRecruiterLinkPublish"
                  data-controller="atc"
                  data-atc-l-value="xuggcf://erpehgrhe=pt=uryybjbex=pt=pbz/se/cebqhvg/cyngrsbezr-erpehgrzrag/pbagnpg=pt=ugzyf"
                  class="atc-m sm:atc-s sm:rounded-xs sm:p-2">
                  Diffuser ma première offre
                </span>
              </li>
              <li class="mt-4 sm:mt-auto sm:w-full">
                <span
                  data-cy="headerRecruiterLinkCustomers"
                  data-controller="atc"
                  data-atc-l-value="xuggcf://ohqqv=pt=uryybjbex=pt=pbzf"
                  class="atc-m sm:atc-s sm:rounded-xs sm:p-2">
                  Déjà client
                </span>
              </li>
            </menu>
          </div>
        </details>
      </li>

      <li class="hidden lg:block">
        <details
          data-controller="details"
          data-action="
            details:not:sm->details#expand
            details:not:sm->details#disableClickOutside
            details:is:sm->details#collapse
            details:is:sm->details#enableClickOutside
            details:click:outside->details#collapse
        ">
          <summary data-cy="headerJobMenu" class="hidden link-header typo-s sm:rounded-sm sm:flex connected:sm:mr-4" aria-label="Accès Emploi">
            Emploi
            <svg class="size-2">
              <use href="/svg/icons/arrow.svg#down"></use>
            </svg>
          </summary>
          <div class="
                hidden 
                sm:relative 
                sm:block 
          ">
            <menu class="
                space-y-4
                flex flex-col
                items-center
                bg-white
                rounded-sm
                border-grey-300
                right-0
                sm:space-y-0
                sm:p-2
                sm:mt-2
                sm:items-start
                sm:w-max
                sm:absolute
                sm:border
                sm:z-20">
              <li class="sm:w-full hidden sm:block">
                <a data-cy="headerJobInterimLink" href="/fr-fr/interim.html" class="link-m sm:link-s sm:rounded-xs sm:p-2">Missions d'intérim</a>
              </li>

              <li class="sm:w-full hidden sm:block">
                <a data-cy="headerJobInternshipLink" href="/fr-fr/stage.html" class="link-m sm:link-s sm:rounded-xs sm:p-2">Offres de stage</a>
              </li>

              <li class="sm:w-full hidden sm:block">
                <a data-cy="headerJobAlternatelyLink" href="/fr-fr/alternance.html" class="link-m sm:link-s sm:rounded-xs sm:p-2">Offres en alternance</a>
              </li>

              <li class="sm:w-full hidden sm:block">
                <span
                  data-cy="headerJobAlertAtc"
                  data-atc-l-value="x/se-se/pnaqvqng/perngvba-nyregr=pt=ugzyf"
                  data-controller="atc"
                  class="atc-m sm:atc-s sm:rounded-xs sm:p-2">
                  Créer mon alerte
                </span>
              </li>

              <li class="sm:w-full hidden sm:block">
                <span
                  data-cy="navJobCvAtc"
                  data-controller="atc"
                  data-atc-l-value="x/se-se/cntr/qrcbg-pi=pt=ugzyf"
                  class="atc-m sm:atc-s sm:rounded-xs sm:p-2">
                  Déposer mon CV
                </span>
              </li>

              <li class="sm:w-full hidden sm:block">
                <a
                  title="Calcul du salaire brut en net"
                  href="/fr-fr/outil/salaire-brut-net.html"
                  class="link-m sm:link-s sm:rounded-xs sm:p-2">
                  Salaire brut net
                </a>
              </li>
            </menu>
          </div>
        </details>
      </li>

      <li class="hidden not-connected:lg:block connected:hidden">
        <a
          data-cy="headerEduLink"
          aria-label="Accès Formation"
          href="https://www.maformation.fr/"
          class="
            link-header 
            typo-s 
            mt-4
            sm:mt-0
            connected:hidden">
          Formation
        </a>
      </li>

      <li class="max-w-[250px] hidden not-connected:lg:block connected:hidden">
        <details data-controller="details"
                 data-action="
                    details:not:sm->details#expand
                    details:not:sm->details#disableClickOutside
                    details:is:sm->details#collapse
                    details:is:sm->details#enableClickOutside
                    details:click:outside->details#collapse
                ">
          <summary 
            data-cy="headerAccountMenu" 
            class="hidden text-white sm:btn-primary-l relative" 
            aria-label="Accès mon compte"
            data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;cta&quot;:&quot;menu-se-connecter&quot;,&quot;wording&quot;:&quot;menu-se-connecter&quot;}"
            data-action="click->analytics#push"
          >
            <svg class="size-4">
              <use href="/svg/icons/user.svg#user"></use>
            </svg>
            Se&nbsp;connecter
            <div class="absolute -top-1 right-1">
              

<div class="
  rounded-full 
  bg-error-500
  size-3 border-solid border-[2px] border-white
">
</div>
            </div>
          </summary>
          <div class="sm:relative">
            <menu class="flex flex-col items-center bg-white rounded-sm border-grey-300 sm:z-10 sm:p-2 sm:mt-3 sm:w-max sm:absolute sm:border sm:right-0">
              <li class="sm:w-full connected:hidden">
                <span
                  data-controller="atc"
                  data-atc-l-value="x/se-se/pnaqvqng/pbaarkvba-vafpevcgvba=pt=ugzy#pbaarkvbaf"
                  data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;cta&quot;:&quot;menu-se-connecter&quot;,&quot;wording&quot;:&quot;Se connecter&quot;}"
                  data-action="click->analytics#push"
                  class="no-underline"
                >
                  <span data-cy="headerAccountLogIn" class="hidden sm:block atc-m sm:atc-s sm:rounded-xs sm:p-2">Se&nbsp;connecter</span>
                </span>
              </li>
              <li class="sm:w-full connected:hidden">
                <span
                  data-cy="headerAccountRegister"
                  data-controller="atc"
                  data-atc-l-value="x/se-se/pnaqvqng/pbaarkvba-vafpevcgvba=pt=ugzy#vafpevcgvbaf"
                  data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;cta&quot;:&quot;menu-se-connecter&quot;,&quot;wording&quot;:&quot;S&#x27;inscrire&quot;}"
                  data-action="click->analytics#push"
                  class="atc-m sm:atc-s sm:rounded-xs sm:p-2"
                >
                  S'inscrire
                </span>
              </li>
            </menu>
          </div>

        </details>
      </li>
      <button
          class="flex w-min h-fit items-center cursor-pointer connected:hidden lg:hidden"
          data-controller="input-checker toggle"
          data-toggle-toggled-class="hidden"
          data-input-checker-input-value="#cp-mobile-menu-side-panel"
          data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;cta&quot;:&quot;menu-burger&quot;,&quot;wording&quot;:&quot;menu-burger&quot;}"
          aria-label="Ouvrir le menu"
          data-action="toggle-on-body#add click->input-checker#check analytics#push from-account-data:empty->toggle#toggle">
          <svg class="size-4 relative">
            <use href="/svg/header/burger.svg#burger"/>
            <div class="absolute top-4 sm:top-5 right-3 sm:right-5">
              

<div class="
  rounded-full 
  bg-error-500
  size-3 border-solid border-[2px] border-white
">
</div>
            </div>
          </svg>
      </button>
    </menu>
  </nav>
</div>


                    



<div data-show-on-auth-state-target="connected" class="hidden">
  <nav class="flex items-center sm:ml-4">
    <menu class="flex items-center gap-4 sm:gap-6">
      <li class="text-center">
        <a
          href="/fr-fr/emploi.html"
          title="Offres d'emploi"
          aria-label="Trouver mon job"
          data-analytics-values-param="
            {&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;cta&quot;:&quot;trouver-mon-job&quot;,&quot;wording&quot;:&quot;Trouver-mon-job&quot;}"
          data-action="click->analytics#push"
          class="
            link-header 
            typo-s 
            gap-1
            
        ">
          <span class="hidden sm:inline">Trouver mon </span>
          <span>
            <span class="uppercase sm:lowercase">j</span>ob<span class="sm:hidden">s</span>
          </span>
        </a>
      </li>

      <li class="text-center">
        <a
          href="/fr-fr/entreprise.html"
          title="Entreprises qui recrutent"
          aria-label="Trouver mon entreprise"
          data-analytics-values-param="
            {&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;cta&quot;:&quot;trouver-mon-entreprise&quot;,&quot;wording&quot;:&quot;Trouver-mon-entreprise&quot;}"
          data-action="click->analytics#push"
          class="
            link-header 
            typo-s 
            gap-1
            
          ">
          <span class="hidden sm:inline">Trouver mon </span>
          <span>
            <span class="uppercase sm:lowercase">e</span>ntreprise<span class="sm:hidden">s</span>
          </span>
        </a>
      </li>

      <li class="flex items-center">
        <details
          class="hidden sm:flex relative"
          data-controller="click-outside toggle-attribute toggle"
          data-toggle-toggled-additional-class="rotate-180"
          data-toggle-attribute-target="element"
          data-toggle-attribute-attribute-param="open"
          data-action="
            click-outside:click:outside->toggle-attribute#unsetAttribute
            click-outside:click:outside->toggle#removeAdditional
            click->toggle#toggleAdditional"
        >
          <summary aria-label="Ouvrir le menu déroulant"
                   class="cursor-pointer flex items-center justify-center">
            <div class="pr-0 sm:pr-2">
              <span
                  data-controller="toggle"
                  data-toggle-toggled-class="hidden"
                  data-toggle-target="toToggle"
                  data-action="from-account-data:empty@document->toggle#add from-account-data:copied:Initials@document->toggle#remove">
                



<div
    class="bg-blue-500 min-w-8 min-h-8 size-8 rounded-full flex items-center justify-center relative overflow-hidden">
    <div class="text-white absolute typo-s-bold"
         data-controller="from-account-data"
         data-action="fetch-account-data:account-data-refreshed@document->from-account-data#copy"
         data-from-account-data-copy-value="Initials"
         data-from-account-data-into-value="innerText">
    </div>
</div>
              </span>
              <span class="hidden"
                  data-controller="toggle"
                  data-toggle-toggled-class="hidden"
                  data-toggle-target="toToggle"
                  data-action="from-account-data:empty@document->toggle#remove from-account-data:copied:Initials@document->toggle#add">
                


<div
    class="bg-grey-100 min-w-8 min-h-8 size-8 rounded-full flex items-center justify-center relative overflow-hidden">
    <svg
        class="text-grey-300 aspect-[38/44] w-[21px] absolute bottom-0">
        <use href="/svg/icons/user.svg#avatar"></use>
    </svg>
</div>
              </span>
            </div>
            <svg class="size-3"
                 data-toggle-target="toToggleAdditional">
              <use href="/svg/icons/arrow.svg#down"></use>
            </svg>
          </summary>
          <menu class="
              flex
              z-[11]
              flex-col 
              items-center 
              bg-white 
              rounded-sm 
              border-grey-300 
              sm:p-2
              sm:mt-3
              sm:w-max
              sm:absolute
              sm:border
              sm:right-0
              sm:top-8
          ">
            <li class="
                hidden connected:block 
                mt-4 
                sm:mt-auto 
                sm:w-full
            ">
              <span
                data-controller="atc"
                data-cy="headerAccountMyDashboardLink"
                data-atc-l-value="x/se-se/pnaqvqng/zba-rfcnpr=pt=ugzyf"
                class="atc-m sm:atc-s sm:rounded-xs sm:p-2">
                Mon espace
              </span>
            </li>
            <li class="
                hidden connected:block 
                mt-4 
                sm:mt-auto 
                sm:w-full
            ">
              <span
                data-controller="atc"
                data-cy="headerAccountMyDashboardLink"
                data-atc-l-value="x/se-se/pnaqvqng/zrf-pi-ihf=pt=ugzyf"
                class="atc-m sm:atc-s sm:rounded-xs sm:p-2">
                Mes CV vus
              </span>
            </li>
            <li class="
                hidden connected:block 
                mt-4 
                sm:mt-auto 
                sm:w-full
            ">
              <span
                data-controller="atc"
                data-cy="headerAccountMyDashboardLink"
                data-atc-l-value="x/se-se/pnaqvqng/zrf-pnaqvqngherf=pt=ugzyf"
                class="atc-m sm:atc-s sm:rounded-xs sm:p-2">
                Mes candidatures
              </span>
            </li>
            <li class="
                hidden
                connected:block
                mt-4
                sm:mt-auto
                sm:w-full
            ">
              <span
                data-controller="atc"
                data-cy="headerAccountMyAlertLink"
                data-atc-l-value="x/se-se/pnaqvqng/zrf-nyregrf=pt=ugzyf"
                class="atc-m sm:atc-s sm:rounded-xs sm:p-2">
                Mes alertes
              </span>
            </li>
            <li class="
                hidden connected:block
                mt-4
                sm:mt-auto sm:w-full
            ">
              <span
                data-controller="atc"
                data-cy="headerAccountMyAccountLink"
                data-atc-l-value="x/se-se/pnaqvqng/zba-cebsvy=pt=ugzyf"
                class="atc-m sm:atc-s sm:rounded-xs sm:p-2">
                Mon profil
              </span>
            </li>
            <li class="
                hidden connected:block
                mt-4
                sm:mt-auto sm:w-full
            ">
              <span
                data-controller="atc"
                data-cy="headerAccountMyParametersLink"
                data-atc-l-value="x/se-se/pnaqvqng/cnenzrgerf=pt=ugzyf"
                class="atc-m sm:atc-s sm:rounded-xs sm:p-2">
                Paramètres
              </span>
            </li>
            <li class="
                hidden connected:block
                mt-4
                sm:mt-auto sm:w-full
            ">
              <span
                data-controller="atc"
                data-cy="headerAccountLogOut"
                data-atc-l-value="x/se-se/pnaqvqng/ybtbss?ergheaHey=%2Sse-se%2Srzcybv%2Serpurepur=pt=ugzy%3Sx%3Qq%25P3%25N9irybccrhe%26y%3QYvyyr%26c%3Q1f"
                class="atc-m sm:atc-s sm:rounded-xs sm:p-2">
                Déconnexion
              </span>
            </li>
          </menu>
        </details>

        <button
          class="flex w-min h-fit items-center cursor-pointer sm:hidden"
          data-controller="input-checker"
          data-input-checker-input-value="#cp-mobile-menu-side-panel"
          aria-label="Ouvrir le menu"
          data-action="toggle-on-body#add click->input-checker#check">
          <div class="flex mr-2">
            <span
                data-controller="toggle"
                data-toggle-toggled-class="hidden"
                data-toggle-target="toToggle"
                data-action="from-account-data:empty@document->toggle#add from-account-data:copied:Initials@document->toggle#remove">
              



<div
    class="bg-blue-500 min-w-8 min-h-8 size-8 rounded-full flex items-center justify-center relative overflow-hidden">
    <div class="text-white absolute typo-s-bold"
         data-controller="from-account-data"
         data-action="fetch-account-data:account-data-refreshed@document->from-account-data#copy"
         data-from-account-data-copy-value="Initials"
         data-from-account-data-into-value="innerText">
    </div>
</div>
            </span>
            <span class="hidden"
                data-controller="toggle"
                data-toggle-toggled-class="hidden"
                data-toggle-target="toToggle"
                data-action="from-account-data:empty@document->toggle#remove from-account-data:copied:Initials@document->toggle#add">
              


<div
    class="bg-grey-100 min-w-8 min-h-8 size-8 rounded-full flex items-center justify-center relative overflow-hidden">
    <svg
        class="text-grey-300 aspect-[38/44] w-[21px] absolute bottom-0">
        <use href="/svg/icons/user.svg#avatar"></use>
    </svg>
</div>
            </span>
          </div>
          <svg class="size-4">
            <use href="/svg/header/burger.svg#burger"></use>
          </svg>
        </button>
      </li>
    </menu>
  </nav>
</div>
                </div>
            </header>
        </div>
        </div>
</div>







    
<div 
    data-controller="smart-banner removable"
    data-action="removable:removed->smart-banner#close"
    data-smart-banner-cookie-lifespan-value="30"
    data-smart-banner-display-on-first-page-value="False"
>
    <div data-smart-banner-target="container"></div>

    <template data-smart-banner-target="template">
        <div class="fixed inset-0 z-50 bg-black/40"
             data-controller="intersect"
             data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;appbox_click&quot;,&quot;event_info&quot;:&quot;Affichage de la banni&#xE8;re&quot;}"
             data-action="intersect:enter->analytics#push:once">
            <div class="fixed inset-x-0 bottom-0 flex flex-col gap-8 bg-white rounded-t-sm p-6"
                 data-controller="focus-trap"
                 data-focus-trap-target="container"
                 role="dialog"
                 aria-modal="true"
                 aria-labelledby="smart-banner-title">
                <div class="flex flex-col gap-3">
                    <div class="flex items-start">
                        <img
                            alt=""
                            loading="lazy"
                            src="/images/smartbanner/astro-buddy.webp"
                            width="1000" height="563"
                            class="flex-1 min-w-0 h-auto"
                        />
                        <button type="button" aria-label="Fermer" class="shrink-0" data-action="removable#remove">
                            <svg class="size-3" aria-hidden="true">
                                <use href="/svg/icons/nav/close.svg#close"></use>
                            </svg>
                        </button>
                    </div>
                    <p id="smart-banner-title" class="typo-l-bold">Gagnez du temps avec l'app</p>
                </div>

                <p class="typo-long-s">Recevez une notification dès qu'une offre est publiée et postulez en quelques clics.</p>

                <div class="flex flex-col items-center gap-4">
                    <span 
                        data-controller="atc"
                        aria-label="Continuer dans l'application Hellowork (nouvelle fenêtre)"
                        data-atc-l-value="xuggcf://uryybjbex=pt=baryvax=pt=zr/7XHy/76h4uumdf"
                        data-atc-t-value="x_oynaxf"
                        data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;appbox_click&quot;,&quot;event_info&quot;:&quot;T&#xE9;l&#xE9;chargement de l&#x27;application&quot;,&quot;cta&quot;:&quot;download-button&quot;,&quot;wording&quot;:&quot;Continuer dans l&#x27;app&quot;}"
                        data-action="analytics#push removable#remove"
                        class="btn-primary-l w-full justify-center"
                    >
                        Continuer dans l'app
                        <svg class="size-4 text-white" aria-hidden="true">
                            <use href="/svg/icons/external-link.svg#external-link"></use>
                        </svg>
                    </span>
                    <button type="button" class="typo-long-m underline" data-action="removable#remove">
                        Rester sur le navigateur
                    </button>
                </div>
            </div>
        </div>
    </template>
</div>
   






<turbo-frame
    id="turboSerp"
    data-turbo-action="advance"
    data-controller="state checkbox-sync clear-inputs"
    data-clear-inputs-all-value="true"
    data-scroll-to-top-behavior-param="smooth"
    data-action="turbo:before-frame-render->scroll-to-top#scroll:self"
    data-fetch-account-data-target="offersInPage"
>
    
    <section class="
            sm:layout-wrapper
            relative
            mx-2
            -mb-10
            sm:-mb-12
            2xl:m-auto
            2xl:-mb-12
        "
    >
        <picture>
            <source
                media="(max-width: 639px)"
                srcset="
                    /images/serp/subheader_serp_2025_mobile.webp,
                    /images/serp/subheader_serp_2025_mobile_x3.webp 3x
                "
            >
            <source
                media="(min-width: 640px)"
                srcset="
                    /images/serp/subheader_serp_2025_desk.webp,
                    /images/serp/subheader_serp_2025_desk_x3.webp 3x
                "
            >
            <img
                src="/images/serp/subheader_serp_2025_desk.webp"
                alt=""
                class="
                    skeleton
                    object-cover
                    object-center
                    sm:object-[15%_50%]
                    w-full
                    rounded-sm
                    h-[88px]
                    sm:h-[152px]
                "
            >
        </picture>
    </section>
<div id="main-content"></div>




<div
    data-controller="input-checker"
    data-input-checker-input-value="#toggleNarrowSearchEngine"
    data-toggle-on-body-force-param="true"
    data-action="click->input-checker#check"
    class="layout-grid sm:hidden relative"
>
    <div
        class="flex items-center gap-3 p-3 bg-white border border-grey-300 rounded-sm"
    >
        <div
            class="flex-grow min-w-0"
        >
            <div class="mb-1 typo-m-bold uppercase sm:normal-case">
                Trouver mon job
            </div>
            <div class="whitespace-nowrap overflow-hidden text-ellipsis" data-cy="homeSearchEngine">
                    <span class="text-black">d&#xE9;veloppeur &#x2022; Lille</span>
            </div>
        </div>
        <div class="flex btn-icon-primary-l text-white shrink-0">
            <svg class="size-4">
                <use href="/svg/icons/search.svg#search"></use>
            </svg>
        </div>
    </div>
</div>

<div
    data-controller="sticky-detector"
    data-sticky-detector-stuck-class="stuck"
    class="sticky block sm:hidden -top-px z-10 group"
>
    <div
        class="absolute bg-white shadow-engine sm:shadow-engine-desk layout-wrapper w-full pt-2 pb-3 px-4 hidden group-stuck:flex transition-opacity duration-100">
        <div data-controller="input-checker"
             data-input-checker-input-value="#toggleNarrowSearchEngine"
             data-toggle-on-body-force-param="true"
             data-action="click->input-checker#check"
             class="bg-grey-50 flex-grow flex py-2 px-3 rounded-sm min-w-0 active:ring-1 active:ring-black">
            <div class="content-center mr-2">
                <svg class="size-3">
                    <use href="/svg/icons/search.svg#search"></use>
                </svg>
            </div>
            <span class="text-black truncate">d&#xE9;veloppeur &#x2022; Lille</span>
        </div>
            <div class="sm:flex my-auto pl-4">
                



<label
    class="cursor-pointer tag-primary-s relative border !border-black"
    for="allFilters"
    data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;filter_load&quot;,&quot;event_info&quot;:&quot;all&quot;,&quot;cta&quot;:&quot;sticky&quot;}"
    data-action="click->toggle-on-body#toggle click->state#save click->analytics#push"
    data-cy="serpFilters"
>
    Filtres
    <svg class="ml-1 size-3" aria-hidden="true">
        <use href="/svg/icons/filter.svg#filter"></use>
    </svg>

        <div class="absolute right-0 top-0 -mr-[9px] -mt-[9px] px-[6px] bg-black typo-xs-bold text-white rounded-full flex text-center">1</div>
</label>
            </div>
    </div>
</div>

<input type="checkbox" class="hidden peer" id="toggleNarrowSearchEngine">
<form
    id="searchForm"
    data-turbo-frame="searchOfferFacetFrame"
    action="/fr-fr/searchoffers/getfacetmodalcontentframeview"
    method="GET"
    role="region"
    aria-label="Moteur de recherche"
    class="
        invisible
        z-30
        sm:z-10
        peer-checked:visible
        fixed
        -top-px
        inset-0
        backdrop-blur
        bg-black/40
        sm:visible
        sm:sticky
        sm:backdrop-filter-none
        sm:bg-transparent
        group
    "
    data-controller="sticky-detector input-checker auto-submittable"
    data-sticky-detector-stuck-class="stuck sm:bg-white shadow-engine sm:shadow-engine-desk"
    data-input-checker-input-value="#toggleNarrowSearchEngine"
    data-action="click->input-checker#uncheck:self keydown.enter->analytics#push"
    data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;search_click&quot;,&quot;event_info&quot;:&quot;saisie libre&quot;,&quot;cta&quot;:&quot;enter&quot;}"
>
    <fieldset>
        <legend class="sr-only">Effectuer une recherche d'emploi par localité</legend>
        <div
            class="sm:layout-grid"
        >
            <div
                class=" absolute inset-0 mt-20 bg-white rounded-t-sm sm:rounded-none p-6 translate-y-full peer-parent-checked:translate-y-0 transition-transform duration-300 sm:static sm:layout-inner-grid sm:mt-0 sm:bg-transparent sm:p-0 sm:translate-y-0"
            >
                <div
                    class="hidden group-stuck:sm:flex col-span-3 items-center"
                >
                    <span
                        class="cursor-pointer"
                        data-controller="atc"
                        data-atc-l-value="xuggcf://jjj=pt=uryybjbex=pt=pbz/se-se/f"
                        data-turbo="false"
                    >
                        <svg class="aspect-[99/44] h-12">
                            <use href="/svg/logo/hellowork.svg#black"></use>
                        </svg>
                    </span>
                </div>

                <div
                    class="gap-6 sm:gap-0 flex flex-col h-full sm:flex-row sm:col-start-2 sm:col-end-12 sm:border sm:border-grey-300 sm:rounded-2xl sm:bg-white group-stuck:border-none group-stuck:rounded-none group-stuck:col-start-4 group-stuck:col-end-13"
                >
                    <div
                        data-controller="intersect"
                        data-toggle-on-body-force-param="false"
                        data-action="click->input-checker#uncheck intersect:enter->toggle-on-body#add intersect:exit->toggle-on-body#remove"
                        class="flex h-7 w-7 items-center justify-start sm:hidden"
                        tabindex="0"
                    >
                        <svg class="size-3">
                            <use href="/svg/icons/nav/close.svg#close"></use>
                        </svg>
                    </div>
                    <div
                        class="flex flex-col items-start gap-4 sm:flex-row sm:items-stretch sm:gap-0 sm:grow"
                    >
                        <div
                            class="w-full"
                            data-controller="toggle append-values focusable intersect"
                            data-toggle-toggled-class="!visible opacity-100 -translate-y-20 sm:transform-none"
                            data-append-values-placeholder-value="Métier, entreprise, compétence..."
                            data-append-values-empty-class="text-grey-500"
                            data-action="intersect:enter->append-values#append"
                        >
                            <button
                                class="w-full text-left border border-grey-300 rounded-sm px-4 py-3 sm:hidden"
                                type="button"
                                data-action="
                                    toggle#toggle
                                    focusable#focus
                                "
                            >
                                <div
                                    class="typo-xs-cap-bold mb-1"
                                >
                                    Quoi ?
                                </div>
                                <div
                                    data-append-values-target="to"
                                    class="text-grey-500 typo-m whitespace-nowrap overflow-hidden text-ellipsis"
                                    data-cy="whatSearchEngine"
                                >
                                    Métier, entreprise, compétence...
                                </div>
                            </button>
                            <div
                                class=" sm:relative sm:grow sm:px-6 sm:py-[26px] sm:border-r sm:border-r-grey-100 sm:rounded-l-2xl sm:hocus-within:bg-grey-50
                                        group-stuck:px-3 group-stuck:rounded-sm group-stuck:py-0 group-stuck:mr-6 group-stuck:my-2 sm:group-stuck:my-3 group-stuck:bg-grey-50
                                        group-stuck:border-none sm:group-stuck:hocus-within:ring-1 sm:group-stuck:hocus-within:ring-black
                                ">
                                <div
                                    class="
                                        absolute inset-0 -bottom-20 bg-white px-4 pt-3 overflow-hidden flex flex-col
                                        opacity-0 invisible transition-[opacity,transform] duration-300
                                        sm:static sm:opacity-100 sm:visible sm:bg-transparent sm:p-0 sm:overflow-visible
                                        group-stuck:py-3
                                    "
                                    data-toggle-target="toToggle">
                                    <button
                                        class="flex h-7 w-7 items-center justify-start mb-3 sm:hidden"
                                        type="button"
                                        data-action="toggle#toggle">
                                        <svg class="size-3">
                                            <use href="/svg/icons/arrow.svg#left"></use>
                                        </svg>
                                    </button>
                                    


<div
    class="typo-xs-cap-bold mt-4 sm:mt-0 mb-1 group-stuck:hidden"
>
    Quoi ?
</div>
<div
    data-controller="autocomplete autocomplete-simple clearable focus-group"
    data-action="
        autocomplete:click:outside->autocomplete#closeDropdown
        autocomplete:selected->autocomplete-simple#fillSuggestion
        autocomplete:selected->append-values#append
        autocomplete:selected->toggle#toggle
        keydown.up->focus-group#focusPreviousElement
        keydown.down->focus-group#focusNextElement
        keydown->autocomplete-simple#clearSuggestion
    "
    data-autocomplete-name-value="k_autocomplete"
    data-autocomplete-number-min-length-value="0"
    data-autocomplete-url-value="https://www.hellowork.com/fr-fr/searchoffers/getsearchenginegroupedjobsuggestionsframeview?displayMissingResultMessage=False"
    data-autocomplete-hiding-class="hidden"
    class="flex flex-col overflow-auto sm:overflow-visible"
>
    <div
        class="flex border justify-between border-grey-300 rounded-sm p-3 focus-within:border-black sm:static sm:border-none sm:p-0"
    >
        <input
            data-controller="toggle"
            data-toggle-toggled-class="outline-none"
            data-toggle-target="toToggle"
            name="k"
            placeholder="M&#xE9;tier, entreprise, comp&#xE9;tence..."
            id="k"
            value="d&#xE9;veloppeur"
            data-action="
                autocomplete#suggestIfNeeded
                mousedown->toggle#add
                focusout->toggle#remove
            "
            data-clearable-target="field"
            data-autocomplete-simple-target="field"
            data-append-values-target="from"
            data-focusable-target="field"
            class="w-11/12 text-ellipsis typo-m placeholder:text-grey-500 peer rounded-xs outline-offset-4 outline-0 sm:outline-2 focus-visible:outline bg-inherit"
            data-lpignore="true" data-form-type="other" data-1p-ignore="" data-bwignore="" data-protonpass-ignore="" data-keeper-ignore="" data-np-ignore=""
        >
        <input
            type="hidden"
            name="k_autocomplete"
            data-autocomplete-simple-target="hiddenInput"
        >
        <button
            aria-label="effacer la recherche M&#xE9;tier, entreprise, comp&#xE9;tence..."
            type="button"
            class="hocus:scale-125 peer-placeholder-shown:invisible transition-transform duration-200 rounded-xs"
            data-action="
                clearable#clear
                autocomplete-simple#clearSuggestion
                append-values#append
                autocomplete#closeDropdown
            "
        >
            <svg class="size-3">
                <use href="/svg/icons/nav/close.svg#close"></use>
            </svg>
        </button>
    </div>
    <turbo-frame
        id="JobSuggestionsGroupedFrame"
        data-autocomplete-target="dropdown frame"
        data-turbo="true"
        src=""
        class="
            block mt-[1px] sm:absolute sm:h-auto sm:z-10 sm:top-full sm:left-0 sm:right-0
        "
    >
    </turbo-frame>
</div>

                                </div>
                            </div>
                        </div>
                        <div
                            class="w-full"
                            data-controller="toggle append-values focusable intersect"
                            data-toggle-toggled-class="!visible opacity-100 -translate-y-20 sm:transform-none"
                            data-append-values-placeholder-value="Ville, département, code postal..."
                            data-append-values-empty-class="text-grey-500"
                            data-action="intersect:enter->append-values#append"
                        >
                            <button
                                class="w-full text-left border border-grey-300 rounded-sm px-4 py-3 sm:hidden"
                                type="button"
                                data-action="
                                    toggle#toggle
                                    focusable#focus
                                "
                            >
                                <div
                                    class="typo-xs-cap-bold mb-1"
                                >
                                    Où ?
                                </div>
                                <div
                                    data-append-values-target="to"
                                    class="text-grey-500 typo-m whitespace-nowrap overflow-hidden text-ellipsis"
                                    data-cy="whereSearchEngine"
                                >
                                    Ville, département, code postal...
                                </div>
                            </button>
                            <div
                                class=" sm:relative sm:grow sm:px-6 sm:py-[26px] sm:border-r sm:border-r-grey-100 sm:hocus-within:bg-grey-50
                                        group-stuck:px-3 group-stuck:rounded-sm group-stuck:py-0 group-stuck:mr-6 group-stuck:my-2 sm:group-stuck:my-3 group-stuck:bg-grey-50
                                        group-stuck:border-none sm:group-stuck:hocus-within:ring-1 sm:group-stuck:hocus-within:ring-black
                                "
                            >
                                <div
                                    class="
                                        absolute inset-0 -bottom-20 bg-white px-4 pt-3 overflow-hidden flex flex-col
                                        opacity-0 invisible transition-[opacity,transform] duration-300
                                        sm:static sm:opacity-100 sm:visible peer-checked:sm:transform-none sm:bg-transparent sm:p-0 sm:overflow-visible
                                        group-stuck:py-3
                                    "
                                    data-toggle-target="toToggle"
                                >
                                    <button
                                        class="flex h-7 w-7 items-center justify-start mb-3 sm:hidden"
                                        type="button"
                                        data-action="toggle#toggle"
                                    >
                                        <svg class="size-3">
                                            <use href="/svg/icons/arrow.svg#left"></use>
                                        </svg>
                                    </button>
                                    


<div
    class="typo-xs-cap-bold mt-4 sm:mt-0 mb-1 group-stuck:hidden"
>
    O&#xF9; ?
</div>
<div
    data-controller="autocomplete autocomplete-simple clearable focus-group"
    data-action="
        autocomplete:click:outside->autocomplete#closeDropdown
        autocomplete:selected->autocomplete-simple#fillSuggestion
        autocomplete:selected->append-values#append
        autocomplete:selected->toggle#toggle
        keydown.up->focus-group#focusPreviousElement
        keydown.down->focus-group#focusNextElement
        keydown->autocomplete-simple#clearSuggestion
    "
    data-autocomplete-name-value="l_autocomplete"
    data-autocomplete-number-min-length-value="2"
    data-autocomplete-url-value="https://www.hellowork.com/fr-fr/search/getsearchenginelocationsuggestionsframeview?displayMissingResultMessage=False"
    data-autocomplete-hiding-class="hidden"
    class="flex flex-col overflow-auto sm:overflow-visible"
>
    <div
        class="flex border justify-between border-grey-300 rounded-sm p-3 focus-within:border-black sm:static sm:border-none sm:p-0"
    >
        <input
            data-controller="toggle"
            data-toggle-toggled-class="outline-none"
            data-toggle-target="toToggle"
            name="l"
            placeholder="Ville, d&#xE9;partement, code postal..."
            id="l"
            value="Lille"
            data-action="
                autocomplete#suggestIfNeeded
                mousedown->toggle#add
                focusout->toggle#remove
            "
            data-clearable-target="field"
            data-autocomplete-simple-target="field"
            data-append-values-target="from"
            data-focusable-target="field"
            class="w-11/12 text-ellipsis typo-m placeholder:text-grey-500 peer rounded-xs outline-offset-4 outline-0 sm:outline-2 focus-visible:outline bg-inherit"
            data-lpignore="true" data-form-type="other" data-1p-ignore="" data-bwignore="" data-protonpass-ignore="" data-keeper-ignore="" data-np-ignore=""
        >
        <input
            type="hidden"
            name="l_autocomplete"
            data-autocomplete-simple-target="hiddenInput"
        >
        <button
            aria-label="effacer la recherche Ville, d&#xE9;partement, code postal..."
            type="button"
            class="hocus:scale-125 peer-placeholder-shown:invisible transition-transform duration-200 rounded-xs"
            data-action="
                clearable#clear
                autocomplete-simple#clearSuggestion
                append-values#append
                autocomplete#closeDropdown
            "
        >
            <svg class="size-3">
                <use href="/svg/icons/nav/close.svg#close"></use>
            </svg>
        </button>
    </div>
    <turbo-frame
        id="LocalitySuggestionsGroupedFrame"
        data-autocomplete-target="dropdown frame"
        data-turbo="true"
        src=""
        class="
            block mt-[1px] sm:absolute sm:h-auto sm:z-10 sm:top-full sm:left-0 sm:right-0
        "
    >
    </turbo-frame>
</div>

                                </div>
                            </div>
                        </div>
                        <div
                            class="w-full sm:hidden"
                            data-controller="toggle append-values intersect clear-inputs checkbox-sync"
                            data-toggle-toggled-class="!visible opacity-100 -translate-y-20"
                            data-append-values-placeholder-value="CDI, CDD, intérim, stage..."
                            data-append-values-empty-class="text-grey-500"
                            data-action="intersect:enter->append-values#append"
                            data-cy="contractsSearchEngine"
                        >
                            <button
                                class="w-full text-left border border-grey-300 rounded-sm px-4 py-3"
                                type="button"
                                data-action="toggle#toggle"
                            >
                                <div
                                    class="typo-xs-cap-bold mb-1"
                                >
                                    Contrats
                                </div>
                                <div
                                    data-append-values-target="to"
                                    class="text-grey-500 typo-m whitespace-nowrap overflow-hidden text-ellipsis"
                                    data-cy="contractSearchEngine"
                                >
                                    CDI, CDD, intérim, stage...
                                </div>
                            </button>
                            <div
                                class="
                                    absolute inset-0 -bottom-20 bg-white overflow-hidden flex flex-col
                                    opacity-0 invisible transition-[opacity,transform] duration-300
                                "
                                data-toggle-target="toToggle"
                                data-checkbox-sync-target="container"
                            >
                                <button
                                    class="flex items-center justify-start m-4"
                                    type="button"
                                    data-action="toggle#toggle"
                                >
                                    <svg class="size-3">
                                        <use href="/svg/icons/arrow.svg#left"></use>
                                    </svg>
                                </button>
                                

<div class="typo-l-bold p-4">
    Contrats
</div>
<ul
    class="flex flex-col overflow-auto gap-1 px-4"
>
        <li class="flex items-center typo-m">
            <label 
                class="leading-[48px] w-full"
                for="CDI-mobile">
                CDI
            </label>
            <input
                class="checkbox"
                type="checkbox"
                name="c"
                value="CDI"
                id="CDI-mobile"
                data-append-values-target="from"
                data-checkbox-sync-target="checkbox"
                data-action="append-values#append checkbox-sync#syncAllCheckboxes"
                
                form=search-form 
>
        </li>
        <li class="flex items-center typo-m">
            <label 
                class="leading-[48px] w-full"
                for="CDD-mobile">
                CDD
            </label>
            <input
                class="checkbox"
                type="checkbox"
                name="c"
                value="CDD"
                id="CDD-mobile"
                data-append-values-target="from"
                data-checkbox-sync-target="checkbox"
                data-action="append-values#append checkbox-sync#syncAllCheckboxes"
                
                form=search-form 
>
        </li>
        <li class="flex items-center typo-m">
            <label 
                class="leading-[48px] w-full"
                for="Travail_temp-mobile">
                Int&#xE9;rim
            </label>
            <input
                class="checkbox"
                type="checkbox"
                name="c"
                value="Travail_temp"
                id="Travail_temp-mobile"
                data-append-values-target="from"
                data-checkbox-sync-target="checkbox"
                data-action="append-values#append checkbox-sync#syncAllCheckboxes"
                
                form=search-form 
>
        </li>
        <li class="flex items-center typo-m">
            <label 
                class="leading-[48px] w-full"
                for="Stage-mobile">
                Stage
            </label>
            <input
                class="checkbox"
                type="checkbox"
                name="c"
                value="Stage"
                id="Stage-mobile"
                data-append-values-target="from"
                data-checkbox-sync-target="checkbox"
                data-action="append-values#append checkbox-sync#syncAllCheckboxes"
                
                form=search-form 
>
        </li>
        <li class="flex items-center typo-m">
            <label 
                class="leading-[48px] w-full"
                for="Alternance-mobile">
                Alternance
            </label>
            <input
                class="checkbox"
                type="checkbox"
                name="c"
                value="Alternance"
                id="Alternance-mobile"
                data-append-values-target="from"
                data-checkbox-sync-target="checkbox"
                data-action="append-values#append checkbox-sync#syncAllCheckboxes"
                
                form=search-form 
>
        </li>
        <li class="flex items-center typo-m">
            <label 
                class="leading-[48px] w-full"
                for="Independant-mobile">
                Ind&#xE9;pendant
            </label>
            <input
                class="checkbox"
                type="checkbox"
                name="c"
                value="Independant"
                id="Independant-mobile"
                data-append-values-target="from"
                data-checkbox-sync-target="checkbox"
                data-action="append-values#append checkbox-sync#syncAllCheckboxes"
                
                form=search-form 
>
        </li>
        <li class="flex items-center typo-m">
            <label 
                class="leading-[48px] w-full"
                for="Franchise-mobile">
                Franchise
            </label>
            <input
                class="checkbox"
                type="checkbox"
                name="c"
                value="Franchise"
                id="Franchise-mobile"
                data-append-values-target="from"
                data-checkbox-sync-target="checkbox"
                data-action="append-values#append checkbox-sync#syncAllCheckboxes"
                
                form=search-form 
>
        </li>
        <li class="flex items-center typo-m">
            <label 
                class="leading-[48px] w-full"
                for="Associe-mobile">
                Associ&#xE9;
            </label>
            <input
                class="checkbox"
                type="checkbox"
                name="c"
                value="Associe"
                id="Associe-mobile"
                data-append-values-target="from"
                data-checkbox-sync-target="checkbox"
                data-action="append-values#append checkbox-sync#syncAllCheckboxes"
                
                form=search-form 
>
        </li>
        <li class="flex items-center typo-m">
            <label 
                class="leading-[48px] w-full"
                for="Fonctionnaire-mobile">
                Fonctionnaire
            </label>
            <input
                class="checkbox"
                type="checkbox"
                name="c"
                value="Fonctionnaire"
                id="Fonctionnaire-mobile"
                data-append-values-target="from"
                data-checkbox-sync-target="checkbox"
                data-action="append-values#append checkbox-sync#syncAllCheckboxes"
                
                form=search-form 
>
        </li>
        <li class="flex items-center typo-m">
            <label 
                class="leading-[48px] w-full"
                for="Freelance-mobile">
                Freelance
            </label>
            <input
                class="checkbox"
                type="checkbox"
                name="c"
                value="Freelance"
                id="Freelance-mobile"
                data-append-values-target="from"
                data-checkbox-sync-target="checkbox"
                data-action="append-values#append checkbox-sync#syncAllCheckboxes"
                
                form=search-form 
>
        </li>
        <li class="flex items-center typo-m">
            <label 
                class="leading-[48px] w-full"
                for="Stage_de_lycee-mobile">
                Stage de lyc&#xE9;e
            </label>
            <input
                class="checkbox"
                type="checkbox"
                name="c"
                value="Stage_de_lycee"
                id="Stage_de_lycee-mobile"
                data-append-values-target="from"
                data-checkbox-sync-target="checkbox"
                data-action="append-values#append checkbox-sync#syncAllCheckboxes"
                
                form=search-form 
>
        </li>
</ul>
<div class="w-full p-4 justify-between flex items-center border-t border-t-grey-100">
    <button type="button" class="typo-s hover:underline" data-action="click->clear-inputs#clear click->checkbox-sync#syncAllCheckboxes click->append-values#append">
        Effacer
    </button>
    <button 
        class="btn-primary-l"
        type="button"
        data-action="toggle#toggle"
        data-cy="btnItemValidation"
    >
        Valider
    </button>
</div>
                            </div>
                        </div>
                    </div>
                <div class="mt-auto sm:mt-0 sm:p-6 group-stuck:px-3 group-stuck:py-0 sm:group-stuck:my-auto">
                    <button
                        formaction="/fr-fr/emploi/recherche.html"
                        data-turbo-frame="turboSerp"
                        aria-label="Lancer une recherche"
                        data-cy="searchEngineSubmitButton"
                        data-auto-submittable-target="submitter"
                        class="sm:hocus:scale-125 sm:transition-transform sm:duration-200 w-full sm:btn-icon-primary-l"
                    >
                        <div class="btn-primary-xl sm:hidden" data-action="click->input-checker#uncheck">
                            Rechercher
                        </div>
                        <div class="hidden btn-icon-primary-l text-white sm:flex">
                            <svg class="size-4">
                                <use href="/svg/icons/search.svg#search"></use>
                            </svg>
                        </div>
                    </button>
                </div>
                        <div
                            class="hidden group-stuck:sm:flex my-auto pl-4">
                            



<label
    class="cursor-pointer tag-primary-s relative border !border-black"
    for="allFilters"
    data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;filter_load&quot;,&quot;event_info&quot;:&quot;all&quot;,&quot;cta&quot;:&quot;sticky&quot;}"
    data-action="click->toggle-on-body#toggle click->state#save click->analytics#push"
    data-cy="serpFilters"
>
    Filtres
    <svg class="ml-1 size-3" aria-hidden="true">
        <use href="/svg/icons/filter.svg#filter"></use>
    </svg>

        <div class="absolute right-0 top-0 -mr-[9px] -mt-[9px] px-[6px] bg-black typo-xs-bold text-white rounded-full flex text-center">1</div>
</label>
                        </div>
                </div>
            </div>
        </div>
    </fieldset>
</form>



    

    <section class="layout-grid mt-[14px] sm:mt-[18px] relative"
             data-action="turbo:frame-render:turboSerp@document->analytics#push"
             data-analytics-values-param="{&quot;event&quot;:&quot;VirtualPageview-Ecommerce&quot;,&quot;categoryPage&quot;:&quot;SERP&quot;,&quot;sujetPage&quot;:&quot;Offre&quot;,&quot;typePage&quot;:&quot;LO-Moteur&quot;,&quot;idOffre&quot;:&quot;83042329,84228168,84000048,82946546,77669119,84375713,84025104,79418480,84245951,79418431,76339718,83962460,73395675,84206121,75360092,78970072,83597910,83596489,83925261,76396628,84035838,83786259,82598447,67170737,83962451,83863734,69495710,83445214,83967982,84387452&quot;,&quot;Domaine&quot;:&quot;&quot;,&quot;Region&quot;:&quot;&quot;,&quot;Departement&quot;:&quot;&quot;,&quot;Ville&quot;:&quot;&quot;,&quot;Metier&quot;:null,&quot;Resultat-Recherche&quot;:&quot;[101&#x2B;]&quot;,&quot;Compteur-Offre&quot;:&quot;623&quot;,&quot;searchOu&quot;:&quot;Lille&quot;,&quot;searchCategorie&quot;:&quot;&quot;,&quot;searchTypeContrat&quot;:&quot;&quot;,&quot;searchQuoi&quot;:&quot;d&#xE9;veloppeur&quot;,&quot;searchRayon&quot;:&quot;20 km&quot;,&quot;searchDate&quot;:&quot;Toutes&quot;,&quot;searchSecteur&quot;:&quot;&quot;,&quot;searchTypeEntreprise&quot;:&quot;&quot;,&quot;searchSalary&quot;:&quot;&quot;,&quot;searchSalaryOnly&quot;:false,&quot;searchTeletravail&quot;:&quot;&quot;,&quot;searchRhythm&quot;:&quot;&quot;,&quot;searchRseLabel&quot;:&quot;&quot;,&quot;searchDuration&quot;:&quot;Toutes les dur&#xE9;es&quot;,&quot;searchExperience&quot;:&quot;&quot;,&quot;searchPartTime&quot;:&quot;&quot;,&quot;EnhancedEcommerce&quot;:&quot;false&quot;,&quot;ecommerce&quot;:{&quot;currencyCode&quot;:&quot;EUR&quot;,&quot;impressions&quot;:[],&quot;promoView&quot;:null,&quot;click&quot;:null},&quot;page_component&quot;:null,&quot;mv_test&quot;:null,&quot;mv_creation&quot;:null}">
        <div class="layout-inner-grid">
            
            <section class="col-span-12 sm:col-span-10 sm:col-start-2">
                

<div 
    data-controller="input-checker intersect"
    data-intersect-name-value="buttonsBar" 
    class="flex flex-wrap mb-8 sm:mb-12 justify-between items-center"
>
    

<div class="overflow-x-auto hidden-scrollbar">
    <div class="flex gap-4 mt-2 mr-2">
        



<label
    class="cursor-pointer tag-primary-s sm:tag-primary-m 2xl:tag-primary-l relative border !border-black"
    for="allFilters"
    data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;filter_load&quot;,&quot;event_info&quot;:&quot;all&quot;,&quot;cta&quot;:&quot;top&quot;}"
    data-action="click->toggle-on-body#toggle click->state#save click->analytics#push"
    data-cy="serpFilters"
>
    Filtres
    <svg class="ml-1 size-3" aria-hidden="true">
        <use href="/svg/icons/filter.svg#filter"></use>
    </svg>

        <div class="absolute right-0 top-0 -mr-[9px] -mt-[9px] px-[6px] bg-black typo-xs-bold text-white rounded-full flex text-center">1</div>
</label>



<label
    class="tag-primary-s sm:tag-primary-m 2xl:tag-primary-l gag-3 cursor-pointer relative "
    for="modal-c"
    data-action="click->toggle-on-body#toggle click->state#save click->analytics#push"
    data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;filter_load&quot;,&quot;event_info&quot;:&quot;contract&quot;,&quot;cta&quot;:&quot;top&quot;}"
    data-cy="serpFilters">
Contrats    <svg class="hidden sm:block size-3" aria-hidden="true">
        <use href="/svg/icons/arrow.svg#down"></use>
    </svg>
</label>


<label
    class="tag-primary-s sm:tag-primary-m 2xl:tag-primary-l gag-3 cursor-pointer relative "
    for="modal-msa"
    data-action="click->toggle-on-body#toggle click->state#save click->analytics#push"
    data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;filter_load&quot;,&quot;event_info&quot;:&quot;salary&quot;,&quot;cta&quot;:&quot;top&quot;}"
    data-cy="serpFilters">
Salaire    <svg class="hidden sm:block size-3" aria-hidden="true">
        <use href="/svg/icons/arrow.svg#down"></use>
    </svg>
</label>


<label
    class="tag-green-s sm:tag-green-m 2xl:tag-green-l gag-3 cursor-pointer relative "
    for="modal-sr"
    data-action="click->toggle-on-body#toggle click->state#save click->analytics#push"
    data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;filter_load&quot;,&quot;event_info&quot;:&quot;super-recruiter&quot;,&quot;cta&quot;:&quot;top&quot;}"
    data-cy="serpFilters">
        <div class="flex gap-1 sm:gap-2 items-center flex-shrink-0">
            <svg class="size-3" aria-hidden="true">
                <use href="/svg/icons/super-recruiter/super-recruiter.svg#super-recruiter"></use>
            </svg>
            <span class="truncate">Super recruteur</span>
        </div>
    <svg class="hidden sm:block size-3" aria-hidden="true">
        <use href="/svg/icons/arrow.svg#down"></use>
    </svg>
</label>    </div>
</div>

    
        <div 
            data-controller="input-checker"
            data-input-checker-input-value="#alert-modal"
            class="hidden lg:block"
        >
            <button 
                class="btn-primary-m bg-yellow-300 text-black h-[28px] 2xl:h-[38px]"
                data-action="analytics#push input-checker#check"
                data-analytics-values-param='{"event": "EventGeneric", "EventName": "alert_load", "EventLibelle": "serp-top" }'
                data-cy="createAlertBtn"
            >
                <svg class="size-3" aria-hidden="true">
                    <use href="/svg/services/alert.svg#alert"></use>
                </svg>
                Créer mon alerte
            </button>
        </div>
</div>
            </section>

            <section class="col-span-12 2xl:col-start-2 2xl:col-span-10 mb-4 sm:mb-6">
                <div class="flex justify-between items-end">
                    
<div>
        <h1 class="typo-l-bold sm:typo-xl-bold">
            623 offres
        </h1>
</div>



                    


<div 
    data-controller="input-checker"
    data-input-checker-input-value="#sort-modal"
>
    <button
        class="flex items-center gap-2 group"
        data-action="analytics#push input-checker#check"
        data-analytics-values-param='{"event": "generic", "EventName": "sort_load" }'
        data-cy="sortBtn"
        aria-label="Trier les résultats de la recherche par pertinence ou date"
    >
        <span class="group-hover:underline">Pertinence</span>
        <svg class="size-3" aria-hidden="true">
            <use href="/svg/icons/sort.svg#sort"></use>
        </svg>
    </button>

    


<div id="sort-modal-container"
     data-controller="input-checker modal"
     data-modal-form-validator-outlet="form"
     
     data-input-checker-input-value="#sort-modal"
     data-action="modal:navigate-to-next-page@document->input-checker#uncheck"
     >
    <input type="checkbox" hidden id="sort-modal" class="peer" >
    <div class="
            fixed
            inset-0
            z-50
            overflow-auto
            bg-black/60
            sm:bg-black/40
            backdrop-blur
            sm:backdrop-blur-md
            items-end
            sm:items-center
            collapse
            opacity-0
            peer-checked:visible
            peer-checked:opacity-100
            transition-[visibility,_opacity]
            duration-700
        ">
        <div class="px-0 sm:px-6 layout-wrapper h-full hidden peer-parent-checked:block">
            <div
                class="layout-outer-grid h-full content-end sm:content-center"
                data-toggle-on-body-force-param="false"
                data-action="click-&gt;input-checker#uncheck:self click-&gt;modal#dispatchDiscardedEvent:self">

                <div
                    data-controller="intersect focus-trap toggle-attribute"
                    data-focus-trap-target="container"
                    data-toggle-attribute-target="element"
                    data-toggle-on-body-force-param="true"
                    data-action="intersect:enter->toggle-on-body#add intersect:enter->toggle-attribute#setAttribute intersect:exit->toggle-on-body#remove intersect:exit->toggle-attribute#unsetAttribute"
                    data-toggle-attribute-attribute-param="aria-modal"
                    data-toggle-attribute-value-param="true"
                    role="dialog"
                    data-cy="modalContainer"
                    class=" bg-white shadow-modal overflow-auto col-span-full sm:col-start-4 xl:col-start-5 sm:col-span-6 rounded-t-sm  mt-4 sm:rounded-sm px-6 sm:px-10 py-6 sm:py-8 sm:my-6"
                    aria-labelledby=sort-modal-title>
                    <div class="flex flex-col gap-4">
                        <div class="flex items-start justify-between">

                            <div class="ml-auto">
                                    <button
                                        aria-label="Fermer la fenêtre modale"
                                        class="ml-6"
                                        data-toggle-on-body-force-param="false"
                                        data-action="click->input-checker#uncheck click->modal#dispatchDiscardedEvent"
                                        data-cy="crossButton"
                                        type="button"
                                    >
                                            <svg class="size-3" aria-hidden="true">
                                                <use href="/svg/icons/nav/close.svg#close"></use>
                                            </svg>
                                    </button>
                            </div>
                        </div>


                                <h2 id="sort-modal-title" class="typo-l-bold text-pretty">Trier mes offres</@titleMarkup>
                                                </div>

                    
    <div data-controller="auto-submittable" class="flex flex-col">
        <div class="flex flex-row-reverse w-full items-center justify-between mt-8 group">
            <input 
                type="radio"
                form="searchForm"
                data-analytics-values-param='{"event": "generic", "EventName": "sort_click", "wording": "par pertinence" }'
                class="radio ml-4 mr-0 radio-disabled"
                name="st"
                data-turbo-frame="turboSerp"
                data-action="
                    analytics#push
                    input-checker#uncheck:self
                    toggle-on-body#toggle
                    auto-submittable#formSubmit
                "
                id="relevant"
                value="relevance"
                checked
            >
            <label class="flex w-4/5" for="relevant">
                <svg class="size-6 flex-shrink-0 mt-1"aria-hidden="true">
                    <use href="/svg/icons/relevant.svg#relevant"></use>
                </svg>
                <div class="ml-4">
                    <span class="typo-m-bold [group-hover&:not(group-disabled)]:underline">Par pertinence</span>
                    <p class="typo-s mt-1">Afficher les offres recommandées pour votre recherche.</p>
                </div>
            </label>
        </div>
        <div class="flex flex-row-reverse w-full items-center justify-between mt-8 group">
            <input 
                type="radio"
                form="searchForm"
                data-analytics-values-param='{"event": "generic", "EventName": "sort_click", "wording": "par date" }'
                class="radio ml-4 mr-0 "
                name="st"
                data-turbo-frame="turboSerp"
                data-action="
                    analytics#push
                    input-checker#uncheck:self
                    toggle-on-body#toggle
                    auto-submittable#formSubmit
                "
                id="date"
                value="date"
                
            >
            <label class="flex w-4/5" for="date">
                <svg class="size-6 flex-shrink-0 mt-1" aria-hidden="true">
                    <use href="/svg/icons/time.svg#time"></use>
                </svg>
                <div class="ml-4">
                    <span class="typo-m-bold [group-hover&:not(group-disabled)]:underline">Par date</span>
                    <p class="typo-s mt-1">Afficher les dernières offres publiées pour votre recherche.</p>
                </div>
            </label>
        </div>
        <button
            formaction=""
            form="searchForm"
            data-auto-submittable-target="submitter"
            class="hidden"
            data-turbo-frame="turboSerp"
        >
        </button>
    </div>

                </div>
            </div>
        </div>
    </div>
</div>

</div>
                </div>
                
            </section>

            <section class="col-span-12 2xl:col-start-2 2xl:col-span-10">
                

    <div 
        
                data-controller="hide-offer"
                data-hide-offer-hidden-class="hidden"
                >
        <ul aria-label="liste des offres"
            data-controller="id-storage"
            data-id-storage-flag-class="opacity-50"
            data-id-storage-local-storage-key-param="visited_offers"
            data-action="pageshow@window->id-storage#applyFlagClass turbo:frame-load@document->id-storage#applyFlagClass"
            class="grid grid-cols-1 gap-6 mb-6">
                <li data-id-storage-target="item"
                    data-hide-offer-target="item"
                    data-id-storage-item-id="83042329"
                    data-hide-offer-item-id-value="83042329">
                    

                    <div>
                        
<div
    class="group h-full overflow-hidden bg-white rounded-sm border border-grey-100 hover:border-grey-500 focus-within:outline focus-within:transition-none transition-border-color duration-100"
>
    <div class="h-full relative flex flex-col sm:flex-row sm:small-group:flex-col ">
        <div class="absolute right-6 sm:small-group:right-4 top-6 sm:small-group:top-[21px] z-[2] flex gap-4 sm:gap-0">
                <form action="/fr-fr/searchoffers/hideoffermodalframeview"
                      method="GET"
                      data-turbo-frame="exclude-criteria-frame">
                    <input type="hidden" name="offerId" value="83042329">
                    <input type="hidden" name="title" value="D&#xE9;veloppeur Back-End H/F">
                    <input type="hidden" name="company" value="Ekkiden">
                    <button type="submit"
                            data-cy="hideOfferBtn"
                            data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;exclude_offer&quot;,&quot;event_info&quot;:&quot;Ic&#xF4;ne masquage d&#x27;offre&quot;}"
                            data-action="analytics#push"
                            class="btn-icon-no-outline-m sm:btn-icon-no-outline-l small-group:sm:btn-icon-no-outline-m"
                            aria-label="Masquer l'offre D&#xE9;veloppeur Back-End H/F">
                        <svg aria-hidden="true" class="size-3 sm:size-4 small-group:sm:size-3">
                            <use href="/svg/icons/disabled.svg#disabled"></use>
                        </svg>
                    </button>
                </form>
            

<turbo-frame id="bookmark-frame-card83042329">
    <form 
        action="/fr-fr/candidat/tooglebookmark"
        method="GET"
        data-controller="bookmark"
        data-bookmark-offer-id-value="83042329"
        data-bookmark-bookmarked-icon-value="/svg/icons/bookmark.svg#bookmark-active"
        data-bookmark-unbookmarked-icon-value="/svg/icons/bookmark.svg#bookmark"
        data-bookmark-bookmarked-class="text-pink-500"
        data-fetch-account-data-event-param="turbo:submit-end"
        data-action="fetch-account-data#refreshAfterNextTurboEvent"
    >
        <input type="hidden" name="idOffre" value="83042329">
        <input type="hidden" name="turboFrameId" value="bookmark-frame-card83042329">
        <input type="hidden" name="isFromToolbar" value="False"/>
        <button 
            class="btn-icon-no-outline-m sm:btn-icon-no-outline-l small-group:sm:btn-icon-no-outline-m"
            data-bookmark-target="button"
            data-analytics-values-param='{"event": "generic", "EventName" : "bookmark_add", "EventLibelle": "" }'
            data-action="analytics#push:stop"
            data-cy="bookmarkBtn"
        >
            <svg class="size-3 sm:size-4 small-group:sm:size-3">
                <use data-bookmark-target="icon" href="/svg/icons/bookmark.svg#bookmark"></use>
            </svg>
        </button>
    </form>

    


</turbo-frame>
        </div>
        



    <header
        class="
            max-h-[74px]
            min-h-[74px]
            sm:max-h-none
            relative
            w-full
            overflow-hidden
            sm:max-w-64
            sm:small-group:w-full
            sm:small-group:max-h-[74px]
            sm:small-group:max-w-none
        ">

            <div class="absolute inset-0 bg-black/5 z-[1]"></div>
            <img
                class="
                    size-full
                    object-cover
                    object-center
                "
                src="https://f.hellowork.com/media/companypage/195452/350_233/195452_63923860121681753046164951.jpeg"
                loading="lazy"
                alt="Ekkiden recrutement">

        <div class="
                z-[2]
                absolute
                sm:top-auto
                inset-4
                sm:inset-6
                flex
                justify-center
                items-center
                w-[5.75rem]
                h-11
                rounded-xs
                bg-white
                sm:small-group:inset-4"
        >
                <img
                    loading="lazy"
                    src="https://f.hellowork.com/img/entreprises/195452.png?v=20261013150546"
                    alt="Ekkiden recrutement"
                    title="Recrutement Ekkiden"
                    class="
                        w-full
                        h-full
                        px-3
                        py-2
                        object-contain"
                >
        </div>
    </header>

        



<div
    
            data-controller="intersect"
            data-analytics-values-param="{&quot;event&quot;:&quot;generic_product&quot;,&quot;event_name&quot;:&quot;product.display&quot;,&quot;product_data&quot;:[{&quot;product_id&quot;:&quot;83042329&quot;,&quot;product_response_type&quot;:&quot;UrlWithForm&quot;,&quot;product_list&quot;:&quot;LO-Moteur-Exact&quot;,&quot;product_position&quot;:1,&quot;product_category&quot;:&quot;1&quot;,&quot;product_status&quot;:&quot;NotDefined&quot;}]}"
            data-action="intersect:enter->analytics#push:once"
            class="flex flex-col justify-between size-full p-4 sm:p-6 sm:small-group:p-4 min-w-0"
    data-cy="serpCard"
>
    <div class="flex flex-col">
        <header class="w-10/12">
                <div>
                        <a 
                            data-analytics-values-param="{&quot;event&quot;:&quot;generic_product&quot;,&quot;event_name&quot;:&quot;productClick&quot;,&quot;product_data&quot;:[{&quot;product_id&quot;:&quot;83042329&quot;,&quot;product_response_type&quot;:&quot;UrlWithForm&quot;,&quot;product_list&quot;:&quot;LO-Moteur-Exact&quot;,&quot;product_position&quot;:1}],&quot;app_version_array&quot;:{&quot;one-time-password-V1.0&quot;:&quot;Version_B&quot;}}"
                            data-action="analytics#push"
                            data-turbo="false"
                            href="/fr-fr/emplois/83042329.html"
                            title="D&#xE9;veloppeur Back-End H/F - Ekkiden"
                            class="no-underline outline-none focus-within:underline forwarder inline"
                            data-cy="offerTitle"
                                                        aria-label="Voir offre de D&#xE9;veloppeur Back-End H/F &#xE0; Lille - 59, chez Ekkiden, pour un CDI, avec un salaire de 48&#x202F;000 - 53&#x202F;000 &#x20AC; / an, en temps plein, T&#xE9;l&#xE9;travail partiel"
                        >
                            


<h3 class="inline">
    <p class="typo-l sm:small-group:typo-l sm:typo-xl">D&#xE9;veloppeur Back-End H/F</p>
        <p class="typo-s inline">Ekkiden</p>
</h3>

                        </a>

                </div>

        </header>
            <div class="mt-6 flex flex-col gap-3 sm:flex-row sm:small-group:flex-col">
                <div class="flex gap-3 flex-wrap">
                        <div
                            class="readonly tag-secondary-s w-fit border-0"
                            data-cy="localisationCard"
                        >
                            Lille - 59
                        </div>
                        <div
                            class="readonly tag-secondary-s w-fit border-0"
                            data-cy="contractCard"
                        >
                            CDI
                        </div>
                        <div class="readonly tag-secondary-s typo-s-bold w-fit border-0">48&#x202F;000 - 53&#x202F;000 &#x20AC; / an</div>
                            <div
                                class="readonly tag-secondary-s border-0 w-fit"
                                data-cy="contractTag"
                            >
                                T&#xE9;l&#xE9;travail partiel
                            </div>
                </div>
            </div>

    </div>


            <div class="mt-6 sm:mt-3 flex sm:flex-row-reverse items-end justify-between sm:small-group:mt-6 sm:small-group:flex-row flex-wrap">
                    <span class="btn-outline-m group-hocus-within:bg-black group-hocus-within:border-transparent group-hocus-within:text-white group-hocus-within:opacity-100">Voir l’offre</span>
                    <div class="typo-s text-grey-500 pl-1 pt-1">il y a 9 jours</div>
            </div>
</div>
    </div>
</div>
                    </div>
                </li>
                <li data-id-storage-target="item"
                    data-hide-offer-target="item"
                    data-id-storage-item-id="84228168"
                    data-hide-offer-item-id-value="84228168">
                    

                    <div>
                        
<div
    class="group h-full overflow-hidden bg-white rounded-sm border border-grey-100 hover:border-grey-500 focus-within:outline focus-within:transition-none transition-border-color duration-100"
>
    <div class="h-full relative flex flex-col sm:flex-row sm:small-group:flex-col ">
        <div class="absolute right-6 sm:small-group:right-4 top-6 sm:small-group:top-[21px] z-[2] flex gap-4 sm:gap-0">
                <form action="/fr-fr/searchoffers/hideoffermodalframeview"
                      method="GET"
                      data-turbo-frame="exclude-criteria-frame">
                    <input type="hidden" name="offerId" value="84228168">
                    <input type="hidden" name="title" value="Sales Developer H/F">
                    <input type="hidden" name="company" value="Capgemini">
                    <button type="submit"
                            data-cy="hideOfferBtn"
                            data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;exclude_offer&quot;,&quot;event_info&quot;:&quot;Ic&#xF4;ne masquage d&#x27;offre&quot;}"
                            data-action="analytics#push"
                            class="btn-icon-no-outline-m sm:btn-icon-no-outline-l small-group:sm:btn-icon-no-outline-m"
                            aria-label="Masquer l'offre Sales Developer H/F">
                        <svg aria-hidden="true" class="size-3 sm:size-4 small-group:sm:size-3">
                            <use href="/svg/icons/disabled.svg#disabled"></use>
                        </svg>
                    </button>
                </form>
            

<turbo-frame id="bookmark-frame-card84228168">
    <form 
        action="/fr-fr/candidat/tooglebookmark"
        method="GET"
        data-controller="bookmark"
        data-bookmark-offer-id-value="84228168"
        data-bookmark-bookmarked-icon-value="/svg/icons/bookmark.svg#bookmark-active"
        data-bookmark-unbookmarked-icon-value="/svg/icons/bookmark.svg#bookmark"
        data-bookmark-bookmarked-class="text-pink-500"
        data-fetch-account-data-event-param="turbo:submit-end"
        data-action="fetch-account-data#refreshAfterNextTurboEvent"
    >
        <input type="hidden" name="idOffre" value="84228168">
        <input type="hidden" name="turboFrameId" value="bookmark-frame-card84228168">
        <input type="hidden" name="isFromToolbar" value="False"/>
        <button 
            class="btn-icon-no-outline-m sm:btn-icon-no-outline-l small-group:sm:btn-icon-no-outline-m"
            data-bookmark-target="button"
            data-analytics-values-param='{"event": "generic", "EventName" : "bookmark_add", "EventLibelle": "" }'
            data-action="analytics#push:stop"
            data-cy="bookmarkBtn"
        >
            <svg class="size-3 sm:size-4 small-group:sm:size-3">
                <use data-bookmark-target="icon" href="/svg/icons/bookmark.svg#bookmark"></use>
            </svg>
        </button>
    </form>

    


</turbo-frame>
        </div>
        



    <header
        class="
            max-h-[74px]
            min-h-[74px]
            sm:max-h-none
            relative
            w-full
            overflow-hidden
            sm:max-w-64
            sm:small-group:w-full
            sm:small-group:max-h-[74px]
            sm:small-group:max-w-none
        ">

            <div class="absolute inset-0 bg-black/5 z-[1]"></div>
            <img
                class="
                    size-full
                    object-cover
                    object-center
                "
                src="https://f.hellowork.com/media/companypage/193881/350_233/6026_638761029555258356922867.jpg"
                loading="lazy"
                alt="Capgemini recrutement">

        <div class="
                z-[2]
                absolute
                sm:top-auto
                inset-4
                sm:inset-6
                flex
                justify-center
                items-center
                w-[5.75rem]
                h-11
                rounded-xs
                bg-white
                sm:small-group:inset-4"
        >
                <img
                    loading="lazy"
                    src="https://f.hellowork.com/img/entreprises/193881.png?v=20261001112010"
                    alt="Capgemini recrutement"
                    title="Recrutement Capgemini"
                    class="
                        w-full
                        h-full
                        px-3
                        py-2
                        object-contain"
                >
        </div>
    </header>

        



<div
    
            data-controller="intersect"
            data-analytics-values-param="{&quot;event&quot;:&quot;generic_product&quot;,&quot;event_name&quot;:&quot;product.display&quot;,&quot;product_data&quot;:[{&quot;product_id&quot;:&quot;84228168&quot;,&quot;product_response_type&quot;:&quot;UrlWithForm&quot;,&quot;product_list&quot;:&quot;LO-Moteur-Exact&quot;,&quot;product_position&quot;:2,&quot;product_category&quot;:&quot;1&quot;,&quot;product_status&quot;:&quot;NotDefined&quot;}]}"
            data-action="intersect:enter->analytics#push:once"
            class="flex flex-col justify-between size-full p-4 sm:p-6 sm:small-group:p-4 min-w-0"
    data-cy="serpCard"
>
    <div class="flex flex-col">
        <header class="w-10/12">
                <div>
                        <a 
                            data-analytics-values-param="{&quot;event&quot;:&quot;generic_product&quot;,&quot;event_name&quot;:&quot;productClick&quot;,&quot;product_data&quot;:[{&quot;product_id&quot;:&quot;84228168&quot;,&quot;product_response_type&quot;:&quot;UrlWithForm&quot;,&quot;product_list&quot;:&quot;LO-Moteur-Exact&quot;,&quot;product_position&quot;:2}],&quot;app_version_array&quot;:{&quot;one-time-password-V1.0&quot;:&quot;Version_B&quot;}}"
                            data-action="analytics#push"
                            data-turbo="false"
                            href="/fr-fr/emplois/84228168.html"
                            title="Sales Developer H/F - Capgemini"
                            class="no-underline outline-none focus-within:underline forwarder inline"
                            data-cy="offerTitle"
                                                        aria-label="Voir offre de Sales Developer H/F &#xE0; Lille - 59, chez Capgemini, pour un CDI, en temps plein, T&#xE9;l&#xE9;travail occasionnel"
                        >
                            


<h3 class="inline">
    <p class="typo-l sm:small-group:typo-l sm:typo-xl">Sales Developer H/F</p>
        <p class="typo-s inline">Capgemini</p>
</h3>

                        </a>

                </div>

        </header>
            <div class="mt-6 flex flex-col gap-3 sm:flex-row sm:small-group:flex-col">
                <div class="flex gap-3 flex-wrap">
                        <div
                            class="readonly tag-secondary-s w-fit border-0"
                            data-cy="localisationCard"
                        >
                            Lille - 59
                        </div>
                        <div
                            class="readonly tag-secondary-s w-fit border-0"
                            data-cy="contractCard"
                        >
                            CDI
                        </div>
                            <div
                                class="readonly tag-secondary-s border-0 w-fit"
                                data-cy="contractTag"
                            >
                                T&#xE9;l&#xE9;travail occasionnel
                            </div>
                </div>
            </div>

    </div>


            <div class="mt-6 sm:mt-3 flex sm:flex-row-reverse items-end justify-between sm:small-group:mt-6 sm:small-group:flex-row flex-wrap">
                    <span class="btn-outline-m group-hocus-within:bg-black group-hocus-within:border-transparent group-hocus-within:text-white group-hocus-within:opacity-100">Voir l’offre</span>
                    <div class="typo-s text-grey-500 pl-1 pt-1">il y a 6 jours</div>
            </div>
</div>
    </div>
</div>
                    </div>
                </li>
                <li data-id-storage-target="item"
                    data-hide-offer-target="item"
                    data-id-storage-item-id="84000048"
                    data-hide-offer-item-id-value="84000048">
                    

                    <div>
                        
<div
    class="group h-full overflow-hidden bg-white rounded-sm border border-grey-100 hover:border-grey-500 focus-within:outline focus-within:transition-none transition-border-color duration-100"
>
    <div class="h-full relative flex flex-col sm:flex-row sm:small-group:flex-col ">
        <div class="absolute right-6 sm:small-group:right-4 top-6 sm:small-group:top-[21px] z-[2] flex gap-4 sm:gap-0">
                <form action="/fr-fr/searchoffers/hideoffermodalframeview"
                      method="GET"
                      data-turbo-frame="exclude-criteria-frame">
                    <input type="hidden" name="offerId" value="84000048">
                    <input type="hidden" name="title" value="D&#xE9;veloppeur Powerbuilder H/F">
                    <input type="hidden" name="company" value="Geser Best">
                    <button type="submit"
                            data-cy="hideOfferBtn"
                            data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;exclude_offer&quot;,&quot;event_info&quot;:&quot;Ic&#xF4;ne masquage d&#x27;offre&quot;}"
                            data-action="analytics#push"
                            class="btn-icon-no-outline-m sm:btn-icon-no-outline-l small-group:sm:btn-icon-no-outline-m"
                            aria-label="Masquer l'offre D&#xE9;veloppeur Powerbuilder H/F">
                        <svg aria-hidden="true" class="size-3 sm:size-4 small-group:sm:size-3">
                            <use href="/svg/icons/disabled.svg#disabled"></use>
                        </svg>
                    </button>
                </form>
            

<turbo-frame id="bookmark-frame-card84000048">
    <form 
        action="/fr-fr/candidat/tooglebookmark"
        method="GET"
        data-controller="bookmark"
        data-bookmark-offer-id-value="84000048"
        data-bookmark-bookmarked-icon-value="/svg/icons/bookmark.svg#bookmark-active"
        data-bookmark-unbookmarked-icon-value="/svg/icons/bookmark.svg#bookmark"
        data-bookmark-bookmarked-class="text-pink-500"
        data-fetch-account-data-event-param="turbo:submit-end"
        data-action="fetch-account-data#refreshAfterNextTurboEvent"
    >
        <input type="hidden" name="idOffre" value="84000048">
        <input type="hidden" name="turboFrameId" value="bookmark-frame-card84000048">
        <input type="hidden" name="isFromToolbar" value="False"/>
        <button 
            class="btn-icon-no-outline-m sm:btn-icon-no-outline-l small-group:sm:btn-icon-no-outline-m"
            data-bookmark-target="button"
            data-analytics-values-param='{"event": "generic", "EventName" : "bookmark_add", "EventLibelle": "" }'
            data-action="analytics#push:stop"
            data-cy="bookmarkBtn"
        >
            <svg class="size-3 sm:size-4 small-group:sm:size-3">
                <use data-bookmark-target="icon" href="/svg/icons/bookmark.svg#bookmark"></use>
            </svg>
        </button>
    </form>

    


</turbo-frame>
        </div>
        



    <header
        class="
            max-h-[74px]
            min-h-[74px]
            sm:max-h-none
            relative
            w-full
            overflow-hidden
            sm:max-w-64
            sm:small-group:w-full
            sm:small-group:max-h-[74px]
            sm:small-group:max-w-none
        ">

            <div class="absolute inset-0 bg-black/5 z-[1]"></div>
            <img
                class="
                    size-full
                    object-cover
                    object-center
                "
                src="https://f.hellowork.com/media/companypage/196678/350_233/GeserBest_3695_6382295407126423029418895.jpeg"
                loading="lazy"
                alt="Geser Best recrutement">

        <div class="
                z-[2]
                absolute
                sm:top-auto
                inset-4
                sm:inset-6
                flex
                justify-center
                items-center
                w-[5.75rem]
                h-11
                rounded-xs
                bg-white
                sm:small-group:inset-4"
        >
                <img
                    loading="lazy"
                    src="https://f.hellowork.com/img/entreprises/196678.png?v=20261001112011"
                    alt="Geser Best recrutement"
                    title="Recrutement Geser Best"
                    class="
                        w-full
                        h-full
                        px-3
                        py-2
                        object-contain"
                >
        </div>
    </header>

        



<div
    
            data-controller="intersect"
            data-analytics-values-param="{&quot;event&quot;:&quot;generic_product&quot;,&quot;event_name&quot;:&quot;product.display&quot;,&quot;product_data&quot;:[{&quot;product_id&quot;:&quot;84000048&quot;,&quot;product_response_type&quot;:&quot;ATS&quot;,&quot;product_list&quot;:&quot;LO-Moteur-Exact&quot;,&quot;product_position&quot;:3,&quot;product_category&quot;:&quot;1&quot;,&quot;product_status&quot;:&quot;Suivi de candidature&quot;}]}"
            data-action="intersect:enter->analytics#push:once"
            class="flex flex-col justify-between size-full p-4 sm:p-6 sm:small-group:p-4 min-w-0"
    data-cy="serpCard"
>
    <div class="flex flex-col">
        <header class="w-10/12">
                <span
                    class="badge-m badge-purple mb-4 relative z-[2]"
                    data-cy="followUpTag"
                    title="Ce recruteur partage l&#x2019;avancement des candidatures."
                >
                    Suivi de candidature
                </span>
                <div>
                        <a 
                            data-analytics-values-param="{&quot;event&quot;:&quot;generic_product&quot;,&quot;event_name&quot;:&quot;productClick&quot;,&quot;product_data&quot;:[{&quot;product_id&quot;:&quot;84000048&quot;,&quot;product_response_type&quot;:&quot;ATS&quot;,&quot;product_list&quot;:&quot;LO-Moteur-Exact&quot;,&quot;product_position&quot;:3}],&quot;app_version_array&quot;:{&quot;one-time-password-V1.0&quot;:&quot;Version_B&quot;}}"
                            data-action="analytics#push"
                            data-turbo="false"
                            href="/fr-fr/emplois/84000048.html"
                            title="D&#xE9;veloppeur Powerbuilder H/F - Geser Best"
                            class="no-underline outline-none focus-within:underline forwarder inline"
                            data-cy="offerTitle"
                                                        aria-label="Voir offre de D&#xE9;veloppeur Powerbuilder H/F &#xE0; Lille - 59, chez Geser Best, super recruteur, pour un CDI, avec un salaire de 35&#x202F;000 - 44&#x202F;000 &#x20AC; / an, en temps plein"
                        >
                            


<h3 class="inline">
    <p class="typo-l sm:small-group:typo-l sm:typo-xl">D&#xE9;veloppeur Powerbuilder H/F</p>
        <p class="typo-s inline">Geser Best</p>
</h3>

                        </a>

                        <div class="inline-flex gap-2 align-middle">
                            <div class="typo-s-bold">
                                
<div class="text-green-500 flex items-center" data-cy="superRecruiterBadge">
    <svg
        class="mr-1  w-3 h-[0.875rem]">
        <use href="/svg/icons/super-recruiter/super-recruiter.svg#super-recruiter"></use>
    </svg>
    <p  class="typo-s-bold">Super recruteur</p>
</div>
                            </div>
                        </div>
                </div>

        </header>
            <div class="mt-6 flex flex-col gap-3 sm:flex-row sm:small-group:flex-col">
                <div class="flex gap-3 flex-wrap">
                        <div
                            class="readonly tag-secondary-s w-fit border-0"
                            data-cy="localisationCard"
                        >
                            Lille - 59
                        </div>
                        <div
                            class="readonly tag-secondary-s w-fit border-0"
                            data-cy="contractCard"
                        >
                            CDI
                        </div>
                        <div class="readonly tag-secondary-s typo-s-bold w-fit border-0">35&#x202F;000 - 44&#x202F;000 &#x20AC; / an</div>
                </div>
            </div>

    </div>


            <div class="mt-6 sm:mt-3 flex sm:flex-row-reverse items-end justify-between sm:small-group:mt-6 sm:small-group:flex-row flex-wrap">
                    <span class="btn-outline-m group-hocus-within:bg-black group-hocus-within:border-transparent group-hocus-within:text-white group-hocus-within:opacity-100">Voir l’offre</span>
                    <div class="typo-s text-grey-500 pl-1 pt-1">il y a 12 jours</div>
            </div>
</div>
    </div>
</div>
                    </div>
                </li>
                    <turbo-frame
                        id="profile-serp-card" src="/fr-fr/updateprofile/getcandidateprofilesearch?itemsSearchJson=%5B%7B%22Label%22%3A%22CDI%22,%22IsChecked%22%3Afalse,%22Value%22%3A%22CDI%22%7D,%7B%22Label%22%3A%22CDD%22,%22IsChecked%22%3Afalse,%22Value%22%3A%22CDD%22%7D,%7B%22Label%22%3A%22Int%C3%A9rim%22,%22IsChecked%22%3Afalse,%22Value%22%3A%22Travail_temp%22%7D,%7B%22Label%22%3A%22Stage%22,%22IsChecked%22%3Afalse,%22Value%22%3A%22Stage%22%7D,%7B%22Label%22%3A%22Alternance%22,%22IsChecked%22%3Afalse,%22Value%22%3A%22Alternance%22%7D,%7B%22Label%22%3A%22Ind%C3%A9pendant%22,%22IsChecked%22%3Afalse,%22Value%22%3A%22Independant%22%7D,%7B%22Label%22%3A%22Franchise%22,%22IsChecked%22%3Afalse,%22Value%22%3A%22Franchise%22%7D,%7B%22Label%22%3A%22Associ%C3%A9%22,%22IsChecked%22%3Afalse,%22Value%22%3A%22Associe%22%7D,%7B%22Label%22%3A%22Fonctionnaire%22,%22IsChecked%22%3Afalse,%22Value%22%3A%22Fonctionnaire%22%7D,%7B%22Label%22%3A%22Freelance%22,%22IsChecked%22%3Afalse,%22Value%22%3A%22Freelance%22%7D,%7B%22Label%22%3A%22Stage%20de%20lyc%C3%A9e%22,%22IsChecked%22%3Afalse,%22Value%22%3A%22Stage_de_lycee%22%7D%5D"
                        data-controller="toggle form-validator"
                        data-toggle-target="toToggleAdditional"
                        data-toggle-transition-delay-value="500"
                        data-toggle-toggled-additional-class="has-child:block"
                        data-toggle-toggled-class="opacity-0 scale-y-0"
                        class="hidden has-child:block peer"
                    >
                    </turbo-frame>
                <li data-id-storage-target="item"
                    data-hide-offer-target="item"
                    data-id-storage-item-id="82946546"
                    data-hide-offer-item-id-value="82946546">
                    

                    <div>
                        
<div
    class="group h-full overflow-hidden bg-white rounded-sm border border-grey-100 hover:border-grey-500 focus-within:outline focus-within:transition-none transition-border-color duration-100"
>
    <div class="h-full relative flex flex-col sm:flex-row sm:small-group:flex-col ">
        <div class="absolute right-6 sm:small-group:right-4 top-6 sm:small-group:top-[21px] z-[2] flex gap-4 sm:gap-0">
                <form action="/fr-fr/searchoffers/hideoffermodalframeview"
                      method="GET"
                      data-turbo-frame="exclude-criteria-frame">
                    <input type="hidden" name="offerId" value="82946546">
                    <input type="hidden" name="title" value="D&#xE9;veloppeur React H/F">
                    <input type="hidden" name="company" value="Astek">
                    <button type="submit"
                            data-cy="hideOfferBtn"
                            data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;exclude_offer&quot;,&quot;event_info&quot;:&quot;Ic&#xF4;ne masquage d&#x27;offre&quot;}"
                            data-action="analytics#push"
                            class="btn-icon-no-outline-m sm:btn-icon-no-outline-l small-group:sm:btn-icon-no-outline-m"
                            aria-label="Masquer l'offre D&#xE9;veloppeur React H/F">
                        <svg aria-hidden="true" class="size-3 sm:size-4 small-group:sm:size-3">
                            <use href="/svg/icons/disabled.svg#disabled"></use>
                        </svg>
                    </button>
                </form>
            

<turbo-frame id="bookmark-frame-card82946546">
    <form 
        action="/fr-fr/candidat/tooglebookmark"
        method="GET"
        data-controller="bookmark"
        data-bookmark-offer-id-value="82946546"
        data-bookmark-bookmarked-icon-value="/svg/icons/bookmark.svg#bookmark-active"
        data-bookmark-unbookmarked-icon-value="/svg/icons/bookmark.svg#bookmark"
        data-bookmark-bookmarked-class="text-pink-500"
        data-fetch-account-data-event-param="turbo:submit-end"
        data-action="fetch-account-data#refreshAfterNextTurboEvent"
    >
        <input type="hidden" name="idOffre" value="82946546">
        <input type="hidden" name="turboFrameId" value="bookmark-frame-card82946546">
        <input type="hidden" name="isFromToolbar" value="False"/>
        <button 
            class="btn-icon-no-outline-m sm:btn-icon-no-outline-l small-group:sm:btn-icon-no-outline-m"
            data-bookmark-target="button"
            data-analytics-values-param='{"event": "generic", "EventName" : "bookmark_add", "EventLibelle": "" }'
            data-action="analytics#push:stop"
            data-cy="bookmarkBtn"
        >
            <svg class="size-3 sm:size-4 small-group:sm:size-3">
                <use data-bookmark-target="icon" href="/svg/icons/bookmark.svg#bookmark"></use>
            </svg>
        </button>
    </form>

    


</turbo-frame>
        </div>
        



    <header
        class="
            max-h-[74px]
            min-h-[74px]
            sm:max-h-none
            relative
            w-full
            overflow-hidden
            sm:max-w-64
            sm:small-group:w-full
            sm:small-group:max-h-[74px]
            sm:small-group:max-w-none
        ">

            <div class="absolute inset-0 bg-black/5 z-[1]"></div>
            <img
                class="
                    size-full
                    object-cover
                    object-center
                "
                src="https://f.hellowork.com/media/companypage/192878/350_233/519_63845409624817817147777332.jpeg"
                loading="lazy"
                alt="Astek recrutement">

        <div class="
                z-[2]
                absolute
                sm:top-auto
                inset-4
                sm:inset-6
                flex
                justify-center
                items-center
                w-[5.75rem]
                h-11
                rounded-xs
                bg-white
                sm:small-group:inset-4"
        >
                <img
                    loading="lazy"
                    src="https://f.hellowork.com/img/entreprises/192878.png?v=20261001112010"
                    alt="Astek recrutement"
                    title="Recrutement Astek"
                    class="
                        w-full
                        h-full
                        px-3
                        py-2
                        object-contain"
                >
        </div>
    </header>

        



<div
    
            data-controller="intersect"
            data-analytics-values-param="{&quot;event&quot;:&quot;generic_product&quot;,&quot;event_name&quot;:&quot;product.display&quot;,&quot;product_data&quot;:[{&quot;product_id&quot;:&quot;82946546&quot;,&quot;product_response_type&quot;:&quot;UrlWithForm&quot;,&quot;product_list&quot;:&quot;LO-Moteur-Exact&quot;,&quot;product_position&quot;:4,&quot;product_category&quot;:&quot;1&quot;,&quot;product_status&quot;:&quot;NotDefined&quot;}]}"
            data-action="intersect:enter->analytics#push:once"
            class="flex flex-col justify-between size-full p-4 sm:p-6 sm:small-group:p-4 min-w-0"
    data-cy="serpCard"
>
    <div class="flex flex-col">
        <header class="w-10/12">
                <div>
                        <a 
                            data-analytics-values-param="{&quot;event&quot;:&quot;generic_product&quot;,&quot;event_name&quot;:&quot;productClick&quot;,&quot;product_data&quot;:[{&quot;product_id&quot;:&quot;82946546&quot;,&quot;product_response_type&quot;:&quot;UrlWithForm&quot;,&quot;product_list&quot;:&quot;LO-Moteur-Exact&quot;,&quot;product_position&quot;:4}],&quot;app_version_array&quot;:{&quot;one-time-password-V1.0&quot;:&quot;Version_B&quot;}}"
                            data-action="analytics#push"
                            data-turbo="false"
                            href="/fr-fr/emplois/82946546.html"
                            title="D&#xE9;veloppeur React H/F - Astek"
                            class="no-underline outline-none focus-within:underline forwarder inline"
                            data-cy="offerTitle"
                                                        aria-label="Voir offre de D&#xE9;veloppeur React H/F &#xE0; Lille - 59, chez Astek, pour un CDI, avec un salaire de 35&#x202F;000 &#x20AC; / an, en temps plein, T&#xE9;l&#xE9;travail partiel"
                        >
                            


<h3 class="inline">
    <p class="typo-l sm:small-group:typo-l sm:typo-xl">D&#xE9;veloppeur React H/F</p>
        <p class="typo-s inline">Astek</p>
</h3>

                        </a>

                </div>

        </header>
            <div class="mt-6 flex flex-col gap-3 sm:flex-row sm:small-group:flex-col">
                <div class="flex gap-3 flex-wrap">
                        <div
                            class="readonly tag-secondary-s w-fit border-0"
                            data-cy="localisationCard"
                        >
                            Lille - 59
                        </div>
                        <div
                            class="readonly tag-secondary-s w-fit border-0"
                            data-cy="contractCard"
                        >
                            CDI
                        </div>
                        <div class="readonly tag-secondary-s typo-s-bold w-fit border-0">35&#x202F;000 &#x20AC; / an</div>
                            <div
                                class="readonly tag-secondary-s border-0 w-fit"
                                data-cy="contractTag"
                            >
                                T&#xE9;l&#xE9;travail partiel
                            </div>
                </div>
            </div>

    </div>


            <div class="mt-6 sm:mt-3 flex sm:flex-row-reverse items-end justify-between sm:small-group:mt-6 sm:small-group:flex-row flex-wrap">
                    <span class="btn-outline-m group-hocus-within:bg-black group-hocus-within:border-transparent group-hocus-within:text-white group-hocus-within:opacity-100">Voir l’offre</span>
                    <div class="typo-s text-grey-500 pl-1 pt-1">il y a 11 jours</div>
            </div>
</div>
    </div>
</div>
                    </div>
                </li>
                <li data-id-storage-target="item"
                    data-hide-offer-target="item"
                    data-id-storage-item-id="77669119"
                    data-hide-offer-item-id-value="77669119">
                    

                    <div>
                        
<div
    class="group h-full overflow-hidden bg-white rounded-sm border border-grey-100 hover:border-grey-500 focus-within:outline focus-within:transition-none transition-border-color duration-100"
>
    <div class="h-full relative flex flex-col sm:flex-row sm:small-group:flex-col ">
        <div class="absolute right-6 sm:small-group:right-4 top-6 sm:small-group:top-[21px] z-[2] flex gap-4 sm:gap-0">
                <form action="/fr-fr/searchoffers/hideoffermodalframeview"
                      method="GET"
                      data-turbo-frame="exclude-criteria-frame">
                    <input type="hidden" name="offerId" value="77669119">
                    <input type="hidden" name="title" value="Analyste D&#xE9;veloppeur COBOL H/F">
                    <input type="hidden" name="company" value="MCA Groupe">
                    <button type="submit"
                            data-cy="hideOfferBtn"
                            data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;exclude_offer&quot;,&quot;event_info&quot;:&quot;Ic&#xF4;ne masquage d&#x27;offre&quot;}"
                            data-action="analytics#push"
                            class="btn-icon-no-outline-m sm:btn-icon-no-outline-l small-group:sm:btn-icon-no-outline-m"
                            aria-label="Masquer l'offre Analyste D&#xE9;veloppeur COBOL H/F">
                        <svg aria-hidden="true" class="size-3 sm:size-4 small-group:sm:size-3">
                            <use href="/svg/icons/disabled.svg#disabled"></use>
                        </svg>
                    </button>
                </form>
            

<turbo-frame id="bookmark-frame-card77669119">
    <form 
        action="/fr-fr/candidat/tooglebookmark"
        method="GET"
        data-controller="bookmark"
        data-bookmark-offer-id-value="77669119"
        data-bookmark-bookmarked-icon-value="/svg/icons/bookmark.svg#bookmark-active"
        data-bookmark-unbookmarked-icon-value="/svg/icons/bookmark.svg#bookmark"
        data-bookmark-bookmarked-class="text-pink-500"
        data-fetch-account-data-event-param="turbo:submit-end"
        data-action="fetch-account-data#refreshAfterNextTurboEvent"
    >
        <input type="hidden" name="idOffre" value="77669119">
        <input type="hidden" name="turboFrameId" value="bookmark-frame-card77669119">
        <input type="hidden" name="isFromToolbar" value="False"/>
        <button 
            class="btn-icon-no-outline-m sm:btn-icon-no-outline-l small-group:sm:btn-icon-no-outline-m"
            data-bookmark-target="button"
            data-analytics-values-param='{"event": "generic", "EventName" : "bookmark_add", "EventLibelle": "" }'
            data-action="analytics#push:stop"
            data-cy="bookmarkBtn"
        >
            <svg class="size-3 sm:size-4 small-group:sm:size-3">
                <use data-bookmark-target="icon" href="/svg/icons/bookmark.svg#bookmark"></use>
            </svg>
        </button>
    </form>

    


</turbo-frame>
        </div>
        



    <header
        class="
            max-h-[74px]
            min-h-[74px]
            sm:max-h-none
            relative
            w-full
            overflow-hidden
            sm:max-w-64
            sm:small-group:w-full
            sm:small-group:max-h-[74px]
            sm:small-group:max-w-none
        ">

            <div
                class="
                    relative
                    h-[74px]
                    sm:h-full
                    bg-pumpkin-100
                    text-pumpkin-200
                ">
                <svg class="absolute
                        -left-[110px] sm:-left-[120px]
                        -bottom-[100px] sm:bottom-[20px] sm:small-group:-bottom-[95px]
                        w-[617px] sm:w-[547px]
                        h-[301px] sm:h-[267px]
                        opacity-20 -rotate-[15deg]">
                    <use href="/svg/illustrations/chevron.svg#chevron"></use>
                </svg>
            </div>

        <div class="
                z-[2]
                absolute
                sm:top-auto
                inset-4
                sm:inset-6
                flex
                justify-center
                items-center
                w-[5.75rem]
                h-11
                rounded-xs
                bg-white
                sm:small-group:inset-4"
        >
                <img
                    loading="lazy"
                    src="https://f.hellowork.com/img/entreprises/210679.png?v=20260604132627"
                    alt="MCA Groupe recrutement"
                    title="Recrutement MCA Groupe"
                    class="
                        w-full
                        h-full
                        px-3
                        py-2
                        object-contain"
                >
        </div>
    </header>

        



<div
    
            data-controller="intersect"
            data-analytics-values-param="{&quot;event&quot;:&quot;generic_product&quot;,&quot;event_name&quot;:&quot;product.display&quot;,&quot;product_data&quot;:[{&quot;product_id&quot;:&quot;77669119&quot;,&quot;product_response_type&quot;:&quot;Smartapply_v2&quot;,&quot;product_list&quot;:&quot;LO-Moteur-Exact&quot;,&quot;product_position&quot;:5,&quot;product_category&quot;:&quot;1&quot;,&quot;product_status&quot;:&quot;NotDefined&quot;}]}"
            data-action="intersect:enter->analytics#push:once"
            class="flex flex-col justify-between size-full p-4 sm:p-6 sm:small-group:p-4 min-w-0"
    data-cy="serpCard"
>
    <div class="flex flex-col">
        <header class="w-10/12">
                <div>
                        <a 
                            data-analytics-values-param="{&quot;event&quot;:&quot;generic_product&quot;,&quot;event_name&quot;:&quot;productClick&quot;,&quot;product_data&quot;:[{&quot;product_id&quot;:&quot;77669119&quot;,&quot;product_response_type&quot;:&quot;Smartapply_v2&quot;,&quot;product_list&quot;:&quot;LO-Moteur-Exact&quot;,&quot;product_position&quot;:5}],&quot;app_version_array&quot;:{&quot;one-time-password-V1.0&quot;:&quot;Version_B&quot;}}"
                            data-action="analytics#push"
                            data-turbo="false"
                            href="/fr-fr/emplois/77669119.html"
                            title="Analyste D&#xE9;veloppeur COBOL H/F - MCA Groupe"
                            class="no-underline outline-none focus-within:underline forwarder inline"
                            data-cy="offerTitle"
                                                        aria-label="Voir offre de Analyste D&#xE9;veloppeur COBOL H/F &#xE0; Lille - 59, chez MCA Groupe, pour un CDI, en temps plein"
                        >
                            


<h3 class="inline">
    <p class="typo-l sm:small-group:typo-l sm:typo-xl">Analyste D&#xE9;veloppeur COBOL H/F</p>
        <p class="typo-s inline">MCA Groupe</p>
</h3>

                        </a>

                </div>

        </header>
            <div class="mt-6 flex flex-col gap-3 sm:flex-row sm:small-group:flex-col">
                <div class="flex gap-3 flex-wrap">
                        <div
                            class="readonly tag-secondary-s w-fit border-0"
                            data-cy="localisationCard"
                        >
                            Lille - 59
                        </div>
                        <div
                            class="readonly tag-secondary-s w-fit border-0"
                            data-cy="contractCard"
                        >
                            CDI
                        </div>
                </div>
            </div>

    </div>


            <div class="mt-6 sm:mt-3 flex sm:flex-row-reverse items-end justify-between sm:small-group:mt-6 sm:small-group:flex-row flex-wrap">
                    <span class="btn-outline-m group-hocus-within:bg-black group-hocus-within:border-transparent group-hocus-within:text-white group-hocus-within:opacity-100">Voir l’offre</span>
                    <div class="typo-s text-grey-500 pl-1 pt-1">il y a 5 jours</div>
            </div>
</div>
    </div>
</div>
                    </div>
                </li>
                <li data-id-storage-target="item"
                    data-hide-offer-target="item"
                    data-id-storage-item-id="84375713"
                    data-hide-offer-item-id-value="84375713">
                    

                    <div>
                        
<div
    class="group h-full overflow-hidden bg-white rounded-sm border border-grey-100 hover:border-grey-500 focus-within:outline focus-within:transition-none transition-border-color duration-100"
>
    <div class="h-full relative flex flex-col sm:flex-row sm:small-group:flex-col ">
        <div class="absolute right-6 sm:small-group:right-4 top-6 sm:small-group:top-[21px] z-[2] flex gap-4 sm:gap-0">
                <form action="/fr-fr/searchoffers/hideoffermodalframeview"
                      method="GET"
                      data-turbo-frame="exclude-criteria-frame">
                    <input type="hidden" name="offerId" value="84375713">
                    <input type="hidden" name="title" value="D&#xE9;veloppeur Back End Confirm&#xE9; H/F">
                    <input type="hidden" name="company" value="OKARA">
                    <button type="submit"
                            data-cy="hideOfferBtn"
                            data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;exclude_offer&quot;,&quot;event_info&quot;:&quot;Ic&#xF4;ne masquage d&#x27;offre&quot;}"
                            data-action="analytics#push"
                            class="btn-icon-no-outline-m sm:btn-icon-no-outline-l small-group:sm:btn-icon-no-outline-m"
                            aria-label="Masquer l'offre D&#xE9;veloppeur Back End Confirm&#xE9; H/F">
                        <svg aria-hidden="true" class="size-3 sm:size-4 small-group:sm:size-3">
                            <use href="/svg/icons/disabled.svg#disabled"></use>
                        </svg>
                    </button>
                </form>
            

<turbo-frame id="bookmark-frame-card84375713">
    <form 
        action="/fr-fr/candidat/tooglebookmark"
        method="GET"
        data-controller="bookmark"
        data-bookmark-offer-id-value="84375713"
        data-bookmark-bookmarked-icon-value="/svg/icons/bookmark.svg#bookmark-active"
        data-bookmark-unbookmarked-icon-value="/svg/icons/bookmark.svg#bookmark"
        data-bookmark-bookmarked-class="text-pink-500"
        data-fetch-account-data-event-param="turbo:submit-end"
        data-action="fetch-account-data#refreshAfterNextTurboEvent"
    >
        <input type="hidden" name="idOffre" value="84375713">
        <input type="hidden" name="turboFrameId" value="bookmark-frame-card84375713">
        <input type="hidden" name="isFromToolbar" value="False"/>
        <button 
            class="btn-icon-no-outline-m sm:btn-icon-no-outline-l small-group:sm:btn-icon-no-outline-m"
            data-bookmark-target="button"
            data-analytics-values-param='{"event": "generic", "EventName" : "bookmark_add", "EventLibelle": "" }'
            data-action="analytics#push:stop"
            data-cy="bookmarkBtn"
        >
            <svg class="size-3 sm:size-4 small-group:sm:size-3">
                <use data-bookmark-target="icon" href="/svg/icons/bookmark.svg#bookmark"></use>
            </svg>
        </button>
    </form>

    


</turbo-frame>
        </div>
        



    <header
        class="
            max-h-[74px]
            min-h-[74px]
            sm:max-h-none
            relative
            w-full
            overflow-hidden
            sm:max-w-64
            sm:small-group:w-full
            sm:small-group:max-h-[74px]
            sm:small-group:max-w-none
        ">

            <div
                class="
                    relative
                    h-[74px]
                    sm:h-full
                    bg-purple-100
                    text-purple-200
                ">
                <svg class="absolute
                        -left-[110px] sm:-left-[120px]
                        -bottom-[100px] sm:bottom-[20px] sm:small-group:-bottom-[95px]
                        w-[617px] sm:w-[547px]
                        h-[301px] sm:h-[267px]
                        opacity-20 rotate-[158deg]">
                    <use href="/svg/illustrations/chevron.svg#chevron"></use>
                </svg>
            </div>

        <div class="
                z-[2]
                absolute
                sm:top-auto
                inset-4
                sm:inset-6
                flex
                justify-center
                items-center
                w-[5.75rem]
                h-11
                rounded-xs
                bg-white
                sm:small-group:inset-4"
        >
                <div class="w-full h-full flex justify-center items-center">
                    <svg class="size-5 text-grey-300">
                        <use href="/svg/icons/default-company.svg#default-company"></use>
                    </svg>
                </div>
        </div>
    </header>

        



<div
    
            data-controller="intersect"
            data-analytics-values-param="{&quot;event&quot;:&quot;generic_product&quot;,&quot;event_name&quot;:&quot;product.display&quot;,&quot;product_data&quot;:[{&quot;product_id&quot;:&quot;84375713&quot;,&quot;product_response_type&quot;:&quot;ATS&quot;,&quot;product_list&quot;:&quot;LO-Moteur-Exact&quot;,&quot;product_position&quot;:6,&quot;product_category&quot;:&quot;1&quot;,&quot;product_status&quot;:&quot;Suivi de candidature&quot;}]}"
            data-action="intersect:enter->analytics#push:once"
            class="flex flex-col justify-between size-full p-4 sm:p-6 sm:small-group:p-4 min-w-0"
    data-cy="serpCard"
>
    <div class="flex flex-col">
        <header class="w-10/12">
                <span
                    class="badge-m badge-purple mb-4 relative z-[2]"
                    data-cy="followUpTag"
                    title="Ce recruteur partage l&#x2019;avancement des candidatures."
                >
                    Suivi de candidature
                </span>
                <div>
                        <a 
                            data-analytics-values-param="{&quot;event&quot;:&quot;generic_product&quot;,&quot;event_name&quot;:&quot;productClick&quot;,&quot;product_data&quot;:[{&quot;product_id&quot;:&quot;84375713&quot;,&quot;product_response_type&quot;:&quot;ATS&quot;,&quot;product_list&quot;:&quot;LO-Moteur-Exact&quot;,&quot;product_position&quot;:6}],&quot;app_version_array&quot;:{&quot;one-time-password-V1.0&quot;:&quot;Version_B&quot;}}"
                            data-action="analytics#push"
                            data-turbo="false"
                            href="/fr-fr/emplois/84375713.html"
                            title="D&#xE9;veloppeur Back End Confirm&#xE9; H/F - OKARA"
                            class="no-underline outline-none focus-within:underline forwarder inline"
                            data-cy="offerTitle"
                                                        aria-label="Voir offre de D&#xE9;veloppeur Back End Confirm&#xE9; H/F &#xE0; Lille - 59, chez OKARA, pour un CDI, avec un salaire de 38&#x202F;000 - 44&#x202F;000 &#x20AC; / an, en temps plein, T&#xE9;l&#xE9;travail occasionnel"
                        >
                            


<h3 class="inline">
    <p class="typo-l sm:small-group:typo-l sm:typo-xl">D&#xE9;veloppeur Back End Confirm&#xE9; H/F</p>
        <p class="typo-s inline">OKARA</p>
</h3>

                        </a>

                </div>

        </header>
            <div class="mt-6 flex flex-col gap-3 sm:flex-row sm:small-group:flex-col">
                <div class="flex gap-3 flex-wrap">
                        <div
                            class="readonly tag-secondary-s w-fit border-0"
                            data-cy="localisationCard"
                        >
                            Lille - 59
                        </div>
                        <div
                            class="readonly tag-secondary-s w-fit border-0"
                            data-cy="contractCard"
                        >
                            CDI
                        </div>
                        <div class="readonly tag-secondary-s typo-s-bold w-fit border-0">38&#x202F;000 - 44&#x202F;000 &#x20AC; / an</div>
                            <div
                                class="readonly tag-secondary-s border-0 w-fit"
                                data-cy="contractTag"
                            >
                                T&#xE9;l&#xE9;travail occasionnel
                            </div>
                </div>
            </div>

    </div>


            <div class="mt-6 sm:mt-3 flex sm:flex-row-reverse items-end justify-between sm:small-group:mt-6 sm:small-group:flex-row flex-wrap">
                    <span class="btn-outline-m group-hocus-within:bg-black group-hocus-within:border-transparent group-hocus-within:text-white group-hocus-within:opacity-100">Voir l’offre</span>
                    <div class="typo-s text-grey-500 pl-1 pt-1">il y a 1 jour</div>
            </div>
</div>
    </div>
</div>
                    </div>
                </li>
                <li data-id-storage-target="item"
                    data-hide-offer-target="item"
                    data-id-storage-item-id="84025104"
                    data-hide-offer-item-id-value="84025104">
                    

                    <div>
                        
<div
    class="group h-full overflow-hidden bg-white rounded-sm border border-grey-100 hover:border-grey-500 focus-within:outline focus-within:transition-none transition-border-color duration-100"
>
    <div class="h-full relative flex flex-col sm:flex-row sm:small-group:flex-col ">
        <div class="absolute right-6 sm:small-group:right-4 top-6 sm:small-group:top-[21px] z-[2] flex gap-4 sm:gap-0">
                <form action="/fr-fr/searchoffers/hideoffermodalframeview"
                      method="GET"
                      data-turbo-frame="exclude-criteria-frame">
                    <input type="hidden" name="offerId" value="84025104">
                    <input type="hidden" name="title" value="D&#xE9;veloppeuse - D&#xE9;veloppeur Fullstack - Stage H/F">
                    <input type="hidden" name="company" value="Capgemini">
                    <button type="submit"
                            data-cy="hideOfferBtn"
                            data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;exclude_offer&quot;,&quot;event_info&quot;:&quot;Ic&#xF4;ne masquage d&#x27;offre&quot;}"
                            data-action="analytics#push"
                            class="btn-icon-no-outline-m sm:btn-icon-no-outline-l small-group:sm:btn-icon-no-outline-m"
                            aria-label="Masquer l'offre D&#xE9;veloppeuse - D&#xE9;veloppeur Fullstack - Stage H/F">
                        <svg aria-hidden="true" class="size-3 sm:size-4 small-group:sm:size-3">
                            <use href="/svg/icons/disabled.svg#disabled"></use>
                        </svg>
                    </button>
                </form>
            

<turbo-frame id="bookmark-frame-card84025104">
    <form 
        action="/fr-fr/candidat/tooglebookmark"
        method="GET"
        data-controller="bookmark"
        data-bookmark-offer-id-value="84025104"
        data-bookmark-bookmarked-icon-value="/svg/icons/bookmark.svg#bookmark-active"
        data-bookmark-unbookmarked-icon-value="/svg/icons/bookmark.svg#bookmark"
        data-bookmark-bookmarked-class="text-pink-500"
        data-fetch-account-data-event-param="turbo:submit-end"
        data-action="fetch-account-data#refreshAfterNextTurboEvent"
    >
        <input type="hidden" name="idOffre" value="84025104">
        <input type="hidden" name="turboFrameId" value="bookmark-frame-card84025104">
        <input type="hidden" name="isFromToolbar" value="False"/>
        <button 
            class="btn-icon-no-outline-m sm:btn-icon-no-outline-l small-group:sm:btn-icon-no-outline-m"
            data-bookmark-target="button"
            data-analytics-values-param='{"event": "generic", "EventName" : "bookmark_add", "EventLibelle": "" }'
            data-action="analytics#push:stop"
            data-cy="bookmarkBtn"
        >
            <svg class="size-3 sm:size-4 small-group:sm:size-3">
                <use data-bookmark-target="icon" href="/svg/icons/bookmark.svg#bookmark"></use>
            </svg>
        </button>
    </form>

    


</turbo-frame>
        </div>
        



    <header
        class="
            max-h-[74px]
            min-h-[74px]
            sm:max-h-none
            relative
            w-full
            overflow-hidden
            sm:max-w-64
            sm:small-group:w-full
            sm:small-group:max-h-[74px]
            sm:small-group:max-w-none
        ">

            <div class="absolute inset-0 bg-black/5 z-[1]"></div>
            <img
                class="
                    size-full
                    object-cover
                    object-center
                "
                src="https://f.hellowork.com/media/companypage/193881/350_233/6026_638761029555258356922867.jpg"
                loading="lazy"
                alt="Capgemini recrutement">

        <div class="
                z-[2]
                absolute
                sm:top-auto
                inset-4
                sm:inset-6
                flex
                justify-center
                items-center
                w-[5.75rem]
                h-11
                rounded-xs
                bg-white
                sm:small-group:inset-4"
        >
                <img
                    loading="lazy"
                    src="https://f.hellowork.com/img/entreprises/193881.png?v=20261001112010"
                    alt="Capgemini recrutement"
                    title="Recrutement Capgemini"
                    class="
                        w-full
                        h-full
                        px-3
                        py-2
                        object-contain"
                >
        </div>
    </header>

        



<div
    
            data-controller="intersect"
            data-analytics-values-param="{&quot;event&quot;:&quot;generic_product&quot;,&quot;event_name&quot;:&quot;product.display&quot;,&quot;product_data&quot;:[{&quot;product_id&quot;:&quot;84025104&quot;,&quot;product_response_type&quot;:&quot;UrlWithForm&quot;,&quot;product_list&quot;:&quot;LO-Moteur-Exact&quot;,&quot;product_position&quot;:7,&quot;product_category&quot;:&quot;1&quot;,&quot;product_status&quot;:&quot;NotDefined&quot;}]}"
            data-action="intersect:enter->analytics#push:once"
            class="flex flex-col justify-between size-full p-4 sm:p-6 sm:small-group:p-4 min-w-0"
    data-cy="serpCard"
>
    <div class="flex flex-col">
        <header class="w-10/12">
                <div>
                        <a 
                            data-analytics-values-param="{&quot;event&quot;:&quot;generic_product&quot;,&quot;event_name&quot;:&quot;productClick&quot;,&quot;product_data&quot;:[{&quot;product_id&quot;:&quot;84025104&quot;,&quot;product_response_type&quot;:&quot;UrlWithForm&quot;,&quot;product_list&quot;:&quot;LO-Moteur-Exact&quot;,&quot;product_position&quot;:7}],&quot;app_version_array&quot;:{&quot;one-time-password-V1.0&quot;:&quot;Version_B&quot;}}"
                            data-action="analytics#push"
                            data-turbo="false"
                            href="/fr-fr/emplois/84025104.html"
                            title="D&#xE9;veloppeuse - D&#xE9;veloppeur Fullstack - Stage H/F - Capgemini"
                            class="no-underline outline-none focus-within:underline forwarder inline"
                            data-cy="offerTitle"
                                                        aria-label="Voir offre de D&#xE9;veloppeuse - D&#xE9;veloppeur Fullstack - Stage H/F &#xE0; Lille - 59, chez Capgemini, pour un Stage, en temps plein, 6 mois"
                        >
                            


<h3 class="inline">
    <p class="typo-l sm:small-group:typo-l sm:typo-xl">D&#xE9;veloppeuse - D&#xE9;veloppeur Fullstack - Stage H/F</p>
        <p class="typo-s inline">Capgemini</p>
</h3>

                        </a>

                </div>

        </header>
            <div class="mt-6 flex flex-col gap-3 sm:flex-row sm:small-group:flex-col">
                <div class="flex gap-3 flex-wrap">
                        <div
                            class="readonly tag-secondary-s w-fit border-0"
                            data-cy="localisationCard"
                        >
                            Lille - 59
                        </div>
                        <div
                            class="readonly tag-secondary-s w-fit border-0"
                            data-cy="contractCard"
                        >
                            Stage
                        </div>
                            <div
                                class="readonly tag-secondary-s border-0 w-fit"
                                data-cy="contractTag"
                            >
                                6 mois
                            </div>
                </div>
            </div>

    </div>


            <div class="mt-6 sm:mt-3 flex sm:flex-row-reverse items-end justify-between sm:small-group:mt-6 sm:small-group:flex-row flex-wrap">
                    <span class="btn-outline-m group-hocus-within:bg-black group-hocus-within:border-transparent group-hocus-within:text-white group-hocus-within:opacity-100">Voir l’offre</span>
                    <div class="typo-s text-grey-500 pl-1 pt-1">il y a 12 jours</div>
            </div>
</div>
    </div>
</div>
                    </div>
                </li>
                <li data-id-storage-target="item"
                    data-hide-offer-target="item"
                    data-id-storage-item-id="79418480"
                    data-hide-offer-item-id-value="79418480">
                    

                    <div>
                        
<div
    class="group h-full overflow-hidden bg-white rounded-sm border border-grey-100 hover:border-grey-500 focus-within:outline focus-within:transition-none transition-border-color duration-100"
>
    <div class="h-full relative flex flex-col sm:flex-row sm:small-group:flex-col ">
        <div class="absolute right-6 sm:small-group:right-4 top-6 sm:small-group:top-[21px] z-[2] flex gap-4 sm:gap-0">
                <form action="/fr-fr/searchoffers/hideoffermodalframeview"
                      method="GET"
                      data-turbo-frame="exclude-criteria-frame">
                    <input type="hidden" name="offerId" value="79418480">
                    <input type="hidden" name="title" value="D&#xE9;veloppeur Vue.Js H/F">
                    <input type="hidden" name="company" value="Astek">
                    <button type="submit"
                            data-cy="hideOfferBtn"
                            data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;exclude_offer&quot;,&quot;event_info&quot;:&quot;Ic&#xF4;ne masquage d&#x27;offre&quot;}"
                            data-action="analytics#push"
                            class="btn-icon-no-outline-m sm:btn-icon-no-outline-l small-group:sm:btn-icon-no-outline-m"
                            aria-label="Masquer l'offre D&#xE9;veloppeur Vue.Js H/F">
                        <svg aria-hidden="true" class="size-3 sm:size-4 small-group:sm:size-3">
                            <use href="/svg/icons/disabled.svg#disabled"></use>
                        </svg>
                    </button>
                </form>
            

<turbo-frame id="bookmark-frame-card79418480">
    <form 
        action="/fr-fr/candidat/tooglebookmark"
        method="GET"
        data-controller="bookmark"
        data-bookmark-offer-id-value="79418480"
        data-bookmark-bookmarked-icon-value="/svg/icons/bookmark.svg#bookmark-active"
        data-bookmark-unbookmarked-icon-value="/svg/icons/bookmark.svg#bookmark"
        data-bookmark-bookmarked-class="text-pink-500"
        data-fetch-account-data-event-param="turbo:submit-end"
        data-action="fetch-account-data#refreshAfterNextTurboEvent"
    >
        <input type="hidden" name="idOffre" value="79418480">
        <input type="hidden" name="turboFrameId" value="bookmark-frame-card79418480">
        <input type="hidden" name="isFromToolbar" value="False"/>
        <button 
            class="btn-icon-no-outline-m sm:btn-icon-no-outline-l small-group:sm:btn-icon-no-outline-m"
            data-bookmark-target="button"
            data-analytics-values-param='{"event": "generic", "EventName" : "bookmark_add", "EventLibelle": "" }'
            data-action="analytics#push:stop"
            data-cy="bookmarkBtn"
        >
            <svg class="size-3 sm:size-4 small-group:sm:size-3">
                <use data-bookmark-target="icon" href="/svg/icons/bookmark.svg#bookmark"></use>
            </svg>
        </button>
    </form>

    


</turbo-frame>
        </div>
        



    <header
        class="
            max-h-[74px]
            min-h-[74px]
            sm:max-h-none
            relative
            w-full
            overflow-hidden
            sm:max-w-64
            sm:small-group:w-full
            sm:small-group:max-h-[74px]
            sm:small-group:max-w-none
        ">

            <div class="absolute inset-0 bg-black/5 z-[1]"></div>
            <img
                class="
                    size-full
                    object-cover
                    object-center
                "
                src="https://f.hellowork.com/media/companypage/192878/350_233/519_63845409624817817147777332.jpeg"
                loading="lazy"
                alt="Astek recrutement">

        <div class="
                z-[2]
                absolute
                sm:top-auto
                inset-4
                sm:inset-6
                flex
                justify-center
                items-center
                w-[5.75rem]
                h-11
                rounded-xs
                bg-white
                sm:small-group:inset-4"
        >
                <img
                    loading="lazy"
                    src="https://f.hellowork.com/img/entreprises/192878.png?v=20261001112010"
                    alt="Astek recrutement"
                    title="Recrutement Astek"
                    class="
                        w-full
                        h-full
                        px-3
                        py-2
                        object-contain"
                >
        </div>
    </header>

        



<div
    
            data-controller="intersect"
            data-analytics-values-param="{&quot;event&quot;:&quot;generic_product&quot;,&quot;event_name&quot;:&quot;product.display&quot;,&quot;product_data&quot;:[{&quot;product_id&quot;:&quot;79418480&quot;,&quot;product_response_type&quot;:&quot;UrlWithForm&quot;,&quot;product_list&quot;:&quot;LO-Moteur-Exact&quot;,&quot;product_position&quot;:8,&quot;product_category&quot;:&quot;1&quot;,&quot;product_status&quot;:&quot;NotDefined&quot;}]}"
            data-action="intersect:enter->analytics#push:once"
            class="flex flex-col justify-between size-full p-4 sm:p-6 sm:small-group:p-4 min-w-0"
    data-cy="serpCard"
>
    <div class="flex flex-col">
        <header class="w-10/12">
                <div>
                        <a 
                            data-analytics-values-param="{&quot;event&quot;:&quot;generic_product&quot;,&quot;event_name&quot;:&quot;productClick&quot;,&quot;product_data&quot;:[{&quot;product_id&quot;:&quot;79418480&quot;,&quot;product_response_type&quot;:&quot;UrlWithForm&quot;,&quot;product_list&quot;:&quot;LO-Moteur-Exact&quot;,&quot;product_position&quot;:8}],&quot;app_version_array&quot;:{&quot;one-time-password-V1.0&quot;:&quot;Version_B&quot;}}"
                            data-action="analytics#push"
                            data-turbo="false"
                            href="/fr-fr/emplois/79418480.html"
                            title="D&#xE9;veloppeur Vue.Js H/F - Astek"
                            class="no-underline outline-none focus-within:underline forwarder inline"
                            data-cy="offerTitle"
                                                        aria-label="Voir offre de D&#xE9;veloppeur Vue.Js H/F &#xE0; Lille - 59, chez Astek, pour un CDI, avec un salaire de 35&#x202F;000 &#x20AC; / an, en temps plein, T&#xE9;l&#xE9;travail partiel"
                        >
                            


<h3 class="inline">
    <p class="typo-l sm:small-group:typo-l sm:typo-xl">D&#xE9;veloppeur Vue.Js H/F</p>
        <p class="typo-s inline">Astek</p>
</h3>

                        </a>

                </div>

        </header>
            <div class="mt-6 flex flex-col gap-3 sm:flex-row sm:small-group:flex-col">
                <div class="flex gap-3 flex-wrap">
                        <div
                            class="readonly tag-secondary-s w-fit border-0"
                            data-cy="localisationCard"
                        >
                            Lille - 59
                        </div>
                        <div
                            class="readonly tag-secondary-s w-fit border-0"
                            data-cy="contractCard"
                        >
                            CDI
                        </div>
                        <div class="readonly tag-secondary-s typo-s-bold w-fit border-0">35&#x202F;000 &#x20AC; / an</div>
                            <div
                                class="readonly tag-secondary-s border-0 w-fit"
                                data-cy="contractTag"
                            >
                                T&#xE9;l&#xE9;travail partiel
                            </div>
                </div>
            </div>

    </div>


            <div class="mt-6 sm:mt-3 flex sm:flex-row-reverse items-end justify-between sm:small-group:mt-6 sm:small-group:flex-row flex-wrap">
                    <span class="btn-outline-m group-hocus-within:bg-black group-hocus-within:border-transparent group-hocus-within:text-white group-hocus-within:opacity-100">Voir l’offre</span>
                    <div class="typo-s text-grey-500 pl-1 pt-1">il y a 17 jours</div>
            </div>
</div>
    </div>
</div>
                    </div>
                </li>
                <li data-id-storage-target="item"
                    data-hide-offer-target="item"
                    data-id-storage-item-id="84245951"
                    data-hide-offer-item-id-value="84245951">
                    

                    <div>
                        
<div
    class="group h-full overflow-hidden bg-white rounded-sm border border-grey-100 hover:border-grey-500 focus-within:outline focus-within:transition-none transition-border-color duration-100"
>
    <div class="h-full relative flex flex-col sm:flex-row sm:small-group:flex-col ">
        <div class="absolute right-6 sm:small-group:right-4 top-6 sm:small-group:top-[21px] z-[2] flex gap-4 sm:gap-0">
                <form action="/fr-fr/searchoffers/hideoffermodalframeview"
                      method="GET"
                      data-turbo-frame="exclude-criteria-frame">
                    <input type="hidden" name="offerId" value="84245951">
                    <input type="hidden" name="title" value="Analyste D&#xE9;veloppeur As400 Adeline H/F">
                    <input type="hidden" name="company" value="Amiltone">
                    <button type="submit"
                            data-cy="hideOfferBtn"
                            data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;exclude_offer&quot;,&quot;event_info&quot;:&quot;Ic&#xF4;ne masquage d&#x27;offre&quot;}"
                            data-action="analytics#push"
                            class="btn-icon-no-outline-m sm:btn-icon-no-outline-l small-group:sm:btn-icon-no-outline-m"
                            aria-label="Masquer l'offre Analyste D&#xE9;veloppeur As400 Adeline H/F">
                        <svg aria-hidden="true" class="size-3 sm:size-4 small-group:sm:size-3">
                            <use href="/svg/icons/disabled.svg#disabled"></use>
                        </svg>
                    </button>
                </form>
            

<turbo-frame id="bookmark-frame-card84245951">
    <form 
        action="/fr-fr/candidat/tooglebookmark"
        method="GET"
        data-controller="bookmark"
        data-bookmark-offer-id-value="84245951"
        data-bookmark-bookmarked-icon-value="/svg/icons/bookmark.svg#bookmark-active"
        data-bookmark-unbookmarked-icon-value="/svg/icons/bookmark.svg#bookmark"
        data-bookmark-bookmarked-class="text-pink-500"
        data-fetch-account-data-event-param="turbo:submit-end"
        data-action="fetch-account-data#refreshAfterNextTurboEvent"
    >
        <input type="hidden" name="idOffre" value="84245951">
        <input type="hidden" name="turboFrameId" value="bookmark-frame-card84245951">
        <input type="hidden" name="isFromToolbar" value="False"/>
        <button 
            class="btn-icon-no-outline-m sm:btn-icon-no-outline-l small-group:sm:btn-icon-no-outline-m"
            data-bookmark-target="button"
            data-analytics-values-param='{"event": "generic", "EventName" : "bookmark_add", "EventLibelle": "" }'
            data-action="analytics#push:stop"
            data-cy="bookmarkBtn"
        >
            <svg class="size-3 sm:size-4 small-group:sm:size-3">
                <use data-bookmark-target="icon" href="/svg/icons/bookmark.svg#bookmark"></use>
            </svg>
        </button>
    </form>

    


</turbo-frame>
        </div>
        



    <header
        class="
            max-h-[74px]
            min-h-[74px]
            sm:max-h-none
            relative
            w-full
            overflow-hidden
            sm:max-w-64
            sm:small-group:w-full
            sm:small-group:max-h-[74px]
            sm:small-group:max-w-none
        ">

            <div class="absolute inset-0 bg-black/5 z-[1]"></div>
            <img
                class="
                    size-full
                    object-cover
                    object-center
                "
                src="https://f.hellowork.com/media/companypage/192533/350_233/84760_6384592232722709089462186.jpeg"
                loading="lazy"
                alt="Amiltone recrutement">

        <div class="
                z-[2]
                absolute
                sm:top-auto
                inset-4
                sm:inset-6
                flex
                justify-center
                items-center
                w-[5.75rem]
                h-11
                rounded-xs
                bg-white
                sm:small-group:inset-4"
        >
                <img
                    loading="lazy"
                    src="https://f.hellowork.com/img/entreprises/192533.png?v=20261001112010"
                    alt="Amiltone recrutement"
                    title="Recrutement Amiltone"
                    class="
                        w-full
                        h-full
                        px-3
                        py-2
                        object-contain"
                >
        </div>
    </header>

        



<div
    
            data-controller="intersect"
            data-analytics-values-param="{&quot;event&quot;:&quot;generic_product&quot;,&quot;event_name&quot;:&quot;product.display&quot;,&quot;product_data&quot;:[{&quot;product_id&quot;:&quot;84245951&quot;,&quot;product_response_type&quot;:&quot;ATS&quot;,&quot;product_list&quot;:&quot;LO-Moteur-Exact&quot;,&quot;product_position&quot;:9,&quot;product_category&quot;:&quot;1&quot;,&quot;product_status&quot;:&quot;Suivi de candidature&quot;}]}"
            data-action="intersect:enter->analytics#push:once"
            class="flex flex-col justify-between size-full p-4 sm:p-6 sm:small-group:p-4 min-w-0"
    data-cy="serpCard"
>
    <div class="flex flex-col">
        <header class="w-10/12">
                <span
                    class="badge-m badge-purple mb-4 relative z-[2]"
                    data-cy="followUpTag"
                    title="Ce recruteur partage l&#x2019;avancement des candidatures."
                >
                    Suivi de candidature
                </span>
                <div>
                        <a 
                            data-analytics-values-param="{&quot;event&quot;:&quot;generic_product&quot;,&quot;event_name&quot;:&quot;productClick&quot;,&quot;product_data&quot;:[{&quot;product_id&quot;:&quot;84245951&quot;,&quot;product_response_type&quot;:&quot;ATS&quot;,&quot;product_list&quot;:&quot;LO-Moteur-Exact&quot;,&quot;product_position&quot;:9}],&quot;app_version_array&quot;:{&quot;one-time-password-V1.0&quot;:&quot;Version_B&quot;}}"
                            data-action="analytics#push"
                            data-turbo="false"
                            href="/fr-fr/emplois/84245951.html"
                            title="Analyste D&#xE9;veloppeur As400 Adeline H/F - Amiltone"
                            class="no-underline outline-none focus-within:underline forwarder inline"
                            data-cy="offerTitle"
                                                        aria-label="Voir offre de Analyste D&#xE9;veloppeur As400 Adeline H/F &#xE0; Lille - 59, chez Amiltone, pour un CDI, en temps plein, T&#xE9;l&#xE9;travail partiel"
                        >
                            


<h3 class="inline">
    <p class="typo-l sm:small-group:typo-l sm:typo-xl">Analyste D&#xE9;veloppeur As400 Adeline H/F</p>
        <p class="typo-s inline">Amiltone</p>
</h3>

                        </a>

                </div>

        </header>
            <div class="mt-6 flex flex-col gap-3 sm:flex-row sm:small-group:flex-col">
                <div class="flex gap-3 flex-wrap">
                        <div
                            class="readonly tag-secondary-s w-fit border-0"
                            data-cy="localisationCard"
                        >
                            Lille - 59
                        </div>
                        <div
                            class="readonly tag-secondary-s w-fit border-0"
                            data-cy="contractCard"
                        >
                            CDI
                        </div>
                            <div
                                class="readonly tag-secondary-s border-0 w-fit"
                                data-cy="contractTag"
                            >
                                T&#xE9;l&#xE9;travail partiel
                            </div>
                </div>
            </div>

    </div>


            <div class="mt-6 sm:mt-3 flex sm:flex-row-reverse items-end justify-between sm:small-group:mt-6 sm:small-group:flex-row flex-wrap">
                    <span class="btn-outline-m group-hocus-within:bg-black group-hocus-within:border-transparent group-hocus-within:text-white group-hocus-within:opacity-100">Voir l’offre</span>
                    <div class="typo-s text-grey-500 pl-1 pt-1">il y a 5 jours</div>
            </div>
</div>
    </div>
</div>
                    </div>
                </li>
                <li data-id-storage-target="item"
                    data-hide-offer-target="item"
                    data-id-storage-item-id="79418431"
                    data-hide-offer-item-id-value="79418431">
                    

                    <div>
                        
<div
    class="group h-full overflow-hidden bg-white rounded-sm border border-grey-100 hover:border-grey-500 focus-within:outline focus-within:transition-none transition-border-color duration-100"
>
    <div class="h-full relative flex flex-col sm:flex-row sm:small-group:flex-col ">
        <div class="absolute right-6 sm:small-group:right-4 top-6 sm:small-group:top-[21px] z-[2] flex gap-4 sm:gap-0">
                <form action="/fr-fr/searchoffers/hideoffermodalframeview"
                      method="GET"
                      data-turbo-frame="exclude-criteria-frame">
                    <input type="hidden" name="offerId" value="79418431">
                    <input type="hidden" name="title" value="D&#xE9;veloppeur Nest.Js H/F">
                    <input type="hidden" name="company" value="Astek">
                    <button type="submit"
                            data-cy="hideOfferBtn"
                            data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;exclude_offer&quot;,&quot;event_info&quot;:&quot;Ic&#xF4;ne masquage d&#x27;offre&quot;}"
                            data-action="analytics#push"
                            class="btn-icon-no-outline-m sm:btn-icon-no-outline-l small-group:sm:btn-icon-no-outline-m"
                            aria-label="Masquer l'offre D&#xE9;veloppeur Nest.Js H/F">
                        <svg aria-hidden="true" class="size-3 sm:size-4 small-group:sm:size-3">
                            <use href="/svg/icons/disabled.svg#disabled"></use>
                        </svg>
                    </button>
                </form>
            

<turbo-frame id="bookmark-frame-card79418431">
    <form 
        action="/fr-fr/candidat/tooglebookmark"
        method="GET"
        data-controller="bookmark"
        data-bookmark-offer-id-value="79418431"
        data-bookmark-bookmarked-icon-value="/svg/icons/bookmark.svg#bookmark-active"
        data-bookmark-unbookmarked-icon-value="/svg/icons/bookmark.svg#bookmark"
        data-bookmark-bookmarked-class="text-pink-500"
        data-fetch-account-data-event-param="turbo:submit-end"
        data-action="fetch-account-data#refreshAfterNextTurboEvent"
    >
        <input type="hidden" name="idOffre" value="79418431">
        <input type="hidden" name="turboFrameId" value="bookmark-frame-card79418431">
        <input type="hidden" name="isFromToolbar" value="False"/>
        <button 
            class="btn-icon-no-outline-m sm:btn-icon-no-outline-l small-group:sm:btn-icon-no-outline-m"
            data-bookmark-target="button"
            data-analytics-values-param='{"event": "generic", "EventName" : "bookmark_add", "EventLibelle": "" }'
            data-action="analytics#push:stop"
            data-cy="bookmarkBtn"
        >
            <svg class="size-3 sm:size-4 small-group:sm:size-3">
                <use data-bookmark-target="icon" href="/svg/icons/bookmark.svg#bookmark"></use>
            </svg>
        </button>
    </form>

    


</turbo-frame>
        </div>
        



    <header
        class="
            max-h-[74px]
            min-h-[74px]
            sm:max-h-none
            relative
            w-full
            overflow-hidden
            sm:max-w-64
            sm:small-group:w-full
            sm:small-group:max-h-[74px]
            sm:small-group:max-w-none
        ">

            <div class="absolute inset-0 bg-black/5 z-[1]"></div>
            <img
                class="
                    size-full
                    object-cover
                    object-center
                "
                src="https://f.hellowork.com/media/companypage/192878/350_233/519_63845409624817817147777332.jpeg"
                loading="lazy"
                alt="Astek recrutement">

        <div class="
                z-[2]
                absolute
                sm:top-auto
                inset-4
                sm:inset-6
                flex
                justify-center
                items-center
                w-[5.75rem]
                h-11
                rounded-xs
                bg-white
                sm:small-group:inset-4"
        >
                <img
                    loading="lazy"
                    src="https://f.hellowork.com/img/entreprises/192878.png?v=20261001112010"
                    alt="Astek recrutement"
                    title="Recrutement Astek"
                    class="
                        w-full
                        h-full
                        px-3
                        py-2
                        object-contain"
                >
        </div>
    </header>

        



<div
    
            data-controller="intersect"
            data-analytics-values-param="{&quot;event&quot;:&quot;generic_product&quot;,&quot;event_name&quot;:&quot;product.display&quot;,&quot;product_data&quot;:[{&quot;product_id&quot;:&quot;79418431&quot;,&quot;product_response_type&quot;:&quot;UrlWithForm&quot;,&quot;product_list&quot;:&quot;LO-Moteur-Exact&quot;,&quot;product_position&quot;:10,&quot;product_category&quot;:&quot;1&quot;,&quot;product_status&quot;:&quot;NotDefined&quot;}]}"
            data-action="intersect:enter->analytics#push:once"
            class="flex flex-col justify-between size-full p-4 sm:p-6 sm:small-group:p-4 min-w-0"
    data-cy="serpCard"
>
    <div class="flex flex-col">
        <header class="w-10/12">
                <div>
                        <a 
                            data-analytics-values-param="{&quot;event&quot;:&quot;generic_product&quot;,&quot;event_name&quot;:&quot;productClick&quot;,&quot;product_data&quot;:[{&quot;product_id&quot;:&quot;79418431&quot;,&quot;product_response_type&quot;:&quot;UrlWithForm&quot;,&quot;product_list&quot;:&quot;LO-Moteur-Exact&quot;,&quot;product_position&quot;:10}],&quot;app_version_array&quot;:{&quot;one-time-password-V1.0&quot;:&quot;Version_B&quot;}}"
                            data-action="analytics#push"
                            data-turbo="false"
                            href="/fr-fr/emplois/79418431.html"
                            title="D&#xE9;veloppeur Nest.Js H/F - Astek"
                            class="no-underline outline-none focus-within:underline forwarder inline"
                            data-cy="offerTitle"
                                                        aria-label="Voir offre de D&#xE9;veloppeur Nest.Js H/F &#xE0; Lille - 59, chez Astek, pour un CDI, avec un salaire de 35&#x202F;000 &#x20AC; / an, en temps plein, T&#xE9;l&#xE9;travail partiel"
                        >
                            


<h3 class="inline">
    <p class="typo-l sm:small-group:typo-l sm:typo-xl">D&#xE9;veloppeur Nest.Js H/F</p>
        <p class="typo-s inline">Astek</p>
</h3>

                        </a>

                </div>

        </header>
            <div class="mt-6 flex flex-col gap-3 sm:flex-row sm:small-group:flex-col">
                <div class="flex gap-3 flex-wrap">
                        <div
                            class="readonly tag-secondary-s w-fit border-0"
                            data-cy="localisationCard"
                        >
                            Lille - 59
                        </div>
                        <div
                            class="readonly tag-secondary-s w-fit border-0"
                            data-cy="contractCard"
                        >
                            CDI
                        </div>
                        <div class="readonly tag-secondary-s typo-s-bold w-fit border-0">35&#x202F;000 &#x20AC; / an</div>
                            <div
                                class="readonly tag-secondary-s border-0 w-fit"
                                data-cy="contractTag"
                            >
                                T&#xE9;l&#xE9;travail partiel
                            </div>
                </div>
            </div>

    </div>


            <div class="mt-6 sm:mt-3 flex sm:flex-row-reverse items-end justify-between sm:small-group:mt-6 sm:small-group:flex-row flex-wrap">
                    <span class="btn-outline-m group-hocus-within:bg-black group-hocus-within:border-transparent group-hocus-within:text-white group-hocus-within:opacity-100">Voir l’offre</span>
                    <div class="typo-s text-grey-500 pl-1 pt-1">il y a 17 jours</div>
            </div>
</div>
    </div>
</div>
                    </div>
                </li>
                <li data-id-storage-target="item"
                    data-hide-offer-target="item"
                    data-id-storage-item-id="76339718"
                    data-hide-offer-item-id-value="76339718">
                    

                    <div>
                        
<div
    class="group h-full overflow-hidden bg-white rounded-sm border border-grey-100 hover:border-grey-500 focus-within:outline focus-within:transition-none transition-border-color duration-100"
>
    <div class="h-full relative flex flex-col sm:flex-row sm:small-group:flex-col ">
        <div class="absolute right-6 sm:small-group:right-4 top-6 sm:small-group:top-[21px] z-[2] flex gap-4 sm:gap-0">
                <form action="/fr-fr/searchoffers/hideoffermodalframeview"
                      method="GET"
                      data-turbo-frame="exclude-criteria-frame">
                    <input type="hidden" name="offerId" value="76339718">
                    <input type="hidden" name="title" value="D&#xE9;veloppeur Backend Python H/F">
                    <input type="hidden" name="company" value="Scalian">
                    <button type="submit"
                            data-cy="hideOfferBtn"
                            data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;exclude_offer&quot;,&quot;event_info&quot;:&quot;Ic&#xF4;ne masquage d&#x27;offre&quot;}"
                            data-action="analytics#push"
                            class="btn-icon-no-outline-m sm:btn-icon-no-outline-l small-group:sm:btn-icon-no-outline-m"
                            aria-label="Masquer l'offre D&#xE9;veloppeur Backend Python H/F">
                        <svg aria-hidden="true" class="size-3 sm:size-4 small-group:sm:size-3">
                            <use href="/svg/icons/disabled.svg#disabled"></use>
                        </svg>
                    </button>
                </form>
            

<turbo-frame id="bookmark-frame-card76339718">
    <form 
        action="/fr-fr/candidat/tooglebookmark"
        method="GET"
        data-controller="bookmark"
        data-bookmark-offer-id-value="76339718"
        data-bookmark-bookmarked-icon-value="/svg/icons/bookmark.svg#bookmark-active"
        data-bookmark-unbookmarked-icon-value="/svg/icons/bookmark.svg#bookmark"
        data-bookmark-bookmarked-class="text-pink-500"
        data-fetch-account-data-event-param="turbo:submit-end"
        data-action="fetch-account-data#refreshAfterNextTurboEvent"
    >
        <input type="hidden" name="idOffre" value="76339718">
        <input type="hidden" name="turboFrameId" value="bookmark-frame-card76339718">
        <input type="hidden" name="isFromToolbar" value="False"/>
        <button 
            class="btn-icon-no-outline-m sm:btn-icon-no-outline-l small-group:sm:btn-icon-no-outline-m"
            data-bookmark-target="button"
            data-analytics-values-param='{"event": "generic", "EventName" : "bookmark_add", "EventLibelle": "" }'
            data-action="analytics#push:stop"
            data-cy="bookmarkBtn"
        >
            <svg class="size-3 sm:size-4 small-group:sm:size-3">
                <use data-bookmark-target="icon" href="/svg/icons/bookmark.svg#bookmark"></use>
            </svg>
        </button>
    </form>

    


</turbo-frame>
        </div>
        



    <header
        class="
            max-h-[74px]
            min-h-[74px]
            sm:max-h-none
            relative
            w-full
            overflow-hidden
            sm:max-w-64
            sm:small-group:w-full
            sm:small-group:max-h-[74px]
            sm:small-group:max-w-none
        ">

            <div class="absolute inset-0 bg-black/5 z-[1]"></div>
            <img
                class="
                    size-full
                    object-cover
                    object-center
                "
                src="https://f.hellowork.com/media/companypage/201835/350_233/75212_63881085688746071633466468.jpg"
                loading="lazy"
                alt="Scalian recrutement">

        <div class="
                z-[2]
                absolute
                sm:top-auto
                inset-4
                sm:inset-6
                flex
                justify-center
                items-center
                w-[5.75rem]
                h-11
                rounded-xs
                bg-white
                sm:small-group:inset-4"
        >
                <img
                    loading="lazy"
                    src="https://f.hellowork.com/img/entreprises/201835.png?v=20261001112012"
                    alt="Scalian recrutement"
                    title="Recrutement Scalian"
                    class="
                        w-full
                        h-full
                        px-3
                        py-2
                        object-contain"
                >
        </div>
    </header>

        



<div
    
            data-controller="intersect"
            data-analytics-values-param="{&quot;event&quot;:&quot;generic_product&quot;,&quot;event_name&quot;:&quot;product.display&quot;,&quot;product_data&quot;:[{&quot;product_id&quot;:&quot;76339718&quot;,&quot;product_response_type&quot;:&quot;ATS&quot;,&quot;product_list&quot;:&quot;LO-Moteur-Exact&quot;,&quot;product_position&quot;:11,&quot;product_category&quot;:&quot;1&quot;,&quot;product_status&quot;:&quot;Suivi de candidature&quot;}]}"
            data-action="intersect:enter->analytics#push:once"
            class="flex flex-col justify-between size-full p-4 sm:p-6 sm:small-group:p-4 min-w-0"
    data-cy="serpCard"
>
    <div class="flex flex-col">
        <header class="w-10/12">
                <span
                    class="badge-m badge-purple mb-4 relative z-[2]"
                    data-cy="followUpTag"
                    title="Ce recruteur partage l&#x2019;avancement des candidatures."
                >
                    Suivi de candidature
                </span>
                <div>
                        <a 
                            data-analytics-values-param="{&quot;event&quot;:&quot;generic_product&quot;,&quot;event_name&quot;:&quot;productClick&quot;,&quot;product_data&quot;:[{&quot;product_id&quot;:&quot;76339718&quot;,&quot;product_response_type&quot;:&quot;ATS&quot;,&quot;product_list&quot;:&quot;LO-Moteur-Exact&quot;,&quot;product_position&quot;:11}],&quot;app_version_array&quot;:{&quot;one-time-password-V1.0&quot;:&quot;Version_B&quot;}}"
                            data-action="analytics#push"
                            data-turbo="false"
                            href="/fr-fr/emplois/76339718.html"
                            title="D&#xE9;veloppeur Backend Python H/F - Scalian"
                            class="no-underline outline-none focus-within:underline forwarder inline"
                            data-cy="offerTitle"
                                                        aria-label="Voir offre de D&#xE9;veloppeur Backend Python H/F &#xE0; Lille - 59, chez Scalian, pour un CDI, avec un salaire de 45&#x202F;000 - 50&#x202F;000 &#x20AC; / an, en temps plein"
                        >
                            


<h3 class="inline">
    <p class="typo-l sm:small-group:typo-l sm:typo-xl">D&#xE9;veloppeur Backend Python H/F</p>
        <p class="typo-s inline">Scalian</p>
</h3>

                        </a>

                </div>

        </header>
            <div class="mt-6 flex flex-col gap-3 sm:flex-row sm:small-group:flex-col">
                <div class="flex gap-3 flex-wrap">
                        <div
                            class="readonly tag-secondary-s w-fit border-0"
                            data-cy="localisationCard"
                        >
                            Lille - 59
                        </div>
                        <div
                            class="readonly tag-secondary-s w-fit border-0"
                            data-cy="contractCard"
                        >
                            CDI
                        </div>
                        <div class="readonly tag-secondary-s typo-s-bold w-fit border-0">45&#x202F;000 - 50&#x202F;000 &#x20AC; / an</div>
                </div>
            </div>

    </div>


            <div class="mt-6 sm:mt-3 flex sm:flex-row-reverse items-end justify-between sm:small-group:mt-6 sm:small-group:flex-row flex-wrap">
                    <span class="btn-outline-m group-hocus-within:bg-black group-hocus-within:border-transparent group-hocus-within:text-white group-hocus-within:opacity-100">Voir l’offre</span>
                    <div class="typo-s text-grey-500 pl-1 pt-1">il y a 11 jours</div>
            </div>
</div>
    </div>
</div>
                    </div>
                </li>
                <li data-id-storage-target="item"
                    data-hide-offer-target="item"
                    data-id-storage-item-id="83962460"
                    data-hide-offer-item-id-value="83962460">
                    

                    <div>
                        
<div
    class="group h-full overflow-hidden bg-white rounded-sm border border-grey-100 hover:border-grey-500 focus-within:outline focus-within:transition-none transition-border-color duration-100"
>
    <div class="h-full relative flex flex-col sm:flex-row sm:small-group:flex-col ">
        <div class="absolute right-6 sm:small-group:right-4 top-6 sm:small-group:top-[21px] z-[2] flex gap-4 sm:gap-0">
                <form action="/fr-fr/searchoffers/hideoffermodalframeview"
                      method="GET"
                      data-turbo-frame="exclude-criteria-frame">
                    <input type="hidden" name="offerId" value="83962460">
                    <input type="hidden" name="title" value="D&#xE9;veloppeur GO Senior H/F">
                    <input type="hidden" name="company" value="Klanik">
                    <button type="submit"
                            data-cy="hideOfferBtn"
                            data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;exclude_offer&quot;,&quot;event_info&quot;:&quot;Ic&#xF4;ne masquage d&#x27;offre&quot;}"
                            data-action="analytics#push"
                            class="btn-icon-no-outline-m sm:btn-icon-no-outline-l small-group:sm:btn-icon-no-outline-m"
                            aria-label="Masquer l'offre D&#xE9;veloppeur GO Senior H/F">
                        <svg aria-hidden="true" class="size-3 sm:size-4 small-group:sm:size-3">
                            <use href="/svg/icons/disabled.svg#disabled"></use>
                        </svg>
                    </button>
                </form>
            

<turbo-frame id="bookmark-frame-card83962460">
    <form 
        action="/fr-fr/candidat/tooglebookmark"
        method="GET"
        data-controller="bookmark"
        data-bookmark-offer-id-value="83962460"
        data-bookmark-bookmarked-icon-value="/svg/icons/bookmark.svg#bookmark-active"
        data-bookmark-unbookmarked-icon-value="/svg/icons/bookmark.svg#bookmark"
        data-bookmark-bookmarked-class="text-pink-500"
        data-fetch-account-data-event-param="turbo:submit-end"
        data-action="fetch-account-data#refreshAfterNextTurboEvent"
    >
        <input type="hidden" name="idOffre" value="83962460">
        <input type="hidden" name="turboFrameId" value="bookmark-frame-card83962460">
        <input type="hidden" name="isFromToolbar" value="False"/>
        <button 
            class="btn-icon-no-outline-m sm:btn-icon-no-outline-l small-group:sm:btn-icon-no-outline-m"
            data-bookmark-target="button"
            data-analytics-values-param='{"event": "generic", "EventName" : "bookmark_add", "EventLibelle": "" }'
            data-action="analytics#push:stop"
            data-cy="bookmarkBtn"
        >
            <svg class="size-3 sm:size-4 small-group:sm:size-3">
                <use data-bookmark-target="icon" href="/svg/icons/bookmark.svg#bookmark"></use>
            </svg>
        </button>
    </form>

    


</turbo-frame>
        </div>
        



    <header
        class="
            max-h-[74px]
            min-h-[74px]
            sm:max-h-none
            relative
            w-full
            overflow-hidden
            sm:max-w-64
            sm:small-group:w-full
            sm:small-group:max-h-[74px]
            sm:small-group:max-w-none
        ">

            <div
                class="
                    relative
                    h-[74px]
                    sm:h-full
                    bg-purple-100
                    text-purple-200
                ">
                <svg class="absolute
                        -left-[110px] sm:-left-[120px]
                        -bottom-[100px] sm:bottom-[20px] sm:small-group:-bottom-[95px]
                        w-[617px] sm:w-[547px]
                        h-[301px] sm:h-[267px]
                        opacity-20 rotate-[158deg]">
                    <use href="/svg/illustrations/chevron.svg#chevron"></use>
                </svg>
            </div>

        <div class="
                z-[2]
                absolute
                sm:top-auto
                inset-4
                sm:inset-6
                flex
                justify-center
                items-center
                w-[5.75rem]
                h-11
                rounded-xs
                bg-white
                sm:small-group:inset-4"
        >
                <img
                    loading="lazy"
                    src="https://f.hellowork.com/img/entreprises/190084.png?v=20260701181527"
                    alt="Klanik recrutement"
                    title="Recrutement Klanik"
                    class="
                        w-full
                        h-full
                        px-3
                        py-2
                        object-contain"
                >
        </div>
    </header>

        



<div
    
            data-controller="intersect"
            data-analytics-values-param="{&quot;event&quot;:&quot;generic_product&quot;,&quot;event_name&quot;:&quot;product.display&quot;,&quot;product_data&quot;:[{&quot;product_id&quot;:&quot;83962460&quot;,&quot;product_response_type&quot;:&quot;ATS&quot;,&quot;product_list&quot;:&quot;LO-Moteur-Exact&quot;,&quot;product_position&quot;:12,&quot;product_category&quot;:&quot;1&quot;,&quot;product_status&quot;:&quot;Suivi de candidature&quot;}]}"
            data-action="intersect:enter->analytics#push:once"
            class="flex flex-col justify-between size-full p-4 sm:p-6 sm:small-group:p-4 min-w-0"
    data-cy="serpCard"
>
    <div class="flex flex-col">
        <header class="w-10/12">
                <span
                    class="badge-m badge-purple mb-4 relative z-[2]"
                    data-cy="followUpTag"
                    title="Ce recruteur partage l&#x2019;avancement des candidatures."
                >
                    Suivi de candidature
                </span>
                <div>
                        <a 
                            data-analytics-values-param="{&quot;event&quot;:&quot;generic_product&quot;,&quot;event_name&quot;:&quot;productClick&quot;,&quot;product_data&quot;:[{&quot;product_id&quot;:&quot;83962460&quot;,&quot;product_response_type&quot;:&quot;ATS&quot;,&quot;product_list&quot;:&quot;LO-Moteur-Exact&quot;,&quot;product_position&quot;:12}],&quot;app_version_array&quot;:{&quot;one-time-password-V1.0&quot;:&quot;Version_B&quot;}}"
                            data-action="analytics#push"
                            data-turbo="false"
                            href="/fr-fr/emplois/83962460.html"
                            title="D&#xE9;veloppeur GO Senior H/F - Klanik"
                            class="no-underline outline-none focus-within:underline forwarder inline"
                            data-cy="offerTitle"
                                                        aria-label="Voir offre de D&#xE9;veloppeur GO Senior H/F &#xE0; Lille - 59, chez Klanik, pour un CDI, avec un salaire de 45&#x202F;000 - 55&#x202F;000 &#x20AC; / an, en temps plein, T&#xE9;l&#xE9;travail partiel"
                        >
                            


<h3 class="inline">
    <p class="typo-l sm:small-group:typo-l sm:typo-xl">D&#xE9;veloppeur GO Senior H/F</p>
        <p class="typo-s inline">Klanik</p>
</h3>

                        </a>

                </div>

        </header>
            <div class="mt-6 flex flex-col gap-3 sm:flex-row sm:small-group:flex-col">
                <div class="flex gap-3 flex-wrap">
                        <div
                            class="readonly tag-secondary-s w-fit border-0"
                            data-cy="localisationCard"
                        >
                            Lille - 59
                        </div>
                        <div
                            class="readonly tag-secondary-s w-fit border-0"
                            data-cy="contractCard"
                        >
                            CDI
                        </div>
                        <div class="readonly tag-secondary-s typo-s-bold w-fit border-0">45&#x202F;000 - 55&#x202F;000 &#x20AC; / an</div>
                            <div
                                class="readonly tag-secondary-s border-0 w-fit"
                                data-cy="contractTag"
                            >
                                T&#xE9;l&#xE9;travail partiel
                            </div>
                </div>
            </div>

    </div>


            <div class="mt-6 sm:mt-3 flex sm:flex-row-reverse items-end justify-between sm:small-group:mt-6 sm:small-group:flex-row flex-wrap">
                    <span class="btn-outline-m group-hocus-within:bg-black group-hocus-within:border-transparent group-hocus-within:text-white group-hocus-within:opacity-100">Voir l’offre</span>
                    <div class="typo-s text-grey-500 pl-1 pt-1">il y a 13 jours</div>
            </div>
</div>
    </div>
</div>
                    </div>
                </li>
                <li data-id-storage-target="item"
                    data-hide-offer-target="item"
                    data-id-storage-item-id="73395675"
                    data-hide-offer-item-id-value="73395675">
                    

                    <div>
                        
<div
    class="group h-full overflow-hidden bg-white rounded-sm border border-grey-100 hover:border-grey-500 focus-within:outline focus-within:transition-none transition-border-color duration-100"
>
    <div class="h-full relative flex flex-col sm:flex-row sm:small-group:flex-col ">
        <div class="absolute right-6 sm:small-group:right-4 top-6 sm:small-group:top-[21px] z-[2] flex gap-4 sm:gap-0">
                <form action="/fr-fr/searchoffers/hideoffermodalframeview"
                      method="GET"
                      data-turbo-frame="exclude-criteria-frame">
                    <input type="hidden" name="offerId" value="73395675">
                    <input type="hidden" name="title" value="D&#xE9;veloppeur FullstackNode.Js - React - Vue.Js H/F">
                    <input type="hidden" name="company" value="Astek">
                    <button type="submit"
                            data-cy="hideOfferBtn"
                            data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;exclude_offer&quot;,&quot;event_info&quot;:&quot;Ic&#xF4;ne masquage d&#x27;offre&quot;}"
                            data-action="analytics#push"
                            class="btn-icon-no-outline-m sm:btn-icon-no-outline-l small-group:sm:btn-icon-no-outline-m"
                            aria-label="Masquer l'offre D&#xE9;veloppeur FullstackNode.Js - React - Vue.Js H/F">
                        <svg aria-hidden="true" class="size-3 sm:size-4 small-group:sm:size-3">
                            <use href="/svg/icons/disabled.svg#disabled"></use>
                        </svg>
                    </button>
                </form>
            

<turbo-frame id="bookmark-frame-card73395675">
    <form 
        action="/fr-fr/candidat/tooglebookmark"
        method="GET"
        data-controller="bookmark"
        data-bookmark-offer-id-value="73395675"
        data-bookmark-bookmarked-icon-value="/svg/icons/bookmark.svg#bookmark-active"
        data-bookmark-unbookmarked-icon-value="/svg/icons/bookmark.svg#bookmark"
        data-bookmark-bookmarked-class="text-pink-500"
        data-fetch-account-data-event-param="turbo:submit-end"
        data-action="fetch-account-data#refreshAfterNextTurboEvent"
    >
        <input type="hidden" name="idOffre" value="73395675">
        <input type="hidden" name="turboFrameId" value="bookmark-frame-card73395675">
        <input type="hidden" name="isFromToolbar" value="False"/>
        <button 
            class="btn-icon-no-outline-m sm:btn-icon-no-outline-l small-group:sm:btn-icon-no-outline-m"
            data-bookmark-target="button"
            data-analytics-values-param='{"event": "generic", "EventName" : "bookmark_add", "EventLibelle": "" }'
            data-action="analytics#push:stop"
            data-cy="bookmarkBtn"
        >
            <svg class="size-3 sm:size-4 small-group:sm:size-3">
                <use data-bookmark-target="icon" href="/svg/icons/bookmark.svg#bookmark"></use>
            </svg>
        </button>
    </form>

    


</turbo-frame>
        </div>
        



    <header
        class="
            max-h-[74px]
            min-h-[74px]
            sm:max-h-none
            relative
            w-full
            overflow-hidden
            sm:max-w-64
            sm:small-group:w-full
            sm:small-group:max-h-[74px]
            sm:small-group:max-w-none
        ">

            <div class="absolute inset-0 bg-black/5 z-[1]"></div>
            <img
                class="
                    size-full
                    object-cover
                    object-center
                "
                src="https://f.hellowork.com/media/companypage/192878/350_233/519_63845409624817817147777332.jpeg"
                loading="lazy"
                alt="Astek recrutement">

        <div class="
                z-[2]
                absolute
                sm:top-auto
                inset-4
                sm:inset-6
                flex
                justify-center
                items-center
                w-[5.75rem]
                h-11
                rounded-xs
                bg-white
                sm:small-group:inset-4"
        >
                <img
                    loading="lazy"
                    src="https://f.hellowork.com/img/entreprises/192878.png?v=20261001112010"
                    alt="Astek recrutement"
                    title="Recrutement Astek"
                    class="
                        w-full
                        h-full
                        px-3
                        py-2
                        object-contain"
                >
        </div>
    </header>

        



<div
    
            data-controller="intersect"
            data-analytics-values-param="{&quot;event&quot;:&quot;generic_product&quot;,&quot;event_name&quot;:&quot;product.display&quot;,&quot;product_data&quot;:[{&quot;product_id&quot;:&quot;73395675&quot;,&quot;product_response_type&quot;:&quot;UrlWithForm&quot;,&quot;product_list&quot;:&quot;LO-Moteur-Exact&quot;,&quot;product_position&quot;:13,&quot;product_category&quot;:&quot;1&quot;,&quot;product_status&quot;:&quot;NotDefined&quot;}]}"
            data-action="intersect:enter->analytics#push:once"
            class="flex flex-col justify-between size-full p-4 sm:p-6 sm:small-group:p-4 min-w-0"
    data-cy="serpCard"
>
    <div class="flex flex-col">
        <header class="w-10/12">
                <div>
                        <a 
                            data-analytics-values-param="{&quot;event&quot;:&quot;generic_product&quot;,&quot;event_name&quot;:&quot;productClick&quot;,&quot;product_data&quot;:[{&quot;product_id&quot;:&quot;73395675&quot;,&quot;product_response_type&quot;:&quot;UrlWithForm&quot;,&quot;product_list&quot;:&quot;LO-Moteur-Exact&quot;,&quot;product_position&quot;:13}],&quot;app_version_array&quot;:{&quot;one-time-password-V1.0&quot;:&quot;Version_B&quot;}}"
                            data-action="analytics#push"
                            data-turbo="false"
                            href="/fr-fr/emplois/73395675.html"
                            title="D&#xE9;veloppeur FullstackNode.Js - React - Vue.Js H/F - Astek"
                            class="no-underline outline-none focus-within:underline forwarder inline"
                            data-cy="offerTitle"
                                                        aria-label="Voir offre de D&#xE9;veloppeur FullstackNode.Js - React - Vue.Js H/F &#xE0; Lille - 59, chez Astek, pour un CDI, avec un salaire de 35&#x202F;000 &#x20AC; / an, en temps plein, T&#xE9;l&#xE9;travail partiel"
                        >
                            


<h3 class="inline">
    <p class="typo-l sm:small-group:typo-l sm:typo-xl">D&#xE9;veloppeur FullstackNode.Js - React - Vue.Js H/F</p>
        <p class="typo-s inline">Astek</p>
</h3>

                        </a>

                </div>

        </header>
            <div class="mt-6 flex flex-col gap-3 sm:flex-row sm:small-group:flex-col">
                <div class="flex gap-3 flex-wrap">
                        <div
                            class="readonly tag-secondary-s w-fit border-0"
                            data-cy="localisationCard"
                        >
                            Lille - 59
                        </div>
                        <div
                            class="readonly tag-secondary-s w-fit border-0"
                            data-cy="contractCard"
                        >
                            CDI
                        </div>
                        <div class="readonly tag-secondary-s typo-s-bold w-fit border-0">35&#x202F;000 &#x20AC; / an</div>
                            <div
                                class="readonly tag-secondary-s border-0 w-fit"
                                data-cy="contractTag"
                            >
                                T&#xE9;l&#xE9;travail partiel
                            </div>
                </div>
            </div>

    </div>


            <div class="mt-6 sm:mt-3 flex sm:flex-row-reverse items-end justify-between sm:small-group:mt-6 sm:small-group:flex-row flex-wrap">
                    <span class="btn-outline-m group-hocus-within:bg-black group-hocus-within:border-transparent group-hocus-within:text-white group-hocus-within:opacity-100">Voir l’offre</span>
                    <div class="typo-s text-grey-500 pl-1 pt-1">il y a 5 jours</div>
            </div>
</div>
    </div>
</div>
                    </div>
                </li>
                <li data-id-storage-target="item"
                    data-hide-offer-target="item"
                    data-id-storage-item-id="84206121"
                    data-hide-offer-item-id-value="84206121">
                    

                    <div>
                        
<div
    class="group h-full overflow-hidden bg-white rounded-sm border border-grey-100 hover:border-grey-500 focus-within:outline focus-within:transition-none transition-border-color duration-100"
>
    <div class="h-full relative flex flex-col sm:flex-row sm:small-group:flex-col ">
        <div class="absolute right-6 sm:small-group:right-4 top-6 sm:small-group:top-[21px] z-[2] flex gap-4 sm:gap-0">
                <form action="/fr-fr/searchoffers/hideoffermodalframeview"
                      method="GET"
                      data-turbo-frame="exclude-criteria-frame">
                    <input type="hidden" name="offerId" value="84206121">
                    <input type="hidden" name="title" value="D&#xE9;veloppeur Confirm&#xE9; Backend GO H/F">
                    <input type="hidden" name="company" value="Klanik">
                    <button type="submit"
                            data-cy="hideOfferBtn"
                            data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;exclude_offer&quot;,&quot;event_info&quot;:&quot;Ic&#xF4;ne masquage d&#x27;offre&quot;}"
                            data-action="analytics#push"
                            class="btn-icon-no-outline-m sm:btn-icon-no-outline-l small-group:sm:btn-icon-no-outline-m"
                            aria-label="Masquer l'offre D&#xE9;veloppeur Confirm&#xE9; Backend GO H/F">
                        <svg aria-hidden="true" class="size-3 sm:size-4 small-group:sm:size-3">
                            <use href="/svg/icons/disabled.svg#disabled"></use>
                        </svg>
                    </button>
                </form>
            

<turbo-frame id="bookmark-frame-card84206121">
    <form 
        action="/fr-fr/candidat/tooglebookmark"
        method="GET"
        data-controller="bookmark"
        data-bookmark-offer-id-value="84206121"
        data-bookmark-bookmarked-icon-value="/svg/icons/bookmark.svg#bookmark-active"
        data-bookmark-unbookmarked-icon-value="/svg/icons/bookmark.svg#bookmark"
        data-bookmark-bookmarked-class="text-pink-500"
        data-fetch-account-data-event-param="turbo:submit-end"
        data-action="fetch-account-data#refreshAfterNextTurboEvent"
    >
        <input type="hidden" name="idOffre" value="84206121">
        <input type="hidden" name="turboFrameId" value="bookmark-frame-card84206121">
        <input type="hidden" name="isFromToolbar" value="False"/>
        <button 
            class="btn-icon-no-outline-m sm:btn-icon-no-outline-l small-group:sm:btn-icon-no-outline-m"
            data-bookmark-target="button"
            data-analytics-values-param='{"event": "generic", "EventName" : "bookmark_add", "EventLibelle": "" }'
            data-action="analytics#push:stop"
            data-cy="bookmarkBtn"
        >
            <svg class="size-3 sm:size-4 small-group:sm:size-3">
                <use data-bookmark-target="icon" href="/svg/icons/bookmark.svg#bookmark"></use>
            </svg>
        </button>
    </form>

    


</turbo-frame>
        </div>
        



    <header
        class="
            max-h-[74px]
            min-h-[74px]
            sm:max-h-none
            relative
            w-full
            overflow-hidden
            sm:max-w-64
            sm:small-group:w-full
            sm:small-group:max-h-[74px]
            sm:small-group:max-w-none
        ">

            <div
                class="
                    relative
                    h-[74px]
                    sm:h-full
                    bg-blue-100
                    text-blue-200
                ">
                <svg class="absolute
                        -left-[110px] sm:-left-[120px]
                        -bottom-[100px] sm:bottom-[20px] sm:small-group:-bottom-[95px]
                        w-[617px] sm:w-[547px]
                        h-[301px] sm:h-[267px]
                        opacity-20 -rotate-[160deg]">
                    <use href="/svg/illustrations/chevron.svg#chevron"></use>
                </svg>
            </div>

        <div class="
                z-[2]
                absolute
                sm:top-auto
                inset-4
                sm:inset-6
                flex
                justify-center
                items-center
                w-[5.75rem]
                h-11
                rounded-xs
                bg-white
                sm:small-group:inset-4"
        >
                <img
                    loading="lazy"
                    src="https://f.hellowork.com/img/entreprises/190084.png?v=20260701181527"
                    alt="Klanik recrutement"
                    title="Recrutement Klanik"
                    class="
                        w-full
                        h-full
                        px-3
                        py-2
                        object-contain"
                >
        </div>
    </header>

        



<div
    
            data-controller="intersect"
            data-analytics-values-param="{&quot;event&quot;:&quot;generic_product&quot;,&quot;event_name&quot;:&quot;product.display&quot;,&quot;product_data&quot;:[{&quot;product_id&quot;:&quot;84206121&quot;,&quot;product_response_type&quot;:&quot;ATS&quot;,&quot;product_list&quot;:&quot;LO-Moteur-Exact&quot;,&quot;product_position&quot;:14,&quot;product_category&quot;:&quot;1&quot;,&quot;product_status&quot;:&quot;Suivi de candidature&quot;}]}"
            data-action="intersect:enter->analytics#push:once"
            class="flex flex-col justify-between size-full p-4 sm:p-6 sm:small-group:p-4 min-w-0"
    data-cy="serpCard"
>
    <div class="flex flex-col">
        <header class="w-10/12">
                <span
                    class="badge-m badge-purple mb-4 relative z-[2]"
                    data-cy="followUpTag"
                    title="Ce recruteur partage l&#x2019;avancement des candidatures."
                >
                    Suivi de candidature
                </span>
                <div>
                        <a 
                            data-analytics-values-param="{&quot;event&quot;:&quot;generic_product&quot;,&quot;event_name&quot;:&quot;productClick&quot;,&quot;product_data&quot;:[{&quot;product_id&quot;:&quot;84206121&quot;,&quot;product_response_type&quot;:&quot;ATS&quot;,&quot;product_list&quot;:&quot;LO-Moteur-Exact&quot;,&quot;product_position&quot;:14}],&quot;app_version_array&quot;:{&quot;one-time-password-V1.0&quot;:&quot;Version_B&quot;}}"
                            data-action="analytics#push"
                            data-turbo="false"
                            href="/fr-fr/emplois/84206121.html"
                            title="D&#xE9;veloppeur Confirm&#xE9; Backend GO H/F - Klanik"
                            class="no-underline outline-none focus-within:underline forwarder inline"
                            data-cy="offerTitle"
                                                        aria-label="Voir offre de D&#xE9;veloppeur Confirm&#xE9; Backend GO H/F &#xE0; Lille - 59, chez Klanik, pour un CDI, en temps plein, T&#xE9;l&#xE9;travail partiel"
                        >
                            


<h3 class="inline">
    <p class="typo-l sm:small-group:typo-l sm:typo-xl">D&#xE9;veloppeur Confirm&#xE9; Backend GO H/F</p>
        <p class="typo-s inline">Klanik</p>
</h3>

                        </a>

                </div>

        </header>
            <div class="mt-6 flex flex-col gap-3 sm:flex-row sm:small-group:flex-col">
                <div class="flex gap-3 flex-wrap">
                        <div
                            class="readonly tag-secondary-s w-fit border-0"
                            data-cy="localisationCard"
                        >
                            Lille - 59
                        </div>
                        <div
                            class="readonly tag-secondary-s w-fit border-0"
                            data-cy="contractCard"
                        >
                            CDI
                        </div>
                            <div
                                class="readonly tag-secondary-s border-0 w-fit"
                                data-cy="contractTag"
                            >
                                T&#xE9;l&#xE9;travail partiel
                            </div>
                </div>
            </div>

    </div>


            <div class="mt-6 sm:mt-3 flex sm:flex-row-reverse items-end justify-between sm:small-group:mt-6 sm:small-group:flex-row flex-wrap">
                    <span class="btn-outline-m group-hocus-within:bg-black group-hocus-within:border-transparent group-hocus-within:text-white group-hocus-within:opacity-100">Voir l’offre</span>
                    <div class="typo-s text-grey-500 pl-1 pt-1">il y a 6 jours</div>
            </div>
</div>
    </div>
</div>
                    </div>
                </li>
                <li data-id-storage-target="item"
                    data-hide-offer-target="item"
                    data-id-storage-item-id="75360092"
                    data-hide-offer-item-id-value="75360092">
                    

                    <div>
                        
<div
    class="group h-full overflow-hidden bg-white rounded-sm border border-grey-100 hover:border-grey-500 focus-within:outline focus-within:transition-none transition-border-color duration-100"
>
    <div class="h-full relative flex flex-col sm:flex-row sm:small-group:flex-col ">
        <div class="absolute right-6 sm:small-group:right-4 top-6 sm:small-group:top-[21px] z-[2] flex gap-4 sm:gap-0">
                <form action="/fr-fr/searchoffers/hideoffermodalframeview"
                      method="GET"
                      data-turbo-frame="exclude-criteria-frame">
                    <input type="hidden" name="offerId" value="75360092">
                    <input type="hidden" name="title" value="D&#xE9;veloppeur Backend Java Senior H/F">
                    <input type="hidden" name="company" value="Viveris.">
                    <button type="submit"
                            data-cy="hideOfferBtn"
                            data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;exclude_offer&quot;,&quot;event_info&quot;:&quot;Ic&#xF4;ne masquage d&#x27;offre&quot;}"
                            data-action="analytics#push"
                            class="btn-icon-no-outline-m sm:btn-icon-no-outline-l small-group:sm:btn-icon-no-outline-m"
                            aria-label="Masquer l'offre D&#xE9;veloppeur Backend Java Senior H/F">
                        <svg aria-hidden="true" class="size-3 sm:size-4 small-group:sm:size-3">
                            <use href="/svg/icons/disabled.svg#disabled"></use>
                        </svg>
                    </button>
                </form>
            

<turbo-frame id="bookmark-frame-card75360092">
    <form 
        action="/fr-fr/candidat/tooglebookmark"
        method="GET"
        data-controller="bookmark"
        data-bookmark-offer-id-value="75360092"
        data-bookmark-bookmarked-icon-value="/svg/icons/bookmark.svg#bookmark-active"
        data-bookmark-unbookmarked-icon-value="/svg/icons/bookmark.svg#bookmark"
        data-bookmark-bookmarked-class="text-pink-500"
        data-fetch-account-data-event-param="turbo:submit-end"
        data-action="fetch-account-data#refreshAfterNextTurboEvent"
    >
        <input type="hidden" name="idOffre" value="75360092">
        <input type="hidden" name="turboFrameId" value="bookmark-frame-card75360092">
        <input type="hidden" name="isFromToolbar" value="False"/>
        <button 
            class="btn-icon-no-outline-m sm:btn-icon-no-outline-l small-group:sm:btn-icon-no-outline-m"
            data-bookmark-target="button"
            data-analytics-values-param='{"event": "generic", "EventName" : "bookmark_add", "EventLibelle": "" }'
            data-action="analytics#push:stop"
            data-cy="bookmarkBtn"
        >
            <svg class="size-3 sm:size-4 small-group:sm:size-3">
                <use data-bookmark-target="icon" href="/svg/icons/bookmark.svg#bookmark"></use>
            </svg>
        </button>
    </form>

    


</turbo-frame>
        </div>
        



    <header
        class="
            max-h-[74px]
            min-h-[74px]
            sm:max-h-none
            relative
            w-full
            overflow-hidden
            sm:max-w-64
            sm:small-group:w-full
            sm:small-group:max-h-[74px]
            sm:small-group:max-w-none
        ">

            <div class="absolute inset-0 bg-black/5 z-[1]"></div>
            <img
                class="
                    size-full
                    object-cover
                    object-center
                "
                src="https://f.hellowork.com/media/companypage/203803/350_233/105564_6384403725459442599499035.jpeg"
                loading="lazy"
                alt="Viveris. recrutement">

        <div class="
                z-[2]
                absolute
                sm:top-auto
                inset-4
                sm:inset-6
                flex
                justify-center
                items-center
                w-[5.75rem]
                h-11
                rounded-xs
                bg-white
                sm:small-group:inset-4"
        >
                <img
                    loading="lazy"
                    src="https://f.hellowork.com/img/entreprises/203803.png?v=20261001112012"
                    alt="Viveris. recrutement"
                    title="Recrutement Viveris."
                    class="
                        w-full
                        h-full
                        px-3
                        py-2
                        object-contain"
                >
        </div>
    </header>

        



<div
    
            data-controller="intersect"
            data-analytics-values-param="{&quot;event&quot;:&quot;generic_product&quot;,&quot;event_name&quot;:&quot;product.display&quot;,&quot;product_data&quot;:[{&quot;product_id&quot;:&quot;75360092&quot;,&quot;product_response_type&quot;:&quot;ATS&quot;,&quot;product_list&quot;:&quot;LO-Moteur-Exact&quot;,&quot;product_position&quot;:15,&quot;product_category&quot;:&quot;1&quot;,&quot;product_status&quot;:&quot;Suivi de candidature&quot;}]}"
            data-action="intersect:enter->analytics#push:once"
            class="flex flex-col justify-between size-full p-4 sm:p-6 sm:small-group:p-4 min-w-0"
    data-cy="serpCard"
>
    <div class="flex flex-col">
        <header class="w-10/12">
                <span
                    class="badge-m badge-purple mb-4 relative z-[2]"
                    data-cy="followUpTag"
                    title="Ce recruteur partage l&#x2019;avancement des candidatures."
                >
                    Suivi de candidature
                </span>
                <div>
                        <a 
                            data-analytics-values-param="{&quot;event&quot;:&quot;generic_product&quot;,&quot;event_name&quot;:&quot;productClick&quot;,&quot;product_data&quot;:[{&quot;product_id&quot;:&quot;75360092&quot;,&quot;product_response_type&quot;:&quot;ATS&quot;,&quot;product_list&quot;:&quot;LO-Moteur-Exact&quot;,&quot;product_position&quot;:15}],&quot;app_version_array&quot;:{&quot;one-time-password-V1.0&quot;:&quot;Version_B&quot;}}"
                            data-action="analytics#push"
                            data-turbo="false"
                            href="/fr-fr/emplois/75360092.html"
                            title="D&#xE9;veloppeur Backend Java Senior H/F - Viveris."
                            class="no-underline outline-none focus-within:underline forwarder inline"
                            data-cy="offerTitle"
                                                        aria-label="Voir offre de D&#xE9;veloppeur Backend Java Senior H/F &#xE0; Lille - 59, chez Viveris., pour un CDI, en temps plein, T&#xE9;l&#xE9;travail partiel"
                        >
                            


<h3 class="inline">
    <p class="typo-l sm:small-group:typo-l sm:typo-xl">D&#xE9;veloppeur Backend Java Senior H/F</p>
        <p class="typo-s inline">Viveris.</p>
</h3>

                        </a>

                </div>

        </header>
            <div class="mt-6 flex flex-col gap-3 sm:flex-row sm:small-group:flex-col">
                <div class="flex gap-3 flex-wrap">
                        <div
                            class="readonly tag-secondary-s w-fit border-0"
                            data-cy="localisationCard"
                        >
                            Lille - 59
                        </div>
                        <div
                            class="readonly tag-secondary-s w-fit border-0"
                            data-cy="contractCard"
                        >
                            CDI
                        </div>
                            <div
                                class="readonly tag-secondary-s border-0 w-fit"
                                data-cy="contractTag"
                            >
                                T&#xE9;l&#xE9;travail partiel
                            </div>
                </div>
            </div>

    </div>


            <div class="mt-6 sm:mt-3 flex sm:flex-row-reverse items-end justify-between sm:small-group:mt-6 sm:small-group:flex-row flex-wrap">
                    <span class="btn-outline-m group-hocus-within:bg-black group-hocus-within:border-transparent group-hocus-within:text-white group-hocus-within:opacity-100">Voir l’offre</span>
                    <div class="typo-s text-grey-500 pl-1 pt-1">il y a 6 jours</div>
            </div>
</div>
    </div>
</div>
                    </div>
                </li>
                <li data-id-storage-target="item"
                    data-hide-offer-target="item"
                    data-id-storage-item-id="78970072"
                    data-hide-offer-item-id-value="78970072">
                    

                    <div>
                        
<div
    class="group h-full overflow-hidden bg-white rounded-sm border border-grey-100 hover:border-grey-500 focus-within:outline focus-within:transition-none transition-border-color duration-100"
>
    <div class="h-full relative flex flex-col sm:flex-row sm:small-group:flex-col ">
        <div class="absolute right-6 sm:small-group:right-4 top-6 sm:small-group:top-[21px] z-[2] flex gap-4 sm:gap-0">
                <form action="/fr-fr/searchoffers/hideoffermodalframeview"
                      method="GET"
                      data-turbo-frame="exclude-criteria-frame">
                    <input type="hidden" name="offerId" value="78970072">
                    <input type="hidden" name="title" value="D&#xE9;veloppeur Pim - Mdm Run &amp; Build H/F">
                    <input type="hidden" name="company" value="Viveris.">
                    <button type="submit"
                            data-cy="hideOfferBtn"
                            data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;exclude_offer&quot;,&quot;event_info&quot;:&quot;Ic&#xF4;ne masquage d&#x27;offre&quot;}"
                            data-action="analytics#push"
                            class="btn-icon-no-outline-m sm:btn-icon-no-outline-l small-group:sm:btn-icon-no-outline-m"
                            aria-label="Masquer l'offre D&#xE9;veloppeur Pim - Mdm Run &amp; Build H/F">
                        <svg aria-hidden="true" class="size-3 sm:size-4 small-group:sm:size-3">
                            <use href="/svg/icons/disabled.svg#disabled"></use>
                        </svg>
                    </button>
                </form>
            

<turbo-frame id="bookmark-frame-card78970072">
    <form 
        action="/fr-fr/candidat/tooglebookmark"
        method="GET"
        data-controller="bookmark"
        data-bookmark-offer-id-value="78970072"
        data-bookmark-bookmarked-icon-value="/svg/icons/bookmark.svg#bookmark-active"
        data-bookmark-unbookmarked-icon-value="/svg/icons/bookmark.svg#bookmark"
        data-bookmark-bookmarked-class="text-pink-500"
        data-fetch-account-data-event-param="turbo:submit-end"
        data-action="fetch-account-data#refreshAfterNextTurboEvent"
    >
        <input type="hidden" name="idOffre" value="78970072">
        <input type="hidden" name="turboFrameId" value="bookmark-frame-card78970072">
        <input type="hidden" name="isFromToolbar" value="False"/>
        <button 
            class="btn-icon-no-outline-m sm:btn-icon-no-outline-l small-group:sm:btn-icon-no-outline-m"
            data-bookmark-target="button"
            data-analytics-values-param='{"event": "generic", "EventName" : "bookmark_add", "EventLibelle": "" }'
            data-action="analytics#push:stop"
            data-cy="bookmarkBtn"
        >
            <svg class="size-3 sm:size-4 small-group:sm:size-3">
                <use data-bookmark-target="icon" href="/svg/icons/bookmark.svg#bookmark"></use>
            </svg>
        </button>
    </form>

    


</turbo-frame>
        </div>
        



    <header
        class="
            max-h-[74px]
            min-h-[74px]
            sm:max-h-none
            relative
            w-full
            overflow-hidden
            sm:max-w-64
            sm:small-group:w-full
            sm:small-group:max-h-[74px]
            sm:small-group:max-w-none
        ">

            <div class="absolute inset-0 bg-black/5 z-[1]"></div>
            <img
                class="
                    size-full
                    object-cover
                    object-center
                "
                src="https://f.hellowork.com/media/companypage/203803/350_233/105564_6384403725459442599499035.jpeg"
                loading="lazy"
                alt="Viveris. recrutement">

        <div class="
                z-[2]
                absolute
                sm:top-auto
                inset-4
                sm:inset-6
                flex
                justify-center
                items-center
                w-[5.75rem]
                h-11
                rounded-xs
                bg-white
                sm:small-group:inset-4"
        >
                <img
                    loading="lazy"
                    src="https://f.hellowork.com/img/entreprises/203803.png?v=20261001112012"
                    alt="Viveris. recrutement"
                    title="Recrutement Viveris."
                    class="
                        w-full
                        h-full
                        px-3
                        py-2
                        object-contain"
                >
        </div>
    </header>

        



<div
    
            data-controller="intersect"
            data-analytics-values-param="{&quot;event&quot;:&quot;generic_product&quot;,&quot;event_name&quot;:&quot;product.display&quot;,&quot;product_data&quot;:[{&quot;product_id&quot;:&quot;78970072&quot;,&quot;product_response_type&quot;:&quot;ATS&quot;,&quot;product_list&quot;:&quot;LO-Moteur-Exact&quot;,&quot;product_position&quot;:16,&quot;product_category&quot;:&quot;1&quot;,&quot;product_status&quot;:&quot;Suivi de candidature&quot;}]}"
            data-action="intersect:enter->analytics#push:once"
            class="flex flex-col justify-between size-full p-4 sm:p-6 sm:small-group:p-4 min-w-0"
    data-cy="serpCard"
>
    <div class="flex flex-col">
        <header class="w-10/12">
                <span
                    class="badge-m badge-purple mb-4 relative z-[2]"
                    data-cy="followUpTag"
                    title="Ce recruteur partage l&#x2019;avancement des candidatures."
                >
                    Suivi de candidature
                </span>
                <div>
                        <a 
                            data-analytics-values-param="{&quot;event&quot;:&quot;generic_product&quot;,&quot;event_name&quot;:&quot;productClick&quot;,&quot;product_data&quot;:[{&quot;product_id&quot;:&quot;78970072&quot;,&quot;product_response_type&quot;:&quot;ATS&quot;,&quot;product_list&quot;:&quot;LO-Moteur-Exact&quot;,&quot;product_position&quot;:16}],&quot;app_version_array&quot;:{&quot;one-time-password-V1.0&quot;:&quot;Version_B&quot;}}"
                            data-action="analytics#push"
                            data-turbo="false"
                            href="/fr-fr/emplois/78970072.html"
                            title="D&#xE9;veloppeur Pim - Mdm Run &amp; Build H/F - Viveris."
                            class="no-underline outline-none focus-within:underline forwarder inline"
                            data-cy="offerTitle"
                                                        aria-label="Voir offre de D&#xE9;veloppeur Pim - Mdm Run &amp; Build H/F &#xE0; Lille - 59, chez Viveris., pour un CDI, en temps plein, T&#xE9;l&#xE9;travail partiel"
                        >
                            


<h3 class="inline">
    <p class="typo-l sm:small-group:typo-l sm:typo-xl">D&#xE9;veloppeur Pim - Mdm Run &amp; Build H/F</p>
        <p class="typo-s inline">Viveris.</p>
</h3>

                        </a>

                </div>

        </header>
            <div class="mt-6 flex flex-col gap-3 sm:flex-row sm:small-group:flex-col">
                <div class="flex gap-3 flex-wrap">
                        <div
                            class="readonly tag-secondary-s w-fit border-0"
                            data-cy="localisationCard"
                        >
                            Lille - 59
                        </div>
                        <div
                            class="readonly tag-secondary-s w-fit border-0"
                            data-cy="contractCard"
                        >
                            CDI
                        </div>
                            <div
                                class="readonly tag-secondary-s border-0 w-fit"
                                data-cy="contractTag"
                            >
                                T&#xE9;l&#xE9;travail partiel
                            </div>
                </div>
            </div>

    </div>


            <div class="mt-6 sm:mt-3 flex sm:flex-row-reverse items-end justify-between sm:small-group:mt-6 sm:small-group:flex-row flex-wrap">
                    <span class="btn-outline-m group-hocus-within:bg-black group-hocus-within:border-transparent group-hocus-within:text-white group-hocus-within:opacity-100">Voir l’offre</span>
                    <div class="typo-s text-grey-500 pl-1 pt-1">il y a 1 jour</div>
            </div>
</div>
    </div>
</div>
                    </div>
                </li>
                <li data-id-storage-target="item"
                    data-hide-offer-target="item"
                    data-id-storage-item-id="83597910"
                    data-hide-offer-item-id-value="83597910">
                    

                    <div>
                        
<div
    class="group h-full overflow-hidden bg-white rounded-sm border border-grey-100 hover:border-grey-500 focus-within:outline focus-within:transition-none transition-border-color duration-100"
>
    <div class="h-full relative flex flex-col sm:flex-row sm:small-group:flex-col ">
        <div class="absolute right-6 sm:small-group:right-4 top-6 sm:small-group:top-[21px] z-[2] flex gap-4 sm:gap-0">
                <form action="/fr-fr/searchoffers/hideoffermodalframeview"
                      method="GET"
                      data-turbo-frame="exclude-criteria-frame">
                    <input type="hidden" name="offerId" value="83597910">
                    <input type="hidden" name="title" value="D&#xE9;veloppeur Tableau H/F">
                    <input type="hidden" name="company" value="W HUB">
                    <button type="submit"
                            data-cy="hideOfferBtn"
                            data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;exclude_offer&quot;,&quot;event_info&quot;:&quot;Ic&#xF4;ne masquage d&#x27;offre&quot;}"
                            data-action="analytics#push"
                            class="btn-icon-no-outline-m sm:btn-icon-no-outline-l small-group:sm:btn-icon-no-outline-m"
                            aria-label="Masquer l'offre D&#xE9;veloppeur Tableau H/F">
                        <svg aria-hidden="true" class="size-3 sm:size-4 small-group:sm:size-3">
                            <use href="/svg/icons/disabled.svg#disabled"></use>
                        </svg>
                    </button>
                </form>
            

<turbo-frame id="bookmark-frame-card83597910">
    <form 
        action="/fr-fr/candidat/tooglebookmark"
        method="GET"
        data-controller="bookmark"
        data-bookmark-offer-id-value="83597910"
        data-bookmark-bookmarked-icon-value="/svg/icons/bookmark.svg#bookmark-active"
        data-bookmark-unbookmarked-icon-value="/svg/icons/bookmark.svg#bookmark"
        data-bookmark-bookmarked-class="text-pink-500"
        data-fetch-account-data-event-param="turbo:submit-end"
        data-action="fetch-account-data#refreshAfterNextTurboEvent"
    >
        <input type="hidden" name="idOffre" value="83597910">
        <input type="hidden" name="turboFrameId" value="bookmark-frame-card83597910">
        <input type="hidden" name="isFromToolbar" value="False"/>
        <button 
            class="btn-icon-no-outline-m sm:btn-icon-no-outline-l small-group:sm:btn-icon-no-outline-m"
            data-bookmark-target="button"
            data-analytics-values-param='{"event": "generic", "EventName" : "bookmark_add", "EventLibelle": "" }'
            data-action="analytics#push:stop"
            data-cy="bookmarkBtn"
        >
            <svg class="size-3 sm:size-4 small-group:sm:size-3">
                <use data-bookmark-target="icon" href="/svg/icons/bookmark.svg#bookmark"></use>
            </svg>
        </button>
    </form>

    


</turbo-frame>
        </div>
        



    <header
        class="
            max-h-[74px]
            min-h-[74px]
            sm:max-h-none
            relative
            w-full
            overflow-hidden
            sm:max-w-64
            sm:small-group:w-full
            sm:small-group:max-h-[74px]
            sm:small-group:max-w-none
        ">

            <div
                class="
                    relative
                    h-[74px]
                    sm:h-full
                    bg-blue-100
                    text-blue-200
                ">
                <svg class="absolute
                        -left-[110px] sm:-left-[120px]
                        -bottom-[100px] sm:bottom-[20px] sm:small-group:-bottom-[95px]
                        w-[617px] sm:w-[547px]
                        h-[301px] sm:h-[267px]
                        opacity-20 -rotate-[160deg]">
                    <use href="/svg/illustrations/chevron.svg#chevron"></use>
                </svg>
            </div>

        <div class="
                z-[2]
                absolute
                sm:top-auto
                inset-4
                sm:inset-6
                flex
                justify-center
                items-center
                w-[5.75rem]
                h-11
                rounded-xs
                bg-white
                sm:small-group:inset-4"
        >
                <img
                    loading="lazy"
                    src="https://f.hellowork.com/img/entreprises/203890.png?v=20260629152516"
                    alt="W HUB recrutement"
                    title="Recrutement W HUB"
                    class="
                        w-full
                        h-full
                        px-3
                        py-2
                        object-contain"
                >
        </div>
    </header>

        



<div
    
            data-controller="intersect"
            data-analytics-values-param="{&quot;event&quot;:&quot;generic_product&quot;,&quot;event_name&quot;:&quot;product.display&quot;,&quot;product_data&quot;:[{&quot;product_id&quot;:&quot;83597910&quot;,&quot;product_response_type&quot;:&quot;ATS&quot;,&quot;product_list&quot;:&quot;LO-Moteur-Exact&quot;,&quot;product_position&quot;:17,&quot;product_category&quot;:&quot;1&quot;,&quot;product_status&quot;:&quot;Suivi de candidature&quot;}]}"
            data-action="intersect:enter->analytics#push:once"
            class="flex flex-col justify-between size-full p-4 sm:p-6 sm:small-group:p-4 min-w-0"
    data-cy="serpCard"
>
    <div class="flex flex-col">
        <header class="w-10/12">
                <span
                    class="badge-m badge-purple mb-4 relative z-[2]"
                    data-cy="followUpTag"
                    title="Ce recruteur partage l&#x2019;avancement des candidatures."
                >
                    Suivi de candidature
                </span>
                <div>
                        <a 
                            data-analytics-values-param="{&quot;event&quot;:&quot;generic_product&quot;,&quot;event_name&quot;:&quot;productClick&quot;,&quot;product_data&quot;:[{&quot;product_id&quot;:&quot;83597910&quot;,&quot;product_response_type&quot;:&quot;ATS&quot;,&quot;product_list&quot;:&quot;LO-Moteur-Exact&quot;,&quot;product_position&quot;:17}],&quot;app_version_array&quot;:{&quot;one-time-password-V1.0&quot;:&quot;Version_B&quot;}}"
                            data-action="analytics#push"
                            data-turbo="false"
                            href="/fr-fr/emplois/83597910.html"
                            title="D&#xE9;veloppeur Tableau H/F - W HUB"
                            class="no-underline outline-none focus-within:underline forwarder inline"
                            data-cy="offerTitle"
                                                        aria-label="Voir offre de D&#xE9;veloppeur Tableau H/F &#xE0; Lille - 59, chez W HUB, pour un CDI, avec un salaire de 35&#x202F;000 - 40&#x202F;000 &#x20AC; / an, en temps plein, T&#xE9;l&#xE9;travail partiel"
                        >
                            


<h3 class="inline">
    <p class="typo-l sm:small-group:typo-l sm:typo-xl">D&#xE9;veloppeur Tableau H/F</p>
        <p class="typo-s inline">W HUB</p>
</h3>

                        </a>

                </div>

        </header>
            <div class="mt-6 flex flex-col gap-3 sm:flex-row sm:small-group:flex-col">
                <div class="flex gap-3 flex-wrap">
                        <div
                            class="readonly tag-secondary-s w-fit border-0"
                            data-cy="localisationCard"
                        >
                            Lille - 59
                        </div>
                        <div
                            class="readonly tag-secondary-s w-fit border-0"
                            data-cy="contractCard"
                        >
                            CDI
                        </div>
                        <div class="readonly tag-secondary-s typo-s-bold w-fit border-0">35&#x202F;000 - 40&#x202F;000 &#x20AC; / an</div>
                            <div
                                class="readonly tag-secondary-s border-0 w-fit"
                                data-cy="contractTag"
                            >
                                T&#xE9;l&#xE9;travail partiel
                            </div>
                </div>
            </div>

    </div>


            <div class="mt-6 sm:mt-3 flex sm:flex-row-reverse items-end justify-between sm:small-group:mt-6 sm:small-group:flex-row flex-wrap">
                    <span class="btn-outline-m group-hocus-within:bg-black group-hocus-within:border-transparent group-hocus-within:text-white group-hocus-within:opacity-100">Voir l’offre</span>
                    <div class="typo-s text-grey-500 pl-1 pt-1">il y a 23 jours</div>
            </div>
</div>
    </div>
</div>
                    </div>
                </li>
                <li data-id-storage-target="item"
                    data-hide-offer-target="item"
                    data-id-storage-item-id="83596489"
                    data-hide-offer-item-id-value="83596489">
                    

                    <div>
                        
<div
    class="group h-full overflow-hidden bg-white rounded-sm border border-grey-100 hover:border-grey-500 focus-within:outline focus-within:transition-none transition-border-color duration-100"
>
    <div class="h-full relative flex flex-col sm:flex-row sm:small-group:flex-col ">
        <div class="absolute right-6 sm:small-group:right-4 top-6 sm:small-group:top-[21px] z-[2] flex gap-4 sm:gap-0">
                <form action="/fr-fr/searchoffers/hideoffermodalframeview"
                      method="GET"
                      data-turbo-frame="exclude-criteria-frame">
                    <input type="hidden" name="offerId" value="83596489">
                    <input type="hidden" name="title" value="D&#xE9;veloppeur Datastage H/F">
                    <input type="hidden" name="company" value="W HUB">
                    <button type="submit"
                            data-cy="hideOfferBtn"
                            data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;exclude_offer&quot;,&quot;event_info&quot;:&quot;Ic&#xF4;ne masquage d&#x27;offre&quot;}"
                            data-action="analytics#push"
                            class="btn-icon-no-outline-m sm:btn-icon-no-outline-l small-group:sm:btn-icon-no-outline-m"
                            aria-label="Masquer l'offre D&#xE9;veloppeur Datastage H/F">
                        <svg aria-hidden="true" class="size-3 sm:size-4 small-group:sm:size-3">
                            <use href="/svg/icons/disabled.svg#disabled"></use>
                        </svg>
                    </button>
                </form>
            

<turbo-frame id="bookmark-frame-card83596489">
    <form 
        action="/fr-fr/candidat/tooglebookmark"
        method="GET"
        data-controller="bookmark"
        data-bookmark-offer-id-value="83596489"
        data-bookmark-bookmarked-icon-value="/svg/icons/bookmark.svg#bookmark-active"
        data-bookmark-unbookmarked-icon-value="/svg/icons/bookmark.svg#bookmark"
        data-bookmark-bookmarked-class="text-pink-500"
        data-fetch-account-data-event-param="turbo:submit-end"
        data-action="fetch-account-data#refreshAfterNextTurboEvent"
    >
        <input type="hidden" name="idOffre" value="83596489">
        <input type="hidden" name="turboFrameId" value="bookmark-frame-card83596489">
        <input type="hidden" name="isFromToolbar" value="False"/>
        <button 
            class="btn-icon-no-outline-m sm:btn-icon-no-outline-l small-group:sm:btn-icon-no-outline-m"
            data-bookmark-target="button"
            data-analytics-values-param='{"event": "generic", "EventName" : "bookmark_add", "EventLibelle": "" }'
            data-action="analytics#push:stop"
            data-cy="bookmarkBtn"
        >
            <svg class="size-3 sm:size-4 small-group:sm:size-3">
                <use data-bookmark-target="icon" href="/svg/icons/bookmark.svg#bookmark"></use>
            </svg>
        </button>
    </form>

    


</turbo-frame>
        </div>
        



    <header
        class="
            max-h-[74px]
            min-h-[74px]
            sm:max-h-none
            relative
            w-full
            overflow-hidden
            sm:max-w-64
            sm:small-group:w-full
            sm:small-group:max-h-[74px]
            sm:small-group:max-w-none
        ">

            <div
                class="
                    relative
                    h-[74px]
                    sm:h-full
                    bg-pumpkin-100
                    text-pumpkin-200
                ">
                <svg class="absolute
                        -left-[110px] sm:-left-[120px]
                        -bottom-[100px] sm:bottom-[20px] sm:small-group:-bottom-[95px]
                        w-[617px] sm:w-[547px]
                        h-[301px] sm:h-[267px]
                        opacity-20 -rotate-[15deg]">
                    <use href="/svg/illustrations/chevron.svg#chevron"></use>
                </svg>
            </div>

        <div class="
                z-[2]
                absolute
                sm:top-auto
                inset-4
                sm:inset-6
                flex
                justify-center
                items-center
                w-[5.75rem]
                h-11
                rounded-xs
                bg-white
                sm:small-group:inset-4"
        >
                <img
                    loading="lazy"
                    src="https://f.hellowork.com/img/entreprises/203890.png?v=20260629152516"
                    alt="W HUB recrutement"
                    title="Recrutement W HUB"
                    class="
                        w-full
                        h-full
                        px-3
                        py-2
                        object-contain"
                >
        </div>
    </header>

        



<div
    
            data-controller="intersect"
            data-analytics-values-param="{&quot;event&quot;:&quot;generic_product&quot;,&quot;event_name&quot;:&quot;product.display&quot;,&quot;product_data&quot;:[{&quot;product_id&quot;:&quot;83596489&quot;,&quot;product_response_type&quot;:&quot;ATS&quot;,&quot;product_list&quot;:&quot;LO-Moteur-Exact&quot;,&quot;product_position&quot;:18,&quot;product_category&quot;:&quot;1&quot;,&quot;product_status&quot;:&quot;Suivi de candidature&quot;}]}"
            data-action="intersect:enter->analytics#push:once"
            class="flex flex-col justify-between size-full p-4 sm:p-6 sm:small-group:p-4 min-w-0"
    data-cy="serpCard"
>
    <div class="flex flex-col">
        <header class="w-10/12">
                <span
                    class="badge-m badge-purple mb-4 relative z-[2]"
                    data-cy="followUpTag"
                    title="Ce recruteur partage l&#x2019;avancement des candidatures."
                >
                    Suivi de candidature
                </span>
                <div>
                        <a 
                            data-analytics-values-param="{&quot;event&quot;:&quot;generic_product&quot;,&quot;event_name&quot;:&quot;productClick&quot;,&quot;product_data&quot;:[{&quot;product_id&quot;:&quot;83596489&quot;,&quot;product_response_type&quot;:&quot;ATS&quot;,&quot;product_list&quot;:&quot;LO-Moteur-Exact&quot;,&quot;product_position&quot;:18}],&quot;app_version_array&quot;:{&quot;one-time-password-V1.0&quot;:&quot;Version_B&quot;}}"
                            data-action="analytics#push"
                            data-turbo="false"
                            href="/fr-fr/emplois/83596489.html"
                            title="D&#xE9;veloppeur Datastage H/F - W HUB"
                            class="no-underline outline-none focus-within:underline forwarder inline"
                            data-cy="offerTitle"
                                                        aria-label="Voir offre de D&#xE9;veloppeur Datastage H/F &#xE0; Lille - 59, chez W HUB, pour un CDI, avec un salaire de 35&#x202F;000 - 40&#x202F;000 &#x20AC; / an, en temps plein, T&#xE9;l&#xE9;travail partiel"
                        >
                            


<h3 class="inline">
    <p class="typo-l sm:small-group:typo-l sm:typo-xl">D&#xE9;veloppeur Datastage H/F</p>
        <p class="typo-s inline">W HUB</p>
</h3>

                        </a>

                </div>

        </header>
            <div class="mt-6 flex flex-col gap-3 sm:flex-row sm:small-group:flex-col">
                <div class="flex gap-3 flex-wrap">
                        <div
                            class="readonly tag-secondary-s w-fit border-0"
                            data-cy="localisationCard"
                        >
                            Lille - 59
                        </div>
                        <div
                            class="readonly tag-secondary-s w-fit border-0"
                            data-cy="contractCard"
                        >
                            CDI
                        </div>
                        <div class="readonly tag-secondary-s typo-s-bold w-fit border-0">35&#x202F;000 - 40&#x202F;000 &#x20AC; / an</div>
                            <div
                                class="readonly tag-secondary-s border-0 w-fit"
                                data-cy="contractTag"
                            >
                                T&#xE9;l&#xE9;travail partiel
                            </div>
                </div>
            </div>

    </div>


            <div class="mt-6 sm:mt-3 flex sm:flex-row-reverse items-end justify-between sm:small-group:mt-6 sm:small-group:flex-row flex-wrap">
                    <span class="btn-outline-m group-hocus-within:bg-black group-hocus-within:border-transparent group-hocus-within:text-white group-hocus-within:opacity-100">Voir l’offre</span>
                    <div class="typo-s text-grey-500 pl-1 pt-1">il y a 23 jours</div>
            </div>
</div>
    </div>
</div>
                    </div>
                </li>
                <li data-id-storage-target="item"
                    data-hide-offer-target="item"
                    data-id-storage-item-id="83925261"
                    data-hide-offer-item-id-value="83925261">
                    

                    <div>
                        
<div
    class="group h-full overflow-hidden bg-white rounded-sm border border-grey-100 hover:border-grey-500 focus-within:outline focus-within:transition-none transition-border-color duration-100"
>
    <div class="h-full relative flex flex-col sm:flex-row sm:small-group:flex-col ">
        <div class="absolute right-6 sm:small-group:right-4 top-6 sm:small-group:top-[21px] z-[2] flex gap-4 sm:gap-0">
                <form action="/fr-fr/searchoffers/hideoffermodalframeview"
                      method="GET"
                      data-turbo-frame="exclude-criteria-frame">
                    <input type="hidden" name="offerId" value="83925261">
                    <input type="hidden" name="title" value="D&#xE9;veloppeur ERP Sage X3 H/F">
                    <input type="hidden" name="company" value="Kanop&#xE9; RH">
                    <button type="submit"
                            data-cy="hideOfferBtn"
                            data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;exclude_offer&quot;,&quot;event_info&quot;:&quot;Ic&#xF4;ne masquage d&#x27;offre&quot;}"
                            data-action="analytics#push"
                            class="btn-icon-no-outline-m sm:btn-icon-no-outline-l small-group:sm:btn-icon-no-outline-m"
                            aria-label="Masquer l'offre D&#xE9;veloppeur ERP Sage X3 H/F">
                        <svg aria-hidden="true" class="size-3 sm:size-4 small-group:sm:size-3">
                            <use href="/svg/icons/disabled.svg#disabled"></use>
                        </svg>
                    </button>
                </form>
            

<turbo-frame id="bookmark-frame-card83925261">
    <form 
        action="/fr-fr/candidat/tooglebookmark"
        method="GET"
        data-controller="bookmark"
        data-bookmark-offer-id-value="83925261"
        data-bookmark-bookmarked-icon-value="/svg/icons/bookmark.svg#bookmark-active"
        data-bookmark-unbookmarked-icon-value="/svg/icons/bookmark.svg#bookmark"
        data-bookmark-bookmarked-class="text-pink-500"
        data-fetch-account-data-event-param="turbo:submit-end"
        data-action="fetch-account-data#refreshAfterNextTurboEvent"
    >
        <input type="hidden" name="idOffre" value="83925261">
        <input type="hidden" name="turboFrameId" value="bookmark-frame-card83925261">
        <input type="hidden" name="isFromToolbar" value="False"/>
        <button 
            class="btn-icon-no-outline-m sm:btn-icon-no-outline-l small-group:sm:btn-icon-no-outline-m"
            data-bookmark-target="button"
            data-analytics-values-param='{"event": "generic", "EventName" : "bookmark_add", "EventLibelle": "" }'
            data-action="analytics#push:stop"
            data-cy="bookmarkBtn"
        >
            <svg class="size-3 sm:size-4 small-group:sm:size-3">
                <use data-bookmark-target="icon" href="/svg/icons/bookmark.svg#bookmark"></use>
            </svg>
        </button>
    </form>

    


</turbo-frame>
        </div>
        



    <header
        class="
            max-h-[74px]
            min-h-[74px]
            sm:max-h-none
            relative
            w-full
            overflow-hidden
            sm:max-w-64
            sm:small-group:w-full
            sm:small-group:max-h-[74px]
            sm:small-group:max-w-none
        ">

            <div
                class="
                    relative
                    h-[74px]
                    sm:h-full
                    bg-blue-100
                    text-blue-200
                ">
                <svg class="absolute
                        -left-[110px] sm:-left-[120px]
                        -bottom-[100px] sm:bottom-[20px] sm:small-group:-bottom-[95px]
                        w-[617px] sm:w-[547px]
                        h-[301px] sm:h-[267px]
                        opacity-20 -rotate-[160deg]">
                    <use href="/svg/illustrations/chevron.svg#chevron"></use>
                </svg>
            </div>

        <div class="
                z-[2]
                absolute
                sm:top-auto
                inset-4
                sm:inset-6
                flex
                justify-center
                items-center
                w-[5.75rem]
                h-11
                rounded-xs
                bg-white
                sm:small-group:inset-4"
        >
                <img
                    loading="lazy"
                    src="https://f.hellowork.com/img/entreprises/198270.png?v=20260610175911"
                    alt="Kanop&#xE9; RH recrutement"
                    title="Recrutement Kanop&#xE9; RH"
                    class="
                        w-full
                        h-full
                        px-3
                        py-2
                        object-contain"
                >
        </div>
    </header>

        



<div
    
            data-controller="intersect"
            data-analytics-values-param="{&quot;event&quot;:&quot;generic_product&quot;,&quot;event_name&quot;:&quot;product.display&quot;,&quot;product_data&quot;:[{&quot;product_id&quot;:&quot;83925261&quot;,&quot;product_response_type&quot;:&quot;ATS&quot;,&quot;product_list&quot;:&quot;LO-Moteur-Exact&quot;,&quot;product_position&quot;:19,&quot;product_category&quot;:&quot;1&quot;,&quot;product_status&quot;:&quot;Suivi de candidature&quot;}]}"
            data-action="intersect:enter->analytics#push:once"
            class="flex flex-col justify-between size-full p-4 sm:p-6 sm:small-group:p-4 min-w-0"
    data-cy="serpCard"
>
    <div class="flex flex-col">
        <header class="w-10/12">
                <span
                    class="badge-m badge-purple mb-4 relative z-[2]"
                    data-cy="followUpTag"
                    title="Ce recruteur partage l&#x2019;avancement des candidatures."
                >
                    Suivi de candidature
                </span>
                <div>
                        <a 
                            data-analytics-values-param="{&quot;event&quot;:&quot;generic_product&quot;,&quot;event_name&quot;:&quot;productClick&quot;,&quot;product_data&quot;:[{&quot;product_id&quot;:&quot;83925261&quot;,&quot;product_response_type&quot;:&quot;ATS&quot;,&quot;product_list&quot;:&quot;LO-Moteur-Exact&quot;,&quot;product_position&quot;:19}],&quot;app_version_array&quot;:{&quot;one-time-password-V1.0&quot;:&quot;Version_B&quot;}}"
                            data-action="analytics#push"
                            data-turbo="false"
                            href="/fr-fr/emplois/83925261.html"
                            title="D&#xE9;veloppeur ERP Sage X3 H/F - Kanop&#xE9; RH"
                            class="no-underline outline-none focus-within:underline forwarder inline"
                            data-cy="offerTitle"
                                                        aria-label="Voir offre de D&#xE9;veloppeur ERP Sage X3 H/F &#xE0; Lille - 59, chez Kanop&#xE9; RH, pour un CDI, avec un salaire de 40&#x202F;000 - 55&#x202F;000 &#x20AC; / an, en temps plein, T&#xE9;l&#xE9;travail complet"
                        >
                            


<h3 class="inline">
    <p class="typo-l sm:small-group:typo-l sm:typo-xl">D&#xE9;veloppeur ERP Sage X3 H/F</p>
        <p class="typo-s inline">Kanop&#xE9; RH</p>
</h3>

                        </a>

                </div>

        </header>
            <div class="mt-6 flex flex-col gap-3 sm:flex-row sm:small-group:flex-col">
                <div class="flex gap-3 flex-wrap">
                        <div
                            class="readonly tag-secondary-s w-fit border-0"
                            data-cy="localisationCard"
                        >
                            Lille - 59
                        </div>
                        <div
                            class="readonly tag-secondary-s w-fit border-0"
                            data-cy="contractCard"
                        >
                            CDI
                        </div>
                        <div class="readonly tag-secondary-s typo-s-bold w-fit border-0">40&#x202F;000 - 55&#x202F;000 &#x20AC; / an</div>
                            <div
                                class="readonly tag-secondary-s border-0 w-fit"
                                data-cy="contractTag"
                            >
                                T&#xE9;l&#xE9;travail complet
                            </div>
                </div>
            </div>

    </div>


            <div class="mt-6 sm:mt-3 flex sm:flex-row-reverse items-end justify-between sm:small-group:mt-6 sm:small-group:flex-row flex-wrap">
                    <span class="btn-outline-m group-hocus-within:bg-black group-hocus-within:border-transparent group-hocus-within:text-white group-hocus-within:opacity-100">Voir l’offre</span>
                    <div class="typo-s text-grey-500 pl-1 pt-1">il y a 14 jours</div>
            </div>
</div>
    </div>
</div>
                    </div>
                </li>
                <li data-id-storage-target="item"
                    data-hide-offer-target="item"
                    data-id-storage-item-id="76396628"
                    data-hide-offer-item-id-value="76396628">
                    

                    <div>
                        
<div
    class="group h-full overflow-hidden bg-white rounded-sm border border-grey-100 hover:border-grey-500 focus-within:outline focus-within:transition-none transition-border-color duration-100"
>
    <div class="h-full relative flex flex-col sm:flex-row sm:small-group:flex-col ">
        <div class="absolute right-6 sm:small-group:right-4 top-6 sm:small-group:top-[21px] z-[2] flex gap-4 sm:gap-0">
                <form action="/fr-fr/searchoffers/hideoffermodalframeview"
                      method="GET"
                      data-turbo-frame="exclude-criteria-frame">
                    <input type="hidden" name="offerId" value="76396628">
                    <input type="hidden" name="title" value="Technicien Syst&#xE8;mes Num&#xE9;riques - D&#xE9;veloppeur Informatique H/F">
                    <input type="hidden" name="company" value="ARMEE DE L&#x27;AIR ET DE L&#x27;ESPACE">
                    <button type="submit"
                            data-cy="hideOfferBtn"
                            data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;exclude_offer&quot;,&quot;event_info&quot;:&quot;Ic&#xF4;ne masquage d&#x27;offre&quot;}"
                            data-action="analytics#push"
                            class="btn-icon-no-outline-m sm:btn-icon-no-outline-l small-group:sm:btn-icon-no-outline-m"
                            aria-label="Masquer l'offre Technicien Syst&#xE8;mes Num&#xE9;riques - D&#xE9;veloppeur Informatique H/F">
                        <svg aria-hidden="true" class="size-3 sm:size-4 small-group:sm:size-3">
                            <use href="/svg/icons/disabled.svg#disabled"></use>
                        </svg>
                    </button>
                </form>
            

<turbo-frame id="bookmark-frame-card76396628">
    <form 
        action="/fr-fr/candidat/tooglebookmark"
        method="GET"
        data-controller="bookmark"
        data-bookmark-offer-id-value="76396628"
        data-bookmark-bookmarked-icon-value="/svg/icons/bookmark.svg#bookmark-active"
        data-bookmark-unbookmarked-icon-value="/svg/icons/bookmark.svg#bookmark"
        data-bookmark-bookmarked-class="text-pink-500"
        data-fetch-account-data-event-param="turbo:submit-end"
        data-action="fetch-account-data#refreshAfterNextTurboEvent"
    >
        <input type="hidden" name="idOffre" value="76396628">
        <input type="hidden" name="turboFrameId" value="bookmark-frame-card76396628">
        <input type="hidden" name="isFromToolbar" value="False"/>
        <button 
            class="btn-icon-no-outline-m sm:btn-icon-no-outline-l small-group:sm:btn-icon-no-outline-m"
            data-bookmark-target="button"
            data-analytics-values-param='{"event": "generic", "EventName" : "bookmark_add", "EventLibelle": "" }'
            data-action="analytics#push:stop"
            data-cy="bookmarkBtn"
        >
            <svg class="size-3 sm:size-4 small-group:sm:size-3">
                <use data-bookmark-target="icon" href="/svg/icons/bookmark.svg#bookmark"></use>
            </svg>
        </button>
    </form>

    


</turbo-frame>
        </div>
        



    <header
        class="
            max-h-[74px]
            min-h-[74px]
            sm:max-h-none
            relative
            w-full
            overflow-hidden
            sm:max-w-64
            sm:small-group:w-full
            sm:small-group:max-h-[74px]
            sm:small-group:max-w-none
        ">

            <div class="absolute inset-0 bg-black/5 z-[1]"></div>
            <img
                class="
                    size-full
                    object-cover
                    object-center
                "
                src="https://f.hellowork.com/media/companypage/206159/350_233/SDRdelArmedelAir_23937_637396771832478446.jpeg"
                loading="lazy"
                alt="ARMEE DE L&#x27;AIR ET DE L&#x27;ESPACE recrutement">

        <div class="
                z-[2]
                absolute
                sm:top-auto
                inset-4
                sm:inset-6
                flex
                justify-center
                items-center
                w-[5.75rem]
                h-11
                rounded-xs
                bg-white
                sm:small-group:inset-4"
        >
                <img
                    loading="lazy"
                    src="https://f.hellowork.com/img/entreprises/206159.png?v=20261001112013"
                    alt="ARMEE DE L&#x27;AIR ET DE L&#x27;ESPACE recrutement"
                    title="Recrutement ARMEE DE L&#x27;AIR ET DE L&#x27;ESPACE"
                    class="
                        w-full
                        h-full
                        px-3
                        py-2
                        object-contain"
                >
        </div>
    </header>

        



<div
    
            data-controller="intersect"
            data-analytics-values-param="{&quot;event&quot;:&quot;generic_product&quot;,&quot;event_name&quot;:&quot;product.display&quot;,&quot;product_data&quot;:[{&quot;product_id&quot;:&quot;76396628&quot;,&quot;product_response_type&quot;:&quot;UrlWithForm&quot;,&quot;product_list&quot;:&quot;LO-Moteur-Exact&quot;,&quot;product_position&quot;:20,&quot;product_category&quot;:&quot;1&quot;,&quot;product_status&quot;:&quot;NotDefined&quot;}]}"
            data-action="intersect:enter->analytics#push:once"
            class="flex flex-col justify-between size-full p-4 sm:p-6 sm:small-group:p-4 min-w-0"
    data-cy="serpCard"
>
    <div class="flex flex-col">
        <header class="w-10/12">
                <div>
                        <a 
                            data-analytics-values-param="{&quot;event&quot;:&quot;generic_product&quot;,&quot;event_name&quot;:&quot;productClick&quot;,&quot;product_data&quot;:[{&quot;product_id&quot;:&quot;76396628&quot;,&quot;product_response_type&quot;:&quot;UrlWithForm&quot;,&quot;product_list&quot;:&quot;LO-Moteur-Exact&quot;,&quot;product_position&quot;:20}],&quot;app_version_array&quot;:{&quot;one-time-password-V1.0&quot;:&quot;Version_B&quot;}}"
                            data-action="analytics#push"
                            data-turbo="false"
                            href="/fr-fr/emplois/76396628.html"
                            title="Technicien Syst&#xE8;mes Num&#xE9;riques - D&#xE9;veloppeur Informatique H/F - ARMEE DE L&#x27;AIR ET DE L&#x27;ESPACE"
                            class="no-underline outline-none focus-within:underline forwarder inline"
                            data-cy="offerTitle"
                                                        aria-label="Voir offre de Technicien Syst&#xE8;mes Num&#xE9;riques - D&#xE9;veloppeur Informatique H/F &#xE0; Lille - 59, chez ARMEE DE L&#x27;AIR ET DE L&#x27;ESPACE, pour un CDD, avec un salaire de 1&#x202F;570 - 2&#x202F;230 &#x20AC; / mois, en temps plein"
                        >
                            


<h3 class="inline">
    <p class="typo-l sm:small-group:typo-l sm:typo-xl">Technicien Syst&#xE8;mes Num&#xE9;riques - D&#xE9;veloppeur Informatique H/F</p>
        <p class="typo-s inline">ARMEE DE L&#x27;AIR ET DE L&#x27;ESPACE</p>
</h3>

                        </a>

                </div>

        </header>
            <div class="mt-6 flex flex-col gap-3 sm:flex-row sm:small-group:flex-col">
                <div class="flex gap-3 flex-wrap">
                        <div
                            class="readonly tag-secondary-s w-fit border-0"
                            data-cy="localisationCard"
                        >
                            Lille - 59
                        </div>
                        <div
                            class="readonly tag-secondary-s w-fit border-0"
                            data-cy="contractCard"
                        >
                            CDD
                        </div>
                        <div class="readonly tag-secondary-s typo-s-bold w-fit border-0">1&#x202F;570 - 2&#x202F;230 &#x20AC; / mois</div>
                </div>
            </div>

    </div>


            <div class="mt-6 sm:mt-3 flex sm:flex-row-reverse items-end justify-between sm:small-group:mt-6 sm:small-group:flex-row flex-wrap">
                    <span class="btn-outline-m group-hocus-within:bg-black group-hocus-within:border-transparent group-hocus-within:text-white group-hocus-within:opacity-100">Voir l’offre</span>
                    <div class="typo-s text-grey-500 pl-1 pt-1">il y a 9 jours</div>
            </div>
</div>
    </div>
</div>
                    </div>
                </li>
                <li data-id-storage-target="item"
                    data-hide-offer-target="item"
                    data-id-storage-item-id="84035838"
                    data-hide-offer-item-id-value="84035838">
                    

                    <div>
                        
<div
    class="group h-full overflow-hidden bg-white rounded-sm border border-grey-100 hover:border-grey-500 focus-within:outline focus-within:transition-none transition-border-color duration-100"
>
    <div class="h-full relative flex flex-col sm:flex-row sm:small-group:flex-col ">
        <div class="absolute right-6 sm:small-group:right-4 top-6 sm:small-group:top-[21px] z-[2] flex gap-4 sm:gap-0">
                <form action="/fr-fr/searchoffers/hideoffermodalframeview"
                      method="GET"
                      data-turbo-frame="exclude-criteria-frame">
                    <input type="hidden" name="offerId" value="84035838">
                    <input type="hidden" name="title" value="Developpeur ERP Industriel - Support Applicatif H/F">
                    <input type="hidden" name="company" value="Studio RH">
                    <button type="submit"
                            data-cy="hideOfferBtn"
                            data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;exclude_offer&quot;,&quot;event_info&quot;:&quot;Ic&#xF4;ne masquage d&#x27;offre&quot;}"
                            data-action="analytics#push"
                            class="btn-icon-no-outline-m sm:btn-icon-no-outline-l small-group:sm:btn-icon-no-outline-m"
                            aria-label="Masquer l'offre Developpeur ERP Industriel - Support Applicatif H/F">
                        <svg aria-hidden="true" class="size-3 sm:size-4 small-group:sm:size-3">
                            <use href="/svg/icons/disabled.svg#disabled"></use>
                        </svg>
                    </button>
                </form>
            

<turbo-frame id="bookmark-frame-card84035838">
    <form 
        action="/fr-fr/candidat/tooglebookmark"
        method="GET"
        data-controller="bookmark"
        data-bookmark-offer-id-value="84035838"
        data-bookmark-bookmarked-icon-value="/svg/icons/bookmark.svg#bookmark-active"
        data-bookmark-unbookmarked-icon-value="/svg/icons/bookmark.svg#bookmark"
        data-bookmark-bookmarked-class="text-pink-500"
        data-fetch-account-data-event-param="turbo:submit-end"
        data-action="fetch-account-data#refreshAfterNextTurboEvent"
    >
        <input type="hidden" name="idOffre" value="84035838">
        <input type="hidden" name="turboFrameId" value="bookmark-frame-card84035838">
        <input type="hidden" name="isFromToolbar" value="False"/>
        <button 
            class="btn-icon-no-outline-m sm:btn-icon-no-outline-l small-group:sm:btn-icon-no-outline-m"
            data-bookmark-target="button"
            data-analytics-values-param='{"event": "generic", "EventName" : "bookmark_add", "EventLibelle": "" }'
            data-action="analytics#push:stop"
            data-cy="bookmarkBtn"
        >
            <svg class="size-3 sm:size-4 small-group:sm:size-3">
                <use data-bookmark-target="icon" href="/svg/icons/bookmark.svg#bookmark"></use>
            </svg>
        </button>
    </form>

    


</turbo-frame>
        </div>
        



    <header
        class="
            max-h-[74px]
            min-h-[74px]
            sm:max-h-none
            relative
            w-full
            overflow-hidden
            sm:max-w-64
            sm:small-group:w-full
            sm:small-group:max-h-[74px]
            sm:small-group:max-w-none
        ">

            <div
                class="
                    relative
                    h-[74px]
                    sm:h-full
                    bg-blue-100
                    text-blue-200
                ">
                <svg class="absolute
                        -left-[110px] sm:-left-[120px]
                        -bottom-[100px] sm:bottom-[20px] sm:small-group:-bottom-[95px]
                        w-[617px] sm:w-[547px]
                        h-[301px] sm:h-[267px]
                        opacity-20 -rotate-[160deg]">
                    <use href="/svg/illustrations/chevron.svg#chevron"></use>
                </svg>
            </div>

        <div class="
                z-[2]
                absolute
                sm:top-auto
                inset-4
                sm:inset-6
                flex
                justify-center
                items-center
                w-[5.75rem]
                h-11
                rounded-xs
                bg-white
                sm:small-group:inset-4"
        >
                <img
                    loading="lazy"
                    src="https://f.hellowork.com/img/entreprises/202762.png?v=20261002101657"
                    alt="Studio RH recrutement"
                    title="Recrutement Studio RH"
                    class="
                        w-full
                        h-full
                        px-3
                        py-2
                        object-contain"
                >
        </div>
    </header>

        



<div
    
            data-controller="intersect"
            data-analytics-values-param="{&quot;event&quot;:&quot;generic_product&quot;,&quot;event_name&quot;:&quot;product.display&quot;,&quot;product_data&quot;:[{&quot;product_id&quot;:&quot;84035838&quot;,&quot;product_response_type&quot;:&quot;Smartapply_v2&quot;,&quot;product_list&quot;:&quot;LO-Moteur-Exact&quot;,&quot;product_position&quot;:21,&quot;product_category&quot;:&quot;1&quot;,&quot;product_status&quot;:&quot;NotDefined&quot;}]}"
            data-action="intersect:enter->analytics#push:once"
            class="flex flex-col justify-between size-full p-4 sm:p-6 sm:small-group:p-4 min-w-0"
    data-cy="serpCard"
>
    <div class="flex flex-col">
        <header class="w-10/12">
                <div>
                        <a 
                            data-analytics-values-param="{&quot;event&quot;:&quot;generic_product&quot;,&quot;event_name&quot;:&quot;productClick&quot;,&quot;product_data&quot;:[{&quot;product_id&quot;:&quot;84035838&quot;,&quot;product_response_type&quot;:&quot;Smartapply_v2&quot;,&quot;product_list&quot;:&quot;LO-Moteur-Exact&quot;,&quot;product_position&quot;:21}],&quot;app_version_array&quot;:{&quot;one-time-password-V1.0&quot;:&quot;Version_B&quot;}}"
                            data-action="analytics#push"
                            data-turbo="false"
                            href="/fr-fr/emplois/84035838.html"
                            title="Developpeur ERP Industriel - Support Applicatif H/F - Studio RH"
                            class="no-underline outline-none focus-within:underline forwarder inline"
                            data-cy="offerTitle"
                                                        aria-label="Voir offre de Developpeur ERP Industriel - Support Applicatif H/F &#xE0; Lille - 59, chez Studio RH, pour un CDI, avec un salaire de 40&#x202F;000 - 60&#x202F;000 &#x20AC; / an, en temps plein, T&#xE9;l&#xE9;travail partiel"
                        >
                            


<h3 class="inline">
    <p class="typo-l sm:small-group:typo-l sm:typo-xl">Developpeur ERP Industriel - Support Applicatif H/F</p>
        <p class="typo-s inline">Studio RH</p>
</h3>

                        </a>

                </div>

        </header>
            <div class="mt-6 flex flex-col gap-3 sm:flex-row sm:small-group:flex-col">
                <div class="flex gap-3 flex-wrap">
                        <div
                            class="readonly tag-secondary-s w-fit border-0"
                            data-cy="localisationCard"
                        >
                            Lille - 59
                        </div>
                        <div
                            class="readonly tag-secondary-s w-fit border-0"
                            data-cy="contractCard"
                        >
                            CDI
                        </div>
                        <div class="readonly tag-secondary-s typo-s-bold w-fit border-0">40&#x202F;000 - 60&#x202F;000 &#x20AC; / an</div>
                            <div
                                class="readonly tag-secondary-s border-0 w-fit"
                                data-cy="contractTag"
                            >
                                T&#xE9;l&#xE9;travail partiel
                            </div>
                </div>
            </div>

    </div>


            <div class="mt-6 sm:mt-3 flex sm:flex-row-reverse items-end justify-between sm:small-group:mt-6 sm:small-group:flex-row flex-wrap">
                    <span class="btn-outline-m group-hocus-within:bg-black group-hocus-within:border-transparent group-hocus-within:text-white group-hocus-within:opacity-100">Voir l’offre</span>
                    <div class="typo-s text-grey-500 pl-1 pt-1">il y a 12 jours</div>
            </div>
</div>
    </div>
</div>
                    </div>
                </li>
                <li data-id-storage-target="item"
                    data-hide-offer-target="item"
                    data-id-storage-item-id="83786259"
                    data-hide-offer-item-id-value="83786259">
                    

                    <div>
                        
<div
    class="group h-full overflow-hidden bg-white rounded-sm border border-grey-100 hover:border-grey-500 focus-within:outline focus-within:transition-none transition-border-color duration-100"
>
    <div class="h-full relative flex flex-col sm:flex-row sm:small-group:flex-col ">
        <div class="absolute right-6 sm:small-group:right-4 top-6 sm:small-group:top-[21px] z-[2] flex gap-4 sm:gap-0">
                <form action="/fr-fr/searchoffers/hideoffermodalframeview"
                      method="GET"
                      data-turbo-frame="exclude-criteria-frame">
                    <input type="hidden" name="offerId" value="83786259">
                    <input type="hidden" name="title" value="D&#xE9;veloppeuse - D&#xE9;veloppeur Full Stack IA - Stage H/F">
                    <input type="hidden" name="company" value="Capgemini">
                    <button type="submit"
                            data-cy="hideOfferBtn"
                            data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;exclude_offer&quot;,&quot;event_info&quot;:&quot;Ic&#xF4;ne masquage d&#x27;offre&quot;}"
                            data-action="analytics#push"
                            class="btn-icon-no-outline-m sm:btn-icon-no-outline-l small-group:sm:btn-icon-no-outline-m"
                            aria-label="Masquer l'offre D&#xE9;veloppeuse - D&#xE9;veloppeur Full Stack IA - Stage H/F">
                        <svg aria-hidden="true" class="size-3 sm:size-4 small-group:sm:size-3">
                            <use href="/svg/icons/disabled.svg#disabled"></use>
                        </svg>
                    </button>
                </form>
            

<turbo-frame id="bookmark-frame-card83786259">
    <form 
        action="/fr-fr/candidat/tooglebookmark"
        method="GET"
        data-controller="bookmark"
        data-bookmark-offer-id-value="83786259"
        data-bookmark-bookmarked-icon-value="/svg/icons/bookmark.svg#bookmark-active"
        data-bookmark-unbookmarked-icon-value="/svg/icons/bookmark.svg#bookmark"
        data-bookmark-bookmarked-class="text-pink-500"
        data-fetch-account-data-event-param="turbo:submit-end"
        data-action="fetch-account-data#refreshAfterNextTurboEvent"
    >
        <input type="hidden" name="idOffre" value="83786259">
        <input type="hidden" name="turboFrameId" value="bookmark-frame-card83786259">
        <input type="hidden" name="isFromToolbar" value="False"/>
        <button 
            class="btn-icon-no-outline-m sm:btn-icon-no-outline-l small-group:sm:btn-icon-no-outline-m"
            data-bookmark-target="button"
            data-analytics-values-param='{"event": "generic", "EventName" : "bookmark_add", "EventLibelle": "" }'
            data-action="analytics#push:stop"
            data-cy="bookmarkBtn"
        >
            <svg class="size-3 sm:size-4 small-group:sm:size-3">
                <use data-bookmark-target="icon" href="/svg/icons/bookmark.svg#bookmark"></use>
            </svg>
        </button>
    </form>

    


</turbo-frame>
        </div>
        



    <header
        class="
            max-h-[74px]
            min-h-[74px]
            sm:max-h-none
            relative
            w-full
            overflow-hidden
            sm:max-w-64
            sm:small-group:w-full
            sm:small-group:max-h-[74px]
            sm:small-group:max-w-none
        ">

            <div class="absolute inset-0 bg-black/5 z-[1]"></div>
            <img
                class="
                    size-full
                    object-cover
                    object-center
                "
                src="https://f.hellowork.com/media/companypage/193881/350_233/6026_638761029555258356922867.jpg"
                loading="lazy"
                alt="Capgemini recrutement">

        <div class="
                z-[2]
                absolute
                sm:top-auto
                inset-4
                sm:inset-6
                flex
                justify-center
                items-center
                w-[5.75rem]
                h-11
                rounded-xs
                bg-white
                sm:small-group:inset-4"
        >
                <img
                    loading="lazy"
                    src="https://f.hellowork.com/img/entreprises/193881.png?v=20261001112010"
                    alt="Capgemini recrutement"
                    title="Recrutement Capgemini"
                    class="
                        w-full
                        h-full
                        px-3
                        py-2
                        object-contain"
                >
        </div>
    </header>

        



<div
    
            data-controller="intersect"
            data-analytics-values-param="{&quot;event&quot;:&quot;generic_product&quot;,&quot;event_name&quot;:&quot;product.display&quot;,&quot;product_data&quot;:[{&quot;product_id&quot;:&quot;83786259&quot;,&quot;product_response_type&quot;:&quot;UrlWithForm&quot;,&quot;product_list&quot;:&quot;LO-Moteur-Exact&quot;,&quot;product_position&quot;:22,&quot;product_category&quot;:&quot;1&quot;,&quot;product_status&quot;:&quot;NotDefined&quot;}]}"
            data-action="intersect:enter->analytics#push:once"
            class="flex flex-col justify-between size-full p-4 sm:p-6 sm:small-group:p-4 min-w-0"
    data-cy="serpCard"
>
    <div class="flex flex-col">
        <header class="w-10/12">
                <div>
                        <a 
                            data-analytics-values-param="{&quot;event&quot;:&quot;generic_product&quot;,&quot;event_name&quot;:&quot;productClick&quot;,&quot;product_data&quot;:[{&quot;product_id&quot;:&quot;83786259&quot;,&quot;product_response_type&quot;:&quot;UrlWithForm&quot;,&quot;product_list&quot;:&quot;LO-Moteur-Exact&quot;,&quot;product_position&quot;:22}],&quot;app_version_array&quot;:{&quot;one-time-password-V1.0&quot;:&quot;Version_B&quot;}}"
                            data-action="analytics#push"
                            data-turbo="false"
                            href="/fr-fr/emplois/83786259.html"
                            title="D&#xE9;veloppeuse - D&#xE9;veloppeur Full Stack IA - Stage H/F - Capgemini"
                            class="no-underline outline-none focus-within:underline forwarder inline"
                            data-cy="offerTitle"
                                                        aria-label="Voir offre de D&#xE9;veloppeuse - D&#xE9;veloppeur Full Stack IA - Stage H/F &#xE0; Lille - 59, chez Capgemini, pour un Stage, en temps plein, 6 mois"
                        >
                            


<h3 class="inline">
    <p class="typo-l sm:small-group:typo-l sm:typo-xl">D&#xE9;veloppeuse - D&#xE9;veloppeur Full Stack IA - Stage H/F</p>
        <p class="typo-s inline">Capgemini</p>
</h3>

                        </a>

                </div>

        </header>
            <div class="mt-6 flex flex-col gap-3 sm:flex-row sm:small-group:flex-col">
                <div class="flex gap-3 flex-wrap">
                        <div
                            class="readonly tag-secondary-s w-fit border-0"
                            data-cy="localisationCard"
                        >
                            Lille - 59
                        </div>
                        <div
                            class="readonly tag-secondary-s w-fit border-0"
                            data-cy="contractCard"
                        >
                            Stage
                        </div>
                            <div
                                class="readonly tag-secondary-s border-0 w-fit"
                                data-cy="contractTag"
                            >
                                6 mois
                            </div>
                </div>
            </div>

    </div>


            <div class="mt-6 sm:mt-3 flex sm:flex-row-reverse items-end justify-between sm:small-group:mt-6 sm:small-group:flex-row flex-wrap">
                    <span class="btn-outline-m group-hocus-within:bg-black group-hocus-within:border-transparent group-hocus-within:text-white group-hocus-within:opacity-100">Voir l’offre</span>
                    <div class="typo-s text-grey-500 pl-1 pt-1">il y a 19 jours</div>
            </div>
</div>
    </div>
</div>
                    </div>
                </li>
                <li data-id-storage-target="item"
                    data-hide-offer-target="item"
                    data-id-storage-item-id="82598447"
                    data-hide-offer-item-id-value="82598447">
                    

                    <div>
                        
<div
    class="group h-full overflow-hidden bg-white rounded-sm border border-grey-100 hover:border-grey-500 focus-within:outline focus-within:transition-none transition-border-color duration-100"
>
    <div class="h-full relative flex flex-col sm:flex-row sm:small-group:flex-col ">
        <div class="absolute right-6 sm:small-group:right-4 top-6 sm:small-group:top-[21px] z-[2] flex gap-4 sm:gap-0">
                <form action="/fr-fr/searchoffers/hideoffermodalframeview"
                      method="GET"
                      data-turbo-frame="exclude-criteria-frame">
                    <input type="hidden" name="offerId" value="82598447">
                    <input type="hidden" name="title" value="D&#xE9;veloppeur Backend Java H/F">
                    <input type="hidden" name="company">
                    <button type="submit"
                            data-cy="hideOfferBtn"
                            data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;exclude_offer&quot;,&quot;event_info&quot;:&quot;Ic&#xF4;ne masquage d&#x27;offre&quot;}"
                            data-action="analytics#push"
                            class="btn-icon-no-outline-m sm:btn-icon-no-outline-l small-group:sm:btn-icon-no-outline-m"
                            aria-label="Masquer l'offre D&#xE9;veloppeur Backend Java H/F">
                        <svg aria-hidden="true" class="size-3 sm:size-4 small-group:sm:size-3">
                            <use href="/svg/icons/disabled.svg#disabled"></use>
                        </svg>
                    </button>
                </form>
            

<turbo-frame id="bookmark-frame-card82598447">
    <form 
        action="/fr-fr/candidat/tooglebookmark"
        method="GET"
        data-controller="bookmark"
        data-bookmark-offer-id-value="82598447"
        data-bookmark-bookmarked-icon-value="/svg/icons/bookmark.svg#bookmark-active"
        data-bookmark-unbookmarked-icon-value="/svg/icons/bookmark.svg#bookmark"
        data-bookmark-bookmarked-class="text-pink-500"
        data-fetch-account-data-event-param="turbo:submit-end"
        data-action="fetch-account-data#refreshAfterNextTurboEvent"
    >
        <input type="hidden" name="idOffre" value="82598447">
        <input type="hidden" name="turboFrameId" value="bookmark-frame-card82598447">
        <input type="hidden" name="isFromToolbar" value="False"/>
        <button 
            class="btn-icon-no-outline-m sm:btn-icon-no-outline-l small-group:sm:btn-icon-no-outline-m"
            data-bookmark-target="button"
            data-analytics-values-param='{"event": "generic", "EventName" : "bookmark_add", "EventLibelle": "" }'
            data-action="analytics#push:stop"
            data-cy="bookmarkBtn"
        >
            <svg class="size-3 sm:size-4 small-group:sm:size-3">
                <use data-bookmark-target="icon" href="/svg/icons/bookmark.svg#bookmark"></use>
            </svg>
        </button>
    </form>

    


</turbo-frame>
        </div>
        



    <header
        class="
            max-h-[74px]
            min-h-[74px]
            sm:max-h-none
            relative
            w-full
            overflow-hidden
            sm:max-w-64
            sm:small-group:w-full
            sm:small-group:max-h-[74px]
            sm:small-group:max-w-none
        ">

            <div
                class="
                    relative
                    h-[74px]
                    sm:h-full
                    bg-purple-100
                    text-purple-200
                ">
                <svg class="absolute
                        -left-[110px] sm:-left-[120px]
                        -bottom-[100px] sm:bottom-[20px] sm:small-group:-bottom-[95px]
                        w-[617px] sm:w-[547px]
                        h-[301px] sm:h-[267px]
                        opacity-20 rotate-[158deg]">
                    <use href="/svg/illustrations/chevron.svg#chevron"></use>
                </svg>
            </div>

        <div class="
                z-[2]
                absolute
                sm:top-auto
                inset-4
                sm:inset-6
                flex
                justify-center
                items-center
                w-[5.75rem]
                h-11
                rounded-xs
                bg-white
                sm:small-group:inset-4"
        >
                <div class="w-full h-full flex justify-center items-center">
                    <svg class="size-5 text-grey-300">
                        <use href="/svg/icons/default-company.svg#default-company"></use>
                    </svg>
                </div>
        </div>
    </header>

        



<div
    
            data-controller="intersect"
            data-analytics-values-param="{&quot;event&quot;:&quot;generic_product&quot;,&quot;event_name&quot;:&quot;product.display&quot;,&quot;product_data&quot;:[{&quot;product_id&quot;:&quot;82598447&quot;,&quot;product_response_type&quot;:&quot;ATS&quot;,&quot;product_list&quot;:&quot;LO-Moteur-Exact&quot;,&quot;product_position&quot;:23,&quot;product_category&quot;:&quot;1&quot;,&quot;product_status&quot;:&quot;Suivi de candidature&quot;}]}"
            data-action="intersect:enter->analytics#push:once"
            class="flex flex-col justify-between size-full p-4 sm:p-6 sm:small-group:p-4 min-w-0"
    data-cy="serpCard"
>
    <div class="flex flex-col">
        <header class="w-10/12">
                <span
                    class="badge-m badge-purple mb-4 relative z-[2]"
                    data-cy="followUpTag"
                    title="Ce recruteur partage l&#x2019;avancement des candidatures."
                >
                    Suivi de candidature
                </span>
                <div>
                        <a 
                            data-analytics-values-param="{&quot;event&quot;:&quot;generic_product&quot;,&quot;event_name&quot;:&quot;productClick&quot;,&quot;product_data&quot;:[{&quot;product_id&quot;:&quot;82598447&quot;,&quot;product_response_type&quot;:&quot;ATS&quot;,&quot;product_list&quot;:&quot;LO-Moteur-Exact&quot;,&quot;product_position&quot;:23}],&quot;app_version_array&quot;:{&quot;one-time-password-V1.0&quot;:&quot;Version_B&quot;}}"
                            data-action="analytics#push"
                            data-turbo="false"
                            href="/fr-fr/emplois/82598447.html"
                            title="D&#xE9;veloppeur Backend Java H/F -"
                            class="no-underline outline-none focus-within:underline forwarder inline"
                            data-cy="offerTitle"
                                                        aria-label="Voir offre de D&#xE9;veloppeur Backend Java H/F &#xE0; Lille - 59, chez , pour un CDI, en temps plein, T&#xE9;l&#xE9;travail partiel"
                        >
                            


<h3 class="inline">
    <p class="typo-l sm:small-group:typo-l sm:typo-xl">D&#xE9;veloppeur Backend Java H/F</p>
</h3>

                        </a>

                        <p class="typo-s text-grey-500">Cette entreprise souhaite rester anonyme</p>
                </div>

        </header>
            <div class="mt-6 flex flex-col gap-3 sm:flex-row sm:small-group:flex-col">
                <div class="flex gap-3 flex-wrap">
                        <div
                            class="readonly tag-secondary-s w-fit border-0"
                            data-cy="localisationCard"
                        >
                            Lille - 59
                        </div>
                        <div
                            class="readonly tag-secondary-s w-fit border-0"
                            data-cy="contractCard"
                        >
                            CDI
                        </div>
                            <div
                                class="readonly tag-secondary-s border-0 w-fit"
                                data-cy="contractTag"
                            >
                                T&#xE9;l&#xE9;travail partiel
                            </div>
                </div>
            </div>

    </div>


            <div class="mt-6 sm:mt-3 flex sm:flex-row-reverse items-end justify-between sm:small-group:mt-6 sm:small-group:flex-row flex-wrap">
                    <span class="btn-outline-m group-hocus-within:bg-black group-hocus-within:border-transparent group-hocus-within:text-white group-hocus-within:opacity-100">Voir l’offre</span>
                    <div class="typo-s text-grey-500 pl-1 pt-1">il y a 20 jours</div>
            </div>
</div>
    </div>
</div>
                    </div>
                </li>
                <li data-id-storage-target="item"
                    data-hide-offer-target="item"
                    data-id-storage-item-id="67170737"
                    data-hide-offer-item-id-value="67170737">
                    

                    <div>
                        
<div
    class="group h-full overflow-hidden bg-white rounded-sm border border-grey-100 hover:border-grey-500 focus-within:outline focus-within:transition-none transition-border-color duration-100"
>
    <div class="h-full relative flex flex-col sm:flex-row sm:small-group:flex-col ">
        <div class="absolute right-6 sm:small-group:right-4 top-6 sm:small-group:top-[21px] z-[2] flex gap-4 sm:gap-0">
                <form action="/fr-fr/searchoffers/hideoffermodalframeview"
                      method="GET"
                      data-turbo-frame="exclude-criteria-frame">
                    <input type="hidden" name="offerId" value="67170737">
                    <input type="hidden" name="title" value="D&#xE9;veloppeur en Automatisme et Supervision Industrielle H/F">
                    <input type="hidden" name="company" value="Mercato de l&#x27;emploi">
                    <button type="submit"
                            data-cy="hideOfferBtn"
                            data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;exclude_offer&quot;,&quot;event_info&quot;:&quot;Ic&#xF4;ne masquage d&#x27;offre&quot;}"
                            data-action="analytics#push"
                            class="btn-icon-no-outline-m sm:btn-icon-no-outline-l small-group:sm:btn-icon-no-outline-m"
                            aria-label="Masquer l'offre D&#xE9;veloppeur en Automatisme et Supervision Industrielle H/F">
                        <svg aria-hidden="true" class="size-3 sm:size-4 small-group:sm:size-3">
                            <use href="/svg/icons/disabled.svg#disabled"></use>
                        </svg>
                    </button>
                </form>
            

<turbo-frame id="bookmark-frame-card67170737">
    <form 
        action="/fr-fr/candidat/tooglebookmark"
        method="GET"
        data-controller="bookmark"
        data-bookmark-offer-id-value="67170737"
        data-bookmark-bookmarked-icon-value="/svg/icons/bookmark.svg#bookmark-active"
        data-bookmark-unbookmarked-icon-value="/svg/icons/bookmark.svg#bookmark"
        data-bookmark-bookmarked-class="text-pink-500"
        data-fetch-account-data-event-param="turbo:submit-end"
        data-action="fetch-account-data#refreshAfterNextTurboEvent"
    >
        <input type="hidden" name="idOffre" value="67170737">
        <input type="hidden" name="turboFrameId" value="bookmark-frame-card67170737">
        <input type="hidden" name="isFromToolbar" value="False"/>
        <button 
            class="btn-icon-no-outline-m sm:btn-icon-no-outline-l small-group:sm:btn-icon-no-outline-m"
            data-bookmark-target="button"
            data-analytics-values-param='{"event": "generic", "EventName" : "bookmark_add", "EventLibelle": "" }'
            data-action="analytics#push:stop"
            data-cy="bookmarkBtn"
        >
            <svg class="size-3 sm:size-4 small-group:sm:size-3">
                <use data-bookmark-target="icon" href="/svg/icons/bookmark.svg#bookmark"></use>
            </svg>
        </button>
    </form>

    


</turbo-frame>
        </div>
        



    <header
        class="
            max-h-[74px]
            min-h-[74px]
            sm:max-h-none
            relative
            w-full
            overflow-hidden
            sm:max-w-64
            sm:small-group:w-full
            sm:small-group:max-h-[74px]
            sm:small-group:max-w-none
        ">

            <div
                class="
                    relative
                    h-[74px]
                    sm:h-full
                    bg-purple-100
                    text-purple-200
                ">
                <svg class="absolute
                        -left-[110px] sm:-left-[120px]
                        -bottom-[100px] sm:bottom-[20px] sm:small-group:-bottom-[95px]
                        w-[617px] sm:w-[547px]
                        h-[301px] sm:h-[267px]
                        opacity-20 rotate-[158deg]">
                    <use href="/svg/illustrations/chevron.svg#chevron"></use>
                </svg>
            </div>

        <div class="
                z-[2]
                absolute
                sm:top-auto
                inset-4
                sm:inset-6
                flex
                justify-center
                items-center
                w-[5.75rem]
                h-11
                rounded-xs
                bg-white
                sm:small-group:inset-4"
        >
                <img
                    loading="lazy"
                    src="https://f.hellowork.com/img/entreprises/199596.png?v=20261001112012"
                    alt="Mercato de l&#x27;emploi recrutement"
                    title="Recrutement Mercato de l&#x27;emploi"
                    class="
                        w-full
                        h-full
                        px-3
                        py-2
                        object-contain"
                >
        </div>
    </header>

        



<div
    
            data-controller="intersect"
            data-analytics-values-param="{&quot;event&quot;:&quot;generic_product&quot;,&quot;event_name&quot;:&quot;product.display&quot;,&quot;product_data&quot;:[{&quot;product_id&quot;:&quot;67170737&quot;,&quot;product_response_type&quot;:&quot;ATS&quot;,&quot;product_list&quot;:&quot;LO-Moteur-Exact&quot;,&quot;product_position&quot;:24,&quot;product_category&quot;:&quot;1&quot;,&quot;product_status&quot;:&quot;Suivi de candidature&quot;}]}"
            data-action="intersect:enter->analytics#push:once"
            class="flex flex-col justify-between size-full p-4 sm:p-6 sm:small-group:p-4 min-w-0"
    data-cy="serpCard"
>
    <div class="flex flex-col">
        <header class="w-10/12">
                <span
                    class="badge-m badge-purple mb-4 relative z-[2]"
                    data-cy="followUpTag"
                    title="Ce recruteur partage l&#x2019;avancement des candidatures."
                >
                    Suivi de candidature
                </span>
                <div>
                        <a 
                            data-analytics-values-param="{&quot;event&quot;:&quot;generic_product&quot;,&quot;event_name&quot;:&quot;productClick&quot;,&quot;product_data&quot;:[{&quot;product_id&quot;:&quot;67170737&quot;,&quot;product_response_type&quot;:&quot;ATS&quot;,&quot;product_list&quot;:&quot;LO-Moteur-Exact&quot;,&quot;product_position&quot;:24}],&quot;app_version_array&quot;:{&quot;one-time-password-V1.0&quot;:&quot;Version_B&quot;}}"
                            data-action="analytics#push"
                            data-turbo="false"
                            href="/fr-fr/emplois/67170737.html"
                            title="D&#xE9;veloppeur en Automatisme et Supervision Industrielle H/F - Mercato de l&#x27;emploi"
                            class="no-underline outline-none focus-within:underline forwarder inline"
                            data-cy="offerTitle"
                                                        aria-label="Voir offre de D&#xE9;veloppeur en Automatisme et Supervision Industrielle H/F &#xE0; Lille - 59, chez Mercato de l&#x27;emploi, pour un CDI, avec un salaire de 35&#x202F;000 - 40&#x202F;000 &#x20AC; / an, en temps plein"
                        >
                            


<h3 class="inline">
    <p class="typo-l sm:small-group:typo-l sm:typo-xl">D&#xE9;veloppeur en Automatisme et Supervision Industrielle H/F</p>
        <p class="typo-s inline">Mercato de l&#x27;emploi</p>
</h3>

                        </a>

                </div>

        </header>
            <div class="mt-6 flex flex-col gap-3 sm:flex-row sm:small-group:flex-col">
                <div class="flex gap-3 flex-wrap">
                        <div
                            class="readonly tag-secondary-s w-fit border-0"
                            data-cy="localisationCard"
                        >
                            Lille - 59
                        </div>
                        <div
                            class="readonly tag-secondary-s w-fit border-0"
                            data-cy="contractCard"
                        >
                            CDI
                        </div>
                        <div class="readonly tag-secondary-s typo-s-bold w-fit border-0">35&#x202F;000 - 40&#x202F;000 &#x20AC; / an</div>
                </div>
            </div>

    </div>


            <div class="mt-6 sm:mt-3 flex sm:flex-row-reverse items-end justify-between sm:small-group:mt-6 sm:small-group:flex-row flex-wrap">
                    <span class="btn-outline-m group-hocus-within:bg-black group-hocus-within:border-transparent group-hocus-within:text-white group-hocus-within:opacity-100">Voir l’offre</span>
                    <div class="typo-s text-grey-500 pl-1 pt-1">il y a 16 jours</div>
            </div>
</div>
    </div>
</div>
                    </div>
                </li>
                <li data-id-storage-target="item"
                    data-hide-offer-target="item"
                    data-id-storage-item-id="83962451"
                    data-hide-offer-item-id-value="83962451">
                    

                    <div>
                        
<div
    class="group h-full overflow-hidden bg-white rounded-sm border border-grey-100 hover:border-grey-500 focus-within:outline focus-within:transition-none transition-border-color duration-100"
>
    <div class="h-full relative flex flex-col sm:flex-row sm:small-group:flex-col ">
        <div class="absolute right-6 sm:small-group:right-4 top-6 sm:small-group:top-[21px] z-[2] flex gap-4 sm:gap-0">
                <form action="/fr-fr/searchoffers/hideoffermodalframeview"
                      method="GET"
                      data-turbo-frame="exclude-criteria-frame">
                    <input type="hidden" name="offerId" value="83962451">
                    <input type="hidden" name="title" value="D&#xE9;veloppeur mes - Outil Opcenter Execution Siemens H/F">
                    <input type="hidden" name="company" value="MEENT">
                    <button type="submit"
                            data-cy="hideOfferBtn"
                            data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;exclude_offer&quot;,&quot;event_info&quot;:&quot;Ic&#xF4;ne masquage d&#x27;offre&quot;}"
                            data-action="analytics#push"
                            class="btn-icon-no-outline-m sm:btn-icon-no-outline-l small-group:sm:btn-icon-no-outline-m"
                            aria-label="Masquer l'offre D&#xE9;veloppeur mes - Outil Opcenter Execution Siemens H/F">
                        <svg aria-hidden="true" class="size-3 sm:size-4 small-group:sm:size-3">
                            <use href="/svg/icons/disabled.svg#disabled"></use>
                        </svg>
                    </button>
                </form>
            

<turbo-frame id="bookmark-frame-card83962451">
    <form 
        action="/fr-fr/candidat/tooglebookmark"
        method="GET"
        data-controller="bookmark"
        data-bookmark-offer-id-value="83962451"
        data-bookmark-bookmarked-icon-value="/svg/icons/bookmark.svg#bookmark-active"
        data-bookmark-unbookmarked-icon-value="/svg/icons/bookmark.svg#bookmark"
        data-bookmark-bookmarked-class="text-pink-500"
        data-fetch-account-data-event-param="turbo:submit-end"
        data-action="fetch-account-data#refreshAfterNextTurboEvent"
    >
        <input type="hidden" name="idOffre" value="83962451">
        <input type="hidden" name="turboFrameId" value="bookmark-frame-card83962451">
        <input type="hidden" name="isFromToolbar" value="False"/>
        <button 
            class="btn-icon-no-outline-m sm:btn-icon-no-outline-l small-group:sm:btn-icon-no-outline-m"
            data-bookmark-target="button"
            data-analytics-values-param='{"event": "generic", "EventName" : "bookmark_add", "EventLibelle": "" }'
            data-action="analytics#push:stop"
            data-cy="bookmarkBtn"
        >
            <svg class="size-3 sm:size-4 small-group:sm:size-3">
                <use data-bookmark-target="icon" href="/svg/icons/bookmark.svg#bookmark"></use>
            </svg>
        </button>
    </form>

    


</turbo-frame>
        </div>
        



    <header
        class="
            max-h-[74px]
            min-h-[74px]
            sm:max-h-none
            relative
            w-full
            overflow-hidden
            sm:max-w-64
            sm:small-group:w-full
            sm:small-group:max-h-[74px]
            sm:small-group:max-w-none
        ">

            <div class="absolute inset-0 bg-black/5 z-[1]"></div>
            <img
                class="
                    size-full
                    object-cover
                    object-center
                "
                src="https://f.hellowork.com/media/companypage/199562/350_233/149081_63876175247108245451441608.jpg"
                loading="lazy"
                alt="MEENT recrutement">

        <div class="
                z-[2]
                absolute
                sm:top-auto
                inset-4
                sm:inset-6
                flex
                justify-center
                items-center
                w-[5.75rem]
                h-11
                rounded-xs
                bg-white
                sm:small-group:inset-4"
        >
                <img
                    loading="lazy"
                    src="https://f.hellowork.com/img/entreprises/199562.png?v=20261001125553"
                    alt="MEENT recrutement"
                    title="Recrutement MEENT"
                    class="
                        w-full
                        h-full
                        px-3
                        py-2
                        object-contain"
                >
        </div>
    </header>

        



<div
    
            data-controller="intersect"
            data-analytics-values-param="{&quot;event&quot;:&quot;generic_product&quot;,&quot;event_name&quot;:&quot;product.display&quot;,&quot;product_data&quot;:[{&quot;product_id&quot;:&quot;83962451&quot;,&quot;product_response_type&quot;:&quot;Smartapply_v2&quot;,&quot;product_list&quot;:&quot;LO-Moteur-Exact&quot;,&quot;product_position&quot;:25,&quot;product_category&quot;:&quot;1&quot;,&quot;product_status&quot;:&quot;Suivi de candidature&quot;}]}"
            data-action="intersect:enter->analytics#push:once"
            class="flex flex-col justify-between size-full p-4 sm:p-6 sm:small-group:p-4 min-w-0"
    data-cy="serpCard"
>
    <div class="flex flex-col">
        <header class="w-10/12">
                <span
                    class="badge-m badge-purple mb-4 relative z-[2]"
                    data-cy="followUpTag"
                    title="Ce recruteur partage l&#x2019;avancement des candidatures."
                >
                    Suivi de candidature
                </span>
                <div>
                        <a 
                            data-analytics-values-param="{&quot;event&quot;:&quot;generic_product&quot;,&quot;event_name&quot;:&quot;productClick&quot;,&quot;product_data&quot;:[{&quot;product_id&quot;:&quot;83962451&quot;,&quot;product_response_type&quot;:&quot;Smartapply_v2&quot;,&quot;product_list&quot;:&quot;LO-Moteur-Exact&quot;,&quot;product_position&quot;:25}],&quot;app_version_array&quot;:{&quot;one-time-password-V1.0&quot;:&quot;Version_B&quot;}}"
                            data-action="analytics#push"
                            data-turbo="false"
                            href="/fr-fr/emplois/83962451.html"
                            title="D&#xE9;veloppeur mes - Outil Opcenter Execution Siemens H/F - MEENT"
                            class="no-underline outline-none focus-within:underline forwarder inline"
                            data-cy="offerTitle"
                                                        aria-label="Voir offre de D&#xE9;veloppeur mes - Outil Opcenter Execution Siemens H/F &#xE0; Lille - 59, chez MEENT, pour un CDI, en temps plein, T&#xE9;l&#xE9;travail partiel"
                        >
                            


<h3 class="inline">
    <p class="typo-l sm:small-group:typo-l sm:typo-xl">D&#xE9;veloppeur mes - Outil Opcenter Execution Siemens H/F</p>
        <p class="typo-s inline">MEENT</p>
</h3>

                        </a>

                </div>

        </header>
            <div class="mt-6 flex flex-col gap-3 sm:flex-row sm:small-group:flex-col">
                <div class="flex gap-3 flex-wrap">
                        <div
                            class="readonly tag-secondary-s w-fit border-0"
                            data-cy="localisationCard"
                        >
                            Lille - 59
                        </div>
                        <div
                            class="readonly tag-secondary-s w-fit border-0"
                            data-cy="contractCard"
                        >
                            CDI
                        </div>
                            <div
                                class="readonly tag-secondary-s border-0 w-fit"
                                data-cy="contractTag"
                            >
                                T&#xE9;l&#xE9;travail partiel
                            </div>
                </div>
            </div>

    </div>


            <div class="mt-6 sm:mt-3 flex sm:flex-row-reverse items-end justify-between sm:small-group:mt-6 sm:small-group:flex-row flex-wrap">
                    <span class="btn-outline-m group-hocus-within:bg-black group-hocus-within:border-transparent group-hocus-within:text-white group-hocus-within:opacity-100">Voir l’offre</span>
                    <div class="typo-s text-grey-500 pl-1 pt-1">il y a 13 jours</div>
            </div>
</div>
    </div>
</div>
                    </div>
                </li>
                <li data-id-storage-target="item"
                    data-hide-offer-target="item"
                    data-id-storage-item-id="83863734"
                    data-hide-offer-item-id-value="83863734">
                    

                    <div>
                        
<div
    class="group h-full overflow-hidden bg-white rounded-sm border border-grey-100 hover:border-grey-500 focus-within:outline focus-within:transition-none transition-border-color duration-100"
>
    <div class="h-full relative flex flex-col sm:flex-row sm:small-group:flex-col ">
        <div class="absolute right-6 sm:small-group:right-4 top-6 sm:small-group:top-[21px] z-[2] flex gap-4 sm:gap-0">
                <form action="/fr-fr/searchoffers/hideoffermodalframeview"
                      method="GET"
                      data-turbo-frame="exclude-criteria-frame">
                    <input type="hidden" name="offerId" value="83863734">
                    <input type="hidden" name="title" value="Analyste D&#xE9;veloppeur C# - Mainframe Confirm&#xE9; H/F">
                    <input type="hidden" name="company" value="Utigroup">
                    <button type="submit"
                            data-cy="hideOfferBtn"
                            data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;exclude_offer&quot;,&quot;event_info&quot;:&quot;Ic&#xF4;ne masquage d&#x27;offre&quot;}"
                            data-action="analytics#push"
                            class="btn-icon-no-outline-m sm:btn-icon-no-outline-l small-group:sm:btn-icon-no-outline-m"
                            aria-label="Masquer l'offre Analyste D&#xE9;veloppeur C# - Mainframe Confirm&#xE9; H/F">
                        <svg aria-hidden="true" class="size-3 sm:size-4 small-group:sm:size-3">
                            <use href="/svg/icons/disabled.svg#disabled"></use>
                        </svg>
                    </button>
                </form>
            

<turbo-frame id="bookmark-frame-card83863734">
    <form 
        action="/fr-fr/candidat/tooglebookmark"
        method="GET"
        data-controller="bookmark"
        data-bookmark-offer-id-value="83863734"
        data-bookmark-bookmarked-icon-value="/svg/icons/bookmark.svg#bookmark-active"
        data-bookmark-unbookmarked-icon-value="/svg/icons/bookmark.svg#bookmark"
        data-bookmark-bookmarked-class="text-pink-500"
        data-fetch-account-data-event-param="turbo:submit-end"
        data-action="fetch-account-data#refreshAfterNextTurboEvent"
    >
        <input type="hidden" name="idOffre" value="83863734">
        <input type="hidden" name="turboFrameId" value="bookmark-frame-card83863734">
        <input type="hidden" name="isFromToolbar" value="False"/>
        <button 
            class="btn-icon-no-outline-m sm:btn-icon-no-outline-l small-group:sm:btn-icon-no-outline-m"
            data-bookmark-target="button"
            data-analytics-values-param='{"event": "generic", "EventName" : "bookmark_add", "EventLibelle": "" }'
            data-action="analytics#push:stop"
            data-cy="bookmarkBtn"
        >
            <svg class="size-3 sm:size-4 small-group:sm:size-3">
                <use data-bookmark-target="icon" href="/svg/icons/bookmark.svg#bookmark"></use>
            </svg>
        </button>
    </form>

    


</turbo-frame>
        </div>
        



    <header
        class="
            max-h-[74px]
            min-h-[74px]
            sm:max-h-none
            relative
            w-full
            overflow-hidden
            sm:max-w-64
            sm:small-group:w-full
            sm:small-group:max-h-[74px]
            sm:small-group:max-w-none
        ">

            <div class="absolute inset-0 bg-black/5 z-[1]"></div>
            <img
                class="
                    size-full
                    object-cover
                    object-center
                "
                src="https://f.hellowork.com/media/companypage/203523/350_233/Utigroup_87424_63758414158696138162860539.jpeg"
                loading="lazy"
                alt="Utigroup recrutement">

        <div class="
                z-[2]
                absolute
                sm:top-auto
                inset-4
                sm:inset-6
                flex
                justify-center
                items-center
                w-[5.75rem]
                h-11
                rounded-xs
                bg-white
                sm:small-group:inset-4"
        >
                <img
                    loading="lazy"
                    src="https://f.hellowork.com/img/entreprises/203523.png?v=20261001112012"
                    alt="Utigroup recrutement"
                    title="Recrutement Utigroup"
                    class="
                        w-full
                        h-full
                        px-3
                        py-2
                        object-contain"
                >
        </div>
    </header>

        



<div
    
            data-controller="intersect"
            data-analytics-values-param="{&quot;event&quot;:&quot;generic_product&quot;,&quot;event_name&quot;:&quot;product.display&quot;,&quot;product_data&quot;:[{&quot;product_id&quot;:&quot;83863734&quot;,&quot;product_response_type&quot;:&quot;ATS&quot;,&quot;product_list&quot;:&quot;LO-Moteur-Exact&quot;,&quot;product_position&quot;:26,&quot;product_category&quot;:&quot;1&quot;,&quot;product_status&quot;:&quot;Suivi de candidature&quot;}]}"
            data-action="intersect:enter->analytics#push:once"
            class="flex flex-col justify-between size-full p-4 sm:p-6 sm:small-group:p-4 min-w-0"
    data-cy="serpCard"
>
    <div class="flex flex-col">
        <header class="w-10/12">
                <span
                    class="badge-m badge-purple mb-4 relative z-[2]"
                    data-cy="followUpTag"
                    title="Ce recruteur partage l&#x2019;avancement des candidatures."
                >
                    Suivi de candidature
                </span>
                <div>
                        <a 
                            data-analytics-values-param="{&quot;event&quot;:&quot;generic_product&quot;,&quot;event_name&quot;:&quot;productClick&quot;,&quot;product_data&quot;:[{&quot;product_id&quot;:&quot;83863734&quot;,&quot;product_response_type&quot;:&quot;ATS&quot;,&quot;product_list&quot;:&quot;LO-Moteur-Exact&quot;,&quot;product_position&quot;:26}],&quot;app_version_array&quot;:{&quot;one-time-password-V1.0&quot;:&quot;Version_B&quot;}}"
                            data-action="analytics#push"
                            data-turbo="false"
                            href="/fr-fr/emplois/83863734.html"
                            title="Analyste D&#xE9;veloppeur C# - Mainframe Confirm&#xE9; H/F - Utigroup"
                            class="no-underline outline-none focus-within:underline forwarder inline"
                            data-cy="offerTitle"
                                                        aria-label="Voir offre de Analyste D&#xE9;veloppeur C# - Mainframe Confirm&#xE9; H/F &#xE0; Lille - 59, chez Utigroup, super recruteur, pour un CDI, avec un salaire de 38&#x202F;000 - 45&#x202F;000 &#x20AC; / an, en temps plein, T&#xE9;l&#xE9;travail partiel"
                        >
                            


<h3 class="inline">
    <p class="typo-l sm:small-group:typo-l sm:typo-xl">Analyste D&#xE9;veloppeur C# - Mainframe Confirm&#xE9; H/F</p>
        <p class="typo-s inline">Utigroup</p>
</h3>

                        </a>

                        <div class="inline-flex gap-2 align-middle">
                            <div class="typo-s-bold">
                                
<div class="text-green-500 flex items-center" data-cy="superRecruiterBadge">
    <svg
        class="mr-1  w-3 h-[0.875rem]">
        <use href="/svg/icons/super-recruiter/super-recruiter.svg#super-recruiter"></use>
    </svg>
    <p  class="typo-s-bold">Super recruteur</p>
</div>
                            </div>
                        </div>
                </div>

        </header>
            <div class="mt-6 flex flex-col gap-3 sm:flex-row sm:small-group:flex-col">
                <div class="flex gap-3 flex-wrap">
                        <div
                            class="readonly tag-secondary-s w-fit border-0"
                            data-cy="localisationCard"
                        >
                            Lille - 59
                        </div>
                        <div
                            class="readonly tag-secondary-s w-fit border-0"
                            data-cy="contractCard"
                        >
                            CDI
                        </div>
                        <div class="readonly tag-secondary-s typo-s-bold w-fit border-0">38&#x202F;000 - 45&#x202F;000 &#x20AC; / an</div>
                            <div
                                class="readonly tag-secondary-s border-0 w-fit"
                                data-cy="contractTag"
                            >
                                T&#xE9;l&#xE9;travail partiel
                            </div>
                </div>
            </div>

    </div>


            <div class="mt-6 sm:mt-3 flex sm:flex-row-reverse items-end justify-between sm:small-group:mt-6 sm:small-group:flex-row flex-wrap">
                    <span class="btn-outline-m group-hocus-within:bg-black group-hocus-within:border-transparent group-hocus-within:text-white group-hocus-within:opacity-100">Voir l’offre</span>
                    <div class="typo-s text-grey-500 pl-1 pt-1">il y a 16 jours</div>
            </div>
</div>
    </div>
</div>
                    </div>
                </li>
                <li data-id-storage-target="item"
                    data-hide-offer-target="item"
                    data-id-storage-item-id="69495710"
                    data-hide-offer-item-id-value="69495710">
                    

                    <div>
                        
<div
    class="group h-full overflow-hidden bg-white rounded-sm border border-grey-100 hover:border-grey-500 focus-within:outline focus-within:transition-none transition-border-color duration-100"
>
    <div class="h-full relative flex flex-col sm:flex-row sm:small-group:flex-col ">
        <div class="absolute right-6 sm:small-group:right-4 top-6 sm:small-group:top-[21px] z-[2] flex gap-4 sm:gap-0">
                <form action="/fr-fr/searchoffers/hideoffermodalframeview"
                      method="GET"
                      data-turbo-frame="exclude-criteria-frame">
                    <input type="hidden" name="offerId" value="69495710">
                    <input type="hidden" name="title" value="D&#xE9;veloppeur Back-End Java - Lille H/F">
                    <input type="hidden" name="company" value="Groupe SII">
                    <button type="submit"
                            data-cy="hideOfferBtn"
                            data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;exclude_offer&quot;,&quot;event_info&quot;:&quot;Ic&#xF4;ne masquage d&#x27;offre&quot;}"
                            data-action="analytics#push"
                            class="btn-icon-no-outline-m sm:btn-icon-no-outline-l small-group:sm:btn-icon-no-outline-m"
                            aria-label="Masquer l'offre D&#xE9;veloppeur Back-End Java - Lille H/F">
                        <svg aria-hidden="true" class="size-3 sm:size-4 small-group:sm:size-3">
                            <use href="/svg/icons/disabled.svg#disabled"></use>
                        </svg>
                    </button>
                </form>
            

<turbo-frame id="bookmark-frame-card69495710">
    <form 
        action="/fr-fr/candidat/tooglebookmark"
        method="GET"
        data-controller="bookmark"
        data-bookmark-offer-id-value="69495710"
        data-bookmark-bookmarked-icon-value="/svg/icons/bookmark.svg#bookmark-active"
        data-bookmark-unbookmarked-icon-value="/svg/icons/bookmark.svg#bookmark"
        data-bookmark-bookmarked-class="text-pink-500"
        data-fetch-account-data-event-param="turbo:submit-end"
        data-action="fetch-account-data#refreshAfterNextTurboEvent"
    >
        <input type="hidden" name="idOffre" value="69495710">
        <input type="hidden" name="turboFrameId" value="bookmark-frame-card69495710">
        <input type="hidden" name="isFromToolbar" value="False"/>
        <button 
            class="btn-icon-no-outline-m sm:btn-icon-no-outline-l small-group:sm:btn-icon-no-outline-m"
            data-bookmark-target="button"
            data-analytics-values-param='{"event": "generic", "EventName" : "bookmark_add", "EventLibelle": "" }'
            data-action="analytics#push:stop"
            data-cy="bookmarkBtn"
        >
            <svg class="size-3 sm:size-4 small-group:sm:size-3">
                <use data-bookmark-target="icon" href="/svg/icons/bookmark.svg#bookmark"></use>
            </svg>
        </button>
    </form>

    


</turbo-frame>
        </div>
        



    <header
        class="
            max-h-[74px]
            min-h-[74px]
            sm:max-h-none
            relative
            w-full
            overflow-hidden
            sm:max-w-64
            sm:small-group:w-full
            sm:small-group:max-h-[74px]
            sm:small-group:max-w-none
        ">

            <div class="absolute inset-0 bg-black/5 z-[1]"></div>
            <img
                class="
                    size-full
                    object-cover
                    object-center
                "
                src="https://f.hellowork.com/media/companypage/197178/350_233/27351_63879632033605269927555238.jpg"
                loading="lazy"
                alt="Groupe SII recrutement">

        <div class="
                z-[2]
                absolute
                sm:top-auto
                inset-4
                sm:inset-6
                flex
                justify-center
                items-center
                w-[5.75rem]
                h-11
                rounded-xs
                bg-white
                sm:small-group:inset-4"
        >
                <img
                    loading="lazy"
                    src="https://f.hellowork.com/img/entreprises/197178.png?v=20261001112011"
                    alt="Groupe SII recrutement"
                    title="Recrutement Groupe SII"
                    class="
                        w-full
                        h-full
                        px-3
                        py-2
                        object-contain"
                >
        </div>
    </header>

        



<div
    
            data-controller="intersect"
            data-analytics-values-param="{&quot;event&quot;:&quot;generic_product&quot;,&quot;event_name&quot;:&quot;product.display&quot;,&quot;product_data&quot;:[{&quot;product_id&quot;:&quot;69495710&quot;,&quot;product_response_type&quot;:&quot;Smartapply_v2&quot;,&quot;product_list&quot;:&quot;LO-Moteur-Exact&quot;,&quot;product_position&quot;:27,&quot;product_category&quot;:&quot;1&quot;,&quot;product_status&quot;:&quot;Suivi de candidature&quot;}]}"
            data-action="intersect:enter->analytics#push:once"
            class="flex flex-col justify-between size-full p-4 sm:p-6 sm:small-group:p-4 min-w-0"
    data-cy="serpCard"
>
    <div class="flex flex-col">
        <header class="w-10/12">
                <span
                    class="badge-m badge-purple mb-4 relative z-[2]"
                    data-cy="followUpTag"
                    title="Ce recruteur partage l&#x2019;avancement des candidatures."
                >
                    Suivi de candidature
                </span>
                <div>
                        <a 
                            data-analytics-values-param="{&quot;event&quot;:&quot;generic_product&quot;,&quot;event_name&quot;:&quot;productClick&quot;,&quot;product_data&quot;:[{&quot;product_id&quot;:&quot;69495710&quot;,&quot;product_response_type&quot;:&quot;Smartapply_v2&quot;,&quot;product_list&quot;:&quot;LO-Moteur-Exact&quot;,&quot;product_position&quot;:27}],&quot;app_version_array&quot;:{&quot;one-time-password-V1.0&quot;:&quot;Version_B&quot;}}"
                            data-action="analytics#push"
                            data-turbo="false"
                            href="/fr-fr/emplois/69495710.html"
                            title="D&#xE9;veloppeur Back-End Java - Lille H/F - Groupe SII"
                            class="no-underline outline-none focus-within:underline forwarder inline"
                            data-cy="offerTitle"
                                                        aria-label="Voir offre de D&#xE9;veloppeur Back-End Java - Lille H/F &#xE0; Lille - 59, chez Groupe SII, super recruteur, pour un CDI, avec un salaire de 39&#x202F;000 - 45&#x202F;000 &#x20AC; / an, en temps plein"
                        >
                            


<h3 class="inline">
    <p class="typo-l sm:small-group:typo-l sm:typo-xl">D&#xE9;veloppeur Back-End Java - Lille H/F</p>
        <p class="typo-s inline">Groupe SII</p>
</h3>

                        </a>

                        <div class="inline-flex gap-2 align-middle">
                            <div class="typo-s-bold">
                                
<div class="text-green-500 flex items-center" data-cy="superRecruiterBadge">
    <svg
        class="mr-1  w-3 h-[0.875rem]">
        <use href="/svg/icons/super-recruiter/super-recruiter.svg#super-recruiter"></use>
    </svg>
    <p  class="typo-s-bold">Super recruteur</p>
</div>
                            </div>
                        </div>
                </div>

        </header>
            <div class="mt-6 flex flex-col gap-3 sm:flex-row sm:small-group:flex-col">
                <div class="flex gap-3 flex-wrap">
                        <div
                            class="readonly tag-secondary-s w-fit border-0"
                            data-cy="localisationCard"
                        >
                            Lille - 59
                        </div>
                        <div
                            class="readonly tag-secondary-s w-fit border-0"
                            data-cy="contractCard"
                        >
                            CDI
                        </div>
                        <div class="readonly tag-secondary-s typo-s-bold w-fit border-0">39&#x202F;000 - 45&#x202F;000 &#x20AC; / an</div>
                </div>
            </div>

    </div>


            <div class="mt-6 sm:mt-3 flex sm:flex-row-reverse items-end justify-between sm:small-group:mt-6 sm:small-group:flex-row flex-wrap">
                    <span class="btn-outline-m group-hocus-within:bg-black group-hocus-within:border-transparent group-hocus-within:text-white group-hocus-within:opacity-100">Voir l’offre</span>
                    <div class="typo-s text-grey-500 pl-1 pt-1">il y a 19 jours</div>
            </div>
</div>
    </div>
</div>
                    </div>
                </li>
                <li data-id-storage-target="item"
                    data-hide-offer-target="item"
                    data-id-storage-item-id="83445214"
                    data-hide-offer-item-id-value="83445214">
                    

                    <div>
                        
<div
    class="group h-full overflow-hidden bg-white rounded-sm border border-grey-100 hover:border-grey-500 focus-within:outline focus-within:transition-none transition-border-color duration-100"
>
    <div class="h-full relative flex flex-col sm:flex-row sm:small-group:flex-col ">
        <div class="absolute right-6 sm:small-group:right-4 top-6 sm:small-group:top-[21px] z-[2] flex gap-4 sm:gap-0">
                <form action="/fr-fr/searchoffers/hideoffermodalframeview"
                      method="GET"
                      data-turbo-frame="exclude-criteria-frame">
                    <input type="hidden" name="offerId" value="83445214">
                    <input type="hidden" name="title" value="D&#xE9;veloppeur IA H/F">
                    <input type="hidden" name="company" value="Navalia Executive Search">
                    <button type="submit"
                            data-cy="hideOfferBtn"
                            data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;exclude_offer&quot;,&quot;event_info&quot;:&quot;Ic&#xF4;ne masquage d&#x27;offre&quot;}"
                            data-action="analytics#push"
                            class="btn-icon-no-outline-m sm:btn-icon-no-outline-l small-group:sm:btn-icon-no-outline-m"
                            aria-label="Masquer l'offre D&#xE9;veloppeur IA H/F">
                        <svg aria-hidden="true" class="size-3 sm:size-4 small-group:sm:size-3">
                            <use href="/svg/icons/disabled.svg#disabled"></use>
                        </svg>
                    </button>
                </form>
            

<turbo-frame id="bookmark-frame-card83445214">
    <form 
        action="/fr-fr/candidat/tooglebookmark"
        method="GET"
        data-controller="bookmark"
        data-bookmark-offer-id-value="83445214"
        data-bookmark-bookmarked-icon-value="/svg/icons/bookmark.svg#bookmark-active"
        data-bookmark-unbookmarked-icon-value="/svg/icons/bookmark.svg#bookmark"
        data-bookmark-bookmarked-class="text-pink-500"
        data-fetch-account-data-event-param="turbo:submit-end"
        data-action="fetch-account-data#refreshAfterNextTurboEvent"
    >
        <input type="hidden" name="idOffre" value="83445214">
        <input type="hidden" name="turboFrameId" value="bookmark-frame-card83445214">
        <input type="hidden" name="isFromToolbar" value="False"/>
        <button 
            class="btn-icon-no-outline-m sm:btn-icon-no-outline-l small-group:sm:btn-icon-no-outline-m"
            data-bookmark-target="button"
            data-analytics-values-param='{"event": "generic", "EventName" : "bookmark_add", "EventLibelle": "" }'
            data-action="analytics#push:stop"
            data-cy="bookmarkBtn"
        >
            <svg class="size-3 sm:size-4 small-group:sm:size-3">
                <use data-bookmark-target="icon" href="/svg/icons/bookmark.svg#bookmark"></use>
            </svg>
        </button>
    </form>

    


</turbo-frame>
        </div>
        



    <header
        class="
            max-h-[74px]
            min-h-[74px]
            sm:max-h-none
            relative
            w-full
            overflow-hidden
            sm:max-w-64
            sm:small-group:w-full
            sm:small-group:max-h-[74px]
            sm:small-group:max-w-none
        ">

            <div
                class="
                    relative
                    h-[74px]
                    sm:h-full
                    bg-pumpkin-100
                    text-pumpkin-200
                ">
                <svg class="absolute
                        -left-[110px] sm:-left-[120px]
                        -bottom-[100px] sm:bottom-[20px] sm:small-group:-bottom-[95px]
                        w-[617px] sm:w-[547px]
                        h-[301px] sm:h-[267px]
                        opacity-20 -rotate-[15deg]">
                    <use href="/svg/illustrations/chevron.svg#chevron"></use>
                </svg>
            </div>

        <div class="
                z-[2]
                absolute
                sm:top-auto
                inset-4
                sm:inset-6
                flex
                justify-center
                items-center
                w-[5.75rem]
                h-11
                rounded-xs
                bg-white
                sm:small-group:inset-4"
        >
                <img
                    loading="lazy"
                    src="https://f.hellowork.com/img/entreprises/210683.png?v=20260604132627"
                    alt="Navalia Executive Search recrutement"
                    title="Recrutement Navalia Executive Search"
                    class="
                        w-full
                        h-full
                        px-3
                        py-2
                        object-contain"
                >
        </div>
    </header>

        



<div
    
            data-controller="intersect"
            data-analytics-values-param="{&quot;event&quot;:&quot;generic_product&quot;,&quot;event_name&quot;:&quot;product.display&quot;,&quot;product_data&quot;:[{&quot;product_id&quot;:&quot;83445214&quot;,&quot;product_response_type&quot;:&quot;ATS&quot;,&quot;product_list&quot;:&quot;LO-Moteur-Exact&quot;,&quot;product_position&quot;:28,&quot;product_category&quot;:&quot;1&quot;,&quot;product_status&quot;:&quot;Suivi de candidature&quot;}]}"
            data-action="intersect:enter->analytics#push:once"
            class="flex flex-col justify-between size-full p-4 sm:p-6 sm:small-group:p-4 min-w-0"
    data-cy="serpCard"
>
    <div class="flex flex-col">
        <header class="w-10/12">
                <span
                    class="badge-m badge-purple mb-4 relative z-[2]"
                    data-cy="followUpTag"
                    title="Ce recruteur partage l&#x2019;avancement des candidatures."
                >
                    Suivi de candidature
                </span>
                <div>
                        <a 
                            data-analytics-values-param="{&quot;event&quot;:&quot;generic_product&quot;,&quot;event_name&quot;:&quot;productClick&quot;,&quot;product_data&quot;:[{&quot;product_id&quot;:&quot;83445214&quot;,&quot;product_response_type&quot;:&quot;ATS&quot;,&quot;product_list&quot;:&quot;LO-Moteur-Exact&quot;,&quot;product_position&quot;:28}],&quot;app_version_array&quot;:{&quot;one-time-password-V1.0&quot;:&quot;Version_B&quot;}}"
                            data-action="analytics#push"
                            data-turbo="false"
                            href="/fr-fr/emplois/83445214.html"
                            title="D&#xE9;veloppeur IA H/F - Navalia Executive Search"
                            class="no-underline outline-none focus-within:underline forwarder inline"
                            data-cy="offerTitle"
                                                        aria-label="Voir offre de D&#xE9;veloppeur IA H/F &#xE0; Lille - 59, chez Navalia Executive Search, pour un CDI, en temps plein"
                        >
                            


<h3 class="inline">
    <p class="typo-l sm:small-group:typo-l sm:typo-xl">D&#xE9;veloppeur IA H/F</p>
        <p class="typo-s inline">Navalia Executive Search</p>
</h3>

                        </a>

                </div>

        </header>
            <div class="mt-6 flex flex-col gap-3 sm:flex-row sm:small-group:flex-col">
                <div class="flex gap-3 flex-wrap">
                        <div
                            class="readonly tag-secondary-s w-fit border-0"
                            data-cy="localisationCard"
                        >
                            Lille - 59
                        </div>
                        <div
                            class="readonly tag-secondary-s w-fit border-0"
                            data-cy="contractCard"
                        >
                            CDI
                        </div>
                </div>
            </div>

    </div>


            <div class="mt-6 sm:mt-3 flex sm:flex-row-reverse items-end justify-between sm:small-group:mt-6 sm:small-group:flex-row flex-wrap">
                    <span class="btn-outline-m group-hocus-within:bg-black group-hocus-within:border-transparent group-hocus-within:text-white group-hocus-within:opacity-100">Voir l’offre</span>
                    <div class="typo-s text-grey-500 pl-1 pt-1">il y a 28 jours</div>
            </div>
</div>
    </div>
</div>
                    </div>
                </li>
                <li data-id-storage-target="item"
                    data-hide-offer-target="item"
                    data-id-storage-item-id="83967982"
                    data-hide-offer-item-id-value="83967982">
                    

                    <div>
                        
<div
    class="group h-full overflow-hidden bg-white rounded-sm border border-grey-100 hover:border-grey-500 focus-within:outline focus-within:transition-none transition-border-color duration-100"
>
    <div class="h-full relative flex flex-col sm:flex-row sm:small-group:flex-col ">
        <div class="absolute right-6 sm:small-group:right-4 top-6 sm:small-group:top-[21px] z-[2] flex gap-4 sm:gap-0">
                <form action="/fr-fr/searchoffers/hideoffermodalframeview"
                      method="GET"
                      data-turbo-frame="exclude-criteria-frame">
                    <input type="hidden" name="offerId" value="83967982">
                    <input type="hidden" name="title" value="5162 - D&#xE9;veloppeur Symfony Senior - CDI - Lille 59 H/F">
                    <input type="hidden" name="company" value="Cabinet de recrutement de travailleurs handicap&#xE9;s">
                    <button type="submit"
                            data-cy="hideOfferBtn"
                            data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;exclude_offer&quot;,&quot;event_info&quot;:&quot;Ic&#xF4;ne masquage d&#x27;offre&quot;}"
                            data-action="analytics#push"
                            class="btn-icon-no-outline-m sm:btn-icon-no-outline-l small-group:sm:btn-icon-no-outline-m"
                            aria-label="Masquer l'offre 5162 - D&#xE9;veloppeur Symfony Senior - CDI - Lille 59 H/F">
                        <svg aria-hidden="true" class="size-3 sm:size-4 small-group:sm:size-3">
                            <use href="/svg/icons/disabled.svg#disabled"></use>
                        </svg>
                    </button>
                </form>
            

<turbo-frame id="bookmark-frame-card83967982">
    <form 
        action="/fr-fr/candidat/tooglebookmark"
        method="GET"
        data-controller="bookmark"
        data-bookmark-offer-id-value="83967982"
        data-bookmark-bookmarked-icon-value="/svg/icons/bookmark.svg#bookmark-active"
        data-bookmark-unbookmarked-icon-value="/svg/icons/bookmark.svg#bookmark"
        data-bookmark-bookmarked-class="text-pink-500"
        data-fetch-account-data-event-param="turbo:submit-end"
        data-action="fetch-account-data#refreshAfterNextTurboEvent"
    >
        <input type="hidden" name="idOffre" value="83967982">
        <input type="hidden" name="turboFrameId" value="bookmark-frame-card83967982">
        <input type="hidden" name="isFromToolbar" value="False"/>
        <button 
            class="btn-icon-no-outline-m sm:btn-icon-no-outline-l small-group:sm:btn-icon-no-outline-m"
            data-bookmark-target="button"
            data-analytics-values-param='{"event": "generic", "EventName" : "bookmark_add", "EventLibelle": "" }'
            data-action="analytics#push:stop"
            data-cy="bookmarkBtn"
        >
            <svg class="size-3 sm:size-4 small-group:sm:size-3">
                <use data-bookmark-target="icon" href="/svg/icons/bookmark.svg#bookmark"></use>
            </svg>
        </button>
    </form>

    


</turbo-frame>
        </div>
        



    <header
        class="
            max-h-[74px]
            min-h-[74px]
            sm:max-h-none
            relative
            w-full
            overflow-hidden
            sm:max-w-64
            sm:small-group:w-full
            sm:small-group:max-h-[74px]
            sm:small-group:max-w-none
        ">

            <div class="absolute inset-0 bg-black/5 z-[1]"></div>
            <img
                class="
                    size-full
                    object-cover
                    object-center
                "
                src="https://f.hellowork.com/media/companypage/193741/350_233/Cabinetderecrutementdetravailleurshandicaps_82064_63762890239622578066387825.jpeg"
                loading="lazy"
                alt="Cabinet de recrutement de travailleurs handicap&#xE9;s recrutement">

        <div class="
                z-[2]
                absolute
                sm:top-auto
                inset-4
                sm:inset-6
                flex
                justify-center
                items-center
                w-[5.75rem]
                h-11
                rounded-xs
                bg-white
                sm:small-group:inset-4"
        >
                <img
                    loading="lazy"
                    src="https://f.hellowork.com/img/entreprises/193741.png?v=20260604132627"
                    alt="Cabinet de recrutement de travailleurs handicap&#xE9;s recrutement"
                    title="Recrutement Cabinet de recrutement de travailleurs handicap&#xE9;s"
                    class="
                        w-full
                        h-full
                        px-3
                        py-2
                        object-contain"
                >
        </div>
    </header>

        



<div
    
            data-controller="intersect"
            data-analytics-values-param="{&quot;event&quot;:&quot;generic_product&quot;,&quot;event_name&quot;:&quot;product.display&quot;,&quot;product_data&quot;:[{&quot;product_id&quot;:&quot;83967982&quot;,&quot;product_response_type&quot;:&quot;ATS&quot;,&quot;product_list&quot;:&quot;LO-Moteur-Exact&quot;,&quot;product_position&quot;:29,&quot;product_category&quot;:&quot;1&quot;,&quot;product_status&quot;:&quot;Suivi de candidature&quot;}]}"
            data-action="intersect:enter->analytics#push:once"
            class="flex flex-col justify-between size-full p-4 sm:p-6 sm:small-group:p-4 min-w-0"
    data-cy="serpCard"
>
    <div class="flex flex-col">
        <header class="w-10/12">
                <span
                    class="badge-m badge-purple mb-4 relative z-[2]"
                    data-cy="followUpTag"
                    title="Ce recruteur partage l&#x2019;avancement des candidatures."
                >
                    Suivi de candidature
                </span>
                <div>
                        <a 
                            data-analytics-values-param="{&quot;event&quot;:&quot;generic_product&quot;,&quot;event_name&quot;:&quot;productClick&quot;,&quot;product_data&quot;:[{&quot;product_id&quot;:&quot;83967982&quot;,&quot;product_response_type&quot;:&quot;ATS&quot;,&quot;product_list&quot;:&quot;LO-Moteur-Exact&quot;,&quot;product_position&quot;:29}],&quot;app_version_array&quot;:{&quot;one-time-password-V1.0&quot;:&quot;Version_B&quot;}}"
                            data-action="analytics#push"
                            data-turbo="false"
                            href="/fr-fr/emplois/83967982.html"
                            title="5162 - D&#xE9;veloppeur Symfony Senior - CDI - Lille 59 H/F - Cabinet de recrutement de travailleurs handicap&#xE9;s"
                            class="no-underline outline-none focus-within:underline forwarder inline"
                            data-cy="offerTitle"
                                                        aria-label="Voir offre de 5162 - D&#xE9;veloppeur Symfony Senior - CDI - Lille 59 H/F &#xE0; Lille - 59, chez Cabinet de recrutement de travailleurs handicap&#xE9;s, pour un CDI, avec un salaire de 35&#x202F;000 - 50&#x202F;000 &#x20AC; / an, en temps plein"
                        >
                            


<h3 class="inline">
    <p class="typo-l sm:small-group:typo-l sm:typo-xl">5162 - D&#xE9;veloppeur Symfony Senior - CDI - Lille 59 H/F</p>
        <p class="typo-s inline">Cabinet de recrutement de travailleurs handicap&#xE9;s</p>
</h3>

                        </a>

                </div>

        </header>
            <div class="mt-6 flex flex-col gap-3 sm:flex-row sm:small-group:flex-col">
                <div class="flex gap-3 flex-wrap">
                        <div
                            class="readonly tag-secondary-s w-fit border-0"
                            data-cy="localisationCard"
                        >
                            Lille - 59
                        </div>
                        <div
                            class="readonly tag-secondary-s w-fit border-0"
                            data-cy="contractCard"
                        >
                            CDI
                        </div>
                        <div class="readonly tag-secondary-s typo-s-bold w-fit border-0">35&#x202F;000 - 50&#x202F;000 &#x20AC; / an</div>
                </div>
            </div>

    </div>


            <div class="mt-6 sm:mt-3 flex sm:flex-row-reverse items-end justify-between sm:small-group:mt-6 sm:small-group:flex-row flex-wrap">
                    <span class="btn-outline-m group-hocus-within:bg-black group-hocus-within:border-transparent group-hocus-within:text-white group-hocus-within:opacity-100">Voir l’offre</span>
                    <div class="typo-s text-grey-500 pl-1 pt-1">il y a 13 jours</div>
            </div>
</div>
    </div>
</div>
                    </div>
                </li>
                <li data-id-storage-target="item"
                    data-hide-offer-target="item"
                    data-id-storage-item-id="84387452"
                    data-hide-offer-item-id-value="84387452">
                    

                    <div>
                        
<div
    class="group h-full overflow-hidden bg-white rounded-sm border border-grey-100 hover:border-grey-500 focus-within:outline focus-within:transition-none transition-border-color duration-100"
>
    <div class="h-full relative flex flex-col sm:flex-row sm:small-group:flex-col ">
        <div class="absolute right-6 sm:small-group:right-4 top-6 sm:small-group:top-[21px] z-[2] flex gap-4 sm:gap-0">
                <form action="/fr-fr/searchoffers/hideoffermodalframeview"
                      method="GET"
                      data-turbo-frame="exclude-criteria-frame">
                    <input type="hidden" name="offerId" value="84387452">
                    <input type="hidden" name="title" value="D&#xE9;veloppeur .Net H/F">
                    <input type="hidden" name="company" value="HOUSE OF ABY">
                    <button type="submit"
                            data-cy="hideOfferBtn"
                            data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;exclude_offer&quot;,&quot;event_info&quot;:&quot;Ic&#xF4;ne masquage d&#x27;offre&quot;}"
                            data-action="analytics#push"
                            class="btn-icon-no-outline-m sm:btn-icon-no-outline-l small-group:sm:btn-icon-no-outline-m"
                            aria-label="Masquer l'offre D&#xE9;veloppeur .Net H/F">
                        <svg aria-hidden="true" class="size-3 sm:size-4 small-group:sm:size-3">
                            <use href="/svg/icons/disabled.svg#disabled"></use>
                        </svg>
                    </button>
                </form>
            

<turbo-frame id="bookmark-frame-card84387452">
    <form 
        action="/fr-fr/candidat/tooglebookmark"
        method="GET"
        data-controller="bookmark"
        data-bookmark-offer-id-value="84387452"
        data-bookmark-bookmarked-icon-value="/svg/icons/bookmark.svg#bookmark-active"
        data-bookmark-unbookmarked-icon-value="/svg/icons/bookmark.svg#bookmark"
        data-bookmark-bookmarked-class="text-pink-500"
        data-fetch-account-data-event-param="turbo:submit-end"
        data-action="fetch-account-data#refreshAfterNextTurboEvent"
    >
        <input type="hidden" name="idOffre" value="84387452">
        <input type="hidden" name="turboFrameId" value="bookmark-frame-card84387452">
        <input type="hidden" name="isFromToolbar" value="False"/>
        <button 
            class="btn-icon-no-outline-m sm:btn-icon-no-outline-l small-group:sm:btn-icon-no-outline-m"
            data-bookmark-target="button"
            data-analytics-values-param='{"event": "generic", "EventName" : "bookmark_add", "EventLibelle": "" }'
            data-action="analytics#push:stop"
            data-cy="bookmarkBtn"
        >
            <svg class="size-3 sm:size-4 small-group:sm:size-3">
                <use data-bookmark-target="icon" href="/svg/icons/bookmark.svg#bookmark"></use>
            </svg>
        </button>
    </form>

    


</turbo-frame>
        </div>
        



    <header
        class="
            max-h-[74px]
            min-h-[74px]
            sm:max-h-none
            relative
            w-full
            overflow-hidden
            sm:max-w-64
            sm:small-group:w-full
            sm:small-group:max-h-[74px]
            sm:small-group:max-w-none
        ">

            <div class="absolute inset-0 bg-black/5 z-[1]"></div>
            <img
                class="
                    size-full
                    object-cover
                    object-center
                "
                src="https://f.hellowork.com/media/companypage/206024/350_233/206024_63925952118291958214407342.jpg"
                loading="lazy"
                alt="HOUSE OF ABY recrutement">

        <div class="
                z-[2]
                absolute
                sm:top-auto
                inset-4
                sm:inset-6
                flex
                justify-center
                items-center
                w-[5.75rem]
                h-11
                rounded-xs
                bg-white
                sm:small-group:inset-4"
        >
                <img
                    loading="lazy"
                    src="https://f.hellowork.com/img/entreprises/206024.png?v=20261001112013"
                    alt="HOUSE OF ABY recrutement"
                    title="Recrutement HOUSE OF ABY"
                    class="
                        w-full
                        h-full
                        px-3
                        py-2
                        object-contain"
                >
        </div>
    </header>

        



<div
    
            data-controller="intersect"
            data-analytics-values-param="{&quot;event&quot;:&quot;generic_product&quot;,&quot;event_name&quot;:&quot;product.display&quot;,&quot;product_data&quot;:[{&quot;product_id&quot;:&quot;84387452&quot;,&quot;product_response_type&quot;:&quot;UrlWithForm&quot;,&quot;product_list&quot;:&quot;LO-Moteur-Exact&quot;,&quot;product_position&quot;:30,&quot;product_category&quot;:&quot;1&quot;,&quot;product_status&quot;:&quot;NotDefined&quot;}]}"
            data-action="intersect:enter->analytics#push:once"
            class="flex flex-col justify-between size-full p-4 sm:p-6 sm:small-group:p-4 min-w-0"
    data-cy="serpCard"
>
    <div class="flex flex-col">
        <header class="w-10/12">
                <div>
                        <a 
                            data-analytics-values-param="{&quot;event&quot;:&quot;generic_product&quot;,&quot;event_name&quot;:&quot;productClick&quot;,&quot;product_data&quot;:[{&quot;product_id&quot;:&quot;84387452&quot;,&quot;product_response_type&quot;:&quot;UrlWithForm&quot;,&quot;product_list&quot;:&quot;LO-Moteur-Exact&quot;,&quot;product_position&quot;:30}],&quot;app_version_array&quot;:{&quot;one-time-password-V1.0&quot;:&quot;Version_B&quot;}}"
                            data-action="analytics#push"
                            data-turbo="false"
                            href="/fr-fr/emplois/84387452.html"
                            title="D&#xE9;veloppeur .Net H/F - HOUSE OF ABY"
                            class="no-underline outline-none focus-within:underline forwarder inline"
                            data-cy="offerTitle"
                                                        aria-label="Voir offre de D&#xE9;veloppeur .Net H/F &#xE0; Lille - 59, chez HOUSE OF ABY, pour un CDI, avec un salaire de 38&#x202F;000 &#x20AC; / an, en temps plein"
                        >
                            


<h3 class="inline">
    <p class="typo-l sm:small-group:typo-l sm:typo-xl">D&#xE9;veloppeur .Net H/F</p>
        <p class="typo-s inline">HOUSE OF ABY</p>
</h3>

                        </a>

                </div>

        </header>
            <div class="mt-6 flex flex-col gap-3 sm:flex-row sm:small-group:flex-col">
                <div class="flex gap-3 flex-wrap">
                        <div
                            class="readonly tag-secondary-s w-fit border-0"
                            data-cy="localisationCard"
                        >
                            Lille - 59
                        </div>
                        <div
                            class="readonly tag-secondary-s w-fit border-0"
                            data-cy="contractCard"
                        >
                            CDI
                        </div>
                        <div class="readonly tag-secondary-s typo-s-bold w-fit border-0">38&#x202F;000 &#x20AC; / an</div>
                </div>
            </div>

    </div>


            <div class="mt-6 sm:mt-3 flex sm:flex-row-reverse items-end justify-between sm:small-group:mt-6 sm:small-group:flex-row flex-wrap">
                    <span class="btn-outline-m group-hocus-within:bg-black group-hocus-within:border-transparent group-hocus-within:text-white group-hocus-within:opacity-100">Voir l’offre</span>
                    <div class="typo-s text-grey-500 pl-1 pt-1">il y a 1 jour</div>
            </div>
</div>
    </div>
</div>
                    </div>
                </li>
        </ul>

            <div data-hide-offer-target="counterContainer" class="hidden">
                <div class="rounded-sm px-4 py-3 border border-grey-100 flex items-center gap-3">
                    <svg class="size-4">
                        <use href="/svg/icons/tooltip.svg#tooltip"></use>
                    </svg>
                    <span class="typo-s">
                        Nous avons masqué <span data-hide-offer-target="counter">0 offre</span> que vous avez décidé de ne plus voir.
                    </span>
                </div>
            </div>
            <turbo-frame id="exclude-criteria-frame"></turbo-frame>
    </div>

            </section>
           
            <section class="col-span-12 2xl:col-start-2 2xl:col-span-10 flex justify-center mt-10 sm:mt-12"> 
                

<nav class="hidden sm:flex gap-2 typo-m flex-wrap">

    




<button
    class="
        flex
        items-center
        justify-center
        w-10 !h-10
        !rounded-sm
        !bg-white
        !text-black
        hocus:!bg-black
        hocus:!text-white
        hocus:!opacity-100
        transition-colors
        duration-100
        focus-visible:duration-0
        pointer-events-none opacity-40
    "
    name="p"
    form="searchForm"
    data-turbo-frame=turboSerp
    formaction=""
    value="0"
    type="submit"
    aria-disabled="true">
    <svg class="!size-3 !mr-0 !static">
        <use href="/svg/icons/arrow.svg#left" />
    </svg>
</button>

    <button
        disabled
        class="
            !block 
            !min-w-[2.5rem] 
            !h-10 
            !px-3 
            !rounded-sm 
            !tracking-normal
            hocus:!bg-black 
            hocus:!text-white 
            hocus:!opacity-100
            transition-colors
            duration-100
            focus-visible:duration-0
            !bg-black !text-white 
        "
        name="p"
        form="searchForm"
        data-turbo-frame="turboSerp"
        formaction=""
        value="1"
        type="submit">
        1
    </button>


    <button
        
        class="
            !block 
            !min-w-[2.5rem] 
            !h-10 
            !px-3 
            !rounded-sm 
            !tracking-normal
            hocus:!bg-black 
            hocus:!text-white 
            hocus:!opacity-100
            transition-colors
            duration-100
            focus-visible:duration-0
            !bg-white !text-black 
        "
        name="p"
        form="searchForm"
        data-turbo-frame="turboSerp"
        formaction=""
        value="2"
        type="submit">
        2
    </button>


    <button
        
        class="
            !block 
            !min-w-[2.5rem] 
            !h-10 
            !px-3 
            !rounded-sm 
            !tracking-normal
            hocus:!bg-black 
            hocus:!text-white 
            hocus:!opacity-100
            transition-colors
            duration-100
            focus-visible:duration-0
            !bg-white !text-black 
        "
        name="p"
        form="searchForm"
        data-turbo-frame="turboSerp"
        formaction=""
        value="3"
        type="submit">
        3
    </button>


    <button
        
        class="
            !block 
            !min-w-[2.5rem] 
            !h-10 
            !px-3 
            !rounded-sm 
            !tracking-normal
            hocus:!bg-black 
            hocus:!text-white 
            hocus:!opacity-100
            transition-colors
            duration-100
            focus-visible:duration-0
            !bg-white !text-black 
        "
        name="p"
        form="searchForm"
        data-turbo-frame="turboSerp"
        formaction=""
        value="4"
        type="submit">
        4
    </button>


    <button
        
        class="
            !block 
            !min-w-[2.5rem] 
            !h-10 
            !px-3 
            !rounded-sm 
            !tracking-normal
            hocus:!bg-black 
            hocus:!text-white 
            hocus:!opacity-100
            transition-colors
            duration-100
            focus-visible:duration-0
            !bg-white !text-black 
        "
        name="p"
        form="searchForm"
        data-turbo-frame="turboSerp"
        formaction=""
        value="5"
        type="submit">
        5
    </button>


    <button
        
        class="
            !block 
            !min-w-[2.5rem] 
            !h-10 
            !px-3 
            !rounded-sm 
            !tracking-normal
            hocus:!bg-black 
            hocus:!text-white 
            hocus:!opacity-100
            transition-colors
            duration-100
            focus-visible:duration-0
            !bg-white !text-black 
        "
        name="p"
        form="searchForm"
        data-turbo-frame="turboSerp"
        formaction=""
        value="6"
        type="submit">
        6
    </button>


    <button
        
        class="
            !block 
            !min-w-[2.5rem] 
            !h-10 
            !px-3 
            !rounded-sm 
            !tracking-normal
            hocus:!bg-black 
            hocus:!text-white 
            hocus:!opacity-100
            transition-colors
            duration-100
            focus-visible:duration-0
            !bg-white !text-black 
        "
        name="p"
        form="searchForm"
        data-turbo-frame="turboSerp"
        formaction=""
        value="7"
        type="submit">
        7
    </button>


    <div class="flex items-center justify-center w-10 h-10 rounded-sm bg-white">
        ...
    </div>


    <button
        
        class="
            !block 
            !min-w-[2.5rem] 
            !h-10 
            !px-3 
            !rounded-sm 
            !tracking-normal
            hocus:!bg-black 
            hocus:!text-white 
            hocus:!opacity-100
            transition-colors
            duration-100
            focus-visible:duration-0
            !bg-white !text-black 
        "
        name="p"
        form="searchForm"
        data-turbo-frame="turboSerp"
        formaction=""
        value="21"
        type="submit">
        21
    </button>



<button
    class="
        flex
        items-center
        justify-center
        w-10 !h-10
        !rounded-sm
        !bg-white
        !text-black
        hocus:!bg-black
        hocus:!text-white
        hocus:!opacity-100
        transition-colors
        duration-100
        focus-visible:duration-0
        
    "
    name="p"
    form="searchForm"
    data-turbo-frame=turboSerp
    formaction=""
    value="2"
    type="submit"
    >
    <svg class="!size-3 !mr-0 !static">
        <use href="/svg/icons/arrow.svg#right" />
    </svg>
</button>

</nav>
<nav class="flex sm:hidden typo-m flex-wrap">

    




<button
    class="
        flex
        items-center
        justify-center
        w-11 !h-11
        !rounded-sm
        !bg-white
        !text-black
        hocus:!bg-black
        hocus:!text-white
        hocus:!opacity-100
        transition-colors
        duration-100
        focus-visible:duration-0
        pointer-events-none opacity-40
    "
    name="p"
    form="searchForm"
    data-turbo-frame=turboSerp
    formaction=""
    value="0"
    type="submit"
    aria-disabled="true">
    <svg class="!size-3 !mr-0 !static">
        <use href="/svg/icons/arrow.svg#left" />
    </svg>
</button>

<div data-controller="resize toggle-attribute auto-submittable" class="flex items-center h-11 !outline-1 !outline-black !outline rounded-sm ml-6 py-2 px-3">
    <input
        class="rounded-sm input-number-no-spinner outline-none text-center min-w-[2ch]"
        type="number"
        inputmode="numeric"
        min="1"
        max="21"
        data-resize-target="input"
        data-toggle-attribute-target="element"
        data-toggle-attribute-attribute-param="name"
        data-toggle-attribute-value-param="p"
        data-action="resize#setWidth
                     focusin->toggle-attribute#setAttribute
                     blur->auto-submittable#formSubmit
                     keypress.enter->auto-submittable#formSubmit"
        form="searchForm"
        value="1"/>
    <button
        class="hidden"
        formaction=""
        form="searchForm"
        data-turbo-frame="turboSerp"
        data-auto-submittable-target="submitter"
    >
    </button>
</div>

    <span class="flex items-center w-auto h-auto mx-3">
        sur
    </span>


    <span class="flex items-center w-auto h-auto mr-6">
        21
    </span>



<button
    class="
        flex
        items-center
        justify-center
        w-11 !h-11
        !rounded-sm
        !bg-white
        !text-black
        hocus:!bg-black
        hocus:!text-white
        hocus:!opacity-100
        transition-colors
        duration-100
        focus-visible:duration-0
        
    "
    name="p"
    form="searchForm"
    data-turbo-frame=turboSerp
    formaction=""
    value="2"
    type="submit"
    >
    <svg class="!size-3 !mr-0 !static">
        <use href="/svg/icons/arrow.svg#right" />
    </svg>
</button>
</nav>
            </section>
        </div>

            <div class="xl:col-span-1 xl:col-start-14 xl:relative">
                <div
    class="
        flex
        items-end
        xl:items-center
        flex-col
        fixed
        bottom-4
        right-4
        xl:sticky
        xl:top-[85%]
        z-10
    "
>
    <button
        data-controller="toggle"
        data-toggle-toggled-class="!visible"
        data-toggle-target="toToggle"
        data-scroll-to-top-behavior-param="smooth"
        data-analytics-values-param='{"event": "generic", "EventName": "top"}'
        data-action="
            analytics#push
            scroll-to-top#scroll
            intersect:buttonsBar:exit@document->toggle#add 
            intersect:buttonsBar:enter@document->toggle#remove
        "
        class="
            btn-icon-primary-l
            text-white
            mb-3
            transition-opacity
            opacity-25
            duration-600
            collapse
            ease-in-out
            hover:opacity-100
        "
    >
        <svg class="size-4">
            <use href="/svg/icons/arrow.svg#up"></use>
        </svg>
    </button>
    <button
        data-controller="input-checker toggle"
        data-input-checker-input-value="#alert-modal"
        data-toggle-toggled-class="!flex !max-w-[44px] pr-[14px]"
        data-toggle-target="toToggle"
        data-cy="createAlertBtn"
        data-analytics-values-param='{"event": "generic", "EventName": "alert_load", "EventLibelle": "serp-sticky" }'
        data-action="
            analytics#push
            input-checker#check
            intersect:buttonsBar:exit@document->toggle#add
            intersect:buttonsBar:enter@document->toggle#remove
        "
        class="
            btn-primary-l
            flex
            lg:hidden
            justify-end
            w-auto
            max-w-96
            bg-yellow-300
            transition-all
            text-black
            duration-600
            ease-in-out
            overflow-hidden
            whitespace-nowrap
        "
    >
        <span
            data-controller="toggle"
            data-toggle-toggled-class="!opacity-0"
            data-toggle-target="toToggle"
            data-action="
                intersect:buttonsBar:exit@document->toggle#add 
                intersect:buttonsBar:enter@document->toggle#remove
            "
            class="
                opacity-100
                transition-opacity
                duration-100
                ease-in-out
            "
        >
            Créer mon alerte
        </span>
        <div class="block">
            <svg class="size-4" aria-hidden="true">
                <use href="/svg/services/alert.svg#alert"></use>
            </svg>
        </div>
    </button>
</div>

            </div>
    </section>

    <div data-controller="clear-inputs">
        


<div 
	data-controller="input-checker auto-submittable clear-inputs"
  data-clear-inputs-all-value="true"
	data-auto-submittable-name-value="searchForm"
	data-input-checker-input-value="#allFilters"
	class="group"
	>
	<input type="checkbox" hidden id="allFilters" class="peer">
	<div 
		data-action="click->toggle-on-body#toggle:self click->input-checker#uncheck:self click->state#replace:self"
		class="
			block
			fixed
			inset-0 
			z-50 
			bg-black/60 
			lg:bg-black/40 
			backdrop-blur 
			lg:backdrop-blur-md 
			items-end 
			lg:items-center 
			invisible
			peer-checked:visible
		"
	>
		<div class="px-0 lg:px-6 layout-wrapper h-full">
			<div 
				class="layout-outer-grid h-full content-end lg:content-center"
				data-toggle-on-body-force-param="false"
				data-action="
					click->toggle-on-body#toggle:self
					click->input-checker#uncheck:self
					click->state#replace:self
					click->analytics#push:self"
        		data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;filter_skip&quot;,&quot;event_info&quot;:&quot;all&quot;,&quot;cta&quot;:&quot;click-outside&quot;}"
				>
				<div data-controller="focus-trap"  
					data-focus-trap-target="container" 
					role="dialog"
					data-cy="modalContainer"
                    class="
						bg-white
						flex 
						flex-col 
						shadow-modal 
						col-span-full 
						lg:col-start-3 
						xl:col-start-4 
						lg:col-span-8 
						rounded-t-sm 
						mt-4 
						lg:rounded-sm 
						lg:my-6
                        relative"
				>
					<div class="flex justify-between items-center py-4 lg:py-6 px-6 lg:px-8">
						<p class="typo-m">Filtres</p>
						<button 
							aria-label="Fermer la fenêtre"
							class="ml-6 block"
							data-action="
								toggle-on-body#toggle
								input-checker#uncheck
								state#replace
								analytics#push
							"
        					data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;filter_skip&quot;,&quot;event_info&quot;:&quot;all&quot;,&quot;cta&quot;:&quot;x-button&quot;}"
							data-cy="crossButton"
						>
							<svg class="size-3">
								<use href="/svg/icons/nav/close.svg#close"></use>
							</svg>
						</button>
					</div>

					

<turbo-frame id="searchOfferFacetFrame" data-action="turbo:before-frame-render->auto-submittable#morph"
    data-state-target="saved destination">
    <div class="pl-6 pr-2 lg:pl-8 lg:pr-4">
        <div class="overflow-hidden">
            <div class="overflow-auto scrollbar max-h-[450px] xs-h:max-h-[500px] sm-h:max-h-[675px]">
                <div class="flex flex-col gap-8 mr-2 pt-8">


<div
    class="flex flex-col border-b border-b-grey-100 last:border-0"  
>
            <div
                class="typo-l-bold"
            >
Contrats            </div>
            <div class="pt-4 has-[#minimum-salary-facet]:pt-1 pb-8">
                




<div
    data-controller="input-checker clear-inputs"
    data-input-checker-input-value="#modal-c" 
    class="group"
>
    <input type="checkbox" id="modal-c" class="peer" data-type="facet" data-auto-submittable-target="staticField" hidden>

    <div 
        class="
        peer-checked:fixed
        peer-checked:inset-0 
        peer-checked:bg-black/60  
        peer-checked:backdrop-blur 
        peer-checked:items-end 
        peer-checked:visible
        "
    >
        <div
            class="
               [input[data-type='facet']:checked_~*_&]:px-0 
               [input[data-type='facet']:checked_~*_&]:layout-wrapper 
               [input[data-type='facet']:checked_~*_&]:h-full
            "
        >
            <div 
                class="
                   [input[data-type='facet']:checked_~*_&]:layout-outer-grid 
                   [input[data-type='facet']:checked_~*_&]:h-full 
                   [input[data-type='facet']:checked_~*_&]:content-end 
                   lg:[input[data-type='facet']:checked_~*_&]:content-center
                "
                data-toggle-on-body-force-param="false"
                data-action="
                    click->analytics#push:self
                    click->toggle-on-body#toggle:self 
                    click->input-checker#uncheck:self 
                    click->state#replace:self 
                "
                data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;filter_skip&quot;,&quot;event_info&quot;:&quot;contract&quot;,&quot;cta&quot;:&quot;click-outside&quot;}"
            >
                <div 
                    data-controller="focus-trap"
                    data-focus-trap-target="container"
                    role="dialog"
                    data-cy="modalContainer" 
                    class="
                       [input[data-type='facet']:checked_~*_&]:max-h-full
                       [input[data-type='facet']:checked_~*_&]:bg-white 
                       [input[data-type='facet']:checked_~*_&]:shadow-modal  
                       [input[data-type='facet']:checked_~*_&]:col-span-full 
                       lg:[input[data-type='facet']:checked_~*_&]:col-start-4 
                       lg:[input[data-type='facet']:checked_~*_&]:col-span-8 
                       [input[data-type='facet']:checked_~*_&]:rounded-t-sm  
                       [input[data-type='facet']:checked_~*_&]:mt-4 
                       lg:[input[data-type='facet']:checked_~*_&]:rounded-sm 
                       [input[data-type='facet']:checked_~*_&]:px-6
                       lg:[input[data-type='facet']:checked_~*_&]:px-10 
                       [input[data-type='facet']:checked_~*_&]:pt-6 
                       lg:[input[data-type='facet']:checked_~*_&]:pt-8 
                       [input[data-type='facet']:checked_~*_&]:pb-8 
                       lg:[input[data-type='facet']:checked_~*_&]:my-6 
                    "
                >
                    <div class="hidden [input[data-type='facet']:checked_~*_&]:flex justify-between item-center mb-4">
                            <p class="typo-l-bold">Contrats</p>
                        
                        <button 
                            aria-label="Fermer la fenêtre"
                            data-toggle-on-body-force-param="false"
                            data-action="analytics#push toggle-on-body#toggle input-checker#uncheck state#replace"
                            data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;filter_skip&quot;,&quot;event_info&quot;:&quot;contract&quot;,&quot;cta&quot;:&quot;x-button&quot;}"
                            data-cy="crossButton"
                        >
                            <svg class="size-[14px]">
                                <use href="/svg/icons/nav/close.svg#close"></use>
                            </svg>
                        </button>
                    </div>

                    <div class="
                       [input[data-type='facet']:checked_~*_&]:overflow-auto
                       [input[data-type='facet']:checked_~*_&]:scrollbar
                       [input[data-type='facet']:checked_~*_&]:max-h-[350px]
                       [input[data-type='facet']:checked_~*_&]:xs-h:max-h-[500px]
                       [input[data-type='facet']:checked_~*_&]:sm-h:max-h-[675px]"
                    >
<div class="flex flex-wrap gap-4">
        <div class="checkbox-button checkbox-button-l">
            <input
                form="searchForm"
                type="checkbox"
                name="c"
                value="CDI"
                id="c-CDI"
                
                data-checkbox-sync-target="checkbox"
                data-action="change->checkbox-sync#sync click->auto-submittable#submit"
                data-cy="facetCheckbox"
            >
            <label for="c-CDI">
                CDI
            </label>
        </div>
        <div class="checkbox-button checkbox-button-l">
            <input
                form="searchForm"
                type="checkbox"
                name="c"
                value="CDD"
                id="c-CDD"
                
                data-checkbox-sync-target="checkbox"
                data-action="change->checkbox-sync#sync click->auto-submittable#submit"
                data-cy="facetCheckbox"
            >
            <label for="c-CDD">
                CDD
            </label>
        </div>
        <div class="checkbox-button checkbox-button-l">
            <input
                form="searchForm"
                type="checkbox"
                name="c"
                value="Travail_temp"
                id="c-Travail_temp"
                
                data-checkbox-sync-target="checkbox"
                data-action="change->checkbox-sync#sync click->auto-submittable#submit"
                data-cy="facetCheckbox"
            >
            <label for="c-Travail_temp">
                Int&#xE9;rim
            </label>
        </div>
        <div class="checkbox-button checkbox-button-l">
            <input
                form="searchForm"
                type="checkbox"
                name="c"
                value="Stage"
                id="c-Stage"
                
                data-checkbox-sync-target="checkbox"
                data-action="change->checkbox-sync#sync click->auto-submittable#submit"
                data-cy="facetCheckbox"
            >
            <label for="c-Stage">
                Stage
            </label>
        </div>
        <div class="checkbox-button checkbox-button-l">
            <input
                form="searchForm"
                type="checkbox"
                name="c"
                value="Alternance"
                id="c-Alternance"
                
                data-checkbox-sync-target="checkbox"
                data-action="change->checkbox-sync#sync click->auto-submittable#submit"
                data-cy="facetCheckbox"
            >
            <label for="c-Alternance">
                Alternance
            </label>
        </div>
        <div class="checkbox-button checkbox-button-l">
            <input
                form="searchForm"
                type="checkbox"
                name="c"
                value="Independant"
                id="c-Independant"
                
                data-checkbox-sync-target="checkbox"
                data-action="change->checkbox-sync#sync click->auto-submittable#submit"
                data-cy="facetCheckbox"
            >
            <label for="c-Independant">
                Ind&#xE9;pendant
            </label>
        </div>
        <div class="checkbox-button checkbox-button-l">
            <input
                form="searchForm"
                type="checkbox"
                name="c"
                value="Franchise"
                id="c-Franchise"
                
                data-checkbox-sync-target="checkbox"
                data-action="change->checkbox-sync#sync click->auto-submittable#submit"
                data-cy="facetCheckbox"
            >
            <label for="c-Franchise">
                Franchise
            </label>
        </div>
        <div class="checkbox-button checkbox-button-l">
            <input
                form="searchForm"
                type="checkbox"
                name="c"
                value="Associe"
                id="c-Associe"
                
                data-checkbox-sync-target="checkbox"
                data-action="change->checkbox-sync#sync click->auto-submittable#submit"
                data-cy="facetCheckbox"
            >
            <label for="c-Associe">
                Associ&#xE9;
            </label>
        </div>
        <div class="checkbox-button checkbox-button-l">
            <input
                form="searchForm"
                type="checkbox"
                name="c"
                value="Fonctionnaire"
                id="c-Fonctionnaire"
                
                data-checkbox-sync-target="checkbox"
                data-action="change->checkbox-sync#sync click->auto-submittable#submit"
                data-cy="facetCheckbox"
            >
            <label for="c-Fonctionnaire">
                Fonctionnaire
            </label>
        </div>
        <div class="checkbox-button checkbox-button-l">
            <input
                form="searchForm"
                type="checkbox"
                name="c"
                value="Freelance"
                id="c-Freelance"
                
                data-checkbox-sync-target="checkbox"
                data-action="change->checkbox-sync#sync click->auto-submittable#submit"
                data-cy="facetCheckbox"
            >
            <label for="c-Freelance">
                Freelance
            </label>
        </div>
        <div class="checkbox-button checkbox-button-l">
            <input
                form="searchForm"
                type="checkbox"
                name="c"
                value="Stage_de_lycee"
                id="c-Stage_de_lycee"
                
                data-checkbox-sync-target="checkbox"
                data-action="change->checkbox-sync#sync click->auto-submittable#submit"
                data-cy="facetCheckbox"
            >
            <label for="c-Stage_de_lycee">
                Stage de lyc&#xE9;e
            </label>
        </div>
</div>
                    </div>
                    <div 
                        class="
                            hidden 
                            [input[data-type='facet']:checked_~*_&]:flex 
                            justify-between 
                            bg-white 
                            pt-12
                            lg:pt-10
                        "
                    >
                        <button 
                            class="typo-s hover:underline" 
                            form="searchForm" 
                            data-turbo-frame="searchOfferFacetFrame"
                            data-action="clear-inputs#clear checkbox-sync#sync  analytics#push"
                            data-analytics-values-param='{ "event": "generic", "EventName": "filter_delete", "EventLibelle": "contract" }'
                            data-cy="clearBtn"
                        >
                            Effacer
                        </button>

                        <button 
                            class="btn-primary-l max-h-none ml-4"
                            form="searchForm" 
                            formaction="/fr-fr/emploi/recherche.html"
                            data-turbo-frame="turboSerp"
                            data-toggle-on-body-force-param="false"
                            data-action="toggle-on-body#toggle:self input-checker#uncheck:self analytics#push"
                            data-analytics-values-param='{ "event": "generic", "EventName": "filter_create", "EventLibelle": "contract"}'
                            data-cy="validateFacetBtn"
                        >
                            Afficher 623&nbsp;offres
                        </button> 
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

            </div>
</div>

<div
    class="flex flex-col border-b border-b-grey-100 last:border-0"  
>
            <div
                class="typo-l-bold"
            >
Salaire minimum            </div>
            <div class="pt-4 has-[#minimum-salary-facet]:pt-1 pb-8">
                




<div
    data-controller="input-checker clear-inputs"
    data-input-checker-input-value="#modal-msa" 
    class="group"
>
    <input type="checkbox" id="modal-msa" class="peer" data-type="facet" data-auto-submittable-target="staticField" hidden>

    <div 
        class="
        peer-checked:fixed
        peer-checked:inset-0 
        peer-checked:bg-black/60  
        peer-checked:backdrop-blur 
        peer-checked:items-end 
        peer-checked:visible
        "
    >
        <div
            class="
               [input[data-type='facet']:checked_~*_&]:px-0 
               [input[data-type='facet']:checked_~*_&]:layout-wrapper 
               [input[data-type='facet']:checked_~*_&]:h-full
            "
        >
            <div 
                class="
                   [input[data-type='facet']:checked_~*_&]:layout-outer-grid 
                   [input[data-type='facet']:checked_~*_&]:h-full 
                   [input[data-type='facet']:checked_~*_&]:content-end 
                   lg:[input[data-type='facet']:checked_~*_&]:content-center
                "
                data-toggle-on-body-force-param="false"
                data-action="
                    click->analytics#push:self
                    click->toggle-on-body#toggle:self 
                    click->input-checker#uncheck:self 
                    click->state#replace:self 
                "
                data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;filter_skip&quot;,&quot;event_info&quot;:&quot;salary&quot;,&quot;cta&quot;:&quot;click-outside&quot;}"
            >
                <div 
                    data-controller="focus-trap"
                    data-focus-trap-target="container"
                    role="dialog"
                    data-cy="modalContainer" 
                    class="
                       [input[data-type='facet']:checked_~*_&]:max-h-full
                       [input[data-type='facet']:checked_~*_&]:bg-white 
                       [input[data-type='facet']:checked_~*_&]:shadow-modal  
                       [input[data-type='facet']:checked_~*_&]:col-span-full 
                       lg:[input[data-type='facet']:checked_~*_&]:col-start-4 
                       lg:[input[data-type='facet']:checked_~*_&]:col-span-8 
                       [input[data-type='facet']:checked_~*_&]:rounded-t-sm  
                       [input[data-type='facet']:checked_~*_&]:mt-4 
                       lg:[input[data-type='facet']:checked_~*_&]:rounded-sm 
                       [input[data-type='facet']:checked_~*_&]:px-6
                       lg:[input[data-type='facet']:checked_~*_&]:px-10 
                       [input[data-type='facet']:checked_~*_&]:pt-6 
                       lg:[input[data-type='facet']:checked_~*_&]:pt-8 
                       [input[data-type='facet']:checked_~*_&]:pb-8 
                       lg:[input[data-type='facet']:checked_~*_&]:my-6 
                    "
                >
                    <div class="hidden [input[data-type='facet']:checked_~*_&]:flex justify-between item-center mb-4">
                            <p class="typo-l-bold">Salaire minimum</p>
                        
                        <button 
                            aria-label="Fermer la fenêtre"
                            data-toggle-on-body-force-param="false"
                            data-action="analytics#push toggle-on-body#toggle input-checker#uncheck state#replace"
                            data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;filter_skip&quot;,&quot;event_info&quot;:&quot;salary&quot;,&quot;cta&quot;:&quot;x-button&quot;}"
                            data-cy="crossButton"
                        >
                            <svg class="size-[14px]">
                                <use href="/svg/icons/nav/close.svg#close"></use>
                            </svg>
                        </button>
                    </div>

                    <div class="
                       [input[data-type='facet']:checked_~*_&]:overflow-auto
                       [input[data-type='facet']:checked_~*_&]:scrollbar
                       [input[data-type='facet']:checked_~*_&]:max-h-[350px]
                       [input[data-type='facet']:checked_~*_&]:xs-h:max-h-[500px]
                       [input[data-type='facet']:checked_~*_&]:sm-h:max-h-[675px]"
                    >




<div
    id="minimum-salary-facet"
    class="flex flex-col content-center typo-m gap-8"
>
    <p
        class="typo-xs sm:typo-s text-grey-500" 
    >  
        Estimation salaire brut 35h/sem.
    </p>
    <div class="w-full pr-1" data-controller="minimum-salary">
        <div aria-live="polite" class="flex justify-between mb-4">
            <div class="flex flex-col w-1/3">
                <p class="mb-1 typo-xs text-grey-500"
                >
                    Annuel
                </p>
                <span class="text-black">
                    <output data-minimum-salary-target="annualOutput">
                        0 &#8364;
                    </output>
                                        
                </span>
            </div>
            <div class="flex flex-col w-1/3 items-center">
                <p 
                    class="mb-1 typo-xs text-grey-500"
                >
                    Mensuel
                </p>
                <span class="text-black">
                    <output data-minimum-salary-target="monthlyOutput">
                        0 &#8364;
                    </output>
                </span>
            </div>
            <div class="flex flex-col w-1/3 items-end">
                <p 
                    class="mb-1 typo-xs text-grey-500 align-middle"
                >
                    Horaire
                </p>
                <span class="text-black">
                    <output data-minimum-salary-target="hourlyOutput">
                        0 &#8364;
                    </output>
                </span>
            </div>
        </div>
        <input
            data-auto-submittable-target="staticField"
            type="range"
            id="msa"
            form="searchForm"
            name="msa"
            value="0" 
            min="0" 
            max="100000"
            step="1000"
            data-controller="range"
            data-action="
                clear-inputs:reset-range@document->range#reset
                range#track
                minimum-salary#updateOutputs
                change->auto-submittable#submit"
            data-range-value-param="0"
            data-range-reverse-value
            data-range-target="inputRange"
            data-range-reverse-class="bg-right"
            data-minimum-salary-target="input"
                        class="range w-[99.5%] mb-4"
            data-cy="facetRangeSalary"
        >
    </div>

    <div class="inline-flex flex-wrap items-center justify-between w-full sm:w-fit sm:justify-normal">
        <label for="toggle-salary" class="typo-long-m sm:mr-4 w-2/3 sm:w-fit hover:cursor-pointer">Afficher uniquement les offres avec un salaire renseigné</label>
        <div class="relative h-6">
            <input 
                id="toggle-salary"
                form="searchForm"
                name="so"
                class="toggle-checkbox" 
                type="checkbox"
                value="true"
                data-action="input->auto-submittable#submit"
                data-cy="facetOffersWithSalaryToggle"
                
            >
        </div>
    </div>
</div>
                    
                    </div>
                    <div 
                        class="
                            hidden 
                            [input[data-type='facet']:checked_~*_&]:flex 
                            justify-between 
                            bg-white 
                            pt-12
                            lg:pt-10
                        "
                    >
                        <button 
                            class="typo-s hover:underline" 
                            form="searchForm" 
                            data-turbo-frame="searchOfferFacetFrame"
                            data-action="clear-inputs#clear checkbox-sync#sync  analytics#push"
                            data-analytics-values-param='{ "event": "generic", "EventName": "filter_delete", "EventLibelle": "salary" }'
                            data-cy="clearBtn"
                        >
                            Effacer
                        </button>

                        <button 
                            class="btn-primary-l max-h-none ml-4"
                            form="searchForm" 
                            formaction="/fr-fr/emploi/recherche.html"
                            data-turbo-frame="turboSerp"
                            data-toggle-on-body-force-param="false"
                            data-action="toggle-on-body#toggle:self input-checker#uncheck:self analytics#push"
                            data-analytics-values-param='{ "event": "generic", "EventName": "filter_create", "EventLibelle": "salary"}'
                            data-cy="validateFacetBtn"
                        >
                            Afficher 623&nbsp;offres
                        </button> 
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

            </div>
</div>

<div
    class="flex flex-col border-b border-b-grey-100 last:border-0"  
>
            <div
                class="typo-l-bold"
            >

<div class="text-green-500 flex items-center" data-cy="superRecruiterBadge">
    <svg
        class="mr-1  w-4 h-[1.125rem]">
        <use href="/svg/icons/super-recruiter/super-recruiter.svg#super-recruiter"></use>
    </svg>
    <p  class="typo-l-bold">Super recruteur</p>
</div>            </div>
            <div class="pt-4 has-[#minimum-salary-facet]:pt-1 pb-8">
                




<div
    data-controller="input-checker clear-inputs"
    data-input-checker-input-value="#modal-sr" 
    class="group"
>
    <input type="checkbox" id="modal-sr" class="peer" data-type="facet" data-auto-submittable-target="staticField" hidden>

    <div 
        class="
        peer-checked:fixed
        peer-checked:inset-0 
        peer-checked:bg-black/60  
        peer-checked:backdrop-blur 
        peer-checked:items-end 
        peer-checked:visible
        "
    >
        <div
            class="
               [input[data-type='facet']:checked_~*_&]:px-0 
               [input[data-type='facet']:checked_~*_&]:layout-wrapper 
               [input[data-type='facet']:checked_~*_&]:h-full
            "
        >
            <div 
                class="
                   [input[data-type='facet']:checked_~*_&]:layout-outer-grid 
                   [input[data-type='facet']:checked_~*_&]:h-full 
                   [input[data-type='facet']:checked_~*_&]:content-end 
                   lg:[input[data-type='facet']:checked_~*_&]:content-center
                "
                data-toggle-on-body-force-param="false"
                data-action="
                    click->analytics#push:self
                    click->toggle-on-body#toggle:self 
                    click->input-checker#uncheck:self 
                    click->state#replace:self 
                "
                data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;filter_skip&quot;,&quot;event_info&quot;:&quot;super-recruiter&quot;,&quot;cta&quot;:&quot;click-outside&quot;}"
            >
                <div 
                    data-controller="focus-trap"
                    data-focus-trap-target="container"
                    role="dialog"
                    data-cy="modalContainer" 
                    class="
                       [input[data-type='facet']:checked_~*_&]:max-h-full
                       [input[data-type='facet']:checked_~*_&]:bg-white 
                       [input[data-type='facet']:checked_~*_&]:shadow-modal  
                       [input[data-type='facet']:checked_~*_&]:col-span-full 
                       lg:[input[data-type='facet']:checked_~*_&]:col-start-4 
                       lg:[input[data-type='facet']:checked_~*_&]:col-span-8 
                       [input[data-type='facet']:checked_~*_&]:rounded-t-sm  
                       [input[data-type='facet']:checked_~*_&]:mt-4 
                       lg:[input[data-type='facet']:checked_~*_&]:rounded-sm 
                       [input[data-type='facet']:checked_~*_&]:px-6
                       lg:[input[data-type='facet']:checked_~*_&]:px-10 
                       [input[data-type='facet']:checked_~*_&]:pt-6 
                       lg:[input[data-type='facet']:checked_~*_&]:pt-8 
                       [input[data-type='facet']:checked_~*_&]:pb-8 
                       lg:[input[data-type='facet']:checked_~*_&]:my-6 
                    "
                >
                    <div class="hidden [input[data-type='facet']:checked_~*_&]:flex justify-between item-center mb-4">

<div class="text-green-500 flex items-center" data-cy="superRecruiterBadge">
    <svg
        class="mr-1  w-4 h-[1.125rem]">
        <use href="/svg/icons/super-recruiter/super-recruiter.svg#super-recruiter"></use>
    </svg>
    <p  class="typo-l-bold">Super recruteur</p>
</div>                        
                        <button 
                            aria-label="Fermer la fenêtre"
                            data-toggle-on-body-force-param="false"
                            data-action="analytics#push toggle-on-body#toggle input-checker#uncheck state#replace"
                            data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;filter_skip&quot;,&quot;event_info&quot;:&quot;super-recruiter&quot;,&quot;cta&quot;:&quot;x-button&quot;}"
                            data-cy="crossButton"
                        >
                            <svg class="size-[14px]">
                                <use href="/svg/icons/nav/close.svg#close"></use>
                            </svg>
                        </button>
                    </div>

                    <div class="
                       [input[data-type='facet']:checked_~*_&]:overflow-auto
                       [input[data-type='facet']:checked_~*_&]:scrollbar
                       [input[data-type='facet']:checked_~*_&]:max-h-[350px]
                       [input[data-type='facet']:checked_~*_&]:xs-h:max-h-[500px]
                       [input[data-type='facet']:checked_~*_&]:sm-h:max-h-[675px]"
                    >


<div class="flex flex-col gap-4">
    <div class="flex flex-col gap-6">
        <div class="flex items-center gap-4 w-full">
            <label for="toggle-super-recruiter" class="typo-m flex-1 sm:flex-none hover:cursor-pointer">Afficher uniquement les offres Super recruteur</label>
            <div class="relative h-6 shrink-0">
                <input
                    id="toggle-super-recruiter"
                    type="checkbox"
                    name="sr"
                    form="searchForm"
                    class="toggle-checkbox"
                    value="true"
                    data-action="input->auto-submittable#submit"
                    
                    data-cy="facetToggleSuperRecruiter"
                >
            </div>
        </div>
        <dl class="flex flex-col sm:flex-row gap-4">
            <div class="flex flex-col gap-1 flex-1">
                <dt class="typo-m-bold">Réponse garantie</dt>
                <dd class="typo-long-s">Les recruteurs communiquent les candidatures refusées, vous serez averti.</dd>
            </div>
            <div class="flex flex-col gap-1 flex-1">
                <dt class="typo-m-bold">Réactif</dt>
                <dd class="typo-long-s">Les recruteurs répondent aux candidats en moyenne en 15 jours maximum.</dd>
            </div>
        </dl>
    </div>
    <a class="atc-underline"
       data-controller="atc"
       data-turbo="false"
       data-atc-l-value="x/se-se/ragercevfr/fhcre-erpehgrhe=pt=ugzyf"
       data-action="analytics#push"
       data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;cta_click&quot;,&quot;event_info&quot;:&quot;super-recruiter&quot;,&quot;wording&quot;:&quot;En savoir plus&quot;}">En savoir plus</a>
</div>
                    </div>
                    <div 
                        class="
                            hidden 
                            [input[data-type='facet']:checked_~*_&]:flex 
                            justify-between 
                            bg-white 
                            pt-12
                            lg:pt-10
                        "
                    >
                        <button 
                            class="typo-s hover:underline" 
                            form="searchForm" 
                            data-turbo-frame="searchOfferFacetFrame"
                            data-action="clear-inputs#clear checkbox-sync#sync  analytics#push"
                            data-analytics-values-param='{ "event": "generic", "EventName": "filter_delete", "EventLibelle": "super-recruiter" }'
                            data-cy="clearBtn"
                        >
                            Effacer
                        </button>

                        <button 
                            class="btn-primary-l max-h-none ml-4"
                            form="searchForm" 
                            formaction="/fr-fr/emploi/recherche.html"
                            data-turbo-frame="turboSerp"
                            data-toggle-on-body-force-param="false"
                            data-action="toggle-on-body#toggle:self input-checker#uncheck:self analytics#push"
                            data-analytics-values-param='{ "event": "generic", "EventName": "filter_create", "EventLibelle": "super-recruiter"}'
                            data-cy="validateFacetBtn"
                        >
                            Afficher 623&nbsp;offres
                        </button> 
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

            </div>
</div>

<div
    class="flex flex-col border-b border-b-grey-100 last:border-0"  
>
            <div
                class="typo-l-bold"
            >
Distance            </div>
            <div class="pt-4 has-[#minimum-salary-facet]:pt-1 pb-8">
                




<div
    data-controller="input-checker clear-inputs"
    data-input-checker-input-value="#modal-ray" 
    class="group"
>
    <input type="checkbox" id="modal-ray" class="peer" data-type="facet" data-auto-submittable-target="staticField" hidden>

    <div 
        class="
        peer-checked:fixed
        peer-checked:inset-0 
        peer-checked:bg-black/60  
        peer-checked:backdrop-blur 
        peer-checked:items-end 
        peer-checked:visible
        "
    >
        <div
            class="
               [input[data-type='facet']:checked_~*_&]:px-0 
               [input[data-type='facet']:checked_~*_&]:layout-wrapper 
               [input[data-type='facet']:checked_~*_&]:h-full
            "
        >
            <div 
                class="
                   [input[data-type='facet']:checked_~*_&]:layout-outer-grid 
                   [input[data-type='facet']:checked_~*_&]:h-full 
                   [input[data-type='facet']:checked_~*_&]:content-end 
                   lg:[input[data-type='facet']:checked_~*_&]:content-center
                "
                data-toggle-on-body-force-param="false"
                data-action="
                    click->analytics#push:self
                    click->toggle-on-body#toggle:self 
                    click->input-checker#uncheck:self 
                    click->state#replace:self 
                "
                data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;filter_skip&quot;,&quot;cta&quot;:&quot;click-outside&quot;}"
            >
                <div 
                    data-controller="focus-trap"
                    data-focus-trap-target="container"
                    role="dialog"
                    data-cy="modalContainer" 
                    class="
                       [input[data-type='facet']:checked_~*_&]:max-h-full
                       [input[data-type='facet']:checked_~*_&]:bg-white 
                       [input[data-type='facet']:checked_~*_&]:shadow-modal  
                       [input[data-type='facet']:checked_~*_&]:col-span-full 
                       lg:[input[data-type='facet']:checked_~*_&]:col-start-4 
                       lg:[input[data-type='facet']:checked_~*_&]:col-span-8 
                       [input[data-type='facet']:checked_~*_&]:rounded-t-sm  
                       [input[data-type='facet']:checked_~*_&]:mt-4 
                       lg:[input[data-type='facet']:checked_~*_&]:rounded-sm 
                       [input[data-type='facet']:checked_~*_&]:px-6
                       lg:[input[data-type='facet']:checked_~*_&]:px-10 
                       [input[data-type='facet']:checked_~*_&]:pt-6 
                       lg:[input[data-type='facet']:checked_~*_&]:pt-8 
                       [input[data-type='facet']:checked_~*_&]:pb-8 
                       lg:[input[data-type='facet']:checked_~*_&]:my-6 
                    "
                >
                    <div class="hidden [input[data-type='facet']:checked_~*_&]:flex justify-between item-center mb-4">
                            <p class="typo-l-bold">Distance</p>
                        
                        <button 
                            aria-label="Fermer la fenêtre"
                            data-toggle-on-body-force-param="false"
                            data-action="analytics#push toggle-on-body#toggle input-checker#uncheck state#replace"
                            data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;filter_skip&quot;,&quot;cta&quot;:&quot;x-button&quot;}"
                            data-cy="crossButton"
                        >
                            <svg class="size-[14px]">
                                <use href="/svg/icons/nav/close.svg#close"></use>
                            </svg>
                        </button>
                    </div>

                    <div class="
                       [input[data-type='facet']:checked_~*_&]:overflow-auto
                       [input[data-type='facet']:checked_~*_&]:scrollbar
                       [input[data-type='facet']:checked_~*_&]:max-h-[350px]
                       [input[data-type='facet']:checked_~*_&]:xs-h:max-h-[500px]
                       [input[data-type='facet']:checked_~*_&]:sm-h:max-h-[675px]"
                    >

<div
    class="flex flex-col content-center typo-m"
    data-controller="toggle-property range"
    data-range-available-values-value="[0,5,10,20,50]"
    data-toggle-property-named-value="disabled">
    
    <p class="typo-long-m mb-10">
        Par défaut nous élargissons votre recherche dans un rayon de 20 km. Vous pouvez modifier ce rayon ci-dessous :
    </p>
    
    <div class="flex justify-between mb-3" data-range-target="relatedLabels">
            <p class="mb-1 typo-xs text-grey-500 min-w-8 text-center">
               0 km
            </p>
            <p class="mb-1 typo-xs text-grey-500 min-w-8 text-center">
               5 km
            </p>
            <p class="mb-1 typo-xs text-grey-500 min-w-8 text-center">
               10 km
            </p>
            <p class="mb-1 typo-xs text-black min-w-8 text-center">
               20 km
            </p>
            <p class="mb-1 typo-xs text-grey-500 min-w-8 text-center">
               50 km
            </p>
    </div>
    <input
        data-auto-submittable-target="staticField"
        type="range"
        id="input-range-index"
        form="searchForm"
        value="3"
        min="0"
        max="4"
        step="1"
        data-action="
            clear-inputs:clear@document->range#reset
            range#track
            change->auto-submittable#submit"
        data-range-value-param="0"
        data-range-target="inputRange"
        data-toggle-property-target="toToggle"
        class="range mb-4">

    <input
        type="hidden"
        form="searchForm"
        id="ray"
        name="ray"
        value="20"
        data-range-target="hiddenInput">
</div>
                    
                    </div>
                    <div 
                        class="
                            hidden 
                            [input[data-type='facet']:checked_~*_&]:flex 
                            justify-between 
                            bg-white 
                            pt-12
                            lg:pt-10
                        "
                    >
                        <button 
                            class="typo-s hover:underline" 
                            form="searchForm" 
                            data-turbo-frame="searchOfferFacetFrame"
                            data-action="clear-inputs#clear checkbox-sync#sync  analytics#push"
                            data-analytics-values-param='{ "event": "generic", "EventName": "filter_delete", "EventLibelle": "" }'
                            data-cy="clearBtn"
                        >
                            Effacer
                        </button>

                        <button 
                            class="btn-primary-l max-h-none ml-4"
                            form="searchForm" 
                            formaction="/fr-fr/emploi/recherche.html"
                            data-turbo-frame="turboSerp"
                            data-toggle-on-body-force-param="false"
                            data-action="toggle-on-body#toggle:self input-checker#uncheck:self analytics#push"
                            data-analytics-values-param='{ "event": "generic", "EventName": "filter_create", "EventLibelle": ""}'
                            data-cy="validateFacetBtn"
                        >
                            Afficher 623&nbsp;offres
                        </button> 
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

            </div>
</div>

<div
    class="flex flex-col border-b border-b-grey-100 last:border-0"  
>
            <div
                class="typo-l-bold"
            >
Dates            </div>
            <div class="pt-4 has-[#minimum-salary-facet]:pt-1 pb-8">
                




<div
    data-controller="input-checker clear-inputs"
    data-input-checker-input-value="#modal-d" 
    class="group"
>
    <input type="checkbox" id="modal-d" class="peer" data-type="facet" data-auto-submittable-target="staticField" hidden>

    <div 
        class="
        peer-checked:fixed
        peer-checked:inset-0 
        peer-checked:bg-black/60  
        peer-checked:backdrop-blur 
        peer-checked:items-end 
        peer-checked:visible
        "
    >
        <div
            class="
               [input[data-type='facet']:checked_~*_&]:px-0 
               [input[data-type='facet']:checked_~*_&]:layout-wrapper 
               [input[data-type='facet']:checked_~*_&]:h-full
            "
        >
            <div 
                class="
                   [input[data-type='facet']:checked_~*_&]:layout-outer-grid 
                   [input[data-type='facet']:checked_~*_&]:h-full 
                   [input[data-type='facet']:checked_~*_&]:content-end 
                   lg:[input[data-type='facet']:checked_~*_&]:content-center
                "
                data-toggle-on-body-force-param="false"
                data-action="
                    click->analytics#push:self
                    click->toggle-on-body#toggle:self 
                    click->input-checker#uncheck:self 
                    click->state#replace:self 
                "
                data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;filter_skip&quot;,&quot;cta&quot;:&quot;click-outside&quot;}"
            >
                <div 
                    data-controller="focus-trap"
                    data-focus-trap-target="container"
                    role="dialog"
                    data-cy="modalContainer" 
                    class="
                       [input[data-type='facet']:checked_~*_&]:max-h-full
                       [input[data-type='facet']:checked_~*_&]:bg-white 
                       [input[data-type='facet']:checked_~*_&]:shadow-modal  
                       [input[data-type='facet']:checked_~*_&]:col-span-full 
                       lg:[input[data-type='facet']:checked_~*_&]:col-start-4 
                       lg:[input[data-type='facet']:checked_~*_&]:col-span-8 
                       [input[data-type='facet']:checked_~*_&]:rounded-t-sm  
                       [input[data-type='facet']:checked_~*_&]:mt-4 
                       lg:[input[data-type='facet']:checked_~*_&]:rounded-sm 
                       [input[data-type='facet']:checked_~*_&]:px-6
                       lg:[input[data-type='facet']:checked_~*_&]:px-10 
                       [input[data-type='facet']:checked_~*_&]:pt-6 
                       lg:[input[data-type='facet']:checked_~*_&]:pt-8 
                       [input[data-type='facet']:checked_~*_&]:pb-8 
                       lg:[input[data-type='facet']:checked_~*_&]:my-6 
                    "
                >
                    <div class="hidden [input[data-type='facet']:checked_~*_&]:flex justify-between item-center mb-4">
                            <p class="typo-l-bold">Dates</p>
                        
                        <button 
                            aria-label="Fermer la fenêtre"
                            data-toggle-on-body-force-param="false"
                            data-action="analytics#push toggle-on-body#toggle input-checker#uncheck state#replace"
                            data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;filter_skip&quot;,&quot;cta&quot;:&quot;x-button&quot;}"
                            data-cy="crossButton"
                        >
                            <svg class="size-[14px]">
                                <use href="/svg/icons/nav/close.svg#close"></use>
                            </svg>
                        </button>
                    </div>

                    <div class="
                       [input[data-type='facet']:checked_~*_&]:overflow-auto
                       [input[data-type='facet']:checked_~*_&]:scrollbar
                       [input[data-type='facet']:checked_~*_&]:max-h-[350px]
                       [input[data-type='facet']:checked_~*_&]:xs-h:max-h-[500px]
                       [input[data-type='facet']:checked_~*_&]:sm-h:max-h-[675px]"
                    >


<div class="group flex flex-wrap gap-4">
        <div class="radio-button radio-button-l">
            <input
                form="searchForm"
                type="radio"
                name="d"
                value="all"
                id="d-all"
                checked
                data-action="auto-submittable#submit"
                data-cy="facetRadio"
            >
            <label for="d-all">
                Toutes
            </label>
        </div>
        <div class="radio-button radio-button-l">
            <input
                form="searchForm"
                type="radio"
                name="d"
                value="h"
                id="d-h"
                
                data-action="auto-submittable#submit"
                data-cy="facetRadio"
            >
            <label for="d-h">
                Depuis 24h
            </label>
        </div>
        <div class="radio-button radio-button-l">
            <input
                form="searchForm"
                type="radio"
                name="d"
                value="d"
                id="d-d"
                
                data-action="auto-submittable#submit"
                data-cy="facetRadio"
            >
            <label for="d-d">
                Depuis 3 jours
            </label>
        </div>
        <div class="radio-button radio-button-l">
            <input
                form="searchForm"
                type="radio"
                name="d"
                value="w"
                id="d-w"
                
                data-action="auto-submittable#submit"
                data-cy="facetRadio"
            >
            <label for="d-w">
                Depuis 1 semaine
            </label>
        </div>
        <div class="radio-button radio-button-l">
            <input
                form="searchForm"
                type="radio"
                name="d"
                value="m"
                id="d-m"
                
                data-action="auto-submittable#submit"
                data-cy="facetRadio"
            >
            <label for="d-m">
                Depuis 1 mois
            </label>
        </div>
</div>
                    </div>
                    <div 
                        class="
                            hidden 
                            [input[data-type='facet']:checked_~*_&]:flex 
                            justify-between 
                            bg-white 
                            pt-12
                            lg:pt-10
                        "
                    >
                        <button 
                            class="typo-s hover:underline" 
                            form="searchForm" 
                            data-turbo-frame="searchOfferFacetFrame"
                            data-action="clear-inputs#clear checkbox-sync#sync  analytics#push"
                            data-analytics-values-param='{ "event": "generic", "EventName": "filter_delete", "EventLibelle": "" }'
                            data-cy="clearBtn"
                        >
                            Effacer
                        </button>

                        <button 
                            class="btn-primary-l max-h-none ml-4"
                            form="searchForm" 
                            formaction="/fr-fr/emploi/recherche.html"
                            data-turbo-frame="turboSerp"
                            data-toggle-on-body-force-param="false"
                            data-action="toggle-on-body#toggle:self input-checker#uncheck:self analytics#push"
                            data-analytics-values-param='{ "event": "generic", "EventName": "filter_create", "EventLibelle": ""}'
                            data-cy="validateFacetBtn"
                        >
                            Afficher 623&nbsp;offres
                        </button> 
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

            </div>
</div>

<div
    class="flex flex-col border-b border-b-grey-100 last:border-0"  
>
            <div
                class="typo-l-bold"
            >
Niveaux d&#x27;exp&#xE9;rience            </div>
            <div class="pt-4 has-[#minimum-salary-facet]:pt-1 pb-8">
                




<div
    data-controller="input-checker clear-inputs"
    data-input-checker-input-value="#modal-e" 
    class="group"
>
    <input type="checkbox" id="modal-e" class="peer" data-type="facet" data-auto-submittable-target="staticField" hidden>

    <div 
        class="
        peer-checked:fixed
        peer-checked:inset-0 
        peer-checked:bg-black/60  
        peer-checked:backdrop-blur 
        peer-checked:items-end 
        peer-checked:visible
        "
    >
        <div
            class="
               [input[data-type='facet']:checked_~*_&]:px-0 
               [input[data-type='facet']:checked_~*_&]:layout-wrapper 
               [input[data-type='facet']:checked_~*_&]:h-full
            "
        >
            <div 
                class="
                   [input[data-type='facet']:checked_~*_&]:layout-outer-grid 
                   [input[data-type='facet']:checked_~*_&]:h-full 
                   [input[data-type='facet']:checked_~*_&]:content-end 
                   lg:[input[data-type='facet']:checked_~*_&]:content-center
                "
                data-toggle-on-body-force-param="false"
                data-action="
                    click->analytics#push:self
                    click->toggle-on-body#toggle:self 
                    click->input-checker#uncheck:self 
                    click->state#replace:self 
                "
                data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;filter_skip&quot;,&quot;cta&quot;:&quot;click-outside&quot;}"
            >
                <div 
                    data-controller="focus-trap"
                    data-focus-trap-target="container"
                    role="dialog"
                    data-cy="modalContainer" 
                    class="
                       [input[data-type='facet']:checked_~*_&]:max-h-full
                       [input[data-type='facet']:checked_~*_&]:bg-white 
                       [input[data-type='facet']:checked_~*_&]:shadow-modal  
                       [input[data-type='facet']:checked_~*_&]:col-span-full 
                       lg:[input[data-type='facet']:checked_~*_&]:col-start-4 
                       lg:[input[data-type='facet']:checked_~*_&]:col-span-8 
                       [input[data-type='facet']:checked_~*_&]:rounded-t-sm  
                       [input[data-type='facet']:checked_~*_&]:mt-4 
                       lg:[input[data-type='facet']:checked_~*_&]:rounded-sm 
                       [input[data-type='facet']:checked_~*_&]:px-6
                       lg:[input[data-type='facet']:checked_~*_&]:px-10 
                       [input[data-type='facet']:checked_~*_&]:pt-6 
                       lg:[input[data-type='facet']:checked_~*_&]:pt-8 
                       [input[data-type='facet']:checked_~*_&]:pb-8 
                       lg:[input[data-type='facet']:checked_~*_&]:my-6 
                    "
                >
                    <div class="hidden [input[data-type='facet']:checked_~*_&]:flex justify-between item-center mb-4">
                            <p class="typo-l-bold">Niveaux d&#x27;exp&#xE9;rience</p>
                        
                        <button 
                            aria-label="Fermer la fenêtre"
                            data-toggle-on-body-force-param="false"
                            data-action="analytics#push toggle-on-body#toggle input-checker#uncheck state#replace"
                            data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;filter_skip&quot;,&quot;cta&quot;:&quot;x-button&quot;}"
                            data-cy="crossButton"
                        >
                            <svg class="size-[14px]">
                                <use href="/svg/icons/nav/close.svg#close"></use>
                            </svg>
                        </button>
                    </div>

                    <div class="
                       [input[data-type='facet']:checked_~*_&]:overflow-auto
                       [input[data-type='facet']:checked_~*_&]:scrollbar
                       [input[data-type='facet']:checked_~*_&]:max-h-[350px]
                       [input[data-type='facet']:checked_~*_&]:xs-h:max-h-[500px]
                       [input[data-type='facet']:checked_~*_&]:sm-h:max-h-[675px]"
                    >

<div class="flex flex-wrap gap-4">
        <div class="checkbox-button checkbox-button-l">
            <input
                class=""
                form="searchForm"
                type="checkbox"
                name="e"
                value="deb"
                id="e-deb"
                
                data-action="auto-submittable#submit"
                data-cy="facetCheckbox"
            >
            <label class="typo-m" for="e-deb">
                D&#xE9;butants accept&#xE9;s
            </label>
        </div>
        <div class="checkbox-button checkbox-button-l">
            <input
                class=""
                form="searchForm"
                type="checkbox"
                name="e"
                value="0-1y"
                id="e-0-1y"
                
                data-action="auto-submittable#submit"
                data-cy="facetCheckbox"
            >
            <label class="typo-m" for="e-0-1y">
                0 - 1 an
            </label>
        </div>
        <div class="checkbox-button checkbox-button-l">
            <input
                class=""
                form="searchForm"
                type="checkbox"
                name="e"
                value="2-3y"
                id="e-2-3y"
                
                data-action="auto-submittable#submit"
                data-cy="facetCheckbox"
            >
            <label class="typo-m" for="e-2-3y">
                2 - 3 ans
            </label>
        </div>
        <div class="checkbox-button checkbox-button-l">
            <input
                class=""
                form="searchForm"
                type="checkbox"
                name="e"
                value="4-5y"
                id="e-4-5y"
                
                data-action="auto-submittable#submit"
                data-cy="facetCheckbox"
            >
            <label class="typo-m" for="e-4-5y">
                4 - 5 ans
            </label>
        </div>
        <div class="checkbox-button checkbox-button-l">
            <input
                class=""
                form="searchForm"
                type="checkbox"
                name="e"
                value="6-10y"
                id="e-6-10y"
                
                data-action="auto-submittable#submit"
                data-cy="facetCheckbox"
            >
            <label class="typo-m" for="e-6-10y">
                6 - 10 ans
            </label>
        </div>
        <div class="checkbox-button checkbox-button-l">
            <input
                class=""
                form="searchForm"
                type="checkbox"
                name="e"
                value="gt10y"
                id="e-gt10y"
                
                data-action="auto-submittable#submit"
                data-cy="facetCheckbox"
            >
            <label class="typo-m" for="e-gt10y">
                10 ans et plus
            </label>
        </div>
        <div class="checkbox-button checkbox-button-l">
            <input
                class=""
                form="searchForm"
                type="checkbox"
                name="e"
                value="unknown"
                id="e-unknown"
                
                data-action="auto-submittable#submit"
                data-cy="facetCheckbox"
            >
            <label class="typo-m" for="e-unknown">
                Non pr&#xE9;cis&#xE9;
            </label>
        </div>
</div>
                    </div>
                    <div 
                        class="
                            hidden 
                            [input[data-type='facet']:checked_~*_&]:flex 
                            justify-between 
                            bg-white 
                            pt-12
                            lg:pt-10
                        "
                    >
                        <button 
                            class="typo-s hover:underline" 
                            form="searchForm" 
                            data-turbo-frame="searchOfferFacetFrame"
                            data-action="clear-inputs#clear checkbox-sync#sync  analytics#push"
                            data-analytics-values-param='{ "event": "generic", "EventName": "filter_delete", "EventLibelle": "" }'
                            data-cy="clearBtn"
                        >
                            Effacer
                        </button>

                        <button 
                            class="btn-primary-l max-h-none ml-4"
                            form="searchForm" 
                            formaction="/fr-fr/emploi/recherche.html"
                            data-turbo-frame="turboSerp"
                            data-toggle-on-body-force-param="false"
                            data-action="toggle-on-body#toggle:self input-checker#uncheck:self analytics#push"
                            data-analytics-values-param='{ "event": "generic", "EventName": "filter_create", "EventLibelle": ""}'
                            data-cy="validateFacetBtn"
                        >
                            Afficher 623&nbsp;offres
                        </button> 
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

            </div>
</div>

<div
    class="flex flex-col border-b border-b-grey-100 last:border-0"  
>
            <div
                class="typo-l-bold"
            >
T&#xE9;l&#xE9;travail            </div>
            <div class="pt-4 has-[#minimum-salary-facet]:pt-1 pb-8">
                




<div
    data-controller="input-checker clear-inputs"
    data-input-checker-input-value="#modal-t" 
    class="group"
>
    <input type="checkbox" id="modal-t" class="peer" data-type="facet" data-auto-submittable-target="staticField" hidden>

    <div 
        class="
        peer-checked:fixed
        peer-checked:inset-0 
        peer-checked:bg-black/60  
        peer-checked:backdrop-blur 
        peer-checked:items-end 
        peer-checked:visible
        "
    >
        <div
            class="
               [input[data-type='facet']:checked_~*_&]:px-0 
               [input[data-type='facet']:checked_~*_&]:layout-wrapper 
               [input[data-type='facet']:checked_~*_&]:h-full
            "
        >
            <div 
                class="
                   [input[data-type='facet']:checked_~*_&]:layout-outer-grid 
                   [input[data-type='facet']:checked_~*_&]:h-full 
                   [input[data-type='facet']:checked_~*_&]:content-end 
                   lg:[input[data-type='facet']:checked_~*_&]:content-center
                "
                data-toggle-on-body-force-param="false"
                data-action="
                    click->analytics#push:self
                    click->toggle-on-body#toggle:self 
                    click->input-checker#uncheck:self 
                    click->state#replace:self 
                "
                data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;filter_skip&quot;,&quot;cta&quot;:&quot;click-outside&quot;}"
            >
                <div 
                    data-controller="focus-trap"
                    data-focus-trap-target="container"
                    role="dialog"
                    data-cy="modalContainer" 
                    class="
                       [input[data-type='facet']:checked_~*_&]:max-h-full
                       [input[data-type='facet']:checked_~*_&]:bg-white 
                       [input[data-type='facet']:checked_~*_&]:shadow-modal  
                       [input[data-type='facet']:checked_~*_&]:col-span-full 
                       lg:[input[data-type='facet']:checked_~*_&]:col-start-4 
                       lg:[input[data-type='facet']:checked_~*_&]:col-span-8 
                       [input[data-type='facet']:checked_~*_&]:rounded-t-sm  
                       [input[data-type='facet']:checked_~*_&]:mt-4 
                       lg:[input[data-type='facet']:checked_~*_&]:rounded-sm 
                       [input[data-type='facet']:checked_~*_&]:px-6
                       lg:[input[data-type='facet']:checked_~*_&]:px-10 
                       [input[data-type='facet']:checked_~*_&]:pt-6 
                       lg:[input[data-type='facet']:checked_~*_&]:pt-8 
                       [input[data-type='facet']:checked_~*_&]:pb-8 
                       lg:[input[data-type='facet']:checked_~*_&]:my-6 
                    "
                >
                    <div class="hidden [input[data-type='facet']:checked_~*_&]:flex justify-between item-center mb-4">
                            <p class="typo-l-bold">T&#xE9;l&#xE9;travail</p>
                        
                        <button 
                            aria-label="Fermer la fenêtre"
                            data-toggle-on-body-force-param="false"
                            data-action="analytics#push toggle-on-body#toggle input-checker#uncheck state#replace"
                            data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;filter_skip&quot;,&quot;cta&quot;:&quot;x-button&quot;}"
                            data-cy="crossButton"
                        >
                            <svg class="size-[14px]">
                                <use href="/svg/icons/nav/close.svg#close"></use>
                            </svg>
                        </button>
                    </div>

                    <div class="
                       [input[data-type='facet']:checked_~*_&]:overflow-auto
                       [input[data-type='facet']:checked_~*_&]:scrollbar
                       [input[data-type='facet']:checked_~*_&]:max-h-[350px]
                       [input[data-type='facet']:checked_~*_&]:xs-h:max-h-[500px]
                       [input[data-type='facet']:checked_~*_&]:sm-h:max-h-[675px]"
                    >

<div class="flex flex-wrap gap-4">
        <div class="checkbox-button checkbox-button-l">
            <input
                class=""
                form="searchForm"
                type="checkbox"
                name="t"
                value="Complet"
                id="t-Complet"
                
                data-action="auto-submittable#submit"
                data-cy="facetCheckbox"
            >
            <label class="typo-m" for="t-Complet">
                Complet
            </label>
        </div>
        <div class="checkbox-button checkbox-button-l">
            <input
                class=""
                form="searchForm"
                type="checkbox"
                name="t"
                value="Partiel"
                id="t-Partiel"
                
                data-action="auto-submittable#submit"
                data-cy="facetCheckbox"
            >
            <label class="typo-m" for="t-Partiel">
                Partiel
            </label>
        </div>
        <div class="checkbox-button checkbox-button-l">
            <input
                class=""
                form="searchForm"
                type="checkbox"
                name="t"
                value="Occasionnel"
                id="t-Occasionnel"
                
                data-action="auto-submittable#submit"
                data-cy="facetCheckbox"
            >
            <label class="typo-m" for="t-Occasionnel">
                Occasionnel
            </label>
        </div>
        <div class="checkbox-button checkbox-button-l">
            <input
                class=""
                form="searchForm"
                type="checkbox"
                name="t"
                value="Pas_teletravail"
                id="t-Pas_teletravail"
                
                data-action="auto-submittable#submit"
                data-cy="facetCheckbox"
            >
            <label class="typo-m" for="t-Pas_teletravail">
                Pas de t&#xE9;l&#xE9;travail
            </label>
        </div>
</div>
                    </div>
                    <div 
                        class="
                            hidden 
                            [input[data-type='facet']:checked_~*_&]:flex 
                            justify-between 
                            bg-white 
                            pt-12
                            lg:pt-10
                        "
                    >
                        <button 
                            class="typo-s hover:underline" 
                            form="searchForm" 
                            data-turbo-frame="searchOfferFacetFrame"
                            data-action="clear-inputs#clear checkbox-sync#sync  analytics#push"
                            data-analytics-values-param='{ "event": "generic", "EventName": "filter_delete", "EventLibelle": "" }'
                            data-cy="clearBtn"
                        >
                            Effacer
                        </button>

                        <button 
                            class="btn-primary-l max-h-none ml-4"
                            form="searchForm" 
                            formaction="/fr-fr/emploi/recherche.html"
                            data-turbo-frame="turboSerp"
                            data-toggle-on-body-force-param="false"
                            data-action="toggle-on-body#toggle:self input-checker#uncheck:self analytics#push"
                            data-analytics-values-param='{ "event": "generic", "EventName": "filter_create", "EventLibelle": ""}'
                            data-cy="validateFacetBtn"
                        >
                            Afficher 623&nbsp;offres
                        </button> 
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

            </div>
</div>

<div
    class="flex flex-col border-b border-b-grey-100 last:border-0"  
>
            <div
                class="typo-l-bold"
            >
Type d&#x27;entreprise            </div>
            <div class="pt-4 has-[#minimum-salary-facet]:pt-1 pb-8">
                




<div
    data-controller="input-checker clear-inputs"
    data-input-checker-input-value="#modal-et" 
    class="group"
>
    <input type="checkbox" id="modal-et" class="peer" data-type="facet" data-auto-submittable-target="staticField" hidden>

    <div 
        class="
        peer-checked:fixed
        peer-checked:inset-0 
        peer-checked:bg-black/60  
        peer-checked:backdrop-blur 
        peer-checked:items-end 
        peer-checked:visible
        "
    >
        <div
            class="
               [input[data-type='facet']:checked_~*_&]:px-0 
               [input[data-type='facet']:checked_~*_&]:layout-wrapper 
               [input[data-type='facet']:checked_~*_&]:h-full
            "
        >
            <div 
                class="
                   [input[data-type='facet']:checked_~*_&]:layout-outer-grid 
                   [input[data-type='facet']:checked_~*_&]:h-full 
                   [input[data-type='facet']:checked_~*_&]:content-end 
                   lg:[input[data-type='facet']:checked_~*_&]:content-center
                "
                data-toggle-on-body-force-param="false"
                data-action="
                    click->analytics#push:self
                    click->toggle-on-body#toggle:self 
                    click->input-checker#uncheck:self 
                    click->state#replace:self 
                "
                data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;filter_skip&quot;,&quot;cta&quot;:&quot;click-outside&quot;}"
            >
                <div 
                    data-controller="focus-trap"
                    data-focus-trap-target="container"
                    role="dialog"
                    data-cy="modalContainer" 
                    class="
                       [input[data-type='facet']:checked_~*_&]:max-h-full
                       [input[data-type='facet']:checked_~*_&]:bg-white 
                       [input[data-type='facet']:checked_~*_&]:shadow-modal  
                       [input[data-type='facet']:checked_~*_&]:col-span-full 
                       lg:[input[data-type='facet']:checked_~*_&]:col-start-4 
                       lg:[input[data-type='facet']:checked_~*_&]:col-span-8 
                       [input[data-type='facet']:checked_~*_&]:rounded-t-sm  
                       [input[data-type='facet']:checked_~*_&]:mt-4 
                       lg:[input[data-type='facet']:checked_~*_&]:rounded-sm 
                       [input[data-type='facet']:checked_~*_&]:px-6
                       lg:[input[data-type='facet']:checked_~*_&]:px-10 
                       [input[data-type='facet']:checked_~*_&]:pt-6 
                       lg:[input[data-type='facet']:checked_~*_&]:pt-8 
                       [input[data-type='facet']:checked_~*_&]:pb-8 
                       lg:[input[data-type='facet']:checked_~*_&]:my-6 
                    "
                >
                    <div class="hidden [input[data-type='facet']:checked_~*_&]:flex justify-between item-center mb-4">
                            <p class="typo-l-bold">Type d&#x27;entreprise</p>
                        
                        <button 
                            aria-label="Fermer la fenêtre"
                            data-toggle-on-body-force-param="false"
                            data-action="analytics#push toggle-on-body#toggle input-checker#uncheck state#replace"
                            data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;filter_skip&quot;,&quot;cta&quot;:&quot;x-button&quot;}"
                            data-cy="crossButton"
                        >
                            <svg class="size-[14px]">
                                <use href="/svg/icons/nav/close.svg#close"></use>
                            </svg>
                        </button>
                    </div>

                    <div class="
                       [input[data-type='facet']:checked_~*_&]:overflow-auto
                       [input[data-type='facet']:checked_~*_&]:scrollbar
                       [input[data-type='facet']:checked_~*_&]:max-h-[350px]
                       [input[data-type='facet']:checked_~*_&]:xs-h:max-h-[500px]
                       [input[data-type='facet']:checked_~*_&]:sm-h:max-h-[675px]"
                    >

<div class="flex flex-wrap gap-4">
        <div class="checkbox-button checkbox-button-l">
            <input
                class=""
                form="searchForm"
                type="checkbox"
                name="et"
                value="Cabinet_recr"
                id="et-Cabinet_recr"
                
                data-action="auto-submittable#submit"
                data-cy="facetCheckbox"
            >
            <label class="typo-m" for="et-Cabinet_recr">
                Cabinets de recrutement
            </label>
        </div>
        <div class="checkbox-button checkbox-button-l">
            <input
                class=""
                form="searchForm"
                type="checkbox"
                name="et"
                value="Centre_formation"
                id="et-Centre_formation"
                
                data-action="auto-submittable#submit"
                data-cy="facetCheckbox"
            >
            <label class="typo-m" for="et-Centre_formation">
                Centres de formation
            </label>
        </div>
        <div class="checkbox-button checkbox-button-l">
            <input
                class=""
                form="searchForm"
                type="checkbox"
                name="et"
                value="SSII"
                id="et-SSII"
                
                data-action="auto-submittable#submit"
                data-cy="facetCheckbox"
            >
            <label class="typo-m" for="et-SSII">
                ESN
            </label>
        </div>
        <div class="checkbox-button checkbox-button-l">
            <input
                class=""
                form="searchForm"
                type="checkbox"
                name="et"
                value="Entreprises"
                id="et-Entreprises"
                
                data-action="auto-submittable#submit"
                data-cy="facetCheckbox"
            >
            <label class="typo-m" for="et-Entreprises">
                Entreprises
            </label>
        </div>
        <div class="checkbox-button checkbox-button-l">
            <input
                class=""
                form="searchForm"
                type="checkbox"
                name="et"
                value="Travail_temporaire"
                id="et-Travail_temporaire"
                
                data-action="auto-submittable#submit"
                data-cy="facetCheckbox"
            >
            <label class="typo-m" for="et-Travail_temporaire">
                Travail temporaire
            </label>
        </div>
</div>
                    </div>
                    <div 
                        class="
                            hidden 
                            [input[data-type='facet']:checked_~*_&]:flex 
                            justify-between 
                            bg-white 
                            pt-12
                            lg:pt-10
                        "
                    >
                        <button 
                            class="typo-s hover:underline" 
                            form="searchForm" 
                            data-turbo-frame="searchOfferFacetFrame"
                            data-action="clear-inputs#clear checkbox-sync#sync  analytics#push"
                            data-analytics-values-param='{ "event": "generic", "EventName": "filter_delete", "EventLibelle": "" }'
                            data-cy="clearBtn"
                        >
                            Effacer
                        </button>

                        <button 
                            class="btn-primary-l max-h-none ml-4"
                            form="searchForm" 
                            formaction="/fr-fr/emploi/recherche.html"
                            data-turbo-frame="turboSerp"
                            data-toggle-on-body-force-param="false"
                            data-action="toggle-on-body#toggle:self input-checker#uncheck:self analytics#push"
                            data-analytics-values-param='{ "event": "generic", "EventName": "filter_create", "EventLibelle": ""}'
                            data-cy="validateFacetBtn"
                        >
                            Afficher 623&nbsp;offres
                        </button> 
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

            </div>
</div>

<div
    class="flex flex-col border-b border-b-grey-100 last:border-0"  
>
            <div
                class="typo-l-bold"
            >
Temps de travail            </div>
            <div class="pt-4 has-[#minimum-salary-facet]:pt-1 pb-8">
                




<div
    data-controller="input-checker clear-inputs"
    data-input-checker-input-value="#modal-ctt" 
    class="group"
>
    <input type="checkbox" id="modal-ctt" class="peer" data-type="facet" data-auto-submittable-target="staticField" hidden>

    <div 
        class="
        peer-checked:fixed
        peer-checked:inset-0 
        peer-checked:bg-black/60  
        peer-checked:backdrop-blur 
        peer-checked:items-end 
        peer-checked:visible
        "
    >
        <div
            class="
               [input[data-type='facet']:checked_~*_&]:px-0 
               [input[data-type='facet']:checked_~*_&]:layout-wrapper 
               [input[data-type='facet']:checked_~*_&]:h-full
            "
        >
            <div 
                class="
                   [input[data-type='facet']:checked_~*_&]:layout-outer-grid 
                   [input[data-type='facet']:checked_~*_&]:h-full 
                   [input[data-type='facet']:checked_~*_&]:content-end 
                   lg:[input[data-type='facet']:checked_~*_&]:content-center
                "
                data-toggle-on-body-force-param="false"
                data-action="
                    click->analytics#push:self
                    click->toggle-on-body#toggle:self 
                    click->input-checker#uncheck:self 
                    click->state#replace:self 
                "
                data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;filter_skip&quot;,&quot;cta&quot;:&quot;click-outside&quot;}"
            >
                <div 
                    data-controller="focus-trap"
                    data-focus-trap-target="container"
                    role="dialog"
                    data-cy="modalContainer" 
                    class="
                       [input[data-type='facet']:checked_~*_&]:max-h-full
                       [input[data-type='facet']:checked_~*_&]:bg-white 
                       [input[data-type='facet']:checked_~*_&]:shadow-modal  
                       [input[data-type='facet']:checked_~*_&]:col-span-full 
                       lg:[input[data-type='facet']:checked_~*_&]:col-start-4 
                       lg:[input[data-type='facet']:checked_~*_&]:col-span-8 
                       [input[data-type='facet']:checked_~*_&]:rounded-t-sm  
                       [input[data-type='facet']:checked_~*_&]:mt-4 
                       lg:[input[data-type='facet']:checked_~*_&]:rounded-sm 
                       [input[data-type='facet']:checked_~*_&]:px-6
                       lg:[input[data-type='facet']:checked_~*_&]:px-10 
                       [input[data-type='facet']:checked_~*_&]:pt-6 
                       lg:[input[data-type='facet']:checked_~*_&]:pt-8 
                       [input[data-type='facet']:checked_~*_&]:pb-8 
                       lg:[input[data-type='facet']:checked_~*_&]:my-6 
                    "
                >
                    <div class="hidden [input[data-type='facet']:checked_~*_&]:flex justify-between item-center mb-4">
                            <p class="typo-l-bold">Temps de travail</p>
                        
                        <button 
                            aria-label="Fermer la fenêtre"
                            data-toggle-on-body-force-param="false"
                            data-action="analytics#push toggle-on-body#toggle input-checker#uncheck state#replace"
                            data-analytics-values-param="{&quot;event&quot;:&quot;generic&quot;,&quot;event_name&quot;:&quot;filter_skip&quot;,&quot;cta&quot;:&quot;x-button&quot;}"
                            data-cy="crossButton"
                        >
                            <svg class="size-[14px]">
                                <use href="/svg/icons/nav/close.svg#close"></use>
                            </svg>
                        </button>
                    </div>

                    <div class="
                       [input[data-type='facet']:checked_~*_&]:overflow-auto
                       [input[data-type='facet']:checked_~*_&]:scrollbar
                       [input[data-type='facet']:checked_~*_&]:max-h-[350px]
                       [input[data-type='facet']:checked_~*_&]:xs-h:max-h-[500px]
                       [input[data-type='facet']:checked_~*_&]:sm-h:max-h-[675px]"
                    >

<div class="flex flex-wrap gap-4">
        <div class="checkbox-button checkbox-button-l">
            <input
                class=""
                form="searchForm"
                type="checkbox"
                name="ctt"
                value="ft"
                id="ctt-ft"
                
                data-action="auto-submittable#submit"
                data-cy="facetCheckbox"
            >
            <label class="typo-m" for="ctt-ft">
                Temps plein
            </label>
        </div>
        <div class="checkbox-button checkbox-button-l">
            <input
                class=""
                form="searchForm"
                type="checkbox"
                name="ctt"
                value="pt"
                id="ctt-pt"
                
                data-action="auto-submittable#submit"
                data-cy="facetCheckbox"
            >
            <label class="typo-m" for="ctt-pt">
                Temps partiel
            </label>
        </div>
        <div class="checkbox-button checkbox-button-l">
            <input
                class=""
                form="searchForm"
                type="checkbox"
                name="ctt"
                value="np"
                id="ctt-np"
                
                data-action="auto-submittable#submit"
                data-cy="facetCheckbox"
            >
            <label class="typo-m" for="ctt-np">
                Non pr&#xE9;cis&#xE9;
            </label>
        </div>
</div>
                    </div>
                    <div 
                        class="
                            hidden 
                            [input[data-type='facet']:checked_~*_&]:flex 
                            justify-between 
                            bg-white 
                            pt-12
                            lg:pt-10
                        "
                    >
                        <button 
                            class="typo-s hover:underline" 
                            form="searchForm" 
                            data-turbo-frame="searchOfferFacetFrame"
                            data-action="clear-inputs#clear checkbox-sync#sync  analytics#push"
                            data-analytics-values-param='{ "event": "generic", "EventName": "filter_delete", "EventLibelle": "" }'
                            data-cy="clearBtn"
                        >
                            Effacer
                        </button>

                        <button 
                            class="btn-primary-l max-h-none ml-4"
                            form="searchForm" 
                            formaction="/fr-fr/emploi/recherche.html"
                            data-turbo-frame="turboSerp"
                            data-toggle-on-body-force-param="false"
                            data-action="toggle-on-body#toggle:self input-checker#uncheck:self analytics#push"
                            data-analytics-values-param='{ "event": "generic", "EventName": "filter_create", "EventLibelle": ""}'
                            data-cy="validateFacetBtn"
                        >
                            Afficher 623&nbsp;offres
                        </button> 
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

            </div>
</div>

<div
    class="flex flex-col border-b border-b-grey-100 last:border-0"  
>
            <label for="modal-sf" class="flex items-center justify-between cursor-pointer mb-8">
                <div
                    class="typo-l-bold flex flex-wrap items-center"
                >
                    <p>Fonctions</p>
                </div>
                <svg class="size-3 text-black">
                    <use href="/svg/icons/arrow.svg#right"></use>
                </svg>
            </label>



<div data-controller="input-checker" data-input-checker-input-value="#modal-sf">
    <input id="modal-sf" type="checkbox" name="sidePanel" hidden class="peer"
           data-auto-submittable-target="staticField">
    <div data-controller="focus-trap clear-inputs" data-focus-trap-target="container" class="bg-white
               rounded-sm
               absolute
               inset-0
               hidden
               peer-checked:block">
        <div class="pl-6 lg:pl-8 pr-2 lg:pr-4 pt-4 lg:pt-6 flex flex-col justify-between">
            <div>
                <button aria-label="Revenir aux filtres" class="mb-4 lg:mb-6"
                        data-action="click->input-checker#uncheck" data-cy="previousButton" type="button">
                    <svg class="size-3">
                        <use href="/svg/icons/arrow.svg#left"></use>
                    </svg>
                </button>

                <div class="overflow-auto
                            scrollbar-gutter
                            scrollbar
                            h-[457px]
                            xs-h:h-[507px]
                            sm-h:h-[682px]">

                    <p class="typo-l-bold my-4">Fonctions</p>
                    

<div class="flex flex-col gap-4">
        <div data-controller="checkboxtree" class="flex flex-col">
            <div class="flex justify-between py-2 mb-2">
                <label for="Achat &#x2022; Logistique" class="typo-s-cap cursor-pointer w-4/5">
                    Achat &#x2022; Logistique
                </label>
                <input id="Achat &#x2022; Logistique"
                    data-checkboxtree-target="parent" 
                    form="searchForm"
                    data-action="checkboxtree#toggleAll auto-submittable#submit turbo:frame-load@document->checkboxtree#checkParentIfNeeded"
                    type="checkbox"
                    class="checkbox mr-2"
                    
                    
                    data-cy="facetCheckbox" />
            </div>
                                                                                                                       
            <div class="flex flex-col gap-2 ml-6">
                    <div class="flex justify-between py-2 gap-2">
                        <label for="f-Achat" class="typo-m cursor-pointer w-4/5 break-words">
                            Achat
                        </label> 
                        <input 
                            data-checkboxtree-target="child"
                            class="checkbox checkbox-l mr-2"
                            form="searchForm" 
                            type="checkbox"
                            name="f"
                            value="Achat"
                            id="f-Achat"
                            data-action="auto-submittable#submit"
                            
                            data-cy="facetCheckbox">
                    </div>
                    <div class="flex justify-between py-2 gap-2">
                        <label for="f-Logistique_metiers_transport" class="typo-m cursor-pointer w-4/5 break-words">
                            Logistique &#x2022; M&#xE9;tiers du Transport
                        </label> 
                        <input 
                            data-checkboxtree-target="child"
                            class="checkbox checkbox-l mr-2"
                            form="searchForm" 
                            type="checkbox"
                            name="f"
                            value="Logistique_metiers_transport"
                            id="f-Logistique_metiers_transport"
                            data-action="auto-submittable#submit"
                            
                            data-cy="facetCheckbox">
                    </div>
            </div>
        </div>
        <div data-controller="checkboxtree" class="flex flex-col">
            <div class="flex justify-between py-2 mb-2">
                <label for="Administration" class="typo-s-cap cursor-pointer w-4/5">
                    Administration
                </label>
                <input id="Administration"
                    data-checkboxtree-target="parent" 
                    form="searchForm"
                    data-action="checkboxtree#toggleAll auto-submittable#submit turbo:frame-load@document->checkboxtree#checkParentIfNeeded"
                    type="checkbox"
                    class="checkbox mr-2"
                    
                    
                    data-cy="facetCheckbox" />
            </div>
                                                                                                                       
            <div class="flex flex-col gap-2 ml-6">
                    <div class="flex justify-between py-2 gap-2">
                        <label for="f-Assistanat_admin_accueil" class="typo-m cursor-pointer w-4/5 break-words">
                            Assistanat &#x2022; Adm.ventes &#x2022; Accueil
                        </label> 
                        <input 
                            data-checkboxtree-target="child"
                            class="checkbox checkbox-l mr-2"
                            form="searchForm" 
                            type="checkbox"
                            name="f"
                            value="Assistanat_admin_accueil"
                            id="f-Assistanat_admin_accueil"
                            data-action="auto-submittable#submit"
                            
                            data-cy="facetCheckbox">
                    </div>
                    <div class="flex justify-between py-2 gap-2">
                        <label for="f-Compta_gestion_finance_audit" class="typo-m cursor-pointer w-4/5 break-words">
                            Compta &#x2022; Gestion &#x2022; Finance &#x2022; Audit
                        </label> 
                        <input 
                            data-checkboxtree-target="child"
                            class="checkbox checkbox-l mr-2"
                            form="searchForm" 
                            type="checkbox"
                            name="f"
                            value="Compta_gestion_finance_audit"
                            id="f-Compta_gestion_finance_audit"
                            data-action="auto-submittable#submit"
                            
                            data-cy="facetCheckbox">
                    </div>
                    <div class="flex justify-between py-2 gap-2">
                        <label for="f-Dir_resp_centre_profit" class="typo-m cursor-pointer w-4/5 break-words">
                            Direction &#x2022; Resp. Co. et Centre de Profit
                        </label> 
                        <input 
                            data-checkboxtree-target="child"
                            class="checkbox checkbox-l mr-2"
                            form="searchForm" 
                            type="checkbox"
                            name="f"
                            value="Dir_resp_centre_profit"
                            id="f-Dir_resp_centre_profit"
                            data-action="auto-submittable#submit"
                            
                            data-cy="facetCheckbox">
                    </div>
                    <div class="flex justify-between py-2 gap-2">
                        <label for="f-Juridique_droit" class="typo-m cursor-pointer w-4/5 break-words">
                            Juridique &#x2022; Droit
                        </label> 
                        <input 
                            data-checkboxtree-target="child"
                            class="checkbox checkbox-l mr-2"
                            form="searchForm" 
                            type="checkbox"
                            name="f"
                            value="Juridique_droit"
                            id="f-Juridique_droit"
                            data-action="auto-submittable#submit"
                            
                            data-cy="facetCheckbox">
                    </div>
                    <div class="flex justify-between py-2 gap-2">
                        <label for="f-Metiers_fonction_publique" class="typo-m cursor-pointer w-4/5 break-words">
                            M&#xE9;tiers de la Fonction Publique
                        </label> 
                        <input 
                            data-checkboxtree-target="child"
                            class="checkbox checkbox-l mr-2"
                            form="searchForm" 
                            type="checkbox"
                            name="f"
                            value="Metiers_fonction_publique"
                            id="f-Metiers_fonction_publique"
                            data-action="auto-submittable#submit"
                            
                            data-cy="facetCheckbox">
                    </div>
                    <div class="flex justify-between py-2 gap-2">
                        <label for="f-RH_Personnel_Formation" class="typo-m cursor-pointer w-4/5 break-words">
                            RH &#x2022; Personnel &#x2022; Formation
                        </label> 
                        <input 
                            data-checkboxtree-target="child"
                            class="checkbox checkbox-l mr-2"
                            form="searchForm" 
                            type="checkbox"
                            name="f"
                            value="RH_Personnel_Formation"
                            id="f-RH_Personnel_Formation"
                            data-action="auto-submittable#submit"
                            
                            data-cy="facetCheckbox">
                    </div>
            </div>
        </div>
        <div data-controller="checkboxtree" class="flex flex-col">
            <div class="flex justify-between py-2 mb-2">
                <label for="BTP &#x2022; Bureau d&#x27;&#xE9;tudes" class="typo-s-cap cursor-pointer w-4/5">
                    BTP &#x2022; Bureau d&#x27;&#xE9;tudes
                </label>
                <input id="BTP &#x2022; Bureau d&#x27;&#xE9;tudes"
                    data-checkboxtree-target="parent" 
                    form="searchForm"
                    data-action="checkboxtree#toggleAll auto-submittable#submit turbo:frame-load@document->checkboxtree#checkParentIfNeeded"
                    type="checkbox"
                    class="checkbox mr-2"
                    
                    
                    data-cy="facetCheckbox" />
            </div>
                                                                                                                       
            <div class="flex flex-col gap-2 ml-6">
                    <div class="flex justify-between py-2 gap-2">
                        <label for="f-BTP_gros_second_oeuvre" class="typo-m cursor-pointer w-4/5 break-words">
                            BTP  &#x2022;  Gros Oeuvre &#x2022; Second Oeuvre
                        </label> 
                        <input 
                            data-checkboxtree-target="child"
                            class="checkbox checkbox-l mr-2"
                            form="searchForm" 
                            type="checkbox"
                            name="f"
                            value="BTP_gros_second_oeuvre"
                            id="f-BTP_gros_second_oeuvre"
                            data-action="auto-submittable#submit"
                            
                            data-cy="facetCheckbox">
                    </div>
                    <div class="flex justify-between py-2 gap-2">
                        <label for="f-Bureau_etude_R_D" class="typo-m cursor-pointer w-4/5 break-words">
                            Bureau d&#x27;Etudes &#x2022; R&amp;D &#x2022; BTP archi &#x2022; conception
                        </label> 
                        <input 
                            data-checkboxtree-target="child"
                            class="checkbox checkbox-l mr-2"
                            form="searchForm" 
                            type="checkbox"
                            name="f"
                            value="Bureau_etude_R_D"
                            id="f-Bureau_etude_R_D"
                            data-action="auto-submittable#submit"
                            
                            data-cy="facetCheckbox">
                    </div>
            </div>
        </div>
        <div data-controller="checkboxtree" class="flex flex-col">
            <div class="flex justify-between py-2 mb-2">
                <label for="Commerce" class="typo-s-cap cursor-pointer w-4/5">
                    Commerce
                </label>
                <input id="Commerce"
                    data-checkboxtree-target="parent" 
                    form="searchForm"
                    data-action="checkboxtree#toggleAll auto-submittable#submit turbo:frame-load@document->checkboxtree#checkParentIfNeeded"
                    type="checkbox"
                    class="checkbox mr-2"
                    
                    
                    data-cy="facetCheckbox" />
            </div>
                                                                                                                       
            <div class="flex flex-col gap-2 ml-6">
                    <div class="flex justify-between py-2 gap-2">
                        <label for="f-Commercial_technico_com" class="typo-m cursor-pointer w-4/5 break-words">
                            Commercial  &#x2022;  Technico &#x2022; Commercial
                        </label> 
                        <input 
                            data-checkboxtree-target="child"
                            class="checkbox checkbox-l mr-2"
                            form="searchForm" 
                            type="checkbox"
                            name="f"
                            value="Commercial_technico_com"
                            id="f-Commercial_technico_com"
                            data-action="auto-submittable#submit"
                            
                            data-cy="facetCheckbox">
                    </div>
                    <div class="flex justify-between py-2 gap-2">
                        <label for="f-Commercial_particulier" class="typo-m cursor-pointer w-4/5 break-words">
                            Commercial aupr&#xE8;s des particuliers
                        </label> 
                        <input 
                            data-checkboxtree-target="child"
                            class="checkbox checkbox-l mr-2"
                            form="searchForm" 
                            type="checkbox"
                            name="f"
                            value="Commercial_particulier"
                            id="f-Commercial_particulier"
                            data-action="auto-submittable#submit"
                            
                            data-cy="facetCheckbox">
                    </div>
                    <div class="flex justify-between py-2 gap-2">
                        <label for="f-Commercial_professionnel" class="typo-m cursor-pointer w-4/5 break-words">
                            Commercial aupr&#xE8;s des professionnels
                        </label> 
                        <input 
                            data-checkboxtree-target="child"
                            class="checkbox checkbox-l mr-2"
                            form="searchForm" 
                            type="checkbox"
                            name="f"
                            value="Commercial_professionnel"
                            id="f-Commercial_professionnel"
                            data-action="auto-submittable#submit"
                            
                            data-cy="facetCheckbox">
                    </div>
                    <div class="flex justify-between py-2 gap-2">
                        <label for="f-Commercial_vendeur" class="typo-m cursor-pointer w-4/5 break-words">
                            Commercial &#x2022; Vendeur en magasin
                        </label> 
                        <input 
                            data-checkboxtree-target="child"
                            class="checkbox checkbox-l mr-2"
                            form="searchForm" 
                            type="checkbox"
                            name="f"
                            value="Commercial_vendeur"
                            id="f-Commercial_vendeur"
                            data-action="auto-submittable#submit"
                            
                            data-cy="facetCheckbox">
                    </div>
                    <div class="flex justify-between py-2 gap-2">
                        <label for="f-Import_export_inter" class="typo-m cursor-pointer w-4/5 break-words">
                            Import &#x2022; Export &#x2022; International
                        </label> 
                        <input 
                            data-checkboxtree-target="child"
                            class="checkbox checkbox-l mr-2"
                            form="searchForm" 
                            type="checkbox"
                            name="f"
                            value="Import_export_inter"
                            id="f-Import_export_inter"
                            data-action="auto-submittable#submit"
                            
                            data-cy="facetCheckbox">
                    </div>
                    <div class="flex justify-between py-2 gap-2">
                        <label for="f-Dir_management_resp" class="typo-m cursor-pointer w-4/5 break-words">
                            M&#xE9;tiers de la distribution  &#x2022;  Management &#x2022; Resp.
                        </label> 
                        <input 
                            data-checkboxtree-target="child"
                            class="checkbox checkbox-l mr-2"
                            form="searchForm" 
                            type="checkbox"
                            name="f"
                            value="Dir_management_resp"
                            id="f-Dir_management_resp"
                            data-action="auto-submittable#submit"
                            
                            data-cy="facetCheckbox">
                    </div>
                    <div class="flex justify-between py-2 gap-2">
                        <label for="f-Negociation_gest_immo" class="typo-m cursor-pointer w-4/5 break-words">
                            N&#xE9;gociation &#x2022; Gestion immobili&#xE8;re
                        </label> 
                        <input 
                            data-checkboxtree-target="child"
                            class="checkbox checkbox-l mr-2"
                            form="searchForm" 
                            type="checkbox"
                            name="f"
                            value="Negociation_gest_immo"
                            id="f-Negociation_gest_immo"
                            data-action="auto-submittable#submit"
                            
                            data-cy="facetCheckbox">
                    </div>
            </div>
        </div>
        <div data-controller="checkboxtree" class="flex flex-col">
            <div class="flex justify-between py-2 mb-2">
                <label for="Informatique" class="typo-s-cap cursor-pointer w-4/5">
                    Informatique
                </label>
                <input id="Informatique"
                    data-checkboxtree-target="parent" 
                    form="searchForm"
                    data-action="checkboxtree#toggleAll auto-submittable#submit turbo:frame-load@document->checkboxtree#checkParentIfNeeded"
                    type="checkbox"
                    class="checkbox mr-2"
                    
                    
                    data-cy="facetCheckbox" />
            </div>
                                                                                                                       
            <div class="flex flex-col gap-2 ml-6">
                    <div class="flex justify-between py-2 gap-2">
                        <label for="f-Informatique_dev_hard" class="typo-m cursor-pointer w-4/5 break-words">
                            Informatique  &#x2022;  D&#xE9;vel. Hardware
                        </label> 
                        <input 
                            data-checkboxtree-target="child"
                            class="checkbox checkbox-l mr-2"
                            form="searchForm" 
                            type="checkbox"
                            name="f"
                            value="Informatique_dev_hard"
                            id="f-Informatique_dev_hard"
                            data-action="auto-submittable#submit"
                            
                            data-cy="facetCheckbox">
                    </div>
                    <div class="flex justify-between py-2 gap-2">
                        <label for="f-Informatique_dev" class="typo-m cursor-pointer w-4/5 break-words">
                            Informatique  &#x2022;  D&#xE9;veloppement
                        </label> 
                        <input 
                            data-checkboxtree-target="child"
                            class="checkbox checkbox-l mr-2"
                            form="searchForm" 
                            type="checkbox"
                            name="f"
                            value="Informatique_dev"
                            id="f-Informatique_dev"
                            data-action="auto-submittable#submit"
                            
                            data-cy="facetCheckbox">
                    </div>
                    <div class="flex justify-between py-2 gap-2">
                        <label for="f-Informatique_syst_info" class="typo-m cursor-pointer w-4/5 break-words">
                            Informatique  &#x2022;  Syst&#xE8;mes d&#x27;Information
                        </label> 
                        <input 
                            data-checkboxtree-target="child"
                            class="checkbox checkbox-l mr-2"
                            form="searchForm" 
                            type="checkbox"
                            name="f"
                            value="Informatique_syst_info"
                            id="f-Informatique_syst_info"
                            data-action="auto-submittable#submit"
                            
                            data-cy="facetCheckbox">
                    </div>
                    <div class="flex justify-between py-2 gap-2">
                        <label for="f-Informatique_syst_reseaux" class="typo-m cursor-pointer w-4/5 break-words">
                            Informatique  &#x2022;  Syst&#xE8;mes &#x2022; R&#xE9;seaux
                        </label> 
                        <input 
                            data-checkboxtree-target="child"
                            class="checkbox checkbox-l mr-2"
                            form="searchForm" 
                            type="checkbox"
                            name="f"
                            value="Informatique_syst_reseaux"
                            id="f-Informatique_syst_reseaux"
                            data-action="auto-submittable#submit"
                            
                            data-cy="facetCheckbox">
                    </div>
            </div>
        </div>
        <div data-controller="checkboxtree" class="flex flex-col">
            <div class="flex justify-between py-2 mb-2">
                <label for="Ing&#xE9;nierie industrielle" class="typo-s-cap cursor-pointer w-4/5">
                    Ing&#xE9;nierie industrielle
                </label>
                <input id="Ing&#xE9;nierie industrielle"
                    data-checkboxtree-target="parent" 
                    form="searchForm"
                    data-action="checkboxtree#toggleAll auto-submittable#submit turbo:frame-load@document->checkboxtree#checkParentIfNeeded"
                    type="checkbox"
                    class="checkbox mr-2"
                    
                    
                    data-cy="facetCheckbox" />
            </div>
                                                                                                                       
            <div class="flex flex-col gap-2 ml-6">
                    <div class="flex justify-between py-2 gap-2">
                        <label for="f-Ingenierie_agro_agri" class="typo-m cursor-pointer w-4/5 break-words">
                            Ing&#xE9;nierie  &#x2022;  Agro &#x2022; Agri
                        </label> 
                        <input 
                            data-checkboxtree-target="child"
                            class="checkbox checkbox-l mr-2"
                            form="searchForm" 
                            type="checkbox"
                            name="f"
                            value="Ingenierie_agro_agri"
                            id="f-Ingenierie_agro_agri"
                            data-action="auto-submittable#submit"
                            
                            data-cy="facetCheckbox">
                    </div>
                    <div class="flex justify-between py-2 gap-2">
                        <label for="f-Ingenierie_chimie_pharma_bio" class="typo-m cursor-pointer w-4/5 break-words">
                            Ing&#xE9;nierie  &#x2022;  Chimie &#x2022; Pharmacie &#x2022; Bio.
                        </label> 
                        <input 
                            data-checkboxtree-target="child"
                            class="checkbox checkbox-l mr-2"
                            form="searchForm" 
                            type="checkbox"
                            name="f"
                            value="Ingenierie_chimie_pharma_bio"
                            id="f-Ingenierie_chimie_pharma_bio"
                            data-action="auto-submittable#submit"
                            
                            data-cy="facetCheckbox">
                    </div>
                    <div class="flex justify-between py-2 gap-2">
                        <label for="f-Ingenierie_electro_tech" class="typo-m cursor-pointer w-4/5 break-words">
                            Ing&#xE9;nierie  &#x2022;  Electro &#x2022; tech. &#x2022; Automat.
                        </label> 
                        <input 
                            data-checkboxtree-target="child"
                            class="checkbox checkbox-l mr-2"
                            form="searchForm" 
                            type="checkbox"
                            name="f"
                            value="Ingenierie_electro_tech"
                            id="f-Ingenierie_electro_tech"
                            data-action="auto-submittable#submit"
                            
                            data-cy="facetCheckbox">
                    </div>
                    <div class="flex justify-between py-2 gap-2">
                        <label for="f-Ingenierie_meca_aero" class="typo-m cursor-pointer w-4/5 break-words">
                            Ing&#xE9;nierie  &#x2022;  M&#xE9;canique &#x2022; A&#xE9;ron.
                        </label> 
                        <input 
                            data-checkboxtree-target="child"
                            class="checkbox checkbox-l mr-2"
                            form="searchForm" 
                            type="checkbox"
                            name="f"
                            value="Ingenierie_meca_aero"
                            id="f-Ingenierie_meca_aero"
                            data-action="auto-submittable#submit"
                            
                            data-cy="facetCheckbox">
                    </div>
                    <div class="flex justify-between py-2 gap-2">
                        <label for="f-Ingenierie_telecom" class="typo-m cursor-pointer w-4/5 break-words">
                            Ing&#xE9;nierie  &#x2022;  Telecoms &#x2022; Electronique
                        </label> 
                        <input 
                            data-checkboxtree-target="child"
                            class="checkbox checkbox-l mr-2"
                            form="searchForm" 
                            type="checkbox"
                            name="f"
                            value="Ingenierie_telecom"
                            id="f-Ingenierie_telecom"
                            data-action="auto-submittable#submit"
                            
                            data-cy="facetCheckbox">
                    </div>
            </div>
        </div>
        <div data-controller="checkboxtree" class="flex flex-col">
            <div class="flex justify-between py-2 mb-2">
                <label for="Marketing &#x2022; Communication &#x2022; Graphisme" class="typo-s-cap cursor-pointer w-4/5">
                    Marketing &#x2022; Communication &#x2022; Graphisme
                </label>
                <input id="Marketing &#x2022; Communication &#x2022; Graphisme"
                    data-checkboxtree-target="parent" 
                    form="searchForm"
                    data-action="checkboxtree#toggleAll auto-submittable#submit turbo:frame-load@document->checkboxtree#checkParentIfNeeded"
                    type="checkbox"
                    class="checkbox mr-2"
                    
                    
                    data-cy="facetCheckbox" />
            </div>
                                                                                                                       
            <div class="flex flex-col gap-2 ml-6">
                    <div class="flex justify-between py-2 gap-2">
                        <label for="f-Marketing_com_graphisme" class="typo-m cursor-pointer w-4/5 break-words">
                            Marketing &#x2022; Communication &#x2022; Graphisme
                        </label> 
                        <input 
                            data-checkboxtree-target="child"
                            class="checkbox checkbox-l mr-2"
                            form="searchForm" 
                            type="checkbox"
                            name="f"
                            value="Marketing_com_graphisme"
                            id="f-Marketing_com_graphisme"
                            data-action="auto-submittable#submit"
                            
                            data-cy="facetCheckbox">
                    </div>
            </div>
        </div>
        <div data-controller="checkboxtree" class="flex flex-col">
            <div class="flex justify-between py-2 mb-2">
                <label for="Production" class="typo-s-cap cursor-pointer w-4/5">
                    Production
                </label>
                <input id="Production"
                    data-checkboxtree-target="parent" 
                    form="searchForm"
                    data-action="checkboxtree#toggleAll auto-submittable#submit turbo:frame-load@document->checkboxtree#checkParentIfNeeded"
                    type="checkbox"
                    class="checkbox mr-2"
                    
                    
                    data-cy="facetCheckbox" />
            </div>
                                                                                                                       
            <div class="flex flex-col gap-2 ml-6">
                    <div class="flex justify-between py-2 gap-2">
                        <label for="f-Production_gestion" class="typo-m cursor-pointer w-4/5 break-words">
                            Production  &#x2022;  Gestion &#x2022; Maintenance
                        </label> 
                        <input 
                            data-checkboxtree-target="child"
                            class="checkbox checkbox-l mr-2"
                            form="searchForm" 
                            type="checkbox"
                            name="f"
                            value="Production_gestion"
                            id="f-Production_gestion"
                            data-action="auto-submittable#submit"
                            
                            data-cy="facetCheckbox">
                    </div>
                    <div class="flex justify-between py-2 gap-2">
                        <label for="f-Production_operateur" class="typo-m cursor-pointer w-4/5 break-words">
                            Production  &#x2022;  Op&#xE9;rateur &#x2022; Manoeuvre
                        </label> 
                        <input 
                            data-checkboxtree-target="child"
                            class="checkbox checkbox-l mr-2"
                            form="searchForm" 
                            type="checkbox"
                            name="f"
                            value="Production_operateur"
                            id="f-Production_operateur"
                            data-action="auto-submittable#submit"
                            
                            data-cy="facetCheckbox">
                    </div>
                    <div class="flex justify-between py-2 gap-2">
                        <label for="f-Qualite_securite_environnement" class="typo-m cursor-pointer w-4/5 break-words">
                            Qualit&#xE9; &#x2022; Hygi&#xE8;ne &#x2022; S&#xE9;curit&#xE9; &#x2022; Environnement
                        </label> 
                        <input 
                            data-checkboxtree-target="child"
                            class="checkbox checkbox-l mr-2"
                            form="searchForm" 
                            type="checkbox"
                            name="f"
                            value="Qualite_securite_environnement"
                            id="f-Qualite_securite_environnement"
                            data-action="auto-submittable#submit"
                            
                            data-cy="facetCheckbox">
                    </div>
            </div>
        </div>
        <div data-controller="checkboxtree" class="flex flex-col">
            <div class="flex justify-between py-2 mb-2">
                <label for="Restauration &#x2022; Tourisme &#x2022; H&#xF4;tellerie &#x2022; Loisirs" class="typo-s-cap cursor-pointer w-4/5">
                    Restauration &#x2022; Tourisme &#x2022; H&#xF4;tellerie &#x2022; Loisirs
                </label>
                <input id="Restauration &#x2022; Tourisme &#x2022; H&#xF4;tellerie &#x2022; Loisirs"
                    data-checkboxtree-target="parent" 
                    form="searchForm"
                    data-action="checkboxtree#toggleAll auto-submittable#submit turbo:frame-load@document->checkboxtree#checkParentIfNeeded"
                    type="checkbox"
                    class="checkbox mr-2"
                    
                    
                    data-cy="facetCheckbox" />
            </div>
                                                                                                                       
            <div class="flex flex-col gap-2 ml-6">
                    <div class="flex justify-between py-2 gap-2">
                        <label for="f-Restauration_hotellerie_tourisme" class="typo-m cursor-pointer w-4/5 break-words">
                            Restauration &#x2022; Tourisme &#x2022; H&#xF4;tellerie &#x2022; Loisirs
                        </label> 
                        <input 
                            data-checkboxtree-target="child"
                            class="checkbox checkbox-l mr-2"
                            form="searchForm" 
                            type="checkbox"
                            name="f"
                            value="Restauration_hotellerie_tourisme"
                            id="f-Restauration_hotellerie_tourisme"
                            data-action="auto-submittable#submit"
                            
                            data-cy="facetCheckbox">
                    </div>
            </div>
        </div>
        <div data-controller="checkboxtree" class="flex flex-col">
            <div class="flex justify-between py-2 mb-2">
                <label for="Sant&#xE9; &#x2022; Social" class="typo-s-cap cursor-pointer w-4/5">
                    Sant&#xE9; &#x2022; Social
                </label>
                <input id="Sant&#xE9; &#x2022; Social"
                    data-checkboxtree-target="parent" 
                    form="searchForm"
                    data-action="checkboxtree#toggleAll auto-submittable#submit turbo:frame-load@document->checkboxtree#checkParentIfNeeded"
                    type="checkbox"
                    class="checkbox mr-2"
                    
                    
                    data-cy="facetCheckbox" />
            </div>
                                                                                                                       
            <div class="flex flex-col gap-2 ml-6">
                    <div class="flex justify-between py-2 gap-2">
                        <label for="f-Sante_social" class="typo-m cursor-pointer w-4/5 break-words">
                            Sant&#xE9; &#x2022; Social
                        </label> 
                        <input 
                            data-checkboxtree-target="child"
                            class="checkbox checkbox-l mr-2"
                            form="searchForm" 
                            type="checkbox"
                            name="f"
                            value="Sante_social"
                            id="f-Sante_social"
                            data-action="auto-submittable#submit"
                            
                            data-cy="facetCheckbox">
                    </div>
            </div>
        </div>
        <div data-controller="checkboxtree" class="flex flex-col">
            <div class="flex justify-between py-2 mb-2">
                <label for="Services &#xE0; la personne &#x2022; aux entreprises" class="typo-s-cap cursor-pointer w-4/5">
                    Services &#xE0; la personne &#x2022; aux entreprises
                </label>
                <input id="Services &#xE0; la personne &#x2022; aux entreprises"
                    data-checkboxtree-target="parent" 
                    form="searchForm"
                    data-action="checkboxtree#toggleAll auto-submittable#submit turbo:frame-load@document->checkboxtree#checkParentIfNeeded"
                    type="checkbox"
                    class="checkbox mr-2"
                    
                    
                    data-cy="facetCheckbox" />
            </div>
                                                                                                                       
            <div class="flex flex-col gap-2 ml-6">
                    <div class="flex justify-between py-2 gap-2">
                        <label for="f-Services_pers_entreprises" class="typo-m cursor-pointer w-4/5 break-words">
                            Services &#xE0; la personne &#x2022; aux entreprises
                        </label> 
                        <input 
                            data-checkboxtree-target="child"
                            class="checkbox checkbox-l mr-2"
                            form="searchForm" 
                            type="checkbox"
                            name="f"
                            value="Services_pers_entreprises"
                            id="f-Services_pers_entreprises"
                            data-action="auto-submittable#submit"
                            
                            data-cy="facetCheckbox">
                    </div>
            </div>
        </div>
        <div data-controller="checkboxtree" class="flex flex-col">
            <div class="flex justify-between py-2 mb-2">
                <label for="Support (SAV &#x2022; Hotline)" class="typo-s-cap cursor-pointer w-4/5">
                    Support (SAV &#x2022; Hotline)
                </label>
                <input id="Support (SAV &#x2022; Hotline)"
                    data-checkboxtree-target="parent" 
                    form="searchForm"
                    data-action="checkboxtree#toggleAll auto-submittable#submit turbo:frame-load@document->checkboxtree#checkParentIfNeeded"
                    type="checkbox"
                    class="checkbox mr-2"
                    
                    
                    data-cy="facetCheckbox" />
            </div>
                                                                                                                       
            <div class="flex flex-col gap-2 ml-6">
                    <div class="flex justify-between py-2 gap-2">
                        <label for="f-SAV_Hotline" class="typo-m cursor-pointer w-4/5 break-words">
                            SAV &#x2022; Hotline &#x2022; T&#xE9;l&#xE9;conseiller
                        </label> 
                        <input 
                            data-checkboxtree-target="child"
                            class="checkbox checkbox-l mr-2"
                            form="searchForm" 
                            type="checkbox"
                            name="f"
                            value="SAV_Hotline"
                            id="f-SAV_Hotline"
                            data-action="auto-submittable#submit"
                            
                            data-cy="facetCheckbox">
                    </div>
            </div>
        </div>
</div>
                </div>

            </div>

        </div>

        <div class="flex
                        justify-between 
                        w-full
                        py-4
                        px-6
                        rounded-t-sm
                        lg:rounded-sm">
            <button class="typo-s hover:underline" form="searchForm" data-turbo-frame="searchOfferFacetFrame"
                    data-action="clear-inputs#clear checkbox-sync#sync analytics#push"
                    data-analytics-values-param='{ "event": "EventGeneric", "EventName": "filter_delete", "EventLibelle": "side-panel" }'
                    data-cy="clearBtn">
                Effacer
            </button>

            <button class="btn-primary-l max-h-none ml-4" form="searchForm"
                    formaction="/fr-fr/emploi/recherche.html" data-turbo-frame="turboSerp"
                    data-action="toggle-on-body#toggle analytics#push"
                    data-analytics-values-param='{ "event": "EventGeneric", "EventName": "filter_create", "EventLibelle": "side-panel" }'
                    data-cy="validateFacetBtn">
                Afficher 623&nbsp;offres
            </button>
        </div>
    </div>
</div></div>

<div
    class="flex flex-col border-b border-b-grey-100 last:border-0"  
>
            <label for="modal-s" class="flex items-center justify-between cursor-pointer mb-8">
                <div
                    class="typo-l-bold flex flex-wrap items-center"
                >
                    <p>Secteurs d&#x27;activit&#xE9;</p>
                </div>
                <svg class="size-3 text-black">
                    <use href="/svg/icons/arrow.svg#right"></use>
                </svg>
            </label>



<div data-controller="input-checker" data-input-checker-input-value="#modal-s">
    <input id="modal-s" type="checkbox" name="sidePanel" hidden class="peer"
           data-auto-submittable-target="staticField">
    <div data-controller="focus-trap clear-inputs" data-focus-trap-target="container" class="bg-white
               rounded-sm
               absolute
               inset-0
               hidden
               peer-checked:block">
        <div class="pl-6 lg:pl-8 pr-2 lg:pr-4 pt-4 lg:pt-6 flex flex-col justify-between">
            <div>
                <button aria-label="Revenir aux filtres" class="mb-4 lg:mb-6"
                        data-action="click->input-checker#uncheck" data-cy="previousButton" type="button">
                    <svg class="size-3">
                        <use href="/svg/icons/arrow.svg#left"></use>
                    </svg>
                </button>

                <div class="overflow-auto
                            scrollbar-gutter
                            scrollbar
                            h-[457px]
                            xs-h:h-[507px]
                            sm-h:h-[682px]">

                    <p class="typo-l-bold my-4">Secteurs d&#x27;activit&#xE9;</p>
                    

<div class="flex flex-wrap flex-col gap-2">
        <div class=" flex flex-row-reverse justify-between py-2 mr-2">
            <input
                class="checkbox checkbox-l"
                form="searchForm"
                type="checkbox"
                name="s"
                value="Agri_peche"
                id="s-Agri_peche"
                
                data-action="auto-submittable#submit"
                data-cy="facetCheckbox"
            >
            <label class="typo-m" for="s-Agri_peche">
                Agriculture &#x2022; P&#xEA;che
            </label>
        </div>
        <div class=" flex flex-row-reverse justify-between py-2 mr-2">
            <input
                class="checkbox checkbox-l"
                form="searchForm"
                type="checkbox"
                name="s"
                value="BTP"
                id="s-BTP"
                
                data-action="auto-submittable#submit"
                data-cy="facetCheckbox"
            >
            <label class="typo-m" for="s-BTP">
                BTP
            </label>
        </div>
        <div class=" flex flex-row-reverse justify-between py-2 mr-2">
            <input
                class="checkbox checkbox-l"
                form="searchForm"
                type="checkbox"
                name="s"
                value="Banq_assur_finan"
                id="s-Banq_assur_finan"
                
                data-action="auto-submittable#submit"
                data-cy="facetCheckbox"
            >
            <label class="typo-m" for="s-Banq_assur_finan">
                Banque &#x2022; Assurance &#x2022; Finance
            </label>
        </div>
        <div class=" flex flex-row-reverse justify-between py-2 mr-2">
            <input
                class="checkbox checkbox-l"
                form="searchForm"
                type="checkbox"
                name="s"
                value="Distrib_commerce"
                id="s-Distrib_commerce"
                
                data-action="auto-submittable#submit"
                data-cy="facetCheckbox"
            >
            <label class="typo-m" for="s-Distrib_commerce">
                Distribution &#x2022; Commerce de gros
            </label>
        </div>
        <div class=" flex flex-row-reverse justify-between py-2 mr-2">
            <input
                class="checkbox checkbox-l"
                form="searchForm"
                type="checkbox"
                name="s"
                value="Enseign_forma"
                id="s-Enseign_forma"
                
                data-action="auto-submittable#submit"
                data-cy="facetCheckbox"
            >
            <label class="typo-m" for="s-Enseign_forma">
                Enseignement &#x2022; Formation
            </label>
        </div>
        <div class=" flex flex-row-reverse justify-between py-2 mr-2">
            <input
                class="checkbox checkbox-l"
                form="searchForm"
                type="checkbox"
                name="s"
                value="Immo"
                id="s-Immo"
                
                data-action="auto-submittable#submit"
                data-cy="facetCheckbox"
            >
            <label class="typo-m" for="s-Immo">
                Immobilier
            </label>
        </div>
        <div class=" flex flex-row-reverse justify-between py-2 mr-2">
            <input
                class="checkbox checkbox-l"
                form="searchForm"
                type="checkbox"
                name="s"
                value="Ind_agro"
                id="s-Ind_agro"
                
                data-action="auto-submittable#submit"
                data-cy="facetCheckbox"
            >
            <label class="typo-m" for="s-Ind_agro">
                Industrie Agro &#x2022; alimentaire
            </label>
        </div>
        <div class=" flex flex-row-reverse justify-between py-2 mr-2">
            <input
                class="checkbox checkbox-l"
                form="searchForm"
                type="checkbox"
                name="s"
                value="Ind_auto_meca_nav"
                id="s-Ind_auto_meca_nav"
                
                data-action="auto-submittable#submit"
                data-cy="facetCheckbox"
            >
            <label class="typo-m" for="s-Ind_auto_meca_nav">
                Industrie Auto &#x2022; Meca &#x2022; Navale
            </label>
        </div>
        <div class=" flex flex-row-reverse justify-between py-2 mr-2">
            <input
                class="checkbox checkbox-l"
                form="searchForm"
                type="checkbox"
                name="s"
                value="Ind_aero"
                id="s-Ind_aero"
                
                data-action="auto-submittable#submit"
                data-cy="facetCheckbox"
            >
            <label class="typo-m" for="s-Ind_aero">
                Industrie A&#xE9;ronautique &#x2022; A&#xE9;rospatial
            </label>
        </div>
        <div class=" flex flex-row-reverse justify-between py-2 mr-2">
            <input
                class="checkbox checkbox-l"
                form="searchForm"
                type="checkbox"
                name="s"
                value="Ind_manufact"
                id="s-Ind_manufact"
                
                data-action="auto-submittable#submit"
                data-cy="facetCheckbox"
            >
            <label class="typo-m" for="s-Ind_manufact">
                Industrie Manufacturi&#xE8;re
            </label>
        </div>
        <div class=" flex flex-row-reverse justify-between py-2 mr-2">
            <input
                class="checkbox checkbox-l"
                form="searchForm"
                type="checkbox"
                name="s"
                value="Ind_pharma_bio_chim"
                id="s-Ind_pharma_bio_chim"
                
                data-action="auto-submittable#submit"
                data-cy="facetCheckbox"
            >
            <label class="typo-m" for="s-Ind_pharma_bio_chim">
                Industrie Pharmaceutique &#x2022; Biotechn. &#x2022; Chimie
            </label>
        </div>
        <div class=" flex flex-row-reverse justify-between py-2 mr-2">
            <input
                class="checkbox checkbox-l"
                form="searchForm"
                type="checkbox"
                name="s"
                value="Ind_petro"
                id="s-Ind_petro"
                
                data-action="auto-submittable#submit"
                data-cy="facetCheckbox"
            >
            <label class="typo-m" for="s-Ind_petro">
                Industrie P&#xE9;troli&#xE8;re &#x2022; P&#xE9;trochimie
            </label>
        </div>
        <div class=" flex flex-row-reverse justify-between py-2 mr-2">
            <input
                class="checkbox checkbox-l"
                form="searchForm"
                type="checkbox"
                name="s"
                value="Ind_hightech_telecom"
                id="s-Ind_hightech_telecom"
                
                data-action="auto-submittable#submit"
                data-cy="facetCheckbox"
            >
            <label class="typo-m" for="s-Ind_hightech_telecom">
                Industrie high &#x2022; tech &#x2022; Telecom
            </label>
        </div>
        <div class=" flex flex-row-reverse justify-between py-2 mr-2">
            <input
                class="checkbox checkbox-l"
                form="searchForm"
                type="checkbox"
                name="s"
                value="Media_internet_com"
                id="s-Media_internet_com"
                
                data-action="auto-submittable#submit"
                data-cy="facetCheckbox"
            >
            <label class="typo-m" for="s-Media_internet_com">
                M&#xE9;dia &#x2022; Internet &#x2022; Communication
            </label>
        </div>
        <div class=" flex flex-row-reverse justify-between py-2 mr-2">
            <input
                class="checkbox checkbox-l"
                form="searchForm"
                type="checkbox"
                name="s"
                value="Resto"
                id="s-Resto"
                
                data-action="auto-submittable#submit"
                data-cy="facetCheckbox"
            >
            <label class="typo-m" for="s-Resto">
                Restauration
            </label>
        </div>
        <div class=" flex flex-row-reverse justify-between py-2 mr-2">
            <input
                class="checkbox checkbox-l"
                form="searchForm"
                type="checkbox"
                name="s"
                value="Sante_social"
                id="s-Sante_social"
                
                data-action="auto-submittable#submit"
                data-cy="facetCheckbox"
            >
            <label class="typo-m" for="s-Sante_social">
                Sant&#xE9; &#x2022; Social &#x2022; Association
            </label>
        </div>
        <div class=" flex flex-row-reverse justify-between py-2 mr-2">
            <input
                class="checkbox checkbox-l"
                form="searchForm"
                type="checkbox"
                name="s"
                value="Energie_envir"
                id="s-Energie_envir"
                
                data-action="auto-submittable#submit"
                data-cy="facetCheckbox"
            >
            <label class="typo-m" for="s-Energie_envir">
                Secteur Energie &#x2022; Environnement
            </label>
        </div>
        <div class=" flex flex-row-reverse justify-between py-2 mr-2">
            <input
                class="checkbox checkbox-l"
                form="searchForm"
                type="checkbox"
                name="s"
                value="Inform_SSII"
                id="s-Inform_SSII"
                
                data-action="auto-submittable#submit"
                data-cy="facetCheckbox"
            >
            <label class="typo-m" for="s-Inform_SSII">
                Secteur informatique &#x2022; ESN
            </label>
        </div>
        <div class=" flex flex-row-reverse justify-between py-2 mr-2">
            <input
                class="checkbox checkbox-l"
                form="searchForm"
                type="checkbox"
                name="s"
                value="Serv_public_autre"
                id="s-Serv_public_autre"
                
                data-action="auto-submittable#submit"
                data-cy="facetCheckbox"
            >
            <label class="typo-m" for="s-Serv_public_autre">
                Service public autres
            </label>
        </div>
        <div class=" flex flex-row-reverse justify-between py-2 mr-2">
            <input
                class="checkbox checkbox-l"
                form="searchForm"
                type="checkbox"
                name="s"
                value="Serv_public_etat"
                id="s-Serv_public_etat"
                
                data-action="auto-submittable#submit"
                data-cy="facetCheckbox"
            >
            <label class="typo-m" for="s-Serv_public_etat">
                Service public d&#x27;&#xE9;tat
            </label>
        </div>
        <div class=" flex flex-row-reverse justify-between py-2 mr-2">
            <input
                class="checkbox checkbox-l"
                form="searchForm"
                type="checkbox"
                name="s"
                value="Serv_public_collec_terri"
                id="s-Serv_public_collec_terri"
                
                data-action="auto-submittable#submit"
                data-cy="facetCheckbox"
            >
            <label class="typo-m" for="s-Serv_public_collec_terri">
                Service public des collectivit&#xE9;s territoriales
            </label>
        </div>
        <div class=" flex flex-row-reverse justify-between py-2 mr-2">
            <input
                class="checkbox checkbox-l"
                form="searchForm"
                type="checkbox"
                name="s"
                value="Serv_public_hosp"
                id="s-Serv_public_hosp"
                
                data-action="auto-submittable#submit"
                data-cy="facetCheckbox"
            >
            <label class="typo-m" for="s-Serv_public_hosp">
                Service public hospitalier
            </label>
        </div>
        <div class=" flex flex-row-reverse justify-between py-2 mr-2">
            <input
                class="checkbox checkbox-l"
                form="searchForm"
                type="checkbox"
                name="s"
                value="Serv_entreprise"
                id="s-Serv_entreprise"
                
                data-action="auto-submittable#submit"
                data-cy="facetCheckbox"
            >
            <label class="typo-m" for="s-Serv_entreprise">
                Services aux Entreprises
            </label>
        </div>
        <div class=" flex flex-row-reverse justify-between py-2 mr-2">
            <input
                class="checkbox checkbox-l"
                form="searchForm"
                type="checkbox"
                name="s"
                value="Serv_pers_part"
                id="s-Serv_pers_part"
                
                data-action="auto-submittable#submit"
                data-cy="facetCheckbox"
            >
            <label class="typo-m" for="s-Serv_pers_part">
                Services aux Personnes &#x2022; Particuliers
            </label>
        </div>
        <div class=" flex flex-row-reverse justify-between py-2 mr-2">
            <input
                class="checkbox checkbox-l"
                form="searchForm"
                type="checkbox"
                name="s"
                value="Tourism_hotel_loisir"
                id="s-Tourism_hotel_loisir"
                
                data-action="auto-submittable#submit"
                data-cy="facetCheckbox"
            >
            <label class="typo-m" for="s-Tourism_hotel_loisir">
                Tourisme &#x2022; H&#xF4;tellerie &#x2022; Loisirs
            </label>
        </div>
        <div class=" flex flex-row-reverse justify-between py-2 mr-2">
            <input
                class="checkbox checkbox-l"
                form="searchForm"
                type="checkbox"
                name="s"
                value="Transport_logist"
                id="s-Transport_logist"
                
                data-action="auto-submittable#submit"
                data-cy="facetCheckbox"
            >
            <label class="typo-m" for="s-Transport_logist">
                Transport &#x2022; Logistique
            </label>
        </div>
</div>
                </div>

            </div>

        </div>

        <div class="flex
                        justify-between 
                        w-full
                        py-4
                        px-6
                        rounded-t-sm
                        lg:rounded-sm">
            <button class="typo-s hover:underline" form="searchForm" data-turbo-frame="searchOfferFacetFrame"
                    data-action="clear-inputs#clear checkbox-sync#sync analytics#push"
                    data-analytics-values-param='{ "event": "EventGeneric", "EventName": "filter_delete", "EventLibelle": "side-panel" }'
                    data-cy="clearBtn">
                Effacer
            </button>

            <button class="btn-primary-l max-h-none ml-4" form="searchForm"
                    formaction="/fr-fr/emploi/recherche.html" data-turbo-frame="turboSerp"
                    data-action="toggle-on-body#toggle analytics#push"
                    data-analytics-values-param='{ "event": "EventGeneric", "EventName": "filter_create", "EventLibelle": "side-panel" }'
                    data-cy="validateFacetBtn">
                Afficher 623&nbsp;offres
            </button>
        </div>
    </div>
</div></div>

<div
    class="flex flex-col border-b border-b-grey-100 last:border-0"  
>
            <label for="modal-rse" class="flex items-center justify-between cursor-pointer mb-8">
                <div
                    class="typo-l-bold flex flex-wrap items-center"
                >
                    <p>Labels RSE</p>
                </div>
                <svg class="size-3 text-black">
                    <use href="/svg/icons/arrow.svg#right"></use>
                </svg>
            </label>



<div data-controller="input-checker" data-input-checker-input-value="#modal-rse">
    <input id="modal-rse" type="checkbox" name="sidePanel" hidden class="peer"
           data-auto-submittable-target="staticField">
    <div data-controller="focus-trap clear-inputs" data-focus-trap-target="container" class="bg-white
               rounded-sm
               absolute
               inset-0
               hidden
               peer-checked:block">
        <div class="pl-6 lg:pl-8 pr-2 lg:pr-4 pt-4 lg:pt-6 flex flex-col justify-between">
            <div>
                <button aria-label="Revenir aux filtres" class="mb-4 lg:mb-6"
                        data-action="click->input-checker#uncheck" data-cy="previousButton" type="button">
                    <svg class="size-3">
                        <use href="/svg/icons/arrow.svg#left"></use>
                    </svg>
                </button>

                <div class="overflow-auto
                            scrollbar-gutter
                            scrollbar
                            h-[457px]
                            xs-h:h-[507px]
                            sm-h:h-[682px]">

                    <p class="typo-l-bold my-4">Labels RSE</p>
                    

<div class="flex flex-col gap-4">
        <div data-controller="checkboxtree" class="flex flex-col">
            <div class="flex justify-between py-2 mb-2">
                <label for="Tous les labels" class="typo-s-cap cursor-pointer w-4/5">
                    Tous les labels
                </label>
                <input id="Tous les labels"
                    data-checkboxtree-target="parent" 
                    form="searchForm"
                    data-action="checkboxtree#toggleAll auto-submittable#submit turbo:frame-load@document->checkboxtree#checkParentIfNeeded"
                    type="checkbox"
                    class="checkbox mr-2"
                    
                    
                    data-cy="facetCheckbox" />
            </div>
                                                                                                                       
            <div class="flex flex-col gap-2 ml-6">
                    <div class="flex justify-between py-2 gap-2">
                        <label for="rse-_10556393" class="typo-m cursor-pointer w-4/5 break-words">
                            B Corp
                        </label> 
                        <input 
                            data-checkboxtree-target="child"
                            class="checkbox checkbox-l mr-2"
                            form="searchForm" 
                            type="checkbox"
                            name="rse"
                            value="_10556393"
                            id="rse-_10556393"
                            data-action="auto-submittable#submit"
                            
                            data-cy="facetCheckbox">
                    </div>
                    <div class="flex justify-between py-2 gap-2">
                        <label for="rse-_b64a8fe7" class="typo-m cursor-pointer w-4/5 break-words">
                            Ecocert 26000
                        </label> 
                        <input 
                            data-checkboxtree-target="child"
                            class="checkbox checkbox-l mr-2"
                            form="searchForm" 
                            type="checkbox"
                            name="rse"
                            value="_b64a8fe7"
                            id="rse-_b64a8fe7"
                            data-action="auto-submittable#submit"
                            
                            data-cy="facetCheckbox">
                    </div>
                    <div class="flex justify-between py-2 gap-2">
                        <label for="rse-_9ffe5c83" class="typo-m cursor-pointer w-4/5 break-words">
                            EcoVadis
                        </label> 
                        <input 
                            data-checkboxtree-target="child"
                            class="checkbox checkbox-l mr-2"
                            form="searchForm" 
                            type="checkbox"
                            name="rse"
                            value="_9ffe5c83"
                            id="rse-_9ffe5c83"
                            data-action="auto-submittable#submit"
                            
                            data-cy="facetCheckbox">
                    </div>
                    <div class="flex justify-between py-2 gap-2">
                        <label for="rse-_3a9a1663" class="typo-m cursor-pointer w-4/5 break-words">
                            Engag&#xE9; RSE
                        </label> 
                        <input 
                            data-checkboxtree-target="child"
                            class="checkbox checkbox-l mr-2"
                            form="searchForm" 
                            type="checkbox"
                            name="rse"
                            value="_3a9a1663"
                            id="rse-_3a9a1663"
                            data-action="auto-submittable#submit"
                            
                            data-cy="facetCheckbox">
                    </div>
                    <div class="flex justify-between py-2 gap-2">
                        <label for="rse-_a2f6a46f" class="typo-m cursor-pointer w-4/5 break-words">
                            For Life
                        </label> 
                        <input 
                            data-checkboxtree-target="child"
                            class="checkbox checkbox-l mr-2"
                            form="searchForm" 
                            type="checkbox"
                            name="rse"
                            value="_a2f6a46f"
                            id="rse-_a2f6a46f"
                            data-action="auto-submittable#submit"
                            
                            data-cy="facetCheckbox">
                    </div>
                    <div class="flex justify-between py-2 gap-2">
                        <label for="rse-_2d67f571" class="typo-m cursor-pointer w-4/5 break-words">
                            Lucie 26000
                        </label> 
                        <input 
                            data-checkboxtree-target="child"
                            class="checkbox checkbox-l mr-2"
                            form="searchForm" 
                            type="checkbox"
                            name="rse"
                            value="_2d67f571"
                            id="rse-_2d67f571"
                            data-action="auto-submittable#submit"
                            
                            data-cy="facetCheckbox">
                    </div>
                    <div class="flex justify-between py-2 gap-2">
                        <label for="rse-_79347e6b" class="typo-m cursor-pointer w-4/5 break-words">
                            PME&#x2B;
                        </label> 
                        <input 
                            data-checkboxtree-target="child"
                            class="checkbox checkbox-l mr-2"
                            form="searchForm" 
                            type="checkbox"
                            name="rse"
                            value="_79347e6b"
                            id="rse-_79347e6b"
                            data-action="auto-submittable#submit"
                            
                            data-cy="facetCheckbox">
                    </div>
                    <div class="flex justify-between py-2 gap-2">
                        <label for="rse-_e7ce5995" class="typo-m cursor-pointer w-4/5 break-words">
                            Positive Company
                        </label> 
                        <input 
                            data-checkboxtree-target="child"
                            class="checkbox checkbox-l mr-2"
                            form="searchForm" 
                            type="checkbox"
                            name="rse"
                            value="_e7ce5995"
                            id="rse-_e7ce5995"
                            data-action="auto-submittable#submit"
                            
                            data-cy="facetCheckbox">
                    </div>
                    <div class="flex justify-between py-2 gap-2">
                        <label for="rse-_7b05b6d4" class="typo-m cursor-pointer w-4/5 break-words">
                            Responsible Care
                        </label> 
                        <input 
                            data-checkboxtree-target="child"
                            class="checkbox checkbox-l mr-2"
                            form="searchForm" 
                            type="checkbox"
                            name="rse"
                            value="_7b05b6d4"
                            id="rse-_7b05b6d4"
                            data-action="auto-submittable#submit"
                            
                            data-cy="facetCheckbox">
                    </div>
                    <div class="flex justify-between py-2 gap-2">
                        <label for="rse-d5bab309073b" class="typo-m cursor-pointer w-4/5 break-words">
                            Safe Place
                        </label> 
                        <input 
                            data-checkboxtree-target="child"
                            class="checkbox checkbox-l mr-2"
                            form="searchForm" 
                            type="checkbox"
                            name="rse"
                            value="d5bab309073b"
                            id="rse-d5bab309073b"
                            data-action="auto-submittable#submit"
                            
                            data-cy="facetCheckbox">
                    </div>
            </div>
        </div>
</div>
                </div>

            </div>

        </div>

        <div class="flex
                        justify-between 
                        w-full
                        py-4
                        px-6
                        rounded-t-sm
                        lg:rounded-sm">
            <button class="typo-s hover:underline" form="searchForm" data-turbo-frame="searchOfferFacetFrame"
                    data-action="clear-inputs#clear checkbox-sync#sync analytics#push"
                    data-analytics-values-param='{ "event": "EventGeneric", "EventName": "filter_delete", "EventLibelle": "side-panel" }'
                    data-cy="clearBtn">
                Effacer
            </button>

            <button class="btn-primary-l max-h-none ml-4" form="searchForm"
                    formaction="/fr-fr/emploi/recherche.html" data-turbo-frame="turboSerp"
                    data-action="toggle-on-body#toggle analytics#push"
                    data-analytics-values-param='{ "event": "EventGeneric", "EventName": "filter_create", "EventLibelle": "side-panel" }'
                    data-cy="validateFacetBtn">
                Afficher 623&nbsp;offres
            </button>
        </div>
    </div>
</div></div>                </div>
            </div>
        </div>
    </div>
    <div class="
                flex
                justify-between
                w-full
                bg-white
                py-4
                px-6
                lg:px-6
                lg:rounded-b-sm
                border-t
                border-grey-100
            ">
        <button class="typo-s hover:underline" form="searchForm" data-turbo-frame="searchOfferFacetFrame"
            data-action="checkbox-sync#sync clear-inputs#clear analytics#push"
            data-analytics-values-param='{ "event": "generic", "EventName": "filter_delete", "EventLibelle": "all" }'
            data-cy="clearAllBtn">
            Tout&nbsp;effacer
        </button>

        <button class="btn-primary-l max-h-none ml-4" form="searchForm" formaction=""
            data-turbo-frame="turboSerp" data-action="
                    input-checker#uncheck:self
                    toggle-on-body#toggle
                    analytics#push"
            data-analytics-values-param='{ "event": "generic", "EventName": "filter_create", "EventLibelle": "all" }'
            data-cy="offerNumberButton">
            Afficher 623&nbsp;offres
        </button>
    </div>
</turbo-frame>

				</div>
			</div>
		</div>
	</div>
</div>

    </div>
    


<div id="alert-modal-container"
     data-controller="input-checker modal"
     data-modal-form-validator-outlet="form"
     
     data-input-checker-input-value="#alert-modal"
     data-action="modal:navigate-to-next-page@document->input-checker#uncheck"
     >
    <input type="checkbox" hidden id="alert-modal" class="peer" >
    <div class="
            fixed
            inset-0
            z-50
            overflow-auto
            bg-black/60
            sm:bg-black/40
            backdrop-blur
            sm:backdrop-blur-md
            items-end
            sm:items-center
            collapse
            opacity-0
            peer-checked:visible
            peer-checked:opacity-100
            transition-[visibility,_opacity]
            duration-700
        ">
        <div class="px-0 sm:px-6 layout-wrapper h-full hidden peer-parent-checked:block">
            <div
                class="layout-outer-grid h-full content-end sm:content-center"
                data-toggle-on-body-force-param="false"
                data-action="click-&gt;input-checker#uncheck:self click-&gt;modal#dispatchDiscardedEvent:self">

                <div
                    data-controller="intersect focus-trap toggle-attribute"
                    data-focus-trap-target="container"
                    data-toggle-attribute-target="element"
                    data-toggle-on-body-force-param="true"
                    data-action="intersect:enter->toggle-on-body#add intersect:enter->toggle-attribute#setAttribute intersect:exit->toggle-on-body#remove intersect:exit->toggle-attribute#unsetAttribute"
                    data-toggle-attribute-attribute-param="aria-modal"
                    data-toggle-attribute-value-param="true"
                    role="dialog"
                    data-cy="modalContainer"
                    class=" bg-white shadow-modal overflow-auto col-span-full sm:col-start-3 xl:col-start-4 sm:col-span-8 rounded-t-sm  mt-4 sm:rounded-sm px-6 sm:px-10 py-6 sm:py-8 sm:my-6"
                    aria-labelledby=alert-modal-form-title alert-modal-otp-title>
                    <div class="flex flex-col gap-4">
                        <div class="flex items-start justify-between">

    <div class="flex justify-center items-center h-10 w-10 flex-shrink-0 rounded-full bg-yellow-50">
        <svg class="size-4 text-yellow-300" aria-hidden="true">
            <use href="/svg/services/alert.svg#alert"></use>
        </svg>
    </div>

                            <div class="ml-auto">
                                    <button
                                        aria-label="Fermer la fenêtre modale"
                                        class="ml-6"
                                        data-toggle-on-body-force-param="false"
                                        data-action="click->input-checker#uncheck click->modal#dispatchDiscardedEvent"
                                        data-cy="crossButton"
                                        type="button"
                                    >
                                            <svg class="size-3" aria-hidden="true">
                                                <use href="/svg/icons/nav/close.svg#close"></use>
                                            </svg>
                                    </button>
                            </div>
                        </div>

                    </div>

                    
    


<turbo-frame
    id="create-alert-modal"
    data-controller="update-turbo-src"
    data-update-turbo-src-target="turboFrame"
>
    <div
        data-controller="form-validator"
        data-form-validator-show-class="flex"
        data-form-validator-hide-class="hidden"
        data-form-validator-disabled-class="pointer-events-none"
        data-action="
            modal:discarded@document->form-validator#resetValidation
            page-restore:restored@document->form-validator#resetValidation
        "
    >
        <form
            id="alert-form"
            method="POST"
            data-form-validator-target="form"
            action="/fr-fr/alerte/create"
            data-turbo-frame="otp-input"
        >
            <turbo-frame
                id="otp-input"
                data-controller="frame-clearable"
                data-action="turbo:frame-render->form-validator#activateSubmitButton"
                class="block peer has-child:mt-3"
            ></turbo-frame>

            <span id="alert-modal-form-title" class="block typo-l-bold text-pretty mt-4 peer-has-child:hidden">
                <span class="not-connected:inline connected:hidden">Créez votre compte Hellowork et activez votre alerte</span>
                <span class="connected:inline not-connected:hidden">Créez une alerte</span>
            </span>

            <div
                class="peer-has-child:hidden mt-0"
                data-analytics-values-param='{"event": "EventGeneric", "EventName": "alert_step"}'
                data-action="focusin->analytics#push:once">
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6 w-full mt-8 mb-4 sm:mb-6">
                    

<div
    data-controller="input-validity autocomplete autocomplete-simple focus-group"
    data-input-validity-input-type-value="job"    data-input-validity-show-error-class="inline-flex"
    data-input-validity-hide-error-class="hidden"
    data-input-validity-label-error-class="input-label-error"
    data-input-validity-container-error-class="input-container-error"
    
    data-action="
        autocomplete:click:outside->autocomplete#closeDropdown
        autocomplete:click:outside:hasValue->input-validity#checkValidity
        autocomplete:selected->autocomplete-simple#fillSuggestion
        autocomplete:Job:selected->autocomplete-simple#fillSuggestion
        autocomplete:selected->input-validity#checkValidity
        autocomplete:Job:selected->input-validity#checkValidity
        valid-form:alert-form@window->input-validity#checkValidity
        reset-form:alert-form@window->input-validity#hideError
        reset-form:alert-form@window->autocomplete-simple#clearFieldIfNoSelection
        keydown.up->focus-group#focusPreviousElement
        keydown.down->focus-group#focusNextElement
    "
    data-autocomplete-url-value="https://www.hellowork.com/fr-fr/searchoffers/getjobsuggestionsframeview?displayMissingResultMessage=True"
    data-autocomplete-hiding-class="hidden"
    data-autocomplete-id-value="Job"
    class="relative"
>
    <label
        for="Job"
        data-input-validity-target="label"
        class="input-label"
    >
        M&#xE9;tier
    </label>
    <div
        class="input-container"
        data-input-validity-target="container"
        data-controller="clearable"
    >
        <input
            form="alert-form"
            id="Job"
            name="Job.DisplayLabel"
            data-input-validity-target="input"
            data-autocomplete-target="input"
            data-clearable-target="field"
            data-autocomplete-simple-target="field"
            data-action="
                autocomplete#suggestIfNeeded
                autocomplete-simple#clearSuggestion
                click->toggle#add
                click->toggle#removeAdditional
                focus->toggle#add
                focus->toggle#removeAdditional
            "
            class="peer"
            placeholder="Infirmier, commercial, comptable..."
            autocomplete="off"
            required
            value=""
            data-cy="jobAutocompleteInput"
            aria-describedby="Job_error"
            
        >
        <button
            type="button"
            class="hocus:!scale-[1.33] transform transition-transform peer-placeholder-shown:hidden"
            data-action="clearable#clear autocomplete-simple#clearSuggestion"
        >
            <svg class="size-3">
                <use href="/svg/icons/nav/close.svg#close"></use>
            </svg>
        </button>
    </div>
    <input
        
        data-input-validity-target="input"
        name="Job.JobCriterionUri"
        data-autocomplete-simple-target="hiddenInput"
        required
        class="absolute w-0 h-1 opacity-0"
        tabindex="-1"
        value=""
        data-action=""
    >
    <div class="relative">
        <turbo-frame
            id="jobAutocompleteFrame"
            data-autocomplete-target="dropdown frame"
            data-turbo="true"
            src=""
            class="absolute h-auto z-[1] top-0 left-0 w-full overflow-visible"
        >
        </turbo-frame>
    </div>
    <span
        id="Job_error"
        data-input-validity-target="error errorMessage"
        data-cy="Job_errorMessage"
        class="input-subtext-error hidden"
    >
        
    </span>
</div>


                    

<div
    data-controller="input-validity autocomplete autocomplete-simple focus-group"
        data-input-validity-show-error-class="inline-flex"
    data-input-validity-hide-error-class="hidden"
    data-input-validity-label-error-class="input-label-error"
    data-input-validity-container-error-class="input-container-error"
    
    data-action="
        autocomplete:click:outside->autocomplete#closeDropdown
        autocomplete:click:outside:hasValue->input-validity#checkValidity
        autocomplete:selected->autocomplete-simple#fillSuggestion
        autocomplete:Locality:selected->autocomplete-simple#fillSuggestion
        autocomplete:selected->input-validity#checkValidity
        autocomplete:Locality:selected->input-validity#checkValidity
        valid-form:alert-form@window->input-validity#checkValidity
        reset-form:alert-form@window->input-validity#hideError
        reset-form:alert-form@window->autocomplete-simple#clearFieldIfNoSelection
        keydown.up->focus-group#focusPreviousElement
        keydown.down->focus-group#focusNextElement
    "
    data-autocomplete-url-value="https://www.hellowork.com/fr-fr/search/getlocationsuggestionsframeview?displayMissingResultMessage=True"
    data-autocomplete-hiding-class="hidden"
    data-autocomplete-id-value="Locality"
    class="relative"
>
    <label
        for="Locality"
        data-input-validity-target="label"
        class="input-label"
    >
        Localit&#xE9;
    </label>
    <div
        class="input-container"
        data-input-validity-target="container"
        data-controller="clearable"
    >
        <input
            form="alert-form"
            id="Locality"
            data-input-validity-target="input"
            data-autocomplete-target="input"
            data-clearable-target="field"
            data-autocomplete-simple-target="field"
            data-action="
                autocomplete#suggestIfNeeded
                autocomplete-simple#clearSuggestion
                click->toggle#add
                click->toggle#removeAdditional
                focus->toggle#add
                focus->toggle#removeAdditional
            "
            class="peer"
            placeholder="Ville, d&#xE9;partement..."
            autocomplete="off"
            required
            value="Lille"
            data-cy="localityAutocompleteInput"
            aria-describedby="Locality_error"
            
        >
        <button
            type="button"
            class="hocus:!scale-[1.33] transform transition-transform peer-placeholder-shown:hidden"
            data-action="clearable#clear autocomplete-simple#clearSuggestion"
        >
            <svg class="size-3">
                <use href="/svg/icons/nav/close.svg#close"></use>
            </svg>
        </button>
    </div>
    <input
        
        data-input-validity-target="input"
        name="Location.Uri"
        data-autocomplete-simple-target="hiddenInput"
        required
        class="absolute w-0 h-1 opacity-0"
        tabindex="-1"
        value="http://www.rj.com/commun/localite/commune/59350"
        data-action=""
    >
    <div class="relative">
        <turbo-frame
            id="localityAutocompleteFrame"
            data-autocomplete-target="dropdown frame"
            data-turbo="true"
            src=""
            class="absolute h-auto z-[1] top-0 left-0 w-full overflow-visible"
        >
        </turbo-frame>
    </div>
    <span
        id="Locality_error"
        data-input-validity-target="error errorMessage"
        data-cy="Locality_errorMessage"
        class="input-subtext-error hidden"
    >
        
    </span>
</div>


                        

<div
    data-controller="input-validity input-checker email-autocomplete autocomplete-simple focus-group toggle-property toggle"
    data-input-checker-input-value="#emailReadonly"
    
            data-toggle-property-named-value=readOnly
            data-toggle-toggled-class=""
        
    data-action="
        toggle-property:toggled->input-checker#check
        toggle-property:toggled->toggle#toggle
        email-autocomplete:click:outside:hasValue->input-validity#checkValidity
        email-autocomplete:selected->autocomplete-simple#fillSuggestion
        email-autocomplete:selected->input-validity#checkValidity
        valid-form:alert-form@window->input-validity#checkValidity
        reset-form:alert-form@window->input-validity#hideError
        keydown.up->focus-group#focusPreviousElement
        keydown.down->focus-group#focusNextElement
        keydown.esc->email-autocomplete#closeDropdown
    "
    data-input-validity-show-error-class="inline-flex"
    data-input-validity-hide-error-class="hidden"
    data-input-validity-label-error-class="input-label-error"
    data-input-validity-container-error-class="input-container-error"
    data-email-autocomplete-hiding-class="hidden"
    class="relative"
>
    <input type="checkbox" id="emailReadonly" class="peer" hidden>

        <label
            for="Email"
            data-input-validity-target="label"
            class="input-label peer-checked:input-label-disabled "
        >
            Email
        </label>
    <div
        class="input-container peer-checked:input-container-disabled "
        data-input-validity-target="container"
        data-controller="clearable"
        data-toggle-target="toToggle"
    >
        <input
            class="peer input rounded-sm"
            data-cy="emailInput"
            type="email"
            id="Email"
            form="alert-form"
            name="OtpData.Email"
            value=""
            placeholder="contactezmoi@vite.com"
            autocomplete="email"
            pattern="^[a-zA-Z0-9]&#x2B;([a-zA-Z0-9._\&#x2B;\-]*[a-zA-Z0-9_\&#x2B;\-])?@[a-zA-Z0-9]&#x2B;([.\-][a-zA-Z0-9]&#x2B;)*\.[a-zA-Z]{2,}$"
            role="combobox"
            aria-autocomplete="list"
            aria-expanded="false"
            aria-controls="Email_suggestions"
            data-controller=from-account-data
            data-from-account-data-copy-value="Email"
            data-from-account-data-into-value="value"
            data-email-autocomplete-target="input"
            data-autocomplete-simple-target="field"
            data-clearable-target="field"
            data-input-validity-target="input"
            data-action="
                email-autocomplete#suggestEmail
                valid-form:alert-form@window->input-validity#checkValidity
                from-account-data:copied:Email-&gt;toggle-property#toggle"
            
            
            
            required
            
            
            
            data-toggle-property-target=toToggle
            
            aria-describedby="Email_error Email_info"
            
        >
            <button
                type="button"
                class="hocus:!scale-[1.33] transform transition-transform peer-placeholder-shown:hidden [input#emailReadonly:checked_~*_&]:hidden"
                data-cy="Email_clearButton"
                data-action="clearable#clear form-exit#makeDirty"
                aria-label="Effacer le champ email"
            >
                <svg class="size-3" aria-hidden="true">
                    <use href="/svg/icons/nav/close.svg#close"></use>
                </svg>
            </button>
    </div>
    <div class="relative">
        <div class="absolute h-auto top-0 left-0 w-full overflow-visible z-[1]">
            <ul id="Email_suggestions"
                role="listbox"
                data-email-autocomplete-target="dropdown"
                class="hidden bg-white typo-m mt-3 sm:border sm:border-grey-300 sm:rounded-sm sm:py-2">
                <template
                    data-email-autocomplete-target="itemTemplate"
                >
                    

<li role="option" class="hidden sm:px-2" data-email-autocomplete-provider-value="{{provider}}" data-email-autocomplete-target="item">
    <button
        type="button"
        class="w-full text-start hocus:bg-grey-50 rounded-xs pr-3 sm:pr-2 sm:py-2 overflow-hidden text-ellipsis py-3.5 pl-3 sm:pl-2"
        data-email-autocomplete-id-param="{{id}}"
        data-email-autocomplete-label-param="{{provider}}"
        data-focus-group-target="element"
        data-action="email-autocomplete#selectSuggestion">
        {{provider}}
    </button>
</li>
                </template>
            </ul>
        </div>
    </div>
    <span
        id="Email_error"
        data-input-validity-target="error errorMessage"
        data-cy="Email_errorMessage"
        class="input-subtext-error hidden"
    >
        
    </span>

    <div
        id="Email_info"
        class="input-subtext items-center hidden"
    >
        <svg class="mr-2 flex-shrink-0" aria-hidden="true">
            <use href="/svg/badges/info-xs.svg#info-xs"></use>
        </svg>
        <span></span>
    </div>
</div>

                </div>

                <div class="mt-4 sm:mt-6">
                    

<fieldset
    data-controller="input-validity"
        data-action="
        valid-form:alert-form@window->input-validity#checkValidity
        reset-form:alert-form@window->input-validity#hideError
        input->input-validity#checkValidity
    "
    data-input-validity-show-error-class="inline-flex"
    data-input-validity-hide-error-class="hidden"
    data-input-validity-container-error-class="checkbox-button-error"
    data-input-validity-label-error-class="input-label-error"
    >

        <legend
            data-input-validity-target="label"
            class="inline-block mb-3 text-sm ">
            Type de contrat
        </legend>

    <div
        id="Contracts"
        data-controller="checkbox-selector toggle"
        data-checkbox-selector-target="parent"
        data-toggle-toggled-class=hidden
        data-cy="checkboxList"
        class="flex flex-row flex-wrap gap-3"
    >
            

<div class="checkbox-button-secondary checkbox-button-secondary-s checkbox-black "
    data-input-validity-target="container"
    
    
>
    <input
        form="alert-form"
        data-cy="checkbox-CDI"
        type="checkbox"
        class="peer"
        id="ContractsCDI"
        name="Contracts"
        value="CDI"
        data-input-validity-target="input"
        
        
        data-action="
            click-&gt;checkbox-selector#atLeastOneIsChecked
            
            
            
            
        "
        
        required
        
            >
    <label for="ContractsCDI" class="flex items-center">
        <span class="hidden">
            <svg class="size-3 mr-2 peer-checked:[label_&]:hidden" aria-hidden="true">
                <use href="/svg/icons/add.svg#add"></use>
            </svg>
            <svg class="size-3 mr-2 hidden peer-checked:[label_&]:inline" aria-hidden="true">
                <use href="/svg/icons/tick.svg#tick"></use>
            </svg>
        </span>
        <span>
            CDI
        </span>
    </label>
</div>

            

<div class="checkbox-button-secondary checkbox-button-secondary-s checkbox-black "
    data-input-validity-target="container"
    
    
>
    <input
        form="alert-form"
        data-cy="checkbox-CDD"
        type="checkbox"
        class="peer"
        id="ContractsCDD"
        name="Contracts"
        value="CDD"
        data-input-validity-target="input"
        
        
        data-action="
            click-&gt;checkbox-selector#atLeastOneIsChecked
            
            
            
            
        "
        
        required
        
            >
    <label for="ContractsCDD" class="flex items-center">
        <span class="hidden">
            <svg class="size-3 mr-2 peer-checked:[label_&]:hidden" aria-hidden="true">
                <use href="/svg/icons/add.svg#add"></use>
            </svg>
            <svg class="size-3 mr-2 hidden peer-checked:[label_&]:inline" aria-hidden="true">
                <use href="/svg/icons/tick.svg#tick"></use>
            </svg>
        </span>
        <span>
            CDD
        </span>
    </label>
</div>

            

<div class="checkbox-button-secondary checkbox-button-secondary-s checkbox-black "
    data-input-validity-target="container"
    
    
>
    <input
        form="alert-form"
        data-cy="checkbox-Int&#xE9;rim"
        type="checkbox"
        class="peer"
        id="ContractsTravail_temp"
        name="Contracts"
        value="Travail_temp"
        data-input-validity-target="input"
        
        
        data-action="
            click-&gt;checkbox-selector#atLeastOneIsChecked
            
            
            
            
        "
        
        required
        
            >
    <label for="ContractsTravail_temp" class="flex items-center">
        <span class="hidden">
            <svg class="size-3 mr-2 peer-checked:[label_&]:hidden" aria-hidden="true">
                <use href="/svg/icons/add.svg#add"></use>
            </svg>
            <svg class="size-3 mr-2 hidden peer-checked:[label_&]:inline" aria-hidden="true">
                <use href="/svg/icons/tick.svg#tick"></use>
            </svg>
        </span>
        <span>
            Int&#xE9;rim
        </span>
    </label>
</div>

            

<div class="checkbox-button-secondary checkbox-button-secondary-s checkbox-black "
    data-input-validity-target="container"
    
    
>
    <input
        form="alert-form"
        data-cy="checkbox-Stage"
        type="checkbox"
        class="peer"
        id="ContractsStage"
        name="Contracts"
        value="Stage"
        data-input-validity-target="input"
        
        
        data-action="
            click-&gt;checkbox-selector#atLeastOneIsChecked
            
            
            
            
        "
        
        required
        
            >
    <label for="ContractsStage" class="flex items-center">
        <span class="hidden">
            <svg class="size-3 mr-2 peer-checked:[label_&]:hidden" aria-hidden="true">
                <use href="/svg/icons/add.svg#add"></use>
            </svg>
            <svg class="size-3 mr-2 hidden peer-checked:[label_&]:inline" aria-hidden="true">
                <use href="/svg/icons/tick.svg#tick"></use>
            </svg>
        </span>
        <span>
            Stage
        </span>
    </label>
</div>

            

<div class="checkbox-button-secondary checkbox-button-secondary-s checkbox-black "
    data-input-validity-target="container"
    
    
>
    <input
        form="alert-form"
        data-cy="checkbox-Alternance"
        type="checkbox"
        class="peer"
        id="ContractsAlternance"
        name="Contracts"
        value="Alternance"
        data-input-validity-target="input"
        
        
        data-action="
            click-&gt;checkbox-selector#atLeastOneIsChecked
            
            
            
            
        "
        
        required
        
            >
    <label for="ContractsAlternance" class="flex items-center">
        <span class="hidden">
            <svg class="size-3 mr-2 peer-checked:[label_&]:hidden" aria-hidden="true">
                <use href="/svg/icons/add.svg#add"></use>
            </svg>
            <svg class="size-3 mr-2 hidden peer-checked:[label_&]:inline" aria-hidden="true">
                <use href="/svg/icons/tick.svg#tick"></use>
            </svg>
        </span>
        <span>
            Alternance
        </span>
    </label>
</div>

            

<div class="checkbox-button-secondary checkbox-button-secondary-s checkbox-black "
    data-input-validity-target="container"
    
    
>
    <input
        form="alert-form"
        data-cy="checkbox-Ind&#xE9;pendant"
        type="checkbox"
        class="peer"
        id="ContractsIndependant"
        name="Contracts"
        value="Independant"
        data-input-validity-target="input"
        
        
        data-action="
            click-&gt;checkbox-selector#atLeastOneIsChecked
            
            
            
            
        "
        
        required
        
            >
    <label for="ContractsIndependant" class="flex items-center">
        <span class="hidden">
            <svg class="size-3 mr-2 peer-checked:[label_&]:hidden" aria-hidden="true">
                <use href="/svg/icons/add.svg#add"></use>
            </svg>
            <svg class="size-3 mr-2 hidden peer-checked:[label_&]:inline" aria-hidden="true">
                <use href="/svg/icons/tick.svg#tick"></use>
            </svg>
        </span>
        <span>
            Ind&#xE9;pendant
        </span>
    </label>
</div>

            

<div class="checkbox-button-secondary checkbox-button-secondary-s checkbox-black hidden"
    data-input-validity-target="container"
    
    data-toggle-target=toToggle
>
    <input
        form="alert-form"
        data-cy="checkbox-Franchise"
        type="checkbox"
        class="peer"
        id="ContractsFranchise"
        name="Contracts"
        value="Franchise"
        data-input-validity-target="input"
        
        
        data-action="
            click-&gt;checkbox-selector#atLeastOneIsChecked
            
            
            
            
        "
        
        required
        
            >
    <label for="ContractsFranchise" class="flex items-center">
        <span class="hidden">
            <svg class="size-3 mr-2 peer-checked:[label_&]:hidden" aria-hidden="true">
                <use href="/svg/icons/add.svg#add"></use>
            </svg>
            <svg class="size-3 mr-2 hidden peer-checked:[label_&]:inline" aria-hidden="true">
                <use href="/svg/icons/tick.svg#tick"></use>
            </svg>
        </span>
        <span>
            Franchise
        </span>
    </label>
</div>

            

<div class="checkbox-button-secondary checkbox-button-secondary-s checkbox-black hidden"
    data-input-validity-target="container"
    
    data-toggle-target=toToggle
>
    <input
        form="alert-form"
        data-cy="checkbox-Associ&#xE9;"
        type="checkbox"
        class="peer"
        id="ContractsAssocie"
        name="Contracts"
        value="Associe"
        data-input-validity-target="input"
        
        
        data-action="
            click-&gt;checkbox-selector#atLeastOneIsChecked
            
            
            
            
        "
        
        required
        
            >
    <label for="ContractsAssocie" class="flex items-center">
        <span class="hidden">
            <svg class="size-3 mr-2 peer-checked:[label_&]:hidden" aria-hidden="true">
                <use href="/svg/icons/add.svg#add"></use>
            </svg>
            <svg class="size-3 mr-2 hidden peer-checked:[label_&]:inline" aria-hidden="true">
                <use href="/svg/icons/tick.svg#tick"></use>
            </svg>
        </span>
        <span>
            Associ&#xE9;
        </span>
    </label>
</div>

            

<div class="checkbox-button-secondary checkbox-button-secondary-s checkbox-black hidden"
    data-input-validity-target="container"
    
    data-toggle-target=toToggle
>
    <input
        form="alert-form"
        data-cy="checkbox-Fonctionnaire"
        type="checkbox"
        class="peer"
        id="ContractsFonctionnaire"
        name="Contracts"
        value="Fonctionnaire"
        data-input-validity-target="input"
        
        
        data-action="
            click-&gt;checkbox-selector#atLeastOneIsChecked
            
            
            
            
        "
        
        required
        
            >
    <label for="ContractsFonctionnaire" class="flex items-center">
        <span class="hidden">
            <svg class="size-3 mr-2 peer-checked:[label_&]:hidden" aria-hidden="true">
                <use href="/svg/icons/add.svg#add"></use>
            </svg>
            <svg class="size-3 mr-2 hidden peer-checked:[label_&]:inline" aria-hidden="true">
                <use href="/svg/icons/tick.svg#tick"></use>
            </svg>
        </span>
        <span>
            Fonctionnaire
        </span>
    </label>
</div>

            

<div class="checkbox-button-secondary checkbox-button-secondary-s checkbox-black hidden"
    data-input-validity-target="container"
    
    data-toggle-target=toToggle
>
    <input
        form="alert-form"
        data-cy="checkbox-Freelance"
        type="checkbox"
        class="peer"
        id="ContractsFreelance"
        name="Contracts"
        value="Freelance"
        data-input-validity-target="input"
        
        
        data-action="
            click-&gt;checkbox-selector#atLeastOneIsChecked
            
            
            
            
        "
        
        required
        
            >
    <label for="ContractsFreelance" class="flex items-center">
        <span class="hidden">
            <svg class="size-3 mr-2 peer-checked:[label_&]:hidden" aria-hidden="true">
                <use href="/svg/icons/add.svg#add"></use>
            </svg>
            <svg class="size-3 mr-2 hidden peer-checked:[label_&]:inline" aria-hidden="true">
                <use href="/svg/icons/tick.svg#tick"></use>
            </svg>
        </span>
        <span>
            Freelance
        </span>
    </label>
</div>

            

<div class="checkbox-button-secondary checkbox-button-secondary-s checkbox-black hidden"
    data-input-validity-target="container"
    
    data-toggle-target=toToggle
>
    <input
        form="alert-form"
        data-cy="checkbox-Stage de lyc&#xE9;e"
        type="checkbox"
        class="peer"
        id="ContractsStage_de_lycee"
        name="Contracts"
        value="Stage_de_lycee"
        data-input-validity-target="input"
        
        
        data-action="
            click-&gt;checkbox-selector#atLeastOneIsChecked
            
            
            
            
        "
        
        required
        
            >
    <label for="ContractsStage_de_lycee" class="flex items-center">
        <span class="hidden">
            <svg class="size-3 mr-2 peer-checked:[label_&]:hidden" aria-hidden="true">
                <use href="/svg/icons/add.svg#add"></use>
            </svg>
            <svg class="size-3 mr-2 hidden peer-checked:[label_&]:inline" aria-hidden="true">
                <use href="/svg/icons/tick.svg#tick"></use>
            </svg>
        </span>
        <span>
            Stage de lyc&#xE9;e
        </span>
    </label>
</div>


            <button
                type="button"
                data-toggle-target="toToggle"
                class="basis-full hidden inline-flex gap-1 items-center hover:underline cursor-pointer bg-transparent typo-s"
                data-action="toggle#toggle"
                aria-expanded="true"
                aria-controls="Contracts"
                data-cy="seeLessButton">
                Voir moins
                <svg class="size-2" aria-hidden="true">
                    <use href="/svg/icons/arrow.svg#up"></use>
                </svg>
            </button>
            <button
                type="button"
                data-toggle-target="toToggle"
                class="basis-full inline-flex gap-1 items-center hover:underline cursor-pointer typo-s"
                data-action="toggle#toggle"
                aria-expanded="false"
                aria-controls="Contracts"
                data-cy="seeMoreButton">
                Voir plus
                <svg class="size-2" aria-hidden="true">
                    <use href="/svg/icons/arrow.svg#down"></use>
                </svg>
            </button>
    </div>

    <span
        data-input-validity-target="error errorMessage"
        data-cy="Contracts_errorMessage"
        class="input-subtext-error hidden">
        
    </span>
</fieldset>

                </div>
            </div>

            <div class="peer-has-child:hidden flex flex-col items-center connected:flex-col-reverse">
                <turbo-frame
                    id="gcu-checkbox-frame"
                    src="/fr-fr/gcu-checkbox-frame?formId=alert-form&amp;actionWording=cliquant%20sur%20Cr%C3%A9er%20mon%20alerte"
                    class="has-[[data-cgu=checkbox]]:mt-8 has-[[data-cgu=checkbox]]:mb-4 has-[[data-cgu=checkbox]]:sm:mb-3 has-[[data-cgu=wording]]:mt-4 has-[[data-cgu=wording]]:sm:mt-3 has-[[data-cgu=wording]]:text-center">
                </turbo-frame>
                <button
                    type="submit"
                    data-cy="alertCreation"
                    data-action="click->form-validator#onSubmit"
                    class="btn-primary-l bg-yellow-300 text-black w-full connected:mt-8">
                    <span data-form-validator-target="text" class="connected:inline not-connected:hidden">
                        Cr&#xE9;er mon alerte
                    </span>
                    <span data-form-validator-target="text" class="not-connected:inline connected:hidden">
                        Continuer
                    </span>
                    <div
                        data-form-validator-target="logo"
                        class="hidden">
                        <svg id="loader" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 60 60" xml:space="preserve" class="size-5 flex-shrink-0">
    <circle id="circle1" fill="currentColor" stroke="none" cx="6" cy="30" r="6">
        <animateTransform
            attributeName="transform"
            dur="1s"
            type="translate"
            values="0 15 ; 0 -15; 0 15"
            repeatCount="indefinite"
            begin="0.1"/>
    </circle>
    <circle fill="currentColor" stroke="none" cx="30" cy="30" r="6">
        <animateTransform
            attributeName="transform"
            dur="1s"
            type="translate"
            values="0 10 ; 0 -10; 0 10"
            repeatCount="indefinite"
            begin="0.2"/>
    </circle>
    <circle fill="currentColor" stroke="none" cx="54" cy="30" r="6">
        <animateTransform
            attributeName="transform"
            dur="1s"
            type="translate"
            values="0 5 ; 0 -5; 0 5"
            repeatCount="indefinite"
            begin="0.3"/>
    </circle>
</svg>
                    </div>
                </button>
            </div>
        </form>
    </div>

    


</turbo-frame>


                </div>
            </div>
        </div>
    </div>
</div>


</turbo-frame>


<turbo-frame id="service-adaptation" src=""
             data-controller="service-adaptation"
             data-service-adaptation-url-value="/fr-fr/country/getpopinframeview"
             data-service-adaptation-hide-message-class="hidden">
</turbo-frame>


<div 
    id="breadcrumb"
    class="layout-grid"
>

    <nav class="asSection pt-12 sm:pt-20 sm:bg-white">
        <ol class="flex flex-wrap sm:inline-block gap-x-2 text-grey-500 text-sm -mt-5">
            <li class="py-1 inline-block">
                <a href="https://www.hellowork.com/fr-fr/" title="Accueil" class="link-text">
                    Accueil
                </a>
            </li>
                    <li class="py-1 inline-block before:content-['>']">
                        <a href="https://www.hellowork.com/fr-fr/emploi.html"title="Emploi"class="link-text">
                            Emploi
                        </a>
                    </li>
                    <li class="py-1 inline-block before:content-['>']">
                        <span class="no-underline font-semibold text-black">
                            Recherche
                        </span>
                    </li>
        </ol>
    </nav>
</div>

<div class="mt-10">
    



<footer class="sm:layout-grid 2xl:mx-auto typo-s 2xl:mb-20 sm:mb-6 m-0">
    <div class="bg-grey-50 sm:rounded-sm !col-[full] grid grid-cols-subgrid py-6 xl:py-12
           sm:py-14 px-4 sm:px-0">
        <div class="layout-inner-grid sm:col-[main]">
            <div class="xl:col-span-3 col-span-5 sm:col-start-2 xl:col-start-1">      
                <span class="typo-l">
                    Les sites
                </span>
                <ul
                    class="flex flex-col gap-6 mt-4 mb-6 sm:mt-6 sm:mb-10"
                >
                    <li><a class="link-text" href="https://hellocv.com/" target="_blank" rel="noopener">HelloCV</a></li>
                    <li><a class="link-text" href="https://www.helloworkplace.fr/" target="_blank" rel="noopener">Helloworkplace</a></li>
                    <li><a class="link-text" href="https://www.blogdumoderateur.com/" target="_blank" rel="noopener">BDM</a></li>
                    <li><a class="link-text" href="https://www.jobijoba.com/fr/" target="_blank" rel="noopener">Jobijoba</a></li>
                    <li>
                        <span 
                            class="atc-text" 
                            data-controller="atc"
                            data-atc-l-value="xuggcf://jjj=pt=znsbezngvba=pt=se/f" 
                            data-atc-t-value="x_oynaxf"
                        >
                            Maformation
                        </span>
                    </li>
                    <li><a class="link-text" href="https://diplomeo.com/" target="_blank" rel="noopener">Diplomeo</a></li>
                </ul>
            </div>
            <div class="xl:col-span-3 col-span-5 sm:col-start-7 xl:col-start-4">
                <span class="typo-l">L&#x27;emploi</span>
                <ul
                    class="flex flex-col gap-6 mt-4 mb-6 sm:mt-6 sm:mb-10"
                >
                        <li>
                            <span 
                                class="atc-text" 
                                data-controller="atc"
                                data-atc-l-value="x/se-se/rzcybv/vaqrk-pngrtbevr=pt=ugzyf"
                            >
                                Offres d&#x27;emploi par m&#xE9;tier
                            </span>
                        </li>
                        <li>
                            <span 
                                class="atc-text" 
                                data-controller="atc"
                                data-atc-l-value="x/se-se/rzcybv/vaqrk-ybpnyvgr=pt=ugzyf"
                            >
                                Offres d&#x27;emploi par ville
                            </span>
                        </li>
                        <li>
                            <span 
                                class="atc-text" 
                                data-controller="atc"
                                data-atc-l-value="x/se-se/ragercevfr=pt=ugzyf"
                            >
                                Offres d&#x27;emploi par entreprise
                            </span>
                        </li>
                        <li>
                            <span 
                                class="atc-text" 
                                data-controller="atc"
                                data-atc-l-value="x/se-se/rzcybv/vaqrk-zbg-pyr=pt=ugzyf"
                            >
                                Offres d&#x27;emploi par mots cl&#xE9;s
                            </span>
                        </li>
                </ul>
            </div>
            <div class="xl:col-span-3 col-span-5 sm:col-start-2 xl:col-start-7">
                <span class="typo-l">
                    L'entreprise
                </span>
                <ul
                    class="flex flex-col gap-6 mt-4 mb-6 sm:mt-6 sm:mb-10"
                >
                    <li>
                        <span 
                            class="atc-text" 
                            data-controller="atc"
                            data-atc-l-value="xuggcf://jjj=pt=uryybjbex-tebhc=pt=pbzf" 
                            data-atc-t-value="x_oynaxf"
                        >
                            Qui sommes-nous&nbsp;?
                        </span>
                    </li>
                    <li>
                        <span 
                            class="atc-text" 
                            data-controller="atc"
                            data-atc-l-value="xuggcf://pneevrerf=pt=uryybjbex-tebhc=pt=pbzf" 
                            data-atc-t-value="x_oynaxf"
                        >
                            On recrute
                        </span>
                    </li>
                    <li>
                        <span 
                            class="atc-text" 
                            data-controller="atc"
                            data-atc-l-value="xuggcf://ohqqv=pt=uryybjbex=pt=pbzf"
                        >
                            Accès client
                        </span>
                    </li>
                </ul>
            </div>
            <div class="xl:col-span-3 col-span-5 sm:col-start-7 xl:col-start-10">
                <span class="typo-l">
                    Les apps
                </span>
                <div 
                    class="flex flex-wrap items-left flex-row sm:flex-col mt-4 sm:mt-6 mb-6 sm:mb-10 gap-6 sm:gap-4 sm:w-36 text-white"
                >
                        <span 
                            data-controller="atc"
                            data-atc-l-value="xuggcf://cynl=pt=tbbtyr=pt=pbz/fgber/nccf/qrgnvyf?vq=pbz=pt=ertvbafwbo=pt=naqebvqf"
                            data-atc-t-value="x_oynaxf"
                        >
                            <svg class="w-36 h-[42px] cursor-pointer rounded-sm"
                                 alt="Application Android (nouvelle fenêtre)">
                                <use href="/svg/icons/playstore-badge.svg#playstore-badge"></use>
                            </svg>
                        </span>
                        <span
                            data-controller="atc"
                            data-atc-l-value="xuggcf://nccf=pt=nccyr=pt=pbz/se/ncc/ertvbafwbo-rzcybv/vq408615037?zg=8f"
                            data-atc-t-value="x_oynaxf"
                        >
                            <svg class="w-[133px] h-[42px] cursor-pointer rounded-sm"
                                 alt="Application iOS (nouvelle fenêtre)">
                                <use href="/svg/icons/apps/appstore-badge.svg#appstore-badge"></use>
                            </svg>
                        </span>
                </div>
            </div>
            <div class="col-span-full sm:col-start-2 xl:col-start-1 flex flex-col gap-4 flex-wrap justify-between">
                <div
                    class="flex flex-col sm:flex-row gap-x-4 gap-y-2"
                >
                    <div>Nous suivre sur :</div>
                    <ul class="flex gap-4" aria-label="Liste de nos réseaux sociaux">
                            <li class="flex">
                                    <span
                                        class="m-auto hocus:text-grey-500 cursor-pointer"
                                        data-controller="atc"
                                        data-atc-l-value="xuggcf://jjj=pt=snprobbx=pt=pbz/uryybjbexpbzf"
                                        data-atc-t-value="x_oynaxf"
                                    >
                                        <svg class="size-4">
                                            <use href="/svg/icons/social-networks/facebook.svg#facebook"></use>
                                        </svg>
                                </span>
                            </li>
                            <li class="flex">
                                    <span
                                        class="m-auto hocus:text-grey-500 cursor-pointer"
                                        data-controller="atc"
                                        data-atc-l-value="xuggcf://jjj=pt=lbhghor=pt=pbz/punaary/HPel7GvA8-qSXDHtlHZLNAGDf"
                                        data-atc-t-value="x_oynaxf"
                                    >
                                        <svg class="size-4">
                                            <use href="/svg/icons/social-networks/youtube.svg#youtube"></use>
                                        </svg>
                                </span>
                            </li>
                            <li class="flex">
                                    <span
                                        class="m-auto hocus:text-grey-500 cursor-pointer"
                                        data-controller="atc"
                                        data-atc-l-value="xuggcf://gjvggre=pt=pbz/uryybjbexf"
                                        data-atc-t-value="x_oynaxf"
                                    >
                                        <svg class="size-4">
                                            <use href="/svg/icons/social-networks/x.svg#x"></use>
                                        </svg>
                                </span>
                            </li>
                            <li class="flex">
                                    <span
                                        class="m-auto hocus:text-grey-500 cursor-pointer"
                                        data-controller="atc"
                                        data-atc-l-value="xuggcf://jjj=pt=gvxgbx=pt=pbz/@uryybjbexpbzf"
                                        data-atc-t-value="x_oynaxf"
                                    >
                                        <svg class="size-4">
                                            <use href="/svg/icons/social-networks/tiktok.svg#tiktok"></use>
                                        </svg>
                                </span>
                            </li>
                            <li class="flex">
                                    <span
                                        class="m-auto hocus:text-grey-500 cursor-pointer"
                                        data-controller="atc"
                                        data-atc-l-value="xuggcf://jjj=pt=vafgntenz=pt=pbz/uryybjbex_/f"
                                        data-atc-t-value="x_oynaxf"
                                    >
                                        <svg class="size-4">
                                            <use href="/svg/icons/social-networks/instagram.svg#instagram"></use>
                                        </svg>
                                </span>
                            </li>
                            <li class="flex">
                                    <span
                                        class="m-auto hocus:text-grey-500 cursor-pointer"
                                        data-controller="atc"
                                        data-atc-l-value="xuggcf://jjj=pt=yvaxrqva=pt=pbz/pbzcnal/uryybjbexpbz/f"
                                        data-atc-t-value="x_oynaxf"
                                    >
                                        <svg class="size-4">
                                            <use href="/svg/icons/social-networks/linkedin.svg#linkedin"></use>
                                        </svg>
                                </span>
                            </li>
                            <li class="flex">
                                    <span
                                        class="m-auto hocus:text-grey-500 cursor-pointer"
                                        data-controller="atc"
                                        data-atc-l-value="xuggcf://cebsvyr=pt=tbbtyr=pt=pbz/pc/Pt0iMl8kZJM5ZKSeL3cef"
                                        data-atc-t-value="x_oynaxf"
                                    >
                                        <svg class="size-4">
                                            <use href="/svg/icons/social-networks/google.svg#google"></use>
                                        </svg>
                                </span>
                            </li>
                            <li class="flex">
                                    <span
                                        class="m-auto hocus:text-grey-500 cursor-pointer"
                                        data-controller="atc"
                                        data-atc-l-value="xuggcf://se=pt=cvagrerfg=pt=pbz/Uryybjbex_/f"
                                        data-atc-t-value="x_oynaxf"
                                    >
                                        <svg class="size-4">
                                            <use href="/svg/icons/social-networks/pinterest.svg#pinterest"></use>
                                        </svg>
                                </span>
                            </li>
                    </ul>
                </div>
                <div class="flex flex-wrap gap-x-2 sm:gap-x-4 gap-y-4">
                        <span 
                            class="atc-text" 
                            data-controller="atc"
                            data-atc-t-value="x_oynaxf"
                            data-atc-l-value="x/se-se/cntr/vasbf-yrtnyrf=pt=ugzyf"
                        >
                            Informations légales
                        </span>
                    <span 
                        class="atc-text" 
                        data-controller="atc"
                        data-atc-t-value="x_oynaxf"
                        data-atc-l-value="xuggcf://jjj=pt=uryybjbex-tebhc=pt=pbz/se/yrtny/pth-uryybjbex/f">
                        CGU
                    </span>
                    <span 
                        class="atc-text"
                        data-controller="atc"
                        data-atc-t-value="x_oynaxf"
                        data-atc-l-value="xuggcf://jjj=pt=uryybjbex-tebhc=pt=pbz/se/yrtny/cqp-uryybjbex/f">
                        Politique de confidentialité
                    </span>
                    <span 
                        class="link-text" 
                        data-hw-cc-btn-toggle-modal
                    >
                        Gérer les traceurs
                    </span>
                    <span
                        class="atc-text"
                        data-controller="atc"
                        data-atc-t-value="x_oynaxf"
                        data-atc-l-value="xuggcf://jjj=pt=uryybjbex-tebhc=pt=pbz/se/yrtny/qrpynengvba-npprffvovyvgr-uryybjbex/f">
                        Accessibilité : non conforme
                    </span>
                    <span 
                        class="atc-text" 
                        data-controller="atc"
                        data-atc-t-value="x_oynaxf"
                        data-atc-l-value="xuggcf://uryybjbex-pnaqvqng=pt=mraqrfx=pt=pbz/up/sef">
                        Aide et contact
                    </span>
                </div>
            </div>
        </div>
    </div>
</footer>
</div>


          
            <section
                id="turboStreamToastMessage"
                data-display-toast-message-target="turboStreamToastMessage"
                data-content-missing-target="container"
                class="
                    fixed
                    flex
                    flex-col
                    gap-y-4
                    z-50
                    w-full
                    -top-[90px]
                    px-4
                    sm:px-0
                    sm:w-auto
                    sm:top-24
                    sm:-right-[388px]
                    xl:-right-[448px]
                ">
            </section>

                <turbo-frame
                    id="dynamic-toast-messages"
                    src="/fr-fr/toastmessages">
                </turbo-frame>
            
<template data-content-missing-target="template"
          data-display-toast-message-target="errorTemplate">
    <div data-content-missing-target="instance">
        


    <div
    data-controller="removable intersect toggle timer"
    data-toggle-target="toToggle"
    data-intersect-name-value="notification"
    data-timer-timeout-value="5000"
    data-toggle-toggled-class="slidein"
    data-removable-animation-class="slideout"
    data-action="intersect:notification:enter->timer#start:once
    intersect:notification:enter->toggle#add
    timer:timeout->removable#remove
    mouseover->timer#pause
    mouseout->timer#pause"
    role="alert"
    class="rounded-sm
               flex
               items-center
               bg-blackToast
               shadow-toast
               p-4
               gap-4
               w-full
               min-h-[90px]
               sm:min-h-fit
               sm:w-[388px]
               xl:w-[448px]
               toast-scale">

        <svg class="h-7 w-7 flex-shrink-0" aria-hidden="true">
            <use href="/svg/badges/error.svg#error"></use>
        </svg>

        <div class="flex flex-col gap-2 text-white w-full">
                <p class="typo-s-bold">{{title}}</p>

                <div class="typo-s overflow-wrap-anywhere">
                    {{message}}
                </div>

                <span
                class="typo-s-bold atc-underline hover:no-underline"
                data-controller="atc"
                data-atc-l-value="{{link}}"
                >
                    {{linkLabel}}
                </span>
        </div>

        <button data-action="removable#remove" class="block" aria-label="Fermer la notification">
            <svg class="size-3 text-white">
                <use href="/svg/icons/nav/close.svg#close"></use>
            </svg>
        </button>



    </div>

    </div>
</template>

            

        </main>

        

        <script data-turbo-suppress-warning src="https://f.hellowork.com/hellowork/ressources/2.57.11/scripts/js/stimulus.js" data-turbo-eval="false" defer></script>
        <script src="https://f.hellowork.com/hellowork/ressources/2.57.11/scripts/js/general.js" defer></script>

        

        
    </body>
</html>