/* Copyright (c) 2026 LB IT Cloud SAS. All rights reserved.
   Proprietary source of the LB IT Cloud website. See LICENSE.

   THE MECM HEALTH CHECK PAGE — only what this page has and the other tools do not: the four
   facts under the title, the prerequisites table, the three transparency columns and the traces,
   the steps, the script viewer, and the replica of the script's options window. Written in the
   site's tokens (site.css, theme.css), so the dark theme and the five palettes come for free —
   the code colours included since 09/10/2026. The one exception is the window, whose colours are
   the script's own.

   DIRECTION A, « SIGNALÉTIQUE », 09/10/2026 (see site.css): square panels ruled in --line, the
   chamfer on the small blocks that carry a fill, chips instead of pills, condensed headings,
   and the reference face (--mono) for everything that is a value, a path or a line of code.
   --------------------------------------------------------------------------- */

/* The chamfer of site.css, on this page's own small blocks. Each one carries a fill and no
   border, because a clipped border loses its diagonal. */
.hcfact, .hcstep, .hcstep .hcnum {
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}
@supports (corner-shape: bevel) {
  .hcfact, .hcstep, .hcstep .hcnum {
    clip-path: none; border-radius: var(--cut) 0 var(--cut) 0; corner-shape: bevel;
  }
}

/* The four facts read like the lines of a rating plate: the value in the condensed face, what
   it means under it in the reference face. */
.hcfacts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 30px; max-width: 820px; }
.hcfact { --cut: 10px; background: var(--panel); padding: 12px 14px 13px; }
.hcfact b { display: block; font: 760 19px/1.15 var(--display); font-stretch: 72%; letter-spacing: -.005em; color: var(--brand); }
.hcfact span { display: block; margin-top: 4px; font: 500 11px/1.45 var(--mono); color: var(--ink-3); }
@media (max-width: 700px) { .hcfacts { grid-template-columns: repeat(2, 1fr); } }

.hcpanel { margin-top: 26px; }
.hcmeta { font: 500 11px/1.4 var(--mono); color: var(--ink-3); }

.hctable { width: 100%; border-collapse: collapse; font-size: 14px; }
.hctable th { text-align: left; font: 500 10.5px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); padding: 0 12px 10px 0; border-bottom: 1px solid var(--line); }
.hctable td { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--ink-2); line-height: 1.5; }
.hctable tr:last-child td { border-bottom: 0; }
.hctable td:first-child { color: var(--ink); width: 38%; }
/* Martian Mono is wider and taller than the text face: a smaller size keeps an inline path the
   same weight on the line as the words around it. */
.hctable code, .hccol code, .hctraces code, .hcstep code, .gside code {
  font-family: var(--mono); font-size: .84em; background: var(--ground-2); border: 1px solid var(--line); padding: 0 4px;
}
.hcparams td:first-child { width: 30%; white-space: nowrap; }
/* Required or optional: a square chip in the reference face, the word saying which — the small
   touch of colour only marks the one that cannot be skipped. */
.hcneed { display: inline-block; font: 600 10px/1.5 var(--mono); text-transform: uppercase; letter-spacing: .06em; padding: 2px 6px; margin: 0 8px 4px 0; vertical-align: 1px; }
.hcneed-req { background: var(--plate); color: var(--on-plate); }
.hcneed-opt { background: transparent; color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line); }
@media (max-width: 760px) {
  .hctable thead { display: none; }
  .hctable td { display: block; width: auto !important; border-bottom: 0; padding: 4px 0; }
  .hctable tr { display: block; border-bottom: 1px solid var(--line); padding: 10px 0; }
  .hcparams td:first-child { white-space: normal; }
}

/* The three columns stay square and ruled: they hold lists, and they are read, not picked. The
   rule along the top keeps its meaning — "never" in the colour of a state that is safe. */
