/* ---------- Tactile / petits écrans (smartphone, tablette) ----------
     Le jeu a déjà quelques ajustements ponctuels à 760px (minimap,
     consommables, boutique, sac plein) — ce fichier complète pour les
     éléments qui n'en avaient pas encore, et désactive les gestes
     tactiles natifs du navigateur (zoom, défilement) qui entreraient
     en conflit avec le tap/glisser/appui long du jeu (voir
     js/62-mobile-touch.js). */

  /* le canvas gère lui-même le tap/glisser/pincement : on empêche le
     navigateur d'interpréter ces gestes (zoom, scroll, pull-to-refresh) */
  canvas{ touch-action:none; -webkit-user-select:none; user-select:none; }

  /* Raccourci « fin du tour » : MOBILE UNIQUEMENT. Un <button> est visible par
     défaut, il faut donc l'éteindre explicitement hors petit écran — sinon il
     apparaîtrait en double avec celui de l'en-tête sur desktop. */
  #endTurnMobile{ display:none; }

  /* Petit écran (portrait) OU écran BAS (téléphone en paysage) : mêmes
     réglages. Un smartphone en paysage a souvent une LARGEUR de viewport
     bien au-delà de 600px (iPhone 14 ≈844px de large en paysage) mais une
     HAUTEUR très limitée (~360-400px) — sans le critère max-height, il ne
     recevait AUCUN de ces ajustements alors que c'est justement là que
     l'espace vertical est le plus serré (chevauchements constatés). */
  @media (max-width:600px), (max-height:480px){
    :root{ font-size:14px; }

    /* ---------- BORDS ARRONDIS, ENCOCHE ET BARRE GESTUELLE ----------
       (2026-09-09, retour Pixel : « en mobile plein écran, appli installée,
       prend en compte les bords ronds ».)
       `viewport-fit=cover` (index.html) fait courir la page SOUS l'encoche et
       les coins — c'est voulu, le décor doit atteindre le bord de la dalle.
       Mais l'INTERFACE, elle, ne doit pas s'y perdre : installée en plein
       écran, l'application n'a plus la barre du navigateur qui l'en écartait,
       et les angles de la barre du haut comme les sorts d'extrémité passaient
       derrière l'arrondi.

       Le piège des COINS RONDS : en portrait, `env(safe-area-inset-left/right)`
       vaut ZÉRO sur la plupart des téléphones — l'encoche est en haut, pas sur
       les côtés — alors que le rayon d'écran, lui, mord bel et bien les quatre
       angles. Se fier au seul `env()` ne protège donc de rien à gauche et à
       droite. D'où un PLANCHER : on prend toujours le plus grand des deux,
       la marge système ou la nôtre. */
    :root{
      --sa-t: max(4px, env(safe-area-inset-top, 0px));
      --sa-b: max(4px, env(safe-area-inset-bottom, 0px));
      --sa-l: max(10px, env(safe-area-inset-left, 0px));
      --sa-r: max(10px, env(safe-area-inset-right, 0px));
    }

    /* ---------- BARRE DU HAUT : DEUX rangées, plus une seule ----------
       Titre + 4 compteurs + 4 boutons dans UNE seule rangée, c'est ~500px de
       contenu minimum — largement plus que la largeur réelle d'un téléphone
       (~375px). Avant, tout restait entassé sur une ligne (flex-wrap:nowrap +
       overflow:hidden) : au-delà d'un certain point ça débordait purement et
       simplement hors écran, rendant boutons et compteurs intouchables.
       Découpé en deux rangées EMPILÉES (header en colonne) : .hdr-info
       (titre + Niveau/Tour/Score/Classe) et .hdr-menu (Inventaire/Livre/
       Sorts/Menu), chacune sur sa propre ligne, chacune bien plus courte que
       l'ancienne rangée unique — voir 01-hud-haut.css pour le HTML/desktop
       (identique à avant sur grand écran, la séparation n'y change rien). */
    header{
      flex-direction:column; align-items:stretch; gap:4px;
      /* marges sûres : sous l'encoche, à l'écart des angles arrondis */
      padding:calc(6px + var(--sa-t)) calc(8px + var(--sa-r)) 6px calc(8px + var(--sa-l));
    }

    /* Rangée 1 — INFO/TITRE : titre + compteurs, une ligne, jamais coupée. */
    .hdr-info{ flex:none; width:100%; flex-wrap:nowrap; gap:6px; overflow:hidden; }
    header h1{ font-size:.82rem; flex:0 1 auto; min-width:0;
               overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .stat{ font-size:.74rem; white-space:nowrap; }
    /* Niveau/Tour/Score : le titre du niveau peut être long, ces compteurs ne
       doivent jamais être poussés hors écran par lui. */
    header .stat{ flex:none; }

    /* Rangée 2 — MENU : les boutons, centrés, largement à l'aise sur leur
       propre ligne (176px pour 4 cibles de 44px, contre ~375px de large). */
    .hdr-menu{ flex:none; width:100%; gap:6px; justify-content:center; flex-wrap:nowrap; }
    header button{
      padding:0; min-width:44px; min-height:44px; font-size:1.1rem;
      display:inline-flex; align-items:center; justify-content:center; flex:none;
    }
    header .btn-lbl{ display:none; }   /* … seule l'icône reste */
    /* TOUJOURS DISPONIBLE (2026-09-03, retour Pixel : « le fin de tour en haut
       en mobile a disparu, qui lui doit toujours être dispo ») — #btnEndTurn a
       désormais son icône + .btn-lbl (index.html), il se replie donc en icône
       seule comme ses voisins au lieu de disparaître. #endTurnMobile (plus
       bas) reste un RACCOURCI supplémentaire près du pouce, affiché seulement
       une fois le tour entamé — voir syncEndTurnMobileVisibility() (js/41) —
       pas un remplacement de celui-ci. */

    /* ---------- MENU EN FEUILLE TACTILE ----------
       Le panneau était accroché sous son bouton, en haut à droite : lignes
       serrées, loin du pouce, et il pouvait déborder de l'écran sur un petit
       téléphone. Il remonte désormais du BAS, pleine largeur, avec de vraies
       lignes de 48px — le geste naturel sur mobile. Ancrage `fixed` (et non
       `absolute`) pour échapper à #menuWrap et rester collé au bord de l'écran. */
    #menuPanel{
      position:fixed; left:0; right:0; bottom:0; top:auto;
      min-width:0; max-width:none; max-height:min(70vh, calc(100vh - 80px));
      border-radius:14px 14px 0 0; gap:4px;
      padding:10px calc(10px + var(--sa-r)) calc(10px + var(--sa-b)) calc(10px + var(--sa-l));
      box-shadow:0 -12px 34px rgba(0,0,0,.6);
    }
    #menuPanel .mi{
      min-height:48px; font-size:.9rem;
      display:flex; align-items:center; justify-content:flex-start;
      text-align:left; padding:0 14px;
    }

    #vitals{ max-width:min(220px, 58vw); padding:6px 9px; gap:4px; }
    #vitals .stat{ font-size:.78rem; }
    #vitals .stat b{ font-size:.9rem; }
    #hpBar{ width:90px; }
    #statDetail{ max-width:140px; }


    /* JOURNAL EMPILÉ AU-DESSUS de la colonne barre de sort/pet/forme, plutôt
       qu'à sa GAUCHE : cette barre est centrée et souvent quasi plein écran
       (beaucoup de capacités) — sur un petit écran, partager la même bande
       horizontale que le journal les faisait se chevaucher. Le journal (plus
       son z-index élevé, voir 05-journal.css) passait PAR-DESSUS la barre et
       rendait ses premières cases totalement injoignables au tap — pas
       seulement moche, réellement inaccessible. `bottom` relevé pour dégager
       toute la colonne du bas (barre de sort + pet + forme), qu'elle soit
       affichée ou non en ce moment. fitLogSize() (js/42) détecte cet
       empilement et adapte alors la largeur du journal à celle du viewport
       plutôt qu'à l'écart-jusqu'à-la-barre (qui n'a plus lieu d'être). */
    /* z-index relevé (2026-09-03) : le journal est le panneau « qu'on lit puis
       qu'on replie » — il doit donc être lisible ENTIÈREMENT quand il est
       ouvert. La barre de consommables, ancrée à droite, lui mangeait sa
       dernière colonne (onglet Chat et champ de saisie inclus). */
    /* PLEIN ÉCRAN TANT QU'IL EST OUVERT (2026-09-03, retour Pixel : « si on
       affiche le journal ou l'aide, il prend tout l'écran jusqu'à ce qu'on le
       rétrécisse »). C'est la conséquence assumée de la règle posée plus tôt :
       le journal se LIT, puis se replie pour jouer — autant lui donner toute
       la place pendant qu'on le lit, plutôt qu'une bande étroite qui gêne le
       jeu sans être confortable à lire pour autant. Colonne flex : les
       contrôles, les onglets et la saisie gardent leur taille, le texte prend
       tout le reste. */
    #logWrap{
      position:fixed; left:0; right:0; top:0;
      /* IL S'ARRÊTE AU-DESSUS DES BOUTONS (2026-09-03, retour Pixel : « sans
         chevauchement, limite l'affichage aux boutons »). Le panneau prend
         tout l'écran de JEU, mais s'arrête net au-dessus de la rangée du bas
         (badges à 102 + 36 de haut = 138) : plus rien ne passe ni derrière ni
         par-dessus les boutons, qui restent lisibles et tapables sur le fond
         du jeu. Réserver la place par un padding ne suffisait pas — le FOND du
         panneau continuait, lui, jusqu'au bord. */
      bottom:calc(146px + var(--sa-b));
      max-width:none; z-index:70; pointer-events:auto;
      display:flex; flex-direction:column; gap:6px;
      /* il part du bord haut : son contenu doit s'écarter de l'encoche et des
         angles, sinon la première ligne passe dessous (marges sûres, ci-dessus) */
      padding:calc(10px + var(--sa-t)) calc(10px + var(--sa-r)) 10px calc(10px + var(--sa-l));
      background:rgba(10,8,14,.97);
      border-radius:0 0 14px 14px;
    }
    /* `!important` : applyLogSize() (js/42) pose une largeur/hauteur maximale
       EN LIGNE, calculée pour la petite fenêtre d'antan — en plein écran c'est
       la colonne flex qui décide, et seule une règle !important peut passer
       devant un style en ligne. */
    #log{
      flex:1 1 auto; min-height:0;
      max-width:none !important; max-height:none !important;
      font-size:.8rem;
    }
    #logTabs, #logChatRow{ max-width:none; flex:none; }
    #logCtl{ flex:none; }

    /* JOURNAL À LA DEMANDE (mobile) : #logWrap est REPLIÉ PAR DÉFAUT (voir
       applyLogSize(), js/42 — visibility:hidden, pas display:none, pour que
       sa géométrie reste mesurable par fitLogSize() même fermé) au lieu de
       réserver en permanence la bande au-dessus de la barre de sort. #logBadge
       (bouton rond, posé sous #vitals — coin libre, à l'écart de la colonne du
       bas ET du cluster minimap/consommables à droite) l'ouvre/le ferme d'un
       tap ; une pastille rouge signale une nouvelle ligne pendant qu'il est fermé. */
    /* RANGÉE DU BAS (2026-09-03, retour Pixel : « mets les boutons journal et
       aide à gauche du bouton fin de tour, alignés à gauche de l'écran, et les
       boutons conso, carte et stats à sa droite, alignés sur la droite »).
       Les cinq badges partagent désormais la bande du raccourci « Fin du tour »
       (bottom:98px, 44px de haut) : bottom:102 les y centre. Ils quittent donc
       les deux colonnes verticales qu'ils occupaient en haut de l'écran, ce qui
       rend toute cette hauteur au jeu.
       z-index au-dessus du journal/de l'aide en plein écran (70) : c'est le
       MÊME bouton qui referme le panneau qu'il vient d'ouvrir. */
    #logBadge{ display:flex; left:8px; right:auto; top:auto; bottom:102px; z-index:71; }

    /* BOUTON D'AIDE (?) regroupé au MÊME ENDROIT que le journal (juste à côté
       de #logBadge, sous #vitals) plutôt qu'en bas à droite (coin déjà
       disputé par la colonne barre de sort/pet/forme sur petit écran). Son
       contenu bascule sur la variante TACTILE (.hint-mobile, voir index.html/
       07-vitals-ecrans-connexion.css) : les raccourcis clavier/souris de
       .hint-desktop n'ont aucun sens sur un écran tactile. */
    #hintToggle{
      position:absolute; left:48px; right:auto; top:auto; bottom:102px;
      width:36px; height:36px; z-index:71;
    }
    /* TOUT REPLIER : troisième et dernier du groupe de gauche, juste à droite
       de l'aide (2026-09-03, demande Pixel). */
    #collapseAllBadge{ display:flex; left:88px; right:auto; top:auto; bottom:102px; z-index:71; }
    /* L'AIDE EST UNE LISTE LONGUE (une quinzaine de gestes) : même traitement
       que le journal — plein écran tant qu'elle est ouverte, refermée par le
       même bouton « ? » (qui reste au-dessus d'elle, z-index 71). Elle défile
       si elle dépasse. */
    #hint{
      position:fixed; left:0; right:0; top:0;
      /* même arrêt au-dessus de la rangée de boutons que le journal */
      bottom:calc(146px + var(--sa-b));
      max-width:none; max-height:none;
      overflow-y:auto; overscroll-behavior:contain;
      z-index:70; pointer-events:auto;
      padding:calc(14px + var(--sa-t)) calc(14px + var(--sa-r)) 14px calc(14px + var(--sa-l));
      line-height:1.8;
      border-radius:0 0 14px 14px;
    }
    .hint-desktop{ display:none; }
    .hint-mobile{ display:block; }

    /* OPACITÉ PLEINE (mobile) : #log et #hint sont posés directement sur la
       carte tactile — leur fond légèrement transparent (rgba(...,.85/.92),
       pensé pour desktop) rendait le texte illisible par-dessus le jeu en
       mouvement. Fond opaque uniquement ici, desktop inchangé. */
    #log{ background:#141018; }
    #hint{ background:#141018; }
    /* Le fondu "fantôme" (opacity:.14, voir updateOverlayGhosts(), js/34 —
       efface le journal/l'aide/la minimap quand ils recouvrent le héros, un
       monstre visible ou la sortie) reste pertinent en DESKTOP, où #log/#hint
       logent dans un coin et chevauchent rarement l'action. En mobile,
       #logWrap fait quasi toute la largeur de l'écran (voir plus haut) : le
       chevauchement devient quasi permanent, donc le fondu aussi — plus rien
       n'était jamais lisible. Neutralisé ici uniquement (le calcul JS continue
       de tourner pour la minimap, qui elle garde son fondu). */
    #log.ghost, #hint.ghost{ opacity:1; }

    /* CORRECTIF (2026-08-17, retour Pixel : « les raccourcis map/stats/
       consommable passent par-dessus les consommables quand ils sont
       déployés ») — AVANT ce correctif, #bagBadge occupait EXACTEMENT le même
       coin que #consumableBar (top:134/right:12, hérité de
       04-minimap-consommables.css sous 760px), et #mapBadge/#statsBadge (juste
       en dessous, top:178/222) tombaient alors en PLEIN dans la zone où la
       barre de consommables s'étend une fois DÉPLOYÉE (elle peut grandir
       jusqu'à `calc(100vh - 230px)` de haut, largement au-delà de 222px) :
       les trois badges — z-index:13, donc AU-DESSUS — recouvraient purement
       et simplement les premières rangées de consommables, les rendant
       illisibles et injoignables au tap.
       Les trois badges gardent leur pile SOUS la minimap comme avant
       (top:134/178/222) — c'est #consumableBar qui est repoussée plus bas
       (voir la règle dédiée après ce bloc), pour disposer de SA PROPRE zone,
       entièrement sous la pile de badges, où elle peut s'étendre sans jamais
       plus en recouvrir aucun. */
    #bagBadge{ display:flex; right:88px; left:auto; top:auto; bottom:102px; z-index:71; }

    /* MINIMAP (🗺️) et STATS (📊) À LA DEMANDE — mêmes bascules que le journal
       et le sac (voir js/41). Les deux badges se rangent sous #bagBadge dans
       la colonne de droite, pour ne pas empiéter sur la colonne de gauche
       (journal + aide) ni sur la zone de pouce du bas. */
    #mapBadge{ display:flex; right:48px; left:auto; top:auto; bottom:102px; z-index:71; }
    #statsBadge{ display:flex; right:8px; left:auto; top:auto; bottom:102px; z-index:71; }

    /* #consumableBar (voir correctif ci-dessus) : repoussée sous la pile de
       badges (dernier badge #statsBadge : top:222 + 36 de haut = 258) au lieu
       de démarrer à top:134 comme sur desktop/tablette (760px, voir
       04-minimap-consommables.css) — cette règle, plus spécifique (même
       sélecteur, média plus étroit, chargée APRÈS dans la cascade), l'emporte.
       max-height réduite d'autant pour conserver la MÊME marge de ~96px en bas
       d'écran que la valeur d'origine (100vh-230 à top:134 → 100vh-96 de fond ;
       ici top:272 → 100vh-368 pour retomber sur ce même fond). */
    /* DEUX COLONNES (2026-09-03, passe ergonomie mobile) : en une seule
       colonne, huit consommables faisaient 450 px de haut — la moitié droite
       de l'écran de jeu disparaissait derrière eux, et le journal ouvert
       passait dessous. À 124 px de large, deux cases de 48 tiennent par
       rangée : même contenu, moitié moins haut. */
    #consumableBar{ top:134px; width:124px; max-height:calc(100vh - 300px); }

    /* (Les anciennes remontées `body.mp-map-closed` / `body.mp-stats-closed`
       ont disparu avec la rangée du bas : elles servaient à rattraper les deux
       colonnes verticales quand le panneau du dessus était replié. Les badges
       ayant désormais une place fixe, il n'y a plus de vide à rattraper. Les
       classes restent posées par applyMobilePanels() (js/41) — elles ne
       pilotent simplement plus aucune règle ici.) */

    /* barre de capacités : cases un peu plus compactes mais toujours
       largement tactiles (recommandation usuelle : 44px minimum) */
    .slot{ width:48px; height:48px; font-size:1.35rem; }
    /* Les sorts d'extrémité tombaient dans les angles arrondis : on rentre la
       barre des deux côtés et on la remonte au-dessus de la barre gestuelle. */
    #abilityBar{
      gap:6px; padding:6px;
      bottom:calc(8px + var(--sa-b));
      max-width:calc(100vw - var(--sa-l) - var(--sa-r));
    }

    /* BARRE DE VIE, tout en bas de la pile — juste au-dessus de la barre de
       sorts (2026-09-03, retour Pixel : « en mobile aussi passe la barre de
       vie du haut en bas au-dessus de la barre de sort »). Largeur pilotée en
       JS (syncHpBarBottomWidth(), js/41) pour toujours égaler celle
       d'#abilityBar, ici comme sur PC (css/03) — voir la demande : « cette
       barre fait la taille de la barre de sort en largeur dans tous les
       modes ». */
    #hpBarBottom{
      /* suit la barre de sorts, qui vient de remonter d'autant */
      display:flex; bottom:calc(72px + var(--sa-b)); padding:4px 10px; gap:6px;
    }
    #hpBarBottomTrack{ height:8px }
    /* RACCOURCI FIN DU TOUR — c'est l'action la plus fréquente du jeu, elle
       n'a rien à faire uniquement en haut de l'écran sur mobile. Il devient un
       ÉTAGE À PART ENTIÈRE de la pile du bas, centré comme #petControl et
       #formPicker : un simple alignement à droite l'aurait fait chevaucher ces
       deux-là (centrés et larges) dès 360px de large. */
    /* EN OR, comme #btnEndTurn (en-tête, css/01) et #endTurnReminder (bureau,
       css/03) — 2026-09-03, retour Pixel : « même chose en mobile ». Repositionné
       hors paysage court par positionEndTurnMobileLandscape() (js/41). */
    #endTurnMobile{
      display:block; position:absolute; left:50%; transform:translateX(-50%);
      bottom:98px; z-index:12;
      padding:10px 22px; min-height:44px; border-radius:22px;
      font-size:.9rem; font-weight:700; letter-spacing:.03em;
      background:var(--accent); border:1px solid var(--accent); color:#1a1208;
      box-shadow:0 4px 16px rgba(224,168,60,.35), 0 6px 18px rgba(0,0,0,.5);
    }
    #endTurnMobile:hover{ background:#f0bc55; border-color:#f0bc55; }
    #endTurnMobile:disabled{ opacity:.4; }

    /* Rappel "fin de tour" (js/41, 03-barre-capacites.css) : DÉSACTIVÉ sur
       petit écran, en plus du garde JS (isMobileBag()) — #endTurnMobile
       ci-dessus occupe déjà en permanence cette même zone, un second rappel
       y ferait doublon. Défense en profondeur : sans cette règle, un
       redimensionnement desktop → mobile en cours de partie pourrait laisser
       la classe `.show` déjà posée avant que le prochain armEndTurnReminder()
       ne la retire. */
    #endTurnReminder{ display:none !important; }

    /* PILE DU BAS, de bas en haut, chacun avec une vraie marge au-dessus du
       précédent — relevée de 26px (2026-09-03) pour loger la barre de vie :
         barre de sort   bottom:8   → haut ≈68
         BARRE DE VIE    bottom:72  → haut ≈94
         FIN DU TOUR     bottom:98  → haut ≈142
         pet             bottom:150 → haut ≈176
         forme           bottom:184 → haut ≈212
         journal         bottom:222
       AVANT CORRECTIF (antérieur), #formPicker chevauchait #petControl quand
       les deux étaient affichés ensemble (allié + changement de forme). */
    #petControl{ bottom:150px; font-size:.7rem; }
    #formPicker{ bottom:184px; }

    /* SUCCÈS / OBJET RAMASSÉ (#achToasts, bas-droite par défaut — voir
       11-toasts-sac-plein.css) : sur mobile, ce coin est déjà entièrement
       occupé par la pile ci-dessus (barre de sort, fin de tour, pet, forme,
       journal replié — jusqu'à bottom:196px dans le pire des cas). Les
       popups de succès s'y retrouvaient noyées dedans ou carrément
       invisibles sous ces éléments (retour Pixel 2026-08-19 : « en mobile on
       n'a pas l'air d'avoir la popup des succès de visible »). On les
       remonte donc au-dessus de TOUTE la pile plutôt que de les laisser
       coincées dedans, et on réduit leur largeur max pour qu'elles restent
       bien lisibles sans déborder sur la colonne de droite (badges).
    */
    #achToasts{ bottom:236px; max-width:min(280px, 70vw); }
  }

  /* téléphone en format portrait très étroit : encore un cran plus compact */
  @media (max-width:400px){
    #vitals{ max-width:52vw; }
    .slot{ width:44px; height:44px; }
    /* LA RANGÉE DU BAS SE RESSERRE (2026-09-03) : à 360 px de large, les cinq
       badges aux deux bords et le bouton « Fin du tour » centré ne tenaient
       plus — mesuré, le bouton mordait de 11 px sur le badge consommables.
       Badges 34 px au lieu de 36, pas de 38 au lieu de 40, et le bouton perd
       de son rembourrage : il repasse sous la barre des 128 px que laisse
       l'espace libre entre les deux groupes. */
    #logBadge, #hintToggle, #collapseAllBadge, #bagBadge, #mapBadge, #statsBadge{ width:34px; height:34px; }
    #logBadge{ left:6px; }
    #hintToggle{ left:44px; }
    #collapseAllBadge{ left:82px; }
    #statsBadge{ right:6px; }
    #mapBadge{ right:44px; }
    #bagBadge{ right:82px; }
    #endTurnMobile{ padding:10px 14px; font-size:.86rem; }
  }

  /* téléphone en paysage à hauteur VRAIMENT courte (~≤380px, ex. iPhone SE à
     plat) : la colonne du bas (sort/pet/forme) + le journal empilé au-dessus
     ne tiennent plus confortablement l'un sur l'autre avec les valeurs
     ci-dessus — encore un cran plus compact, uniquement sur ce critère de
     hauteur (n'affecte pas le portrait, déjà couvert par max-width:400px).
     Même logique de pile que ci-dessus, recalculée pour des cases 42px. */
  @media (max-height:380px){
    .slot{ width:42px; height:42px; }
    #abilityBar{ bottom:6px; }        /* haut ≈60px */
    /* barre de vie compactée au minimum (16px) sur cette pile déjà très
       resserrée — même principe qu'au-dessus, moins de marge à donner. */
    #hpBarBottom{ bottom:64px; padding:2px 8px; gap:5px }
    #hpBarBottomTrack{ height:6px }
    /* le raccourci « fin du tour » se compacte lui aussi (38px au lieu de 44)
       pour que la pile entière tienne encore sur ~380px de haut */
    #endTurnMobile{ bottom:84px; min-height:38px; padding:8px 16px; font-size:.78rem; }
    #petControl{ bottom:128px; }      /* haut ≈152px */
    #formPicker{ bottom:158px; }      /* haut ≈184px */
    /* même correctif qu'au-dessus, recalculé pour cette pile resserrée */
    #achToasts{ bottom:206px; }
    /* #consumableBar (voir correctif plus haut) : recalculée pour cette pile
       resserrée — dernier badge (#statsBadge) : top:190 + 36 de haut = 226 —
       marge de fond réduite à 40px (au lieu de 96) faute de place sur un si
       petit viewport, mais toujours POSITIVE : mieux vaut une barre courte que
       hors-écran ou négative. */
    #consumableBar{ top:134px; max-height:calc(100vh - 190px); }
  }

  /* ═══════════════════════════════════════════════════════════════════
     TÉLÉPHONE EN PAYSAGE (~390 px de haut) — placé EN DERNIER pour l'emporter
     sur les deux blocs ci-dessus, qui raisonnent en colonnes empilées.
     ═══════════════════════════════════════════════════════════════════
     En paysage il n'y a plus de hauteur à empiler : la barre de consommables,
     ancrée SOUS la pile de badges (top:272), se retrouvait avec 22 px utiles —
     deux cases visibles sur huit. Elle passe donc À GAUCHE de la colonne de
     droite (minimap 110 px + sa marge = 134), en grille large de quatre à cinq
     cases par rangée, sur toute la hauteur disponible. */
  @media (max-height:480px){
    #consumableBar{
      top:12px; right:134px; width:min(300px, 40vw);
      max-height:calc(100vh - 24px);
      justify-content:flex-start;
    }
    /* EN PAYSAGE, LE PANNEAU DESCEND JUSQU'À LA BARRE DE VIE, LES BOUTONS
       PASSENT DESSOUS (2026-09-03, retour Pixel). Il n'y a que 390 px de haut :
       s'arrêter au-dessus d'une rangée de badges placée à 102 gaspillait le
       quart de l'écran pour lire. La rangée descend donc sur la bande de la
       barre de sorts — aux deux BORDS, où le paysage a de la place de reste,
       la barre de sorts étant centrée — et le panneau va jusqu'à la barre de
       vie (72..95), qui reste visible pendant la lecture. */
    #logWrap, #hint{ bottom:calc(100px + var(--sa-b)); }
    #logBadge, #hintToggle, #collapseAllBadge, #bagBadge, #mapBadge, #statsBadge{ bottom:19px; }

  }

