/* manual.css — feuille de style du manuel de l'utilisateur.
 *
 * ⚠️ AUCUN STYLE EN LIGNE DANS `manual.html`, ET C'EST UNE CONTRAINTE SERVIE,
 * pas une préférence. La CSP de fs-staging est `style-src 'self'` : un
 * attribut `style="…"` comme un bloc `<style>` sont REFUSÉS par le navigateur,
 * en silence pour l'attribut. Tout passe donc par une classe, ici.
 *
 * Les couleurs reprennent celles de `WorkOrders_LIVE.css` : le manuel doit se
 * lire comme une pièce de la même famille, pas comme un document étranger.
 *
 * L'IMPRESSION EST UN CAS DE PREMIÈRE CLASSE. Un employé des travaux publics
 * imprime son manuel. Le thème sombre le rend illisible sur papier, donc
 * `@media print` le retourne en noir sur blanc, retire le rail et n'imprime
 * QUE la langue active.
 */

:root {
  --bg: #0f172a;
  --panel: #111c33;
  --panel2: #16233f;
  --line: #22314f;
  --ink: #e6edf7;
  --mut: #93a3bd;
  --accent: #3b82f6;
  --accent2: #22d3ee;
  --good: #22c55e;
  --warn: #f59e0b;
  --bad: #ef4444;
  --chip: #1e2b48;
  --rail: 264px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  font-family: 'Segoe UI', system-ui, Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.62;
}

/* ── Mise en page ─────────────────────────────────────────────────────── */
.app { display: grid; grid-template-columns: var(--rail) 1fr; min-height: 100vh; }

.side {
  background: #0b1428;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: auto;
}
.brand { padding: 16px 16px 12px; border-bottom: 1px solid var(--line); }
.brand h1 { font-size: 15px; margin: 0; letter-spacing: .3px; }
.brand small { color: var(--mut); font-size: 11px; display: block; margin-top: 2px; }

