/* ===== Mauvaises Ondes : jeu.css (www/jeux/mauvaises-ondes/jeu.css, chargé par jouer.php APRÈS jeux.css) =====
   Couleur du jeu : NOIR (choix de Guillaume, 23/10/2026, « noir pour la CEM »). Dans le jeu : fond noir
   d'oscilloscope, repères blancs, parasites en rose-rouge (--onde), masse en vert-jaune (--masse).
   Plateau : classes mo-… ; --c = taille d'une case de 10 cm, --t = taille d'une tuile du bac, calculées par ui.js. */
.jx{--bg:#050507;--panel:#111116;--line:#2b2b35;--fg:#f2f2f7;--muted:#9b9bab;
  --amber:#f2f2f7;--amber-soft:#f2f2f722;--danger:#ff4d6d;--vert:#4ade80;--onde:#ff3d7f;--masse:#a3d94a}
.jx-titre{text-shadow:0 0 14px #ffffff55}
.jx-titre span{color:var(--onde);text-shadow:0 0 14px #ff3d7f88}
.jx-btn.jx-go{color:#050507}
.jx-statut{min-height:5em;font-size:14px;line-height:1.25;font-weight:600}/* 4 lignes réservées : un message long ne rétrécit pas le plateau */
.jx-carte{background:#050507f2;box-shadow:0 0 40px #ffffff22}
.jx-carte p{max-width:36ch}
.jx-gagne{z-index:5}
/* boutons du socle : sans la marge ni le filtre inversé de global.css (demande au socle du 22/10) */
.jx .jx-btn{margin:0;min-width:0;min-height:44px}
.jx .jx-btn:hover{filter:none}
/* le bouton « ⚡ Lancer ! » de la page est un <button> : au survol, global.css l'inversait (le noir devenait gris clair).
   jeu.css est aussi chargé dans la page par jouer.php : on le garde noir (demande au socle du 23/10, pour tous les jeux) */
.jx-lancer:hover{filter:none}

/* --- plateau --- */
/* global.css du site donne à TOUS les boutons margin:4px, min-width/min-height 35px, padding 8px, fond blanc et un
   filtre inversé au survol (piège vu sur Ça disjoncte !, 22/10) : on remet à zéro */
.mo-zone button{margin:0;min-width:0;min-height:0;background-size:auto;padding:0;font:inherit;color:inherit}
.mo-zone button:hover{filter:none}
.mo-zone{--c:80px;--t:64px;width:100%;max-height:100%;display:flex;flex-direction:column;align-items:center;gap:8px;
  overflow:auto;touch-action:pan-y;scrollbar-width:none}
.mo-zone::-webkit-scrollbar{display:none}
.mo-plateau{position:relative;flex:none}
.mo-fond,.mo-ondes{position:absolute;inset:0;width:100%;height:100%}
.mo-ondes{pointer-events:none;overflow:visible}
.mo-regle{fill:none;stroke:#5a5a68;stroke-width:2}
.mo-cm{fill:var(--muted);font:700 15px 'Source Sans Pro',tahoma,sans-serif;text-anchor:middle}
.mo-armoire{fill:#16161c;stroke:#3a3a46;stroke-width:3}
.mo-plaque{fill:#0b0d10;stroke:#a3d94a44;stroke-width:2}/* la plaque de fond, c'est la masse */
.mo-grat{fill:none;stroke:#ffffff12;stroke-width:2;stroke-dasharray:4 6}
.mo-propre .mo-plaque{stroke:var(--vert)}
/* câbles : gaine (le blindage) et âme ; presse-étoupe ; appareils de la machine */
.mo-gaine{fill:none;stroke:#6b6b78;stroke-width:16;stroke-linecap:round;stroke-linejoin:round}
.mo-ame{fill:none;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.mo-ame.mo-p{stroke:#d9914f} .mo-ame.mo-m{stroke:#4aa3ff}
.mo-pe{fill:#2a2a33;stroke:#8a8a99;stroke-width:3}
.mo-dev>rect{fill:var(--panel);stroke:var(--line);stroke-width:3}
.mo-dev g *{fill:none;stroke:var(--fg);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.mo-dn{fill:var(--fg);font:700 14px 'Source Sans Pro',tahoma,sans-serif;text-anchor:middle}
.mo-ds{fill:var(--muted);font:700 13px 'Source Sans Pro',tahoma,sans-serif;text-anchor:middle}

/* les cases de 10 cm */
.mo-case{position:absolute;border-radius:12px;border:2px dashed #ffffff1f;background:transparent;cursor:pointer;
  display:flex;align-items:center;justify-content:center;touch-action:none;transition:border-color .15s,box-shadow .15s}
.mo-case.mo-occ{border:2px solid var(--line);background:var(--panel)}
.mo-case.mo-vise{border:2px solid #fff;box-shadow:0 0 14px #ffffff88}
.mo-case.mo-non{border:2px solid var(--danger)}
.mo-case.mo-parti .mo-piece{opacity:.3}
.mo-case.mo-emet{border-color:var(--onde);box-shadow:0 0 12px #ff3d7f66}
.mo-case[data-etat="ok"]{border-color:var(--vert);box-shadow:0 0 12px #4ade8066}
.mo-case[data-etat="ko"]{border-color:var(--danger);box-shadow:0 0 16px #ff4d6d99;animation:moSecoue .35s 2}
.mo-case:focus-visible,.mo-bout:focus-visible,.mo-tuile:focus-visible,.mo-marche:focus-visible{outline:2px solid #fff;outline-offset:2px}
.mo-piece{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  width:100%;height:100%;pointer-events:none;color:var(--fg)}
.mo-ico{fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;display:block}
.mo-piece .mo-ico{width:calc(var(--c)*.42);height:calc(var(--c)*.42)}
.mo-nom{font-size:max(10px,calc(var(--c)*.14));font-weight:700;color:var(--muted);white-space:nowrap;line-height:1.05}
.mo-lcd{min-width:84%;padding:2px 3px;border-radius:4px;background:#9fb59a;color:#122012;text-align:center;white-space:nowrap;overflow:hidden;
  font:700 max(9px,calc(var(--c)*.13))/1.1 'Source Sans Pro',tahoma,sans-serif;font-variant-numeric:tabular-nums}
.mo-case[data-etat="ko"] .mo-lcd{background:var(--danger);color:#fff}
.mo-trace{display:none;width:88%;height:calc(var(--c)*.34)}
.mo-trace polyline{fill:none;stroke:var(--vert);stroke-width:2.5;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.mo-case[data-etat="ko"] .mo-trace polyline{stroke:var(--danger)}
.mo-en-marche .mo-r-v .mo-trace{display:block}
.mo-en-marche .mo-r-v .mo-ico{display:none}
/* la tôle : en l'air (pointillés) ou reliée à la masse (pastille terre) */
.mo-flottante{outline:2px dashed #ffb02099;outline-offset:-5px;border-radius:10px}
.mo-flottante .mo-ico{opacity:.6}
.mo-masse{position:absolute;right:5%;bottom:5%;width:calc(var(--c)*.27);height:calc(var(--c)*.27);min-width:16px;min-height:16px;border-radius:50%;
  background:var(--masse);display:flex;align-items:center;justify-content:center}
.mo-terre{width:78%;height:78%;fill:none;stroke:#0b1a00;stroke-width:2.6;stroke-linecap:round}
.mo-cadenas{position:absolute;right:3px;top:1px;font-size:max(10px,calc(var(--c)*.13));line-height:1}
.mo-r-t .mo-ico,.mo-r-r .mo-ico{color:var(--masse)}

/* les bouts de câble : on y pose la reprise du blindage */
.mo-bout{position:absolute;width:max(44px,calc(var(--c)*.5));height:max(44px,calc(var(--c)*.5));transform:translate(-50%,-50%);
  border-radius:50%;border:3px dashed #a3d94a99;background:#0b0d10ee;color:var(--masse);cursor:pointer;touch-action:none;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:max(15px,calc(var(--c)*.2));transition:transform .12s,box-shadow .12s}
.mo-bout.mo-pris{border-style:solid;border-color:var(--masse);background:#16210a}
.mo-bout .mo-ico{width:72%;height:72%}
.mo-bout i{position:absolute;right:-7px;top:-9px;font-style:normal;font-size:12px}
.mo-bout.mo-vise{box-shadow:0 0 16px var(--masse);transform:translate(-50%,-50%) scale(1.15)}
.mo-bout.mo-non{border-color:var(--danger)}
.mo-bout.mo-parti{opacity:.35}

/* les ondes, une fois en marche */
.mo-anneau{fill:none;stroke:var(--onde);stroke-width:4;opacity:0;transform-box:fill-box;transform-origin:center;animation:moAnneau 1.6s ease-out infinite}
.mo-anneau.mo-a2{animation-delay:.8s}
.mo-onde{fill:none;stroke:#ff3d7f77;stroke-linecap:round;stroke-dasharray:16 12;animation:moFlux .7s linear infinite}
.mo-onde.mo-fort{stroke:var(--onde);filter:drop-shadow(0 0 5px #ff3d7f)}
.mo-onde.mo-faible{stroke:#ff3d7f4d;stroke-width:2;stroke-dasharray:6 10}/* derrière la tôle : affaibli, pas annulé */
.mo-stop{fill:#ffffff14;stroke:#fff;stroke-width:3;animation:moStop .9s ease-in-out infinite alternate}
.mo-relaie{fill:none;stroke:#ffb020;stroke-width:4;stroke-dasharray:8 8;animation:moFlux .6s linear infinite}
.mo-boucle{fill:none;stroke:var(--masse);stroke-width:8;stroke-dasharray:10 14;animation:moFlux .5s linear infinite;filter:drop-shadow(0 0 6px #a3d94a)}
.mo-ronfle{fill:none;stroke:var(--onde);stroke-width:6;stroke-dasharray:4 8;animation:moFlux .4s linear infinite}
.mo-amp{fill:var(--masse);stroke:#050507;stroke-width:6;paint-order:stroke;font:700 18px 'Source Sans Pro',tahoma,sans-serif;text-anchor:end}
.mo-gaine.mo-rayonne{stroke:#ff3d7f;filter:drop-shadow(0 0 8px #ff3d7f);animation:moRayonne .8s ease-in-out infinite alternate}

/* le bouton de mise en marche */
.mo-cmd{flex:none}
.mo-marche{min-height:48px!important;padding:8px 24px!important;border-radius:12px;border:0;cursor:pointer;
  background:linear-gradient(#ffffff,#c9c9d4);color:#050507!important;font-weight:700!important;font-size:18px!important;
  box-shadow:0 3px 0 #77778a,0 0 18px #ffffff44}
.mo-marche:active{transform:translateY(2px);box-shadow:0 1px 0 #77778a}
.mo-marche:disabled{opacity:.45;cursor:default;box-shadow:none;transform:none}

/* le bac */
.mo-bac{flex:none;display:flex;gap:6px;justify-content:center;flex-wrap:wrap;max-width:100%}
.mo-tuile{position:relative;width:var(--t);height:var(--t);flex:none;border-radius:12px;border:1px solid var(--line);background:var(--panel);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;touch-action:none;cursor:grab;color:var(--fg);
  transition:transform .12s,opacity .12s}
.mo-tuile .mo-ico{width:calc(var(--t)*.46);height:calc(var(--t)*.46)}
.mo-tuile .mo-nom{font-size:11px;white-space:normal;text-align:center;line-height:1;max-width:96%}
.mo-nb{position:absolute;right:4px;top:3px;font-size:12px;line-height:16px;color:var(--fg);background:#2b2b35;border-radius:8px;padding:0 5px}
.mo-tuile.mo-sel{outline:3px solid #fff;outline-offset:2px;transform:translateY(-3px)}
.mo-tuile.mo-parti{opacity:.35}
.mo-vide{color:var(--muted);font-size:14px;padding:12px 0}
.mo-fantome{position:fixed;left:0;top:0;z-index:6;pointer-events:none;width:64px;height:64px;border-radius:12px;border:2px solid #fff;
  background:var(--panel);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--fg);
  box-shadow:0 8px 24px #000a,0 0 16px #ffffff66}
.mo-fantome .mo-ico{width:30px;height:30px}
.mo-fantome .mo-nom{font-size:11px}

@keyframes moAnneau{0%{transform:scale(.4);opacity:.9}100%{transform:scale(2.4);opacity:0}}
@keyframes moFlux{to{stroke-dashoffset:-28}}
@keyframes moStop{from{opacity:.35}to{opacity:1}}
@keyframes moRayonne{from{stroke-opacity:.55}to{stroke-opacity:1}}
@keyframes moSecoue{0%,100%{transform:none}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
@media (prefers-reduced-motion:reduce){
  .mo-anneau{animation:none;opacity:.5;transform:scale(1.5)}
  .mo-onde,.mo-stop,.mo-relaie,.mo-boucle,.mo-ronfle,.mo-gaine.mo-rayonne,.mo-case[data-etat="ko"]{animation:none}
}