/* ==============================
   Oxygen Edu — Styles Jeux (communs)
   ============================== */

/* Fond & conteneur (identiques au train) */
.ox-train-bg{
  background: radial-gradient(1000px 600px at 50% -200px,#1e293b,#0b1023 70%);
}
.ox-train{
  max-width:1100px; margin:0 auto; padding:clamp(16px,2vw,24px);

  /* PALETTE—contrastes renforcés */
  --text:#e9edf4;           /* texte principal (clair)   */
  --muted:#c7d0dd;          /* texte secondaire          */
  --subtle:#9aa6b2;         /* petites infos             */
  --onImg:#f1f5f9;          /* blanc sur image           */
  --accent:#a78bfa;         /* violet                    */
  --accent-2:#38bdf8;       /* bleu                      */
  --ok:#22c55e; --warn:#f59e0b; --err:#ef4444;

  --panel:rgba(255,255,255,.08);   /* +opaque pour lisibilité */
  --panel-2:rgba(2,6,23,.86);      /* bulle sur image         */
  --border:rgba(255,255,255,.22);  /* bordures plus visibles  */
  --radius:18px; --shadow:0 12px 30px rgba(0,0,0,.35);

  color:var(--text);
}

/* Panneaux / cartes */
.card,
.game-stage{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:clamp(16px,2vw,24px);
}

/* Titre fun */
.game-hero{ text-align:center; margin:6px 0 10px; }
.game-title{
  font-family:'Baloo 2', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size:clamp(1.9rem,3.1vw,2.6rem);
  color:#7dd3fc;
  text-shadow:0 2px 0 rgba(0,0,0,.35);
  margin:0;
}
.game-title span{ color:#f0abfc; }
.game-subtitle{
  margin:.25rem 0 1rem;
  color:var(--muted);
}

/* HUD */
.game-hud{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  margin-bottom:.75rem
}
.hud-title{ margin:0; font-size:1.1rem; color:var(--text) }
.coins{
  display:inline-flex; align-items:center; gap:.5rem; padding:.35rem .7rem;
  border:1px solid var(--border); border-radius:999px;
  background:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.06));
  color:var(--text);
}
.coins img{ width:22px; height:22px }

/* Grille de villes */
.map-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px,1fr));
  gap:1rem;
}
.city{
  border:1px solid var(--border);
  border-radius:16px;
  padding:.75rem;
  background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.05));
  text-align:left;
  box-shadow:var(--shadow);
  color:var(--text);
}
.city img{ width:100%; height:120px; object-fit:contain; border-radius:12px; margin-bottom:.5rem }
.city h3{ margin:.25rem 0; font-size:1rem; color:#f5f7ff }
.city small{ color:var(--subtle) }
.city .actions{ margin-top:.5rem; display:flex; gap:.5rem }
.city .btn,
.city .btn-primary{
  padding:.45rem .7rem; border-radius:12px; border:1px solid var(--border);
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
  color:#06101f; font-weight:800; box-shadow:0 6px 0 rgba(0,0,0,.25);
  cursor:pointer; transition:transform .12s ease, filter .12s ease;
}
.city .btn:hover{ transform:translateY(-1px); filter:brightness(1.03) }
.city .btn:active{ transform:translateY(1px); box-shadow:0 3px 0 rgba(0,0,0,.25) }

/* =======================
   Scène de niveau (refonte)
   ======================= */
.level-scene{
  position:relative; overflow:hidden; border-radius:18px; box-shadow:var(--shadow);
  min-height: clamp(520px, 62vh, 820px);
  background:#0b1320;
}

/* Image de fond : plein cadre, lissée, légèrement estompée */
.level-scene img.bg{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  image-rendering:auto;               /* anti-crénelé */
  filter: saturate(.95) contrast(.95) brightness(.88);
  opacity:.32;                         /* on laisse lire le texte par-dessus */
  transform: translateZ(0);            /* poussée GPU */
  will-change: transform, filter;
}

/* Personnage (optionnel) discret */
.level-scene .character{
  position:absolute; bottom:8%; left:5%; width:min(28%,220px);
  opacity:.55;
  filter:drop-shadow(0 12px 22px rgba(0,0,0,.45))
}

/* Bulle de question : overlay centré & lisible */
.level-scene .bubble{
  position:absolute;
  left:50%; transform: translateX(-50%);
  top: clamp(18px, 5vh, 40px);
  width: min(640px, 94vw);
  background:var(--panel-2);
  border:1px solid var(--border);
  border-radius:18px;
  padding: clamp(14px, 1.6vw, 18px);
  color:var(--onImg);
  backdrop-filter:saturate(120%) blur(8px);
  box-shadow:0 18px 40px rgba(0,0,0,.45);
}
.level-scene .bubble .lead{
  margin:0 0 .65rem 0;
  font-weight:800;
  color:var(--onImg);
  text-shadow:0 1px 0 rgba(0,0,0,.4);
  font-size: clamp(20px, 2.4vw, 26px);
  line-height:1.45;
}

/* Options : gros boutons touch-friendly */
.options{
  display:grid; gap:10px; grid-template-columns: 1fr;
  margin-top:.5rem;
}
@media (min-width: 680px){
  .options{ gap:12px; }
}
.btnOpt{
  display:flex; align-items:center; gap:10px;
  width:100%; height: clamp(54px, 6vh, 64px);
  padding: 10px 14px;
  border-radius: 14px;
  border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
  color:#f1f5ff;                       /* ✅ texte clair lisible */
  font-weight:800;
  font-size: clamp(17px, 2vw, 19px);
  cursor:pointer;
  transition: transform .06s ease, filter .06s ease, color .15s ease, border-color .15s ease;
}
.btnOpt:hover{
  transform:translateY(-1px);
  border-color:rgba(255,255,255,.3);
  background:linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.08));
}
.btnOpt[disabled]{ opacity:.75; cursor:not-allowed }
.btnOpt img{
  width: clamp(26px, 2.2vw, 32px);
  height: clamp(26px, 2.2vw, 32px);
  object-fit:contain;
}

