/* ===== jeux.css : commun à TOUS les jeux (www/jeux/jeux.css, chargé par jouer.php) =====
   Plein écran « atelier de nuit » : barre du haut (titre, pastilles de niveaux, ✕), consigne, scène,
   statut, barre du bas, carte de victoire, et le bouton « Jouer » de la page (.jx-lancer).
   Tout est rangé sous .jx pour ne rien toucher de global.css. Un jeu qui veut d'autres couleurs
   redéfinit les variables (--amber…) dans son propre jeux/<dossier>/jeu.css (facultatif).
   Police : Source Sans Pro, déjà déclarée par global.css (www/polices). */
.jx{--bg:#0e1117;--panel:#161b24;--line:#262d3a;--fg:#e8ecf2;--muted:#8b95a7;
  --amber:#ffc23d;--amber-soft:#ffc23d22;--danger:#ff5a47;
  position:fixed;inset:0;z-index:2147483000;background:var(--bg);color:var(--fg);
  font-family:'Source Sans Pro',tahoma,sans-serif;font-size:16px;line-height:1.35;letter-spacing:normal;text-align:left;
  display:flex;flex-direction:column;gap:8px;overflow:hidden;color-scheme:dark;
  padding:max(8px,env(safe-area-inset-top,0px)) max(12px,env(safe-area-inset-right,0px)) max(10px,env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px));
  -webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}
