/* Response8 — l'atelier du simulateur : un poste de travail plein écran.
   Le guide à gauche, la topologie au centre, les consoles en bas.        */
:root{
  --a-fond:#070E1A; --a-panneau:#0D1828; --a-panneau-2:#111F33; --a-carte:#15253C;
  --a-trait:#1D3150; --a-trait-fort:#2C4A73;
  --a-encre:#D3DDEA; --a-encre-2:#A9B8CB; --a-gris:#7F92AB;
  --a-bleu:#3D7FC1; --a-bleu-clair:#6BA3DC; --a-orange:#D88A4A;
  --a-vert:#3DDC84; --a-rouge:#F25F5C; --a-ambre:#F2B84B;
  --a-term:#05080D; --a-term-texte:#C9D6E3; --a-term-prompt:#7FD1A8;
  --a-r:10px;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html,body{height:100%}
body.atelier{
  margin:0; background:var(--a-fond); color:var(--a-encre);
  font:400 14.5px/1.5 "IBM Plex Sans",system-ui,sans-serif; overflow:hidden;
}
:where(.atelier) button{font:inherit; color:inherit}
.atelier a{color:var(--a-bleu-clair)}

/* --------------------------------------------------- la barre du haut --- */
.a-barre{
  height:56px; display:flex; align-items:center; gap:14px; padding:0 14px 0 16px;
  background:var(--a-panneau); border-bottom:1px solid var(--a-trait);
}
.a-marque{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--a-encre); min-width:0}
.a-marque__logo{font:700 17px/1 "Sora",system-ui,sans-serif; letter-spacing:-.02em}
.a-marque__logo i{font-style:normal; color:var(--a-orange)}
.a-marque__sep{width:1px; height:24px; background:var(--a-trait-fort)}
.a-titre{display:flex; flex-direction:column; min-width:0}
.a-titre b{font:600 14.5px/1.25 "Sora",system-ui,sans-serif; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.a-titre small{font:500 12px/1.3 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--a-gris)}
.a-barre__fin{margin-left:auto; display:flex; align-items:center; gap:8px}
.a-pastille{
  display:inline-flex; align-items:center; gap:7px; padding:6px 11px; border-radius:99px;
  background:var(--a-carte); border:1px solid var(--a-trait); font:500 12.5px/1 var(--mono); color:var(--a-encre-2); white-space:nowrap;
}
.a-pastille--env::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--a-vert); box-shadow:0 0 0 3px rgba(61,220,132,.18)}
.a-progres{display:flex; align-items:center; gap:9px}
.a-progres__barre{width:110px; height:6px; border-radius:6px; background:var(--a-carte); overflow:hidden}
.a-progres__barre span{display:block; height:100%; width:0; background:linear-gradient(90deg,var(--a-bleu),var(--a-vert)); transition:width .5s}
.a-sauve{font:500 12px/1 var(--mono); color:var(--a-gris); min-width:92px; text-align:right}
.a-sauve--ok{color:var(--a-vert)}
.a-sauve--err{color:var(--a-ambre)}
.a-btn{
  display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 13px; border-radius:8px; cursor:pointer;
  background:transparent; border:1px solid var(--a-trait-fort); font-weight:500; font-size:13.5px; white-space:nowrap; text-decoration:none;
}
.a-btn:hover{background:var(--a-carte); border-color:var(--a-bleu-clair)}
.a-btn--plein{background:var(--a-bleu); border-color:var(--a-bleu); color:#04101E !important; font-weight:600}
.a-btn--plein:hover{background:var(--a-bleu-clair)}
.a-btn svg{width:16px; height:16px}
.a-btn--icone{padding:0; width:34px; justify-content:center}

/* ------------------------------------------------------ la disposition --- */
.a-corps{display:grid; grid-template-columns:380px minmax(0,1fr); height:calc(100% - 56px)}
.a-guide{background:var(--a-panneau); border-right:1px solid var(--a-trait); overflow-y:auto; padding:18px 18px 40px}
.a-centre{display:grid; grid-template-rows:minmax(160px,1fr) 6px var(--h-console,320px); min-width:0; min-height:0}
@media (max-width:980px){
  .a-corps{grid-template-columns:1fr}
  .a-guide{position:fixed; z-index:20; top:56px; bottom:0; left:0; width:min(400px,92vw); transform:translateX(-102%); transition:transform .25s; box-shadow:20px 0 40px rgba(0,0,0,.4)}
  .a-guide--ouvert{transform:none}
  .a-cache-petit{display:none !important}
}
@media (min-width:981px){ .a-seul-petit{display:none !important} }

/* ------------------------------------------------------------ le guide --- */
.a-section{margin-bottom:22px}
.a-section h2{font:600 12px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--a-gris); margin:0 0 10px}
.a-scenario{background:var(--a-panneau-2); border:1px solid var(--a-trait); border-left:3px solid var(--a-orange); border-radius:0 var(--a-r) var(--a-r) 0; padding:13px 15px; color:var(--a-encre-2); font-size:14px}
.a-niveau{display:flex; gap:8px; margin-bottom:12px; flex-wrap:wrap}
.a-taches{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.a-tache{background:var(--a-panneau-2); border:1px solid var(--a-trait); border-radius:var(--a-r); padding:11px 12px; transition:border-color .3s, background .3s}
.a-tache__ligne{display:flex; gap:11px; align-items:flex-start}
.a-tache__coche{
  flex:0 0 auto; width:22px; height:22px; border-radius:50%; border:2px solid var(--a-trait-fort);
  display:grid; place-items:center; font:600 12px/1 var(--mono); color:var(--a-gris); margin-top:1px;
}
.a-tache--faite{border-color:rgba(61,220,132,.35); background:rgba(61,220,132,.06)}
.a-tache--faite .a-tache__coche{background:var(--a-vert); border-color:var(--a-vert); color:#03160B}
.a-tache--faite .a-tache__texte{color:var(--a-encre-2)}
.a-tache--nouvelle{animation:eclat 1.2s ease-out}
@keyframes eclat{0%{box-shadow:0 0 0 0 rgba(61,220,132,.55)}100%{box-shadow:0 0 0 14px rgba(61,220,132,0)}}
.a-tache__texte{font-size:14px; line-height:1.45}
.a-tache__indice{margin:8px 0 0 33px}
.a-lien{background:none; border:0; padding:0; color:var(--a-bleu-clair); cursor:pointer; font-size:12.5px; text-decoration:underline; text-underline-offset:3px}
.a-code{margin:7px 0 0; padding:9px 11px; background:var(--a-term); border:1px solid var(--a-trait); border-radius:7px; font:12.5px/1.55 var(--mono); color:var(--a-term-texte); white-space:pre-wrap}
.a-table{width:100%; border-collapse:collapse; font-size:12.5px}
.a-table th,.a-table td{text-align:left; padding:6px 6px; border-bottom:1px solid var(--a-trait); white-space:nowrap}
.a-table th{font:600 12px/1.3 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--a-gris)}
.a-table td{font-family:var(--mono); color:var(--a-encre-2)}
.a-table-defile{overflow-x:auto}
.a-astuces{margin:0; padding-left:18px; color:var(--a-encre-2); font-size:13.5px; display:flex; flex-direction:column; gap:5px}
.a-astuces kbd{font:500 12px/1 var(--mono); background:var(--a-carte); border:1px solid var(--a-trait-fort); border-bottom-width:2px; border-radius:5px; padding:2px 6px; color:var(--a-encre)}

/* -------------------------------------------------------- la topologie --- */
.a-topo{position:relative; overflow:hidden; background:
  radial-gradient(circle at 1px 1px, rgba(120,150,190,.14) 1px, transparent 0) 0 0/22px 22px, #08111F}
.a-topo svg{width:100%; height:100%; display:block}
.a-topo__outils{position:absolute; top:12px; right:12px; display:flex; gap:6px}
.a-topo__legende{position:absolute; left:12px; bottom:10px; display:flex; gap:14px; font:500 12px/1 var(--mono); color:var(--a-gris); background:rgba(8,17,31,.8); padding:7px 10px; border-radius:7px}
.a-topo__legende span{display:inline-flex; align-items:center; gap:6px}
.a-topo__legende i{width:8px; height:8px; border-radius:50%; display:inline-block}
.a-lien-cable{stroke:#5B7A9F; stroke-width:2.2}
.a-lien-cable--up{stroke:#6E93BD}
.a-lien-cable--down{stroke:#55657A; stroke-dasharray:6 5}
.a-bout{stroke:#08111F; stroke-width:2}
.a-bout--up{fill:var(--a-vert)}
.a-bout--down{fill:var(--a-rouge)}
.a-bout--admin{fill:var(--a-rouge)}
.a-bout--bloque{fill:var(--a-ambre)}
.a-etiquette-if{font:500 12px/1 var(--mono); fill:#9FB3CC; paint-order:stroke; stroke:#08111F; stroke-width:4px}
.a-appareil{cursor:pointer}
.a-appareil text{font:600 12.5px/1 "IBM Plex Sans",sans-serif; fill:var(--a-encre); paint-order:stroke; stroke:#08111F; stroke-width:4px}
.a-appareil .a-sous{font:500 12px/1 var(--mono); fill:var(--a-gris)}
.a-appareil:hover .a-halo, .a-appareil--actif .a-halo{opacity:1}
.a-halo{opacity:0; transition:opacity .2s; fill:rgba(107,163,220,.12); stroke:rgba(107,163,220,.55); stroke-width:1.5}
.a-appareil--eteint .a-icone{opacity:.35; filter:grayscale(1)}
.a-paquet{fill:#FFD27A; filter:drop-shadow(0 0 4px rgba(255,210,122,.9))}
.a-aide-topo{position:absolute; right:12px; top:12px; max-width:44%; overflow:hidden; text-overflow:ellipsis; font-size:12.5px; color:var(--a-gris); background:rgba(8,17,31,.85); border:1px solid var(--a-trait); padding:6px 12px; border-radius:99px; pointer-events:none; white-space:nowrap}

/* ----------------------------------------------------- la poignée -------- */
.a-poignee{background:var(--a-panneau); border-top:1px solid var(--a-trait); border-bottom:1px solid var(--a-trait); cursor:row-resize; position:relative}
.a-poignee::after{content:""; position:absolute; left:50%; top:50%; width:38px; height:2px; margin:-1px 0 0 -19px; background:var(--a-trait-fort); border-radius:2px}

/* ------------------------------------------------------- les consoles ---- */
.a-consoles{display:flex; flex-direction:column; min-height:0; background:var(--a-term)}
.a-onglets{display:flex; align-items:stretch; background:var(--a-panneau); border-bottom:1px solid var(--a-trait); overflow-x:auto; min-height:38px}
.a-onglet{display:flex; align-items:center; gap:8px; padding:0 8px 0 13px; border-right:1px solid var(--a-trait); cursor:pointer; font:500 13px/1 var(--mono); color:var(--a-gris); background:none; border-top:2px solid transparent; white-space:nowrap}
.a-onglet--actif{color:var(--a-encre); background:var(--a-term); border-top-color:var(--a-bleu-clair)}
.a-onglet i{width:7px; height:7px; border-radius:50%; background:var(--a-vert)}
.a-onglet--eteint i{background:var(--a-gris)}
.a-onglet__fermer{border:0; background:none; cursor:pointer; color:var(--a-gris); width:22px; height:22px; border-radius:5px; font-size:15px; line-height:1}
.a-onglet__fermer:hover{background:var(--a-carte); color:var(--a-encre)}
.a-onglets__vide{display:flex; align-items:center; padding:0 14px; color:var(--a-gris); font-size:13px}

.a-facade{display:flex; align-items:center; gap:14px; padding:8px 12px; background:linear-gradient(#1A2638,#121B29); border-bottom:1px solid #000; min-height:46px}
.a-facade__nom{display:flex; flex-direction:column; min-width:0}
.a-facade__nom b{font:600 12.5px/1.2 var(--mono); color:#E6EDF6}
.a-facade__nom small{font:500 12px/1.2 var(--mono); color:#7F92AB; letter-spacing:.06em}
.a-facade__ports{display:flex; flex-wrap:wrap; gap:3px; max-width:520px}
.a-port{width:15px; height:12px; border-radius:2px; background:#05080D; border:1px solid #2D3B4E; position:relative}
.a-port::after{content:""; position:absolute; top:-5px; left:5px; width:4px; height:3px; border-radius:1px; background:#26303D}
.a-port--up::after{background:var(--a-vert); box-shadow:0 0 5px var(--a-vert)}
.a-port--trafic::after{animation:clignote .25s steps(2) 6}
@keyframes clignote{50%{background:#1E5F3C; box-shadow:none}}
.a-port--admin::after{background:var(--a-ambre)}
.a-facade__voyants{display:flex; gap:10px; margin-left:auto; align-items:center; font:500 10px/1 var(--mono); color:#7F92AB}
.a-voyant{display:inline-flex; align-items:center; gap:5px}
.a-voyant::before{content:""; width:7px; height:7px; border-radius:50%; background:#26303D}
.a-voyant--on::before{background:var(--a-vert); box-shadow:0 0 6px var(--a-vert)}
.a-alim{width:30px; height:30px; border-radius:50%; border:1px solid #3A4A60; background:#0A111C; cursor:pointer; display:grid; place-items:center; color:var(--a-vert)}
.a-alim--off{color:var(--a-rouge)}
.a-alim svg{width:15px; height:15px}

.a-term{
  flex:1; min-height:0; overflow-y:auto; padding:10px 14px 14px; cursor:text;
  font:13.5px/1.45 var(--mono); color:var(--a-term-texte); white-space:pre-wrap; word-break:break-word;
}
.a-term__ligne{min-height:1.45em}
.a-term__journal{color:#E7C07A}
.a-term__saisie{display:flex; align-items:baseline}
.a-term__prompt{color:var(--a-term-prompt); white-space:pre}
.a-term input{
  flex:1; min-width:20px; background:transparent; border:0; outline:none; padding:0; margin:0;
  font:inherit; color:var(--a-term-texte); caret-color:var(--a-term-prompt);
}
.a-term input.a-masque{color:transparent; text-shadow:none}
.a-term-vide{flex:1; display:grid; place-items:center; text-align:center; color:var(--a-gris); padding:20px}
.a-term-vide b{display:block; color:var(--a-encre-2); font-size:15px; margin-bottom:6px}

/* ------------------------------------------------- avis et fenêtres ----- */
.a-avis{position:fixed; right:18px; bottom:18px; z-index:40; display:flex; flex-direction:column; gap:8px; pointer-events:none}
.a-avis__item{
  display:flex; align-items:center; gap:10px; background:#0F2A1D; border:1px solid rgba(61,220,132,.45); color:#D9F7E6;
  padding:11px 14px; border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,.45); font-size:13.5px; max-width:380px;
  animation:entre .35s ease-out;
}
.a-avis__item::before{content:"✓"; width:20px; height:20px; border-radius:50%; background:var(--a-vert); color:#03160B; display:grid; place-items:center; font-weight:700; flex:0 0 auto}
@keyframes entre{from{transform:translateY(12px); opacity:0}}
.a-voile{position:fixed; inset:0; z-index:50; background:rgba(3,7,13,.72); display:grid; place-items:center; padding:20px}
.a-fenetre{width:min(520px,100%); background:var(--a-panneau); border:1px solid var(--a-trait-fort); border-radius:16px; padding:28px; box-shadow:0 30px 80px rgba(0,0,0,.6)}
.a-fenetre h2{font:600 22px/1.25 "Sora",system-ui,sans-serif; margin:0 0 10px}
.a-fenetre p{color:var(--a-encre-2); margin:0 0 16px}
.a-fenetre__boutons{display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; margin-top:20px}
.a-trophee{width:64px; height:64px; border-radius:50%; background:rgba(61,220,132,.12); border:1px solid rgba(61,220,132,.4); display:grid; place-items:center; margin-bottom:14px; color:var(--a-vert)}
.a-trophee svg{width:32px; height:32px}
.a-chiffres{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:6px 0 4px}
.a-chiffres div{background:var(--a-carte); border-radius:10px; padding:12px; text-align:center}
.a-chiffres b{display:block; font:600 20px/1.2 "Sora",sans-serif}
.a-chiffres small{color:var(--a-gris); font-size:12px}

/* --------------------------------------- outils, palette, câblage, zoom -- */
.a-topo svg{touch-action:none; cursor:grab}
.a-topo--glisse svg{cursor:grabbing}
.a-topo--cablage svg, .a-topo--cablage .a-appareil{cursor:crosshair}
.a-outils{position:absolute; top:12px; left:12px; right:12px; width:max-content; max-width:calc(100% - 24px); flex-wrap:wrap; display:flex; align-items:center; gap:4px; padding:4px; background:rgba(13,24,40,.92); border:1px solid var(--a-trait); border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.35); z-index:5}
.a-outil{display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 10px; border-radius:7px; border:0; background:transparent; cursor:pointer; font-size:13px; font-weight:500; white-space:nowrap}
.a-outil:hover{background:var(--a-carte)}
.a-outil[aria-pressed="true"]{background:var(--a-bleu); color:#04101E}
.a-outil svg{width:16px; height:16px}
.a-outil--icone{width:32px; padding:0; justify-content:center}
.a-outils__sep{width:1px; height:20px; background:var(--a-trait-fort); margin:0 4px}
.a-zoom__val{min-width:52px; text-align:center; font:500 12px/1 var(--mono); color:var(--a-encre-2)}
.a-aide-topo--action{color:#04101E; background:var(--a-ambre); border-color:var(--a-ambre); font-weight:600}
@media (max-width:700px){ .a-aide-topo{display:none} .a-aide-topo--action{display:block; top:58px; left:12px; right:12px; max-width:none; white-space:normal} }

.a-palette{position:absolute; top:58px; left:12px; z-index:6; width:292px; padding:12px; background:var(--a-panneau); border:1px solid var(--a-trait-fort); border-radius:12px; box-shadow:0 18px 40px rgba(0,0,0,.5)}
.a-palette__titre{display:flex; flex-direction:column; gap:2px; margin-bottom:10px}
.a-palette__titre b{font:600 14px/1.3 "Sora",sans-serif}
.a-palette__titre small{color:var(--a-gris); font-size:12.5px}
.a-palette__grille{display:grid; grid-template-columns:repeat(4,1fr); gap:6px}
.a-tuile{display:flex; flex-direction:column; align-items:center; gap:4px; padding:8px 4px 7px; border-radius:9px; background:var(--a-panneau-2); border:1px solid var(--a-trait); cursor:grab; touch-action:none; font-size:12px; line-height:1.15; text-align:center}
.a-tuile:hover{border-color:var(--a-bleu-clair); background:var(--a-carte)}
.a-tuile svg{width:46px; height:34px; pointer-events:none}
.a-fantome{position:fixed; z-index:80; width:70px; height:52px; margin:-26px 0 0 -35px; pointer-events:none; opacity:.85; filter:drop-shadow(0 8px 14px rgba(0,0,0,.5))}
.a-fantome svg{width:100%; height:100%}

.a-menu{position:absolute; z-index:7; min-width:200px; max-width:300px; padding:6px; background:var(--a-panneau); border:1px solid var(--a-trait-fort); border-radius:10px; box-shadow:0 18px 40px rgba(0,0,0,.55); display:flex; flex-direction:column; gap:2px}
.a-menu__titre{font:600 12px/1.3 var(--mono); color:var(--a-gris); padding:6px 8px 8px; border-bottom:1px solid var(--a-trait); margin-bottom:4px}
.a-menu > button{text-align:left; padding:8px 10px; border-radius:7px; border:0; background:none; cursor:pointer; font-size:13.5px}
.a-menu > button:hover, .a-menu > button:focus-visible{background:var(--a-carte); outline:none}
.a-menu__danger{color:#FF9B98 !important}
.a-menu__ports{display:grid; grid-template-columns:1fr 1fr; gap:3px; max-height:260px; overflow-y:auto}
.a-menu__port{display:flex; flex-direction:column; align-items:flex-start; gap:1px; padding:6px 8px; border-radius:7px; border:1px solid var(--a-trait); background:var(--a-panneau-2); cursor:pointer}
.a-menu__port span{font:600 12.5px/1.2 var(--mono)}
.a-menu__port small{font-size:12px; color:var(--a-vert)}
.a-menu__port:hover:not(:disabled){border-color:var(--a-bleu-clair)}
.a-menu__port:disabled{opacity:.45; cursor:not-allowed}
.a-menu__port:disabled small{color:var(--a-gris)}
.a-menu__port--wifi small{color:var(--a-bleu-clair)}

.a-lien-zone{stroke:transparent; stroke-width:16; cursor:pointer}
.a-lien-zone:hover{stroke:rgba(107,163,220,.18)}
.a-lien-cable--wifi{stroke-dasharray:2 7; stroke-linecap:round; stroke-width:3}
.a-fil-volant{stroke:var(--a-ambre); stroke-width:2.5; stroke-dasharray:8 6; pointer-events:none}
.a-appareil--source .a-halo{opacity:1; stroke:var(--a-ambre); fill:rgba(242,184,75,.12)}
.a-avis__item--erreur{background:#3A1514; border-color:rgba(242,95,92,.5); color:#FFD9D8}
.a-avis__item--erreur::before{content:"!"; background:var(--a-rouge); color:#2A0606}

/* ---------------------------------------------- propriétés et face avant */
.a-btn--petit{padding:5px 10px; font-size:12px; border-radius:7px}
.pf-voile{position:fixed; inset:0; z-index:80; background:rgba(3,7,14,.72); display:flex; align-items:center; justify-content:center; padding:16px}
.pf-fenetre{width:min(1180px,100%); max-height:calc(100vh - 32px); display:flex; flex-direction:column; background:var(--a-panneau); border:1px solid var(--a-trait-fort); border-radius:14px; box-shadow:0 30px 80px rgba(0,0,0,.55); overflow:hidden; color:var(--a-encre)}
.pf-tete{display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--a-trait); flex-wrap:wrap}
.pf-tete__nom{display:flex; flex-direction:column; min-width:0; margin-right:auto}
.pf-tete__nom b{font:600 16px/1.2 var(--mono)}
.pf-tete__nom small{font:500 12.5px/1.3 var(--mono); color:var(--a-gris)}
.pf-pastille{font:500 12px/1 var(--mono); padding:6px 10px; border-radius:20px; background:var(--a-carte); color:var(--a-rouge); border:1px solid var(--a-trait)}
.pf-pastille--on{color:var(--a-vert)}
.pf-btn{padding:8px 12px; border-radius:8px; border:1px solid var(--a-trait-fort); background:transparent; color:var(--a-encre); cursor:pointer; font-size:13px}
.pf-btn:hover{background:var(--a-carte); border-color:var(--a-bleu-clair)}
.pf-btn--plein{background:var(--a-bleu); border-color:var(--a-bleu); color:#04101E; font-weight:600}
.pf-fermer{width:34px; height:34px; border-radius:8px; border:0; background:none; color:var(--a-gris); font-size:22px; cursor:pointer}
.pf-fermer:hover{background:var(--a-carte); color:var(--a-encre)}
.pf-onglets{display:flex; gap:4px; padding:0 12px; border-bottom:1px solid var(--a-trait); overflow-x:auto}
.pf-onglet{padding:11px 14px; border:0; border-bottom:2px solid transparent; background:none; color:var(--a-encre-2); cursor:pointer; font-size:13.5px; white-space:nowrap}
.pf-onglet--actif{color:var(--a-encre); border-bottom-color:var(--a-bleu-clair)}
.pf-corps{padding:16px; overflow:auto}
.pf-cadre{background:radial-gradient(ellipse at 50% 0,#1C2A40,#0A1220 70%); border:1px solid var(--a-trait); border-radius:10px; padding:14px 8px; overflow-x:auto}
.pf-svg{display:block; width:100%; height:auto}
.pf-cadre--eteint .pf-svg{filter:saturate(.75) brightness(.92)}
.pf-port{cursor:pointer; outline:none}
.pf-port:hover > :first-child, .pf-port:focus > :first-child{stroke:#6BA3DC; stroke-width:1.6}
.pf-port--choisi > :first-child{stroke:#F2B84B !important; stroke-width:2 !important}
.pf-led{fill:#27303C}
.pf-led--vert{fill:#3DDC84; filter:drop-shadow(0 0 2px #3DDC84)}
.pf-led--ambre{fill:#F2B84B; filter:drop-shadow(0 0 2px #F2B84B)}
.pf-led--trafic{animation:pf-clignote .22s steps(2) infinite}
@keyframes pf-clignote{50%{fill:#1E5F3C; filter:none}}
.pf-alim{cursor:pointer; outline:none}
.pf-alim__anneau{fill:none; stroke:#5A1E1E; stroke-width:2}
.pf-alim__symbole{stroke:#E06A6A}
.pf-alim--on .pf-alim__anneau{stroke:#3DDC84; filter:drop-shadow(0 0 3px #3DDC84)}
.pf-alim--on .pf-alim__symbole{stroke:#9FF0C2}
.pf-alim:hover circle:nth-child(2), .pf-alim:focus circle:nth-child(2){stroke:#6BA3DC; stroke-width:2}
.pf-aide{margin:12px 2px 6px; color:var(--a-encre-2); font-size:13.5px}
.pf-legende{display:flex; flex-wrap:wrap; gap:6px 16px; font:500 12px/1.3 var(--mono); color:var(--a-gris)}
.pf-legende span::before{content:""; display:inline-block; width:9px; height:5px; border-radius:1px; margin-right:6px; vertical-align:middle; background:#27303C}
.pf-legende__0::before, .pf-legende__1::before{background:#3DDC84 !important}
.pf-legende__2::before{background:#F2B84B !important}
.pf-detail{margin-top:14px; background:var(--a-panneau-2); border:1px solid var(--a-trait); border-radius:10px; padding:12px 14px}
.pf-detail h3, .pf-col h3{font:600 12px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--a-gris); margin:0 0 10px}
.pf-col h3{margin-top:18px}
.pf-col h3:first-child{margin-top:0}
.pf-kv{border-collapse:collapse; width:100%; font-size:13.5px}
.pf-kv th{text-align:left; font-weight:500; color:var(--a-gris); padding:5px 12px 5px 0; vertical-align:top; width:42%}
.pf-kv td{padding:5px 0; font-family:var(--mono); font-size:13px; word-break:break-word}
.pf-kv tr + tr th, .pf-kv tr + tr td{border-top:1px solid var(--a-trait)}
.pf-deux{display:grid; grid-template-columns:1fr 1fr; gap:22px}
.pf-fonctions{list-style:none; margin:0; padding:0; display:grid; gap:6px; font-size:13.5px}
.pf-fonctions li{display:flex; justify-content:space-between; gap:10px; padding:7px 10px; border-radius:8px; background:var(--a-panneau-2); border:1px solid var(--a-trait)}
.pf-fonctions li::before{content:"✓"; color:var(--a-vert); font-weight:700}
.pf-fonctions li.pf-non{color:var(--a-gris)}
.pf-fonctions li.pf-non::before{content:"–"; color:var(--a-gris)}
.pf-fonctions li{justify-content:flex-start}
.pf-fonctions small{margin-left:auto; font:500 11px/1.4 var(--mono); color:var(--a-gris); white-space:nowrap}
.pf-ok small{color:var(--a-vert)}
.pf-cmds{display:flex; flex-wrap:wrap; gap:6px}
.pf-cmds code{font:13px/1 var(--mono); padding:7px 9px; border-radius:7px; background:var(--a-term); color:var(--a-term-prompt); border:1px solid var(--a-trait)}
.pf-defile{overflow-x:auto}
.pf-table{border-collapse:collapse; width:100%; min-width:720px; font-size:13px}
.pf-table th{text-align:left; font:600 11.5px/1 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--a-gris); padding:8px 10px; border-bottom:1px solid var(--a-trait-fort); position:sticky; top:0; background:var(--a-panneau)}
.pf-table td{padding:7px 10px; border-bottom:1px solid var(--a-trait); font-family:var(--mono); white-space:nowrap}
.pf-pt{display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:8px; background:#27303C; vertical-align:middle}
.pf-pt--up{background:var(--a-vert)}
.pf-pt--admin{background:var(--a-rouge)}
.pf-pt--errdis, .pf-pt--bloque{background:var(--a-ambre)}
@media (max-width:760px){
  .pf-voile{padding:0}
  .pf-fenetre{max-height:100vh; height:100%; border-radius:0}
  .pf-deux{grid-template-columns:1fr}
  .pf-tete__nom{flex-basis:100%}
}

.pf-ventilo--on{animation:pf-tourne 1.1s linear infinite}
@keyframes pf-tourne{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.pf-ventilo--on,.pf-led--trafic{animation:none}}

/* le choix du pare-feu, dans la palette */
.a-palette--large{width:min(560px, calc(100% - 24px)); max-height:calc(100% - 70px); overflow:auto}
.a-tuile--choix{cursor:pointer}
.a-fw__tete{display:flex; gap:10px; align-items:flex-start; margin-bottom:10px}
.a-fw__tete div{display:flex; flex-direction:column; gap:2px}
.a-fw__tete small{color:var(--a-gris); font-size:12.5px}
.a-fw__liste{display:grid; gap:8px}
.a-fw__carte{background:var(--a-panneau-2); border:1px solid var(--a-trait); border-radius:10px; padding:10px 12px; display:grid; gap:6px}
.a-fw__carte--fiche{opacity:.82}
.a-fw__carte p{margin:0; font-size:13px; color:var(--a-encre-2)}
.a-fw__titre{display:flex; align-items:center; gap:10px}
.a-fw__titre svg{width:40px; height:30px; flex:none}
.a-fw__titre div{display:flex; flex-direction:column; min-width:0; margin-right:auto}
.a-fw__titre small{font:500 11.5px/1.2 var(--mono); color:var(--a-gris); text-transform:uppercase; letter-spacing:.06em}
.a-fw__titre b{font-size:14px}
.a-fw__badge{font:500 11px/1.2 var(--mono); padding:4px 7px; border-radius:6px; background:var(--a-carte); color:var(--a-gris); white-space:nowrap}
.a-fw__badge--ok{color:var(--a-vert)}
.a-fw__props{display:grid; grid-template-columns:auto 1fr; gap:3px 10px; margin:0; font-size:12.5px}
.a-fw__props dt{color:var(--a-gris)}
.a-fw__props dd{margin:0; font-family:var(--mono); font-size:12px; word-break:break-word}
.a-fw__carte .a-btn{justify-self:start; touch-action:none}
.a-palette [hidden]{display:none !important}

/* ------------------------------------------------------- le Coach R8 */
.a-btn--coach{border-color:var(--a-orange); color:var(--a-encre)}
.a-btn--coach svg{color:var(--a-orange)}
/* ------------------------------------------------------ le Coach R8 --- */
.co{--co-largeur:440px; position:fixed; right:16px; bottom:16px; z-index:70; width:min(var(--co-largeur), calc(100vw - 32px)); height:min(680px, calc(100vh - 90px)); display:flex; flex-direction:column; background:var(--a-panneau); border:1px solid var(--a-trait-fort); border-radius:14px; box-shadow:0 24px 60px rgba(0,0,0,.55); overflow:hidden}
.co[hidden]{display:none}
.co--ancre{top:56px; right:0; bottom:0; height:auto; border-radius:0; border-width:0 0 0 1px; box-shadow:-12px 0 40px rgba(0,0,0,.4)}
.co__poignee{position:absolute; left:0; top:0; bottom:0; width:6px; cursor:ew-resize; z-index:2}
.co__poignee:hover,.co__poignee:focus-visible{background:linear-gradient(90deg, var(--a-orange), transparent); outline:none}
.co__tete{display:flex; align-items:center; gap:8px; padding:10px 10px 10px 14px; border-bottom:1px solid var(--a-trait); background:linear-gradient(90deg, rgba(216,138,74,.14), transparent)}
.co__avatar{width:34px; height:34px; flex:none; border-radius:50%; display:grid; place-items:center; background:var(--a-orange); color:#1A0E04; font:700 13px/1 "Sora",sans-serif}
.co--occupe .co__avatar{animation:co-pulse 1.2s ease-in-out infinite}
.co__nom{display:flex; flex-direction:column; margin-right:auto; min-width:0}
.co__nom b{font:600 14px/1.2 "Sora",sans-serif}
.co__nom small{color:var(--a-gris); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.co__vh{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.co__niveau select{background:var(--a-term); color:var(--a-encre); border:1px solid var(--a-trait-fort); border-radius:8px; padding:4px 6px; font-size:12px}
.co__icone{border:0; background:none; color:var(--a-encre-2); font-size:20px; line-height:1; cursor:pointer; min-width:34px; height:34px; border-radius:8px}
.co__icone:hover{background:var(--a-carte); color:var(--a-encre)}
.co__menu-boite{position:relative}
.co__menu{position:absolute; right:0; top:38px; z-index:3; min-width:240px; display:flex; flex-direction:column; padding:6px; background:var(--a-panneau-2); border:1px solid var(--a-trait-fort); border-radius:10px; box-shadow:0 14px 30px rgba(0,0,0,.5)}
.co__menu[hidden]{display:none}
.co__menu button{all:unset; box-sizing:border-box; padding:8px 10px; border-radius:7px; font-size:13px; color:var(--a-encre); cursor:pointer}
.co__menu button:hover,.co__menu button:focus-visible{background:var(--a-carte); outline:2px solid var(--a-bleu-clair); outline-offset:-2px}
.co__fil{flex:1; overflow-y:auto; padding:12px; display:flex; flex-direction:column; gap:8px; overscroll-behavior:contain}
.co__bulle{max-width:94%; padding:9px 12px; border-radius:12px; font-size:13.5px; line-height:1.5; word-break:break-word}
.co__bulle p{margin:0 0 6px} .co__bulle p:last-child{margin-bottom:0}
.co__bulle ul{margin:4px 0 6px; padding-left:18px}
.co__bulle pre{margin:0; padding:8px 10px; background:var(--a-term); border-radius:0 0 8px 8px; overflow-x:auto; font:12.5px/1.45 var(--mono); color:var(--a-term-prompt)}
.co-code{margin:6px 0; border:1px solid var(--a-trait); border-radius:8px; overflow:hidden}
.co-code__barre{display:flex; justify-content:flex-end; gap:6px; padding:4px 6px; background:var(--a-carte)}
.co-table{overflow-x:auto; margin:6px 0}
.co-table table{border-collapse:collapse; font-size:12px; min-width:100%}
.co-table th,.co-table td{padding:3px 7px; border-bottom:1px solid var(--a-trait); text-align:left; vertical-align:top}
.co-table td code{white-space:pre-wrap; word-break:break-word}
.co-table th{color:var(--a-encre-2); font-weight:600}
.co__bulle code{font:12.5px var(--mono); background:var(--a-term); padding:1px 5px; border-radius:4px; color:var(--a-term-prompt)}
.co__bulle pre code{padding:0; background:none}
.co__bulle details{margin-top:6px; color:var(--a-encre-2)} .co__bulle summary{cursor:pointer; color:var(--a-bleu-clair)}
.co__bulle > .co__puce{margin:8px 6px 0 0}
.co__bulle--coach{align-self:flex-start; background:var(--a-panneau-2); border:1px solid var(--a-trait)}
.co__bulle--moi{align-self:flex-end; background:var(--a-bleu); color:#04101E}
.co__bulle--attente{opacity:.75; animation:co-pulse 1.2s ease-in-out infinite}
@keyframes co-pulse{50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){ .co__bulle--attente,.co--occupe .co__avatar{animation:none} }
.co__note{font-size:11.5px; color:var(--a-gris); margin-top:6px !important}
.co-h{display:block; margin:6px 0 2px}
.co__etapes{align-self:stretch; font-size:12.5px; background:rgba(61,127,193,.08); border:1px dashed var(--a-trait-fort); border-radius:10px; padding:6px 10px}
.co__etapes > summary{cursor:pointer; color:var(--a-bleu-clair); font-weight:600}
.co__etapes ol{margin:6px 0 2px; padding-left:20px; display:flex; flex-direction:column; gap:4px}
.co__etape summary{cursor:pointer; color:var(--a-encre-2)}
.co__etape summary code{font:12px var(--mono); color:var(--a-term-prompt)}
.co__etape pre{max-height:220px; overflow:auto; margin:4px 0 0; padding:6px 8px; background:var(--a-term); border-radius:6px; font:11.5px/1.4 var(--mono); color:var(--a-term-texte)}
.co__etape-etat{font-size:11px; color:var(--a-vert); margin-left:4px}
.co__etape--ko .co__etape-etat{color:var(--a-ambre)}
.co__etape--pensee{list-style:none; margin-left:-16px; color:var(--a-gris); font-style:italic}
.co__etape--pensee p{margin:0}
.co__suggestions{display:flex; gap:6px; padding:8px 12px 2px; overflow-x:auto; scrollbar-width:thin}
.co__suggestions .co__puce{flex:none; max-width:300px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.co__suggestions[hidden]{display:none}
.co__actions{display:flex; flex-wrap:wrap; gap:6px; padding:6px 12px 0; align-items:flex-start}
.co__puce{border:1px solid var(--a-trait-fort); background:transparent; color:var(--a-encre-2); border-radius:20px; padding:6px 10px; font-size:12.5px; cursor:pointer; min-height:32px}
.co__puce:hover{border-color:var(--a-orange); color:var(--a-encre)}
.co__puce:disabled{opacity:.5; cursor:default}
.co__puce--sugg{border-style:dashed; color:var(--a-encre)}
.co__puce--mini{padding:3px 9px; font-size:11.5px; min-height:26px}
.co__puce--plein{background:var(--a-orange); border-color:var(--a-orange); color:#1A0E04; font-weight:600}
.co__plus{position:relative}
.co__plus > summary{list-style:none; display:inline-flex; align-items:center}
.co__plus > summary::-webkit-details-marker{display:none}
.co__plus-liste{position:absolute; bottom:38px; left:0; z-index:3; display:flex; flex-direction:column; gap:4px; min-width:240px; padding:6px; background:var(--a-panneau-2); border:1px solid var(--a-trait-fort); border-radius:10px; box-shadow:0 14px 30px rgba(0,0,0,.5)}
.co__plus-liste .co__puce{text-align:left; border-radius:8px}
.co__saisie{display:flex; gap:8px; padding:10px 12px 12px; align-items:stretch}
.co__saisie textarea{flex:1; min-width:0; resize:none; border-radius:10px; border:1px solid var(--a-trait-fort); background:var(--a-term); color:var(--a-encre); padding:8px 10px; font:inherit; font-size:13.5px; line-height:1.4}
.co__micro{border:1px solid var(--a-trait-fort); height:auto}
.co__micro--on{background:var(--a-rouge); color:#2A0606; border-color:var(--a-rouge)}
.co__envoyer{border:0; border-radius:10px; background:var(--a-orange); color:#1A0E04; font-weight:600; padding:0 14px; cursor:pointer}
.co :focus-visible{outline:2px solid var(--a-bleu-clair); outline-offset:2px}
/* mobile : une feuille qui monte du bas */
@media (max-width:760px){
  .co,.co--ancre{top:auto; left:0; right:0; bottom:0; width:100vw; height:82vh; height:82dvh; border-radius:16px 16px 0 0; border-width:1px 0 0}
  .co__poignee{display:none}
  .co__tete{padding-top:14px; position:relative}
  .co__tete::before{content:""; position:absolute; top:5px; left:50%; width:42px; height:4px; margin-left:-21px; border-radius:4px; background:var(--a-trait-fort)}
  .co__niveau{display:none}
  .co__saisie{padding-bottom:max(12px, env(safe-area-inset-bottom))}
  .co__plus-liste{min-width:min(280px, calc(100vw - 40px))}
}

@media (max-width:640px){.a-facade__voyants{flex-wrap:wrap}}

/* la palette par catégories et par constructeur */
.a-tuile__nb{font:500 10.5px/1.2 var(--mono); color:var(--a-gris)}
.a-fw__cherche{width:100%; box-sizing:border-box; margin:0 0 8px; padding:8px 10px; border-radius:8px; border:1px solid var(--a-trait-fort); background:var(--a-panneau-2); color:var(--a-encre); font:inherit; font-size:13px}
.a-fw__marques{display:flex; flex-wrap:wrap; gap:5px; margin:0 0 10px}
.a-fw__puce{font:500 11.5px/1 var(--mono); padding:6px 9px; border-radius:999px; border:1px solid var(--a-trait-fort); background:transparent; color:var(--a-encre-2); cursor:pointer}
.a-fw__puce--actif{background:var(--a-bleu); border-color:var(--a-bleu); color:#04101E; font-weight:600}
.a-fw__vide{color:var(--a-gris); font-size:13px}
.a-palette{width:min(340px, calc(100% - 24px))}
.a-tuile--choix{grid-column:span 2; flex-direction:row; justify-content:flex-start; gap:8px; padding:8px 10px; text-align:left; cursor:pointer}
.a-tuile--choix svg{width:38px; height:28px; flex:none}
.a-tuile--choix span{font-weight:600}
.a-tuile--choix .a-tuile__nb{margin-left:auto}

/* --- les écrans tactiles : la barre de touches, et pas de loupe ni de menu système sur le plan --- */
.a-touches{display:none}
@media (pointer:coarse){
  .a-touches{display:flex; gap:6px; padding:7px 10px calc(7px + env(safe-area-inset-bottom)); overflow-x:auto; scrollbar-width:none;
    background:var(--a-panneau); border-top:1px solid var(--a-trait); flex:none}
  .a-touches::-webkit-scrollbar{display:none}
  .a-touche{flex:none; min-width:46px; height:36px; padding:0 12px; border-radius:9px; border:1px solid var(--a-trait-fort);
    background:var(--a-panneau-2); color:var(--a-encre); font:600 13px/1 var(--mono); cursor:pointer; touch-action:manipulation}
  .a-touche:active{background:var(--a-bleu); color:#04101E}
  .a-term input{font-size:16px}           /* sous 16 px, iOS zoome sur le champ */
  .a-topo svg, .a-tuile{-webkit-touch-callout:none; -webkit-user-select:none; user-select:none}
  .a-outil, .a-btn, .a-onglet{min-height:40px}
}

/* --- téléphone : une seule rangée d'outils en haut, en icônes ; la colonne de l'éditeur passe en bas --- */
@media (max-width:700px){
  .a-outils{top:8px; left:8px; right:8px; width:auto; max-width:none; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch}
  .a-outils::-webkit-scrollbar{display:none}
  .a-outils > .a-outil > span{display:none}
  .a-outils > .a-outil{flex:none; width:40px; padding:0; justify-content:center}
  .a-outils__sep{flex:none}
  body.sim-mode .a-outils{flex-wrap:nowrap}
  .a-topo .ed-colonne{top:auto !important; bottom:8px; right:auto; left:8px; flex-direction:row}
  .a-topo__legende{display:none}
}