/* Response8 — le meilleur de Packet Tracer : loupe Inspecter, types de câble,
   câble console, évaluation, onglet Config, applications du bureau.
   Les couleurs viennent des jetons de l'atelier (--a-*).                  */

/* ------------------------------------------------- l'aide des modes --- */
.pt-aide{position:absolute; z-index:6; bottom:48px; left:50%; pointer-events:none; transform:translateX(-50%); display:flex; align-items:center; gap:10px; max-width:calc(100% - 24px);
  padding:7px 8px 7px 14px; border-radius:99px; background:var(--a-bleu-clair); color:#04101E; font-weight:600; font-size:13.5px; box-shadow:0 10px 26px rgba(0,0,0,.4)}
.pt-aide[hidden]{display:none}
.pt-aide__annuler{pointer-events:auto; border:0; border-radius:99px; padding:5px 12px; background:rgba(4,16,30,.16); color:#04101E !important; font-weight:600 !important; cursor:pointer}
.pt-aide__annuler:hover,.pt-aide__annuler:focus-visible{background:rgba(4,16,30,.3); outline:2px solid #04101E; outline-offset:1px}
.pt-topo--loupe svg, .pt-topo--loupe .a-appareil{cursor:zoom-in}
.pt-topo--console svg, .pt-topo--console .a-appareil{cursor:crosshair}

/* ------------------------------------------------------- la loupe ----- */
.pt-loupe{position:absolute; z-index:8; width:min(560px, calc(100% - 16px)); max-height:min(420px, calc(100% - 70px)); display:flex; flex-direction:column;
  background:var(--a-panneau); border:1px solid var(--a-trait-fort); border-radius:12px; box-shadow:0 22px 50px rgba(0,0,0,.55); overflow:hidden}
.pt-loupe__tete{display:flex; align-items:center; gap:8px; padding:8px 8px 8px 12px; background:var(--a-panneau-2); border-bottom:1px solid var(--a-trait); cursor:move; touch-action:none}
.pt-loupe__tete b{font:600 13.5px/1.2 "Sora",system-ui,sans-serif; margin-right:auto; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pt-loupe__ico svg{width:16px; height:16px; display:block; color:var(--a-bleu-clair)}
.pt-loupe__direct{font:500 11px/1 var(--mono); color:var(--a-vert); white-space:nowrap}
.pt-icobtn{display:inline-grid; place-items:center; width:32px; height:32px; flex:none; border-radius:8px; border:1px solid var(--a-trait-fort); background:transparent; color:var(--a-encre); cursor:pointer; padding:0}
.pt-icobtn:hover,.pt-icobtn:focus-visible{background:var(--a-carte); border-color:var(--a-bleu-clair); outline:none}
.pt-icobtn svg{width:16px; height:16px}
.pt-loupe__onglets{display:flex; gap:2px; padding:6px 8px 0; overflow-x:auto; scrollbar-width:thin; border-bottom:1px solid var(--a-trait); flex:none}
.pt-loupe__onglet{flex:none; border:0; border-bottom:2px solid transparent; background:none; padding:7px 10px; font-size:12.5px; font-weight:500; color:var(--a-encre-2); cursor:pointer; border-radius:6px 6px 0 0}
.pt-loupe__onglet:hover{color:var(--a-encre); background:var(--a-carte)}
.pt-loupe__onglet[aria-selected="true"]{color:var(--a-encre); border-bottom-color:var(--a-bleu-clair)}
.pt-loupe__onglet:focus-visible{outline:2px solid var(--a-bleu-clair); outline-offset:-2px}
.pt-loupe__texte{margin:0; padding:10px 12px; overflow:auto; flex:1; min-height:80px; background:var(--a-term); color:var(--a-term-texte); font:12.5px/1.45 var(--mono); white-space:pre; tab-size:8}
.pt-loupe__texte:focus-visible{outline:2px solid var(--a-bleu-clair); outline-offset:-2px}

/* ---------------------------------------------------- les câbles ------ */
.pt-cables{position:absolute; z-index:6; bottom:44px; left:12px; max-width:calc(100% - 24px); display:flex; flex-wrap:wrap; align-items:center; gap:4px; padding:4px; background:rgba(13,24,40,.95); border:1px solid var(--a-trait); border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.35)}
.pt-cables[hidden]{display:none}
.pt-cables__radio{position:absolute; opacity:0; width:1px; height:1px; pointer-events:none}
.pt-cables__opt{position:relative; display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 10px; border-radius:7px; cursor:pointer; font-size:12.5px; font-weight:500; color:var(--a-encre-2); white-space:nowrap}
.pt-cables__opt:hover{background:var(--a-carte); color:var(--a-encre)}
.pt-cables__opt:has(input:checked){background:var(--a-carte); color:var(--a-encre); box-shadow:inset 0 0 0 1.5px var(--a-bleu-clair)}
.pt-cables__opt:has(input:focus-visible){outline:2px solid var(--a-bleu-clair); outline-offset:1px}
.pt-cables__ico svg{width:18px; height:18px; display:block}
.pt-cables__aide{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
/* les câbles sur le plan, comme les couleurs de Packet Tracer */
.a-lien-cable.pt-cable--croise{stroke-dasharray:9 5}
.a-lien-cable.pt-cable--fibre{stroke:#E08A3C}
.a-lien-cable.pt-cable--serie{stroke:#E05A57; stroke-width:2.6}
.a-lien-cable.pt-cable--faux{stroke:var(--a-rouge); stroke-dasharray:3 5; stroke-width:2.6}
.pt-console{fill:none; stroke:#7FC8F2; stroke-width:2.2; stroke-dasharray:1 5; stroke-linecap:round}
.pt-console__zone{fill:none; stroke:transparent; stroke-width:16; cursor:pointer; pointer-events:stroke}
.pt-console__zone:focus-visible{stroke:rgba(127,200,242,.35); outline:none}
.pt-menu{z-index:9}

/* ----------------------------------------------------- l'évaluation --- */
.pt-btn-res__txt{font:600 12.5px/1 var(--mono)}
.pt-btn-res svg{width:16px; height:16px}
.pt-minuteur{font-variant-numeric:tabular-nums; color:var(--a-encre)}
.pt-minuteur[hidden]{display:none}
.pt-minuteur svg{width:14px; height:14px}
.pt-minuteur--fin{color:#04101E; background:var(--a-ambre); border-color:var(--a-ambre)}
.pt-voile{z-index:60; grid-template-columns:minmax(0,1fr); overflow:auto}
.pt-res{justify-self:center; min-width:0; max-width:100%; width:min(760px,100%); max-height:calc(100vh - 40px); overflow:auto; padding:22px 24px}
.pt-res__tete{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:6px}
.pt-res__tete h2{margin:0}
.pt-res__ecoule{color:var(--a-ambre) !important; font-weight:600}
.pt-res__chiffres{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:12px 0}
.pt-res__chiffres div{background:var(--a-carte); border:1px solid var(--a-trait); border-radius:10px; padding:12px; display:flex; flex-direction:column; gap:4px}
.pt-res__chiffres b{font:600 22px/1.1 "Sora",system-ui,sans-serif; color:var(--a-encre)}
.pt-res__chiffres small{color:var(--a-encre-2); font-size:12.5px}
.pt-jauge{height:8px; border-radius:8px; background:var(--a-carte); overflow:hidden; margin-bottom:14px}
.pt-jauge span{display:block; height:100%; background:linear-gradient(90deg,var(--a-bleu),var(--a-vert))}
.pt-res__defile{overflow-x:auto; border:1px solid var(--a-trait); border-radius:10px}
.pt-res__table{width:100%; border-collapse:collapse; font-size:13.5px}
.pt-res__table th{text-align:left; font:500 11.5px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--a-gris); padding:9px 10px; border-bottom:1px solid var(--a-trait-fort); background:var(--a-panneau-2)}
.pt-res__table td{padding:8px 10px; border-bottom:1px solid var(--a-trait); vertical-align:top; color:var(--a-encre)}
.pt-res__table tr:last-child td{border-bottom:0}
.pt-num{text-align:right; font-variant-numeric:tabular-nums; font-family:var(--mono)}
.pt-etat{font-weight:600; white-space:nowrap}
.pt-etat--ok{color:var(--a-vert)}
.pt-etat--ko{color:#FF8A87}
.pt-res__perdu{color:var(--a-ambre)}
.pt-res__min{margin-top:16px; padding:14px; border:1px solid var(--a-trait); border-radius:10px; background:var(--a-panneau-2)}
.pt-res__min h3{display:flex; align-items:center; gap:8px; margin:0 0 6px; font:600 12px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--a-gris)}
.pt-res__min h3 svg{width:15px; height:15px}
.pt-res__min p{margin:0 0 10px; font-size:13px}
.pt-res__minligne{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.pt-res__minligne label{display:inline-flex; align-items:center; gap:6px; color:var(--a-encre-2)}
.pt-champ{width:84px; height:34px; padding:0 10px; border-radius:8px; border:1px solid var(--a-trait-fort); background:var(--a-panneau); color:var(--a-encre); font:14px/1 var(--mono)}
.pt-champ:focus{outline:none; border-color:var(--a-bleu-clair); box-shadow:0 0 0 3px rgba(107,163,220,.2)}
.pt-voile :focus-visible{outline:2px solid var(--a-bleu-clair); outline-offset:2px}

/* ------------------------------------------------- l'onglet Config --- */
.pt-cfg__corps{flex:1; min-height:0; display:grid; grid-template-columns:200px minmax(0,1fr)}
.pt-cfg__nav{overflow:auto; border-right:1px solid var(--a-trait); padding:8px; background:var(--a-panneau-2)}
.pt-cfg__nav h3{margin:12px 6px 6px; font:600 11px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--a-gris)}
.pt-cfg__nav h3:first-child{margin-top:4px}
.pt-cfg__entree{display:block; width:100%; text-align:left; padding:7px 10px; border-radius:7px; border:0; background:none; cursor:pointer; font-size:13px; color:var(--a-encre-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pt-cfg__entree:hover{background:var(--a-carte); color:var(--a-encre)}
.pt-cfg__entree[aria-current="true"]{background:var(--a-bleu); color:#04101E; font-weight:600}
.pt-cfg__entree:focus-visible{outline:2px solid var(--a-bleu-clair); outline-offset:-2px}
.pt-cfg__droite{overflow:auto; padding:16px; display:flex; flex-direction:column; gap:12px}
.pt-cfg__choix{display:none}
.pt-cfg__panneau{display:flex; flex-direction:column; gap:12px}
.pt-cfg__carte h3{text-transform:none !important; letter-spacing:.02em !important; font-size:13px !important; color:var(--a-encre) !important}
.pt-cfg__ligne{display:flex; flex-wrap:wrap; gap:10px; align-items:flex-start}
.pt-cfg__ligne > .bu-champ{flex:1 1 150px}
.pt-cfg__ligne > .bu-champ--bouton{flex:0 0 auto; align-self:flex-end; padding-bottom:18px}
.pt-cfg__liste{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px}
.pt-cfg__liste li{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:6px 8px 6px 12px; border:1px solid var(--a-trait); border-radius:8px; background:var(--a-panneau)}
.pt-cfg__liste li span{overflow-wrap:anywhere}
.pt-cfg__vide{color:var(--a-gris); font-style:italic}
.pt-cfg__liste li.pt-cfg__vide{border-style:dashed; background:none}
.pt-cfg__case{display:inline-flex; align-items:center; gap:8px; color:var(--a-encre-2); cursor:pointer}
.pt-cfg__case input{width:18px; height:18px; accent-color:var(--a-bleu)}
.pt-cfg__etat{display:flex; align-items:center; gap:12px; flex-wrap:wrap; color:var(--a-encre-2)}
.pt-cfg__lien{font:500 12.5px/1 var(--mono); padding:5px 9px; border-radius:99px; border:1px solid var(--a-trait-fort)}
.pt-cfg__lien--up{color:var(--a-vert); border-color:rgba(61,220,132,.45)}
.pt-cfg__lien--down{color:#FF8A87; border-color:rgba(242,95,92,.45)}
.pt-cfg__infos{display:grid; grid-template-columns:auto 1fr; gap:4px 12px; margin:0; font-size:13px}
.pt-cfg__infos dt{color:var(--a-gris)}
.pt-cfg__infos dd{margin:0}
.pt-cfg__defile{overflow-x:auto}
.pt-cfg__msg{margin:0; font-size:13px; font-weight:500}
.pt-cfg__msg--ok{color:var(--a-vert)}
.pt-cfg__msg--err{color:#FF8A87}
.pt-cfg__msg--info{color:var(--a-encre-2)}
.pt-cfg__bas{flex:none; border-top:1px solid var(--a-trait); background:var(--a-panneau-2)}
.pt-cfg__bas-tete{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:6px 10px 6px 14px}
.pt-cfg__bas-tete h3{margin:0; font:600 11.5px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--a-gris)}
.pt-cfg__journal{margin:0; height:150px; overflow:auto; padding:8px 14px 12px; background:var(--a-term); color:var(--a-term-texte); font:12.5px/1.45 var(--mono); white-space:pre-wrap; word-break:break-word}
.pt-cfg__journal:focus-visible{outline:2px solid var(--a-bleu-clair); outline-offset:-2px}
.pt-cfg__cmd{color:#E6EDF6}
.pt-cfg__sortie{color:var(--a-encre-2)}
.pt-cfg__err{color:#FF8A87}
.pt-facade-cfg{font-family:var(--mono)}

/* ------------------------------------------- les applications du bureau */
.bu-corps--pt-terminal{overflow:hidden}
.pt-term-barre{display:flex; align-items:center; justify-content:space-between; gap:10px; color:var(--a-encre-2); font-size:13px; flex-wrap:wrap}
.pt-term-reglages{max-width:420px}
.pt-term-relie{margin:0; color:var(--a-encre-2); font-size:13px}
.pt-ed{display:grid; grid-template-columns:220px minmax(0,1fr); gap:12px; min-height:0}
.pt-ed__liste{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px}
.pt-ed__fichier{display:block; width:100%; text-align:left; padding:7px 10px; border-radius:7px; border:1px solid transparent; background:none; cursor:pointer; font:13px/1.3 var(--mono); color:var(--a-encre-2); overflow:hidden; text-overflow:ellipsis}
.pt-ed__fichier:hover{background:var(--a-carte); color:var(--a-encre)}
.pt-ed__fichier[aria-current="true"]{border-color:var(--a-bleu-clair); color:var(--a-encre); background:var(--a-carte)}
.pt-ed__vide{color:var(--a-gris); font-size:13px}
.pt-ed__lib{font-size:13px; font-weight:500; color:var(--a-encre-2)}
.pt-ed__zone{min-height:240px; resize:vertical; font:13px/1.5 var(--mono); padding:10px 12px; height:auto}
.pt-ed__barre{display:flex; gap:8px; flex-wrap:wrap}
.pt-tg__ligne{display:flex; gap:10px; flex-wrap:wrap; align-items:flex-start}
.pt-tg__ligne > .bu-champ{flex:1 1 140px}
.pt-tg__ligne > .bu-champ--bouton{flex:0 0 auto; align-self:flex-end; padding-bottom:18px}
.pt-tg__resume{font:500 13px/1.4 var(--mono); color:var(--a-encre-2); min-height:1.4em}
.pt-tg__defile{max-height:300px; overflow:auto}
.pt-tg--ok td:last-child{color:var(--a-vert)}
.pt-tg--ko td:last-child{color:#FF8A87}

/* ------------------------------------------------------- téléphone --- */
@media (max-width:760px){
  .pt-loupe{left:8px !important; right:8px; top:auto !important; bottom:8px; width:auto; max-height:58%}
  .pt-loupe__tete{cursor:default}
  .pt-cables{top:56px; bottom:auto; left:8px; right:8px; max-width:none; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none}
  .pt-cables::-webkit-scrollbar{display:none}
  .pt-cables__nom{display:none}
  .pt-cables__opt{flex:none; width:40px; height:40px; padding:0; justify-content:center}
  .pt-aide{left:12px; right:12px; top:auto; bottom:12px; transform:none; border-radius:12px; font-size:13px}
  .pt-aide > span{flex:1}
  .pt-cfg__corps{grid-template-columns:minmax(0,1fr)}
  .pt-cfg__nav{display:none}
  .pt-cfg__choix{display:block; width:100%}
  .pt-cfg__droite{padding:12px}
  .pt-cfg__journal{height:110px}
  .pt-ed{grid-template-columns:minmax(0,1fr)}
  .pt-res{padding:18px 16px}
  .pt-res__chiffres{grid-template-columns:minmax(0,1fr)}
  .pt-btn-res__txt{display:none}
  .pt-btn-res{width:40px; padding:0; justify-content:center}
  body.pt-min-actif .a-sauve{display:none}
  .pt-minuteur{padding:6px 8px}
}
@media (pointer:coarse){
  .pt-icobtn{width:40px; height:40px}
  .pt-loupe__onglet{padding:10px 12px}
  .pt-cfg__entree{padding:10px 12px}
}
@media (prefers-reduced-motion:reduce){ .pt-loupe,.pt-res{animation:none} }