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

   THE INTUNE DIAGNOSTICS 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, 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 (55-Gui.ps1, both palettes): the point is that the reader recognises the window
   when it opens on their screen.

   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, .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; }
/* Les trois colonnes lecture / écriture / jamais. `read` garde le filet par défaut de
   .hccol, et la règle est écrite quand même : les scripts composent la classe en `hccol-`
   + la clé, donc les trois existent dans le balisage. Une qui ne figure nulle part dans la
   feuille passe pour une faute de frappe — le prérendu du 12/10/2026 l a fait remonter
   comme telle, parce quil met enfin ces pages sur le disque. */
.hccol-read { border-top-color: var(--a1-line); }
.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; } }

.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 ----
   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 in 55-Gui.ps1 — 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: 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, 660px) minmax(0, 1fr); gap: 36px; align-items: start; margin-top: 30px; }
@media (max-width: 1000px) { .gwrap { grid-template-columns: 1fr; } }

.gw {
  /* La maquette prend les jetons du theme : elle porte donc la meme palette
     que le produit, et bascule en sombre sans bloc de surcharge. Elle gardait
     jusqu'ici un accent teal qui n'existait nulle part ailleurs sur le site. */
  --g-page: var(--bg2, #e9edf5); --g-card: var(--card, #fdfdff);
  --g-line: var(--line, #cfd4df); --g-ctrl: var(--card, #fdfdff);
  --g-ink: var(--ink, #171d29); --g-ink2: var(--ink2, #49505e); --g-ink3: var(--mute, #626978);
  --g-accent: var(--brand, #3c5083); --g-accenth: var(--plate, #4e6498);
  --g-warn: var(--warn, #935701);
  --g-plate: var(--plate, #4e6498); --g-platesoft: var(--plate-soft, #e5ebf8);
  --g-touch: var(--touch, #d15c32);
  --g-bar: var(--card, #fdfdff);
  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;
}
/* Plus de surcharge sombre : les jetons ci-dessus basculent deja. */

.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; }
/* La plaque : cadre couleur de plaque, intérieur pastel, deux rivets, une
   ligne de référence en chasse fixe. Le chanfrein est au clip-path ; la
   fenêtre réelle le découpe, WPF ne sachant pas biseauter une bordure. */
.gw-plate { background: var(--g-plate, #4e6498); padding: 3px; margin: 0 0 18px;
  clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px); }
.gw-plate-in { position: relative; background: var(--g-platesoft, #e5ebf8); padding: 15px 20px 17px;
  clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px); }
.gw-plate-in::before, .gw-plate-in::after { content: ""; position: absolute; width: 6px; height: 6px;
  border-radius: 50%; background: var(--g-touch, #d15c32); box-shadow: inset 0 0 0 1px rgba(23,29,41,.25); }
.gw-plate-in::before { top: 9px; right: 9px; }
.gw-plate-in::after { bottom: 9px; left: 9px; }
.gw-ref { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  font: 500 10px/1.4 var(--mono, ui-monospace, Consolas, monospace); letter-spacing: .08em;
  text-transform: uppercase; color: var(--g-ink2);
  border-bottom: 1px solid rgba(23,29,41,.18); padding: 0 16px 9px 0; margin-bottom: 12px; }
.gw-ref > span:first-child { display: inline-flex; align-items: center; gap: 9px; }
.gw-dash { width: 15px; height: 3px; background: var(--g-touch, #d15c32); flex: none; display: inline-block; }
.gw-h { font-size: 27px; font-weight: 700; font-stretch: 72%; margin: 0; line-height: 1.05;
  font-family: Archivo, Bahnschrift, var(--sans, system-ui), sans-serif; }
.gw-sub { margin: 8px 0 0; color: var(--g-ink2); }
.gw-card { background: var(--g-card); border: 1px solid var(--g-line); border-radius: 0; padding: 18px 20px; margin-bottom: 14px; }
.gw-lab { display: flex; align-items: center; gap: 9px; font-size: 10px; font-weight: 500;
  font-family: var(--mono, ui-monospace, Consolas, monospace); color: var(--g-ink2);
  letter-spacing: .09em; text-transform: uppercase; margin-bottom: 10px; }
.gw-lab::before { content: ""; width: 12px; height: 3px; background: var(--g-touch, #d15c32); flex: none; }
.gw-lab2 { margin-top: 20px; }
/* La langue : deux boutons radio, comme dans la fenêtre. */
.gw-radios { display: flex; gap: 26px; margin-bottom: 2px; }
.gw-rad { display: flex; align-items: center; gap: 9px; cursor: pointer; }
.gw-rad input { position: absolute; opacity: 0; pointer-events: none; }
.gw-dot { width: 15px; height: 15px; flex: none; border-radius: 50%; border: 1px solid var(--g-line);
  background: var(--g-ctrl); display: grid; place-items: center; }
.gw-rad input:checked + .gw-dot { border-color: var(--g-plate, #4e6498); }
.gw-rad input:checked + .gw-dot::after { content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--g-plate, #4e6498); }
.gw-rad:hover .gw-dot { border-color: var(--g-plate, #4e6498); }
.gw-in.ph { color: var(--g-ink3); font-style: italic; }
.gw-hint { font-size: 12px; color: var(--g-ink3); margin-bottom: 10px; }
.gw-warn { font-size: 12px; color: var(--g-warn); margin-top: 10px; }
.gw-row { display: flex; gap: 10px; }
.gw-in { flex: 1; min-width: 0; background: var(--g-ctrl); border: 1px solid var(--g-line); border-radius: 5px; padding: 7px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.gw-btn { font: inherit; color: var(--g-ink); background: var(--g-ctrl); border: 1px solid var(--g-line); border-radius: 5px; padding: 8px 18px; cursor: pointer; }
.gw-btn:hover { border-color: var(--g-accent); }
.gw-btn.pri { color: #fff; background: var(--g-accent); border-color: var(--g-accent); font-weight: 600; min-width: 150px; }
.gw-btn.pri:hover { background: var(--g-accenth); }

.gw-sel { position: relative; margin-bottom: 20px; }
.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: 5px; padding: 7px 34px 7px 12px; cursor: pointer; }
.gw-sel select:hover, .gw-sel select:focus { border-color: var(--g-accent); outline: none; }
.gw-sel::after { content: ""; position: absolute; right: 15px; 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-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.gw-chk { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.gw-chk input { position: absolute; opacity: 0; pointer-events: none; }
.gw-box { width: 20px; height: 20px; flex: none; border-radius: 4px; 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-foot { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.gw-foot .gw-ver { flex: 1; font-size: 11.5px; color: var(--g-ink3); }

/* The progress view: the same window, the second state it goes through. */
.gw-step { display: flex; justify-content: space-between; margin-bottom: 12px; }
.gw-step b { font-size: 13.5px; font-weight: 600; }
.gw-step span { font-size: 12px; color: var(--g-ink3); }
.gw-track { height: 8px; border-radius: 4px; background: var(--g-page); overflow: hidden; }
.gw-fill { height: 100%; width: 0; border-radius: 4px; background: var(--g-accent); transition: width .5s ease; }
.gw-list { height: 150px; overflow: hidden; padding: 12px 16px; display: flex; flex-direction: column; justify-content: flex-end; }
.gw-li { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; font-size: 12.5px; color: var(--g-ink2); }
.gw-li span:last-child { color: var(--g-ink3); font-variant-numeric: tabular-nums; }
.gw-li.ok span:first-child::before { content: "✓  "; color: var(--g-accent); font-weight: 700; }
.gw-li.run span:first-child { color: var(--g-ink); font-weight: 600; }

/* 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); }

/* The demo report, in a window over the page. The frame is the report as it is, so the window
   is plain: square, the site's short hard shadow, one close button in the reference face. */
.demodlg { width: min(1400px, calc(100vw - 48px)); height: calc(100vh - 48px); max-width: none; max-height: none; padding: 0; border: 1px solid var(--line); background: var(--ground); box-shadow: 6px 6px 0 rgba(0, 0, 0, .25); overflow: hidden; }
.demodlg[open] { display: flex; flex-direction: column; }
.demodlg::backdrop { background: rgba(10, 14, 24, .62); }
.demodlg-x { flex: 0 0 auto; align-self: flex-end; margin: 6px 8px; padding: 5px 11px; font: 600 11px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--ink); background: transparent; border: 1px solid var(--line); cursor: pointer; }
.demodlg-x:hover { background: var(--ground-2); }
.demodlg-frame { flex: 1 1 auto; width: 100%; border: 0; background: #fff; }
.demodlg-open { overflow: hidden; }
@media (max-width: 700px) { .demodlg { width: 100vw; height: 100vh; border: 0; box-shadow: none; } }