/* Feuille principale — toutes les valeurs viennent de tokens.css */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--f-ui);background:var(--bg);color:var(--fg);font-size:var(--t-md);line-height:var(--lh);
     -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.wrap{max-width:1020px;margin:0 auto;padding:0 var(--s5)}

/* ---------- en-tête ---------- */
.top{background:var(--card);border-bottom:1px solid var(--line);padding:var(--s5) 0}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:var(--s6)}
h1{margin:0 0 var(--s2);font-family:var(--f-display);font-size:var(--t-2xl);line-height:var(--lh-tight);
   font-weight:400;letter-spacing:-.015em;max-width:36ch;text-wrap:balance}
.sub{margin:0;color:var(--muted);font-size:var(--t-sm);max-width:72ch;line-height:var(--lh)}
.sub b{color:var(--fg);font-weight:600}

/* marque — c'est le titre de la page, donc un h1 */
h1.mark{margin:0;font-size:inherit;max-width:none}
.mark a{display:inline-flex;align-items:baseline;gap:var(--s2);text-decoration:none;color:var(--fg)}
.mark .wordmark{font-family:var(--f-display);font-size:var(--t-xl);letter-spacing:-.01em;font-weight:400}
.mark .dot{width:7px;height:7px;border-radius:var(--r-pill);background:var(--acc);display:inline-block}

/* ---------- boutons : trois niveaux, une hauteur ---------- */
.btn,.lang,.pager button{font:inherit;font-size:var(--t-sm);height:var(--ctl);padding:0 var(--s4);
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  border:1px solid var(--line-strong);border-radius:var(--r-sm);background:var(--card);color:var(--fg);
  cursor:pointer;text-decoration:none;white-space:nowrap;transition:border-color .12s,color .12s,background .12s}
.btn:hover,.lang:hover,.pager button:hover{border-color:var(--acc);color:var(--acc)}
.btn-primary{background:var(--acc);border-color:var(--acc);color:var(--acc-fg);font-weight:600}
.btn-primary:hover{background:var(--acc);border-color:var(--acc);color:var(--acc-fg);opacity:.9}
.head-actions{display:flex;gap:var(--s2);align-items:center;flex-shrink:0}

/* ---------- barre de pouls ---------- */
.pulse{margin:var(--s6) 0 var(--s2)}
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3)}
.pchip{font:inherit;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;
  min-height:76px;padding:var(--s4) var(--s5);border:1px solid var(--line-strong);border-radius:var(--r-md);
  background:var(--card);cursor:pointer;color:var(--muted);font-size:var(--t-sm);text-align:left;transition:all .12s}
.pchip b{font-family:var(--f-display);font-size:var(--t-2xl);font-weight:400;line-height:1;color:var(--fg);font-variant-numeric:tabular-nums}
.pchip span{line-height:1.3}
.pchip:hover{border-color:var(--acc);color:var(--acc)}
.pchip:hover b{color:var(--acc)}
.pchip.on{background:var(--acc);border-color:var(--acc);color:var(--acc-fg)}
.pchip.on b{color:var(--acc-fg)}
.pnote{margin:var(--s3) 0 0;color:var(--muted);font-size:var(--t-sm)}
.pnote b{color:var(--fg);font-weight:600;font-variant-numeric:tabular-nums}

/* ---------- filtres : une seule hauteur, des lignes régulières ---------- */
.filters{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s2);margin:var(--s5) 0 var(--s3);align-items:stretch}
.filters input:not([type="checkbox"]),.filters select{width:100%;height:var(--ctl);padding:0 var(--s3);border:1px solid var(--line-strong);
  border-radius:var(--r-sm);background:var(--card);font:inherit;font-size:var(--t-sm);color:var(--fg);appearance:none}
.filters select{background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 15px) 17px,calc(100% - 10px) 17px;background-size:5px 5px;background-repeat:no-repeat;padding-right:var(--s8)}
.filters input:not([type="checkbox"]):focus,.filters select:focus{outline:2px solid var(--acc);outline-offset:-1px;border-color:var(--acc)}
#q{grid-column:span 2}
.check{display:flex;align-items:center;gap:var(--s2);height:var(--ctl);padding:0 var(--s2);
  font-size:var(--t-sm);color:var(--muted);cursor:pointer;border-radius:var(--r-sm)}
.check:hover{color:var(--fg)}
.check input[type="checkbox"]{width:17px;height:17px;min-width:17px;margin:0;flex-shrink:0;accent-color:var(--acc);appearance:auto;border-radius:0}

/* ---------- liste ---------- */
.bar{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s4);
     margin:var(--s5) 0 var(--s3);font-size:var(--t-sm);color:var(--muted);
     padding-bottom:var(--s3);border-bottom:1px solid var(--line)}
.bar #count{font-weight:600;color:var(--fg);font-size:var(--t-md);font-variant-numeric:tabular-nums}
.list{list-style:none;margin:0;padding:0}
.grp{font-size:var(--t-xs);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);
     margin:var(--s6) 0 var(--s2);padding:0}
