/* Habillage commun aux pages d'outils du Mastermind : solveur, « l'ordinateur
   devine », tutoriel, grille à imprimer.

   Le cadre de page (body, #app, top-bar, boutons, footer) vient de jeu.css, le
   plateau (pions, repères, palette) de mastermind-jeu.css et mastermind-aides.css.
   Ce fichier se charge après eux et ne décrit que ce que ces pages ajoutent :
   panneaux de résultat, réglages, texte d'explication sous l'outil. */

#app {
  max-width: 560px;
}

/* Barre de titre : les titres de ces pages sont plus longs que « Mastermind » */
.top-bar {
  gap: 10px;
}

.top-bar h1 {
  font-size: 1.3rem;
  line-height: 1.2;
  min-width: 0;
}

.top-bar .back-link {
  flex-shrink: 0;
}

.outil-emplacement-chiffres {
  flex-shrink: 0;
  min-width: 44px;
  display: flex;
  justify-content: flex-end;
}

/* Le bouton « 123 » est décrit par mastermind-aides.css : ici, seulement de
   quoi en faire une cible d'un doigt. */
.outil-emplacement-chiffres .mm-btn-chiffres {
  min-width: 44px;
  min-height: 44px;
}

.outil-intro {
  margin: 0 0 18px;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--texte-doux);
  text-align: left;
}

/* Réglages au-dessus de l'outil (choix du niveau) */
.outil-reglages {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 12px;
  margin-bottom: 14px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--texte-doux);
}

.outil-reglages select {
  min-height: 44px;
  max-width: 100%;
  padding: 0 12px;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--texte);
  background: var(--surface-2);
  border: 1px solid var(--line-forte);
  border-radius: 6px;
}

.outil-niveaux {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.outil-niveau-detail {
  flex-basis: 100%;
  margin: 0;
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--texte-faible);
  text-align: center;
}

/* Boutons : hauteur d'un doigt, et retour à la ligne plutôt que débordement */
.outil .btn {
  min-height: 44px;
}

.outil .actions-bar {
  flex-wrap: wrap;
}

.outil .btn.est-choisi {
  border-color: var(--color-light);
  background: var(--surface-2);
}

/* Panneau de résultat ou d'explication */
.outil-panneau {
  margin-bottom: 16px;
  padding: 14px 16px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  text-align: left;
}

.outil-panneau h2,
.outil-panneau h3 {
  margin-bottom: 8px;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: #f0f3f6;
}

.outil-panneau p {
  margin-bottom: 8px;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--texte-doux);
}

.outil-panneau p:last-child {
  margin-bottom: 0;
}

.outil-panneau strong {
  color: var(--texte);
}

.outil-panneau .ligne-tentative {
  justify-content: flex-start;
  border-bottom: none;
}

.outil-chiffre-cle {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: #f0f3f6;
  font-variant-numeric: tabular-nums;
}

.outil-etiquette {
  display: inline-block;
  margin-bottom: 6px;
  padding: 3px 8px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--texte);
  border: 1px solid var(--line-forte);
  border-radius: 4px;
}

.outil-etiquette.est-sur {
  color: #8fd0a4;
  border-color: rgba(100, 171, 124, 0.6);
}

/* Messages : erreur de saisie, contradiction, réussite */
.outil-message {
  margin-bottom: 14px;
  padding: 10px 12px;
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--texte);
  background: var(--surface-2);
  border: 1px solid var(--line-forte);
  border-radius: 6px;
  text-align: left;
}

.outil-message[hidden] {
  display: none;
}

.outil-message.est-erreur {
  color: #e08a8a;
  border-color: rgba(208, 112, 112, 0.6);
}

.outil-message.est-succes {
  color: #8fd0a4;
  border-color: rgba(100, 171, 124, 0.6);
}

/* Liste de codes en petit (codes encore possibles) */
.outil-codes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 8px;
}

.outil-codes .pions-groupe {
  gap: 3px;
}

.outil-codes .pion {
  width: 22px;
  height: 22px;
  font-size: 0.7rem;
}

/* Lien d'action vers l'accueil */
.outil-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 18px 0;
}

.outil-cta .btn {
  min-height: 44px;
}

/* Texte d'explication sous l'outil */
.outil-texte {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  text-align: left;
}

.outil-texte h2 {
  margin: 20px 0 8px;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: #f0f3f6;
}

.outil-texte h2:first-child {
  margin-top: 0;
}

.outil-texte p,
.outil-texte li {
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--texte-doux);
}

.outil-texte p {
  margin-bottom: 10px;
}

.outil-texte ul,
.outil-texte ol {
  margin: 0 0 12px 20px;
}

.outil-texte li {
  margin-bottom: 4px;
}

.outil-texte strong {
  color: var(--texte);
}

.outil-texte a,
.outil-panneau a {
  color: var(--color-light);
}

.outil-liens {
  margin-top: 16px;
  font-size: 0.86rem;
  color: var(--texte-doux);
}

/* L'attribut hidden doit l'emporter sur le display des boutons et des panneaux */
.outil [hidden] {
  display: none;
}

@media (max-width: 480px) {

  /* Titre long : il passe sous le lien de retour et le bouton « 123 » */
  .top-bar {
    flex-wrap: wrap;
  }

  .top-bar h1 {
    order: 3;
    flex-basis: 100%;
    font-size: 1.2rem;
  }

  .outil .ligne-active .pion-actif {
    width: 44px;
    height: 44px;
  }

  .outil .ligne-active {
    gap: 6px;
  }

  .outil .actions-bar {
    gap: 8px;
  }

  .outil .actions-bar .btn {
    padding-left: 14px;
    padding-right: 14px;
  }

  .outil-panneau {
    padding: 12px;
  }
}

/* Sous 400 px, six couleurs de 44 px ne tiennent pas dans le cadre de la palette
   avec l'écart prévu par mastermind-aides.css : on resserre l'écart, pas les
   boutons. */
@media (max-width: 400px) {

  .outil .selecteur-couleurs.selecteur-couleurs {
    gap: 8px 4px;
    padding: 10px 2px;
  }
}