/* Response8 — le mode Simulation : le panneau, la fiche OSI, l'enveloppe.
   Sur ordinateur, le panneau occupe la droite et la topologie se resserre ;
   sur téléphone, c'est une feuille en bas de l'écran.                     */
body.sim-mode{--sim-l:400px; --sim-h:48vh}
body.sim-mode .a-centre{margin-right:var(--sim-l); transition:margin .2s}
@media (max-width:1180px){ body.sim-mode{--sim-l:360px} }

/* ------------------------------------------------- la bascule ----------- */
.sim-bascule{display:inline-flex; gap:2px; padding:2px; border-radius:8px; background:rgba(7,14,26,.6)}
.sim-bascule .a-outil{height:28px; padding:0 9px}
.sim-bascule .a-outil[aria-pressed="true"]{background:var(--a-bleu); color:#04101E}
.sim-bascule__sim[aria-pressed="true"]{background:var(--a-orange) !important}
.sim-ico{display:inline-flex; width:16px; height:16px; flex:0 0 auto}
.sim-ico svg{width:100%; height:100%}
@media (max-width:1560px){
  .sim-bascule .sim-btn__txt{display:none}
  .sim-bascule .a-outil{width:30px; padding:0; justify-content:center}
}
@media (max-width:700px){
  .sim-bascule__reel{display:none !important}
  .sim-bascule .sim-btn__txt{display:none}
  .sim-bascule .a-outil{width:30px; padding:0; justify-content:center}
}

/* --------------------------------------------- l'aide du choix ---------- */
.sim-aide{position:absolute; z-index:6; top:58px; left:50%; 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-ambre); color:#1B1203; font-weight:600; font-size:13.5px; box-shadow:0 10px 26px rgba(0,0,0,.4)}
.sim-aide[hidden]{display:none}
.sim-aide__annuler{border:0; border-radius:99px; padding:5px 12px; background:rgba(27,18,3,.16); color:#1B1203 !important; font-weight:600 !important; cursor:pointer}
.sim-aide__annuler:hover,.sim-aide__annuler:focus-visible{background:rgba(27,18,3,.3)}
.sim-topo--choix svg, .sim-topo--choix .a-appareil{cursor:crosshair}
@media (max-width:700px){ .sim-aide{left:12px; right:12px; top:auto; bottom:12px; transform:none; border-radius:12px; font-size:13px} .sim-aide > span:nth-child(2){flex:1} }

/* --------------------------------------------------- le panneau --------- */
.sim-panneau{position:fixed; z-index:15; top:56px; right:0; bottom:0; width:var(--sim-l,400px); display:flex; flex-direction:column;
  background:var(--a-panneau); border-left:1px solid var(--a-trait); box-shadow:-18px 0 40px rgba(0,0,0,.28)}
.sim-panneau[hidden]{display:none}
.sim-tete{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 10px 10px 16px; border-bottom:1px solid var(--a-trait); flex:0 0 auto}
.sim-tete__titre{display:flex; align-items:center; gap:9px; color:var(--a-orange)}
.sim-tete__titre b{font:600 14.5px/1.2 "Sora",system-ui,sans-serif; color:var(--a-encre)}
.sim-tete__fin{display:flex; align-items:center; gap:4px}
.sim-corps{flex:1; min-height:0; display:flex; flex-direction:column; gap:12px; padding:12px 14px 14px; overflow-y:auto}
.sim-seul-petit{display:none !important}
.sim-corps > *{flex-shrink:0}

.sim-icobtn{display:inline-grid; place-items:center; width:34px; height:34px; border-radius:8px; border:1px solid var(--a-trait-fort); background:transparent; cursor:pointer; color:var(--a-encre); flex:0 0 auto}
.sim-icobtn:hover:not(:disabled){background:var(--a-carte); border-color:var(--a-bleu-clair)}
.sim-icobtn:disabled{opacity:.35; cursor:default}
.sim-icobtn .sim-ico{width:17px; height:17px}
.sim-icobtn--petit{width:30px; height:30px; border-color:transparent}
.sim-icobtn--petit .sim-ico{width:15px; height:15px}
.sim-icobtn--lecture{width:44px; height:44px; border-radius:50%; background:var(--a-bleu); border-color:var(--a-bleu); color:#04101E}
.sim-icobtn--lecture:hover:not(:disabled){background:var(--a-bleu-clair) !important}
.sim-icobtn--lecture .sim-ico{width:20px; height:20px}
.sim-panneau :focus-visible, .sim-fiche :focus-visible, .sim-bascule :focus-visible{outline:2px solid var(--a-ambre); outline-offset:2px}

.sim-actions{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.sim-btn{justify-content:center; height:38px}
.sim-btn[aria-pressed="true"]{background:var(--a-ambre); border-color:var(--a-ambre)}
.sim-btn[aria-expanded="true"]{background:var(--a-carte); border-color:var(--a-bleu-clair)}
.sim-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; display:inline-flex; align-items:center; gap:5px}
.sim-lien[hidden]{display:none}

/* — le formulaire du PDU complexe — */
.sim-form{display:grid; grid-template-columns:1fr 1fr; gap:9px 10px; padding:12px; background:var(--a-panneau-2); border:1px solid var(--a-trait); border-radius:var(--a-r)}
.sim-form[hidden]{display:none}
.sim-champ{display:flex; flex-direction:column; gap:4px; min-width:0}
.sim-champ[hidden]{display:none}
.sim-champ > span{font:600 11.5px/1 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--a-gris)}
.sim-champ--large{grid-column:1 / -1}
.sim-form select, .sim-form input{width:100%; height:34px; padding:0 9px; border-radius:7px; border:1px solid var(--a-trait-fort); background:var(--a-fond); color:var(--a-encre); font:500 13.5px/1 var(--mono)}
.sim-form select:focus, .sim-form input:focus{outline:none; border-color:var(--a-bleu-clair); box-shadow:0 0 0 3px rgba(107,163,220,.2)}
.sim-form__err{grid-column:1 / -1; margin:0; color:var(--a-rouge); font-size:12.5px}
.sim-form__err:empty{display:none}
.sim-form__btns{grid-column:1 / -1; display:flex; justify-content:flex-end; gap:8px}

/* — blocs — */
.sim-bloc{display:flex; flex-direction:column; gap:7px; min-height:0}
.sim-bloc__tete{display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap}
.sim-bloc h3{margin:0; font:600 11.5px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--a-gris)}
.sim-vide{list-style:none; margin:0; padding:10px 12px; border:1px dashed var(--a-trait-fort); border-radius:var(--a-r); color:var(--a-gris); font-size:13px}

/* — le scénario — */
.sim-scenario{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px; max-height:150px; overflow-y:auto}
.sim-pdu{display:flex; align-items:center; gap:2px; border-radius:8px; background:var(--a-panneau-2); border:1px solid var(--a-trait)}
.sim-pdu--actif{border-color:var(--a-bleu-clair); background:var(--a-carte)}
.sim-pdu__choix{flex:1; min-width:0; display:flex; align-items:center; gap:8px; padding:7px 9px; background:none; border:0; cursor:pointer; text-align:left; font-size:13px}
.sim-pastille-proto{width:10px; height:10px; border-radius:3px; background:var(--c); flex:0 0 auto}
.sim-pdu__statut{font:600 11px/1 var(--mono); padding:3px 6px; border-radius:5px; flex:0 0 auto}
.sim-pdu__statut--ok{background:rgba(61,220,132,.14); color:var(--a-vert)}
.sim-pdu__statut--ko{background:rgba(242,95,92,.14); color:var(--a-rouge)}
.sim-pdu__route{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:var(--mono); font-size:12.5px}
.sim-pdu__type{font:500 11.5px/1 var(--mono); color:var(--a-gris); white-space:nowrap}
.sim-pdu__perime{color:var(--a-ambre); font-weight:700}

/* — les commandes — */
.sim-commandes{display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:8px 10px; border-radius:var(--a-r); background:var(--a-panneau-2); border:1px solid var(--a-trait)}
.sim-commandes__btns{display:flex; align-items:center; gap:6px}
.sim-vitesse{display:flex; align-items:center; gap:7px; font:500 11.5px/1 var(--mono); color:var(--a-gris); text-transform:uppercase; letter-spacing:.06em}
.sim-vitesse input{width:78px; accent-color:var(--a-bleu-clair)}
.sim-compteur{margin-left:auto; font:500 12px/1.3 var(--mono); color:var(--a-encre-2); white-space:nowrap}

/* — l'explication en cours — */
.sim-maintenant{padding:11px 13px; border-radius:var(--a-r); background:linear-gradient(180deg,rgba(61,127,193,.1),rgba(61,127,193,.03)); border:1px solid var(--a-trait-fort)}
.sim-maintenant[hidden]{display:none}
.sim-maintenant__tete{display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin-bottom:6px}
.sim-maintenant__tete b{font-size:13.5px}
.sim-maintenant__osi{margin-left:auto}
.sim-maintenant__osi .sim-ico{width:14px; height:14px}
.sim-maintenant__txt{margin:0; font-size:14px; line-height:1.55; color:var(--a-encre)}
.sim-maintenant__txt--ko{color:#FFB3B1}
.sim-maintenant__txt--ok{color:#A8F0C8}
.sim-maintenant__perime{margin:8px 0 0; font-size:12.5px; color:var(--a-ambre)}
.sim-badge{font:600 11px/1 var(--mono); padding:4px 7px; border-radius:5px; color:#04101E; background:var(--c,var(--a-gris))}
.sim-badge--phase{background:var(--a-carte); color:var(--a-encre-2); border:1px solid var(--a-trait-fort)}
.sim-resultat{margin-top:10px; padding:9px 11px; border-radius:8px; font-size:13px}
.sim-resultat p{margin:5px 0 0; color:var(--a-encre-2); line-height:1.5}
.sim-resultat--ok{background:rgba(61,220,132,.1); border:1px solid rgba(61,220,132,.35)}
.sim-resultat--ok b{color:var(--a-vert)}
.sim-resultat--ko{background:rgba(242,95,92,.09); border:1px solid rgba(242,95,92,.35)}
.sim-resultat--ko b{color:var(--a-rouge)}
.sim-resultat strong{color:var(--a-ambre)}

/* — la liste des événements — */
.sim-bloc--evts{flex:1 1 auto !important; min-height:230px}
.sim-filtres{display:flex; gap:5px; flex-wrap:wrap}
.sim-filtre{display:inline-flex; align-items:center; gap:5px; padding:3px 8px 3px 6px; border-radius:99px; border:1px solid var(--a-trait-fort); cursor:pointer; font:500 11.5px/1.2 var(--mono); color:var(--a-encre-2); position:relative}
.sim-filtre input{position:absolute; opacity:0; width:1px; height:1px}
.sim-filtre i{width:9px; height:9px; border-radius:3px; border:1.5px solid var(--c)}
.sim-filtre input:checked + i{background:var(--c)}
.sim-filtre input:not(:checked) ~ span{text-decoration:line-through; opacity:.6}
.sim-filtre:focus-within{outline:2px solid var(--a-ambre); outline-offset:1px}
.sim-evts__defile{flex:1; min-height:140px; overflow-y:auto; border:1px solid var(--a-trait); border-radius:var(--a-r); background:var(--a-fond); position:relative}
.sim-evts{list-style:none; margin:0; padding:0}
.sim-evts .sim-vide{border:0}
.sim-evt{display:grid; grid-template-columns:36px 46px minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); column-gap:6px; row-gap:2px; align-items:center; width:100%; padding:6px 9px;
  background:none; border:0; border-bottom:1px solid rgba(29,49,80,.6); text-align:left; cursor:pointer; font:500 12px/1.3 var(--mono); color:var(--a-encre-2)}
.sim-evt:hover{background:rgba(21,37,60,.7)}
.sim-evt--tete{position:sticky; top:0; z-index:1; background:var(--a-panneau-2); cursor:default; font:600 10.5px/1.2 var(--mono); text-transform:uppercase; letter-spacing:.06em; color:var(--a-gris)}
.sim-evt--tete:hover{background:var(--a-panneau-2)}
.sim-evt > span{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.sim-evt__n{display:flex; align-items:center; gap:5px}
.sim-evt__n i{width:8px; height:8px; border-radius:2px; background:var(--c); flex:0 0 auto}
.sim-evt__app{color:var(--a-encre); font-weight:600}
.sim-evt__info{grid-column:2 / -1; font-size:11.5px; color:var(--a-gris)}
.sim-evt--actif{background:rgba(61,127,193,.18) !important; box-shadow:inset 3px 0 0 var(--c)}
.sim-evt--actif .sim-evt__info{color:var(--a-encre-2)}
.sim-evt--ko .sim-evt__type{color:var(--a-rouge)}
.sim-evt--ok .sim-evt__type{color:var(--a-vert)}

/* ------------------------------------------- la fiche OSI -------------- */
.sim-fiche{position:fixed; z-index:30; top:118px; right:calc(var(--sim-l,400px) + 12px); width:min(490px, calc(100vw - var(--sim-l,400px) - 24px)); max-height:calc(100vh - 132px);
  display:flex; flex-direction:column; background:var(--a-panneau); border:1px solid var(--a-trait-fort); border-top:3px solid var(--c,var(--a-bleu)); border-radius:12px; box-shadow:0 24px 60px rgba(0,0,0,.55)}
.sim-fiche[hidden]{display:none}
.sim-fiche__tete{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 10px 8px 14px}
.sim-fiche__tete > div{display:flex; flex-direction:column; min-width:0}
.sim-fiche__tete small{font:500 11.5px/1.3 var(--mono); color:var(--a-gris); text-transform:uppercase; letter-spacing:.06em}
.sim-fiche__tete b{font:600 14.5px/1.3 "Sora",system-ui,sans-serif; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.sim-onglets{display:flex; gap:2px; padding:0 10px; border-bottom:1px solid var(--a-trait)}
.sim-onglet{padding:8px 11px; border:0; background:none; cursor:pointer; font-size:13px; font-weight:500; color:var(--a-gris) !important; border-bottom:2px solid transparent; margin-bottom:-1px}
.sim-onglet[aria-selected="true"]{color:var(--a-encre) !important; border-bottom-color:var(--c,var(--a-bleu-clair))}
.sim-fiche__corps{overflow-y:auto; padding:12px 14px 16px}
.sim-fiche h4{margin:14px 0 7px; font:600 11.5px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--a-gris)}

.sim-osi{display:flex; flex-direction:column; border:1px solid var(--a-trait); border-radius:9px; overflow:hidden}
.sim-osi__ligne{display:grid; grid-template-columns:164px minmax(0,1fr) minmax(0,1fr); border-bottom:1px solid var(--a-trait)}
.sim-osi__ligne:last-child{border-bottom:0}
.sim-osi__ligne > span{padding:7px 8px; font-size:12px; line-height:1.4; min-width:0; overflow-wrap:anywhere}
.sim-osi__ligne--tete{background:var(--a-panneau-2)}
.sim-osi__ligne--tete > span{font:600 10.5px/1.2 var(--mono); text-transform:uppercase; letter-spacing:.08em; color:var(--a-gris)}
.sim-osi__ligne--vide{opacity:.5}
.sim-osi__ligne--vide > span{padding-top:4px; padding-bottom:4px}
.sim-osi__nom{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.sim-osi__nom{font:600 11px/1.35 var(--mono) !important; color:var(--a-encre-2); background:rgba(17,31,51,.6)}
.sim-osi__cel{font-family:var(--mono); color:var(--a-encre); border-left:1px solid var(--a-trait)}
.sim-osi__cel--vide{color:var(--a-gris)}
.sim-osi__cel--note{font-family:inherit; font-style:italic; color:var(--a-gris)}
.sim-decisions{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:5px}
.sim-decisions__btn{width:100%; text-align:left; padding:8px 10px; border-radius:8px; border:1px solid var(--a-trait); background:var(--a-panneau-2); cursor:pointer; font-size:13px; line-height:1.5; color:var(--a-encre-2) !important}
.sim-decisions__btn b{color:var(--a-encre); font-weight:600}
.sim-decisions--actif .sim-decisions__btn{border-color:var(--c,var(--a-bleu-clair)); background:var(--a-carte); color:var(--a-encre) !important}
.sim-decisions--ko .sim-decisions__btn b{color:var(--a-rouge)}
.sim-decisions--ok .sim-decisions__btn b{color:var(--a-vert)}

.sim-ent{margin-bottom:10px}
.sim-ent__titre{font:600 11.5px/1 var(--mono); letter-spacing:.08em; color:var(--a-encre-2); margin:0 0 5px}
.sim-ent__grille{display:grid; grid-template-columns:repeat(8, minmax(0,1fr)); border:1px solid var(--a-trait-fort); border-radius:7px; overflow:hidden; background:var(--a-fond)}
.sim-ent__champ{padding:5px 6px; border-right:1px solid var(--a-trait); border-bottom:1px solid var(--a-trait); min-width:0; display:flex; flex-direction:column; gap:2px}
.sim-ent__champ small{font:600 9.5px/1.1 var(--mono); color:var(--a-gris); letter-spacing:.04em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.sim-ent__champ span{font:500 12px/1.25 var(--mono); color:var(--a-encre); overflow-wrap:anywhere}

/* ------------------------------------------- le calque SVG ------------- */
.sim-calque{pointer-events:none}
.sim-trace{stroke:var(--c); stroke-width:5; stroke-linecap:round; opacity:.45}
.sim-halo{fill:none; stroke:var(--c,var(--a-bleu-clair)); stroke-width:2.5; stroke-dasharray:9 6; animation:sim-tourne 1.2s linear infinite}
.sim-halo--ok{stroke:var(--a-vert); stroke-dasharray:none}
.sim-halo--ko{stroke:var(--a-rouge); stroke-dasharray:none}
.sim-halo--choix{stroke:var(--a-ambre); fill:rgba(242,184,75,.1)}
@keyframes sim-tourne{to{stroke-dashoffset:-30}}
.sim-env{filter:drop-shadow(0 3px 6px rgba(0,0,0,.6))}
.sim-env__corps{fill:var(--c); stroke:#08111F; stroke-width:1.6}
.sim-env__rabat{fill:none; stroke:#08111F; stroke-width:1.6; stroke-linejoin:round}
.sim-env__pastille{stroke:#08111F; stroke-width:1.6}
.sim-env--ok .sim-env__pastille{fill:var(--a-vert)}
.sim-env--ko .sim-env__pastille{fill:var(--a-rouge)}
.sim-env__signe{font:700 11px/1 "IBM Plex Sans",sans-serif; fill:#08111F}
@media (prefers-reduced-motion:reduce){ .sim-halo{animation:none} body.sim-mode .a-centre{transition:none} }

/* --------------------------------------------- le téléphone ------------ */
@media (max-width:760px){
  body.sim-mode{--sim-l:0px}
  body.sim-mode.sim-reduit{--sim-h:124px}
  body.sim-mode .a-centre{margin-right:0; margin-bottom:var(--sim-h); grid-template-rows:minmax(0,1fr) 0 0 !important}
  body.sim-mode .a-poignee, body.sim-mode .a-consoles{display:none !important}
  .sim-panneau{top:auto; left:0; right:0; width:auto; height:var(--sim-h); border-left:0; border-top:1px solid var(--a-trait-fort); border-radius:16px 16px 0 0; box-shadow:0 -16px 40px rgba(0,0,0,.45); transition:height .2s}
  .sim-tete{padding:8px 8px 8px 14px; position:relative}
  .sim-tete::before{content:""; position:absolute; top:5px; left:50%; width:36px; height:4px; margin-left:-18px; border-radius:4px; background:var(--a-trait-fort)}
  .sim-seul-petit{display:inline-grid !important}
  body.sim-reduit .sim-seul-petit .sim-ico{transform:rotate(180deg)}
  body.sim-reduit .sim-corps > :not(.sim-commandes){display:none}
  .sim-corps{padding:10px 12px 12px; gap:10px}
  .sim-commandes{gap:8px 10px}
  .sim-vitesse input{width:64px}
  .sim-compteur{margin-left:0; width:100%}
  body.sim-reduit .sim-compteur{display:none}
  .sim-evt{grid-template-columns:34px 46px minmax(0,1fr) minmax(0,1fr); padding:6px 8px}
  .sim-evt__type{grid-column:3 / -1; grid-row:2}
  .sim-evt--tete .sim-evt__type, .sim-evt--tete span:nth-child(5){display:none}
  .sim-evt__info{grid-column:3 / -1; grid-row:3}
  .sim-fiche{top:auto; left:0; right:0; bottom:0; width:auto; max-height:86vh; border-radius:16px 16px 0 0}
  .sim-osi__ligne{grid-template-columns:84px minmax(0,1fr) minmax(0,1fr)}
  .sim-osi__nom{white-space:normal}
  .sim-ent__champ small{font-size:9px}
}

/* la barre d'outils de la topologie se replie quand le panneau la resserre */
body.sim-mode .a-outils{max-width:calc(100% - 24px); flex-wrap:wrap}