.jx[hidden],.jx [hidden]{display:none!important}
.jx *{box-sizing:border-box}
.jx button{font-family:inherit}
.jx-col{width:100%;max-width:620px;margin:0 auto;display:flex;flex-direction:column;gap:8px;flex:1;min-height:0}
.jx-haut{display:flex;align-items:center;gap:10px}
.jx-titre{font-weight:700;font-size:22px;text-transform:uppercase;letter-spacing:.06em;color:var(--amber);
  text-shadow:0 0 16px #ffc23d66;white-space:nowrap}
.jx-titre span{color:var(--fg);text-shadow:none}
.jx-dots{position:relative;display:flex;gap:5px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none;padding:2px}/* une seule ligne qui défile : prêt pour 20 niveaux et plus */
.jx-dots::-webkit-scrollbar{display:none}
.jx-dots button{flex:none;width:30px;height:30px;border-radius:50%;border:1px solid var(--line);background:var(--panel);
  color:var(--muted);font-size:14px;font-weight:700;cursor:pointer;padding:0}
.jx-dots button[aria-current="true"]{border-color:var(--amber);color:var(--amber)}
.jx-dots button.fait{background:var(--amber-soft);color:var(--amber)}
.jx-dots button:disabled{opacity:.35;cursor:default}
.jx-fermer{width:38px;height:38px;flex:none;border-radius:50%;border:1px solid var(--line);background:var(--panel);
  color:var(--fg);font-size:20px;line-height:1;cursor:pointer;padding:0}
.jx-brief .jx-lvl{font-size:13px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;font-variant-numeric:tabular-nums}
.jx-brief .jx-nom{font-size:21px;font-weight:700}
.jx-brief p{margin:2px 0 0;color:var(--muted);max-width:60ch}
.jx-scene{position:relative;flex:1;min-height:120px;display:flex;align-items:center;justify-content:center}
.jx canvas{display:block;touch-action:manipulation;cursor:pointer;border-radius:14px}
.jx-statut{min-height:22px;text-align:center;font-weight:700;color:var(--muted)}
.jx-statut.ok{color:var(--amber)} .jx-statut.ko{color:var(--danger)}
.jx-barre{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.jx-mesures{font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}
.jx-btns{display:flex;gap:8px}
.jx-btn{border:1px solid var(--line);background:var(--panel);color:var(--fg);border-radius:10px;padding:8px 14px;
  font-size:15px;font-weight:700;cursor:pointer}
.jx-btn:hover{border-color:var(--muted)}
.jx-btn.jx-go{background:var(--amber);border-color:var(--amber);color:#1a1405}
.jx button:focus-visible,.jx canvas:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
.jx-gagne{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.jx-carte{pointer-events:auto;background:#0e1117e6;border:1px solid var(--amber);border-radius:16px;padding:20px 26px;
  text-align:center;display:flex;flex-direction:column;gap:8px;align-items:center;box-shadow:0 0 40px #ffc23d33;
  animation:jxPop .35s ease-out}
.jx-carte .jx-bravo{font-size:26px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--amber)}
.jx-etoiles{font-size:28px;letter-spacing:6px;color:var(--amber)} .jx-etoiles i{font-style:normal;color:var(--line)}
.jx-carte p{margin:0;color:var(--muted)}
@keyframes jxPop{from{transform:scale(.85);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.jx-carte{animation:none}}
@media (max-height:560px){.jx-brief p{display:none}.jx-brief .jx-nom{font-size:18px}}
html.jx-ouvert,html.jx-ouvert body{overflow:hidden}
/* bouton « Jouer » de la page (hors plein écran)
   Couleur PROPRE À CHAQUE JEU (22/10/2026) : champ "couleur" de listejeux.php, posé en variables --jx-… dans l'attribut
   style du bouton par styleJeu() (listejeux.php), appelé par jeux.php et jouer.php. Sans champ : le jaune ci-dessous.
   --jx-l1…l4 = la lueur avec 4 transparences (88, 66, cc, dd), calculées en PHP (pas de color-mix : vieux navigateurs). */
.jx-lancer{--jx-haut:#ffd166;--jx-bas:#ffb31a;--jx-relief:#c98a00;--jx-texte:#1a1405;
  --jx-l1:#ffc23d88;--jx-l2:#ffc23d66;--jx-l3:#ffc23dcc;--jx-l4:#ffc23ddd;
  display:inline-block;text-decoration:none;font-family:'Source Sans Pro',tahoma,sans-serif;font-size:26px;font-weight:700;
  padding:12px 34px;border:0;border-radius:14px;background:linear-gradient(var(--jx-haut),var(--jx-bas));color:var(--jx-texte);cursor:pointer;
  box-shadow:0 4px 0 var(--jx-relief),0 0 22px var(--jx-l1);letter-spacing:.03em}
.jx-lancer:link,.jx-lancer:visited,.jx-lancer:hover,.jx-lancer:active{color:var(--jx-texte);text-decoration:none}/* sinon la couleur des liens de global.css passe devant */
.jx-lancer:hover{box-shadow:0 4px 0 var(--jx-relief),0 0 34px var(--jx-l3)}
.jx-lancer:active{transform:translateY(3px);box-shadow:0 1px 0 var(--jx-relief),0 0 22px var(--jx-l1)}
.jx-lancer:focus-visible{outline:3px solid #135;outline-offset:3px}
/* « respire » : grossit et brille lentement, s'arrête au survol et pour qui demande moins d'animations */
.jx-respire{animation:jxRespire 2.6s ease-in-out infinite}
.jx-respire:hover,.jx-respire:focus-visible{animation-play-state:paused}
@keyframes jxRespire{0%,100%{transform:scale(1);box-shadow:0 4px 0 var(--jx-relief),0 0 16px var(--jx-l2)}
  50%{transform:scale(1.07);box-shadow:0 4px 0 var(--jx-relief),0 0 38px var(--jx-l4)}}
@media (prefers-reduced-motion:reduce){.jx-respire{animation:none}}
/* « ↺ Recommencer au niveau 1 » : lien discret sous le bouton Lancer/Reprendre (posé par jeux.js) */
.jx-raz{display:block;margin:10px auto 0;padding:4px 8px;background:none;border:0;cursor:pointer;
  font-family:'Source Sans Pro',tahoma,sans-serif;font-size:15px;color:#5b7088;text-decoration:underline}
.jx-raz:hover{color:#135}
.jx-raz[hidden]{display:none}
/* image de partage en tête de carte (page liste des jeux) */
.jx-vignette{display:block;width:100%;height:auto;border-radius:10px;margin-bottom:6px}