/* ============================================================
   ARGANE \002014 Page Carri\0000e8re (liste des postes)
   ============================================================ */
:root{
  --forge:#081F2C;
  --acier:#253746;
  --ardoise:#57728B;
  --ardoise-brut:#506D85;
  --braise:#EE2737;
  --paper:#FAFAFA;
  --paper-warm:#F2F2F2;
  --ink-10:rgba(250,250,250,0.10);
  --ink-15:rgba(250,250,250,0.15);
  --paper-60:rgba(250,250,250,0.60);
  --forge-15:rgba(8,31,44,0.12);
  --forge-08:rgba(8,31,44,0.08);

  --ff-display:"Space Grotesk", sans-serif;
  --ff-body:"DM Sans", sans-serif;
  --ff-mono:"DM Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --gutter:clamp(20px, 4vw, 64px);
  --max:1440px;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html,body{overflow-x:clip;}
html{background:var(--forge);}
body{
  background:transparent;
  color:var(--paper);
  font-family:var(--ff-body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.util{z-index:70;}
.nav{z-index:60;}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
:focus-visible{outline:2px solid var(--braise); outline-offset:3px; border-radius:2px;}

.wrap{
  width:100%;
  max-width:var(--max);
  margin-inline:auto;
  padding:0 var(--gutter);
}

/* ============================================================
   HERO
   ============================================================ */
.car-hero{
  position:relative;
  background:var(--forge);
  color:var(--paper);
  padding:var(--sp-hero-top) 0 var(--sp-hero-bottom);
  overflow:hidden;
}
.car-hero .wrap{position:relative; z-index:1; display:grid; grid-template-columns:1.25fr 1fr; gap:clamp(36px,5vw,80px); align-items:start;}
.car-hero .breadcrumb{grid-column:1/-1;}
@media (max-width:900px){.car-hero .wrap{grid-template-columns:1fr; gap:28px;}}
.breadcrumb{
  display:flex; align-items:center; flex-wrap:wrap; gap:10px;
  font-family:var(--ff-body); font-size:12px; letter-spacing:0.04em;
  color:var(--ardoise); margin-bottom:var(--sp-crumb-gap);
}
.breadcrumb a{color:var(--ardoise); transition:color .2s ease;}
.breadcrumb a:hover{color:var(--braise);}
.breadcrumb .sep{color:rgba(250,250,250,0.25);}
.breadcrumb .current{color:var(--paper);}

.car-hero h1{
  font-family:var(--ff-display); font-weight:500;
  font-size:var(--fs-display); line-height:0.94; letter-spacing:-0.04em;
  color:var(--paper); margin:0;
}
.car-hero h1 em{font-style:normal;}
.car-hero .lead{
  margin:0; font-family:var(--ff-body); font-size:var(--fs-lead);
  line-height:1.62; color:rgba(250,250,250,0.62); max-width:52ch;
}

/* ============================================================
   \0000ab Travailler chez Argane \0000bb \002014 3 points concrets
   ============================================================ */
.car-why{
  background:var(--paper); color:var(--forge);
  padding:var(--sp-section) 0;
}
.car-why-head{
  max-width:64ch; margin-bottom:clamp(40px,5vw,64px);
}
.car-why-head h2{
  font-family:var(--ff-display); font-weight:500;
  font-size:var(--fs-h2); line-height:0.98; letter-spacing:-0.035em; margin:0;
}
.car-why-head p{
  font-family:var(--ff-body); font-size:16px; line-height:1.6;
  color:var(--acier); max-width:48ch; margin:0;
}
.car-why-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.4vw,36px);
}
.car-why-item{
  border-top:2px solid var(--forge); padding-top:24px;
}
.car-why-item .n{
  font-family:var(--ff-mono); font-size:12px; letter-spacing:0.16em;
  color:var(--braise); display:block; margin-bottom:16px;
}
.car-why-item h3{
  font-family:var(--ff-body); font-weight:600; font-size:20px;
  letter-spacing:-0.02em; line-height:1.2; margin:0 0 10px;
}
.car-why-item p{
  font-family:var(--ff-body); font-size:15px; line-height:1.55;
  color:var(--acier); margin:0;
}

/* ============================================================
   POSTES OUVERTS
   ============================================================ */
.car-jobs{
  background:var(--paper-warm); color:var(--forge);
  padding:clamp(64px,8vw,120px) 0 clamp(80px,10vw,140px);
}
.car-jobs-head{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:24px; flex-wrap:wrap; margin-bottom:clamp(28px,3vw,40px);
}
.car-jobs-head h2{
  font-family:var(--ff-display); font-weight:500;
  font-size:var(--fs-h2); line-height:0.98; letter-spacing:-0.035em; margin:0;
}
.car-jobs-count{
  font-family:var(--ff-mono); font-size:13px; letter-spacing:0.06em;
  color:var(--acier);
}
.car-jobs-count strong{color:var(--braise); font-weight:500;}

/* Filtres */
.car-filters{
  display:flex; flex-wrap:wrap; gap:10px;
  margin-bottom:clamp(36px,4vw,48px);
}
.car-filter{
  font-family:var(--ff-body); font-size:13px; font-weight:500;
  letter-spacing:0.01em; color:var(--acier);
  padding:10px 18px; border-radius:999px;
  border:1.5px solid var(--forge-15); background:transparent;
  cursor:pointer; transition:background .2s ease, border-color .2s ease, color .2s ease;
}
.car-filter:hover{border-color:var(--ardoise); color:var(--forge);}
.car-filter.active{background:var(--forge); border-color:var(--forge); color:var(--paper);}

/* Liste */
.car-list{
  display:flex; flex-direction:column;
  border-top:1px solid var(--forge-15);
}
.car-job{
  display:grid;
  grid-template-columns:minmax(0,1.7fr) minmax(0,1fr) auto;
  align-items:center; gap:clamp(20px,3vw,48px);
  padding:clamp(26px,3vw,38px) 0;
  border-bottom:1px solid var(--forge-15);
  color:var(--forge);
  transition:padding-left .3s ease;
}
.car-job:hover{padding-left:12px;}
.car-job-main{min-width:0;}
.car-job h3{
  font-family:var(--ff-display); font-weight:500;
  font-size:clamp(22px,2.1vw,30px); line-height:1.05; letter-spacing:-0.025em;
  margin:0 0 12px; transition:color .2s ease;
}
.car-job:hover h3{color:var(--braise);}
.car-job-desc{
  font-family:var(--ff-body); font-size:15px; line-height:1.55;
  color:var(--acier); max-width:56ch; margin:0;
}
.car-job-tags{
  display:flex; flex-direction:column; gap:10px;
}
.car-tag{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--ff-body); font-size:13px; color:var(--acier);
}
.car-tag svg{width:15px; height:15px; color:var(--ardoise); flex:0 0 auto;}
.car-tag.contract{
  align-self:flex-start;
  font-family:var(--ff-mono); font-size:11px; letter-spacing:0.10em;
  text-transform:uppercase; color:var(--forge);
  background:rgba(8,31,44,0.06); padding:6px 12px; border-radius:999px; gap:0;
}
.car-job-cta{
  flex:0 0 auto;
  width:54px; height:54px; border-radius:50%;
  border:1.5px solid var(--forge-15);
  display:flex; align-items:center; justify-content:center;
  color:var(--forge);
  transition:background .25s ease, border-color .25s ease, color .25s ease, transform .25s ease;
}
.car-job:hover .car-job-cta{
  background:var(--braise); border-color:var(--braise); color:var(--paper);
  transform:translateX(4px);
}
.car-job-cta svg{width:20px; height:14px;}
.car-job[hidden]{display:none;}

