/* Des chiffres et des lettres — pour grand écran de classe */
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(1200px 700px at 50% -10%, #1d4e89, #0d2b52 70%);
  color: #fff;
  font-family: "Segoe UI", "Trebuchet MS", Verdana, sans-serif;
  text-align: center;
  padding: 2vh 3vw 1vh;
}
.cache { display: none !important; }
.vue { max-width: 1200px; margin: 0 auto; }

/* ---------- Accueil ---------- */
.titre-jeu {
  font-size: clamp(2.6rem, 8vw, 5.2rem);
  line-height: 1.05;
  margin: 6vh 0 1vh;
  text-shadow: 0 4px 0 rgba(0,0,0,.35);
  letter-spacing: 1px;
}
.sous-titre { font-size: clamp(1.2rem, 3vw, 1.9rem); font-style: italic; opacity: .85; margin: 0 0 5vh; }
.choix-epreuves { display: flex; gap: 3vw; justify-content: center; flex-wrap: wrap; margin-bottom: 5vh; }
.gros-bouton {
  cursor: pointer; border: none; border-radius: 20px;
  width: min(320px, 80vw); padding: 34px 10px 26px;
  background: linear-gradient(#2f6fd0, #1b4a92);
  color: #fff; box-shadow: 0 8px 0 #0d2c57, 0 14px 24px rgba(0,0,0,.4);
  font-family: inherit;
}
.gros-bouton:active { transform: translateY(4px); box-shadow: 0 4px 0 #0d2c57; }
.gb-icone { display: block; font-size: clamp(3rem, 8vw, 4.6rem); font-weight: 800; letter-spacing: 6px; }
.gb-nom { display: block; font-size: clamp(1.4rem, 3.5vw, 2rem); font-weight: 700; letter-spacing: 4px; margin-top: 8px; }

/* ---------- Barres de navigation ---------- */
.barre {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 3vh;
}
.nav-titre { font-size: clamp(1.1rem, 3vw, 1.8rem); font-weight: 800; letter-spacing: 2px; }
.nav-fantome { width: 110px; }
button { cursor: pointer; font-family: inherit; border: none; border-radius: 14px; }
button:disabled { opacity: .4; cursor: default; }
.nav {
  background: rgba(255,255,255,.14); color: #fff;
  font-size: 1rem; padding: 10px 16px; min-width: 110px;
}
.moyen {
  background: rgba(255,255,255,.14); color: #fff;
  font-size: clamp(1rem, 2.2vw, 1.25rem); padding: 13px 22px;
}
.gros {
  background: #ffd75e; color: #241a08; font-weight: 800;
  font-size: clamp(1.15rem, 2.6vw, 1.5rem); padding: 15px 28px;
}
.reveler { background: #1f8a4c; font-weight: 700; }

/* ---------- Tuiles ---------- */
.tuiles { display: flex; flex-wrap: wrap; gap: 1.2vw; justify-content: center; min-height: 10px; }
.tuile {
  background: linear-gradient(#2f6fd0, #1b4a92);
  border-radius: 12px;
  box-shadow: 0 5px 0 #0d2c57, 0 8px 16px rgba(0,0,0,.35);
  font-weight: 800; color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.tuile-lettre { width: clamp(52px, 8.2vw, 88px); height: clamp(68px, 11vw, 116px); font-size: clamp(2.1rem, 5.5vw, 3.7rem); }
.tuile-nombre { min-width: clamp(84px, 12vw, 140px); height: clamp(68px, 11vw, 116px); padding: 0 10px; font-size: clamp(2rem, 5.5vw, 3.7rem); }
.message-vide { font-size: 1.2rem; opacity: .7; font-style: italic; }

/* ---------- Cible ---------- */
.cible-zone { margin-bottom: 2.5vh; }
.cible-etiquette { display: block; font-size: 1.05rem; letter-spacing: 5px; opacity: .8; margin-bottom: 6px; }
.cible {
  display: inline-block; background: #ffd83d; color: #141414;
  font-size: clamp(3rem, 10vw, 5.6rem); font-weight: 800;
  padding: 2px 38px; border-radius: 16px; box-shadow: 0 6px 0 #b7950b, 0 10px 20px rgba(0,0,0,.35);
  min-width: 240px;
}

/* ---------- Chrono ---------- */
.chrono-zone { margin: 3.5vh auto 2.5vh; max-width: 760px; }
.chrono { font-size: clamp(3rem, 9vw, 5rem); font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; }
.chrono.bientot { color: #ffb3b3; }
.barre-temps { height: 14px; background: rgba(255,255,255,.18); border-radius: 999px; overflow: hidden; margin-top: 10px; }
.barre-remplie { height: 100%; width: 0; background: #ffd83d; border-radius: 999px; transition: width .25s linear; }
.temps-ecoule { font-size: clamp(1.3rem, 3vw, 1.8rem); font-weight: 800; color: #ffb3b3; margin: 10px 0 0; }

.controles { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 3vh; }

/* ---------- Solution révélée ---------- */
.solution {
  background: rgba(255,255,255,.10);
  border: 2px solid rgba(255,255,255,.35);
  border-radius: 16px; padding: 20px 22px;
  max-width: 920px; margin: 0 auto 3vh;
}
.solution h2 { margin: 0 0 12px; font-size: clamp(1.4rem, 3.4vw, 2rem); }
.mots-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.mot-chip {
  background: #fff; color: #12325e; border-radius: 999px;
  padding: 7px 16px; font-weight: 800; letter-spacing: 1.5px;
  font-size: clamp(1.05rem, 2.6vw, 1.45rem);
}
.etapes { list-style: none; margin: 0; padding: 0; font-size: clamp(1.3rem, 3.4vw, 2rem); font-weight: 700; }
.etapes li { padding: 4px 0; font-variant-numeric: tabular-nums; }
.solution .note-solution { opacity: .85; font-size: 1.05rem; margin: 10px 0 0; }

/* ---------- Paramètres ---------- */
.params { max-width: 680px; margin: 0 auto 3vh; text-align: left; }
.param {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: rgba(255,255,255,.08); border-radius: 12px;
  padding: 14px 18px; margin-bottom: 12px; font-size: 1.1rem;
}
.param select, .param input[type="number"] {
  font-size: 1.1rem; padding: 8px 10px; border-radius: 8px; border: none; min-width: 90px; text-align: center;
}
.param.case { justify-content: flex-start; }
.param.case input { width: 24px; height: 24px; flex: none; }
.note { opacity: .8; font-style: italic; }

/* ---------- Pied de page ---------- */
footer { margin: 5vh 0 2vh; opacity: .65; font-size: .95rem; }
footer a { color: inherit; }

/* ---------- Calculatrice à tuiles (chiffres) ---------- */
.calcul-indice { font-size: 1.1rem; opacity: .85; margin: 1vh 0 1.5vh; }
.ops { display: flex; gap: 12px; justify-content: center; margin-bottom: 1vh; }
.op {
  width: 76px; height: 64px; border-radius: 14px;
  background: #ffd75e; color: #241a08;
  font-size: 2.1rem; font-weight: 800; line-height: 1;
}
.op.armee { background: #ff9f1c; box-shadow: 0 0 0 4px #fff; }
.message-calcul { min-height: 1.5em; margin: 4px 0; color: #ffb3b3; font-weight: 700; font-size: 1.1rem; }
.tuile.cliquable { cursor: pointer; }
.tuile.selectionnee { box-shadow: 0 0 0 4px #ffd83d, 0 5px 0 #0d2c57; transform: scale(1.07); }
.tuile.resultat { background: linear-gradient(#3aa655, #1f7a3d); box-shadow: 0 5px 0 #14532a, 0 8px 16px rgba(0,0,0,.35); }
.tuile.resultat.selectionnee { box-shadow: 0 0 0 4px #ffd83d, 0 5px 0 #14532a; }
.tuile.trouve { background: linear-gradient(#ffd83d, #ffb703); color: #141414; box-shadow: 0 0 0 4px #fff, 0 8px 16px rgba(0,0,0,.35); }
.bandeau-bon { font-size: clamp(1.7rem, 4.5vw, 2.6rem); font-weight: 800; color: #ffd83d; margin: 10px 0; }
#etapes-calcul { margin-bottom: 2vh; }
.controles-calcul { margin-top: 1vh; }

/* ---------- Groupes de mots (révélation des lettres) ---------- */
.groupe-mots { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; margin: 10px 0; }
.groupe-len { font-weight: 800; font-size: 1.15rem; opacity: .9; min-width: 92px; text-align: right; }