:root {
  --ink-50:#F4F6FA; --ink-100:#E4E8F0; --ink-200:#C6CDDC; --ink-300:#98A3BC;
  --ink-400:#6A7794; --ink-500:#445373; --ink-600:#2C3D5F; --ink-700:#1B2E4F;
  --ink-800:#142442; --ink-900:#0E1D3D;
  --aqua-50:#EAFBF9; --aqua-100:#D6F7F3; --aqua-200:#A8EFE6; --aqua-300:#6FE8DC;--aqua-pale:#D6F7F3;
  --aqua-400:#3FDCCE; --aqua-500:#24D3C4; --aqua-600:#14B3A6; --aqua-700:#0A7D74;
  --aqua-800:#075E58; --aqua-900:#04403C;
  --success:#1D8F68; --warning:#B4740A; --danger:#C33633; --info:#1B5FA8;

  --font-sans:Poppins,'Century Gothic','Segoe UI',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;

  /* rôles, thème clair */
  --bg:#FFFFFF;
  --bg-subtle:var(--ink-50);
  --surface:#FFFFFF;
  --surface-raised:#FFFFFF;
  --border:var(--ink-200);
  --border-soft:var(--ink-100);
  --text:var(--ink-900);
  --text-muted:var(--ink-500);
  --text-subtle:var(--ink-500);
  --accent-text:var(--aqua-700);
  --accent-solid:var(--aqua-700);
  --on-accent:#FFFFFF;
  --accent-graphic:var(--aqua-500);
  --accent-wash:var(--aqua-50);
  --shadow-card:0 1px 2px rgba(14,29,61,.06),0 8px 24px -12px rgba(14,29,61,.14);
  --shadow-lift:0 2px 4px rgba(14,29,61,.08),0 18px 40px -18px rgba(14,29,61,.22);

  /* rôles fixes du bandeau encre, identiques dans les deux thèmes */
  --onink-text:#FFFFFF;
  --onink-muted:var(--ink-300);
  --onink-accent:var(--aqua-300);
  --bar-bg:rgba(255,255,255,.90);
  --btn-bg:var(--ink-900); --btn-fg:#FFFFFF; --btn-bg-hover:var(--aqua-800);
  --cta-bg:var(--bg);
  --onink-border:rgba(111,232,220,.22);
  --onink-control:rgba(255,255,255,.40);   /* bordure des commandes : 3,8:1 sur l'encre */
  --onink-control-bg:rgba(255,255,255,.06);/* fond au repos, pour l'affordance */
  --onink-surface:rgba(255,255,255,.045);

  --maxw:1320px;   /* aligné sur brokersaas.eu (--container:1320px) */
  --vis-off:44px;  /* décalage du visuel pour l'aligner sur le titre (blocs 2 colonnes) */
  /* Rayons resserres le 18/09 : 18px sur une carte de 420px faisait 4,3 %,
     la carte du depliant est a 2,04 %. Voir /revue/site-campagne/. */
  --r-sm:6px; --r-md:10px; --r-lg:12px;
}
@media (prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) {
    --bg:var(--ink-900);
    --bg-subtle:var(--ink-800);
    --surface:var(--ink-800);
    --surface-raised:var(--ink-700);
    --border:var(--ink-700);
    --border-soft:var(--ink-800);
    --text:var(--ink-50);
    --text-muted:var(--ink-300);
    --text-subtle:var(--ink-500);
    --accent-text:var(--aqua-300);
    --accent-solid:var(--aqua-500);
    --on-accent:var(--ink-900);
    --accent-graphic:var(--aqua-500);
    --accent-wash:rgba(36,211,196,.10);
    --shadow-card:0 1px 2px rgba(0,0,0,.30),0 8px 24px -12px rgba(0,0,0,.55);
    --bar-bg:rgba(20,36,66,.92);
    --btn-bg:var(--aqua-500); --btn-fg:var(--ink-900); --btn-bg-hover:var(--aqua-300);
    --cta-bg:var(--ink-800);
    --shadow-lift:0 2px 4px rgba(0,0,0,.35),0 18px 40px -18px rgba(0,0,0,.65);
  }
}
:root[data-theme="dark"] {
  --bg:var(--ink-900);
  --bg-subtle:var(--ink-800);
  --surface:var(--ink-800);
  --surface-raised:var(--ink-700);
  --border:var(--ink-700);
  --border-soft:var(--ink-800);
  --text:var(--ink-50);
  --text-muted:var(--ink-300);
  --text-subtle:var(--ink-500);
  --accent-text:var(--aqua-300);
  --accent-solid:var(--aqua-500);
  --on-accent:var(--ink-900);
  --accent-graphic:var(--aqua-500);
  --accent-wash:rgba(36,211,196,.10);
  --shadow-card:0 1px 2px rgba(0,0,0,.30),0 8px 24px -12px rgba(0,0,0,.55);
  --bar-bg:rgba(20,36,66,.92);
  --btn-bg:var(--aqua-500); --btn-fg:var(--ink-900); --btn-bg-hover:var(--aqua-300);
  --cta-bg:var(--ink-800);
  --shadow-lift:0 2px 4px rgba(0,0,0,.35),0 18px 40px -18px rgba(0,0,0,.65);
}

