/**
 * ECHELLE DE BUREAU — 02/09/2026
 *
 * La mise en page de bureau etait clouee a une seule taille : grille 513 px,
 * cellule 55, header 70, pave 208. Sur un portable Mac (viewport utile
 * ~810 a ~870 px de haut une fois la barre d'onglets et la barre d'adresse
 * enlevees) l'ensemble occupe tout l'ecran et ne laisse plus respirer :
 * il fallait passer le navigateur a 90 %.
 *
 * La taille descend par paliers selon la HAUTEUR utile, pas la largeur —
 * c'est la hauteur qui manque sur un portable. Un ecran externe garde la
 * taille pleine.
 *
 * Tout descend de `--grid-size-desktop` (`hud-controls.css` positionne le
 * pave et la barre d'action avec), sauf deux elements dont la taille est
 * ECRITE EN DUR dans l'attribut `style` de `index.html` : `#sudoku-container`
 * et `.game-main-area`. Ceux-la exigent `!important`, un attribut de style
 * gagne sur une feuille.
 *
 * Geometrie : taille = 9 x cellule + 6 (fins) + 6 (epais) + 6 (bordure).
 *   55 -> 513 (plein)  ·  50 -> 468  ·  46 -> 432  ·  42 -> 396
 * Toujours des entiers : une cellule fractionnaire fait baver les traits.
 */

/* Le header est gere par header.css (05/09) : plus aucune variable --header-* ici. */

/* --- portables : ~0,91 de la taille pleine ------------------------------ */
@media (min-width: 769px) and (max-height: 940px) {
  :root {
    --grid-size: 468px !important;
    --grid-size-desktop: 468px !important;
    --grid-cell-size: 50px !important;
    --grid-font: 29px !important;
    --grid-font-desktop: 29px !important;
    --grid-region-size: 150px !important;
    --controls-width: 191px !important;
    --control-btn-width: 59px !important;
    --control-btn-height: 59px !important;
    --control-btn-font: 25px !important;
    --note-font: 11px !important;
    --note-item-size: 8.6px !important;
  }
  #sudoku-container {
    width: 468px !important; height: 468px !important;
    min-width: 468px !important; min-height: 468px !important;
  }
  .game-main-area {
    width: 828px !important; min-width: 828px !important;
    height: 468px !important; min-height: 468px !important;
  }
  /* Corriger / Reveler : colonne = 2 en-tetes (33) + 6 tuiles + 4 x 7 + 4, ancree 37 px au-dessus
     de la grille ; la hauteur des boutons suit pour garder 8 px sous le pave (voir hud-core.js). */
  .game-main-area #correct-btn, .game-main-area #reveal-btn {
    height: 40px !important; min-height: 40px !important; font-size: 13px !important; padding: 0 8px !important;
  }
}

/* --- ecrans courts : ~0,84 --------------------------------------------- */
@media (min-width: 769px) and (max-height: 790px) {
  :root {
    --grid-size: 432px !important;
    --grid-size-desktop: 432px !important;
    --grid-cell-size: 46px !important;
    --grid-font: 27px !important;
    --grid-font-desktop: 27px !important;
    --grid-region-size: 138px !important;
    --controls-width: 176px !important;
    --control-btn-width: 54px !important;
    --control-btn-height: 54px !important;
    --control-btn-font: 23px !important;
    --note-font: 10px !important;
    --note-item-size: 8px !important;
  }
  #sudoku-container {
    width: 432px !important; height: 432px !important;
    min-width: 432px !important; min-height: 432px !important;
  }
  .game-main-area {
    width: 792px !important; min-width: 792px !important;
    height: 432px !important; min-height: 432px !important;
  }
  /* Corriger / Reveler : colonne = 2 en-tetes (33) + 6 tuiles + 4 x 7 + 4, ancree 37 px au-dessus
     de la grille ; la hauteur des boutons suit pour garder 8 px sous le pave (voir hud-core.js). */
  .game-main-area #correct-btn, .game-main-area #reveal-btn {
    height: 36px !important; min-height: 36px !important; font-size: 13px !important; padding: 0 8px !important;
  }
}

/* --- fenetres vraiment basses : ~0,77 ----------------------------------- */
@media (min-width: 769px) and (max-height: 700px) {
  :root {
    --grid-size: 396px !important;
    --grid-size-desktop: 396px !important;
    --grid-cell-size: 42px !important;
    --grid-font: 25px !important;
    --grid-font-desktop: 25px !important;
    --grid-region-size: 126px !important;
    --controls-width: 158px !important;
    --control-btn-width: 48px !important;
    --control-btn-height: 48px !important;
    --control-btn-font: 21px !important;
    --note-font: 9.5px !important;
    --note-item-size: 7.4px !important;
  }
  #sudoku-container {
    width: 396px !important; height: 396px !important;
    min-width: 396px !important; min-height: 396px !important;
  }
  .game-main-area {
    width: 756px !important; min-width: 756px !important;
    height: 396px !important; min-height: 396px !important;
  }
  /* Corriger / Reveler : colonne = 2 en-tetes (33) + 6 tuiles + 4 x 7 + 4, ancree 37 px au-dessus
     de la grille ; la hauteur des boutons suit pour garder 8 px sous le pave (voir hud-core.js). */
  .game-main-area #correct-btn, .game-main-area #reveal-btn {
    height: 34px !important; min-height: 34px !important; font-size: 13px !important; padding: 0 8px !important;
  }
}