/* Maquette Mission 2025.
   Le jeu occupe tout l'écran : décor plein cadre, texte en surimpression,
   interactions directement sur l'illustration. */

:root {
  --nuit: #05101a;
  --menthe: #7fd8c0;
  --or: #f2b441;
  --texte: #eef4f2;
  --texte-doux: #a9bfcb;
  --rouge: #c9584f;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--nuit);
  color: var(--texte);
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.5;
  overflow: hidden;
}

:focus-visible { outline: 3px solid var(--or); outline-offset: 3px; }
[tabindex="-1"]:focus { outline: none; }

/* ---------- cadre de jeu ---------- */

.jeu {
  height: 100%;
  display: grid;
  place-items: center;
}
.zone-jeu {
  position: relative;
  width: min(100vw, 177.78vh);
}
.cadre {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #081a28;
}
/* Pendant l'épisode, tout le décor est explorable : le curseur ne trahit rien. */
.cadre.est-en-jeu { cursor: crosshair; }

.scene { position: absolute; inset: 0; }
.scene svg { display: block; width: 100%; height: 100%; }

.voile {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(5, 16, 26, .95) 34%, rgba(5, 16, 26, .78) 100%);
}

/* ---------- zones cliquables sur le décor ---------- */

/* Les zones examinables ne sont jamais signalées : c'est au joueur de fouiller.
   Elles restent des boutons réels, donc atteignables au clavier. */
.zone {
  position: absolute;
  padding: 0;
  border: 0;
  background: none;
  cursor: inherit;
}

/* ---------- animations des deux tableaux ---------- */

/* Le rideau se lève et découvre le local technique. */
#rideau { transition: transform 1.8s cubic-bezier(.5, 0, .2, 1); }
#rideau.est-leve { transform: translateY(-184px); }

/* ---------- feuille de route, vue de près ---------- */

.papier {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -52%) rotate(-1.2deg);
  width: min(78%, 460px);
  filter: drop-shadow(0 22px 40px rgba(0, 0, 0, .6));
  text-align: center;
}
.papier svg { display: block; width: 100%; height: auto; }
.papier .commande {
  margin-top: 10px;
  transform: rotate(1.2deg);
}

/* ---------- boîtier à code ---------- */

