/* Le Job Officiel — feuille de style des pages légales.
   Palette et rendu alignés sur la page existante connexion.html (aucune couleur nouvelle). */
:root{
  --lj-bg:#f8f5fc;
  --lj-ink:#332840;
  --lj-muted:#817389;
  --lj-brand:#7047a6;
  --lj-brand-strong:#7950b5;
  --lj-card:#ffffff;
  --lj-line:#ebe2f3;
  --lj-soft:#f4eff9;
  --lj-shadow:0 16px 55px #3d255c0a;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--lj-bg);
  color:var(--lj-ink);
  font:18px/1.7 system-ui,-apple-system,"Segoe UI",sans-serif;
  padding:0 20px 80px;
}
a{color:var(--lj-brand);text-decoration:underline;text-underline-offset:2px}
a:hover{color:var(--lj-brand-strong)}
a:focus-visible,button:focus-visible{outline:3px solid #c7b0e4;outline-offset:3px;border-radius:8px}

.lj-topbar{
  max-width:900px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:22px 0;flex-wrap:wrap;
}
.lj-brand{display:flex;gap:11px;align-items:center;font-size:20px;font-weight:800;color:var(--lj-brand);text-decoration:none}
.lj-brand b{background:var(--lj-brand-strong);color:#fff;border-radius:11px;padding:2px 11px;font-size:24px}
.lj-back{font-size:17px;font-weight:600;color:var(--lj-muted);text-decoration:none}
.lj-back:hover{color:var(--lj-brand)}

.lj-wrap{max-width:900px;margin:0 auto}
.lj-nav{
  display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 26px;
}
.lj-nav a{
  font-size:17px;font-weight:600;text-decoration:none;color:var(--lj-muted);
  background:var(--lj-card);border:1px solid var(--lj-line);border-radius:999px;padding:7px 14px;transition:background-color .2s,color .2s,border-color .2s;
}
.lj-nav a:hover{background:var(--lj-soft);color:var(--lj-brand)}
.lj-nav a[aria-current="page"]{background:var(--lj-brand);border-color:var(--lj-brand);color:#fff}

.lj-doc{
  background:var(--lj-card);border:1px solid var(--lj-line);border-radius:22px;
  padding:clamp(24px,4vw,46px);box-shadow:var(--lj-shadow);
}
.lj-eyebrow{display:inline-block;font-size:15px;font-weight:800;letter-spacing:.14em;color:var(--lj-brand);text-transform:uppercase;margin-bottom:10px}
.lj-doc h1{font-size:clamp(26px,4vw,36px);line-height:1.2;letter-spacing:-.02em;margin:0 0 10px}
.lj-updated{color:var(--lj-muted);font-size:17px;margin:0 0 26px}
.lj-doc h2{font-size:clamp(19px,2.4vw,23px);margin:34px 0 10px;letter-spacing:-.01em}
.lj-doc h3{font-size:18px;margin:22px 0 6px}
.lj-doc p,.lj-doc li{color:#4b3f57}
.lj-doc ul,.lj-doc ol{padding-left:22px;margin:8px 0}
.lj-doc li{margin:5px 0}
.lj-doc strong{color:var(--lj-ink)}

.lj-callout{
  border:1px solid var(--lj-line);background:var(--lj-soft);border-radius:14px;
  padding:16px 18px;margin:20px 0;
}
.lj-callout.lj-pending{background:#fbf6ff;border-style:dashed}
.lj-callout .lj-tag{display:inline-block;font-size:15px;font-weight:800;letter-spacing:.1em;color:var(--lj-brand-strong);text-transform:uppercase;margin-bottom:6px}

.lj-datatable{width:100%;border-collapse:collapse;margin:14px 0;font-size:18px}
.lj-datatable th,.lj-datatable td{text-align:left;vertical-align:top;padding:10px 12px;border-bottom:1px solid var(--lj-line)}
.lj-datatable th{width:38%;color:var(--lj-muted);font-weight:700}

.lj-btn{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  border:0;border-radius:999px;padding:11px 20px;font:600 17px system-ui;
  background:var(--lj-brand-strong);color:#fff;text-decoration:none;transition:transform .15s,background-color .2s;
}
.lj-btn:hover{background:#6a45a3;color:#fff;transform:translateY(-1px)}
.lj-btn.lj-btn-light{background:var(--lj-soft);color:var(--lj-brand)}

.lj-footer{
  max-width:900px;margin:38px auto 0;padding-top:22px;border-top:1px solid var(--lj-line);
  display:flex;flex-wrap:wrap;gap:14px 20px;align-items:center;justify-content:space-between;
}
.lj-footer-links{display:flex;flex-wrap:wrap;gap:8px 16px}
.lj-footer-links a,.lj-footer-links button{
  font-size:17px;color:var(--lj-muted);text-decoration:none;background:none;border:0;padding:0;cursor:pointer;font:inherit;
}
.lj-footer-links a:hover,.lj-footer-links button:hover{color:var(--lj-brand)}
.lj-footer small{color:var(--lj-muted);font-size:15px}

@media(max-width:560px){
  body{padding:0 14px 70px}
  .lj-doc{border-radius:18px}
}