/* ============================================================================================
   L'AIDE « ? » (03/10/2026) — maquette validée : maquettes/maquette-aide.html
   ⚠️ TOUT est qualifié par #aideOverlay / #aideFen et les classes sont préfixées « ai- » : salle.css est plein de règles génériques
   (.sec, .aide, .bt, .col, .t…) qui, à spécificité égale, écrasent ou polluent une classe seule. Chargé APRÈS salle.css.
   ============================================================================================ */
#aideOverlay{position:fixed;inset:0;z-index:300;background:rgba(2,7,10,.62);display:flex;align-items:flex-start;justify-content:center;
  padding:3.2rem 1rem 1rem;overflow:auto;}
#aideFen{width:min(560px,100%);max-height:calc(100vh - 4.4rem);display:flex;flex-direction:column;overflow:hidden;
  background:linear-gradient(150deg,rgba(13,22,25,.99),rgba(4,10,12,.99));border:1px solid rgba(53,196,165,.45);border-radius:.8rem;
  box-shadow:0 24px 60px rgba(0,0,0,.65);color:#d7e2df;font-size:.82rem;line-height:1.5;text-align:left;}
#aideFen svg,#aideFen i{width:15px;height:15px;flex:0 0 auto;}
#aideFen .ai-tete{display:flex;align-items:center;gap:.5rem;padding:.7rem .9rem;border-bottom:1px solid rgba(255,255,255,.08);font-weight:800;color:#35c4a5;}
#aideFen .ai-tete svg,#aideFen .ai-tete i{width:17px;height:17px;}
#aideFen .ai-x{margin-left:auto;width:auto;flex:0 0 auto;padding:.2rem;border:0;background:transparent;color:#8a9b97;cursor:pointer;display:grid;place-items:center;border-radius:.35rem;}
#aideFen .ai-x:hover{color:#d7e2df;background:rgba(255,255,255,.07);}
#aideFen .ai-corps{padding:.5rem .8rem .8rem;overflow:auto;}
#aideFen .ai-sec{border:1px solid rgba(255,255,255,.08);border-radius:.55rem;margin:.4rem 0;background:rgba(2,7,10,.4);}
#aideFen .ai-sec summary{list-style:none;cursor:pointer;padding:.55rem .7rem;font-weight:700;display:flex;align-items:center;gap:.5rem;}
#aideFen .ai-sec summary::-webkit-details-marker{display:none;}
#aideFen .ai-sec summary svg,#aideFen .ai-sec summary i{color:#d6b25e;}
#aideFen .ai-sub{color:#8a9b97;font-weight:400;font-size:.74rem;margin-left:.2rem;}
#aideFen .ai-sec[open] summary{border-bottom:1px solid rgba(255,255,255,.06);}
#aideFen .ai-pas,#aideFen .ai-liste{margin:.4rem .7rem .6rem;padding-left:1.2rem;}
#aideFen .ai-pas{list-style:decimal;} #aideFen .ai-liste{list-style:disc;}
#aideFen .ai-pas li,#aideFen .ai-liste li{margin:.35rem 0;}
#aideFen .ai-pas li::marker{color:#35c4a5;font-weight:800;}
#aideFen .ai-alerte{background:rgba(214,178,94,.1);border-left:3px solid #d6b25e;padding:.35rem .5rem;border-radius:.3rem;margin-left:-.5rem;margin-right:-.2rem;}
#aideFen .ai-k{font-style:normal;color:#35c4a5;font-weight:700;}
#aideFen b{color:#e9f1ee;}
#aideFen .ai-txt{margin:.45rem .7rem;}
/* petits schémas */
#aideFen .ai-ill{display:flex;align-items:center;gap:.5rem;margin:.45rem 0 .1rem;padding:.45rem .55rem;border:1px dashed rgba(215,226,223,.22);border-radius:.45rem;background:#081014;font-size:.62rem;flex-wrap:wrap;}
#aideFen .ai-col{display:flex;flex-direction:column;gap:.25rem;}
#aideFen .ai-ong{display:flex;gap:2px;}
#aideFen .ai-t{padding:.15rem .4rem;border-radius:.25rem .25rem 0 0;background:rgba(255,255,255,.05);color:#8a9b97;}
#aideFen .ai-t.on{background:rgba(53,196,165,.2);color:#35c4a5;font-weight:700;}
#aideFen .ai-lig{display:flex;gap:.25rem;align-items:center;}
#aideFen .ai-bt{padding:.18rem .45rem;border-radius:.3rem;border:1px solid rgba(215,226,223,.3);background:rgba(255,255,255,.04);color:#d7e2df;}
#aideFen .ai-bt.or{border-color:#d6b25e;background:rgba(214,178,94,.18);color:#d6b25e;font-weight:800;box-shadow:0 0 0 2px rgba(214,178,94,.25);}
#aideFen .ai-champ{padding:.2rem .5rem;border:1px solid rgba(53,196,165,.5);border-radius:.3rem;background:#050c0e;color:#d7e2df;font-family:ui-monospace,monospace;letter-spacing:.1em;}
#aideFen .ai-champ.ai-libre{letter-spacing:0;font-family:inherit;}
#aideFen .ai-fl{color:#d6b25e;font-size:.9rem;font-weight:900;}
#aideFen .ai-cap{color:#8a9b97;font-style:italic;margin-left:.2rem;}
#aideFen .ai-cap2{color:#d7e2df;}
#aideFen .ai-fiche{padding:.2rem .5rem;border-radius:.3rem;background:rgba(53,196,165,.15);border:1px solid rgba(53,196,165,.5);color:#35c4a5;}
#aideFen .ai-mini{display:flex;position:relative;width:150px;height:46px;border:1px solid rgba(215,226,223,.25);border-radius:.3rem;overflow:hidden;}
#aideFen .ai-mini.ai-scene{width:170px;height:70px;}
#aideFen .ai-bd{flex:0 0 9px;background:rgba(214,178,94,.35);border-right:1px solid #d6b25e;}
#aideFen .ai-sc{flex:1;display:grid;place-items:center;color:#8a9b97;}
#aideFen .ai-ch{flex:0 0 28%;border-left:1px solid rgba(215,226,223,.2);display:grid;place-items:center;color:#8a9b97;}
#aideFen .ai-rond{width:24px;height:24px;border-radius:.4rem;border:1px solid #d6b25e;display:grid;place-items:center;color:#d6b25e;font-size:.9rem;}
#aideFen .ai-case{width:11px;height:11px;border-radius:.2rem;border:1px solid rgba(215,226,223,.5);display:inline-block;}
#aideFen .ai-case.on{background:#35c4a5;border-color:#35c4a5;}
#aideFen .ai-cible{position:absolute;left:30%;top:22%;width:18px;height:18px;border-radius:50%;border:2px solid #d6b25e;box-shadow:0 0 0 3px rgba(214,178,94,.25);}
#aideFen .ai-cible-nom{position:absolute;left:calc(30% + 22px);top:calc(22% + 2px);font-size:.55rem;color:#d6b25e;font-weight:800;}
#aideFen .ai-barre{align-items:center;border:1px solid rgba(215,226,223,.25);border-radius:.4rem;padding:.25rem;}