.hctrust { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 28px; }
.hccol { background: var(--panel); border: 1px solid var(--line); border-top: 4px solid var(--a1-line); padding: 20px 22px; }
.hccol-write { border-top-color: var(--a4-line); }
.hccol-never { border-top-color: var(--ok); }
.hccol h3 { width: fit-content; border-bottom: 2px solid var(--touch); padding-bottom: 3px; font-size: 19px; font-weight: 760; font-stretch: 72%; letter-spacing: -.005em; margin-bottom: 10px; }
.hccol ul { margin: 0; padding-left: 18px; }
.hccol li { font-size: 14px; color: var(--ink-2); line-height: 1.55; margin-bottom: 9px; }
@media (max-width: 900px) { .hctrust { grid-template-columns: 1fr; } }
/* The traces it leaves: the same ruled panel, a rule down its side instead of along its top. */
.hcchanges { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
.hcchanges ul { margin: 6px 0 0; padding-left: 18px; }
.hcchanges li { font-size: 14px; color: var(--ink-2); line-height: 1.55; margin-bottom: 8px; }
@media (max-width: 900px) { .hcchanges { grid-template-columns: 1fr; } }
.hctraces { margin-top: 16px; background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--a1-line); padding: 20px 22px; }
.hctraces h3 { width: fit-content; border-bottom: 2px solid var(--touch); padding-bottom: 3px; font-size: 19px; font-weight: 760; font-stretch: 72%; letter-spacing: -.005em; margin-bottom: 8px; }
.hctraces p { font-size: 14px; color: var(--ink-2); line-height: 1.55; margin: 0 0 8px; }
.hctraces ul { margin: 0 0 8px; padding-left: 18px; }
.hctraces li { font-size: 14px; color: var(--ink-2); line-height: 1.55; margin-bottom: 4px; }

.hcsteps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 28px; }
.hcstep { --cut: 14px; background: var(--panel); padding: 20px 22px; font-size: 14px; color: var(--ink-2); line-height: 1.55; }
.hcstep h3 { width: fit-content; border-bottom: 2px solid var(--touch); padding-bottom: 3px; font-size: 19px; font-weight: 760; font-stretch: 72%; letter-spacing: -.005em; color: var(--ink); margin: 12px 0 6px; }
/* A number, square, in the reference face. In the viewer's rows it stays quiet; on the three
   steps it is a small plate of the palette's colour. */
.hcnum { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; background: var(--fill); color: var(--ink-2); font: 600 11.5px/1 var(--mono); flex: none; }
.hcstep .hcnum { --cut: 7px; width: 30px; height: 30px; background: var(--plate); color: var(--on-plate); font-size: 13px; font-weight: 700; }
/* The line to type. A pastel of the palette with its colour down the edge — the plate's own two
   tones — rather than a terminal's navy, which no palette and no theme would have followed. */
.hccmd {
  margin: 10px 0; padding: 10px 12px; background: var(--plate-soft); color: var(--ink); border-left: 3px solid var(--edge);
  font: 500 12px/1.6 var(--mono); white-space: pre-wrap; word-break: break-all;
}
@media (max-width: 900px) { .hcsteps { grid-template-columns: 1fr; } }

/* The viewer. One row per section: a button that opens it, its line range, and its own copy
   button. The code is rendered only when opened — 4 000 highlighted lines nobody asked for
   would only slow the page. */
.hcsec { border: 1px solid var(--line); margin-bottom: 10px; overflow: hidden; background: var(--panel); }
.hcsechead { display: flex; align-items: center; gap: 10px; padding-right: 12px; }
.hcsecbtn { flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px; padding: 13px 14px; background: none; border: 0; cursor: pointer; text-align: left; color: var(--ink); font: inherit; }
.hcsecbtn:hover { background: var(--ground-2); }
.hcsecbtn:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.hcsectxt { flex: 1; min-width: 0; }
.hcsectxt b { display: block; font-size: 14.5px; font-weight: 650; }
.hcsectxt span { display: block; font-size: 13px; color: var(--ink-3); line-height: 1.45; margin-top: 2px; }
.hclines { font: 500 11px/1.3 var(--mono); color: var(--ink-3); white-space: nowrap; }
.hcchev { font-size: 20px; color: var(--ink-3); transition: transform .15s; }
.hcsec[data-open="1"] .hcchev { transform: rotate(90deg); }
@media (max-width: 700px) { .hclines { display: none; } }

/* THE CODE, IN THE SITE'S TOKENS. Its seven colours were fourteen literal hexes, a slate pair
   per theme, and followed neither the palette nor the ground under them. They are the page's
   accents now, which are already redefined for the dark theme: a reading aid, not a status, so
   green here only says "a number" — as it does in most editors. The width axis narrows the
   face a step, so a long PowerShell line scrolls less far. `code` is told to inherit, or the
   browser's own monospace would win inside the <pre>. */
