/* Styles partagés des jeux « express » (moteur js/jeu-express.js) */
:root{ --ink:#111; }
body{ font-family:system-ui,"Segoe UI",Roboto,Arial,sans-serif; margin:0; background:#f5f7fb; color:var(--ink); }
header{ position:sticky; top:0; z-index:3; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px;
  padding:10px 14px; border-bottom:1px solid rgba(0,0,0,.08);
  background:linear-gradient(135deg,var(--accent) 0%,var(--accent-2) 100%); color:#111; }
header .left{ justify-self:start; font-weight:800; display:flex; gap:10px; align-items:center }
header .center{ justify-self:center; display:flex; gap:12px; flex-wrap:wrap; align-items:center }
header .right{ justify-self:end; display:flex; gap:10px; align-items:center }
.chip{ display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; background:#fff; color:#111; box-shadow:0 1px 3px rgba(0,0,0,.08); font-weight:600 }
.bouton-header{ border-radius:16px; font-weight:bold; padding:10px 12px; text-decoration:none; border:none; cursor:pointer; background:#fff; color:#111; box-shadow:0 1px 2px rgba(0,0,0,.06) }
.bouton-header[disabled]{ opacity:.5; cursor:not-allowed }
.container{ max-width:820px; margin:18px auto; padding:0 12px }
.card{ background:#fff; color:#111; border:1px solid rgba(0,0,0,.08); border-radius:14px; padding:18px; margin:12px 0; box-shadow:0 8px 18px rgba(0,0,0,.06) }
body[class*="theme-"] .card{ background:rgba(255,255,255,.9); backdrop-filter:blur(8px) }
.q-statement{ font-weight:800; font-size:clamp(18px,3.6vw,26px); text-align:center; padding:14px 12px; border-radius:16px; background:#fff; border:1px solid rgba(0,0,0,.08); line-height:1.35 }
.q-statement code{ font-weight:900; background:rgba(0,0,0,.05); padding:2px 10px; border-radius:10px }
.q-mount{ display:flex; flex-direction:column; align-items:center; gap:12px; margin-top:14px }
.answer-row{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:14px }
input.rep{ font-size:1.2em; padding:9px 12px; width:120px; border:2px solid #cbd5e1; border-radius:12px; text-align:center }
.inline-inputs{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; justify-content:center; font-weight:700; font-size:1.15em }
.feedback{ margin-top:14px; text-align:center; font-weight:700; min-height:1.4em }
.feedback.ok{ color:#14803a } .feedback.ko{ color:#b4232f } .feedback.info{ color:#334155; font-weight:600 }
.feedback.info div{ margin:2px 0 }
.data-chips{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center }
.data-chips .v{ background:#eef2f7; border:1px solid rgba(0,0,0,.1); border-radius:10px; padding:6px 12px; font-weight:800; font-size:1.1em }
.hint{ color:#334155; text-align:center; margin:0 }
svg.repere{ background:#fff; border:1px solid rgba(0,0,0,.1); border-radius:12px; max-width:100%; height:auto; touch-action:none }
progress{ width:170px; height:12px }
.shake{ animation:shake .2s linear 1 }
@keyframes shake{ 0%{transform:translateX(0)} 25%{transform:translateX(-4px)} 50%{transform:translateX(4px)} 75%{transform:translateX(-2px)} 100%{transform:translateX(0)} }