.lang { display: flex; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.lang button {
  flex: 1;
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--mut);
  padding: 6px 4px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 12px;
  font-family: inherit;
}
.lang button:hover { border-color: var(--accent); color: var(--ink); }
.lang button.active { background: var(--accent); border-color: var(--accent); color: #fff; }

.nav { padding: 8px; }
.nav a {
  display: flex;
  gap: 9px;
  align-items: baseline;
  color: var(--mut);
  text-decoration: none;
  padding: 7px 11px;
  border-radius: 8px;
  font-size: 13px;
}
.nav a:hover { background: var(--panel); color: var(--ink); }
.nav a.active { background: var(--accent); color: #fff; }
.nav a .ic { width: 18px; text-align: center; flex: 0 0 auto; }
.nav .grp {
  color: var(--mut);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .6px;
  padding: 14px 11px 5px;
  border-top: 1px solid var(--line);
  margin-top: 8px;
}
.nav .grp:first-child { border-top: 0; margin-top: 0; }
.nav a.todo { opacity: .45; }

/* Une section du chapitre COURANT. Décalée sous son chapitre, plus discrète :
   le rail doit se lire comme « où je suis » puis « où je peux aller dans ce
   chapitre », pas comme une liste plate de vingt entrées de même poids. */
.nav a.sub {
  padding-left: 38px;
  font-size: 12.5px;
  padding-top: 5px;
  padding-bottom: 5px;
}
.nav a.sub .ic { display: none; }
.nav a.active { background: var(--accent); color: #fff; }
.nav a.sub.active { background: var(--panel2); color: var(--ink); }

.side .foot {
  margin-top: auto;
  padding: 12px;
  border-top: 1px solid var(--line);
  font-size: 11px;
  color: var(--mut);
}

.main { overflow: visible; }
.content { padding: 28px 34px 90px; max-width: 900px; }

/* ── Couverture ───────────────────────────────────────────────────────── */
.cover { border-bottom: 1px solid var(--line); padding-bottom: 26px; margin-bottom: 8px; }
.cover .eyebrow { color: var(--accent2); font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase; }
.cover h1 { font-size: 34px; margin: 8px 0 6px; line-height: 1.2; }
.cover .sub { color: var(--mut); font-size: 17px; margin: 0; }
.cover .meta { color: var(--mut); font-size: 12px; margin-top: 18px; }

/* ── Sections ─────────────────────────────────────────────────────────── */
section { padding-top: 34px; }
h2 { font-size: 23px; margin: 0 0 4px; scroll-margin-top: 20px; }
h3 { font-size: 16px; margin: 26px 0 6px; color: var(--accent2); }
h4 { font-size: 14px; margin: 18px 0 4px; }
p { margin: 0 0 12px; }
.lede { color: var(--mut); font-size: 16px; margin: 0 0 18px; }
ul, ol { margin: 0 0 12px; padding-left: 22px; }
li { margin-bottom: 7px; }
a { color: var(--accent2); }
b, strong { color: #fff; font-weight: 600; }
.mut { color: var(--mut); }

code {
  background: var(--chip);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 1px 5px;
  font-size: 13px;
  font-family: 'Cascadia Mono', Consolas, monospace;
}

/* Le libellé d'un bouton tel qu'il s'affiche à l'écran. En FR et en ES il
   reste en ANGLAIS (voir la note du manuel) : cette classe le signale comme
   une chose à TROUVER, pas comme un mot de la phrase. */
.ui {
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 1px 6px;
  font-size: 13.5px;
  white-space: nowrap;
  color: #fff;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px 18px;
  margin: 18px 0;
}
.panel > :last-child { margin-bottom: 0; }
.panel h4 { margin-top: 0; }

.note { border-left: 3px solid var(--accent); }
.warn { border-left: 3px solid var(--warn); }
.stop { border-left: 3px solid var(--bad); }

table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 16px 0; }
th, td { padding: 9px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { color: var(--mut); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; }

figure { margin: 20px 0; }
figure svg { max-width: 100%; height: auto; display: block; }
figcaption { color: var(--mut); font-size: 12.5px; margin-top: 8px; }

/* ── LES CAPTURES D'ÉCRAN ──────────────────────────────────────────────────
   Une capture est un `<img class="shot">` dans un `<figure>`, et sa source est
   une donnée `data:` — la CSP servie porte `img-src 'self' data: blob:`, donc
   une image intégrée passe là où un fichier séparé demanderait un déploiement
   de plus. Le cadre et le fond sont ici : une capture sombre sur fond sombre
   se confond avec la page, et on ne voit plus où finit l'écran du produit.

   `loading="lazy"` sur la balise, pas ici : une page qui porte vingt captures
   ne doit pas les décoder toutes au premier rendu.

   ⚠️ LA LÉGENDE EST TRILINGUE, L'IMAGE NE L'EST PAS. Une capture montre une
   interface dans UNE langue. Le manuel dit donc dans la légende quelle langue
   on regarde, plutôt que de laisser croire que l'écran suit le lecteur — et
   pour la Console, qui est traduite, la légende le précise. */
figure.shot-fig { margin: 22px 0; }
img.shot {
  display: block; max-width: 100%; height: auto;
  border: 1px solid var(--line); border-radius: 10px;
  background: #0b1220;
}
/* Une capture d'une app de terrain est étroite : on la borne pour qu'elle ne
   s'étire pas à la largeur d'un écran de bureau, ce qui la rendrait floue. */
img.shot.phone { max-width: 320px; }

/* Les traits du schéma du relais. Aucune couleur en attribut `style` : la
   CSP les refuserait. Les attributs SVG de présentation (fill, stroke) ne
   sont PAS du CSS et passent, mais on les garde ici pour n'avoir qu'un
   endroit à changer. */
.dg-box { fill: #111c33; stroke: #22314f; }
.dg-box-a { fill: #16233f; stroke: #3b82f6; }
.dg-t { fill: #e6edf7; font-size: 13px; font-family: 'Segoe UI', system-ui, Arial, sans-serif; }
.dg-s { fill: #93a3bd; font-size: 11px; font-family: 'Segoe UI', system-ui, Arial, sans-serif; }
.dg-arrow { stroke: #3b82f6; fill: none; }
.dg-head { fill: #3b82f6; }

/* Le pas suivant, en bas de chaque chapitre. Un manuel en cinq fichiers doit
   pouvoir se lire d'un bout à l'autre sans revenir au sommaire. */
.suite {
  margin-top: 46px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 15px;
}
.suite a { text-decoration: none; }
.suite a:hover { text-decoration: underline; }

/* Section pas encore rédigée. Elle EXISTE dans le sommaire pour que la forme
   du manuel soit visible — un sommaire qui ment sur ce qui est écrit coûte
   plus cher qu'un sommaire incomplet. */
.todo-body {
  border: 1px dashed var(--line);
  border-radius: 12px;
  padding: 16px 18px;
  color: var(--mut);
  font-size: 13.5px;
}

/* ── Petit écran ──────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .side { position: static; height: auto; }
  .content { padding: 20px 16px 60px; }
  .cover h1 { font-size: 26px; }
}

/* ── Impression ───────────────────────────────────────────────────────── */
@media print {
  :root { --ink: #111; --mut: #555; --line: #ccc; --panel: #f6f7f9; --panel2: #eef1f5; --chip: #eef1f5; }
  html, body { background: #fff; color: #111; font-size: 11pt; }
  .app { display: block; }
  .side { display: none; }
  .content { max-width: none; padding: 0; }
  b, strong { color: #000; }
  .ui { background: #eef1f5; color: #000; }
  section { page-break-inside: auto; padding-top: 22px; }
  h2 { page-break-after: avoid; }
  h3, h4 { page-break-after: avoid; }
  .panel, figure, table { page-break-inside: avoid; }
  /* La capture garde son cadre à l'impression — sans lui, une capture claire
     sur papier blanc n'a plus de bord, et on ne sait plus ce qui est l'écran. */
  img.shot { border-color: #999; background: #fff; }
  .todo-body { display: none; }
  a { color: #111; text-decoration: none; }
  .dg-box { fill: #f6f7f9; stroke: #ccc; }
  .dg-box-a { fill: #eef1f5; stroke: #333; }
  .dg-t { fill: #111; }
  .dg-s { fill: #555; }
  .dg-arrow { stroke: #333; }
  .dg-head { fill: #333; }
}

/* ══════════════════════════════════════════════════════════════════════════
   LE COMMUTATEUR DE LANGUE — EN DERNIER, ET C'EST LA CORRECTION
   ══════════════════════════════════════════════════════════════════════════

   Chaque bloc de prose existe TROIS fois, sous `data-lang="en|fr|es"`. Le
   basculement est un attribut `lang` sur <html> et ces règles-ci — donc aucune
   traduction à l'exécution, aucun appel réseau, et le document reste entier
   dans le fichier : il s'imprime et s'envoie tel quel.

   ⚠️ CE BLOC DOIT RESTER LE DERNIER DU FICHIER. Mesuré au rendu : posé en
   tête, `.brand small { display:block }` (0,1,1) l'emportait sur
   `[data-lang]` (0,1,0) et les TROIS langues du bandeau s'affichaient l'une
   sous l'autre. Toute règle de composant qui pose un `display` sur un élément
   traduit reproduirait le défaut. Ici, à égalité de spécificité, c'est la
   dernière qui gagne — et masquer doit toujours gagner.

   Le préfixe `html` n'est pas décoratif : il porte la spécificité à (0,1,1),
   celle des règles de composant qu'il doit battre. */
/* ⚠️ COMPARAISON PAR PREFIXE, ET PAS PAR EGALITE. L'attribut `lang` porte
   l'etiquette COMPLETE — `es-419` pour l'espagnol d'Amerique latine — alors
   que `data-lang` porte le code court. Une regle en `=` ne mordrait donc plus
   sur l'espagnol, et les TROIS langues s'afficheraient l'une sous l'autre :
   exactement le defaut deja mesure sur `.brand small`. Le prefixe tient aussi
   pour un `fr-CA` le jour ou il arrive. */
html [data-lang] { display: none; }
html[lang^="en"] [data-lang="en"],
html[lang^="fr"] [data-lang="fr"],
html[lang^="es"] [data-lang="es"] { display: block; }

/* Les fragments traduits DANS une phrase (sommaire, bandeau) se replacent en
   ligne : `display:block` y casserait la ligne du lien. */
html span[data-lang], html code[data-lang], html small[data-lang] { display: none; }
html[lang^="en"] span[data-lang="en"], html[lang^="en"] code[data-lang="en"],
html[lang^="fr"] span[data-lang="fr"], html[lang^="fr"] code[data-lang="fr"],
html[lang^="es"] span[data-lang="es"], html[lang^="es"] code[data-lang="es"] { display: inline; }
html[lang^="en"] small[data-lang="en"],
html[lang^="fr"] small[data-lang="fr"],
html[lang^="es"] small[data-lang="es"] { display: block; }