/* =====================================================================
   NIVEAU SUIVANT — LE LANGAGE VISUEL COMMUN
   =====================================================================

   Une seule feuille pour les quatre pages : le jeu, la récréation,
   l'écran mural et la console. Si une couleur ou un bouton doit changer,
   il change ici, et partout en même temps.

   ⚠️  Chaque palier a sa propre couleur, portée par --accent. Le jeu la
       repose à chaque changement d'étage, et tout ce qui est marqué
       « accent » suit : le fil de progression, les tuiles, les boutons,
       les lueurs. C'est ce qui fait sentir qu'on monte.
   ===================================================================== */

:root{
  /* les fonds, du plus profond au plus proche */
  --nuit:#070A0E;
  --nuit-2:#0E141D;
  --nuit-3:#151E29;
  --trait:#222D3C;
  --trait-vif:#33465E;

  /* l'encre */
  --clair:#E8EFF7;
  --clair-doux:#8DA0B8;
  --clair-tres-doux:#5A6B80;

  /* la couleur du palier en cours : reposée par le jeu */
  --accent:#5CE6A5;
  --accent-doux:rgba(92,230,165,.13);

  /* les couleurs de sens, qui ne changent jamais */
  --or:#F0B23C;
  --alerte:#FF7A6B;
  --violet:#A78BFA;

  --rayon:12px;
  --rayon-gros:16px;
  --ombre:0 18px 50px rgba(0,0,0,.5);
}

/* ---------------------------------------------------------------------
   Le socle
   --------------------------------------------------------------------- */

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--nuit);color:var(--clair);
  font-family:Inter,-apple-system,system-ui,"Segoe UI",sans-serif;
  font-size:16.5px;line-height:1.65;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:Fraunces,Georgia,serif;font-weight:600;line-height:1.15;margin:0;text-wrap:balance}
p{margin:0 0 14px}
[hidden]{display:none!important}
.mono{font-family:"JetBrains Mono",ui-monospace,Consolas,monospace}
.wrap{width:100%;max-width:960px;margin:0 auto;padding:0 24px;position:relative;z-index:1}
::selection{background:var(--accent);color:var(--nuit)}

/* Deux conforts, réglables depuis le menu du jeu. */
body.gros{font-size:18.5px}
body.calme *,body.calme *::before,body.calme *::after{
  animation:none!important;transition:none!important}

/* ---------------------------------------------------------------------
   Typographie de service
   --------------------------------------------------------------------- */

.kicker{font-family:"JetBrains Mono",monospace;font-size:11.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent);margin-bottom:12px}
.titre{font-size:clamp(27px,4.6vw,42px);margin-bottom:10px;letter-spacing:-.01em}
.chapo{color:var(--clair-doux);max-width:62ch}
.chapo strong{color:var(--clair);font-weight:600}

/* ---------------------------------------------------------------------
   Boutons
   --------------------------------------------------------------------- */

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font:inherit;font-weight:500;font-size:15.5px;cursor:pointer;
  background:var(--accent);color:#05130C;border:1px solid var(--accent);
  border-radius:var(--rayon);padding:11px 22px;
  transition:filter .14s,transform .06s,box-shadow .18s}
.btn:hover{filter:brightness(1.09);box-shadow:0 0 0 4px var(--accent-doux)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.35;cursor:not-allowed;box-shadow:none;filter:none}
.btn:focus-visible{outline:2px solid var(--or);outline-offset:3px}

.btn.creux{background:transparent;color:var(--clair);border-color:var(--trait-vif)}
.btn.creux:hover{border-color:var(--accent);color:var(--accent);box-shadow:none}
.btn.nu{background:none;border-color:transparent;color:var(--clair-doux);padding-left:0}
.btn.nu:hover{color:var(--or);box-shadow:none}
.btn.danger{background:transparent;border-color:rgba(255,122,107,.5);color:var(--alerte)}
.btn.danger:hover{border-color:var(--alerte);background:rgba(255,122,107,.1);box-shadow:none}
.btn.gros{font-size:17px;padding:15px 32px;border-radius:14px}

/* ---------------------------------------------------------------------
   Champs
   --------------------------------------------------------------------- */

