:root {
  --ink: #21323a;
  --muted: #5e6e72;
  --paper: #fbfaf7;
  --white: #ffffff;
  --cream: #f1eadf;
  --sage: #dce7dc;
  --sage-deep: #547267;
  --coral: #e48c70;
  --coral-dark: #a95642;
  --line: #d8dfdb;
  --shadow: 0 18px 45px rgba(33, 50, 58, .08);
  --radius: 22px;
  font-family: "Trebuchet MS", "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); }
a { color: inherit; }
.container { width: min(1120px, calc(100% - 44px)); margin: 0 auto; }
.skip-link { position: absolute; left: 18px; top: -80px; z-index: 10; background: var(--ink); color: var(--white); padding: 12px 16px; border-radius: 8px; }
.skip-link:focus { top: 16px; }

.site-header { position: sticky; top: 0; z-index: 5; background: rgba(251, 250, 247, .95); border-bottom: 1px solid rgba(216, 223, 219, .8); backdrop-filter: blur(12px); }
.header-inner { min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--white); background: var(--sage-deep); font-family: Georgia, serif; font-size: 26px; }
.brand strong { display: block; font-family: Georgia, serif; font-size: 23px; letter-spacing: .02em; }
.brand small { display: block; color: var(--muted); font-size: 12px; line-height: 1.2; }
nav { display: flex; align-items: center; gap: 26px; font-size: 15px; }
nav a:not(.button) { text-decoration: none; color: var(--muted); }
nav a:not(.button):hover, nav a:not(.button):focus-visible { color: var(--ink); }

.button { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 12px 22px; border: 2px solid var(--coral); border-radius: 999px; background: var(--coral); color: var(--white); font-weight: 700; text-decoration: none; box-shadow: 0 8px 20px rgba(228, 140, 112, .22); }
.button:hover, .button:focus-visible { background: var(--coral-dark); border-color: var(--coral-dark); }
.button-small { min-height: 42px; padding: 9px 17px; font-size: 14px; }
.button-full { width: 100%; margin-top: 6px; }
.text-link { color: var(--ink); font-weight: 700; text-decoration-thickness: 2px; text-underline-offset: 5px; }

.hero { padding: 94px 0 84px; background: linear-gradient(135deg, var(--cream) 0%, var(--paper) 62%); }
.hero-grid { display: grid; grid-template-columns: 1.08fr .92fr; align-items: center; gap: 70px; }
.eyebrow { margin: 0 0 14px; color: var(--coral-dark); font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
h1, h2, h3 { margin: 0; font-family: Georgia, "Times New Roman", serif; line-height: 1.12; font-weight: 600; }
h1 { max-width: 680px; font-size: clamp(48px, 7vw, 82px); letter-spacing: -.045em; }
h2 { font-size: clamp(34px, 4vw, 52px); letter-spacing: -.03em; }
h3 { font-size: 25px; }
.hero-lead { max-width: 600px; margin: 24px 0 0; color: var(--muted); font-size: 20px; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 24px; margin-top: 32px; }
.availability-callout { display: inline-flex; align-items: center; gap: 12px; margin-top: 34px; padding: 14px 18px; border-left: 4px solid var(--sage-deep); background: rgba(255, 255, 255, .72); border-radius: 0 14px 14px 0; }
.status-dot, .legend-dot { display: inline-block; flex: 0 0 auto; width: 12px; height: 12px; border-radius: 50%; background: var(--sage-deep); }
.hero-card { min-height: 380px; display: flex; flex-direction: column; justify-content: space-between; padding: 38px; border-radius: 42% 42% 24px 24px; background: var(--sage); box-shadow: var(--shadow); transform: rotate(2deg); }
.hero-card-top, .hero-card-footer { display: flex; align-items: center; gap: 10px; color: var(--sage-deep); font-size: 14px; font-weight: 700; }
.sun-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--white); color: var(--coral); font-size: 22px; }
blockquote { margin: 34px 0; max-width: 390px; font-family: Georgia, serif; font-size: clamp(27px, 3vw, 40px); line-height: 1.15; letter-spacing: -.03em; }
.portrait-placeholder { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--coral); color: var(--white); font-family: Georgia, serif; font-size: 26px; }