.hccode {
  margin: 0; max-height: 560px; overflow: auto; border-top: 1px solid var(--line);
  background: var(--ground); color: var(--ink); font: 400 12px/1.6 var(--mono); font-stretch: 87.5%; tab-size: 4;
}
.hccode code { display: block; padding: 10px 0; min-width: max-content; font: inherit; }
.hcrow { display: block; white-space: pre; padding-right: 16px; }
.hcln { display: inline-block; width: 4.5em; padding-right: 1em; margin-right: 1em; text-align: right; color: var(--ink-3); border-right: 1px solid var(--line); user-select: none; }
.tc { color: var(--ink-3); font-style: italic; }
.ts { color: var(--a2); }
.tv { color: var(--a3); }
.tp { color: var(--a4); }
.tn { color: var(--ok); }
.tk { color: var(--ink); font-weight: 700; }
.tf { color: var(--brand); }

/* The clipboard fallback's textarea: in the page, never on screen. */
.hcoff { position: fixed; left: -9999px; top: 0; }

/* ---- The options window ----
   A replica of the script's WPF window (Show-OptionsDialogCore). Its colours are the script's
   own, both palettes — the slate and blue of the HTML report — so the reader recognises the
   window when it opens on their screen; the dark one follows the site's theme here as it
   follows Windows' there.

   What the script draws stays the script's: its colours, its face, and the corner radii of its
   controls, which are the CornerRadius values of the XAML — the replica is a picture of
   software, like the demo report, and a squared copy would be a window nobody will ever see
   open. What the site draws around it follows the site (09/10/2026): the frame is square and
   casts the site's short hard shadow instead of a diffuse one, the way a capture sits in .shot. */
.gwrap { display: grid; grid-template-columns: minmax(0, 700px) minmax(0, 1fr); gap: 36px; align-items: start; margin-top: 30px; }
@media (max-width: 1080px) { .gwrap { grid-template-columns: 1fr; } }

/* LA FENÊTRE DU SCRIPT, À SA CHARTE DEPUIS LA 1.72.1 : les couleurs outremer de la fenêtre WPF
   (celles du site), la plaque en tête, les étiquettes en Martian Mono derrière le trait orange,
   les coins taillés, les boutons en capitales, et plus aucun arrondi. Les valeurs sont celles du
   script, à l'hexadécimal près : l'aperçu montre la fenêtre que l'on obtiendra. */
.gw {
  --g-page: #F5F7FB; --g-card: #FDFDFF; --g-line: #CFD4DF; --g-ctrl: #FDFDFF;
  --g-ink: #171D29; --g-ink2: #49505E; --g-ink3: #626978;
  --g-accent: #4E6498; --g-accenth: #3C5083; --g-warn: #935701; --g-warnbg: #FDF2E0;
  --g-crit: #B42A2A; --g-ok: #17794B; --g-bar: #FDFDFF;
  --g-touch: #D15C32; --g-plate: #E5EBF8; --g-fill: #DEE3EE; --g-brandline: #BBCBEC;
  background: var(--g-page); color: var(--g-ink);
  border: 1px solid var(--g-line); overflow: hidden;
  box-shadow: var(--shadow-lg);
  font: 13px/1.4 "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  user-select: none;
}
html[data-theme="dark"] .gw {
  --g-page: #0C0F16; --g-card: #171B23; --g-line: #2F3543; --g-ctrl: #12161E;
  --g-ink: #EFF2F9; --g-ink2: #AEB4C3; --g-ink3: #858C9C;
  --g-accent: #566DA1; --g-accenth: #738BC1; --g-warn: #F0A132; --g-warnbg: #2A1F0E;
  --g-crit: #EF5A63; --g-ok: #6EE7A8; --g-bar: #12161E;
  --g-touch: #D15C32; --g-plate: #1D232F; --g-fill: #292E38; --g-brandline: #313C58;
}