/* ---------- INVENTAIRE : silhouette adaptée au petit écran ----------
   La silhouette fait 430 px de large en desktop (2 colonnes de 132 + un sprite
   de 150) : elle débordait d'une carte de 351 px sur un mobile 375. On resserre
   colonnes et sprite pour rester dans la largeur, sans jamais passer à un
   ascenseur horizontal — les pastilles du sac, elles, se replient toutes seules. */
@media (max-width:600px), (max-height:480px){
  .inv-doll{ gap:5px; max-width:100%; }
  .inv-doll-col{ width:96px; gap:4px; }
  #invHeroCanvas{ width:104px; height:104px; }
  .doll-slot{ padding:3px 5px; min-height:30px; gap:4px; }
  .doll-ic{ font-size:1rem; }
  .doll-lbl{ font-size:.6rem; }
  .inv-bagcol{ min-width:0; max-width:100%; flex-basis:100%; }
  .chip-nm{ max-width:110px; }
}

/* ---------- Un écran ou une popup est ouvert : le HUD s'efface ----------
   Voir syncMobileBadges() (js/42) pour la liste surveillée et le pourquoi.
   Les panneaux du HUD (carte, journal, aide, conso, stats) n'en font pas
   partie : leurs badges restent, c'est par eux qu'on les referme. */
