/* style.css
   L'apparence, et seulement l'apparence.
   Aucune couleur n'est ecrite ailleurs que dans les variables ci-dessous :
   changer l'ambiance de l'appli, c'est changer ces lignes.

   Les noms suivent le voyageur, pas le forgeron : --argile et --ambre sont
   pris a la cape du personnage et aux ciels de fin de jour des decors
   (images/lieux/*_loin), pas a la forge. --braise et --or existaient avant
   que le jeu ne raconte une marche -- voir la meme correction faite aux
   repliques dans world.js le 05/08/2026. */
:root {
  --nuit: #17110f;
  --nuit-2: #211815;
  --nuit-3: #2c211c;
  --argile: #e2703c;
  --ambre: #f0c874;
  --texte: #f5ece4;
  --texte-doux: #b0998c;
  --bord: #3a2c26;
  --vert: #8fae6a;
  --rouge: #c0503f;

  --rayon: 10px;
  --large: 480px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: var(--nuit);
  color: var(--texte);
  font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

body {
  display: flex;
  flex-direction: column;
  max-width: var(--large);
  margin: 0 auto;
  border-left: 1px solid var(--bord);
  border-right: 1px solid var(--bord);
}

h1 { font-size: 1.5rem; font-weight: 600; line-height: 1.25; }
h2 { font-size: 1.25rem; font-weight: 600; }

.sur-titre {
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .68rem;
  color: var(--argile);
  font-weight: 600;
}

.aide { color: var(--texte-doux); font-size: .875rem; }
.aide.petit { font-size: .78rem; }
.erreur { color: var(--rouge); font-size: .85rem; }
.centre { text-align: center; }

/* ----------------------------------------------------------- bandeau haut */

.bandeau {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: calc(.7rem + env(safe-area-inset-top)) 1rem .7rem;
  border-bottom: 1px solid var(--bord);
  background: var(--nuit-2);
}

.bandeau-gauche, .bandeau-droite { display: flex; align-items: center; gap: .5rem; }
.bandeau strong { font-size: 1.05rem; font-variant-numeric: tabular-nums; }

/* Une piece de monnaie ramassee sur la route, pas frappee a l'enclume : pas
   de bordure bronze ni de reflet en relief, juste un disque chaud pose sur
   un lisere sombre. */
.jeton {
  width: 14px; height: 14px;
  background: var(--ambre);
  border: 1px solid color-mix(in srgb, var(--ambre) 45%, var(--nuit));
  border-radius: 50%;
}

/* Pas de bordure ni de fond : un badge qui a la meme chrome que les boutons
   d'a cote se laisse cliquer, et celui-la ne fait rien. C'est du texte. */
.serie {
  font-size: .74rem;
  color: var(--texte-doux);
}
.serie.chaude { color: var(--ambre); }

/* ------------------------------------------------------------------- vues */

main { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.vue { padding: 1rem 1rem 2rem; display: flex; flex-direction: column; gap: 1rem; }
.vue[hidden] { display: none; }
.entete-vue { display: flex; flex-direction: column; gap: .35rem; }

/* --------------------------------------------------------------- la scene */

.scene {
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  overflow: hidden;
  background: var(--nuit-2);
  line-height: 0;
}

#toile {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  display: block;
  /* Le canvas est dimensionne en pixels reels par le code, d'apres cette
     boite et la densite de l'ecran. Ne pas lui donner de width/height en
     attribut HTML : ils seraient ecrases au premier rendu. */
  background: #f7c3b0;
}

.lieu { text-align: center; }
.lieu h2 { color: var(--ambre); }

/* ------------------------------------------------------------- le minuteur */

.minuteur { text-align: center; display: flex; flex-direction: column; gap: .25rem; }

.phase {
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: .7rem;
  color: var(--texte-doux);
}

.chrono {
  font-family: "Consolas", "SF Mono", ui-monospace, monospace;
  font-size: 3.6rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}
.chrono.travail { color: var(--argile); }
.chrono.pause { color: var(--vert); }
.chrono.suspendu { opacity: .45; }

/*
  Le decompte vers la prochaine prime, sous le chrono.

  IL DOIT RESTER PLUS PETIT ET PLUS PALE QUE LE CHRONO. C'est une information
  sur ce qui approche, pas une duree a tenir : lui donner le meme poids visuel
  reintroduirait a l'ecran l'engagement qu'on vient justement de retirer du jeu.
  Sa hauteur est reservee meme quand il est vide, sinon le bloc entier sautille
  au demarrage et a l'arret de chaque marche.
*/
.prime {
  font-size: .78rem;
  color: var(--ambre);
  min-height: 1.3em;
  letter-spacing: .04em;
  opacity: .85;
}

.replique { font-size: .84rem; color: var(--texte-doux); min-height: 1.4em; font-style: italic; }

.commandes { display: flex; flex-direction: column; gap: .5rem; }

/* ------------------------------------------------------------------ jauges */

.jauge {
  height: 8px;
  background: var(--nuit-3);
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid var(--bord);
}
.jauge-remplie {
  height: 100%;
  width: 0%;
  background: var(--argile);
  transition: width .45s ease;
}
.progression { display: flex; flex-direction: column; gap: .4rem; }

/* ----------------------------------------------------------------- boutons */

.bouton {
  font: inherit;
  font-weight: 600;
  padding: .85rem 1rem;
  border-radius: var(--rayon);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .06s ease, background .15s ease, opacity .15s ease;
  color: var(--texte);
  background: var(--nuit-3);
}
.bouton:active { transform: translateY(1px); }
.bouton:disabled { opacity: .4; cursor: not-allowed; }

.bouton.principal { background: var(--argile); color: #1a0d09; }
.bouton.fantome { background: transparent; border-color: var(--bord); color: var(--texte-doux); }
.bouton.danger { background: transparent; border-color: var(--rouge); color: var(--rouge); margin-top: .5rem; }
.bouton.icone { padding: .3rem .6rem; font-size: .72rem; background: transparent; border-color: var(--bord); color: var(--texte-doux); }
.bouton.icone.coupe { opacity: .45; text-decoration: line-through; }

/* ---------------------------------------------------------------- objectif */

#objectif-vide, #objectif-plein { display: flex; flex-direction: column; gap: 1rem; }
#objectif-vide[hidden], #objectif-plein[hidden] { display: none; }

.etapes { list-style: none; display: flex; flex-direction: column; gap: .5rem; }

.etape {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .8rem;
  background: var(--nuit-2);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
}
.etape.faite { border-color: var(--vert); }
.etape.faite .etape-texte { color: var(--texte-doux); text-decoration: line-through; }

.case {
  flex: 0 0 auto;
  width: 24px; height: 24px;
  border: 2px solid var(--bord);
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  display: grid;
  place-items: center;
  color: transparent;
  font-weight: 700;
  font-size: .9rem;
}
.etape.faite .case { border-color: var(--vert); background: var(--vert); color: #14200a; }

.etape-texte { flex: 1; font-size: .95rem; }
.etape-date { font-size: .7rem; color: var(--texte-doux); }
.etape-suppr {
  background: none; border: none; color: var(--texte-doux);
  cursor: pointer; font-size: 1.1rem; padding: 0 .25rem; line-height: 1;
}

.ajout-etape { display: flex; gap: .5rem; }
.ajout-etape input { flex: 1; }

/* --------------------------------------------------------------- champs */

input[type="text"], input[type="number"], select {
  font: inherit;
  color: var(--texte);
  background: var(--nuit-2);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  padding: .7rem .8rem;
  width: 100%;
}
input:focus, select:focus { outline: 2px solid var(--argile); outline-offset: 1px; }
input::placeholder { color: #6d5a50; }

/* Les listes deroulantes sont le seul endroit de l'appli ou le systeme dessine
   a notre place. On lui reprend la fleche par defaut, qui arrive grise sur
   fond clair et jure avec tout le reste, et on la redessine en SVG dans la
   couleur du texte -- comme l'engrenage, et pour la meme raison. */
select {
  appearance: none;
  cursor: pointer;
  padding-right: 2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23b0998c' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .75rem center;
  background-size: .6rem;
}
/* Le menu deroule est peint par le systeme, qui ne reprend pas toujours les
   couleurs du champ : sans ces deux lignes, certains navigateurs ouvrent une
   liste blanche, d'autres du texte clair sur fond clair. Sur telephone, le
   selecteur est celui du systeme et ignore tout ceci -- c'est tres bien ainsi. */
select option { background: var(--nuit-2); color: var(--texte); }

.champ { display: flex; flex-direction: column; gap: .3rem; font-size: .82rem; color: var(--texte-doux); }
.champ.ligne { flex-direction: row; align-items: center; justify-content: space-between; gap: .5rem; }
.champ.ligne input { width: 84px; text-align: center; }
/* L'intitule prend toute la place restante, sinon chaque champ se cale sur la
   longueur de son propre libelle et la colonne part en escalier. */
.champ.ligne > span { flex: 1; }

/* Les curseurs de volume, eux, ont besoin de course pour etre reglables au
   doigt : la largeur de 84px des champs numeriques les rendrait inutilisables. */
.champ.ligne input[type="range"] {
  width: 150px;
  flex: none;
  padding: 0;
  background: transparent;
  border: 0;
  accent-color: var(--argile);
  cursor: pointer;
}
.champ.ligne small { color: var(--texte-doux); opacity: .75; margin-left: .35rem; }

/* Une liste deroulante ne peut pas se caler sur 84px comme un champ de minutes :
   elle doit montrer le nom du service. Elle prend donc ce qu'il lui faut, sans
   jamais chasser son intitule de la ligne. */
.champ.ligne select { width: auto; flex: 0 1 auto; max-width: 62%; }

/* ------------------------------------------------------------- equipement */

.equipement { display: flex; flex-direction: column; gap: .75rem; }

.piece-equipement {
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  background: var(--nuit-2);
  padding: .9rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.piece-equipement.max { border-color: var(--ambre); }

.eq-haut { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.eq-nom { font-weight: 600; }
.eq-niveau { font-size: .72rem; color: var(--texte-doux); }
.eq-actuel { font-size: .85rem; color: var(--ambre); }
.eq-note { font-size: .78rem; color: var(--texte-doux); }

.eq-bas { display: flex; justify-content: space-between; align-items: center; gap: .75rem; }
.eq-prix { display: flex; align-items: center; gap: .35rem; font-size: .85rem; font-variant-numeric: tabular-nums; }
.eq-prix.cher { color: var(--texte-doux); }
.eq-bas .bouton { padding: .5rem .9rem; font-size: .85rem; }

.pastilles { display: flex; gap: 4px; }
.pastille { width: 18px; height: 5px; border-radius: 2px; background: var(--nuit-3); border: 1px solid var(--bord); }
.pastille.pleine { background: var(--argile); border-color: var(--argile); }

/* ---------------------------------------------------------------- reglages */

/* ------------------------------------------------------------- parametres */

/* Le bouton engrenage. Il porte un SVG et non du texte : on annule donc le
   calage vertical du texte, sinon l'icone flotte au-dessus de sa ligne. */
.bouton.icone.engrenage { display: inline-flex; align-items: center; padding: .3rem .45rem; }
.bouton.icone.engrenage svg { display: block; }

.entete-panneau {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  border-bottom: 1px solid var(--bord);
  padding-bottom: .75rem;
}
.entete-panneau h2 { font-size: 1.1rem; }

/* Les titres de section du panneau respirent, sauf le premier. */
#ecran-reglages .sur-titre { margin-top: .75rem; }
#ecran-reglages .sur-titre:first-of-type { margin-top: 0; }

/* -------------------------------------------------------------- navigation */

.navigation {
  display: flex;
  border-top: 1px solid var(--bord);
  background: var(--nuit-2);
  padding-bottom: env(safe-area-inset-bottom);
}
.onglet {
  flex: 1;
  font: inherit;
  font-size: .82rem;
  font-weight: 600;
  padding: .85rem .4rem;
  background: transparent;
  border: none;
  border-top: 2px solid transparent;
  color: var(--texte-doux);
  cursor: pointer;
}
.onglet.actif { color: var(--argile); border-top-color: var(--argile); }

/* ---------------------------------------------------------------- overlays */

.overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: var(--nuit);
  overflow-y: auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: calc(1.5rem + env(safe-area-inset-top)) 1rem calc(1.5rem + env(safe-area-inset-bottom));
}
.overlay[hidden] { display: none; }

.overlay-boite {
  width: 100%;
  max-width: var(--large);
  display: flex;
  flex-direction: column;
  gap: .85rem;
  margin: auto 0;
}

.carte-conteneur { position: relative; line-height: 0; }
.carte-image { width: 100%; display: block; border-radius: var(--rayon); border: 1px solid var(--bord); }

/* Le repere "tu es ici". Position en pourcentage (voir data/carte.js), posee
   par ui.js a l'ouverture du panneau. Un anneau qui respire plutot qu'un point
   fixe : sur une carte chargee d'illustrations, un pixel immobile se noie. */
.carte-position {
  position: absolute;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: var(--argile);
  border: 2px solid var(--texte);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--argile) 60%, transparent);
  animation: pouls-carte 1.8s ease-out infinite;
}
@keyframes pouls-carte {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--argile) 55%, transparent); }
  100% { box-shadow: 0 0 0 14px color-mix(in srgb, var(--argile) 0%, transparent); }
}

