*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --n-950:#060F1A;--n-900:#0B1E35;--n-800:#122641;--n-700:#1B324F;
  --n-600:#253F60;--n-500:#334E70;--n-400:#4A6785;--n-300:#6B8FAD;
  --n-200:#9AB3C8;--n-100:#C8D8E6;--n-50:#EEF3F8;
  --blue:#1B5FA8;--blue-d:#124089;--blue-l:#EAF2FF;--blue-ll:#F4F8FF;
  --white:#FFFFFF;--bg:#F7F9FC;--bg2:#EEF3F8;
  --border:rgba(11,30,53,.1);--border2:rgba(11,30,53,.16);
  --text:#0B1E35;--text2:#4A6785;--text3:#8AA0B8;
  --r-sm:6px;--r-md:10px;--r-lg:16px;--r-xl:24px;
  --cop:#757baf;
}
html{scroll-behavior:smooth}
body{font-family:'Poppins',system-ui,sans-serif;color:var(--text);background:var(--white);font-size:var(--ty-body);line-height:1.6;-webkit-font-smoothing:antialiased;font-weight:400;text-rendering:optimizeLegibility}
a{text-decoration:none;color:inherit}svg{display:block;flex-shrink:0}

/* ── LAYOUT HELPERS ── */
.section{padding:88px 2.5rem}
.w{max-width:1280px;margin:0 auto}


.sdesc{font-size:var(--ty-body);color:var(--text2);line-height:1.8;max-width:560px;font-weight:300}
.sh-row{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;margin-bottom:44px}

/* ── HERO ── */
.hero{position:relative;overflow:hidden;padding:80px 2.5rem;background:linear-gradient(135deg,rgba(11,30,53,.52) 0%,rgba(11,30,53,.42) 100%),linear-gradient(135deg,#f5b0c8 0%,#a8d890 28%,#d8c060 58%,#757baf 100%)}
.hero-bg{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);background-size:64px 64px;pointer-events:none}
.hero-glow{position:absolute;top:-15%;right:-8%;width:700px;height:700px;border-radius:50%;background:radial-gradient(circle,rgba(117,123,175,.1) 0%,transparent 65%);pointer-events:none}
.hero-inner{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr);gap:5rem;align-items:center;position:relative;z-index:1}   /* 1 colonne depuis le 2026-11-02 : les chiffres sont passés dans le bandeau sous le héros */
.hero-inner > div{max-width:760px}
.hero-kicker{font-size:var(--ty-xs);font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--cop);margin-bottom:18px}


.hero-actions{display:flex;gap:12px;flex-wrap:wrap}

/* ── CHIFFRES CLÉS : bandeau sous le héros, comme les pages produit (2026-11-02 ; règles de produit.css recopiées comme sur courtiers.css,
   cette page ne charge ni produit.css ni global.css → teinte minéral en repli, comme Courtiers) ; compteurs = js/stats-band.js ── */
