/* Layout de la landing Démineur Expert.
   Chargé APRÈS demineur-jeu.css et article.css pour arbitrer les conflits :
   le moteur impose body{display:flex}, on rétablit un flux vertical classique. */
body { display: block; }

/* Zone de jeu placée tout en haut, centrée, plus large que la colonne de texte
   pour afficher la grille Expert (30 colonnes) sans rognage. */
.jeu-zone-wrap {
  width: min(96vw, 960px);
  margin: 0 auto;
}

#app.jeu-embed {
  margin: 8px auto 4px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 18px 14px 14px;
}
#app.jeu-embed .grid-container { max-width: 100%; }

.jeu-note {
  text-align: center;
  font-size: 0.85rem;
  color: #94a3b8;
  margin: 6px auto 4px;
  max-width: 720px;
}

/* Mode focus : au 1er clic dans la grille, on masque les distractions.
   Tout revient en fin de partie (gagné / perdu) via demineur-jeu.js. */
body.demineur-focus .bloc-jeux-une-wrap,
body.demineur-focus .bandeau-infos-wrap,
body.demineur-focus #presentation {
  display: none;
}

/* Mobile : jeu en pleine largeur d'écran (edge-to-edge).
   Le full-bleed sort la zone de jeu des marges du body (padding 16px) ;
   la grille occupe alors toute la largeur, dimensionnée par mesurerConteneur. */
@media (max-width: 600px) {
  .jeu-zone-wrap {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
  #app.jeu-embed {
    padding: 12px 3px 10px;
    border-radius: 0;
    border-left: none;
    border-right: none;
  }
}