/* =========================================================
   SPOTech Lab — feuille de style
   Esprit : bureau des Mac des années 90 (fenêtres à rayures,
   boutons en relief, police bitmap pour l'interface), avec un
   texte courant moderne et très lisible.
   Pour changer une couleur, modifiez-la ici : tout le site suit.
   ========================================================= */

@font-face { font-family: "Archivo"; src: url("fonts/archivo-latin-wdth-normal.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("fonts/archivo-latin-wdth-italic.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-style: italic; font-display: swap; }
@font-face { font-family: "Pixelify"; src: url("fonts/pixelify-sans-latin-wght-normal.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2"); font-weight: 100 800; font-display: swap; }

:root {
  /* Bureau et interface (« Platinum ») */
  --bureau: #cfccd9;
  --bureau-point: #bdb9c9;
  --chrome: #e7e5ee;        /* fond des barres, boutons */
  --chrome-clair: #ffffff;  /* arête éclairée du relief */
  --chrome-ombre: #8c8999;  /* arête ombrée du relief */
  --rayure: #b7b3c4;        /* rayures des barres de titre */
  --papier: #ffffff;        /* intérieur des fenêtres */
  --papier-2: #f4f3f8;
  --encre: #17161c;
  --encre-2: #4f4d5a;
  --filet: #d9d6e2;
  --lien: #2346d8;
  --selection: #2346d8;     /* surlignage façon menu des années 90 */

  --police: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --police-ui: "Pixelify", "Archivo", system-ui, sans-serif;
  --police-code: "JetBrains Mono", ui-monospace, Consolas, monospace;

  --large: 1180px;
  --lecture: 720px;
  color-scheme: light;
}

/* ---------- Couleur de chaque thème ----------
   Pour ajouter un thème : une ligne ici, une entrée dans assets/catalogue.js, un dossier. */
.t-neutre     { --c: #17161c; --c-texte: #fff; }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0; color: var(--encre); min-height: 100vh; display: flex; flex-direction: column;
  background-color: var(--bureau);
  background-image: radial-gradient(var(--bureau-point) 1px, transparent 1.2px);
  background-size: 4px 4px;
  font-family: var(--police); font-size: 1.0625rem; line-height: 1.65;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--selection); outline-offset: 2px; }