.gw-bar { display: flex; align-items: center; height: 32px; background: var(--g-bar); border-bottom: 1px solid var(--g-line); padding-left: 12px; font-size: 12px; }
.gw-bar .gw-ttl { flex: 1; display: flex; align-items: center; gap: 8px; }
.gw-bar .gw-ico { width: 14px; height: 14px; border-radius: 3px; background: var(--g-accent); }
.gw-ctl { width: 46px; height: 32px; display: grid; place-items: center; color: var(--g-ink2); }
.gw-ctl svg { width: 10px; height: 10px; }
.gw-ctl.x:hover { background: #C42B1C; color: #fff; }

.gw-body { padding: 24px 28px 22px; }
.gw-h { font: 760 30px/1.05 var(--display); font-stretch: 72%; letter-spacing: -.005em; margin: 0; }
.gw-sub { margin: 6px 0 20px; color: var(--g-ink2); }
.gw-card { --cut: 12px; background: var(--g-card); border: 1px solid var(--g-line); padding: 18px 20px; margin-bottom: 14px; }
.gw-sec { display: flex; align-items: center; gap: 10px; font: 600 10.5px/1.3 var(--mono); letter-spacing: .06em; color: var(--g-ink2); margin-bottom: 12px; }
.gw-sec::before { content: ""; width: 16px; height: 3px; background: var(--g-touch); flex: none; }
/* La plaque : le cadre couleur de plaque, l'intérieur pastel, deux fixations orange. */
.gw-plate { --cut: 20px; background: var(--g-accent); padding: 3px; margin-bottom: 18px; }
.gw-plateb { --cut: 18px; position: relative; background: var(--g-plate); padding: 15px 24px 18px; }
.gw-plateb::before, .gw-plateb::after { content: ""; position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--g-touch); }
.gw-plateb::before { top: 9px; right: 9px; }
.gw-plateb::after { bottom: 9px; left: 9px; }
.gw-ptop { display: flex; justify-content: space-between; gap: 12px; font: 500 10.5px/1.3 var(--mono); letter-spacing: .06em; color: var(--g-ink2);
  border-bottom: 1px solid var(--g-brandline); padding: 0 14px 11px 0; margin-bottom: 12px; }
.gw-ptop > span:first-child { display: inline-flex; align-items: center; gap: 10px; }
.gw-ptop > span:first-child::before { content: ""; width: 16px; height: 3px; background: var(--g-touch); flex: none; }
.gw-plate .gw-sub { margin: 8px 0 0; }
.gw-plate, .gw-plateb, .gw-btn, .gw-alert {
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}
@supports (corner-shape: bevel) {
  .gw-plate, .gw-plateb, .gw-btn, .gw-alert { clip-path: none; border-radius: var(--cut) 0 var(--cut) 0; corner-shape: bevel; }
  .gw-card, .gw-verdict { border-radius: var(--cut) 0 var(--cut) 0; corner-shape: bevel; }
}
.gw-lab { font-size: 12px; color: var(--g-ink2); margin-bottom: 5px; }
.gw-hint { font-size: 12px; color: var(--g-ink3); margin-top: 10px; }
.gw-grid { display: grid; gap: 14px; }
.gw-g3 { grid-template-columns: 2fr 1fr 1.4fr; }
.gw-g3e { grid-template-columns: 1fr 1fr 1fr; }
.gw-g2 { grid-template-columns: 1fr 1fr; gap: 0 20px; }
.gw-g21 { grid-template-columns: 2fr 1fr; }
.gw-row { display: flex; gap: 10px; }
.gw-mt { margin-top: 14px; }
@media (max-width: 620px) { .gw-g3, .gw-g3e, .gw-g2, .gw-g21 { grid-template-columns: 1fr; } }