.final-chiffres { display: flex; justify-content: center; gap: 1.75rem; margin: .5rem 0; }
.final-chiffres div { display: flex; flex-direction: column; }
.final-chiffres strong { font-size: 1.9rem; color: var(--ambre); line-height: 1; font-variant-numeric: tabular-nums; }
.final-chiffres span { font-size: .7rem; color: var(--texte-doux); text-transform: uppercase; letter-spacing: .1em; }

.citation {
  font-style: italic;
  color: var(--texte-doux);
  border-left: 2px solid var(--argile);
  padding-left: .8rem;
  text-align: left;
  margin: .5rem 0;
}

/* ---------------------------------------------------------------- annonce */

.annonce {
  position: fixed;
  left: 50%;
  bottom: calc(4.6rem + env(safe-area-inset-bottom));
  transform: translateX(-50%) translateY(8px);
  z-index: 30;
  background: var(--nuit-3);
  border: 1px solid var(--argile);
  color: var(--texte);
  padding: .6rem 1rem;
  border-radius: 999px;
  font-size: .85rem;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
}
.annonce[hidden] { display: none; }

/* ------------------------------------------------------- voile de veille */

/*
  Il couvre TOUT, y compris le bandeau et la navigation : c'est ce qui fait lire
  l'assombrissement comme une mise en veille et non comme une image qui noircit.

  `pointer-events: none` est indispensable -- sans lui, le premier geste destine
  a reveiller l'ecran serait avale par le voile lui-meme, et les boutons
  deviendraient inatteignables au moment precis ou l'on veut y revenir.

  Aucune transition ici : l'opacite est posee par `render.js`, qui la deduit du
  temps ecoule depuis le dernier geste. Une transition CSS recommencerait son
  parcours depuis zero a chaque interruption, la ou le fondu doit reprendre ou
  il en etait.
*/
.voile-veille {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: #06080e;
  opacity: 0;
  pointer-events: none;
}
.voile-veille[hidden] { display: none; }
.annonce.visible { opacity: 1; transform: translateX(-50%) translateY(0); }

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