/* ============================================================================
   Guide utilisateur Axivox. Les tokens de la charte sont extraits du site par
   build.py : ne pas les redefinir ici, ils seraient desynchronises.
   ============================================================================ */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-sans);
  font-weight:400;font-size:16.5px;line-height:1.65;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.02em;text-wrap:balance}
p{margin:0}
a{color:var(--accent-text);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
:focus-visible{outline:2px solid var(--accent-graphic);outline-offset:3px;border-radius:4px}
img{max-width:100%}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--aqua-500);
  color:var(--ink-900);font-weight:600;padding:12px 20px;border-radius:0 0 8px 0}
.skip:focus{left:0;text-decoration:none}

.dbar{position:sticky;top:0;z-index:50;background:var(--bar-bg);
  -webkit-backdrop-filter:saturate(160%) blur(10px);backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid var(--border);color:var(--text)}
.dbar-in{max-width:1520px;margin-inline:auto;padding:12px 24px;display:flex;align-items:center;gap:18px}
.dbrand{display:flex;align-items:center;color:var(--text);flex:none}
.dbrand svg{height:26px;width:auto;display:block}
.dbar-lbl{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-muted);flex:none;padding-left:6px;
  border-left:1px solid var(--border);margin-left:2px;padding-block:4px}
.dbar-s{position:relative;margin-left:auto;flex:0 1 380px}
.dbar-s input{width:100%;font-family:var(--font-sans);font-size:14.5px;color:var(--text);
  background:var(--surface);border:1px solid var(--border);border-radius:9px;padding:9px 13px}
.dbar-s input::placeholder{color:var(--text-muted)}
.dbar-s input:focus{border-color:var(--accent-graphic);outline:none}
.qr{position:absolute;left:0;right:0;top:calc(100% + 7px);background:var(--surface);
  border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-lift);
  padding:6px;max-height:60vh;overflow:auto;z-index:60}
.qr a{display:block;padding:9px 11px;border-radius:8px;color:var(--text);font-size:14.5px}
.qr a:hover{background:var(--accent-wash);color:var(--accent-text);text-decoration:none}
.qr a small{display:block;color:var(--text-muted);font-size:12.5px}
.qr p{padding:10px 11px;color:var(--text-muted);font-size:14px}
.dbar-cta{flex:none;font-size:14.5px;color:var(--text-muted)}

.doc{max-width:1520px;margin-inline:auto;padding:0 24px;
  display:grid;grid-template-columns:284px minmax(0,1fr) 226px;gap:44px;align-items:start}
