/* onglets-mobile.css — V1.10, chapitre C : refonte mobile (800 px et moins), conçue pour le téléphone.
   Principes : le tampon est toujours au-dessus de la barre du bas ; 4 onglets en bas (Tampon · Actualité · Boutique · Menu) ;
   panneaux et fenêtres en plein écran ; barre de Réforme compacte ; un seul toast, en haut ; cibles tactiles de 44 px au moins. */
.mobile-count { display: none; }
.lbl-court { display: none; }
.rb-close { display: none; }
@media (max-width: 800px) {
  :root { --nav-h: 56px; }
  html, body { overflow-x: hidden; }
  body { -webkit-tap-highlight-color: transparent; }
  button, select, label.opt-check, .cas-choice { touch-action: manipulation; }

  #game-container { padding: 6px 8px; padding-bottom: calc(var(--nav-h) + 8px + env(safe-area-inset-bottom)); gap: 6px; }

  /* en-tête : logo et compteur sur une ligne ; les six entrées du menu sont dans l'onglet Menu */
  .menu-bar { flex-wrap: nowrap; padding: 3px 8px; min-height: 44px; gap: 8px; align-items: center; }
  .menu-title { margin-right: auto; padding: 0; align-self: center; }
  .menu-logo { height: 36px; width: auto; }
  .mobile-count { display: block; flex: 0 1 auto; min-width: 0; font: bold 1.15em var(--machine); color: var(--vert); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .menu-bar button { display: none; }
  #game-container[data-view="stamp"] .mobile-count { display: none; }      /* le compteur est déjà au-dessus du tampon */
  #game-container[data-view="menu"] .menu-bar { flex-wrap: wrap; align-content: flex-start; }
  #game-container[data-view="menu"] .menu-bar button { display: flex; flex: 1 1 100%; align-items: center; justify-content: flex-start; gap: 12px; min-height: 56px; padding: 8px 16px; font-size: 1.1em; }
  #game-container[data-view="menu"] .col-left, #game-container[data-view="menu"] .col-center, #game-container[data-view="menu"] .col-right { display: none; }
  #game-container[data-view="menu"] .reform-bar { display: none; }

  /* barre du bas : quatre onglets de 56 px */
  .mobile-nav { gap: 0; padding: 0 0 env(safe-area-inset-bottom); }
  .mobile-nav button { flex: 1 1 0; min-width: 0; height: var(--nav-h); min-height: var(--nav-h); padding: 4px; border: 0; border-right: 1px solid color-mix(in srgb, var(--vert) 30%, transparent); border-radius: 0; font-size: 0.9em; }
  .mobile-nav button:last-child { border-right: 0; }

  /* barre de Réforme compacte : une ligne ; le détail est une feuille plein écran */
  .reform-bar, .reform-bar[data-etat="prete"] { flex-wrap: nowrap; gap: 6px; padding: 4px 8px; min-height: 48px; }
  .reform-bar[data-etat="prete"] .rb-text { flex-wrap: nowrap; }
  .rb-text { flex-direction: row; align-items: center; }
  .rb-title, .reform-bar[data-etat="prete"] .rb-title { font-size: 0.95em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .rb-sub, .reform-bar[data-etat="prete"] .rb-sub { display: none; }
  .rb-progress { width: 40%; }
  .rb-more { min-height: 44px; min-width: 44px; padding: 0 10px; }
  .reform-bar .reform-button { width: auto; min-height: 44px; padding: 6px 12px; font-size: 0.95em; }
  .reform-button .lbl-long { display: none; }
  .reform-button .lbl-court { display: inline; }
  .rb-detail { position: fixed; inset: 0; z-index: 1600; max-height: none; border: 0; border-radius: 0; padding: 60px 16px 16px; box-shadow: none; }
  .rb-detail p { font-size: 1em; }
  .rb-detail::before { content: "Réforme de l'État"; position: absolute; top: 16px; left: 16px; font-weight: bold; font-size: 1.2em; color: var(--rouge); }
  .rb-close { display: block; position: absolute; top: 6px; right: 8px; min-width: 96px; min-height: 48px; border: 2px solid var(--rouge); border-radius: 4px; background: var(--carton); color: var(--rouge); font-weight: bold; }

  /* onglet Tampon : compteur, tampon, jauges, compétences ; l'aide (tutoriel) passe dessous */
  .col-left { padding: 8px; border-width: 1px; }
  .counter-main { font-size: clamp(1.2rem, 7.2vw, 1.9rem); line-height: 1.1; white-space: nowrap; }
  .counter-score { display: none; }
  .counter-dps { font-size: 0.8em; }
  .doctrine-line { font-size: 0.75em; }
  .stamp-button { width: 170px; height: 170px; margin: 8px auto; }
  .left-fixed .gauge, .gauge { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 0.8em; }
  .gauge label { flex: none; white-space: nowrap; }
  .gauge-track { flex: 1; max-width: none; height: 14px; }
  .actives { grid-template-columns: 1fr 1fr; gap: 4px; margin-top: 6px; }
  .active-button { min-height: 44px; padding: 4px 8px; flex-direction: column; align-items: flex-start; gap: 0; font-size: 0.85em; }
  #tutorial, #reveal-note { order: 3; }
  #reform-area { order: 4; }

  /* cibles tactiles : 44 px au moins */
  button, select, .cas-choice, .strike-button, .inc-button, .spec-button, .qty-button, .buy-button, .opt-button { min-height: 44px; min-width: 44px; }
  label.opt-check { display: flex; align-items: center; min-height: 44px; }
  .shop-tabs button { min-height: 44px; }

  /* panneaux du menu : plein écran, en-tête fixe avec « Fermer » */
  .drawer:has(.drawer-sheet)::before { display: none; }
  .drawer-sheet { position: fixed; inset: 0; max-height: none; border: 0; border-radius: 0; padding: 0 12px calc(12px + env(safe-area-inset-bottom)); box-shadow: none; animation: none; }
  .drawer-sheet .panel-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; min-height: 56px; margin: 0 -12px 8px; padding: 4px 12px; background: var(--fond-onglet, var(--carton)); }
  .drawer-sheet .panel-close { margin-left: auto; min-width: 96px; min-height: 48px; }
  .panel-content { max-height: none; overflow: visible; }

  /* fenêtres : plein écran, barre d'actions fixe en bas (l'écran titre garde sa taille) */
  .modal-dialog { padding: 0; align-items: stretch; justify-content: stretch; }
  .modal-content { max-width: none; max-height: none; height: 100%; border-width: 0; border-radius: 0; padding: 12px 12px 0; display: flex; flex-direction: column; box-shadow: none; }
  .modal-buttons { position: sticky; bottom: 0; margin: auto -12px 0; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); background: var(--carton); border-top: 2px solid var(--vert); }
  .modal-buttons button { flex: 1 1 auto; min-height: 48px; }
  .modal-dialog:has(.title-screen), .modal-dialog:has(.doctrine-choice) { padding: 16px; align-items: center; justify-content: center; }
  .modal-content.title-screen, .modal-content.doctrine-choice { max-height: 90vh; height: auto; border-width: 3px; border-radius: 6px; padding: 16px; display: block; }

  /* toasts : une ligne en haut ; ils ne captent aucun toucher */
  .toasts { pointer-events: none; }
  .toast { padding: 6px 10px; }
  .toast[data-plus] strong::after { content: ' (+' attr(data-plus) ')'; font-weight: normal; }

  /* Cerfa doré : grande cible */
  .cerfa-gold { min-width: 64px; min-height: 64px; justify-content: center; }
}