/* Bouton “Retour carte” */
#toMap,
.level-scene .bubble .btn{
  margin-top:.5rem;
  padding:.5rem .8rem;
  border-radius:12px;
  border:1px solid var(--border);
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
  color:#06101f; font-weight:800;
  box-shadow:0 6px 0 rgba(0,0,0,.25);
  cursor:pointer;
}
#toMap:hover{ filter:brightness(1.05) }

/* Feedback messages */
.feedback{ margin-top:.75rem; font-weight:700 }
.feedback.good{ color:#22d3ee; text-shadow:0 1px 0 rgba(0,0,0,.35) }
.feedback.bad{  color:#f472b6; text-shadow:0 1px 0 rgba(0,0,0,.35) }

/* Petites améliorations de lisibilité sur images */
.level-scene .caption,
.level-scene .overlay-text{
  position:absolute; left:0; right:0; bottom:6px; text-align:center;
  color:var(--onImg); text-shadow:0 1px 2px rgba(0,0,0,.6);
}

/* Anti-saccade générique sur toutes les images du contenu */
#content img{
  image-rendering:auto;
  -ms-interpolation-mode:bicubic; /* harmless ailleurs, utile IE legacy */
}

/* ===== Header/Footers pour les Jeux (Oxygen Edu) ===== */

.edu .site-header--jeux{
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border-bottom: 1px solid rgba(255,255,255,.15);
  position: sticky; top: 0; z-index: 20;
  backdrop-filter: blur(6px) saturate(120%);
}
.edu .site-header--jeux .wrap{
  max-width: 1100px; margin: 0 auto; padding: .75rem 1rem;
  display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: center;
}
.edu .site-header--jeux .brand{ display:flex; align-items:center; gap:.6rem; text-decoration:none; }
.edu .site-header--jeux .brand img{ width:40px; height:40px; border-radius:10px; }
.edu .site-header--jeux .wordmark{ color:#e9edf4; font-weight:600; }
.edu .site-header--jeux .wordmark strong{ font-weight:800; }

/* Menu desktop */
.edu .site-header--jeux .menu{ display:flex; align-items:center; gap:1rem; }
.edu .site-header--jeux .menu-inline{ list-style:none; display:flex; gap:.5rem; margin:0; padding:0; }
.edu .site-header--jeux .menu-inline a{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.45rem .8rem; border-radius:999px;
  background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.22);
  color:#f1f5ff; text-decoration:none; font-weight:700;
}
.edu .site-header--jeux .menu-inline a:hover{ filter:brightness(1.06); }
.edu .site-header--jeux .btn-logout{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.45rem .9rem; border-radius:999px; margin-left:.25rem;
  background:linear-gradient(90deg, #a78bfa, #38bdf8);
  color:#06101f; font-weight:800; text-decoration:none;
  border:1px solid rgba(255,255,255,.22);
}

/* Menu mobile (sans JS via <details>) */
.edu .site-header--jeux .menu-drawer{ display:none; }
.edu .site-header--jeux .menu-drawer[open] .menu-list{ display:block; }
.edu .site-header--jeux .menu-toggle{
  display:inline-flex; align-items:center; gap:.3rem; cursor:pointer;
  padding:.45rem .8rem; border-radius:10px;
  border:1px solid rgba(255,255,255,.22);
  background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
  color:#f1f5ff; font-weight:700;
}
.edu .site-header--jeux .menu-drawer .menu-list{
  list-style:none; margin:.6rem 0; padding:.4rem; display:none;
  background:rgba(2,6,23,.86); border:1px solid rgba(255,255,255,.22);
  border-radius:12px;
}
.edu .site-header--jeux .menu-drawer .menu-list a{
  display:block; padding:.55rem .7rem; color:#f1f5ff; text-decoration:none; border-radius:9px;
}
.edu .site-header--jeux .menu-drawer .menu-list a:hover{ background:rgba(255,255,255,.08); }

/* Responsive : on bascule en tiroir <details> sous 860px */
@media (max-width: 860px){
  .edu .site-header--jeux .menu-inline{ display:none; }
  .edu .site-header--jeux .menu-drawer{ display:block; }
  .edu .site-header--jeux .btn-logout{ margin-left:.5rem; }
}

/* Footer */
.edu .site-footer--jeux{
  margin-top: 2rem;
  border-top: 1px solid rgba(255,255,255,.15);
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.04));
}
.edu .site-footer--jeux .wrap{
  max-width:1100px; margin:0 auto; padding:1rem; text-align:center;
  color:#c7d0dd;
}
.edu .site-footer--jeux p{ margin:0; font-weight:600; }
/* === Fond global des pages éducatives (Oxygen Edu) === */
body {
  background: radial-gradient(1000px 600px at 50% -200px, #1e293b, #0b1023 70%);
  background-attachment: fixed;
  color: #f8fafc; /* texte clair pour contraste */
  min-height: 100vh;
}

main, section, .jeu-container, .ox-wrapper {
  background: transparent !important; /* empêche les blocs internes de remettre du blanc */
}
.btn-skip {
  display: inline-block;
  margin-top: 0.5rem;
  background: #38bdf8;
  color: #0b1023;
  padding: 0.4rem 0.8rem;
  border-radius: 0.5rem;
  font-weight: 600;
  transition: background 0.3s;
}
.btn-skip:hover {
  background: #0ea5e9;
  color: white;
}
/* === Lisibilité améliorée pour le jeu de compréhension de texte === */
#texte-a-lire {
  font-size: 1.35rem;       /* ≈ 22px : texte plus grand */
  line-height: 1.6;         /* espacement plus agréable */
  margin-bottom: 1.2rem;
  color: #e2e8f0;           /* gris clair lisible sur fond sombre */
}

#questionsWrap label {
  display: block;
  font-size: 1.25rem;       /* ≈ 20px */
  font-weight: 600;
  margin-bottom: 0.4rem;
  color: #f8fafc;
}

#questionsWrap select,
#questionsWrap input[type="text"] {
  font-size: 1.15rem;
  padding: 0.5rem 0.6rem;
  border-radius: 0.5rem;
  background-color: #1e293b;
  color: #f1f5f9;
  border: 1px solid #334155;
}

#questionsWrap select:focus,
#questionsWrap input[type="text"]:focus {
  outline: 2px solid #38bdf8;
  outline-offset: 2px;
}

.feedback, #feedback {
  font-size: 1.2rem;
  font-weight: 600;
  margin-top: 1rem;
}

button,
input[type="submit"],
#toMap {
  font-size: 1.1rem;
}

/* Agrandissement spécifique sur mobile */
@media (max-width: 768px) {
  #texte-a-lire,
  #questionsWrap label {
    font-size: 1.4rem;
  }

  #questionsWrap select,
  #questionsWrap input[type="text"] {
    font-size: 1.25rem;
  }
}