/* colonnes.css (V1.10, chapitre B) : sur PC (plus de 800 px) la page ne défile plus ; chaque colonne défile de son côté.
   Les écrans de 800 px et moins gardent leur mise en page (chapitre C). */
@media (min-width: 801px) {
  html, body { height: 100%; overflow: hidden; }
  #game-container {
    height: 100vh; height: 100dvh; box-sizing: border-box;
    grid-template-rows: auto auto minmax(0, 1fr);        /* en-tête et panneau · barre de Réforme · colonnes */
  }
  .menu-bar { grid-row: 1; }
  .reform-bar { grid-row: 2; }
  .col-left, .col-center, .col-right { grid-row: 3; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--vert) 45%, transparent) transparent; }
  .col-left > *, .col-center > *, .col-right > * { scroll-margin: 12px; }

  /* gauche : compteur, tampon et jauges fixés en haut ; compétences et effets défilent dessous */
  .left-fixed { position: sticky; top: -12px; z-index: 3; margin: -12px -12px 8px; padding: 12px 12px 6px; background: var(--carton); border-bottom: 1px solid color-mix(in srgb, var(--vert) 25%, transparent); }

  /* compteur : la police suit la largeur de la colonne (une seule ligne), compétences en grille 2 × 2 compacte */
  .col-left { container-type: inline-size; }
  .counter-main { font-size: clamp(1.1rem, 9.2cqw, 2em); line-height: 1.15; white-space: nowrap; }
  .left-fixed .actives { grid-template-columns: 1fr 1fr; gap: 4px; margin-top: 8px; }
  .left-fixed .active-button { flex-direction: column; align-items: flex-start; gap: 0; padding: 4px 8px; font-size: 0.85em; }
  .left-fixed .active-info { font-size: 0.8em; }
  .left-fixed .gauge { margin-top: 6px; }
  .left-fixed .stamp-button { margin: 8px auto; }

  /* milieu : bandeaux fixés en haut, le reste défile dessous */
  .alerts { position: sticky; top: -12px; z-index: 3; margin: 10px -12px 0; padding: 4px 12px; background: var(--carton); }
  .alerts:not(:has(> :not([hidden]))) { padding: 0; }

  /* droite : titre et onglets fixes, seule la liste de la boutique défile */
  .col-right { overflow-y: hidden; }
  .shop-content { min-height: 0; overscroll-behavior: contain; }
}
/* repli : sous 720 px de haut le bloc fixe de gauche ne tient plus avec le reste ; toute la colonne défile alors */
@media (min-width: 801px) and (max-height: 719px) {
  .left-fixed { position: static; border-bottom: none; }
}
/* écrans de moins de 800 px de haut : tampon un peu plus petit (140 px, cible encore confortable) */
@media (min-width: 801px) and (max-height: 799px) { .left-fixed .stamp-button { width: 140px; height: 140px; } }

/* V1.10 : colonne du milieu en colonne flexible, bandeaux d'alerte placés tout en haut (sous le titre) : ils restent hors de la zone des toasts, en bas */
@media (min-width: 801px) {
  .col-center { display: flex; flex-direction: column; }
  .col-center > * { flex: none; }
  .col-center > h2 { order: -3; }
  .col-center > .alerts { order: -2; margin-top: 0; }
}

/* petit écran : le bloc fixe est transparent et l'ordre d'affichage d'origine est conservé (tampon, bulle, puis jauges) */
@media (max-width: 800px) {
  .col-left { display: flex; flex-direction: column; }
  .left-fixed { display: contents; }
  .left-fixed .gauge { order: 1; }
  .left-fixed .actives { order: 2; }
  #reform-area { order: 2; }
}

/* paysage de téléphone (plus de 800 px de large, moins de 500 px de haut) : en-tête compact pour laisser de la place aux colonnes */
@media (min-width: 801px) and (max-height: 500px) {
  #game-container { padding: 6px; gap: 6px; }
  .menu-logo { height: 44px; }
  .menu-bar { padding-top: 4px; }
  .menu-title { padding-bottom: 4px; }
  .shop-tabs { gap: 2px; padding-left: 4px; padding-right: 4px; }
  .shop-tabs button, .shop-tabs button.active { padding: 5px 5px 3px; font-size: 0.74em; white-space: nowrap; }
  .col-center > h2, .col-right > h3 { display: none; }      /* les titres de colonne mangent la place : masqués */
  .menu-bar { gap: 2px; }
  .menu-bar button { padding: 4px 6px; font-size: 0.85em; }
  .menu-bar button .menu-icon { width: 20px; height: 20px; }
}