.section-pad { padding: 100px 0; }
.intro-section { background: var(--white); }
.intro-grid, .story-grid, .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.intro-text { max-width: 560px; color: var(--muted); font-size: 18px; }
.intro-text p:first-child { margin-top: 0; }
.intro-text p:last-child { margin-bottom: 0; }
.services-section { background: var(--paper); }
.section-heading { display: flex; justify-content: space-between; gap: 40px; align-items: end; margin-bottom: 42px; }
.section-intro { max-width: 390px; margin: 0; color: var(--muted); font-size: 17px; }
.service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.service-card { min-height: 270px; padding: 28px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.service-card-accent { background: var(--cream); border-color: transparent; }
.service-number { display: inline-block; margin-bottom: 64px; color: var(--coral-dark); font-size: 14px; font-weight: 800; letter-spacing: .12em; }
.service-card p { margin: 13px 0 0; color: var(--muted); }

.titles-section { background: var(--white); }
.titles-intro { max-width: 800px; margin-bottom: 34px; color: var(--muted); font-size: 18px; }
.titles-intro p { margin-top: 0; }
.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.step-card { min-height: 265px; padding: 24px; border: 1px solid var(--line); border-radius: 18px; background: var(--paper); }
.step-number { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 30px; border-radius: 50%; background: var(--sage); color: var(--sage-deep); font-weight: 900; }
.step-card h3 { font-size: 22px; }
.step-card p { margin: 10px 0 0; color: var(--muted); }
.small-link { display: inline-block; margin-top: 14px; color: var(--coral-dark); font-size: 14px; font-weight: 800; text-underline-offset: 4px; }
.titles-note { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: baseline; margin-top: 28px; padding: 18px 20px; border-left: 4px solid var(--coral); background: var(--cream); }
.titles-note strong { font-family: Georgia, serif; font-size: 21px; }
.titles-note p { margin: 0; color: var(--muted); }

.agenda-section { background: var(--sage); }
.agenda-heading .eyebrow { color: var(--sage-deep); }
.agenda-wrap { padding: 28px; border-radius: var(--radius); background: rgba(255,255,255,.72); }
.agenda-meta { display: flex; flex-wrap: wrap; gap: 22px; margin-bottom: 20px; color: var(--muted); font-size: 14px; }
.agenda-meta span { display: inline-flex; align-items: center; gap: 8px; }
.legend-dot.busy { background: #aebdb9; }
.legend-dot.free { background: var(--coral); }
.schedule { overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--white); }
.schedule-header, .schedule-row { display: grid; grid-template-columns: 1fr 1fr 1fr; }
.schedule-header { background: var(--ink); color: var(--white); font-weight: 700; }
.schedule-header > *, .schedule-row > * { padding: 14px 18px; }
.schedule-header small, .slot small { display: block; font-weight: 400; font-size: 12px; opacity: .78; }
.schedule-row { border-top: 1px solid var(--line); align-items: stretch; }
.schedule-row strong { display: flex; align-items: center; font-family: Georgia, serif; font-size: 19px; }
.slot { display: flex; flex-direction: column; justify-content: center; color: var(--muted); }
.slot.busy { background: #f2f4f2; }
.slot.free { background: #fff0e9; color: var(--coral-dark); }
.slot.free b { font-size: 18px; }
.schedule-note { margin: 16px 0 0; color: var(--muted); font-size: 14px; }

.story-section { background: var(--white); }
.story-panel { padding-right: 30px; }
.story-panel p:not(.eyebrow) { max-width: 570px; color: var(--muted); font-size: 18px; }
.values-list { display: grid; gap: 14px; }
.values-list > div { display: grid; grid-template-columns: 38px 1fr; column-gap: 14px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.values-list > div:first-child { padding-top: 0; }
.values-list span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--sage); color: var(--sage-deep); font-weight: 900; }
.values-list strong { font-family: Georgia, serif; font-size: 22px; }
.values-list p { grid-column: 2; margin: 2px 0 0; color: var(--muted); }
.area-section { background: var(--cream); }
.area-card { display: flex; justify-content: space-between; align-items: center; gap: 50px; padding: 44px 52px; border-radius: 30px; background: var(--white); box-shadow: var(--shadow); }
.area-card p:not(.eyebrow) { max-width: 650px; margin-bottom: 0; color: var(--muted); font-size: 18px; }
.radius-badge { display: flex; align-items: center; gap: 12px; min-width: 160px; color: var(--sage-deep); }
.radius-badge strong { font-family: Georgia, serif; font-size: 80px; line-height: .8; }
.radius-badge span { font-size: 16px; font-weight: 800; line-height: 1.05; }

.contact-section { background: var(--paper); }
.contact-grid { align-items: center; }
.contact-grid > div:first-child p:not(.eyebrow) { max-width: 560px; margin-bottom: 0; color: var(--muted); font-size: 18px; }
.contact-card { padding: 30px; border-radius: var(--radius); background: var(--ink); color: var(--white); box-shadow: var(--shadow); }
.contact-line { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.16); }
.contact-line > span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--sage); color: var(--sage-deep); font-size: 18px; }
.contact-line small, .contact-line strong { display: block; }
.contact-line small { color: #c9d5d2; font-size: 12px; }
.contact-line strong { font-size: 17px; }
.contact-line a { color: var(--white); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.contact-card .button { margin-top: 24px; }

.recruitment-hero { padding: 96px 0 88px; background: linear-gradient(135deg, var(--sage) 0%, var(--paper) 70%); }
.recruitment-hero-inner { max-width: 850px; }
.recruitment-hero h1 { max-width: 820px; }
.recruitment-story { background: var(--white); }
.recruitment-copy { max-width: 570px; color: var(--muted); font-size: 18px; }
.recruitment-copy p:first-child { margin-top: 0; }
.recruitment-copy p:last-child { margin-bottom: 0; }
.recruitment-opportunity { background: var(--paper); }
.recruitment-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.recruitment-card { min-height: 280px; padding: 28px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.recruitment-card-accent { background: var(--cream); border-color: transparent; }
.recruitment-card p { margin: 13px 0 0; color: var(--muted); }
.recruitment-letter { background: var(--cream); }
.letter-card { display: grid; grid-template-columns: 1.1fr .9fr; gap: 60px; align-items: center; padding: 48px 52px; border-radius: 30px; background: var(--white); box-shadow: var(--shadow); }
.letter-card > div:first-child p:not(.eyebrow) { max-width: 600px; margin-bottom: 0; color: var(--muted); font-size: 18px; }
.letter-contact { padding: 24px; border-radius: 18px; background: var(--ink); color: var(--white); }
.letter-contact p { margin-top: 0; }
.letter-contact a:not(.button) { color: var(--white); }
.muted-small { color: #c9d5d2; font-size: 14px; }

.site-footer { padding: 30px 0; background: var(--ink); color: var(--white); }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.footer-inner strong, .footer-inner span { display: block; }
.footer-inner span, .footer-inner p { margin: 0; color: #c9d5d2; font-size: 13px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 10px 18px; }
.footer-links a { color: #f4f8f6; font-size: 13px; }
.legal-page { background: var(--paper); }
.legal-card { max-width: 820px; padding: 44px 50px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow); }
.legal-card h1 { margin-bottom: 20px; }
.legal-card h2 { margin-top: 38px; font-size: 30px; }
.legal-card p, .legal-card li { color: var(--muted); font-size: 17px; }
.legal-card strong { color: var(--ink); }
.legal-card a { color: var(--sage-deep); font-weight: 700; }
.legal-alert { padding: 18px 20px; border-left: 4px solid var(--coral); border-radius: 10px; background: #fff5ef; }
.legal-alert p { margin: 0; }

:focus-visible { outline: 4px solid #f3bd54; outline-offset: 4px; }
@media (max-width: 800px) {
  .header-inner { min-height: 72px; }
  nav a:not(:last-child) { display: none; }
  .hero { padding: 64px 0; }
  .hero-grid, .intro-grid, .story-grid, .contact-grid { grid-template-columns: 1fr; gap: 42px; }
  .hero-card { min-height: 300px; transform: none; }
  .section-pad { padding: 72px 0; }
  .section-heading { display: block; }
  .section-intro { margin-top: 18px; }
  .service-grid { grid-template-columns: 1fr; }
  .service-card { min-height: auto; }
  .service-number { margin-bottom: 30px; }
  .steps-grid { grid-template-columns: 1fr; }
  .step-card { min-height: auto; }
  .titles-note { display: block; }
  .titles-note p { margin-top: 8px; }
  .recruitment-cards { grid-template-columns: 1fr; }
  .recruitment-card { min-height: auto; }
  .letter-card { grid-template-columns: 1fr; gap: 32px; padding: 34px; }
  .area-card { display: block; padding: 34px; }
  .radius-badge { margin-top: 34px; }
  .footer-inner { display: block; }
  .footer-inner p { margin-top: 18px; }
  .footer-links { margin-top: 18px; }
  .legal-card { padding: 32px 24px; }
}
@media (max-width: 520px) {
  .container { width: min(100% - 28px, 1120px); }
  h1 { font-size: 48px; }
  h2 { font-size: 37px; }
  .brand small { display: none; }
  .hero-actions { align-items: flex-start; flex-direction: column; }
  .schedule-header > *, .schedule-row > * { padding: 12px 10px; font-size: 14px; }
  .schedule-row strong { font-size: 16px; }
  .slot.free b { font-size: 15px; }
}
<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Rejoindre Épicurien : une activité familiale de titres-services et d’aide à domicile autour de Wasseiges et Hannut.">
  <title>Nous rejoindre | Épicurien</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <a class="skip-link" href="#contenu">Aller directement au contenu</a>

  <header class="site-header">
    <div class="container header-inner">
      <a class="brand" href="index.html#accueil" aria-label="Épicurien, retour à l'accueil">
        <span class="brand-mark" aria-hidden="true">É</span>
        <span>
          <strong>Épicurien</strong>
          <small>Aide à domicile &amp; titres-services</small>
        </span>
      </a>
      <nav aria-label="Navigation principale">
        <a href="index.html#services">Nos services</a>
        <a href="index.html#agenda">Disponibilités</a>
        <a href="nous-rejoindre.html" aria-current="page">Nous rejoindre</a>
        <a class="button button-small" href="index.html#contact">Nous contacter</a>
      </nav>
    </div>
  </header>

  <main id="contenu">
    <section class="recruitment-hero">
      <div class="container recruitment-hero-inner">
        <p class="eyebrow">Une activité locale et humaine</p>
        <h1>Vous aimeriez travailler dans les titres-services&nbsp;?</h1>
        <p class="hero-lead">Épicurien grandit doucement, avec le même esprit familial et la même attention portée aux personnes.</p>
      </div>
    </section>

    <section class="section-pad recruitment-story">
      <div class="container recruitment-grid">
        <div>
          <p class="eyebrow">Notre histoire</p>
          <h2>Une famille, un métier, une vraie relation de confiance.</h2>
        </div>
        <div class="recruitment-copy">
          <p>Épicurien est une entreprise familiale de Wasseiges, près de Hannut. Myriam Scalliet, gouvernante expérimentée, travaille encore aujourd’hui avec beaucoup d’énergie auprès de ses clients, après bientôt dix ans d’expérience.</p>
          <p>Son fils, Laurent De Blende, gérant de la société et actif à Bruxelles, accompagne le développement de cette activité locale. L’objectif est simple&nbsp;: proposer des prestations ménagères fiables et respectueuses dans le cadre autorisé, tout en construisant une équipe à taille humaine.</p>
        </div>
      </div>
    </section>

    <section class="section-pad recruitment-opportunity">
      <div class="container">
        <div class="section-heading">
          <div>
            <p class="eyebrow">Nous sommes ouverts aux rencontres</p>
            <h2>Une expérience à partager&nbsp;?</h2>
          </div>
          <p class="section-intro">Vous avez déjà travaillé dans les titres-services, l’aide à domicile ou l’entretien&nbsp;? Vous pouvez nous écrire.</p>
        </div>
        <div class="recruitment-cards">
          <article class="recruitment-card">
            <span class="service-number" aria-hidden="true">01</span>
            <h3>Vous avez de l’expérience</h3>
          <p>Votre parcours dans les titres-services ou l’entretien à domicile peut trouver sa place dans une petite structure locale.</p>
          </article>
          <article class="recruitment-card recruitment-card-accent">
            <span class="service-number" aria-hidden="true">02</span>
            <h3>Vous avez envie d’aider</h3>
            <p>Le sérieux, la ponctualité, la discrétion et le respect des personnes sont aussi importants que l’expérience.</p>
          </article>
          <article class="recruitment-card">
            <span class="service-number" aria-hidden="true">03</span>
            <h3>Vous cherchez une activité humaine</h3>
            <p>Nous pouvons prendre le temps d’échanger sur vos envies, vos disponibilités et la manière dont vous pourriez nous rejoindre.</p>
          </article>
        </div>
      </div>
    </section>

    <section class="section-pad recruitment-letter">
      <div class="container letter-card">
        <div>
          <p class="eyebrow">Envoyez-nous un petit courrier</p>
          <h2>Parlez-nous de vous.</h2>
          <p>Quelques lignes suffisent pour commencer&nbsp;: votre expérience, la région où vous habitez, vos disponibilités et ce qui vous attire dans les prestations ménagères à domicile.</p>
        </div>
        <div class="letter-contact">
          <p><strong>Courrier ou email</strong><br><a href="tel:+32495187504">0495 18 75 04</a><br><a href="mailto:contact@epicurien.info">contact@epicurien.info</a></p>
          <p class="muted-small">Nous vous répondrons simplement, sans formulaire automatique ni procédure compliquée.</p>
          <a class="button button-full" href="index.html#contact">Voir nos coordonnées</a>
        </div>
      </div>
    </section>
  </main>

  <footer class="site-footer">
    <div class="container footer-inner">
      <div><strong>Épicurien</strong><span>Aide à domicile &amp; titres-services</span></div>
      <p>© 2026 Épicurien · Wasseiges, près de Hannut · Français</p>
      <nav class="footer-links" aria-label="Informations légales"><a href="mentions-legales.html">Mentions légales</a><a href="vie-privee.html">Vie privée</a><a href="cookies.html">Cookies</a><a href="accessibilite.html">Accessibilité</a></nav>
    </div>
  </footer>
</body>
</html>