label{display:block;font-size:12px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--clair-doux);margin-bottom:7px}
input[type=text],input[type=password],input[type=file],select{
  width:100%;font:inherit;font-size:16px;background:var(--nuit-2);color:var(--clair);
  border:1px solid var(--trait);border-radius:var(--rayon);padding:12px 15px;
  transition:border-color .14s,box-shadow .14s}
input:focus,select:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 4px var(--accent-doux)}
input::placeholder{color:var(--clair-tres-doux)}
.code-saisie{font-family:"JetBrains Mono",monospace;font-size:26px;letter-spacing:.34em;
  text-transform:uppercase;text-align:center;padding:14px}

/* ---------------------------------------------------------------------
   Surfaces
   --------------------------------------------------------------------- */

.panneau{background:var(--nuit-2);border:1px solid var(--trait);
  border-radius:var(--rayon-gros);padding:22px 24px}
.note{margin-top:22px;background:var(--nuit-2);border:1px solid var(--trait);
  border-left:3px solid var(--or);border-radius:0 var(--rayon) var(--rayon) 0;
  padding:15px 19px;font-size:14.5px;color:var(--clair-doux)}
.note b{color:var(--clair)}
.note.accent{border-left-color:var(--accent)}
.note.rouge{border-left-color:var(--alerte)}

/* ---------------------------------------------------------------------
   Pastilles et jauges
   --------------------------------------------------------------------- */

.pastille{font-family:"JetBrains Mono",monospace;font-size:12px;letter-spacing:.08em;
  background:var(--nuit-2);border:1px solid var(--trait);border-radius:999px;
  padding:5px 12px;color:var(--clair-doux);white-space:nowrap}
.pastille b{color:var(--accent);font-weight:500}
.pastille.or b{color:var(--or)}

.diff{display:inline-flex;gap:3px;vertical-align:1px}
.diff i{width:5px;height:12px;border-radius:2px;background:var(--trait-vif);display:block}
.diff i.on{background:var(--or)}

.point{width:9px;height:9px;border-radius:50%;background:var(--accent);flex:none;
  box-shadow:0 0 10px var(--accent)}
.point.absent{background:var(--trait-vif);box-shadow:none}

/* ---------------------------------------------------------------------
   Verdicts : ce que le jeu répond quand on tente quelque chose
   --------------------------------------------------------------------- */

.verdict{margin-top:18px;border-radius:var(--rayon);padding:14px 18px;font-size:15px;
  border:1px solid var(--trait);animation:surgit .22s ease-out}
.verdict.bon{border-color:var(--accent);background:var(--accent-doux);color:var(--accent)}
.verdict.rate{border-color:rgba(255,122,107,.45);background:rgba(255,122,107,.07);color:var(--alerte)}
.verdict.info{color:var(--clair-doux)}
@keyframes surgit{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* La récompense : le chiffre qui monte, et la lueur qui passe. */
@keyframes gagne{
  0%{opacity:0;transform:translateY(10px) scale(.9)}
  35%{opacity:1;transform:translateY(-4px) scale(1.12)}
  100%{opacity:0;transform:translateY(-30px) scale(1)}}
.gain{position:fixed;z-index:90;pointer-events:none;
  font-family:"JetBrains Mono",monospace;font-weight:700;font-size:30px;
  color:var(--accent);text-shadow:0 0 24px var(--accent);
  animation:gagne 1.1s ease-out forwards}

@keyframes pulse{0%{box-shadow:0 0 0 0 var(--accent-doux)}
                 70%{box-shadow:0 0 0 18px transparent}
                 100%{box-shadow:0 0 0 0 transparent}}
.pulse{animation:pulse .7s ease-out}

/* ---------------------------------------------------------------------
   Tableaux
   --------------------------------------------------------------------- */

.tablebox{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:15px}
th,td{text-align:left;padding:11px 13px;border-bottom:1px solid var(--trait);vertical-align:top}
th{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--clair-doux);font-weight:500}
td{color:var(--clair-doux)}
td b{color:var(--clair)}

/* ---------------------------------------------------------------------
   La trame de fond, commune aux écrans pleine page
   --------------------------------------------------------------------- */

.trame{background-image:radial-gradient(rgba(92,230,165,.14) 1px, transparent 1px);
  background-size:22px 22px}

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