/* téléphone : la feuille d'aide prend tout l'écran, collée en bas */
@media (max-width:900px){
  #aideOverlay{padding:2.2rem 0 0;align-items:flex-end;}
  #aideFen{width:100%;max-height:calc(100vh - 2.2rem);border-radius:.9rem .9rem 0 0;}
}

/* ---- les boutons « ? » ---- */
#btnAide{display:inline-flex;align-items:center;justify-content:center;padding:.3rem .45rem;}
#btnAide i,#btnAide svg{width:15px;height:15px;}
#btnAideHub{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;margin-left:auto;cursor:pointer;
  border-radius:.45rem;border:1px solid rgba(215,226,223,.35);background:rgba(255,255,255,.04);color:#d7e2df;}
#btnAideHub i,#btnAideHub svg{width:17px;height:17px;}
#ecranHub .panneau-entete{align-items:center;}
#infoSalleBoite .is-aide{display:flex;align-items:center;gap:.5rem;width:100%;margin:.2rem 0 .6rem;padding:.55rem .7rem;cursor:pointer;
  border:1px solid #d6b25e;border-radius:.5rem;background:rgba(214,178,94,.1);color:#d6b25e;font:inherit;font-weight:700;font-size:.85rem;text-align:left;}
#infoSalleBoite .is-aide i,#infoSalleBoite .is-aide svg{width:16px;height:16px;}
#infoSalleBoite .is-aide .ai-chev{margin-left:auto;}