/* Pages annexes du Sudoku : multijoueur (présentation), à imprimer, enfants, killer,
   entraînement. L'habillage de page vient du socle jeu.css, la grille et les blocs de
   texte (.su-texte, .su-tableau, .su-niveaux) de sudoku-jeu.css quand la page la charge.
   Les pages sans grille (multijoueur, à imprimer) ne chargent que ce fichier : les
   blocs de texte y sont donc repris à l'identique. */

[hidden] { display: none !important; }

.outil-intro {
  max-width: 620px;
  margin: 0 auto 18px;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--texte-doux);
}

.outil-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0 0 12px;
}

.outil-actions .btn { min-height: 46px; }

.outil-consigne {
  max-width: 520px;
  margin: 0 auto 14px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--texte-doux);
}

.outil-bravo {
  max-width: 560px;
  margin: 0 auto 12px;
  padding: 12px 14px;
  border: 1px solid rgba(100, 171, 124, 0.45);
  border-radius: 6px;
  background: rgba(100, 171, 124, 0.1);
  font-size: 0.9rem;
  line-height: 1.5;
  color: #a9d6b8;
}

.outil-bravo.outil-rate {
  border-color: rgba(208, 112, 112, 0.45);
  background: rgba(208, 112, 112, 0.1);
  color: #e6a9a9;
}

.outil-bravo.outil-piste {
  border-color: rgba(210, 151, 58, 0.45);
  background: rgba(210, 151, 58, 0.09);
  color: #e3b877;
}

/* Les sélecteurs de taille, de niveau et de technique sont des boutons, pas des liens */
button.su-niveau {
  background: transparent;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
}

/* Entraînement */
.exercice-carte {
  max-width: 620px;
  margin: 0 auto 14px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--color-mid);
  border-radius: 4px;
  background: var(--surface-2);
  text-align: left;
}

.exercice-regle {
  margin: 0 0 6px;
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--texte-doux);
}

.exercice-consigne {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 700;
  color: #f0f3f6;
}

/* --- Blocs de texte (repris de sudoku-jeu.css pour les pages sans grille) --- */
.su-texte {
  margin: 8px 0 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  text-align: left;
}

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

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

.su-texte h3 {
  font-size: 0.95rem;
  font-weight: 700;
  color: #f0f3f6;
  margin: 14px 0 6px;
}

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

.su-texte p { margin-bottom: 10px; }
.su-texte ul, .su-texte ol { margin: 0 0 12px 20px; }
.su-texte a { color: var(--color-light); }
.su-texte strong { color: var(--texte); }

.su-tableau {
  width: 100%;
  border-collapse: collapse;
  margin: 6px 0 14px;
  font-size: 0.84rem;
}

.su-tableau th,
.su-tableau td {
  padding: 8px 10px;
  border: 1px solid var(--line);
  text-align: left;
  color: var(--texte-doux);
  vertical-align: top;
}

.su-tableau th {
  background: var(--surface-2);
  color: #f0f3f6;
  font-weight: 700;
}

.su-tableau-defile { overflow-x: auto; }

/* --- Sudoku à imprimer ------------------------------------------------------- */
.imprimer-reglages {
  max-width: 620px;
  margin: 0 auto 18px;
  text-align: left;
}

.imprimer-reglages fieldset {
  margin: 0 0 12px;
  padding: 0;
  border: 0;
}

.imprimer-reglages legend {
  margin-bottom: 6px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--texte-doux);
}

.outil-choix {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.outil-choix label,
.imprimer-option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 0.86rem;
  color: var(--texte);
  cursor: pointer;
}

.imprimer-option { margin-bottom: 14px; }
.outil-choix input, .imprimer-option input { accent-color: var(--color-mid); }
.outil-choix label:has(input:checked) { border-color: var(--color-light); background: var(--surface-2); }

/* Aperçu : une feuille blanche, comme elle sortira de l'imprimante */
.feuilles { margin: 0 0 22px; }

.feuille {
  margin: 0 auto 16px;
  padding: 18px 16px;
  max-width: 720px;
  border-radius: 4px;
  background: #fff;
  color: #000;
}

.feuille-titre {
  margin: 0 0 12px;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1rem;
  font-weight: 700;
  color: #000;
  text-align: center;
}

.feuille-grilles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 16px;
  justify-items: center;
}

.feuille-1 .feuille-grilles { grid-template-columns: 1fr; }

.feuille-grille {
  width: 100%;
  max-width: 420px;
  margin: 0;
}

.feuille-1 .feuille-grille { max-width: 520px; }

.feuille-grille figcaption {
  margin-bottom: 4px;
  font-size: 0.72rem;
  color: #333;
  text-align: left;
}

.grille-papier {
  width: 100%;
  border-collapse: collapse;
  border: 2.5px solid #000;
  table-layout: fixed;
  font-family: Arial, Helvetica, sans-serif;
}

.grille-papier td {
  aspect-ratio: 1;
  border: 1px solid #555;
  font-size: clamp(0.8rem, 2.6vw, 1.35rem);
  font-weight: 700;
  color: #000;
  text-align: center;
  vertical-align: middle;
  padding: 0;
}

.grille-papier td.bord-droit { border-right: 2.5px solid #000; }
.grille-papier td.bord-bas { border-bottom: 2.5px solid #000; }
.grille-papier.solution td { font-weight: 400; font-size: clamp(0.6rem, 1.6vw, 0.85rem); }

/* Les solutions : petites, plusieurs par ligne */
.feuille-solutions .feuille-grilles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.feuille-solutions .feuille-grille { max-width: 200px; }

@media print {

  /* Seules les feuilles partent à l'imprimante */
  body.page-imprimer { background: #fff !important; padding: 0 !important; display: block !important; }
  body.page-imprimer > *:not(#app),
  body.page-imprimer #app > *:not(.feuilles) { display: none !important; }
  body.page-imprimer #app { border: 0 !important; padding: 0 !important; max-width: none !important; background: #fff !important; }

  .feuilles { margin: 0; }

  .feuille {
    max-width: none;
    margin: 0;
    padding: 0;
    break-after: page;
    page-break-after: always;
  }

  .feuille:last-child { break-after: auto; page-break-after: auto; }
  .feuille-grille { break-inside: avoid; page-break-inside: avoid; }
  .feuille-grilles { gap: 9mm 8mm; }
  .feuille-6 .feuille-grille { max-width: 82mm; }
  .feuille-4 .feuille-grille { max-width: 88mm; }
  .feuille-2 .feuille-grilles { grid-template-columns: 1fr; }
  .feuille-2 .feuille-grille { max-width: 118mm; }
  .feuille-1 .feuille-grille { max-width: 170mm; }
  .grille-papier td { font-size: 14pt; }
  .feuille-1 .grille-papier td { font-size: 22pt; }
  .feuille-2 .grille-papier td { font-size: 18pt; }
  .grille-papier.solution td { font-size: 8pt; }
  .feuille-solutions .feuille-grille { max-width: 55mm; }

  @page { size: A4; margin: 12mm; }
}