/* ══════════════════════════════════════════════════════════════════════════
   MINI-JEU « PLUS OU MOINS » : ce qui s'ajoute au style du jeu (jeu.css).
   L'objet central est la fourchette : deux étiquettes (trop bas / trop haut)
   qui se resserrent autour du jeton « ? ».
   ══════════════════════════════════════════════════════════════════════════ */
.theme-pom { background: var(--jaune); }
.pom-fleches { font: italic 900 16px/1 var(--police-titre); letter-spacing: -.08em; }
.pom .edition { margin-top: 4px; }
[data-ecran="pari"].pom .tete { grid-template-areas: "logo outils" "logo compteurs" "edition edition"; grid-template-rows: 44px 1fr auto; }

/* La question, sur une fiche blanche collée */
.carte-question {
  margin-top: 16px; padding: 14px 18px 16px;
  background: var(--blanc); color: var(--encre);
  border-radius: 18px; box-shadow: 0 var(--p3) 0 var(--ombre);
  rotate: -1deg;
}
.cq-titre { font: 700 21px/1.25 var(--police-texte); text-wrap: balance; }
.cq-titre:focus { outline: none; }
.cq-unite {
  display: inline-block; margin-top: 10px; padding: 3px 10px 5px;
  background: var(--jaune); border-radius: 8px;
  font: 700 14px/1.25 var(--police-texte);
}
.pom #ecran-pari .question { margin-top: auto; }
.pom #q-essais { padding-top: 12px; }

/* Le jeu */
.pom-question { margin-top: 4px; font: 600 17px/1.3 var(--police-texte); color: var(--texte-doux); }
.fourchette { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; margin: 14px 0 12px; }
.borne {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 70px; padding: 8px 6px;
  border: 2px dashed var(--trait); border-radius: 16px;
  text-align: center;
}
.borne.connue { border: 3px solid var(--blanc); box-shadow: 0 var(--p2) 0 var(--ombre); color: var(--encre); }
.borne-bas.connue { background: var(--jaune); rotate: -2deg; }
.borne-haut.connue { background: var(--rose); rotate: 2deg; }
.borne b { font: italic 900 clamp(18px, 5.6vw, 24px)/1.05 var(--police-titre); overflow-wrap: anywhere; }
.borne-mot { font: 700 13px/1.1 var(--police-texte); }
.borne-vide { font: 600 15px/1.2 var(--police-texte); color: var(--texte-doux); }
.cible {
  display: grid; place-items: center;
  width: 60px; height: 60px; border-radius: 50%;
  background: var(--encre); color: var(--jaune);
  border: 4px solid var(--blanc); box-shadow: 0 var(--p2) 0 var(--ombre);
  font: italic 900 32px/1 var(--police-titre);
  rotate: -6deg;
}

.essais { display: flex; flex-direction: column; gap: 8px; padding-bottom: 20px; }
.essai {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  min-height: 48px; padding: 6px 12px 6px 48px;
  border: 2px dashed var(--trait); border-radius: 14px;
  color: var(--texte-doux);
}
.essai .indice-num { left: 10px; top: 50%; translate: 0 -50%; }
.essai[data-etat="fait"] {
  background: var(--papier); color: var(--sur-papier);
  border: 2px solid var(--blanc); box-shadow: 0 var(--p1) 0 var(--ombre);
}
.essai[data-etat="courant"] { border-color: var(--jaune); border-style: solid; color: var(--texte); }
.essai[data-zone="honneur"][data-etat="avenir"] { background: var(--eteint); border: 2px solid var(--eteint-bord); }
.essai[data-zone="honneur"] .indice-num { background: var(--dos); }
.essai-nombre { font: italic 900 22px/1 var(--police-titre); }
.essai-attente { font: 600 16px/1.2 var(--police-texte); }
.sens {
  margin-left: auto; padding: 4px 10px 5px;
  border-radius: 8px; color: var(--encre);
  font: 700 14px/1.1 var(--police-texte); white-space: nowrap;
}
.sens.plus { background: var(--jaune); }
.sens.moins { background: var(--rose); }
.sens.juste { background: var(--jaune); border: 2px solid var(--encre); }
.pom .ligne-ruban { margin-left: 28px; }

/* Les grands « Plus » / « Moins » */
.scene-bloc.sc-rose { background: var(--rose); }
.sc-sens { padding: 10px 28px 8px; }
.sc-sens .sc-titre { font-size: clamp(60px, 19vw, 84px); }
.sc-fleche { font: 900 64px/1 var(--police-texte); margin-top: -4px; }

/* Résultat */
.pom-ecart { display: block; margin-top: 6px; font-size: 15px; color: var(--texte-doux); }
.pom-note { margin-top: 24px; padding-bottom: 16px; font-size: 14px; line-height: 1.4; color: var(--texte-doux); }

@media (max-height: 780px) {
  .carte-question { margin-top: 10px; padding: 10px 14px 12px; }
  .cq-titre { font-size: 18px; }
  .borne { min-height: 60px; }
}