.stats-band{background:var(--lavande-d,#525377);color:#fff;padding:44px 2.5rem}
.stats-band-grid{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:32px}
.stats-band .hs-num{font-size:2.5rem;font-weight:800;line-height:1.05;letter-spacing:-1px;text-align:left;margin:0;color:#fff}
.stats-band .hs-lbl{font-size:var(--ty-xs);font-weight:500;letter-spacing:.4px;text-transform:uppercase;text-align:left;color:#fff;margin-top:8px}
@media(max-width:768px){.stats-band{padding:36px 1.25rem}.stats-band-grid{gap:24px 16px}}

/* ── WHY / FEATS ── */
.why-feats{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:48px}
.wf{display:flex;gap:14px;align-items:flex-start}
.wf-ico{width:36px;height:36px;border-radius:50%;background:var(--blue-l);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.wf-ico svg{width:16px;height:16px;stroke:var(--blue-d);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.wf-title{font-size:var(--ty-xs);font-weight:600;color:var(--n-900);margin-bottom:4px}
.wf-desc{font-size:var(--ty-xs);color:var(--text2);line-height:1.65;font-weight:300}

/* ── QUOTE ── */
.why-quote{background:var(--bg);border:1px solid var(--border);border-radius:var(--r-xl);padding:40px 52px;position:relative;overflow:hidden}
.wq-open{font-size:80px;line-height:.7;color:var(--n-100);font-family:Georgia,serif;position:absolute;top:18px;left:24px;user-select:none}
.wq-close{font-size:80px;line-height:.7;color:var(--n-100);font-family:Georgia,serif;position:absolute;bottom:10px;right:24px;user-select:none}
.wq-text{font-size:var(--ty-body);font-weight:600;color:var(--n-900);line-height:1.65;letter-spacing:-.2px}
.wq-attr{font-size:var(--ty-xs);color:var(--text3);margin-top:16px;text-align:right}

/* ── JOB CARDS ── */
.jobs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:28px}
.job-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r-xl);padding:28px;display:flex;flex-direction:column;gap:0;transition:all .2s;cursor:pointer;position:relative;overflow:hidden}
.job-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--cop);transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
.job-card:hover{box-shadow:0 8px 32px rgba(117,123,175,.12);border-color:var(--cop);transform:translateY(-2px)}
.job-card:hover::before{transform:scaleX(1)}
.job-badge{display:inline-flex;align-items:center;font-size:var(--ty-xs);font-weight:700;letter-spacing:.6px;text-transform:uppercase;border-radius:100px;padding:4px 12px;margin-bottom:16px;width:fit-content}
.job-badge.commercial{color:#1B5FA8;background:#EAF2FF;border:1px solid rgba(27,95,168,.2)}
.job-badge.technique{color:#757baf;background:rgba(117,123,175,.1);border:1px solid rgba(117,123,175,.25)}
.job-badge.digital{color:#6B4FBB;background:rgba(107,79,187,.08);border:1px solid rgba(107,79,187,.18)}
.job-title{font-size:var(--ty-body);font-weight:700;color:var(--n-900);line-height:1.35;margin-bottom:10px}
.job-meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.job-meta-item{display:flex;align-items:center;gap:5px;font-size:var(--ty-xs);color:var(--text3);font-weight:400}
.job-meta-item svg{width:13px;height:13px;stroke:var(--text3);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.job-contract{display:inline-flex;align-items:center;font-size:var(--ty-xs);font-weight:600;color:var(--n-700);background:var(--bg2);border-radius:4px;padding:2px 8px}
.job-desc{font-size:var(--ty-xs);color:var(--text2);line-height:1.65;font-weight:300;flex:1;margin-bottom:20px}
.job-cta{display:inline-flex;align-items:center;gap:5px;font-size:var(--ty-xs);font-weight:600;color:var(--cop);margin-top:auto;padding-bottom:2px;background-image:linear-gradient(currentColor,currentColor);background-size:0 1.5px;background-position:0 100%;background-repeat:no-repeat;transition:background-size .25s ease,gap .2s}
.job-card:hover .job-cta{gap:9px;background-size:100% 1.5px}

/* ── CANDIDATURE SPONTANÉE BANNER ── */
.spont-banner{border:1.5px solid var(--cop);border-radius:var(--r-lg);padding:22px 28px;display:flex;align-items:center;justify-content:space-between;gap:2rem;background:rgba(117,123,175,.06)}
.spont-banner .btn-navy{flex-shrink:0}   /* sans cela le bouton se comprimait à ≈ 1000 px et son libellé était coupé */
.spont-text{font-size:var(--ty-xs);font-weight:500;color:var(--n-900)}
.spont-text span{color:var(--cop)}

/* ── PROCESS STEPS ── */
.steps-row{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative;margin-top:48px}
.steps-row::before{content:'';position:absolute;top:24px;left:calc(12.5% + 24px);right:calc(12.5% + 24px);height:1px;background:var(--border2);z-index:0}
.step{display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 16px;position:relative;z-index:1}
.step-num{width:48px;height:48px;border-radius:50%;background:var(--blue);color:var(--white);font-size:16px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-bottom:20px;letter-spacing:-1px;box-shadow:0 0 0 6px var(--white),0 0 0 7px var(--border)}
.step-title{font-size:var(--ty-xs);font-weight:700;color:var(--n-900);margin-bottom:8px;line-height:1.3}
.step-desc{font-size:var(--ty-xs);color:var(--text2);line-height:1.65;font-weight:300}

/* ── GRAD BAR ── */

/* ── CTA ── */
.cta{background:var(--cop);padding:80px 2.5rem;position:relative;overflow:hidden}
.cta::before{content:'';position:absolute;top:-80px;right:5%;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.07) 0%,transparent 70%)}
.cta-inner{max-width:1280px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:3rem;position:relative;z-index:1}
.cta-h{font-size:var(--ty-h2-size);font-weight:800;color:var(--white);line-height:1.15;letter-spacing:-1.5px}
.cta-sub{font-size:var(--ty-body);color:rgba(255,255,255,.75);margin-top:10px;max-width:500px;font-weight:300}

/* ── FOOTER ── */

/* ── RESPONSIVE ── */
@media(max-width:900px){
  .hero-inner{grid-template-columns:1fr;gap:2.5rem}

  .steps-row{grid-template-columns:1fr 1fr;gap:2.5rem}
  .steps-row::before{display:none}
  .jobs-grid{grid-template-columns:1fr}
  .why-feats{grid-template-columns:1fr}
  .cta-inner{flex-direction:column;align-items:flex-start}
}
@media(max-width:768px){
  .section{padding:52px 1.25rem}
  .hero{padding:48px 1.25rem}
  .cta{padding:52px 1.25rem}
  .spont-banner{flex-direction:column;align-items:stretch;gap:1rem}
  .spont-banner .btn-navy{width:100%;justify-content:center;text-align:center;white-space:normal}   /* « Candidature spontanée → » en 18 px dépassait de 8 px à 320 px */
  .why-quote{padding:36px 28px}
}
@media(max-width:480px){
  .steps-row{grid-template-columns:1fr}
}

/* ── HÉROS : photo de la DA (images/hero-recrutement.jpg, 2000×1125, fournie le 2026-11-02 : fauteuil corail sur mur beige) ──
   Photo très claire et titre blanc → voile marine à gauche, comme le héros Courtiers ; la grille et le halo décoratifs de l'ancien dégradé sont masqués. */
.hero{background:linear-gradient(90deg,rgba(28,28,54,.78) 0%,rgba(28,28,54,.6) 45%,rgba(28,28,54,.15) 85%),url('../images/hero-recrutement.jpg') center/cover no-repeat}
.hero-bg,.hero-glow{display:none}
@media(max-width:768px){.hero{background:linear-gradient(rgba(28,28,54,.62),rgba(28,28,54,.62)),url('../images/hero-recrutement.jpg') center/cover no-repeat}}