/* Écrans du jeu. Tokens et fondations dans base.css. */

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

.bandeau {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; padding: 16px 20px;
  border-bottom: var(--bord);
  background: var(--papier-clair);
}
.marque {
  font-family: var(--titre);
  font-weight: 800; font-size: clamp(0.95rem, 4.2vw, 1.15rem); line-height: 1;
  color: var(--encre); text-decoration: none; white-space: nowrap;
  font-variation-settings: "SOFT" 0, "WONK" 1, "opsz" 40;
}
.compte { display: flex; align-items: baseline; gap: 14px; font-size: 0.85rem; }
#pseudo-affiche {
  font-weight: 700; letter-spacing: 0.02em;
  border-bottom: 2px solid var(--jaune);
}

main { max-width: 660px; margin: 0 auto; padding-block: 32px; padding-inline: 18px; }

/* ------------------------------------------------------------ typographie */

h1 {
  font-family: var(--titre);
  font-weight: 800; font-size: clamp(2rem, 8vw, 3rem); line-height: 1.02;
  letter-spacing: -0.02em; margin: 0 0 14px;
  font-variation-settings: "SOFT" 0, "WONK" 1, "opsz" 144;
}
h2 {
  font-family: var(--titre);
  font-weight: 700; font-size: clamp(1.3rem, 5vw, 1.7rem); line-height: 1.15;
  margin: 0 0 18px; letter-spacing: -0.01em;
}
.chapo { font-size: 1.02rem; color: var(--encre-douce); margin: 0 0 26px; max-width: 52ch; }
.note { color: var(--encre-douce); font-size: 0.82rem; margin: 14px 0 0; }

/* ----------------------------------------------------------------- blocs */

.carte {
  background: var(--papier-clair);
  border: var(--bord); border-radius: 3px;
  padding: 20px; box-shadow: var(--porte);
}

label { display: block; font-weight: 700; font-size: 0.92rem; letter-spacing: 0.01em; }

.ligne { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.ligne input { flex: 1 1 190px; min-width: 0; }

input {
  padding: 13px 15px; font: inherit; font-weight: 600; color: var(--encre);
  background: var(--papier); border: var(--bord); border-radius: 3px;
}
input::placeholder { color: var(--encre-douce); font-weight: 400; }

button {
  padding: 13px 22px; font: inherit; font-weight: 700; cursor: pointer;
  color: var(--papier-clair); background: var(--vif);
  border: var(--bord); border-radius: 3px;
  box-shadow: var(--porte-courte);
  transition: transform 0.06s, box-shadow 0.06s;
}
button:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--trait); }
button:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--trait); }
button[disabled] { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: var(--porte-courte); }
button.lien {
  background: none; color: var(--encre-douce); border: none; box-shadow: none;
  padding: 0; font-weight: 600; font-size: 0.85rem; text-decoration: underline;
  text-underline-offset: 3px;
}
button.lien:hover { color: var(--vif); transform: none; }
button.principal { width: 100%; margin-top: 22px; padding: 16px; font-size: 1.05rem; }

.erreur { color: var(--faux); margin: 12px 0 0; font-size: 0.9rem; font-weight: 600; }

/* -------------------------------------------------------------- niveaux */

.niveaux { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); margin-top: 26px; }
.niveau { display: flex; flex-direction: column; }
.niveau h2 { margin-bottom: 8px; }
.niveau > p { color: var(--encre-douce); margin: 0 0 14px; font-size: 0.93rem; }
.niveau .etat {
  font-weight: 700; color: var(--encre); font-size: 0.88rem;
  margin-top: auto; padding: 7px 0 14px;
  border-top: 1.5px dashed var(--encre-douce);
}
.niveau button { width: 100%; }
.niveau[data-niveau="expert"] button { background: var(--encre); }

.rebours {
  text-align: center; color: var(--encre-douce); margin-top: 32px;
  font-size: 0.9rem; letter-spacing: 0.02em;
}
.rebours strong { color: var(--encre); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- chrono */

/* La planche : en-tête coloré, jauge, énoncé, d'un seul tenant. */
.planche { box-shadow: var(--porte); border-radius: 3px; }
.planche #enonce { box-shadow: none; }

/* L'en-tête de question est un aplat plein, à la couleur du thème. C'est la
   pièce qui donne son caractère au jeu : dix teintes qui défilent. */
.progression {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px;
  border: var(--bord); border-bottom: none; border-radius: 3px 3px 0 0;
  background: var(--theme, var(--encre));
  color: var(--papier-clair);
}
#position {
  font-family: var(--titre); font-weight: 800; font-size: 0.95rem;
  letter-spacing: 0.04em; text-transform: uppercase;
}
.puce { font-weight: 700; font-size: 0.88rem; letter-spacing: 0.01em; opacity: 0.92; }
.chrono {
  margin-left: auto; font-variant-numeric: tabular-nums;
  font-family: var(--titre); font-weight: 800; font-size: 1.45rem; line-height: 1;
}
.chrono.presse { animation: pulse 0.8s steps(2, end) infinite; }
@keyframes pulse { 50% { opacity: 0.35; } }