.dnav{position:sticky;top:74px;max-height:calc(100vh - 96px);overflow:auto;padding:34px 0 40px}
.nv-g{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--text-muted);margin:22px 0 8px}
.nv-g:first-child{margin-top:0}
.nv-l{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px}
.nv-a{display:block;padding:7px 11px;border-radius:8px;font-size:14.5px;color:var(--text)}
.nv-a:hover{background:var(--accent-wash);color:var(--accent-text);text-decoration:none}
.nv-c{background:var(--accent-wash);color:var(--accent-text);font-weight:500;
  box-shadow:inset 2px 0 0 var(--accent-graphic)}
.nv-x{color:var(--text-muted);cursor:default;display:flex;align-items:center;gap:8px}
.nv-x em{font-style:normal;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.08em;
  text-transform:uppercase;border:1px solid var(--border);border-radius:999px;padding:1px 6px}
.nv-x:hover{background:none}
/* SOUS-PAGES : indentation, filet de rattachement, repli hors de la section courante. */
.nv-s{list-style:none;margin:2px 0 6px 12px;padding:0 0 0 13px;
  border-left:1px solid var(--border);display:flex;flex-direction:column;gap:1px}
.nv-s .nv-a{font-size:14px;padding:6px 10px;color:var(--text-muted)}
.nv-s .nv-a:hover,.nv-s .nv-c{color:var(--accent-text)}
.nv-ferme{display:none}
/* separateur de famille dans une longue liste de sous-pages */
.nv-f{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-muted);padding:12px 10px 4px;list-style:none}
.nv-s li:first-child.nv-f{padding-top:2px}
.nv-p{display:inline-block;width:0;height:0;border-left:4px solid currentColor;
  border-top:3.5px solid transparent;border-bottom:3.5px solid transparent;
  margin-right:7px;vertical-align:middle;opacity:.5}
.nv-c .nv-p{opacity:1}

.dmain{padding:34px 0 80px;min-width:0}
.bc{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13.5px;
  color:var(--text-muted);margin-bottom:18px}
.bc span{color:var(--border)}
.bc b{font-weight:500;color:var(--text-muted)}
.dmain h1{font-size:clamp(28px,3.4vw,40px);line-height:1.1;letter-spacing:-.03em;margin-bottom:14px}
.lede{font-size:18.5px;color:var(--text-muted);max-width:62ch;margin-bottom:34px}
.dmain h2{font-size:24px;margin:46px 0 14px;padding-top:6px}
.dmain h3{font-size:18.5px;margin:32px 0 10px}
.dmain p{max-width:72ch;margin-bottom:14px}
.dmain ul,.dmain ol{max-width:72ch;margin:0 0 18px;padding-left:22px}
.dmain li{margin-bottom:7px}
.dmain code{font-family:var(--font-mono);font-size:.88em;background:var(--bg-subtle);
  border:1px solid var(--border-soft);border-radius:5px;padding:1px 5px}

.cal{border-radius:12px;padding:16px 18px;margin:22px 0;max-width:72ch;
  border:1px solid var(--border);background:var(--bg-subtle)}
.cal-t{font-weight:600;font-size:14.5px;margin-bottom:5px}
.cal p:last-child{margin-bottom:0;font-size:15.5px;color:var(--text-muted)}
.cal-astuce{background:var(--accent-wash);border-color:var(--accent-graphic)}
.cal-astuce .cal-t{color:var(--accent-text)}
.cal-attention{background:rgba(195,54,51,.07);border-color:rgba(195,54,51,.35)}
.cal-attention .cal-t{color:var(--danger)}

.shot{margin:26px 0 30px}
.shot img{display:block;width:100%;height:auto;border:1px solid var(--border);
  border-radius:12px;box-shadow:var(--shadow-card);background:var(--surface)}
.shot figcaption{font-size:13.5px;color:var(--text-muted);margin-top:9px;
  font-family:var(--font-mono);letter-spacing:.02em}

.tw{overflow-x:auto;margin:20px 0 26px;border:1px solid var(--border);border-radius:12px}
.tw table{border-collapse:collapse;width:100%;font-size:15px}
.tw th{text-align:left;font-family:var(--font-mono);font-size:11px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--text-muted);background:var(--bg-subtle);
  padding:11px 14px;border-bottom:1px solid var(--border)}
