/* ============================================================
   wiki.css — Guide d'utilisation d'ONLY ERP
   Même palette que la page commerciale : le wiki est une pièce du site,
   pas une annexe. Aucune ressource externe, aucune police à télécharger.
   ============================================================ */

:root{
  --bg:#0A0C0F;
  --bg-2:#0E1116;
  --bg-3:#11151B;
  --card:#12161C;
  --card-2:#171C24;
  --line:#232A33;
  --line-2:#2E3641;
  --txt:#E9ECF1;
  --txt-2:#C3CAD5;
  --muted:#A3ACBA;
  --accent:#0070F0;
  --accent-2:#2A8CFF;
  --accent-soft:#7AB8F5;
  --ok:#6DBA5A;
  --warn:#D4944A;
  --danger:#D46A6A;
  --radius:16px;
  --radius-sm:11px;
  --font:system-ui,-apple-system,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--bg);
  color:var(--txt);
  font-family:var(--font);
  font-size:16.5px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,h4{line-height:1.25;margin:0;letter-spacing:-.02em;font-weight:650}
p{margin:0}
img,svg{max-width:100%}
a{color:var(--accent-soft);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--accent-soft);outline-offset:3px;border-radius:6px}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--accent);color:#fff;padding:12px 18px;border-radius:0 0 10px 0;font-weight:600}
.skip:focus{left:0;text-decoration:none}

/* ---------- En-tête ---------- */
.site-header{
  position:sticky;top:0;z-index:60;
  background:rgba(10,12,15,.88);
  backdrop-filter:saturate(150%) blur(10px);
  border-bottom:1px solid var(--line);
}
.header-inner{display:flex;align-items:center;gap:18px;height:66px;max-width:1400px;margin:0 auto;padding:0 22px}
.brand{display:inline-flex;align-items:center;gap:11px;color:var(--txt);font-weight:700;font-size:18.5px;letter-spacing:-.02em}
.brand:hover{text-decoration:none}
.brand .light{color:var(--accent-soft);font-weight:500}
.brand-mark{
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:9px;
  background:linear-gradient(150deg,var(--accent),#0052B0);
}
.brand-mark svg{width:18px;height:18px}
.header-nav{margin-left:auto;display:flex;align-items:center;gap:20px}
.header-nav a{color:var(--txt-2);font-size:15.5px;font-weight:500}
.header-nav a:hover{color:var(--txt);text-decoration:none}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  border:1px solid var(--line-2);border-radius:10px;
  padding:10px 17px;font-size:15px;font-weight:600;color:var(--txt);
  background:var(--card-2);transition:background .16s,border-color .16s;
}
.btn:hover{text-decoration:none;background:var(--card);border-color:var(--accent)}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-2);border-color:var(--accent-2)}
.burger{display:none;background:none;border:1px solid var(--line-2);border-radius:9px;color:var(--txt);width:40px;height:38px;cursor:pointer;font-size:19px;line-height:1}

@media (max-width:1040px){
  .header-nav .hide-sm{display:none}
  .burger{display:inline-flex;align-items:center;justify-content:center}
}

/* ---------- Bandeau ---------- */
.hero{
  border-bottom:1px solid var(--line);
  background:
    radial-gradient(900px 380px at 12% -40%,rgba(0,112,240,.20),transparent 65%),
    var(--bg-2);
  padding:58px 22px 52px;
}
.hero-inner{max-width:1400px;margin:0 auto}
.eyebrow{display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-soft);margin-bottom:14px}
.hero h1{font-size:clamp(30px,5vw,46px);margin-bottom:16px;max-width:20ch}
.hero p{color:var(--muted);font-size:clamp(16px,2.2vw,19px);max-width:66ch}

/* ---------- Ossature ---------- */
.voile{display:none}
.shell{max-width:1400px;margin:0 auto;padding:0 22px;display:grid;grid-template-columns:274px minmax(0,1fr);gap:44px;align-items:start}