h1, h2, h3 { line-height: 1.15; margin: 0; text-wrap: balance; }
[hidden] { display: none !important; }
.page { max-width: var(--large); margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
main.page { flex: 1; width: 100%; padding-top: 28px; padding-bottom: 8px; display: flex; flex-direction: column; gap: 28px; }

/* ---------- Barre de menus ---------- */
.entete { background: var(--papier); border-bottom: 2px solid var(--encre); position: sticky; top: 0; z-index: 10; }
.entete .page { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 46px; position: relative; }
/* Logo « Ordinateur » : icône pixel, SPOTech en capitales larges, badge LAB */
.logo { display: flex; align-items: center; gap: .5rem; text-decoration: none; color: var(--encre); }
.logo img { width: 26px; height: auto; image-rendering: pixelated; }
.logo span { font-family: var(--police); font-weight: 900; font-stretch: 118%; font-size: 1.3rem; letter-spacing: -.01em; line-height: 1; }
.logo b { font-family: var(--police-ui); font-weight: 700; font-size: .78rem; letter-spacing: .14em; line-height: 1; text-transform: uppercase; color: #fff; background: var(--encre); padding: .28em .45em .22em .55em; align-self: center; }
.entete-droite { display: flex; align-items: center; gap: .8rem; }
.menu { display: flex; list-style: none; margin: 0; padding: 0; }
.menu a { display: block; padding: .35rem .8rem; text-decoration: none; font-family: var(--police-ui); font-size: 1.08rem; }
.menu a:hover, .menu a[aria-current="page"] { background: var(--selection); color: #fff; }
.bouton-menu { display: none; }
.seulement-mobile { display: none; }

/* ---------- Champs et boutons en relief ---------- */
.champ, .entete-recherche input, .recherche input {
  font: inherit; color: var(--encre); background: var(--papier);
  border: 2px solid var(--encre); border-radius: 0;
  box-shadow: inset 2px 2px 0 var(--rayure);
  padding: .45rem .7rem;
}
.bouton, .recherche button, .filtres button, .bouton-menu, .copier {
  font-family: var(--police-ui); font-weight: 700; font-size: 1rem; color: var(--encre);
  background: var(--chrome); border: 2px solid var(--encre); border-radius: 8px;
  box-shadow: inset 2px 2px 0 var(--chrome-clair), inset -2px -2px 0 var(--chrome-ombre);
  padding: .4rem 1rem; cursor: pointer;
}
.bouton:active, .recherche button:active, .filtres button:active, .copier:active,
.filtres button[aria-pressed="true"] {
  background: #5d5a69; color: #fff;
  box-shadow: inset 2px 2px 0 #3f3d49, inset -2px -2px 0 #8c8999;
}
/* bouton par défaut : double contour comme les boîtes de dialogue d'époque */
.recherche button { outline: 3px solid var(--encre); outline-offset: 2px; margin-left: .4rem; }

.entete-recherche { display: flex; align-items: stretch; height: 32px; }
.entete-recherche input { width: 12rem; padding: 0 .6rem; font-size: .95rem; }
.entete-recherche input:focus { outline: none; border-color: var(--selection); }
.entete-recherche button { margin-left: -2px; border: 2px solid var(--encre); background: var(--chrome); padding: 0 .5rem; align-items: center; display: flex; cursor: pointer; box-shadow: inset 2px 2px 0 var(--chrome-clair), inset -2px -2px 0 var(--chrome-ombre); }

@media (max-width: 960px) { .entete-recherche input { width: 8rem; } }
@media (max-width: 760px) {
  .bouton-menu { display: inline-flex; }
  .entete-recherche { display: none; }
  .entete-droite { display: contents; }
  .seulement-mobile { display: block; }
  .menu { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--papier); flex-direction: column; border-bottom: 2px solid var(--encre); padding: .4rem 0; }
  .menu.ouvert { display: flex; }
  .menu a { padding: .6rem max(16px, env(safe-area-inset-left, 0px)); font-size: 1.15rem; }
}

/* ---------- Fenêtres ---------- */
.fenetre { background: var(--papier); border: 2px solid var(--encre); box-shadow: 4px 4px 0 var(--encre); min-width: 0; }
.fenetre-barre {
  display: flex; align-items: center; gap: .6rem; height: 30px; padding: 0 8px;
  background: var(--chrome) repeating-linear-gradient(to bottom, transparent 0 4px, var(--rayure) 4px 6px) 0 6px / 100% calc(100% - 12px) no-repeat;
  border-bottom: 2px solid var(--encre);
}
.fenetre-case { width: 16px; height: 16px; flex: none; background: var(--c, var(--chrome)); border: 2px solid var(--encre); box-shadow: 0 0 0 3px var(--chrome); }
.fenetre-titre { margin: 0 auto; padding: 0 .7rem; background: var(--chrome); font-family: var(--police-ui); font-weight: 700; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 80%; }
.fenetre-barre::after { content: ""; width: 16px; flex: none; }
.fenetre-corps { padding: 1.6rem 1.8rem 1.8rem; }
@media (max-width: 600px) { .fenetre-corps { padding: 1.2rem 1rem 1.4rem; } }

/* ---------- Accueil ---------- */
.accueil h1 { font-size: clamp(2.1rem, 5vw, 3.6rem); font-weight: 900; font-stretch: 112%; letter-spacing: -.025em; max-width: 18ch; }
.accueil p { font-size: 1.15rem; color: var(--encre-2); max-width: 40rem; margin: .9rem 0 1.5rem; }
.recherche { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; max-width: 40rem; }
.recherche input { flex: 1; min-width: 12rem; font-size: 1.05rem; }
.recherche input:focus { outline: none; border-color: var(--selection); }

/* Thèmes : vue en icônes, comme dans le Finder */
.themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 1.4rem .8rem; }
.theme { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .35rem; text-decoration: none; padding: .6rem .3rem; }
.theme svg { width: 72px; height: auto; color: var(--c); image-rendering: pixelated; }
.theme strong { font-family: var(--police-ui); font-weight: 700; font-size: 1.05rem; padding: 0 .35rem; }
.theme em { font-style: normal; font-size: .82rem; color: var(--encre-2); }
.theme:hover strong, .theme:focus-visible strong { background: var(--selection); color: #fff; }

/* ---------- Cartes (petites fenêtres) ---------- */
.grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6rem; }
@media (max-width: 960px) { .grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .grille { grid-template-columns: 1fr; } }
/* Rubriques dans les pages de thème */
.rubrique + .rubrique { margin-top: 2.4rem; }
.rubrique-titre { font-family: var(--police-ui); font-size: 1.3rem; font-weight: 600; display: flex; align-items: center; gap: .6rem; margin: 0 0 1rem; padding-bottom: .4rem; border-bottom: 2px solid var(--encre); }
.rubrique-titre span { font-size: .85rem; min-width: 1.6em; text-align: center; padding: 0 .4em; background: var(--c, var(--encre)); color: var(--c-texte, #fff); border: 2px solid var(--encre); }
.carte { display: flex; flex-direction: column; text-decoration: none; background: var(--papier); border: 2px solid var(--encre); box-shadow: 3px 3px 0 var(--encre); transition: transform .12s ease, box-shadow .12s ease; }
.carte:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--encre); }
.carte .fenetre-barre { height: 26px; }
.carte .fenetre-case { width: 14px; height: 14px; }
.carte .fenetre-titre { font-size: .92rem; }
.carte-image { aspect-ratio: 16 / 9; background: var(--c); border-bottom: 2px solid var(--encre); overflow: hidden; }
.carte-image img { width: 100%; height: 100%; object-fit: cover; }
.carte-corps { padding: .9rem 1rem 1rem; display: flex; flex-direction: column; gap: .45rem; flex: 1; }
.carte h3 { font-size: 1.17rem; font-weight: 800; letter-spacing: -.01em; }
.carte p { margin: 0; color: var(--encre-2); font-size: .95rem; }
.carte .meta { margin-top: auto; padding-top: .3rem; }
.carte:hover h3 { color: var(--lien); }

.vide { background: var(--papier-2); border: 2px dashed var(--chrome-ombre); padding: 1.5rem; color: var(--encre-2); }
.vide strong { color: var(--encre); display: block; font-family: var(--police-ui); font-size: 1.15rem; margin-bottom: .2rem; }

/* ---------- Étiquettes ---------- */
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .9rem; font-size: .86rem; color: var(--encre-2); }
.type { font-family: var(--police-ui); font-weight: 700; font-size: .85rem; padding: .05rem .5rem; border: 2px solid currentColor; }
.niveau { font-size: .86rem; font-weight: 700; }
.niveau::before { content: ""; display: inline-block; width: .6em; height: .6em; margin-right: .4em; vertical-align: .02em; background: currentColor; }
.niveau-debutant { color: #0f7a54; }
.niveau-intermediaire { color: #a86300; }
.niveau-avance { color: #c42b4a; }
.etiquette { display: inline-block; background: var(--c); color: var(--c-texte); font-family: var(--police-ui); font-weight: 700; font-size: .85rem; padding: .05rem .5rem; border: 2px solid var(--encre); }

/* ---------- Pages de liste ---------- */
.intro { color: var(--encre-2); font-size: 1.1rem; max-width: 44rem; margin: 0 0 1.4rem; }
.titre-page { font-size: clamp(2rem, 5vw, 3rem); font-weight: 900; font-stretch: 112%; letter-spacing: -.02em; margin-bottom: .5rem; }
.filtres { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.6rem; }
.filtres button { font-size: .95rem; padding: .3rem .9rem; }
.bande { height: 10px; background: var(--c); border-bottom: 2px solid var(--encre); }

/* ---------- Page d'article ---------- */
.fil { font-family: var(--police-ui); font-size: .95rem; margin-bottom: 1rem; color: var(--encre-2); }
.fil a { text-decoration: none; }
.fil a:hover { color: var(--lien); text-decoration: underline; }
.article-tete h1 { font-size: clamp(1.9rem, 4.6vw, 3rem); font-weight: 850; font-stretch: 108%; letter-spacing: -.02em; max-width: 24ch; }
.chapo { font-size: 1.2rem; margin: .9rem 0 0; max-width: 42rem; color: var(--encre-2); }
.article-tete .meta { margin-top: 1.2rem; }
.article-tete .etiquette { margin-right: .2rem; }
.article-image { margin: 1.6rem 0 0; }
.article-image img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; border: 2px solid var(--encre); background: var(--c); }
.credit { font-size: .8rem; color: var(--encre-2); margin: .4rem 0 0; }

.texte { max-width: var(--lecture); margin: 2rem auto 0; }
.texte > * + * { margin-top: 1.1rem; }
.texte h2 { font-size: 1.65rem; font-weight: 850; letter-spacing: -.015em; margin-top: 2.6rem; padding-top: .2rem; }
.texte h3 { font-size: 1.25rem; font-weight: 800; margin-top: 2rem; }
.texte h2 + *, .texte h3 + * { margin-top: .6rem; }
.texte p, .texte ul, .texte ol, .texte pre, .texte table { margin-bottom: 0; }
.texte ul, .texte ol { padding-left: 1.4rem; }
.texte li + li { margin-top: .35rem; }
.texte a { color: var(--lien); text-underline-offset: 3px; }
.texte strong { font-weight: 750; }
.texte code { overflow-wrap: anywhere; font-family: var(--police-code); font-size: .86em; background: var(--papier-2); border: 1px solid var(--filet); padding: .08em .35em; }
.texte pre { position: relative; background: #1b1a24; color: #eceaf5; border: 2px solid var(--encre); box-shadow: 3px 3px 0 var(--encre); padding: 2.6rem 1.2rem 1.1rem; overflow-x: auto; font-size: .88rem; line-height: 1.6; }
.texte pre::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 26px; background: var(--chrome) repeating-linear-gradient(to bottom, transparent 0 4px, var(--rayure) 4px 6px) 0 5px / 100% 16px no-repeat; border-bottom: 2px solid var(--encre); }
.texte pre code { overflow-wrap: normal; background: none; border: 0; padding: 0; font-size: inherit; color: inherit; }
/* Dans les tableaux : les commandes ne se coupent qu'aux espaces (le tableau défile sur mobile) */
.texte td code { overflow-wrap: normal; }
.copier { position: absolute; top: 2px; right: 6px; font-size: .78rem; padding: .05rem .6rem; border-radius: 6px; z-index: 1; }
.tableau { overflow-x: auto; border: 2px solid var(--encre); }
.texte table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.texte th { text-align: left; background: var(--chrome); font-weight: 750; border-bottom: 2px solid var(--encre); }
.texte th, .texte td { padding: .55rem .75rem; vertical-align: top; }
.texte td { border-top: 1px solid var(--filet); }
/* Tableaux larges (7 colonnes ou plus) : texte et marges plus compacts */
.texte table:has(th:nth-child(6)) { font-size: .88rem; }
.texte table:has(th:nth-child(6)) th, .texte table:has(th:nth-child(6)) td { padding: .5rem .55rem; }
.texte table:has(th:nth-child(7)) { font-size: .86rem; }
.texte table:has(th:nth-child(7)) th, .texte table:has(th:nth-child(7)) td { padding: .5rem .5rem; }

/* Encadrés : façon boîtes d'alerte */
.encadre { --e: var(--lien); border: 2px solid var(--encre); box-shadow: 3px 3px 0 var(--encre); background: var(--papier); padding: 1rem 1.2rem 1rem 3.6rem; position: relative; }
.encadre::before { content: "i"; position: absolute; left: 1rem; top: 1rem; width: 1.7rem; height: 1.7rem; display: grid; place-items: center; background: var(--e); color: #fff; font-family: var(--police-ui); font-weight: 700; border: 2px solid var(--encre); }
.encadre > * + * { margin-top: .5rem; }
.encadre p { margin: 0; }
.encadre-titre { font-family: var(--police-ui); font-weight: 700; font-size: 1.08rem; }
.encadre.astuce { --e: #0f7a54; }
.encadre.astuce::before { content: "★"; }
.encadre.attention { --e: #c27c00; }
.encadre.attention::before { content: "!"; }
.encadre.danger { --e: #c42b4a; }
.encadre.danger::before { content: "!"; }

.avant, .sommaire { background: var(--papier-2); border: 2px solid var(--encre); padding: 1rem 1.3rem; }
.avant h2, .sommaire h2 { font-family: var(--police-ui); font-size: 1.1rem !important; font-weight: 700; margin: 0 0 .4rem !important; letter-spacing: 0; padding: 0 !important; }
.avant ul { margin: 0; }
.sources { margin-top: 2.4rem; padding-top: 1rem; border-top: 2px dashed var(--chrome-ombre); font-size: .92rem; }
.sources h2 { font-family: var(--police-ui); font-size: 1.1rem !important; margin: 0 0 .4rem !important; padding: 0 !important; }
.sources ul { margin: 0; }
.texte img { max-width: 100%; height: auto; border: 2px solid var(--encre); box-shadow: 3px 3px 0 var(--encre); }
.sommaire ol { margin: 0; padding-left: 1.4rem; }
.sommaire li + li { margin-top: .2rem; }
.sommaire .sans-puces { list-style: none; margin: 0; padding: 0; }
.sommaire a { color: var(--encre); text-decoration: none; }
.sommaire a:hover { color: var(--lien); text-decoration: underline; }
.maj { font-weight: 700; color: var(--encre); }

/* ---------- Recherche ---------- */
.resultats { list-style: none; margin: 1.2rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
.resultats a { display: block; text-decoration: none; background: var(--papier); border: 2px solid var(--encre); box-shadow: 3px 3px 0 var(--encre); padding: .9rem 1.1rem; }
.resultats a:hover h3 { color: var(--lien); }
.resultats h3 { font-size: 1.15rem; font-weight: 800; margin: .5rem 0 .2rem; }
.resultats p { margin: 0; color: var(--encre-2); font-size: .95rem; }
.compte { font-family: var(--police-ui); color: var(--encre-2); margin: 1rem 0 0; }

/* ---------- Pied de page : barre d'état ---------- */
.pied { background: var(--papier); border-top: 2px solid var(--encre); margin-top: 40px; }
.pied .page { padding-top: 1rem; padding-bottom: 1rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1.5rem; font-size: .9rem; }
.pied p { margin: 0; color: var(--encre-2); }
.pied .etat { font-family: var(--police-ui); }
.pied ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; }
.pied a { font-family: var(--police-ui); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
@media print {
  body { background: #fff; }
  .entete, .pied, .copier, .a-lire { display: none !important; }
  .fenetre { box-shadow: none; border: 0; }
  .fenetre-barre { display: none; }
}

/* ---------- Pages de type « Outil » (calculateur IP…) ---------- */
.outil { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.2rem; margin: 1.4rem 0; }
.outil > * { min-width: 0; }
.outil-saisie { display: grid; gap: .4rem; }
.outil-saisie label { font-family: var(--police-ui); font-weight: 700; }
.outil-ligne { display: flex; flex-wrap: wrap; gap: .6rem; }
.outil-ligne input { flex: 1 1 16rem; min-width: 0; font-family: var(--police-code); font-size: 1.1rem; padding: .55rem .7rem; border: 2px solid var(--encre); background: var(--papier); color: var(--encre); box-shadow: inset 2px 2px 0 var(--chrome); }
.outil-ligne input:focus { outline: 3px solid var(--lien); outline-offset: 1px; }
.outil-aide { font-size: .88rem; color: var(--encre-2); margin: 0; }
.outil-erreur { border: 2px solid #dc2626; background: #fde8e8; color: #7f1d1d; padding: .6rem .8rem; margin: 0; }
.outil-resultat th[scope="row"] { width: 14rem; background: var(--papier-2); border-bottom: 0; border-top: 1px solid var(--filet); font-weight: 650; }
.outil-binaire { margin-top: 1rem; }
.outil-binaire p { margin: .2rem 0; }
.binaire { font-family: var(--police-code); font-size: .9rem; overflow-wrap: anywhere; }
.binaire span { display: inline-block; width: 5.5rem; font-family: var(--police); color: var(--encre-2); }
.binaire b { font-weight: 400; background: var(--c); color: var(--c-texte); }
.outil-decoupe h3 { margin-top: .4rem; }
.outil-decoupe select { font: inherit; padding: .3rem .4rem; border: 2px solid var(--encre); background: var(--papier); color: var(--encre); max-width: 100%; }
.outil-sous-reseaux .tableau { max-height: 28rem; overflow: auto; }

/* Composeur de poste */
.outil [hidden] { display: none !important; }
.compo-reglages { display: grid; gap: 1rem; }
.compo-systeme, .compo-cat { border: 2px solid var(--encre); background: var(--papier); padding: .7rem .9rem 1rem; margin: 0; }
.compo-systeme legend, .compo-cat legend { font-family: var(--police-ui); font-weight: 700; padding: 0 .4rem; }
.compo-systeme { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; }
.compo-systeme label { display: inline-flex; gap: .4rem; align-items: center; }
.compo-boutons { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .4rem; }
.compo-liste { display: grid; gap: 1rem; }
.compo-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .6rem; }
.compo-item { display: grid; grid-template-columns: auto 1fr; gap: .1rem .55rem; align-items: start; padding: .55rem .65rem; border: 1px solid var(--filet); background: var(--papier-2); cursor: pointer; }
.compo-item:hover { border-color: var(--encre); }
.compo-item input { grid-row: span 3; margin-top: .25rem; width: 1.05rem; height: 1.05rem; }
.compo-item:has(input:checked) { border: 2px solid var(--lien); background: #eef1fd; }
.compo-nom { font-weight: 750; }
.compo-desc { font-size: .86rem; color: var(--encre-2); line-height: 1.35; }
.compo-meta { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; font-size: .74rem; margin-top: .2rem; }
.compo-os abbr { text-decoration: none; border: 1px solid var(--encre-2); padding: 0 .3rem; margin-right: .2rem; font-family: var(--police-ui); }
.compo-licence { color: var(--encre-2); }
.compo-absent { opacity: .45; }
.compo-sortie h3 { margin-top: .4rem; }
.compo-barre { position: sticky; bottom: .6rem; z-index: 5; display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; justify-content: space-between; background: var(--chrome); border: 2px solid var(--encre); box-shadow: 3px 3px 0 var(--encre); padding: .5rem .8rem; font-family: var(--police-ui); }
.compo-actions { margin: .6rem 0 0; }
.compo-avertir { border: 2px solid #ca8a04; background: #fef9c3; padding: .6rem .8rem; margin-top: .8rem; }
.compo-avertir p { margin: 0; }

/* Calculateur d'alimentation */
.alim-form { display: grid; gap: 1rem; }
.alim-form fieldset { border: 2px solid var(--encre); padding: .7rem .9rem 1rem; margin: 0; display: grid; gap: .8rem; min-width: 0; }
.alim-form legend { font-family: var(--police-ui); font-weight: 700; padding: 0 .4rem; }
.alim-champ { display: grid; gap: .25rem; min-width: 0; }
.alim-champ label { font-weight: 650; }
.alim-champ select, .alim-champ input { font: inherit; padding: .4rem .5rem; border: 2px solid var(--encre); background: var(--papier); color: var(--encre); max-width: 100%; min-width: 0; }
.alim-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .8rem; }
.alim-case { display: flex; gap: .5rem; align-items: flex-start; }
.alim-case input { margin-top: .3rem; }
.alim-synthese { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: .6rem; }
.alim-synthese p { margin: 0; border: 2px solid var(--encre); background: var(--papier-2); padding: .6rem .8rem; display: grid; }
.alim-synthese span { font-size: .85rem; color: var(--encre-2); }
.alim-synthese strong { font-size: 1.6rem; font-family: var(--police-ui); }
.alim-detail .alim-w { white-space: nowrap; text-align: right; width: 5rem; }
.alim-barre { width: 40%; }
.alim-barre span { display: block; height: .8rem; background: var(--c, var(--lien)); border: 1px solid var(--encre); }
.alim-notes { margin-top: .8rem; }
.raid-tio { color: var(--encre-2); font-size: .88em; }

/* Générateur de mots de passe */
.mdp-onglets { display: flex; flex-wrap: wrap; gap: .5rem; }
.mdp-onglets [aria-selected="true"] { background: var(--selection); color: #fff; }
.mdp-reglages { border: 2px solid var(--encre); padding: .8rem .9rem; display: grid; gap: .6rem; }
.mdp-bloc { display: grid; gap: .5rem; }
.mdp-bloc label { font-weight: 650; }
.mdp-bloc .alim-case { font-weight: 400; }
.mdp-bloc select { font: inherit; padding: .3rem .4rem; border: 2px solid var(--encre); background: var(--papier); color: var(--encre); max-width: 100%; }
.mdp-bloc input[type=range] { width: 100%; max-width: 28rem; }
.mdp-reglages p { margin: 0; }
.mdp-liste { list-style: none; padding: 0 !important; margin: 0; display: grid; gap: .5rem; }
.mdp-liste li { display: flex; gap: .6rem; align-items: center; border: 2px solid var(--encre); background: var(--papier-2); padding: .45rem .6rem; margin: 0 !important; }
.mdp-liste code { flex: 1; min-width: 0; font-size: 1.05rem !important; background: none !important; border: 0 !important; overflow-wrap: anywhere; }
.mdp-liste .bouton { flex: none; font-size: .8rem; padding: .1rem .6rem; }
.mdp-force { border: 2px solid var(--encre); padding: .6rem .9rem; margin-top: .8rem; }
.mdp-force p { margin: 0 0 .4rem; }
.mdp-faible { background: #fde8e8; border-color: #dc2626; }
.mdp-moyen { background: #fef9c3; border-color: #ca8a04; }
.mdp-fort { background: #dcfce7; border-color: #16a34a; }

/* Planificateur VLAN */
.pv-saisie input { font: inherit; width: 100%; min-width: 4rem; padding: .3rem .4rem; border: 2px solid var(--encre); background: var(--papier); color: var(--encre); }
.pv-saisie td:first-child input { max-width: 5.5rem; }
.pv-saisie td:nth-child(3) input { max-width: 7rem; }
.pv-saisie td:nth-child(4) { min-width: 12rem; }
.pv-saisie .pv-suppr { padding: .1rem .55rem; }
.pv-alertes p { margin: .4rem 0 0; padding: .5rem .8rem; border: 2px solid var(--encre); }
.pv-erreur { background: #fde8e8; border-color: #dc2626 !important; color: #7f1d1d; }
.pv-attention { background: #fef9c3; border-color: #ca8a04 !important; }
.pv-info { background: var(--papier-2); }
.pv-plan { font-size: .86rem !important; }
.pv-plan th, .pv-plan td { padding: .45rem .45rem !important; }
.pv-plan code { white-space: nowrap; }
.pv-plan code { font-size: .92em !important; padding: 0 .2em !important; }
.pv-plan td:nth-child(2) { min-width: 7rem; }

/* Assistants de diagnostic */
#diagnostic { scroll-margin-top: 5rem; gap: 1rem; }
.diag-chemin { margin: 0; padding: .6rem .8rem .6rem 2.2rem; border: 2px dashed var(--filet); font-size: .88rem; color: var(--encre-2); }
.diag-chemin li { margin: .15rem 0; }
.diag-chemin strong { color: var(--encre); }
.diag-question, .diag-fin { border: 2px solid var(--encre); box-shadow: 3px 3px 0 var(--encre); background: var(--papier); padding: 1rem 1.2rem; }
.diag-fin { border-left: 8px solid #0f7a54; }
.diag-etiquette { margin: 0; font-family: var(--police-ui); font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--encre-2); }
.diag-question h3, .diag-fin h3 { margin: .3rem 0 .6rem; }
.diag-aide { font-size: .9rem; background: var(--papier-2); padding: .5rem .7rem; border-left: 3px solid var(--lien); margin: 0 0 .8rem; }
.diag-reponses { display: grid; gap: .5rem; }
.diag-reponses .bouton { text-align: left; white-space: normal; padding: .6rem .8rem; font-family: var(--police); font-weight: 500; line-height: 1.35; }
.diag-fin ol { margin: .4rem 0 0; padding-left: 1.4rem; }
.diag-fin li { margin: .35rem 0; overflow-wrap: anywhere; }
.diag-liens { margin: .8rem 0 0; font-size: .92rem; }
.diag-nav { margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.diag-nav:empty { display: none; }
/* Schémas dessinés (SVG) : ils ont leur propre cadre, avec une légende dessous */
.schema { margin: 1.4rem 0; }
.schema img, .texte img[src$=".svg"] { border: 0; box-shadow: none; display: block; width: 100%; height: auto; }
.schema figcaption { font-size: .88rem; color: var(--encre-2); margin-top: .5rem; }

/* Petits écrans : tableaux plus serrés pour éviter le défilement horizontal */
@media (max-width: 640px) {
  .texte table { font-size: .84rem; }
  .texte th, .texte td { padding: .45rem .45rem; }
  .texte table:has(th:nth-child(6)) { font-size: .76rem; hyphens: auto; }
  .texte table:has(th:nth-child(6)) th, .texte table:has(th:nth-child(6)) td { padding: .4rem .3rem; }
}