.tw td{padding:11px 14px;border-bottom:1px solid var(--border-soft);vertical-align:top}
.tw tr:last-child td{border-bottom:0}
/* tableau « intitule / valeur » sans en-tete : la 1re colonne fait office de libelle */
.tw-nb td:first-child{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--text-muted);white-space:nowrap;width:1%;
  background:var(--bg-subtle);border-right:1px solid var(--border-soft)}

.pn{display:flex;gap:12px;margin-top:56px;padding-top:26px;border-top:1px solid var(--border-soft)}
.pn a{flex:1 1 0;border:1px solid var(--border);border-radius:12px;padding:14px 16px;
  color:var(--text);font-size:15px}
.pn a:hover{border-color:var(--accent-graphic);background:var(--accent-wash);text-decoration:none}
.pn a b{display:block;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-muted);font-weight:500;margin-bottom:3px}
.pn .pn-s{text-align:right}

.toc{position:sticky;top:74px;padding:34px 0 40px;max-height:calc(100vh - 96px);overflow:auto}
.toc-t{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--text-muted);margin-bottom:10px}
.toc ul{list-style:none;margin:0;padding:0}
.toc li{margin-bottom:2px}
.toc a{display:block;font-size:13.5px;color:var(--text-muted);padding:4px 0 4px 11px;
  border-left:2px solid var(--border-soft)}
.toc a:hover,.toc a.on{color:var(--accent-text);border-left-color:var(--accent-graphic);
  text-decoration:none}
.toc a.on{font-weight:500}
.toc .tc-3 a{padding-left:22px;font-size:13px}

.dfoot{border-top:1px solid var(--border-soft);background:var(--bg-subtle)}
.dfoot-in{max-width:1520px;margin-inline:auto;padding:26px 24px;display:flex;
  flex-wrap:wrap;gap:14px;justify-content:space-between;font-size:14px;color:var(--text-muted)}

.gx{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:16px;margin:30px 0 0}
.gx-c{border:1px solid var(--border);border-radius:14px;padding:20px 22px;background:var(--surface)}
.gx-c h2{font-size:16px;margin:0 0 12px;font-family:var(--font-mono);font-weight:500;
  letter-spacing:.09em;text-transform:uppercase;color:var(--accent-text)}
.gx-c ul{list-style:none;margin:0;padding:0}
.gx-c li{margin-bottom:8px;font-size:15px}
.gx-c ul ul{margin:6px 0 10px;padding-left:13px;border-left:1px solid var(--border)}
.gx-c ul ul li{font-size:14px;margin-bottom:5px}
.gx-c em{font-style:normal;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-muted);border:1px solid var(--border);
  border-radius:999px;padding:1px 6px;margin-left:7px}
.sous{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:12px;margin:24px 0 8px}
.sous a{border:1px solid var(--border);border-radius:12px;padding:15px 17px;color:var(--text);
  display:block;background:var(--surface)}
.sous a:hover{border-color:var(--accent-graphic);background:var(--accent-wash);text-decoration:none}
.sous a b{display:block;font-size:15.5px;font-weight:600;margin-bottom:3px}
.sous a span{font-size:13.5px;color:var(--text-muted)}

@media (max-width:1180px){.doc{grid-template-columns:262px minmax(0,1fr);gap:34px}.toc{display:none}}
@media (max-width:860px){
  .doc{grid-template-columns:1fr;gap:0}
  .dnav{position:static;max-height:none;padding:22px 0 0;border-bottom:1px solid var(--border-soft)}
  .dbar-lbl,.dbar-cta{display:none}
  .dbar-s{flex:1 1 auto}
  .dmain{padding-top:24px}
  .nv-ferme{display:flex}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

.renvoi-site{margin:38px 0 8px;padding:18px 22px;background:var(--ink-50);
  border-left:6px solid var(--aqua-500);border-radius:12px}
.renvoi-site p{margin:0 0 8px;color:var(--ink-600);font-size:15px}
.renvoi-site a{font-weight:600;color:var(--aqua-700);text-decoration:none}
.renvoi-site a:hover{text-decoration:underline}