.jauge {
  height: 10px; background: var(--papier-clair);
  border: var(--bord); border-top: none; border-bottom: none;
  overflow: hidden;
}
#jauge-barre { height: 100%; background: var(--theme, var(--encre)); transition: width 0.25s linear; }

#enonce {
  margin: 0; padding: 22px 20px 24px;
  text-wrap: balance;
  border: var(--bord); border-top: none; border-radius: 0 0 3px 3px;
  background: var(--papier-clair); box-shadow: var(--porte);
}

.choix { display: grid; gap: 12px; margin-top: 26px; }
.choix button {
  text-align: left; background: var(--papier-clair); color: var(--encre);
  font-weight: 600; padding: 15px 18px; box-shadow: var(--porte-courte);
}
.choix button:hover { background: var(--theme, var(--vif)); color: var(--papier-clair); }
.choix button.retenu { background: var(--theme, var(--vif)); color: var(--papier-clair); }

/* ------------------------------------------------------------------ pari */

.liste-bonus, .liste-correction { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }

.liste-bonus li {
  background: var(--papier-clair); border: var(--bord); border-radius: 3px;
  padding: 16px 18px; box-shadow: var(--porte-courte);
}
.liste-bonus .enonce { font-weight: 700; margin: 0 0 6px; line-height: 1.35; }
.liste-bonus .donnee { color: var(--encre-douce); margin: 0 0 14px; font-size: 0.92rem; }
.liste-bonus button {
  background: var(--papier); color: var(--encre);
  padding: 9px 16px; font-size: 0.9rem;
}
.liste-bonus li.mise { background: var(--jaune); box-shadow: var(--porte); }
.liste-bonus li.mise .donnee { color: var(--encre); }
.liste-bonus li.mise button { background: var(--encre); color: var(--jaune); }

/* ------------------------------------------------------------ correction */

.score {
  text-align: center; margin-bottom: 30px;
  background: var(--encre); color: var(--papier-clair);
  border: var(--bord); box-shadow: var(--porte);
}
.score .total {
  font-family: var(--titre); font-weight: 800;
  font-size: clamp(3rem, 14vw, 4.4rem); line-height: 0.95; margin: 0;
  letter-spacing: -0.03em;
  font-variation-settings: "SOFT" 0, "WONK" 1, "opsz" 144;
}
.score .detail { margin: 10px 0 0; font-size: 0.9rem; opacity: 0.8; letter-spacing: 0.02em; }

.liste-correction li {
  background: var(--papier-clair); border: var(--bord); border-radius: 3px;
  padding: 18px; box-shadow: var(--porte-courte);
}
.liste-correction li.juste { border-left: 9px solid var(--juste); }
.liste-correction li.faux  { border-left: 9px solid var(--faux); }
.liste-correction .verdict {
  font-family: var(--titre); font-weight: 800;
  font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.09em;
  margin: 0 0 8px;
}
.liste-correction li.juste .verdict { color: var(--juste); }
.liste-correction li.faux  .verdict { color: var(--faux); }
.liste-correction .enonce { font-weight: 700; margin: 0 0 10px; line-height: 1.35; font-size: 1.05rem; }
.liste-correction .bonne {
  margin: 0 0 12px; padding: 8px 12px;
  background: var(--papier); border-left: 3px solid var(--encre);
  font-weight: 600;
}
.liste-correction .explication { margin: 0 0 12px; }
.liste-correction .source { font-size: 0.8rem; color: var(--encre-douce); margin: 0; }
.liste-correction .source a { color: var(--encre); text-underline-offset: 3px; }
.liste-correction .source a:hover { color: var(--vif); }

/* ---------------------------------------------------------------- pied */

footer {
  max-width: 660px; margin: 0 auto; padding: 30px 18px 48px;
  color: var(--encre-douce); font-size: 0.8rem;
  border-top: 1.5px dashed var(--encre-douce);
  margin-top: 40px;
}

@media (max-width: 430px) {
  main { padding-block: 24px; }
  .progression { gap: 10px; padding: 10px 13px; }
  .puce { font-size: 0.8rem; }
  .chrono { font-size: 1.2rem; }
  :root { --porte: 4px 4px 0 var(--trait); }
}