/* Response8 — l'analyseur de paquets de l'atelier.
   Ancré en bas ou à droite sur ordinateur (redimensionnable, comme la
   console), plein écran sur téléphone (liste → détails → octets en onglets).
   Deux thèmes : sombre (celui de l'atelier) et clair.                      */
.an, .an-fen, .an-menu{
  --an-fond:#0D1828; --an-fond-2:#0A1422; --an-carte:#15253C; --an-carte-2:#1A2D48; --an-trait:#1D3150; --an-trait-fort:#2C4A73;
  --an-encre:#D8E2EE; --an-encre-2:#B3C1D3; --an-gris:#8A9BB2; --an-accent:#6BA3DC; --an-plein:#3D7FC1; --an-plein-txt:#04101E;
  --an-sel:#2A6CB0; --an-sel-txt:#FFFFFF; --an-marque:#4B2E83; --an-marque-txt:#FFFFFF; --an-focus:#F2B84B;
  --an-ok-fond:#0E3222; --an-ok:#3DDC84; --an-err-fond:#3A1418; --an-err:#FF7A77; --an-avert-fond:#3A2C0C; --an-avert:#F2B84B;
  --an-rouge:#F25F5C; --an-vert:#3DDC84;
  --an-sev-erreur:#FF6B6B; --an-sev-avert:#F2B84B; --an-sev-note:#5CC8E8; --an-sev-info:#8FA3BF;
  --an-cli:#FFB4B4; --an-cli-fond:rgba(242,95,92,.16); --an-srv:#A9CCFF; --an-srv-fond:rgba(61,127,193,.2);
  --an-s1:#6BA3DC; --an-s2:#F2B84B; --an-s3:#3DDC84; --an-s4:#E879B9; --an-s5:#B794F6;
  --an-ombre:0 18px 48px rgba(0,0,0,.5);
  --mono-an:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color:var(--an-encre); font:400 13px/1.45 "IBM Plex Sans",system-ui,sans-serif;
}
.an.an--clair, .an-fen.an--clair, .an-menu.an--clair{
  --an-fond:#FFFFFF; --an-fond-2:#F4F7FB; --an-carte:#EAF0F7; --an-carte-2:#DFE7F1; --an-trait:#D3DCE8; --an-trait-fort:#A9B8CC;
  --an-encre:#152232; --an-encre-2:#34465C; --an-gris:#56677D; --an-accent:#1F5FA8; --an-plein:#1F5FA8; --an-plein-txt:#FFFFFF;
  --an-sel:#1F5FA8; --an-sel-txt:#FFFFFF; --an-marque:#3B2470; --an-marque-txt:#FFFFFF; --an-focus:#A35A00;
  --an-ok-fond:#E4F7EA; --an-ok:#16703C; --an-err-fond:#FDECEC; --an-err:#B3261E; --an-avert-fond:#FFF4DC; --an-avert:#8A5A00;
  --an-rouge:#C62828; --an-vert:#16703C;
  --an-sev-erreur:#C62828; --an-sev-avert:#A86400; --an-sev-note:#0B7A99; --an-sev-info:#5C6E85;
  --an-cli:#8F1D1D; --an-cli-fond:#FDECEC; --an-srv:#12408A; --an-srv-fond:#E8F0FD;
  --an-s1:#1F5FA8; --an-s2:#B76E00; --an-s3:#16803F; --an-s4:#B4237A; --an-s5:#6B3FC2;
  --an-ombre:0 18px 48px rgba(15,30,50,.22);
}
.an [hidden], .an[hidden], .an-fen [hidden], .an-menu [hidden], .an-pastille[hidden], .an-aide-topo[hidden]{display:none !important}
.an-cache{position:absolute !important; left:-9999px; width:1px; height:1px; overflow:hidden}
.an-cache-visuel{position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
.an :focus-visible, .an-fen :focus-visible, .an-menu :focus-visible, .an-pastille:focus-visible, .an-voyant:focus-visible{outline:2px solid var(--an-focus); outline-offset:1px}
.an button, .an-fen button, .an-menu button, .an input, .an-fen input, .an select, .an-fen select{font:inherit; color:inherit}

/* --------------------------------------------------------- le panneau --- */
.an{position:fixed; z-index:40; display:flex; flex-direction:column; min-height:0; background:var(--an-fond); box-shadow:var(--an-ombre)}
.an--bas{left:0; right:0; bottom:0; height:var(--an-h,46vh); border-top:1px solid var(--an-trait-fort)}
.an--droite{top:56px; right:0; bottom:0; width:var(--an-l,48vw); border-left:1px solid var(--an-trait-fort)}
.an.an--max{top:56px; left:0; right:0; bottom:0; width:auto; height:auto; border:0}
body.an-ouvert--bas .a-corps{height:calc(100% - 56px - var(--an-h,46vh))}
body.an-ouvert--droite .a-corps{margin-right:var(--an-l,48vw)}
.an-poignee{position:absolute; z-index:3; background:transparent}
.an--bas .an-poignee{left:0; right:0; top:-4px; height:8px; cursor:ns-resize}
.an--droite .an-poignee{top:0; bottom:0; left:-4px; width:8px; cursor:ew-resize}
.an--max .an-poignee{display:none}
.an-poignee:hover, .an-poignee:focus-visible{background:color-mix(in srgb, var(--an-accent) 45%, transparent)}

.an-tete{display:flex; align-items:center; gap:10px; padding:4px 6px 4px 12px; border-bottom:1px solid var(--an-trait); background:var(--an-fond-2); flex:0 0 auto; min-width:0}
.an-tete__titre{display:flex; align-items:center; gap:8px; flex:0 0 auto; color:var(--an-accent)}
.an-tete__titre b{font:600 13.5px/1.2 "Sora",system-ui,sans-serif; color:var(--an-encre); white-space:nowrap}
.an-tete__ico svg, .an-vide__ico svg{width:18px; height:18px; display:block}
.an-tete__fin{margin-left:auto; display:flex; gap:2px; flex:0 0 auto}
.an-onglets{display:flex; gap:4px; overflow-x:auto; min-width:0; flex:1 1 auto; scrollbar-width:thin}
.an-onglet{display:flex; align-items:center; border:1px solid var(--an-trait); border-radius:8px; background:var(--an-fond); flex:0 0 auto; max-width:280px}
.an-onglet--actif{border-color:var(--an-accent); background:var(--an-carte)}
.an-onglet__b{display:flex; align-items:center; gap:7px; padding:4px 4px 4px 9px; border:0; background:none; cursor:pointer; min-width:0; height:28px}
.an-onglet__nom{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:500}
.an-onglet__nb{font:500 11.5px/1 var(--mono-an); color:var(--an-gris)}
.an-onglet__etat{width:8px; height:8px; border-radius:50%; flex:0 0 auto; background:var(--an-gris)}
.an-onglet__etat--direct{background:var(--an-rouge); box-shadow:0 0 0 0 rgba(242,95,92,.6); animation:an-pouls 1.6s infinite}
.an-onglet__etat--fichier{background:var(--an-accent); border-radius:2px}
.an-onglet__x{width:24px; height:24px; padding:0; border:0; background:none; border-radius:6px; cursor:pointer; display:grid; place-items:center; color:var(--an-gris); flex:0 0 auto}
.an-onglet__x:hover{background:var(--an-carte-2); color:var(--an-encre)}
.an-onglet__x svg{width:13px; height:13px}
@keyframes an-pouls{0%{box-shadow:0 0 0 0 rgba(242,95,92,.55)} 70%{box-shadow:0 0 0 6px rgba(242,95,92,0)} 100%{box-shadow:0 0 0 0 rgba(242,95,92,0)}}

/* les boutons */
.an-btn{display:inline-flex; align-items:center; justify-content:center; gap:6px; height:30px; padding:0 10px; border-radius:7px; border:1px solid var(--an-trait-fort); background:transparent; cursor:pointer; white-space:nowrap; font-size:13px; font-weight:500; flex:0 0 auto}
.an-btn:hover:not(:disabled){background:var(--an-carte); border-color:var(--an-accent)}
.an-btn:disabled{opacity:.45; cursor:default}
.an-btn svg{width:16px; height:16px; flex:0 0 auto}
.an-btn--icone{width:30px; padding:0; border-color:transparent}
.an-btn--icone[aria-pressed="true"]{background:var(--an-carte-2); border-color:var(--an-accent); color:var(--an-accent)}
.an-btn--menu{border-color:transparent}
.an-btn--menu[aria-expanded="true"]{background:var(--an-carte-2)}
.an .an-btn--plein, .an-fen .an-btn--plein{background:var(--an-plein); border-color:var(--an-plein); color:var(--an-plein-txt); font-weight:600}
.an .an-btn--plein:hover:not(:disabled), .an-fen .an-btn--plein:hover:not(:disabled){background:var(--an-accent); border-color:var(--an-accent); color:var(--an-plein-txt)}
.an.an--clair .an-btn--plein:hover:not(:disabled), .an-fen.an--clair .an-btn--plein:hover:not(:disabled){background:#174C88; border-color:#174C88}
.an .an-btn--rouge{color:var(--an-rouge)}
.an-btn--petit{height:26px; padding:0 8px; font-size:12.5px}
.an-btn--petit svg{width:14px; height:14px}

/* la barre d'outils */
.an-outils{display:flex; align-items:center; flex-wrap:wrap; gap:2px; padding:3px 6px; border-bottom:1px solid var(--an-trait); flex:0 0 auto}
.an-sep{width:1px; height:20px; background:var(--an-trait-fort); margin:0 4px; flex:0 0 auto}
.an-temps{display:inline-flex; align-items:center; gap:1px; padding:1px; border-radius:8px; background:var(--an-fond-2); border:1px solid var(--an-trait)}
.an-horloge{font:500 12px/1 var(--mono-an); color:var(--an-encre-2); padding:0 8px; min-width:86px; white-space:nowrap}

/* le filtre d'affichage */
.an-filtre{padding:5px 8px 4px; border-bottom:1px solid var(--an-trait); flex:0 0 auto}
.an-filtre__ligne{display:flex; gap:4px; align-items:center; flex-wrap:wrap}
.an-filtre__boite{position:relative; flex:1 1 320px; min-width:0}
.an-filtre__champ{width:100%; height:30px; padding:0 10px; border-radius:7px; border:1.5px solid var(--an-trait-fort); background:var(--an-fond-2); color:var(--an-encre); font:500 13px/1 var(--mono-an)}
.an-filtre__champ::placeholder, .an-champ::placeholder{color:var(--an-gris); opacity:1}
.an-filtre--ok{border-color:var(--an-ok) !important; background:var(--an-ok-fond) !important}
.an-filtre--err{border-color:var(--an-err) !important; background:var(--an-err-fond) !important}
.an-filtre--avert{border-color:var(--an-avert) !important; background:var(--an-avert-fond) !important}
.an-filtre__msg{font-size:12.5px; min-height:0; display:flex; gap:10px; align-items:baseline; flex-wrap:wrap}
.an-filtre__msg:not(:empty){margin-top:3px}
.an-filtre__err{color:var(--an-err); font-weight:500}
.an-filtre__avert{color:var(--an-avert); font-weight:500}
.an-filtre__ok{color:var(--an-ok); font:500 12px/1.4 var(--mono-an)}
.an-filtre__copie{font:12px/1.4 var(--mono-an); color:var(--an-encre-2); white-space:pre}
.an-filtre__copie mark{background:var(--an-err); color:var(--an-fond); border-radius:2px}
.an-puces{display:flex; gap:4px; flex-wrap:nowrap; overflow-x:auto; min-width:0; flex:0 1 auto; max-width:46%; margin-left:4px; scrollbar-width:thin}
.an-puce{height:22px; padding:0 8px; border-radius:99px; border:1px solid var(--an-trait-fort); background:var(--an-fond-2); cursor:pointer; font:500 11.5px/1 var(--mono-an); color:var(--an-encre-2); white-space:nowrap}
.an-puce:hover{border-color:var(--an-accent); color:var(--an-encre)}
.an-puce--mono{font-family:var(--mono-an)}
.an-compl{position:absolute; z-index:20; left:0; right:0; top:calc(100% + 3px); margin:0; padding:4px; list-style:none; max-height:280px; overflow:auto; background:var(--an-fond); border:1px solid var(--an-trait-fort); border-radius:8px; box-shadow:var(--an-ombre)}
.an-compl__item{display:flex; gap:10px; align-items:baseline; padding:5px 8px; border-radius:6px; cursor:pointer}
.an-compl__item b{font:500 12.5px/1.3 var(--mono-an); color:var(--an-encre)}
.an-compl__item small{color:var(--an-gris); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.an-compl__item[aria-selected="true"], .an-compl__item:hover{background:var(--an-sel)}
.an-compl__item[aria-selected="true"] b, .an-compl__item[aria-selected="true"] small, .an-compl__item:hover b, .an-compl__item:hover small{color:var(--an-sel-txt)}

/* recherche, aller au paquet */
.an-rech{display:flex; align-items:center; gap:6px; flex-wrap:wrap; padding:5px 8px; border-bottom:1px solid var(--an-trait); background:var(--an-fond-2); flex:0 0 auto}
.an-rech__msg{font-size:12.5px; color:var(--an-encre-2)}
.an-rech__msg--err{color:var(--an-err)}
.an-champ{height:30px; padding:0 9px; border-radius:7px; border:1px solid var(--an-trait-fort); background:var(--an-fond-2); color:var(--an-encre); min-width:0; flex:1 1 180px}
.an-champ--court{flex:0 0 110px; width:110px}
.an-champ--mono{font-family:var(--mono-an)}
.an-select{height:30px; padding:0 6px; border-radius:7px; border:1px solid var(--an-trait-fort); background:var(--an-fond-2); color:var(--an-encre)}
.an-case{display:inline-flex; gap:6px; align-items:center; font-size:12.5px; white-space:nowrap; cursor:pointer}
.an-etiq{font-size:12.5px; color:var(--an-encre-2); white-space:nowrap}

/* ------------------------------------------------------- les volets --- */
.an-zone{flex:1 1 auto; min-height:0; display:grid; grid-template-rows:var(--an-part,52%) 6px minmax(0,1fr)}
.an-bas{display:grid; grid-template-columns:var(--an-part2,58%) 6px minmax(0,1fr); min-height:0}
.an--droite:not(.an--max) .an-bas{grid-template-columns:1fr; grid-template-rows:var(--an-part2,58%) 6px minmax(0,1fr)}
.an-separe{background:var(--an-trait); position:relative; z-index:1}
.an-separe--h{cursor:ns-resize}
.an-separe--v{cursor:ew-resize}
.an--droite:not(.an--max) .an-separe--v{cursor:ns-resize}
.an-separe:hover, .an-separe:focus-visible{background:var(--an-accent)}
.an-volet{display:flex; flex-direction:column; min-height:0; min-width:0; overflow:hidden; background:var(--an-fond)}
.an-volet__tete{display:flex; align-items:center; gap:8px; padding:3px 8px; border-bottom:1px solid var(--an-trait); background:var(--an-fond-2); min-height:30px; flex:0 0 auto}
.an-volet__titre{font:600 11.5px/1 var(--mono-an); letter-spacing:.06em; text-transform:uppercase; color:var(--an-gris)}
.an-volet__fin{margin-left:auto; display:flex; gap:4px}
.an-choix-volet{display:none}

/* la liste des paquets (virtuelle) */
.an-liste{flex:1 1 auto; min-height:0; overflow:auto; position:relative; font:400 var(--an-zoom,13px)/1 var(--mono-an); outline-offset:-2px}
.an-ligne{display:grid; grid-template-columns:var(--an-cols); min-width:100%; width:max-content; height:var(--an-hl,23px); line-height:var(--an-hl,23px)}
.an-ligne--entete{position:sticky; top:0; z-index:2; background:var(--an-fond-2); border-bottom:1px solid var(--an-trait-fort); font:600 12px/1 "IBM Plex Sans",system-ui,sans-serif; height:auto; line-height:1}
.an-liste__corps{position:relative}
.an-liste__corps .an-ligne{position:absolute; top:0; left:0; cursor:default; color:var(--an-encre)}
.an-liste__corps .an-ligne:hover{filter:brightness(1.08)}
.an-cel{padding:0 7px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0}
.an-cel--no, .an-cel--longueur{text-align:right}
.an-cel--entete{position:relative; padding:0; display:flex; align-items:stretch; border-right:1px solid var(--an-trait)}
.an-tri{flex:1; min-width:0; text-align:left; padding:7px 8px; border:0; background:none; cursor:pointer; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--an-encre-2)}
.an-tri:hover{color:var(--an-encre); background:var(--an-carte)}
.an-cel--entete[aria-sort="ascending"] .an-tri::after{content:" ▲"; font-size:9px; color:var(--an-accent)}
.an-cel--entete[aria-sort="descending"] .an-tri::after{content:" ▼"; font-size:9px; color:var(--an-accent)}
.an-redim{position:absolute; right:-4px; top:0; bottom:0; width:8px; cursor:col-resize; z-index:2}
.an-redim:hover{background:color-mix(in srgb, var(--an-accent) 50%, transparent)}
.an-ligne--sel{background:var(--an-sel) !important; color:var(--an-sel-txt) !important}
.an-ligne--marque{background:var(--an-marque) !important; color:var(--an-marque-txt) !important}
.an-ligne--ignore{color:var(--an-gris) !important; font-style:italic}
.an-ligne--ignore.an-ligne--sel{color:var(--an-sel-txt) !important}
.an-liste__vide{position:absolute; left:0; right:0; top:48px; text-align:center; color:var(--an-gris); font:13px/1.5 "IBM Plex Sans",system-ui,sans-serif; padding:0 16px}
.an-liste:focus-visible .an-ligne--sel{outline:2px solid var(--an-focus); outline-offset:-2px}

/* l'arbre des détails */
.an-arbre{flex:1 1 auto; min-height:0; overflow:auto; padding:3px 0; font:400 var(--an-zoom,13px)/1.55 var(--mono-an); outline-offset:-2px}
.an-noeud{white-space:nowrap; padding:1px 8px 1px 6px; cursor:default; display:flex; gap:4px; width:max-content; min-width:100%}
.an-noeud:hover{background:var(--an-carte)}
.an-noeud--couche{font-weight:600}
.an-noeud--sel, .an-noeud--sel:hover{background:var(--an-sel); color:var(--an-sel-txt)}
.an-arbre:focus-visible .an-noeud--sel{outline:2px solid var(--an-focus); outline-offset:-2px}
.an-noeud__fl{width:12px; flex:0 0 12px; text-align:center; cursor:pointer; color:var(--an-gris)}
.an-noeud--sel .an-noeud__fl{color:var(--an-sel-txt)}
.an-arbre__vide{padding:18px 14px; color:var(--an-gris); font:13px/1.5 "IBM Plex Sans",system-ui,sans-serif}

/* les octets */
.an-octets{flex:1 1 auto; min-height:0; overflow:auto; padding:6px 8px; font:400 var(--an-zoom,13px)/1.55 var(--mono-an); outline-offset:-2px}
.an-octets__info{margin-left:auto; font:500 11.5px/1.2 var(--mono-an); color:var(--an-encre-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.an-hex{display:flex; gap:1.6ch; white-space:pre; width:max-content}
.an-hex__off{color:var(--an-gris); user-select:none}
.an-hex__h .an-b{margin-right:.6ch}
.an-b{cursor:pointer; border-radius:2px}
.an-b:hover{background:var(--an-carte-2)}
.an-b--sel, .an-b--sel:hover{background:var(--an-sel); color:var(--an-sel-txt)}
.an-b--curseur{outline:1.5px solid var(--an-focus); outline-offset:-1px}

/* rien à montrer */
.an-vide{flex:1 1 auto; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:8px; padding:24px; color:var(--an-encre-2)}
.an-vide b{font:600 16px/1.2 "Sora",system-ui,sans-serif; color:var(--an-encre)}
.an-vide p{margin:0; max-width:560px}
.an-vide__ico{color:var(--an-accent)}
.an-vide__ico svg{width:34px; height:34px}
.an-vide__boutons{display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-top:6px}

/* la barre d'état */
.an-statut{display:flex; align-items:center; gap:10px; padding:3px 10px 3px 6px; border-top:1px solid var(--an-trait); background:var(--an-fond-2); font-size:12.5px; color:var(--an-encre-2); flex:0 0 auto; min-width:0}
.an-statut__txt{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0}
.an-statut__etat{margin-left:auto; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--an-gris)}
.an-statut__etat--direct{color:var(--an-err)}
.an-expert{width:26px; height:24px; padding:0; border:0; background:none; border-radius:6px; cursor:pointer; color:var(--an-gris); display:grid; place-items:center; flex:0 0 auto}
.an-expert:hover{background:var(--an-carte)}
.an-expert svg{width:16px; height:16px}
.an-expert--erreur{color:var(--an-sev-erreur)} .an-expert--avert{color:var(--an-sev-avert)} .an-expert--note{color:var(--an-sev-note)} .an-expert--info{color:var(--an-sev-info)}

/* ---------------------------------------------------- les menus ------- */
.an-menu{position:fixed; z-index:200; min-width:220px; max-width:min(420px, calc(100vw - 12px)); max-height:calc(100vh - 16px); overflow:auto; padding:5px; background:var(--an-fond); border:1px solid var(--an-trait-fort); border-radius:10px; box-shadow:var(--an-ombre); display:flex; flex-direction:column; gap:1px}
.an-menu__titre{padding:5px 10px 6px; font:600 11.5px/1.2 var(--mono-an); color:var(--an-gris); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.an-menu__item{display:flex; align-items:center; gap:8px; text-align:left; padding:7px 10px; border-radius:6px; border:0; background:none; cursor:pointer; font-size:13px; color:var(--an-encre)}
.an-menu__item:hover:not(:disabled), .an-menu__item:focus-visible{background:var(--an-sel); color:var(--an-sel-txt); outline:none}
.an-menu__item:disabled{opacity:.45; cursor:default}
.an-menu__item--mono span{font-family:var(--mono-an); font-size:12.5px}
.an-menu__item kbd{margin-left:auto; font:500 11px/1 var(--mono-an); opacity:.8; padding-left:16px}
.an-menu__coche{width:14px; flex:0 0 14px; text-align:center}
.an-menu__sep{height:1px; background:var(--an-trait); margin:4px 4px}

/* ------------------------------------------------- les fenêtres ------- */
.an-fen{position:fixed; z-index:70; display:flex; flex-direction:column; max-height:calc(100vh - 80px); min-width:320px; min-height:160px; resize:both; overflow:hidden;
  background:var(--an-fond); border:1px solid var(--an-trait-fort); border-radius:12px; box-shadow:var(--an-ombre)}
.an-fen--large{width:min(1100px, calc(100vw - 24px))}
.an-fen__tete{display:flex; align-items:center; gap:8px; padding:6px 6px 6px 14px; border-bottom:1px solid var(--an-trait); background:var(--an-fond-2); cursor:move; flex:0 0 auto; user-select:none}
.an-fen__titre{margin:0; font:600 14px/1.2 "Sora",system-ui,sans-serif; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.an-fen__corps{flex:1 1 auto; min-height:0; overflow:auto; padding:12px 14px 14px; display:flex; flex-direction:column; gap:10px}
.an-fen__corps > *{flex-shrink:0}
.an-fen__corps p{margin:0}
.an-fen__ligne{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.an-fen__note{color:var(--an-encre-2); font-size:12.5px}
.an-fen__vide{color:var(--an-gris); padding:12px 0}
.an-fen__boutons{display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end}
.an-fen__h3{margin:6px 0 0; font:600 12px/1 var(--mono-an); letter-spacing:.08em; text-transform:uppercase; color:var(--an-gris)}
.an-fen__onglets{display:flex; gap:2px; border-bottom:1px solid var(--an-trait); overflow-x:auto}
.an-fen__onglet{padding:7px 12px; border:0; border-bottom:2px solid transparent; background:none; cursor:pointer; white-space:nowrap; font-weight:500; color:var(--an-encre-2)}
.an-fen__onglet[aria-selected="true"]{border-bottom-color:var(--an-accent); color:var(--an-encre)}
.an-fen__onglet:hover{color:var(--an-encre)}

.an-table-defile{overflow:auto; max-height:52vh; border:1px solid var(--an-trait); border-radius:8px}
.an-table-defile--haut{max-height:38vh}
.an-table{width:100%; border-collapse:collapse; font-size:12.5px}
.an-table th{position:sticky; top:0; z-index:1; background:var(--an-fond-2); text-align:left; font-weight:600; border-bottom:1px solid var(--an-trait-fort); padding:0; white-space:nowrap; color:var(--an-encre-2)}
.an-table th .an-tri{padding:7px 9px; width:100%}
.an-table th[aria-sort="ascending"] .an-tri::after{content:" ▲"; font-size:9px; color:var(--an-accent)}
.an-table th[aria-sort="descending"] .an-tri::after{content:" ▼"; font-size:9px; color:var(--an-accent)}
.an-table td{padding:5px 9px; border-bottom:1px solid var(--an-trait); white-space:nowrap; font-family:var(--mono-an)}
.an-table tbody tr{cursor:default}
.an-table tbody tr:hover{background:var(--an-carte)}
.an-table tbody tr.an-table__sel{background:var(--an-sel); color:var(--an-sel-txt)}
.an-table .an-num{text-align:right}
.an-table th.an-num .an-tri{text-align:right}
.an-table__code{margin-left:8px; font-size:11px; color:var(--an-gris)}
.an-table__sel .an-table__code{color:var(--an-sel-txt)}
.an-table__groupe th{position:static; padding:6px 9px; background:var(--an-carte); font:600 11.5px/1 var(--mono-an); letter-spacing:.05em; text-transform:uppercase; color:var(--an-encre-2)}
.an-table__case{width:34px; text-align:center}
.an-table--points td{font-family:inherit}
.an-table--points label{cursor:pointer}
.an-table__nb{font-family:var(--mono-an) !important}
.an-table--guide td{white-space:normal; font-family:inherit; vertical-align:middle}
.an-table--guide code{font:500 12.5px/1.4 var(--mono-an); color:var(--an-accent); white-space:nowrap}
.an-etat{font:500 11.5px/1 var(--mono-an); padding:3px 7px; border-radius:99px; border:1px solid var(--an-trait-fort)}
.an-etat--up{color:var(--an-ok); border-color:var(--an-ok)}
.an-etat--down{color:var(--an-gris)}
.an-barre{display:inline-block; vertical-align:middle; width:70px; height:7px; border-radius:4px; background:var(--an-carte-2); overflow:hidden; margin-right:8px}
.an-barre i{display:block; height:100%; background:var(--an-accent)}
.an-table__sel .an-barre i{background:var(--an-sel-txt)}
.an-opts{display:grid; grid-template-columns:auto minmax(0,1fr); gap:8px 12px; align-items:center}
.an-opts .an-champ{width:100%}
.an-props{display:grid; grid-template-columns:max-content minmax(0,1fr); gap:5px 16px; margin:0; font-size:13px}
.an-props dt{color:var(--an-encre-2)}
.an-props dd{margin:0; font-family:var(--mono-an); font-size:12.5px; overflow-wrap:anywhere}
.an-props--code dt code, .an-props--code dt kbd{font:500 12.5px/1.4 var(--mono-an); color:var(--an-accent)}
.an-props--code dd{font-family:inherit; font-size:13px}
.an-props__ifs{margin:0; padding-left:18px; font-size:12.5px}
.an-props__ifs small{color:var(--an-gris)}

/* suivre un flux */
.an-suivre{max-height:48vh; min-height:140px; overflow:auto; padding:8px; border:1px solid var(--an-trait); border-radius:8px; background:var(--an-fond-2); font:400 12.5px/1.5 var(--mono-an); display:flex; flex-direction:column; align-items:stretch; gap:2px}
.an-suivre__m{display:block; text-align:left; white-space:pre-wrap; overflow-wrap:anywhere; border:0; border-radius:4px; padding:2px 6px; cursor:pointer; font:inherit}
.an-suivre__m--client{background:var(--an-cli-fond); color:var(--an-cli)}
.an-suivre__m--serveur{background:var(--an-srv-fond); color:var(--an-srv)}
.an-suivre__m:hover{outline:1px solid currentColor}
.an-suivre__cle{font:600 12.5px/1 var(--mono-an); padding:2px 6px; border-radius:4px}
.an-suivre__cle--client{background:var(--an-cli-fond); color:var(--an-cli)}
.an-suivre__cle--serveur{background:var(--an-srv-fond); color:var(--an-srv)}

/* le graphe E/S */
.an-graphe__boite{border:1px solid var(--an-trait); border-radius:8px; background:var(--an-fond-2); padding:6px}
.an-graphe{width:100%; height:auto; display:block; cursor:crosshair}
.an-graphe__grille{stroke:var(--an-trait); stroke-width:1}
.an-graphe__grille--v{stroke-dasharray:2 4}
.an-graphe__axe{stroke:var(--an-trait-fort); stroke-width:1.5}
.an-graphe__txt{fill:var(--an-encre-2); font:11px var(--mono-an)}
.an-series{display:flex; flex-direction:column; gap:6px}
.an-series__l{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.an-series__coul{width:16px; height:4px; border-radius:2px; flex:0 0 16px}

/* les informations expertes */
.an-sev{display:inline-flex; align-items:center; gap:5px; font-weight:600; font-size:12.5px; white-space:nowrap}
.an-sev__ico svg{width:15px; height:15px; display:block}
.an-sev--erreur .an-sev__ico{color:var(--an-sev-erreur)} .an-sev--avert .an-sev__ico{color:var(--an-sev-avert)} .an-sev--note .an-sev__ico{color:var(--an-sev-note)} .an-sev--info .an-sev__ico{color:var(--an-sev-info)}
.an-exp{border:1px solid var(--an-trait); border-radius:8px; background:var(--an-fond-2)}
.an-exp__s{display:flex; gap:12px; align-items:center; padding:8px 10px; cursor:pointer; flex-wrap:wrap}
.an-exp__r{font-weight:500; flex:1 1 220px}
.an-exp__g{font:12px var(--mono-an); color:var(--an-encre-2)}
.an-exp__n{font:600 12px var(--mono-an); color:var(--an-encre-2)}
.an-exp__trames{display:flex; gap:4px; flex-wrap:wrap; padding:0 10px 10px}

/* --------------------------------- la topologie : voyants, choix ------ */
.an-voyant{cursor:pointer}
.an-voyant__point{fill:#F25F5C; stroke:#FFFFFF; stroke-width:2.5}
.an-voyant__onde{fill:none; stroke:#F25F5C; stroke-width:2.5; transform-origin:0 0; animation:an-onde 1.6s ease-out infinite}
@keyframes an-onde{0%{transform:scale(.55); opacity:.9} 100%{transform:scale(1.7); opacity:0}}
.an-outil-topo svg{color:#F25F5C}
.an-topo--choix svg, .an-topo--choix .a-appareil, .an-topo--choix .a-lien-zone{cursor:crosshair}
.an-aide-topo{position:absolute; z-index:6; bottom:12px; left:50%; pointer-events:none; transform:translateX(-50%); display:flex; align-items:center; gap:10px; max-width:calc(100% - 24px);
  padding:7px 8px 7px 12px; border-radius:99px; background:#F2B84B; color:#1B1203; font-weight:600; font-size:13.5px; box-shadow:0 10px 26px rgba(0,0,0,.4)}
.an-aide-topo__ico svg{width:18px; height:18px; display:block}
.an-aide-topo__annuler{pointer-events:auto; border:0; border-radius:99px; padding:5px 12px; background:rgba(27,18,3,.16); color:#1B1203; font-weight:600; cursor:pointer}
.an-aide-topo__annuler:hover, .an-aide-topo__annuler:focus-visible{background:rgba(27,18,3,.3)}
.an-pastille{position:fixed; z-index:35; right:16px; bottom:16px; display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 14px 0 12px; border-radius:99px;
  background:#0D1828; color:#D8E2EE; border:1px solid #2C4A73; box-shadow:0 12px 30px rgba(0,0,0,.45); cursor:pointer; font:600 13px/1 "IBM Plex Sans",system-ui,sans-serif}
.an-pastille svg{width:18px; height:18px; color:#6BA3DC}
.an-pastille__point{width:9px; height:9px; border-radius:50%; background:#F25F5C; animation:an-pouls 1.6s infinite}
.an-pastille:hover{border-color:#6BA3DC}
@media (prefers-reduced-motion:reduce){ .an-voyant__onde, .an-onglet__etat--direct, .an-pastille__point{animation:none} }

/* ------------------------------------------------- tablette ----------- */
@media (max-width:1180px){ .an-outil-topo__txt{display:none} }
@media (max-width:980px){
  .an--droite{width:min(var(--an-l,48vw), 100vw)}
  .an-outils .an-btn--menu{padding:0 7px}
}

/* ------------------------------------------------- téléphone ---------- */
@media (max-width:760px){
  .an, .an.an--bas, .an.an--droite, .an.an--max{top:0; left:0; right:0; bottom:0; width:auto; height:auto; border:0; z-index:60; padding-top:env(safe-area-inset-top); padding-bottom:env(safe-area-inset-bottom)}
  body.an-ouvert--bas .a-corps{height:calc(100% - 56px)}
  body.an-ouvert--droite .a-corps{margin-right:0}
  .an-poignee, .an-seul-grand{display:none !important}
  .an-tete{padding:6px 6px 6px 10px}
  .an-tete__titre b{display:none}
  .an-btn{height:38px; min-width:38px}
  .an-btn--icone{width:40px}
  .an-btn--icone svg{width:19px; height:19px}
  .an-outils{flex-wrap:nowrap; overflow-x:auto; padding:4px; scrollbar-width:none}
  .an-outils::-webkit-scrollbar{display:none}
  .an-onglet__b{height:34px}
  .an-onglet__x{width:34px; height:34px}
  .an-filtre__champ{height:40px; font-size:15px}
  .an-filtre__boite{flex:1 1 100px}
  .an-filtre__ligne > .an-btn:not(.an-btn--icone){padding:0 9px}
  .an-filtre__ligne .an-btn:not(.an-btn--icone){padding:0 10px}
  .an-puces{flex:1 1 100%; max-width:none; margin:2px 0 0; scrollbar-width:none}
  .an-puce{height:30px; padding:0 11px; font-size:12.5px}
  .an-champ, .an-select{height:40px; font-size:15px}
  .an-choix-volet{display:flex; border-bottom:1px solid var(--an-trait); flex:0 0 auto}
  .an-choix-volet__b{flex:1; height:42px; border:0; border-bottom:2.5px solid transparent; background:none; font-weight:600; color:var(--an-encre-2); cursor:pointer}
  .an-choix-volet__b[aria-selected="true"]{border-bottom-color:var(--an-accent); color:var(--an-encre)}
  .an-zone{display:block; position:relative}
  .an-separe{display:none}
  .an-bas{display:contents}
  .an-volet{position:absolute; inset:0; display:none}
  .an-zone[data-volet="liste"] .an-volet--liste, .an-zone:not([data-volet]) .an-volet--liste, .an-zone[data-volet="details"] .an-volet--details, .an-zone[data-volet="octets"] .an-volet--octets{display:flex}
  .an-ligne{grid-template-columns:86px minmax(0,1fr) minmax(0,1fr) 64px; grid-template-rows:1fr 1fr; grid-template-areas:"no info info proto" "temps source destination longueur"; width:100%; line-height:calc(var(--an-hl,43px) / 2)}
  .an-ligne--entete{line-height:1.2}
  .an-ligne--entete .an-tri{padding:4px 7px}
  .an-ligne .an-cel--no{grid-area:no; text-align:left} .an-ligne .an-cel--temps{grid-area:temps; color:inherit; opacity:.85} .an-ligne .an-cel--source{grid-area:source} .an-ligne .an-cel--destination{grid-area:destination}
  .an-ligne .an-cel--protocole{grid-area:proto; font-weight:600; text-align:right} .an-ligne .an-cel--longueur{grid-area:longueur} .an-ligne .an-cel--info{grid-area:info}
  .an-liste__corps .an-ligne{border-bottom:1px solid color-mix(in srgb, var(--an-trait) 60%, transparent)}
  .an-redim{display:none}
  .an-statut{flex-wrap:wrap; gap:2px 10px}
  .an-statut__etat{margin-left:0}
  .an-menu{left:0 !important; right:0; bottom:0; top:auto !important; max-width:none; width:auto; max-height:72vh; border-radius:16px 16px 0 0; padding:8px 8px calc(10px + env(safe-area-inset-bottom))}
  .an-menu__item{padding:12px 12px; font-size:15px}
  .an-fen{left:0 !important; top:0 !important; right:0; bottom:0; width:auto !important; max-height:none; border-radius:0; resize:none; z-index:80; padding-top:env(safe-area-inset-top)}
  .an-fen__tete{cursor:default}
  .an-table-defile, .an-table-defile--haut{max-height:none}
  .an-suivre{max-height:none}
  .an-opts{grid-template-columns:1fr}
  .an-aide-topo{left:12px; right:12px; top:auto; bottom:12px; transform:none; border-radius:12px; font-size:13px}
  .an-pastille{bottom:calc(12px + env(safe-area-inset-bottom)); right:12px}
}
@media (pointer:coarse){ .an-redim{width:16px; right:-8px} }