/* ===== Ça disjoncte ! : jeu.css (www/jeux/ca-disjoncte/jeu.css, chargé par jouer.php APRÈS jeux.css) =====
   Couleur du jeu : bleu électrique (au lieu de l'ambre de Plein Jus). On redéfinit les variables du socle
   et les quelques couleurs écrites en dur dans jeux.css (lueur du titre, carte).
   Plateau : classes cd-… ; --s = taille d'une case, calculée par ui.js pour que tout tienne sans défiler. */
.jx{--bg:#0a0f1c;--panel:#111a2c;--line:#22314f;--fg:#e6eefb;--muted:#8a9bb8;
  --amber:#38c6ff;--amber-soft:#38c6ff26;--danger:#ff5a47;--chaud:#ffb020}
.jx-titre{text-shadow:0 0 16px #38c6ff77}
.jx-btn.jx-go{color:#03131f}
.jx-statut{min-height:2.7em}/* 2 lignes réservées : un message plus long ne rétrécit pas le plateau */
.jx-carte{background:#0a0f1cf2;box-shadow:0 0 40px #38c6ff33}
.jx-gagne{z-index:5}/* au-dessus du bac collé en bas (.cd-bac sticky, z-index 1) : sinon « Niveau suivant » est caché */
/* bouton « Lancer » de la page : couleur du champ "couleur" de listejeux.php (socle, depuis le 22/10) */

/* --- plateau --- */
/* global.css du site donne à TOUS les boutons margin:4px, min-width/min-height 35px, padding 8px et un filtre inversé
   au survol (22/10 : le bouton « Dérouler » dépassait de 8 px, les cases tombaient à 44 px sur PC) : on remet à zéro */
.cd-zone button{margin:0;min-width:0;min-height:0;background-size:auto}
.cd-zone button:hover{filter:none}
/* la zone peut défiler (petit téléphone, grand niveau) : seuls les appareils bloquent le geste (touch-action:none) */
.cd-zone{--s:64px;width:100%;max-height:100%;display:flex;flex-direction:column;gap:8px;touch-action:pan-y;overflow:auto;scrollbar-width:none}
.cd-zone::-webkit-scrollbar{display:none}
.cd-circuits{display:flex;flex-direction:column;gap:8px}
.cd-circuit{border:1px solid var(--line);border-radius:12px;padding:5px 8px 6px;display:flex;flex-direction:column;gap:4px;
  background:#0d1526;transition:opacity .2s,filter .2s}
.cd-circuit.cd-cache{border:0;padding:0;background:none}
.cd-dj{position:relative;display:flex;align-items:center;gap:8px;font-size:14px;line-height:1.2;padding-bottom:6px;white-space:nowrap}
.cd-dj b{color:var(--fg)} .cd-piece{color:var(--muted)}
.cd-dj .cd-val{margin-left:auto;font-variant-numeric:tabular-nums;color:var(--muted);font-weight:700}
.cd-dj .cd-jauge{position:absolute;left:0;right:0;bottom:0;height:3px}
.cd-piece{overflow:hidden;text-overflow:ellipsis}
.cd-levier{width:11px;height:18px;border-radius:3px;background:#1d2a44;border:1px solid var(--line);position:relative;flex:none}
.cd-levier::after{content:'';position:absolute;left:1px;right:1px;top:1px;height:7px;border-radius:2px;background:var(--amber);
  box-shadow:0 0 6px var(--amber);transition:top .15s}
.cd-coupe .cd-levier::after{top:8px;background:var(--danger);box-shadow:0 0 8px var(--danger)}
.cd-coupe{border-color:var(--danger);animation:cdSecoue .35s}
.cd-coupe .cd-support,.cd-coupe .cd-dj b,.cd-coupe .cd-piece{opacity:.35;filter:grayscale(1)}
.cd-coupe .cd-app.cd-on{box-shadow:none;color:var(--muted)}

/* une multiprise, une prise murale, un enrouleur : étiquette à gauche, prises à droite */
.cd-support{display:flex;align-items:center;gap:8px;border-radius:10px;padding:3px;outline:2px solid transparent;transition:outline-color .1s,background .2s}
.cd-etiq{flex:none;width:max(104px,calc(var(--s)*1.7));display:flex;flex-direction:column;gap:2px;font-size:13px;line-height:1.15;white-space:nowrap}
.cd-mesure{display:flex;align-items:center;gap:6px}.cd-mesure .cd-jauge{flex:1}
.cd-etiq b{font-size:14px;color:var(--fg)}
.cd-max{color:var(--muted)}
.cd-val{font-variant-numeric:tabular-nums;font-size:13px;color:var(--muted)}
.cd-jauge{display:block;height:6px;border-radius:3px;background:#1a2540;overflow:hidden}
.cd-jauge i{display:block;height:100%;width:0;background:var(--amber);box-shadow:0 0 6px var(--amber);transition:width .25s,background .2s}
.cd-haut .cd-jauge i{background:var(--chaud);box-shadow:0 0 6px var(--chaud)} .cd-haut .cd-val{color:var(--chaud)}
.cd-trop .cd-jauge i{background:var(--danger);box-shadow:0 0 8px var(--danger)} .cd-trop .cd-val{color:var(--danger);font-weight:700}
.cd-trous{display:flex;gap:6px;flex-wrap:wrap;min-width:0}
.cd-trou{position:relative;width:var(--s);height:var(--s);flex:none}
.cd-vide{width:100%;height:100%;border-radius:10px;border:1px dashed #2c3d60;background:#0f182b;color:#3d5277;cursor:pointer;padding:0;
  display:flex;align-items:center;justify-content:center}
.cd-vide .cd-ico{width:62%;height:62%}
.cd-occupe .cd-vide{visibility:hidden}
.cd-trou .cd-app{position:absolute;inset:0}
.cd-support.cd-vise{outline-color:var(--amber);background:var(--amber-soft)}
.cd-support.cd-complet{outline-color:var(--muted)}
.cd-chauffe{background:#ff5a4722;outline-color:var(--danger);animation:cdSecoue .35s}
.cd-chauffe .cd-app{color:var(--danger);border-color:var(--danger);box-shadow:0 0 12px #ff5a4799}
.cd-chauffe .cd-etiq b::after{content:' 🔥'}
/* enrouleur : le tambour se touche pour le dérouler */
.cd-tambour{width:var(--s);height:var(--s);flex:none;border-radius:12px;border:2px solid var(--chaud);background:#2a1d08;color:var(--chaud);
  cursor:pointer;padding:0;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:11px;font-weight:700;line-height:1}
.cd-tambour .cd-ico{width:55%;height:55%}
.cd-deroule .cd-tambour{border-color:var(--line);background:var(--panel);color:var(--muted);cursor:default}
.cd-deroule .cd-tambour .cd-ico{animation:cdTourne .6s ease-out}

/* les appareils */
.cd-ico{fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;display:block}
.cd-plein-trait{fill:currentColor;stroke:none}
.cd-app{position:relative;width:var(--s);height:var(--s);flex:none;border-radius:10px;border:1px solid var(--line);background:var(--panel);color:var(--fg);
  cursor:grab;padding:3px 2px 2px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;touch-action:none}
.cd-app .cd-ico{width:58%;height:58%}
.cd-w{font-size:max(11px,calc(var(--s)*.19));font-weight:700;line-height:1;white-space:nowrap;font-variant-numeric:tabular-nums}
.cd-app.cd-on{color:var(--amber);border-color:#2a6f96;box-shadow:0 0 12px #38c6ff55}
.cd-app.cd-sel{outline:3px solid var(--amber);outline-offset:2px;transform:translateY(-3px)}
.cd-app.cd-fixe{cursor:default;border-style:dashed}
.cd-app.cd-fixe::after{content:'🔒';position:absolute;top:-6px;right:-6px;font-size:12px}
.cd-app.cd-parti{opacity:.25}
.cd-fantome{position:fixed;left:0;top:0;z-index:5;pointer-events:none;color:var(--amber);border-color:var(--amber);
  box-shadow:0 8px 24px #000a,0 0 16px #38c6ff88;opacity:.95}
.cd-bac{position:sticky;bottom:0;z-index:1;flex:none;display:flex;flex-wrap:wrap;gap:8px;align-content:flex-start;justify-content:center;padding:8px;border-radius:12px;
  border:1px dashed var(--line);background:#0c1322;box-shadow:0 -10px 14px var(--bg)}
.cd-bac:empty::before{content:'Tout est branché';color:var(--muted);font-size:14px;align-self:center}
.cd-gagne .cd-app.cd-on{animation:cdBrille 1.2s ease-in-out infinite alternate}
@keyframes cdSecoue{0%,100%{transform:none}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
@keyframes cdTourne{from{transform:rotate(0)}to{transform:rotate(540deg)}}
@keyframes cdBrille{from{box-shadow:0 0 6px #38c6ff55}to{box-shadow:0 0 18px #38c6ffcc}}
@media (prefers-reduced-motion:reduce){.cd-coupe,.cd-chauffe,.cd-deroule .cd-tambour .cd-ico,.cd-gagne .cd-app.cd-on{animation:none}}