/* 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, 1240px);
  margin: 0 auto;
}

/* Les blocs latéraux fixes (jeux à la une, infos) font ~250 px de chaque côté :
   sous 1780 px de large, ils recouvraient les bords de la grille Expert avant
   le premier clic (constaté en 1366 px le 02/10/2026). Ils ne s'affichent donc
   que si la place existe à côté de la zone de jeu. */
@media (max-width: 1779px) {

  .bloc-jeux-une-wrap,
  .bandeau-infos-wrap {
    display: none !important;
  }
}

/* Le banner partagé porte margin: -28px -24px 16px, un débordement calé sur le
   padding 28px/24px de #app, où il vit sur toutes les autres pages du jeu. Ici
   il est posé directement dans .jeu-zone-wrap, qui n'a aucun padding : les
   marges négatives latérales sortaient donc de l'écran (scroll horizontal en
   dessous de ~1200px de large, et bouton accueil rogné à gauche sur mobile).
   Sélecteur enfant direct : gagne sur .jeu-banner de banner.css, chargé après. */
.jeu-zone-wrap > .jeu-banner {
  margin-left: 0;
  margin-right: 0;
}

#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: var(--texte-doux);
  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;
  }

  /* La zone est déjà bord à bord : la sortie des marges de demineur-jeu.css
     la décalait (6 px à gauche, 12 px à droite). */
  #app.jeu-embed .grid-container {
    width: auto;
    margin-left: auto;
    margin-right: auto;
  }
}