.car-empty{
  display:none; padding:48px 0; text-align:center;
  font-family:var(--ff-body); font-style:italic; font-weight:300;
  color:var(--acier); font-size:16px;
}
.car-empty.show{display:block;}

/* Candidature spontan\0000e9e */
.car-spontane{
  margin-top:clamp(40px,5vw,64px);
  background:var(--forge); color:var(--paper);
  border-radius:clamp(12px,1.4vw,18px);
  padding:clamp(36px,4.5vw,64px);
  display:grid; grid-template-columns:1.6fr 1fr; gap:clamp(28px,4vw,56px);
  align-items:center;
}
.car-spontane h2{
  font-family:var(--ff-display); font-weight:500;
  font-size:var(--fs-h3); line-height:1.02; letter-spacing:-0.03em; margin:0 0 14px;
}
.car-spontane p{
  font-family:var(--ff-body); font-size:15px; line-height:1.6;
  color:rgba(250,250,250,0.78); max-width:54ch; margin:0;
}
.car-spontane-cta{display:flex; justify-content:flex-end;}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:900px){
  .car-why-grid{grid-template-columns:1fr;}
  .car-why-item{border-top-width:1px;}
  .car-job{
    grid-template-columns:1fr auto;
    grid-template-areas:"main cta" "tags cta";
    row-gap:18px; align-items:start;
  }
  .car-job-main{grid-area:main;}
  .car-job-tags{grid-area:tags; flex-direction:row; flex-wrap:wrap; gap:8px 18px;}
  .car-job-cta{grid-area:cta; align-self:center;}
  .car-job:hover{padding-left:0;}
  .car-spontane{grid-template-columns:1fr; gap:24px;}
  .car-spontane-cta{justify-content:flex-start;}
}
@media (max-width:520px){
  .car-job-cta{width:46px; height:46px;}
}