/* style.css : l'apparence. Tout est réglé par quelques variables, en haut. */

:root {
  /* Palette : feuille blanche sur fond gris-vert, encre bleu nuit, crayon graphite */
  --fond: #dde5e3;
  --feuille: #fbfcfb;
  --encre: #16233b;
  --crayon: #59626e;
  --trait: #c3cdd0;
  --voisine: #e8efed;
  --meme: #b9dfcd;
  --selection: #f6d365;
  --conflit: #f4b6bf;
  --conflit-texte: #a3102b;

  /* Côté de la grille : jamais plus large que l'écran, ni plus haut que 68 % de sa hauteur */
  --taille: min(94vw, 68vh, 36rem);
}

html {
  /* Réserve la place de la barre de défilement même quand elle n'est pas affichée.
     Sans ça, son apparition (quand la page s'allonge en cours de saisie) réduit
     légèrement la largeur utile de la fenêtre, et donc --taille, qui en dépend. */
  scrollbar-gutter: stable;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

h1 {
  margin: 0;
  padding: 1rem 1.2rem 0;
  font-size: 1.5rem;
  font-weight: 600;
}

main {
  display: grid;
  gap: 1.2rem;
  justify-content: center;
  padding: 1rem 0.5rem 2rem;
}

/* Grand écran : la grille à gauche, les commandes à droite */
@media (min-width: 58rem) {
  main {
    grid-template-columns: var(--taille) 20rem;
    align-items: start;
    gap: 2rem;
  }
}

/* ---------- La grille ---------- */

#grille {
  display: grid;
  /* minmax(0, 1fr) : chaque colonne fait exactement 1/9 de la largeur, quel que soit son contenu */
  grid-template-columns: repeat(9, minmax(0, 1fr));
  /* Pas de grid-template-rows : la hauteur de chaque ligne se déduit de celle de
     ses cases, elle-même fixée par aspect-ratio ci-dessous (voir .case). */
  width: var(--taille);
  background: var(--feuille);
  border: 3px solid var(--encre);
  user-select: none;
  touch-action: manipulation;
}

.case {
  /* Case carrée : sa hauteur suit toujours sa largeur, jamais son contenu.
     C'est ce qui empêche une case (et donc sa ligne) de grandir quand on y tape un chiffre. */
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  border: 1px solid var(--trait);
  font-size: calc(var(--taille) / 14);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

/* Traits épais entre les blocs de 3 x 3 */
.case.bord-droit { border-right: 2px solid var(--encre); }
.case.bord-bas   { border-bottom: 2px solid var(--encre); }

/* Chiffres : ceux du livre en gras et encre, les vôtres en graphite plus léger */
.valeur { color: var(--crayon); font-weight: 400; }
.donnee .valeur { color: var(--encre); font-weight: 700; }

/* États d'une case. L'ordre compte : le dernier l'emporte. */
.case.voisine  { background: var(--voisine); }
.case.meme     { background: var(--meme); }
.case.conflit  { background: var(--conflit); }
.case.conflit .valeur { color: var(--conflit-texte); }
.case.selectionnee { background: var(--selection); }

/* Annotations : une mini-grille de 3 x 3 dans la case */
.notes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  width: 100%;
  height: 100%;
  color: var(--crayon);
  font-size: calc(var(--taille) / 34);
  padding: 2px 3px;
  line-height: 1;}
.notes i {
  display: flex;
  align-items: center;
  justify-content: center;
  font-style: normal;
}
.notes i.actif {
  background: var(--encre);
  color: var(--feuille);
  border-radius: 2px;
}

/* ---------- Les commandes ---------- */

#panneau {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  width: min(94vw, 36rem);
}

#level {
  display: inline-block;
  width: auto; /* Elle prend juste la largeur de son texte */
}

button {
  font: inherit;
  color: var(--encre);
  background: var(--feuille);
  border: 1px solid var(--encre);
  border-radius: 6px;
  padding: 0.55rem 0.9rem;
  cursor: pointer;
}

.saisie {
  display: none;
}

/* Afficher uniquement le contenu actif */
.saisie.active {
  display: block;
}

.jeu {
  display: none;
}

/* Afficher uniquement le contenu actif */
.jeu.active {
  display: block;
}

button:hover:not(:disabled) { background: #fff; }
button:disabled { opacity: 0.4; cursor: default; }
button:focus-visible,
input:focus-visible { outline: 3px solid #2b6cb0; outline-offset: 2px; }

#modes { display: flex; }
#modes button { flex: 1; border-radius: 0; margin-left: -1px; }
#modes button:first-child { border-radius: 6px 0 0 6px; margin-left: 0; }
#modes button:last-child  { border-radius: 0 6px 6px 0; }
#modes button[aria-pressed="true"] { background: var(--encre); color: var(--feuille); }

#aide { margin: 0; min-height: 2.8em; line-height: 1.4; }

#pave { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.4rem; }
#pave button { min-height: 3rem; font-size: 1.3rem; font-variant-numeric: tabular-nums; }

#actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }

#opt-doublons { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; }

#raccourcis { margin: 0; font-size: 0.85rem; line-height: 1.5; color: var(--crayon); }