.grp:first-child{margin-top:var(--s2)}
.job{display:grid;grid-template-columns:1fr auto;gap:var(--s1) var(--s5);padding:var(--s4) 0;
     text-decoration:none;color:inherit;border-bottom:1px solid var(--line);position:relative}
.job:hover{background:var(--card)}
.job:hover .t{color:var(--acc)}
.job .t{font-weight:600;font-size:var(--t-md);line-height:1.35}
.job .s{color:var(--muted);font-size:var(--t-sm)}
.job .s b{color:var(--fg);font-weight:600}
.job .r{text-align:right;font-size:var(--t-xs);color:var(--faint);white-space:nowrap;font-variant-numeric:tabular-nums}
.job .r .sal{color:var(--warm);font-weight:700}
.job .r .new{display:inline-block;background:var(--acc-bg);color:var(--acc);border-radius:var(--r-sm);
             padding:1px var(--s2);font-weight:700;margin-left:var(--s2);letter-spacing:.02em}
.job .tags{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s2)}
.tag{font-size:var(--t-xs);background:var(--tag);border-radius:var(--r-sm);padding:2px var(--s2);color:var(--muted)}
.job .tags .tag.loc{background:transparent;border:1px solid var(--line-strong);color:var(--fg)}
.job .tags .tag.ats{background:transparent;color:var(--faint);padding-left:0}
.pager{text-align:center;margin:var(--s8) 0 var(--s12)}
.empty{padding:var(--s12) 0;text-align:center;color:var(--muted)}

/* ---------- pied ---------- */
.foot{color:var(--muted);font-size:var(--t-sm);border-top:1px solid var(--line);
      padding:var(--s6) var(--s5) var(--s12);margin-top:var(--s8);line-height:1.6}
.foot p{margin:0 0 var(--s3);max-width:76ch}
.foot a{color:var(--acc)}
.legal h2{font-family:var(--f-display);font-weight:400;font-size:var(--t-lg);margin:var(--s6) 0 var(--s1)}
.legal p{color:var(--muted);max-width:76ch}
.crumb{margin:0 0 var(--s3);font-size:var(--t-sm)}
.crumb a{color:var(--muted);text-decoration:none}
.crumb a:hover{color:var(--acc)}
.meta{color:var(--muted);font-size:var(--t-sm);margin:var(--s4) 0}
.list.plain li{padding:var(--s1) 0}
.list.plain a{color:var(--acc);text-decoration:none;text-transform:capitalize}

/* ---------- popup ---------- */
.ask{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:var(--s5);
     background:rgba(16,16,20,.5);backdrop-filter:blur(2px);animation:askIn .14s ease-out}
@keyframes askIn{from{opacity:0}to{opacity:1}}
.ask-box{background:var(--card);border-radius:var(--r-md);max-width:440px;width:100%;padding:var(--s8) var(--s6) var(--s6);
         text-align:center;box-shadow:var(--shadow);animation:askUp .18s cubic-bezier(.2,.8,.3,1)}
@keyframes askUp{from{transform:translateY(10px) scale(.98);opacity:.6}to{transform:none;opacity:1}}
.ask-ico{width:44px;height:44px;border-radius:var(--r-md);background:var(--acc-bg);color:var(--acc);
         display:flex;align-items:center;justify-content:center;margin:0 auto var(--s4);font-size:var(--t-xl);font-weight:700}
.ask-box h3{margin:0 0 var(--s2);font-family:var(--f-display);font-weight:400;font-size:var(--t-xl);line-height:var(--lh-tight)}
.ask-box h3 b{color:var(--acc);font-weight:400}
.ask-box p{margin:0 0 var(--s5);color:var(--muted);font-size:var(--t-sm);line-height:var(--lh)}
.ask-btns{display:flex;flex-direction:column;gap:var(--s2)}
.ask-btns button{font:inherit;font-size:var(--t-sm);font-weight:600;height:var(--ctl);border-radius:var(--r-sm);
                 cursor:pointer;border:1px solid var(--line-strong);background:var(--card);color:var(--fg)}
.ask-btns .y{background:var(--acc);border-color:var(--acc);color:var(--acc-fg)}
.ask-btns .y:hover{opacity:.9}
.ask-btns button:not(.y):hover{border-color:var(--acc);color:var(--acc)}
.ask-cv{display:block;margin-top:var(--s4);font-size:var(--t-sm);color:var(--acc);text-decoration:none;font-weight:600}
.ask-cv:hover{text-decoration:underline}
.ask-done{color:var(--acc)}
.ask-box a{color:var(--acc)}

@media (max-width:860px){
  .pgrid{grid-template-columns:1fr 1fr}
  .filters{grid-template-columns:1fr 1fr}
  #q{grid-column:1/-1}
  h1{font-size:var(--t-xl)}
}
@media (max-width:560px){
  .job{grid-template-columns:1fr}
  .job .r{text-align:left}
}