body.overlay-open #logBadge,
body.overlay-open #hintToggle,
body.overlay-open #collapseAllBadge,
body.overlay-open #bagBadge,
body.overlay-open #mapBadge,
body.overlay-open #statsBadge,
body.overlay-open #endTurnMobile,
body.overlay-open #endTurnReminder{
  display:none !important;
}

/* ---------- Comparateur d'équipement collé au coin bas droite ----------
   (2026-09-04, demande Pixel.) Centrée, cette fenêtre masquait le héros et la
   case qu'on vient de fouiller au moment précis où l'on décide de garder ou
   d'échanger la pièce. Poussée dans le coin, elle laisse le terrain lisible.
   On agit sur le CONTENEUR (align/justify) plutôt que sur la carte : elle
   garde ainsi ses max-height/overflow, qui empêchent les boutons « Équiper le
   nouveau » / « Garder l'actuel » de tomber sous le bord en paysage — cette
   fenêtre n'ayant ni Échap ni fermeture au clic sur le fond, les perdre
   bloquerait la partie. Le retrait passe par la marge, et non par un décalage,
   pour que la marge de sécurité de l'encoche (css/14) reste respectée. */
@media (max-width:600px), (max-height:480px){
  #equipCompareModal{ align-items:flex-end; justify-content:flex-end }
  #equipCompareModal .card{ width:auto; min-width:min(340px, calc(100vw - 20px));
                            margin:0 6px 6px 0 }
}