/* ---------- Barre latérale ---------- */
.side{position:sticky;top:66px;max-height:calc(100vh - 66px);overflow-y:auto;padding:28px 0 60px;scrollbar-width:thin}
.side::-webkit-scrollbar{width:8px}
.side::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:8px}
.filtre-box{position:relative;margin-bottom:18px}
.filtre-box input{
  width:100%;padding:11px 13px 11px 38px;border-radius:10px;
  border:1px solid var(--line-2);background:var(--card);color:var(--txt);
  font-size:14.5px;font-family:inherit;
}
.filtre-box input::placeholder{color:var(--muted)}
.filtre-box svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:16px;height:16px;stroke:var(--muted);fill:none;stroke-width:2}
.side h4{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:22px 0 9px;font-weight:700}
.side h4:first-of-type{margin-top:4px}
.side a{
  display:block;padding:7px 12px;border-radius:8px;
  color:var(--txt-2);font-size:14.7px;font-weight:500;
  border-left:2px solid transparent;
}
.side a:hover{background:var(--card);color:var(--txt);text-decoration:none}
.side a.on{background:var(--card-2);color:var(--txt);border-left-color:var(--accent)}
.side .vide{color:var(--muted);font-size:14px;padding:10px 12px}

/* ---------- Contenu ---------- */
.doc{padding:34px 0 110px;min-width:0}
.sect{scroll-margin-top:86px;padding-bottom:14px;margin-bottom:44px;border-bottom:1px solid var(--line)}
.sect:last-child{border-bottom:0}
.sect > h2{
  font-size:clamp(23px,3.4vw,31px);margin-bottom:8px;
  display:flex;align-items:center;gap:13px;
}
.sect > h2 .ico{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:10px;background:var(--card-2);border:1px solid var(--line-2);
}
.sect > h2 .ico svg{width:20px;height:20px;stroke:var(--accent-soft);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.chapo{color:var(--muted);font-size:17.5px;margin-bottom:22px;max-width:72ch}
.sect h3{font-size:19.5px;margin:30px 0 10px}
.sect h4{font-size:16.5px;margin:22px 0 8px;color:var(--txt-2)}
.sect p{margin-bottom:14px;max-width:76ch;color:var(--txt-2)}
.sect strong{color:var(--txt);font-weight:640}
.sect ul,.sect ol{margin:0 0 16px;padding-left:22px;max-width:76ch;color:var(--txt-2)}
.sect li{margin-bottom:7px}
.sect li::marker{color:var(--accent-soft)}

code{font-family:var(--mono);font-size:.9em;background:var(--card-2);border:1px solid var(--line);border-radius:6px;padding:1.5px 6px;color:var(--accent-soft)}

/* ---------- Étapes numérotées ---------- */
.etapes{list-style:none;padding:0;margin:0 0 20px;counter-reset:et}
.etapes li{
  counter-increment:et;position:relative;padding-left:46px;margin-bottom:15px;
  color:var(--txt-2);max-width:74ch;
}
.etapes li::before{
  content:counter(et);position:absolute;left:0;top:1px;
  width:30px;height:30px;border-radius:50%;
  background:var(--card-2);border:1px solid var(--line-2);color:var(--accent-soft);
  display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;
}

/* ---------- Encadrés ---------- */
.note{
  border-left:3px solid var(--accent);background:var(--card);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  padding:15px 18px;margin:0 0 20px;max-width:76ch;
}
.note p{margin:0;color:var(--txt-2)}
.note p + p{margin-top:9px}
.note .t{display:block;font-weight:680;color:var(--txt);margin-bottom:5px;font-size:15px}
.note.warn{border-left-color:var(--warn)}
.note.warn .t{color:var(--warn)}
.note.tip{border-left-color:var(--ok)}
.note.tip .t{color:var(--ok)}
.note.danger{border-left-color:var(--danger)}
.note.danger .t{color:var(--danger)}

/* ---------- Cartes ---------- */
.grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:15px;margin:0 0 22px}
.carte{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);padding:17px 18px}
.carte h4{margin:0 0 6px;font-size:16px;color:var(--txt)}
.carte p{margin:0;font-size:14.8px;color:var(--muted);line-height:1.6}

