/* JobManager.fr — feuille de style unique (mise à jour 15.10.2026)
   CSS moderne : @layer, nesting, light-dark(), color-mix(), :has(), container queries,
   @starting-style, scroll-driven animations, cross-document view transitions. */
@layer reset,tokens,base,components,pages,utilities;
@view-transition{navigation:auto}

@layer reset{
  *,*::before,*::after{box-sizing:border-box}
  *{margin:0}
  html{-webkit-text-size-adjust:none;text-size-adjust:none}
  img,svg,video{display:block;max-width:100%}
  input,button,select,textarea{font:inherit;color:inherit}
  ul[role=list],ol[role=list]{list-style:none;padding:0}
}

@layer tokens{
  :root{
    color-scheme:light dark;
    --primary:light-dark(#0066cc,#6cb0ff);
    --primary-strong:light-dark(#004d99,#a6d0ff);
    --on-primary:light-dark(#fff,#06223f);
    --accent:light-dark(#087a55,#4fd9a6);
    --warn:light-dark(#8a5a00,#f5c453);
    --bg:light-dark(#fff,#0b1220);
    --bg-alt:light-dark(#f3f7fc,#101a2e);
    --surface:light-dark(#fff,#15203a);
    --text:light-dark(#142033,#e9eef7);
    --muted:light-dark(#4f5e73,#a7b4c8);
    --border:light-dark(#d9e2ee,#2a3a58);
    --soft:color-mix(in oklab,var(--primary) 11%,transparent);
    --soft-accent:color-mix(in oklab,var(--accent) 14%,transparent);
    --shadow:0 1px 2px #0001,0 10px 28px -10px light-dark(#0a254a40,#000a);
    --r:1rem;--r-sm:.625rem;--container:76rem;--gutter:clamp(1rem,4vw,2rem);--hh:4.5rem;
    --ease:cubic-bezier(.4,0,.2,1);
  }
}

@layer base{
  html{scroll-padding-top:calc(var(--hh) + 1rem);font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif}
  @media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
  body{background:var(--bg);color:var(--text);line-height:1.65;-webkit-font-smoothing:antialiased;min-block-size:100dvh;display:flex;flex-direction:column}
  main{flex:1}
  h1,h2,h3,h4{line-height:1.15;letter-spacing:-.02em;font-weight:750;text-wrap:balance}
  h1{font-size:clamp(2.2rem,1.4rem + 3.4vw,3.8rem);font-weight:800}
  h2{font-size:clamp(1.6rem,1.2rem + 1.6vw,2.4rem)}
  h3{font-size:1.2rem}
  p,li{text-wrap:pretty}
  a{color:var(--primary);text-underline-offset:.2em}
  a:hover{color:var(--primary-strong)}
  :focus-visible{outline:3px solid var(--primary);outline-offset:3px;border-radius:4px}
  ::selection{background:var(--soft)}
  svg.i{inline-size:1.15em;block-size:1.15em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
}

@layer components{
  .wrap{inline-size:min(100% - 2*var(--gutter),var(--container));margin-inline:auto}
  .sr-only{position:absolute;inline-size:1px;block-size:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .skip{position:fixed;inset:-4rem auto auto 50%;translate:-50% 0;background:var(--primary);color:var(--on-primary);padding:.75rem 1.5rem;border-radius:var(--r-sm);z-index:100;font-weight:600;&:focus{inset-block-start:1rem}}

  /* Header */
  .site-header{position:sticky;inset-block-start:0;z-index:50;block-size:var(--hh);background:color-mix(in oklab,var(--bg) 88%,transparent);backdrop-filter:saturate(1.6) blur(16px);border-block-end:1px solid var(--border);view-transition-name:header}
  @supports (animation-timeline:scroll()){@media (prefers-reduced-motion:no-preference){
    .site-header{animation:hdr linear both;animation-timeline:scroll();animation-range:0 4rem}
    @keyframes hdr{to{box-shadow:var(--shadow)}}
  }}
  .bar{display:flex;align-items:center;justify-content:space-between;block-size:100%;gap:1rem}
  .brand{display:flex;align-items:center;gap:.6rem;font-weight:800;font-size:1.3rem;color:var(--text);text-decoration:none;
    & svg{color:var(--primary);inline-size:2.25rem;block-size:2.25rem}
    & span{background:linear-gradient(135deg,var(--primary),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}}
  .menu-btn{display:inline-flex;gap:.5rem;align-items:center;background:none;border:1px solid var(--border);border-radius:var(--r-sm);padding:.5rem .8rem;cursor:pointer;font-weight:600}
  .nav-menu{margin:0;padding:1rem;border:1px solid var(--border);border-radius:var(--r);background:var(--surface);inset:calc(var(--hh) - .25rem) var(--gutter) auto auto;inline-size:min(20rem,100% - 2*var(--gutter));box-shadow:var(--shadow);
    & ul{display:grid;gap:.25rem;list-style:none;padding:0}
    & a{display:block;padding:.65rem .8rem;border-radius:var(--r-sm);color:var(--text);font-weight:550;text-decoration:none;
      &:hover{background:var(--soft)}
      &[aria-current=page]{background:var(--soft);color:var(--primary-strong)}}}
  @media (min-width:60rem){
    .menu-btn{display:none}
    .nav-menu,.nav-menu:not(:popover-open){display:block;position:static;inset:auto;inline-size:auto;padding:0;border:0;background:none;box-shadow:none;overflow:visible;
      & ul{display:flex;align-items:center;gap:.25rem}
      & a{padding:.5rem .8rem;font-size:.95rem}}
  }

  /* Buttons */
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;padding:.8rem 1.5rem;border-radius:var(--r-sm);border:2px solid transparent;font-weight:650;font-size:.95rem;cursor:pointer;text-decoration:none;line-height:1.2;transition:translate .2s var(--ease),box-shadow .2s var(--ease),background-color .2s;
    &:hover{translate:0 -2px}
    &.primary{background:var(--primary);color:var(--on-primary);box-shadow:0 6px 18px -6px var(--primary);&:hover{color:var(--on-primary);background:color-mix(in oklab,var(--primary) 88%,var(--text))}}
    &.ghost{background:transparent;border-color:var(--border);color:var(--text);&:hover{border-color:var(--primary);color:var(--primary)}}
    &.sm{padding:.55rem 1rem;font-size:.85rem}
    &.lg{padding:1rem 1.9rem;font-size:1.05rem}
    &:disabled{opacity:.55;cursor:not-allowed;translate:none}}

  /* Hero */
  .hero{padding-block:clamp(2.5rem,6vw,6rem);background:radial-gradient(60rem 30rem at 85% -10%,var(--soft),transparent),linear-gradient(180deg,var(--bg-alt),var(--bg))}
  .hero-grid{display:grid;gap:3rem;align-items:center;@media (min-width:62rem){grid-template-columns:1.15fr .85fr}}
  .eyebrow{display:inline-flex;align-items:center;gap:.5rem;background:var(--surface);border:1px solid var(--border);color:var(--primary-strong);padding:.4rem .9rem;border-radius:99px;font-size:.85rem;font-weight:650;margin-block-end:1.25rem}
  .hero h1 em{font-style:normal;background:linear-gradient(transparent 62%,var(--soft) 62%);padding-inline:.15em}
  .lead{font-size:clamp(1.05rem,1rem + .4vw,1.25rem);color:var(--muted);max-inline-size:40rem;margin-block:1.25rem 2rem}
  .search{display:grid;gap:.75rem;background:var(--surface);border:1px solid var(--border);padding:1rem;border-radius:var(--r);box-shadow:var(--shadow);@media (min-width:44rem){grid-template-columns:1fr 1fr auto}}
  .search label{position:relative;display:block}
  .search label svg{position:absolute;inset:50% auto auto 1rem;translate:0 -50%;color:var(--muted)}
  .field-input,.search input{inline-size:100%;padding:.85rem 1rem;border:2px solid var(--border);border-radius:var(--r-sm);background:var(--bg);&:focus{outline:0;border-color:var(--primary);box-shadow:0 0 0 4px var(--soft)}}
  .search input{padding-inline-start:2.6rem}
  .chips{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-block-start:1rem;font-size:.875rem;color:var(--muted)}
  .chip{padding:.35rem .85rem;border-radius:99px;border:1px solid var(--border);background:var(--surface);color:var(--text);text-decoration:none;font-size:.85rem;&:hover{border-color:var(--primary);color:var(--primary)}}
  .spotlight{background:var(--surface);border:1px solid var(--border);border-radius:calc(var(--r)*1.5);padding:1.75rem;box-shadow:var(--shadow);display:grid;gap:1rem;
    & .when{font-size:2rem;font-weight:800;color:var(--primary);line-height:1.1}}

  /* Stats */
  .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:1.5rem;margin-block-start:2.5rem}
  .stat b{display:block;font-size:2.4rem;font-weight:800;color:var(--primary);line-height:1;font-variant-numeric:tabular-nums}
  .stat span{color:var(--muted);font-size:.9rem}

  /* Sections */
  .section{padding-block:clamp(3rem,7vw,6rem);&.alt{background:var(--bg-alt)}}
  .head{max-inline-size:44rem;margin-block-end:2.5rem;&.center{margin-inline:auto;text-align:center}
    & p{color:var(--muted);margin-block-start:.75rem;font-size:1.05rem}}
  .badge{display:inline-block;background:var(--soft);color:var(--primary-strong);padding:.3rem .9rem;border-radius:99px;font-size:.8rem;font-weight:700;letter-spacing:.02em;margin-block-end:.75rem}
  .badge.accent{background:var(--soft-accent);color:var(--accent)}
  .cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,19rem),1fr));gap:1.25rem}
  .card{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:1.6rem;display:grid;gap:.6rem;align-content:start;transition:translate .25s var(--ease),box-shadow .25s var(--ease),border-color .25s;
    &:hover{translate:0 -4px;box-shadow:var(--shadow);border-color:color-mix(in oklab,var(--primary) 45%,var(--border))}
    & p{color:var(--muted);font-size:.95rem}
    & .ico{inline-size:3rem;block-size:3rem;display:grid;place-items:center;border-radius:.9rem;background:var(--soft);color:var(--primary);& svg{inline-size:1.5rem;block-size:1.5rem}}
    & h3 a{color:inherit;text-decoration:none;&::after{content:"";position:absolute;inset:0}}}
  .more{margin-block-start:2rem;text-align:center}
  @supports (animation-timeline:view()){@media (prefers-reduced-motion:no-preference){
    .reveal{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 30%}
    @keyframes rise{from{opacity:0;translate:0 1.5rem}}
  }}

  /* Jobs */
  .jobs{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,22rem),1fr));gap:1.25rem;list-style:none;padding:0;container-type:inline-size;container-name:jobs}
  .jobs>li[hidden]{display:none}
  .job-card{block-size:100%;position:relative;display:grid;gap:.9rem;align-content:start;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:1.4rem;transition:translate .25s var(--ease),box-shadow .25s,border-color .25s;
    &:hover,&:has(a:focus-visible){translate:0 -4px;box-shadow:var(--shadow);border-color:var(--primary)}
    & .top{display:flex;gap:1rem;align-items:center}
    & h3{font-size:1.08rem;& a{color:var(--text);text-decoration:none;&::after{content:"";position:absolute;inset:0;border-radius:var(--r)}}}
    & .co{color:var(--muted);font-size:.9rem}
    & .foot{display:flex;justify-content:space-between;align-items:center;gap:.75rem;font-size:.82rem;color:var(--muted);margin-block-start:.25rem}
    & .btn{position:relative;z-index:1}}
  .avatar{flex:none;inline-size:3.25rem;block-size:3.25rem;border-radius:.9rem;display:grid;place-items:center;font-weight:800;font-size:1.3rem;color:var(--on-primary);background:linear-gradient(135deg,var(--primary),color-mix(in oklab,var(--primary) 55%,var(--accent)))}
  .meta{display:flex;flex-wrap:wrap;gap:.4rem 1rem;list-style:none;padding:0;font-size:.875rem;color:var(--muted);& li{display:inline-flex;align-items:center;gap:.35rem}}
  .tags{display:flex;flex-wrap:wrap;gap:.4rem;list-style:none;padding:0}
  .tag{background:var(--bg-alt);border:1px solid var(--border);padding:.2rem .65rem;border-radius:.5rem;font-size:.75rem;font-weight:600;&.event{background:var(--soft-accent);color:var(--accent);border-color:transparent}}
  @container jobs (min-width:60rem){.jobs.wide .job-card{grid-template-columns:1fr auto;align-items:center;& .foot{flex-direction:column;align-items:flex-end}}}
  .jobs.wide{grid-template-columns:1fr}

  /* Filters */
  .filters{display:grid;gap:.75rem;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));background:var(--surface);border:1px solid var(--border);padding:1rem;border-radius:var(--r);margin-block-end:1rem;align-items:end;
    & label{display:grid;gap:.3rem;font-size:.8rem;font-weight:650;color:var(--muted)}
    & select,& input{padding:.7rem .8rem;border:2px solid var(--border);border-radius:var(--r-sm);background:var(--bg);&:focus{outline:0;border-color:var(--primary)}}}
  .count{font-weight:650;margin-block:1rem}
  .empty{padding:2rem;text-align:center;color:var(--muted);border:2px dashed var(--border);border-radius:var(--r)}

  /* Job page */
  .crumbs{font-size:.85rem;color:var(--muted);padding-block:1.25rem;& ol{display:flex;flex-wrap:wrap;gap:.4rem;list-style:none;padding:0}
    & li+li::before{content:"›";margin-inline-end:.4rem}& a{color:inherit}}
  .job-head{padding-block-end:2rem;border-block-end:1px solid var(--border)}
  .job-head h1{font-size:clamp(1.9rem,1.3rem + 2.4vw,3rem)}
  .job-layout{display:grid;gap:2.5rem;padding-block:2.5rem 4rem;@media (min-width:62rem){grid-template-columns:minmax(0,1fr) 20rem;align-items:start}}
  .side{display:grid;gap:1rem;@media (min-width:62rem){position:sticky;inset-block-start:calc(var(--hh) + 1rem)}}
  .panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:1.25rem;display:grid;gap:.8rem}
  .facts{display:grid;gap:.6rem;font-size:.92rem;& div{display:flex;justify-content:space-between;gap:1rem;border-block-end:1px dashed var(--border);padding-block-end:.5rem}
    & dt{color:var(--muted)}& dd{font-weight:600;text-align:end}}
  .prose{max-inline-size:46rem;& h2{font-size:1.5rem;margin-block:2.25rem .75rem}& h3{margin-block:1.5rem .5rem}
    & p+p,& p+ul,& ul+p,& p+ol{margin-block-start:.9rem}
    & ul,& ol{padding-inline-start:1.3rem;display:grid;gap:.4rem}}
  .note{border-inline-start:4px solid var(--primary);background:var(--soft);padding:1rem 1.25rem;border-radius:0 var(--r-sm) var(--r-sm) 0;font-size:.95rem;
    &.warn{border-color:var(--warn);background:color-mix(in oklab,var(--warn) 12%,transparent)}}
  .src{display:inline-flex;align-items:center;gap:.4rem;font-size:.78rem;font-weight:700;padding:.2rem .7rem;border-radius:99px;background:var(--soft-accent);color:var(--accent);&.ed{background:var(--soft);color:var(--primary-strong)}}

  /* Steps & FAQ */
  .steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:1.25rem;counter-reset:s;list-style:none;padding:0;
    & li{counter-increment:s;display:grid;gap:.5rem;align-content:start;&::before{content:counter(s);display:grid;place-items:center;inline-size:3rem;block-size:3rem;border-radius:50%;background:var(--primary);color:var(--on-primary);font-weight:800;font-size:1.2rem}
      & p{color:var(--muted);font-size:.95rem}}}
  details.faq{border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface);
    &+&{margin-block-start:.6rem}
    & summary{cursor:pointer;padding:1rem 1.25rem;font-weight:650;list-style:none;display:flex;justify-content:space-between;gap:1rem;&::after{content:"+";font-size:1.4rem;line-height:1;color:var(--primary)}}
    &[open] summary::after{content:"−"}
    & div{padding:0 1.25rem 1.1rem;color:var(--muted)}
    &::details-content{block-size:0;overflow:clip;transition:block-size .3s var(--ease),content-visibility .3s allow-discrete}
    &[open]::details-content{block-size:auto}}
  @supports (interpolate-size:allow-keywords){:root{interpolate-size:allow-keywords}}

  /* Forms */
  .form{display:grid;gap:1rem;max-inline-size:36rem;
    & label{display:grid;gap:.35rem;font-weight:600;font-size:.9rem}
    & small{font-weight:400;color:var(--muted)}
    & input,& textarea,& select{padding:.8rem 1rem;border:2px solid var(--border);border-radius:var(--r-sm);background:var(--bg);&:focus{outline:0;border-color:var(--primary);box-shadow:0 0 0 4px var(--soft)}
      &:user-invalid{border-color:#c0392b}}
    & textarea{field-sizing:content;min-block-size:7rem}}
  .check{display:flex!important;grid-template-columns:none;align-items:flex-start;gap:.7rem!important;font-weight:450!important;& input{inline-size:1.2rem;block-size:1.2rem;margin-block-start:.2rem;accent-color:var(--primary);padding:0}}

  /* Dialog & toast */
  dialog{margin:auto;border:1px solid var(--border);border-radius:calc(var(--r)*1.25);background:var(--surface);color:var(--text);padding:1.75rem;inline-size:min(32rem,100% - 2rem);box-shadow:0 30px 80px -20px #000a;
    &::backdrop{background:#050b17b3;backdrop-filter:blur(3px)}
    &[open]{opacity:1;translate:0;@starting-style{opacity:0;translate:0 1.5rem}}
    transition:opacity .25s,translate .25s,display .25s allow-discrete,overlay .25s allow-discrete;opacity:0;translate:0 1.5rem}
  .row{display:flex;gap:.75rem;justify-content:flex-end;flex-wrap:wrap}
  #toast{inset:auto 1rem 1rem auto;margin:0;border:0;background:var(--text);color:var(--bg);padding:.9rem 1.25rem;border-radius:var(--r-sm);font-weight:600;max-inline-size:min(26rem,100% - 2rem);box-shadow:var(--shadow)}

  /* CTA & footer */
  .cta{background:linear-gradient(135deg,var(--primary),color-mix(in oklab,var(--primary) 50%,#062a52));color:var(--on-primary);border-radius:calc(var(--r)*1.75);padding:clamp(2rem,5vw,4rem);text-align:center;display:grid;gap:1rem;justify-items:center;
    & p{max-inline-size:38rem;opacity:.92}
    & .btn.primary{background:#fff;color:#004d99;box-shadow:none}
    & .btn.ghost{color:inherit;border-color:#fff8}}
  .site-footer{background:light-dark(#0b1424,#070d19);color:#cdd7e6;padding-block:3.5rem 2rem;margin-block-start:auto;
    & a{color:#cdd7e6;text-decoration:none;&:hover{color:#fff;text-decoration:underline}}
    & .brand{color:#fff}
    & .grid{display:grid;gap:2rem;@media (min-width:48rem){grid-template-columns:1.4fr repeat(3,1fr)}}
    & h2{font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;color:#8fa3bf;margin-block-end:.8rem}
    & ul{list-style:none;padding:0;display:grid;gap:.45rem;font-size:.92rem}
    & .legal{margin-block-start:2.5rem;padding-block-start:1.25rem;border-block-start:1px solid #ffffff1f;font-size:.82rem;color:#8fa3bf;display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between}}
}

@layer pages{
  /* Checklist */
  .checklist{display:grid;gap:.6rem;list-style:none;padding:0;& li{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);padding:.8rem 1rem;&:has(input:checked){border-color:var(--accent);background:var(--soft-accent)}
    & label{display:flex;gap:.8rem;cursor:pointer;align-items:flex-start}& input{inline-size:1.2rem;block-size:1.2rem;accent-color:var(--accent);margin-block-start:.2rem}}}
  progress{inline-size:100%;block-size:.6rem;accent-color:var(--accent)}
  /* Letter / trainer */
  .split{display:grid;gap:2rem;@media (min-width:62rem){grid-template-columns:1fr 1fr;align-items:start}}
  .paper{white-space:pre-wrap;background:#fff;color:#1b2433;border:1px solid var(--border);border-radius:var(--r-sm);padding:1.5rem;min-block-size:20rem;font-family:Georgia,"Times New Roman",serif;line-height:1.6;box-shadow:var(--shadow)}
  .trainer{display:grid;gap:1rem;& .q{font-size:clamp(1.3rem,1rem + 1vw,1.8rem);font-weight:700;min-block-size:5rem}
    & .timer{font-variant-numeric:tabular-nums;font-size:2rem;font-weight:800;color:var(--primary)}}
  table.cmp{inline-size:100%;border-collapse:collapse;font-size:.92rem;& th,& td{text-align:start;padding:.7rem .8rem;border-block-end:1px solid var(--border);vertical-align:top}& th{color:var(--muted);font-size:.8rem;text-transform:uppercase;letter-spacing:.05em}}
  .scroll-x{overflow-x:auto}
  .page-hero{padding-block:clamp(2rem,5vw,4rem);background:linear-gradient(180deg,var(--bg-alt),var(--bg));border-block-end:1px solid var(--border)}
}

@layer utilities{
  .stack>*+*{margin-block-start:1rem}
  .muted{color:var(--muted)}
  .center{text-align:center}
  [hidden]{display:none!important}
}
@media print{.site-header,.site-footer,.side,.cta,dialog,#toast{display:none!important}body{background:#fff;color:#000}}