/* Ctrl+Alt+Infra — feuille complète de remplacement. CSS natif, classes conservées. */
:root{
  --bg:#f6f8fb; --surface:#ffffff; --ink:#1b293b; --muted:#53647a; --line:#d8e1ec;
  --accent:#2459a6; --accent-soft:#eaf1fc; --gold:#80600e; --silver:#53647a; --bronze:#974b25;
  --on-accent:#ffffff; --warn-soft:#fff5dc; --shadow:0 8px 28px rgba(25,45,75,.045);
  --ok:#246b3d; --warn:#85600b; --bad:#b3261e; --ok-soft:#e5f3e6; --bad-soft:#fbe7e5;
  --display:"IBM Plex Sans",system-ui,sans-serif; --body:"IBM Plex Sans",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Consolas,monospace; color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#101722; --surface:#182231; --ink:#e6edf7; --muted:#acbad0; --line:#334257;
  --accent:#99c1ff; --accent-soft:#20334f;
  --on-accent:#11233e; --warn-soft:#342c19; --shadow:none; --gold:#e0b84a; --silver:#a9b6c8; --bronze:#e08a55;
  --ok:#6cc070; --warn:#e3b341; --bad:#f2786f; --ok-soft:#173022; --bad-soft:#3a1c1b; color-scheme:dark;}}
:root[data-theme="dark"]{
  --bg:#101722; --surface:#182231; --ink:#e6edf7; --muted:#acbad0; --line:#334257;
  --accent:#99c1ff; --accent-soft:#20334f;
  --on-accent:#11233e; --warn-soft:#342c19; --shadow:none; --gold:#e0b84a; --silver:#a9b6c8; --bronze:#e08a55;
  --ok:#6cc070; --warn:#e3b341; --bad:#f2786f; --ok-soft:#173022; --bad-soft:#3a1c1b; color-scheme:dark;}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font:17px/1.75 var(--body);overflow-wrap:anywhere}
.wrap{width:100%;max-width:880px;margin:0 auto;padding:48px 28px 88px}
header .kicker{font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
h1{letter-spacing:-.035em;font:700 clamp(2rem,4.5vw,2.8rem)/1.16 var(--display);margin:8px 0 12px;text-wrap:balance}
.lede{font-size:1.15rem;color:var(--muted);margin:0 0 18px;max-width:68ch}
.meta{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.meta span{font-size:.82rem;padding:4px 10px;border:1px solid var(--line);border-radius:99px;background:var(--surface)}
h2{font:700 1.5rem/1.3 var(--display);margin:56px 0 16px;text-wrap:balance;scroll-margin-top:96px;letter-spacing:-.02em}
h2 .n{color:var(--accent);margin-right:6px}
h3{font:600 1.15rem/1.4 var(--display);margin:26px 0 8px}
p,li{max-width:70ch}
.en{font-style:italic;color:var(--muted)}
code{font-family:var(--mono);font-size:.88em;background:var(--accent-soft);padding:1px 5px;border-radius:4px}
pre{max-width:100%;white-space:pre-wrap;overflow-wrap:anywhere;tab-size:4;font:14px/1.75 var(--mono);background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:10px;padding:18px 20px;overflow-x:auto;margin:14px 0}
pre .c{color:var(--muted)}
figure{margin:28px 0;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:18px}
figure svg{width:100%;height:auto;display:block}
figcaption{font-size:.88rem;color:var(--muted);margin-top:10px}
.box{border-radius:0 10px 10px 0;padding:12px 16px;margin:18px 0;border-left:4px solid var(--accent);background:var(--accent-soft)}
.box.warn{border-color:var(--warn);background:var(--warn-soft)}.box.bad{border-color:var(--bad);background:var(--bad-soft)}.box.ok{border-color:var(--ok);background:var(--ok-soft)}
.box strong:first-child{display:block;margin-bottom:2px}
.toc{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px 20px;margin:0 0 10px}
.toc ol{margin:10px 0 0;padding-left:22px;columns:2;column-gap:28px}
.toc a{color:var(--ink);text-decoration:none}.toc a:hover{color:var(--accent)}
@media (max-width:640px){.toc ol{columns:1}}
table{border-collapse:collapse;width:100%;background:var(--surface);border:1px solid var(--line);border-radius:10px;overflow:hidden;font-size:.94rem}
th,td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top}
th{background:var(--bg);font-size:.82rem;color:var(--muted);font-weight:600}
.scroll{overflow-x:auto;margin:16px 0}
.tag{display:inline-block;font:600 .82rem var(--mono);padding:2px 9px;border-radius:99px;border:1.5px solid currentColor;white-space:nowrap}
.tag.or{color:var(--gold)}.tag.ar{color:var(--silver)}.tag.br{color:var(--bronze)}.tag.no{color:var(--bad)}
/* Maquettes d'interface */
.ui{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--surface);margin:20px 0;font-size:.9rem;box-shadow:0 6px 18px rgba(20,30,50,.08)}
.ui .bar{background:var(--ink);color:var(--bg);padding:8px 14px;font-weight:600;display:flex;justify-content:space-between}
.ui .bar span{opacity:.7;font-weight:400}
.ui .body{padding:16px 18px;display:grid;gap:12px}
.ui .row{display:grid;grid-template-columns:180px minmax(0,1fr);gap:12px;align-items:center}
@media (max-width:560px){.ui .row{grid-template-columns:1fr}}
.ui .lab{color:var(--muted)}
.ui .inp{border:1px solid var(--line);border-radius:6px;padding:6px 10px;background:var(--bg);font-family:var(--mono)}
.ui .radio{display:flex;gap:16px;flex-wrap:wrap}
.ui .dot{display:inline-block;width:12px;height:12px;border-radius:50%;border:2px solid var(--muted);vertical-align:-1px;margin-right:6px}
.ui .dot.on{border-color:var(--accent);background:radial-gradient(var(--accent) 45%,transparent 50%)}
.ui .cb{display:inline-block;width:13px;height:13px;border:2px solid var(--muted);border-radius:3px;vertical-align:-1px;margin-right:6px}
.ui .cb.on{background:var(--accent);border-color:var(--accent)}
.ui .btns{display:flex;justify-content:flex-end;gap:8px}
.ui .btn{padding:5px 14px;border-radius:6px;border:1px solid var(--line)}
.ui .btn.p{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.ui .tools{display:flex;gap:6px;flex-wrap:wrap;padding:8px 14px;border-bottom:1px solid var(--line);background:var(--bg)}
.ui .tool{font-size:.78rem;padding:3px 9px;border:1px solid var(--line);border-radius:5px;color:var(--muted)}
.ui .tool.on{border-color:var(--accent);color:var(--accent);font-weight:700;background:var(--accent-soft)}
.ui .tree{font-family:var(--mono);font-size:.85rem;line-height:1.9;padding:10px 18px}
.ui .tree .sel{background:var(--accent);color:var(--on-accent);padding:2px 8px;border-radius:4px}
.ui .note{font-size:.8rem;color:var(--muted);padding:0 18px 14px}
.callout-n{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--bad-soft);color:var(--bad);font:700 .75rem var(--body);margin:0 4px;vertical-align:1px}
/* Pour / contre */
.pc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:18px 0}
@media (max-width:700px){.pc{grid-template-columns:1fr}}
.pc > div{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.pc h3{margin-top:0}
.pc .pro{border-top:4px solid var(--ok)}.pc .con{border-top:4px solid var(--bad)}
.pc ul{padding-left:18px;margin:0}.pc li{margin:8px 0}
.steps{counter-reset:s;list-style:none;padding:0}
.steps li{counter-increment:s;position:relative;padding-left:40px;margin:12px 0}
.steps li::before{content:counter(s);position:absolute;left:0;top:0;width:28px;height:28px;border-radius:50%;background:var(--accent);color:var(--on-accent);display:grid;place-items:center;font-weight:700;font-size:.85rem}
.check{list-style:none;padding:0}.check li{padding-left:28px;position:relative;margin:7px 0}
.check li::before{content:"";position:absolute;left:2px;top:5px;width:14px;height:14px;border:2px solid var(--accent);border-radius:3px}
footer{border-top:1px solid var(--line);margin-top:50px;padding-top:16px;font-size:.88rem;color:var(--muted)}
footer a,article a{color:var(--accent)}
/* SVG */
svg text{font-family:var(--body);fill:var(--ink)}
svg .mut{fill:var(--muted)}
svg .card{fill:var(--surface);stroke:var(--line);stroke-width:1.5}
svg .soft{fill:var(--bg);stroke:var(--line)}
svg .acc{fill:var(--accent)} svg .accs{stroke:var(--accent)}
svg .gold{fill:var(--gold)} svg .silver{fill:var(--silver)} svg .bronze{fill:var(--bronze)} svg .red{fill:var(--bad)} svg .green{fill:var(--ok)}
svg .line{stroke:var(--muted);stroke-width:1.6;fill:none}
svg .badl{stroke:var(--bad);stroke-width:2;fill:none;stroke-dasharray:5 4}
svg .okl{stroke:var(--ok);stroke-width:2;fill:none}
svg .w{fill:#fff}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* --- Mise en page du site --- */
header.site{background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.siteinner{max-width:1100px;margin:0 auto;padding:12px 20px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;font:700 1.1rem var(--display);color:var(--ink);text-decoration:none}
.logo{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:8px;background:var(--ink);color:var(--bg);font:700 .85rem var(--mono)}
header.site nav{display:flex;gap:4px;flex-wrap:wrap}
header.site nav a{padding:6px 12px;border-radius:6px;color:var(--ink);text-decoration:none;font-weight:600;font-size:.95rem}
header.site nav a:hover,header.site nav a[aria-current]{background:var(--accent-soft);color:var(--accent)}
footer.site{border-top:1px solid var(--line);margin-top:40px;background:var(--surface)}
footer.site .siteinner{font-size:.85rem;color:var(--muted);padding:20px}
a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.back{display:inline-block;margin-bottom:14px;color:var(--accent);text-decoration:none;font-weight:600;font-size:.92rem}
.prevnext{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:30px}
.prevnext a{display:grid;gap:4px;padding:14px 16px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);text-decoration:none;font-weight:600}
.prevnext a span{font-size:.8rem;color:var(--muted);font-weight:500}
.prevnext a.nx{text-align:right}
.prevnext a:hover{border-color:var(--accent)}
@media (max-width:640px){.prevnext{grid-template-columns:1fr}.prevnext a.nx{text-align:left}}
/* Accueil */
.home{max-width:1100px;margin:0 auto;padding:10px 20px 40px}
.hero{padding:72px 0 48px;max-width:820px}
.hero h1{font:700 clamp(2.4rem,5vw,3.7rem)/1.08 var(--display);margin:0 0 12px;text-wrap:balance}
.hero p{font-size:1.2rem;color:var(--muted);margin:0 0 22px}
.herobtns{display:flex;gap:10px;flex-wrap:wrap}
.btnp,.btng{display:inline-block;padding:10px 18px;border-radius:8px;font-weight:600;text-decoration:none}
.btnp{background:var(--accent);color:var(--on-accent)}
.btng{border:1px solid var(--line);color:var(--ink);background:var(--surface)}
.btnp:hover{filter:brightness(1.08)}.btng:hover{border-color:var(--accent)}
.sech{font:700 1.5rem var(--display);margin:30px 0 16px}
.tgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:20px}
.tcard{display:flex;flex-direction:column;gap:12px;padding:24px;background:var(--surface);border:1px solid var(--line);border-radius:12px;color:var(--ink);text-decoration:none;box-shadow:var(--shadow);transition:border-color .15s,box-shadow .15s}
.tcard:hover,.tcard:focus-visible{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.tcard strong{font:700 1.2rem/1.4 var(--display)}
.tcard .tl{font-size:.92rem;color:var(--muted);flex:1}
.tcard .tm{padding-top:12px;border-top:1px solid var(--line);font-size:.8rem;color:var(--muted);font-weight:600}
.cat{align-self:flex-start;font-size:.74rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:3px 9px;border-radius:99px;background:var(--accent-soft);color:var(--accent)}
.cat.c-dep{color:var(--bad);background:var(--bad-soft)}
.cat.c-sec{color:var(--ok);background:var(--ok-soft)}
.cat.c-perf{color:var(--warn)}
.cat.c-maint{color:var(--silver)}
.toolbox{margin-top:40px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:24px;padding:24px;background:var(--surface);border:1px solid var(--line);border-radius:14px;align-items:center}
.toolbox p{color:var(--muted)}
.tlinks{display:flex;flex-wrap:wrap;gap:8px}
.tlinks a{padding:7px 12px;border:1px solid var(--line);border-radius:99px;color:var(--ink);text-decoration:none;font-size:.9rem;background:var(--bg)}
.tlinks a:hover{border-color:var(--accent);color:var(--accent)}
@media (max-width:760px){.toolbox{grid-template-columns:1fr}.hero{padding-top:40px}}
.wrap > header .meta{margin-bottom:22px}
@media (prefers-reduced-motion:reduce){.tcard{transition:none}.tcard:hover{transform:none}}
.cat.c-res{color:var(--accent)}

/* Lisibilité, navigation au clavier et contenus techniques */
a{color:var(--accent);text-underline-offset:.2em;text-decoration-thickness:.075em}
a:hover{text-decoration-thickness:.12em}
:where(a,button,input,select,textarea,summary):focus-visible{outline:3px solid var(--accent);outline-offset:4px}
::selection{background:var(--accent);color:var(--on-accent)}
:where(img,video,canvas){max-width:100%;height:auto}
:where(.wrap,.home,.siteinner,.ui,.box,.toc,.scroll,figure,pre){min-width:0}
:where(.tgrid,.pc,.prevnext,.toolbox,.ui .row,.exfields)>*{min-width:0}
.wrap>header{padding-bottom:8px}
.wrap>header .lede{line-height:1.65}
.wrap p{margin-block:1em}
.wrap li{margin-block:.45em}
.wrap h2{padding-top:20px;border-top:1px solid var(--line)}
.toc li{break-inside:avoid;margin:.35em 0}
.toc a{display:inline-block;padding:2px 0}
pre code{background:none;padding:0;border-radius:0;font:inherit}
.scroll{max-width:100%;border:1px solid var(--line);border-radius:10px}
.scroll table{border:0}
.scroll tr:last-child>:is(td,th){border-bottom:0}
.ui .bar{gap:8px;flex-wrap:wrap}
.ui .inp,.ui .tree{overflow-wrap:anywhere}
.ui .btns{flex-wrap:wrap}
.brand{letter-spacing:-.025em}
.logo{width:38px;height:38px;background:var(--accent);color:var(--on-accent)}
.siteinner{min-height:70px}
header.site nav a{min-height:44px;display:inline-flex;align-items:center}
.btnp,.btng{min-height:46px;line-height:1.5}
.tcard .cat{margin-bottom:3px}
.tcard .tl{line-height:1.65}
.toolbox{border-top:3px solid var(--accent);padding:30px}
footer.site{padding-top:0}
/* Les SVG utilisent déjà les variables du thème. Préserver leurs coordonnées. */
svg .w{fill:var(--on-accent)}
/* Compléments ciblés pour ip.css, chargé ensuite : aucune classe renommée. */
.wrap .exfields{grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr))}
.wrap .exh{flex-wrap:wrap}
.wrap input,.wrap select,.wrap button{max-width:100%}
.wrap button{color:var(--on-accent)}
.wrap button.ghost{color:var(--accent)}
.wrap .step .num,.wrap .stepn{color:var(--on-accent)}
@media(max-width:640px){
  header.site{position:static}
  .siteinner{padding:12px 20px;gap:8px}
  .wrap{padding:28px 20px 56px}
  .home{padding-inline:20px}
  .hero{padding-bottom:32px}
  .hero p,.lede{font-size:1.05rem}
  .tcard{padding:20px}
  .toolbox{padding:22px;gap:12px}
  .toc{padding:18px}
  h2{font-size:1.4rem;scroll-margin-top:20px}
  pre{padding:14px;font-size:.81rem}
  figure{padding:10px}
  /* Replier les tableaux éditoriaux sans supprimer de colonne. */
  .scroll table{table-layout:fixed;font-size:.82rem}
  .scroll th,.scroll td{padding:8px 6px;overflow-wrap:anywhere}
  .scroll .tag{white-space:normal;padding:2px 5px}
  /* Les exemples clé/valeur ont trois colonnes : empilement sur petit écran. */
  .wrap table.kv,.wrap table.kv tbody,.wrap table.kv tr{display:block;width:100%}
  .wrap table.kv tr{padding:10px 0;border-bottom:1px solid var(--line)}
  .wrap table.kv th,.wrap table.kv td{display:block;width:auto;white-space:normal;border:0;padding:2px 0;background:transparent}
  .wrap .bin{white-space:pre-wrap;overflow-wrap:anywhere}
  .wrap .radios{flex-wrap:wrap;gap:8px 16px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
@media print{
  :root{--bg:#fff;--surface:#fff;--ink:#111;--muted:#444;--line:#bbb;--accent:#17477c;--accent-soft:#f1f4f8;--on-accent:#fff;--shadow:none;color-scheme:light}
  body{font-size:11pt;background:#fff;color:#111}
  header.site,.herobtns,.prevnext{display:none}
  .wrap,.home{max-width:none;padding:0}
  .box,figure,.ui,pre,.tcard{break-inside:avoid;box-shadow:none}
  h2,h3{break-after:avoid}
  .scroll{overflow:visible}
}

/* Captures réelles : couleurs d’origine, format entier et zoom par lien natif. */
.software-shot img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:6px;background:white}
.software-shot>a{display:block;cursor:zoom-in}
.software-shot figcaption{line-height:1.6}

/* styles intégrés dans article.css (version revue par ChatGPT) */
.cat.c-lab{color:var(--bronze)}
.photo{border:2px dashed var(--line);border-radius:10px;padding:14px 16px;margin:16px 0;color:var(--muted);font-size:.92rem;background:var(--surface)}
.photo strong{display:block;color:var(--ink);margin-bottom:2px}
figure.shot{padding:10px;background:var(--surface)}
figure.shot img{width:100%;height:auto;display:block;border-radius:6px;border:1px solid var(--line)}
figure.shot figcaption{margin-top:8px}

/* Brouillons (aperçu privé uniquement) */
.badge-brouillon{display:inline-block;margin-left:8px;padding:2px 9px;border-radius:999px;background:#fef3c7;color:#92400e;font-size:.75rem;font-weight:700;vertical-align:middle}
.brouillon-banner{margin:0 0 14px;padding:10px 14px;border-radius:10px;background:#fef3c7;color:#92400e;font-weight:600;border:1px solid #fcd34d}