/* ---------- Tableaux ---------- */
.tbl-wrap{overflow-x:auto;margin:0 0 22px;border:1px solid var(--line);border-radius:var(--radius-sm)}
table{border-collapse:collapse;width:100%;font-size:15.2px;min-width:460px}
th,td{text-align:left;padding:11px 15px;border-bottom:1px solid var(--line);vertical-align:top}
th{background:var(--card-2);color:var(--txt);font-weight:650;font-size:14.4px}
td{color:var(--txt-2)}
tr:last-child td{border-bottom:0}

/* ---------- Pastilles de statut ---------- */
.pill{display:inline-block;padding:2px 10px;border-radius:999px;font-size:13px;font-weight:640;border:1px solid var(--line-2);background:var(--card-2);color:var(--txt-2);white-space:nowrap}
.pill.att{color:var(--warn);border-color:rgba(212,148,74,.4)}
.pill.ok{color:var(--ok);border-color:rgba(109,186,90,.4)}
.pill.no{color:var(--danger);border-color:rgba(212,106,106,.4)}
.pill.inf{color:var(--accent-soft);border-color:rgba(122,184,245,.4)}

/* ---------- Figures ---------- */
figure{margin:0 0 24px;background:var(--bg-3);border:1px solid var(--line);border-radius:var(--radius);padding:22px 20px 16px}
figure svg{display:block;width:100%;height:auto}
figcaption{margin-top:13px;color:var(--muted);font-size:14.3px;text-align:center;line-height:1.55}

/* ---------- Fil de navigation interne ---------- */
.voir-aussi{display:flex;flex-wrap:wrap;gap:9px;margin:22px 0 0}
.voir-aussi a{
  font-size:14px;padding:6px 13px;border-radius:999px;
  border:1px solid var(--line-2);background:var(--card);color:var(--txt-2);
}
.voir-aussi a:hover{border-color:var(--accent);color:var(--txt);text-decoration:none}

/* ---------- Pied ---------- */
.site-footer{background:var(--bg-2);border-top:1px solid var(--line);padding:44px 22px 34px}
.foot-inner{max-width:1400px;margin:0 auto;display:flex;flex-wrap:wrap;gap:22px;justify-content:space-between;align-items:center}
.site-footer p{color:var(--muted);font-size:14.6px;margin:0}
.site-footer nav{display:flex;flex-wrap:wrap;gap:18px}
.site-footer nav a{color:var(--txt-2);font-size:14.6px}

/* ---------- Bouton « haut de page » ---------- */
.haut{
  position:fixed;right:20px;bottom:20px;z-index:50;
  width:44px;height:44px;border-radius:50%;
  background:var(--card-2);border:1px solid var(--line-2);color:var(--txt);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  opacity:0;pointer-events:none;transition:opacity .2s;
}
.haut.vu{opacity:1;pointer-events:auto}
.haut:hover{border-color:var(--accent)}

/* ---------- Adaptatif ---------- */
@media (max-width:1040px){
  .shell{grid-template-columns:1fr;gap:0}
  .side{
    position:fixed;inset:66px auto 0 0;width:290px;z-index:55;
    background:var(--bg-2);border-right:1px solid var(--line);
    padding:22px 18px 60px;max-height:none;height:calc(100vh - 66px);
    transform:translateX(-102%);transition:transform .22s ease;
  }
  .side.ouvert{transform:none}
  .voile{display:block;position:fixed;inset:66px 0 0;background:rgba(0,0,0,.55);z-index:54;opacity:0;pointer-events:none;transition:opacity .22s}
  .voile.vu{opacity:1;pointer-events:auto}
  .doc{padding-top:26px}
}
@media (max-width:640px){
  body{font-size:16px}
  .hero{padding:40px 22px 36px}
  figure{padding:16px 12px 12px}
  .sect{margin-bottom:34px}
}

@media print{
  .site-header,.side,.haut,.voile,.site-footer,.voir-aussi{display:none!important}
  body{background:#fff;color:#000}
  .shell{display:block;padding:0}
  .sect p,.sect li,td{color:#222}
  figure{border-color:#ccc;background:#fff;break-inside:avoid}
}