.gw-in { width: 100%; box-sizing: border-box; font: inherit; color: var(--g-ink); background: var(--g-ctrl); border: 1px solid var(--g-line); border-radius: 0; padding: 7px 10px; user-select: text; }
.gw-in:hover, .gw-in:focus { border-color: var(--g-accent); outline: none; }
.gw-in.ro { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.gw-btn { --cut: 8px; font: 600 12px/1.1 inherit; font-family: inherit; text-transform: uppercase; color: var(--g-ink); background: var(--g-fill); border: 0; padding: 11px 18px; cursor: pointer; white-space: nowrap; }
.gw-btn:hover { background: var(--g-brandline); }
.gw-btn.pri { color: #fff; background: var(--g-accent); min-width: 170px; }
.gw-btn.pri:hover { background: var(--g-accenth); }

.gw-sel { position: relative; }
.gw-sel select { width: 100%; appearance: none; -webkit-appearance: none; font: inherit; color: var(--g-ink); background: var(--g-ctrl); border: 1px solid var(--g-line); border-radius: 0; padding: 7px 30px 7px 10px; cursor: pointer; }
.gw-sel select:hover, .gw-sel select:focus { border-color: var(--g-accent); outline: none; }
.gw-sel select:disabled { opacity: .45; cursor: default; }
.gw-sel::after { content: ""; position: absolute; right: 13px; top: 50%; width: 7px; height: 7px; margin-top: -6px; border: solid var(--g-ink3); border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); pointer-events: none; }

.gw-chk { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; margin-bottom: 12px; }
.gw-chk.sub { margin-left: 30px; }
.gw-chk.off { opacity: .45; cursor: default; }
.gw-chk input { position: absolute; opacity: 0; pointer-events: none; }
.gw-box { width: 20px; height: 20px; flex: none; border-radius: 0; border: 1px solid var(--g-line); background: var(--g-ctrl); display: grid; place-items: center; }
.gw-box svg { width: 11px; height: 11px; visibility: hidden; }
.gw-chk:hover .gw-box { border-color: var(--g-accent); }
.gw-chk input:checked + .gw-box { background: var(--g-accent); border-color: var(--g-accent); }
.gw-chk input:checked + .gw-box svg { visibility: visible; }
.gw-chk input:focus-visible + .gw-box { outline: 2px solid var(--g-accent); outline-offset: 2px; }
.gw-cred { margin: 0 0 4px 30px; }

.gw-alert { --cut: 10px; display: flex; gap: 14px; align-items: flex-start; background: var(--g-warnbg); color: var(--g-warn); padding: 14px 18px; margin-bottom: 14px; font-size: 12.5px; }
.gw-alert b { font-size: 18px; line-height: 1; }

.gw-foot { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.gw-foot .gw-ver { flex: 1; font: 500 10.5px/1.3 var(--mono); color: var(--g-ink3); }

/* The progress view: the same window, the second state it goes through. */
.gw-step { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.gw-step b { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gw-step span { font-size: 12px; color: var(--g-ink3); white-space: nowrap; }
.gw-track { height: 8px; background: var(--g-fill); overflow: hidden; }
.gw-fill { height: 100%; width: 0; background: var(--g-accent); transition: width .4s ease; }
.gw-list { height: 240px; overflow: hidden; padding: 12px 16px; display: flex; flex-direction: column; justify-content: flex-end; }
.gw-li { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 6px; font-size: 12.5px; color: var(--g-ink2); }
.gw-li span:last-child { font-size: 11.5px; color: var(--g-ink3); font-variant-numeric: tabular-nums; }
.gw-li.hd { margin-top: 8px; font-size: 11px; font-weight: 600; color: var(--g-ink3); }
.gw-li.wn span:first-child { color: var(--g-warn); }
.gw-verdict { --cut: 12px; background: var(--g-card); border: 1px solid var(--g-line); padding: 16px 18px; margin-bottom: 14px; }
.gw-verdict b { display: block; font-size: 15px; font-weight: 600; color: var(--g-crit); }
.gw-verdict p { margin: 6px 0 0; font-size: 12.5px; color: var(--g-ink2); word-break: break-all; }

/* Beside the window: what each choice becomes on a command line. */
.gside h3 { width: fit-content; border-bottom: 2px solid var(--touch); padding-bottom: 3px; font-size: 21px; font-weight: 760; font-stretch: 72%; letter-spacing: -.005em; margin: 0 0 8px; }
.gside p { color: var(--ink-2); font-size: 14.5px; line-height: 1.6; margin: 0 0 14px; }
.gside .hccmd { font-size: 12.5px; }
.gside ul { margin: 0 0 14px; padding-left: 18px; color: var(--ink-2); font-size: 14px; line-height: 1.6; }
.gnote { font-size: 13px; color: var(--ink-3); }

/* LA DÉMO DANS UNE FENÊTRE (16/10/2026). Julien : « mets la démo dans un modal plutôt qu'une page
   avec bouton retour ». Le rapport garde sa propre page — un lien direct ou « Ouvrir dans un
   onglet » y mènent —, mais depuis l'outil il s'ouvre par-dessus, dans un cadre, et l'on revient
   à l'endroit exact où l'on était en le fermant. */
.hcdemo {
  --cut: 16px;
  width: min(1440px, calc(100vw - 32px)); height: calc(100vh - 32px); max-width: none; max-height: none;
  padding: 0; border: 0; background: var(--ground); color: var(--ink); overflow: hidden;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}
.hcdemo[open] { display: flex; flex-direction: column; }
.hcdemo::backdrop { background: rgba(12, 15, 22, .62); }
.hcdemohead {
  display: flex; align-items: center; gap: 14px; flex: none;
  padding: 10px 14px 10px 24px; background: var(--panel); border-bottom: 1px solid var(--line);
}
.hcdemohead .kicker { margin: 0; flex: 1; min-width: 0; }
.hcdemo iframe { flex: 1; width: 100%; border: 0; display: block; background: var(--ground); }
@media (max-width: 700px) { .hcdemohead #demoOpen { display: none; } }