.clavier {
  position: absolute;
  right: 4%;
  top: 12%;
  width: min(86%, 260px);
  padding: clamp(12px, 1.8vw, 18px);
  border: 1px solid rgba(127, 216, 192, .45);
  border-radius: 10px;
  background: rgba(6, 22, 33, .96);
  text-align: center;
}
.clavier__titre {
  margin: 0 0 8px;
  font-size: clamp(9px, 1.2vw, 12px);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--menthe);
}
.clavier__ecran {
  margin: 0 0 12px;
  padding: 8px;
  border-radius: 5px;
  background: #04121b;
  color: #3fb98a;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: clamp(20px, 2.6vw, 28px);
  letter-spacing: .3em;
}
.clavier__touches {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.touche {
  min-height: 40px;
  border: 1px solid rgba(238, 244, 242, .25);
  border-radius: 5px;
  background: #12384f;
  color: var(--texte);
  font: inherit;
  font-size: clamp(14px, 1.8vw, 18px);
  cursor: pointer;
}
.touche:hover { background: #1a5070; }
.touche--effacer { color: var(--texte-doux); }
.clavier__retour { margin: 10px 0; min-height: 1.4em; font-size: clamp(10px, 1.3vw, 13px); color: var(--or); }
.clavier .commande { width: 100%; }

/* ---------- affichage tête haute ---------- */

.hud {
  position: absolute;
  top: 0; left: 0; right: 0;
  padding: clamp(8px, 1.6vw, 16px) clamp(10px, 2vw, 22px);
  background: linear-gradient(rgba(5, 16, 26, .75), transparent);
  font-size: clamp(11px, 1.4vw, 14px);
}
.hud__compteur { display: flex; align-items: center; gap: 10px; max-width: 460px; }
.hud__piste {
  flex: 1;
  height: 10px;
  border: 1px solid rgba(127, 216, 192, .5);
  border-radius: 5px;
  overflow: hidden;
}
.hud__jauge {
  display: block;
  height: 100%;
  width: 78%;
  background: var(--menthe);
  transition: width .7s ease;
}
.hud.est-en-baisse .hud__jauge { background: var(--rouge); }
.hud__eau {
  margin: 5px 0 0;
  color: #f0a9a3;
  font-size: clamp(10px, 1.3vw, 13px);
}
.hud__eau strong { font-variant-numeric: tabular-nums; }

/* ---------- question de sensibilisation ---------- */

.quiz__choix { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(8px, 1.4vw, 16px); }
.quiz__bouton {
  min-height: 44px;
  padding: clamp(9px, 1.3vw, 13px) clamp(14px, 2.2vw, 24px);
  border: 1px solid rgba(127, 216, 192, .45);
  border-radius: 6px;
  background: rgba(9, 26, 40, .8);
  color: var(--texte);
  font: inherit;
  font-size: clamp(13px, 1.6vw, 17px);
  cursor: pointer;
}
.quiz__bouton:hover:not([disabled]) { border-color: var(--menthe); background: rgba(18, 48, 74, .9); }
.quiz__bouton[disabled] { opacity: .4; cursor: default; }
.quiz__retour { margin: 10px 0 0; min-height: 1.4em; color: #f0a9a3; font-size: clamp(11px, 1.4vw, 15px); }

.recompense {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 22px);
  margin-bottom: clamp(8px, 1.4vw, 16px);
}
.badge { width: clamp(56px, 9vw, 90px); height: auto; flex: none; }

/* ---------- texte de scène ---------- */

.dialogue {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: clamp(40px, 8vw, 90px) clamp(16px, 3vw, 40px) clamp(14px, 2.5vw, 30px);
  background: linear-gradient(transparent, rgba(5, 16, 26, .92) 42%);
}
.dialogue h1 {
  margin: 0 0 6px;
  font-size: clamp(18px, 3.2vw, 34px);
  line-height: 1.15;
}
.dialogue p { margin: 0; max-width: 62ch; }
#scene-corps { font-size: clamp(12px, 1.7vw, 18px); color: #dbe8e4; }
.dialogue__retour {
  margin-top: clamp(4px, .8vw, 10px) !important;
  min-height: 1.4em;
  color: var(--menthe);
  font-size: clamp(11px, 1.5vw, 16px);
}
.dialogue__indice {
  margin-top: clamp(2px, .5vw, 6px) !important;
  color: var(--or);
  font-size: clamp(11px, 1.4vw, 15px);
  opacity: .9;
}

.surtitre {
  margin: 0 0 4px;
  font-size: clamp(10px, 1.3vw, 13px);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--menthe);
}

/* ---------- vues plein cadre (accueil, carte, fin) ---------- */

.vue {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(6px, 1vw, 12px);
  padding: clamp(18px, 4vw, 52px);
  overflow: auto;
}
.vue--centre { align-items: flex-start; }
.vue h1 {
  margin: 0;
  font-size: clamp(24px, 5vw, 54px);
  line-height: 1.1;
}
.vue__texte { margin: 0; max-width: 54ch; font-size: clamp(12px, 1.7vw, 18px); color: #dbe8e4; }
.vue__note { margin: 0; font-size: clamp(10px, 1.3vw, 14px); color: var(--texte-doux); }

.bouton {
  align-self: flex-start;
  margin-top: clamp(8px, 1.4vw, 18px);
  min-height: 44px;
  padding: clamp(9px, 1.3vw, 14px) clamp(16px, 2.4vw, 28px);
  border: 0;
  border-radius: 6px;
  background: var(--or);
  color: #1a1206;
  font: inherit;
  font-size: clamp(13px, 1.6vw, 17px);
  font-weight: 600;
  cursor: pointer;
}
.bouton:hover { background: #ffc75c; }

/* liste des 5 jours */
.parcours {
  margin: clamp(6px, 1vw, 14px) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: clamp(5px, .8vw, 10px);
  max-width: 620px;
}
.etape__carte {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 44px;
  padding: clamp(7px, 1.2vw, 14px) clamp(10px, 1.6vw, 18px);
  border: 1px solid rgba(127, 216, 192, .3);
  border-radius: 6px;
  background: rgba(9, 26, 40, .8);
  color: var(--texte);
  font: inherit;
  font-size: clamp(12px, 1.5vw, 16px);
  text-align: left;
  cursor: pointer;
}
.etape__carte:hover:not([disabled]) { border-color: var(--menthe); }
.etape__carte[disabled] { color: var(--texte-doux); cursor: default; opacity: .75; }
.etape__jour { font-weight: 600; min-width: 58px; }
.etape__titre { flex: 1; }
.etape__statut { font-size: .88em; color: var(--texte-doux); }
.etape--jouable .etape__statut { color: var(--or); }

/* ---------- console de l'énigme ---------- */

.console {
  position: absolute;
  right: 3%;
  top: 26%;
  width: min(92%, 400px);
  padding: clamp(14px, 2.2vw, 24px);
  border: 1px solid rgba(127, 216, 192, .45);
  border-radius: 10px;
  background: rgba(6, 22, 33, .94);
}
.console__titre {
  margin: 0 0 10px;
  font-size: clamp(10px, 1.3vw, 13px);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--menthe);
}
.console label { display: block; margin-bottom: 10px; font-size: clamp(12px, 1.5vw, 16px); }
.console__ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.console input {
  width: 120px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid rgba(127, 216, 192, .45);
  border-radius: 6px;
  background: #041420;
  color: var(--or);
  font: inherit;
  font-size: clamp(18px, 2.4vw, 24px);
  font-weight: 600;
}
.console__unite { color: var(--texte-doux); }
.console .bouton { margin: 0; }
.console__retour { margin: 12px 0 0; min-height: 1.4em; font-size: clamp(12px, 1.5vw, 15px); }
.console__retour.est-juste { color: var(--menthe); }
.console__retour.est-faux { color: #f0a9a3; }

/* ---------- commandes discrètes ---------- */

/* Hors du cadre et en dernier dans le DOM : les écrans plein cadre
   ne peuvent plus recouvrir ces boutons. */
.commandes {
  position: absolute;
  top: clamp(8px, 1.6vw, 16px);
  right: clamp(10px, 2vw, 22px);
  z-index: 10;
  display: flex;
  gap: 8px;
}
.commande {
  min-height: 32px;
  padding: 6px 12px;
  border: 1px solid rgba(238, 244, 242, .35);
  border-radius: 5px;
  background: rgba(5, 16, 26, .6);
  color: var(--texte-doux);
  font: inherit;
  font-size: clamp(10px, 1.2vw, 13px);
  cursor: pointer;
}
.commande:hover { color: var(--texte); border-color: var(--texte); }


/* ---------- écrans étroits : le texte passe sous l'image ---------- */

@media (max-aspect-ratio: 1/1) {
  body { overflow: auto; }
  .jeu { min-height: 100%; }
  .zone-jeu { width: 100vw; }
  .dialogue {
    position: static;
    padding: 16px;
    background: var(--nuit);
  }
  .dialogue h1 { font-size: 21px; }
  #scene-corps, .dialogue__invite { font-size: 15px; }
  .surtitre { font-size: 12px; }
  .vue { position: static; padding: 18px 16px 26px; }
  .vue h1 { font-size: 27px; }
  .vue__texte { font-size: 15px; }
  .console { position: static; width: auto; margin: 12px 16px 0; }
  .voile { background: rgba(5, 16, 26, .82); }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition-duration: .001ms !important; }
}