/* ============================================================
   L'ATELIER AU TÉLÉPHONE.

   La vitrine dit « ordinateur, tablette et mobile ». Jusqu'ici
   c'était vrai à deux tiers : les pages de l'application sont
   bâties sur deux colonnes fixes et un corps qui ne défile pas,
   ce qui débordait de 56 px sur un écran de 390. Cette feuille
   remet le pouce au centre du dessin.

   Trois gestes, et trois seulement :

   1. LA BARRE DU HAUT devient deux rangs — la marque et la
      recherche, puis les destinations qui défilent sous le doigt.
      Rien n'est retiré : on ne cache pas une page à quelqu'un
      parce qu'il travaille debout.

   2. LES DEUX COLONNES se déplient. L'index des formules passe
      au-dessus, en bande horizontale : c'est la même liste, on la
      parcourt du pouce au lieu de la molette.

   3. LE CORPS REDEVIENT UNE PAGE. `height:100vh` + `overflow:hidden`
      est un dessin de bureau ; sur un téléphone il enferme le
      contenu et confie le défilement à des panneaux internes que
      la barre d'URL de Safari fait sauter. On rend le défilement
      au document.

   POURQUOI CHAQUE SÉLECTEUR COMMENCE PAR `body` : les pages de
   l'atelier portent leur CSS dans un <style> qui suit ce <link>.
   À spécificité égale, c'est la page qui gagne — et `.haut` serait
   resté à ses 64 px de bureau, le second rang débordant du cadre.
   Le `body` (0,1,1 contre 0,1,0) suffit à repasser devant, sans
   un seul !important de plus que les trois du dépliage.

   Chargée après palette_blottoir.css sur index, formules, orgue,
   jeux et dossier. Ne touche à aucune couleur : uniquement de la
   place.
   ============================================================ */

@media (max-width: 760px) {

  /* ---- 3. le document reprend le défilement ----
     `html, body` vaut (0,0,1), soit exactement la spécificité du
     `body{height:100vh;overflow:hidden}` que les pages posent dans leur
     <style> — lequel suit ce <link>. À égalité la page gagnait, et le
     document restait bloqué : tout ce qui dépassait le premier écran
     était inatteignable au doigt. C'était le seul sélecteur du fichier
     à ne pas avoir reçu le préfixe expliqué en tête. */
  :root, :root > body { height: auto; overflow: visible; }
  /* la coquille d'application aussi : restée à 100dvh + overflow hidden,
     elle CLIPPAIT tout ce que la scène dépliée poussait sous le premier
     écran — au Playground le pied était inatteignable au doigt (attrapé
     par le banc du pied, 26/08) */
  body .coquilleApp { height: auto; overflow: visible; }

  /* ---- 1. la barre du haut sur deux rangs ---- */
  body .haut {
    height: auto; min-height: 0; flex-wrap: wrap;
    gap: 9px; padding: 10px 14px;
    position: sticky; top: 0; z-index: 50;
  }
  body .haut .marque { font-size: 12px; }
  /* 16 px : sous ce seuil Safari iOS agrandit la page au premier
     toucher et n'en revient jamais seul à l'échelle 1. */
  body .haut input.rech, body .haut .rech {
    order: 3; flex: 1 1 100%; max-width: none; font-size: 16px;
  }
  body .haut .droite, body .haut .stat {
    order: 4; flex: 1 1 100%; margin-left: 0;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding-bottom: 2px;
  }
  body .haut .droite::-webkit-scrollbar,
  body .haut .stat::-webkit-scrollbar { display: none; }
  body .haut .droite > * { flex: none; white-space: nowrap; }

  /* ---- 2. les deux colonnes se déplient ---- */
  body .scene {
    display: block !important;
    height: auto !important;
    grid-template-columns: none !important;
  }

  /* l'index des formules : une bande qui se pousse au pouce */
  body .index {
    display: flex; gap: 10px;
    overflow-x: auto; overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    padding: 14px 14px 16px;
    border-right: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--trait) 70%, transparent);
  }
  body .index .sect {
    flex: none; margin: 0; padding: 0 4px; align-self: center;
  }
  body .index .sect::after { display: none; }
  body .index .ent { flex: 0 0 196px; margin: 0; }

  body .feuille { overflow: visible; padding: 26px 0 70px; }
  body .feuille .page, body .page { padding-left: 18px; padding-right: 18px; }

  /* les grilles de tuiles : deux colonnes, pas une de plus */
  body .mgrille,
  body .refgrille { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 12px; }
  body .filets { grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 9px; }
  body .deux, body .bcadran, body .regimes, body .docgrille { grid-template-columns: 1fr; }

  body h1 { font-size: 30px; }
  body .chapo { font-size: 15px; }

  /* la balance en plein écran : le cadran au-dessus, la liste dessous */
  body .balance { grid-template-columns: 1fr !important; grid-template-rows: auto 1fr; }
  body .balance .bliste { border-left: 0; border-top: 1px solid var(--trait); }

  /* ---- l'orgue ---- */
  body .corps { display: block; height: auto; }
  body .mur { overflow: visible; padding: 6px 14px 70px; }
  /* LE MILIEU DU PLAYGROUND SE DEPLIE AUSSI (27/08). Reste defileur, il
     gardait une hauteur propre et debordait de 255 px SOUS le pied — la
     bande se posait au milieu de la pesee. Meme remede que .feuille et
     .mur : en colonne unique, plus personne ne defile pour son compte. */
  body .milieu { overflow: visible; max-height: none; padding: 16px 14px 70px; }
  body .catalogue { overflow: visible; max-height: none; }
  body .rangee { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; }
  body .murtete { flex-wrap: wrap; gap: 10px; padding: 0 14px; }
  body .legende { padding: 10px 14px; gap: 6px; }

  /* la fiche matière remonte du bas, comme une feuille qu'on tire */
  body .cadrefiche { width: 100%; max-height: 94vh; border-radius: 16px 16px 0 0; }
  body .voilefiche { align-items: flex-end; padding: 0; }

  /* ---- l'accueil de l'atelier ---- */
  body .stats { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 8px; }
  body .rang { grid-template-columns: 1fr; gap: 14px; margin-bottom: 34px; }

  /* ---- la barre de compte de commun.js ----
     Marque, adresse, plan et déconnexion tenaient sur 390 px :
     l'adresse mordait sur la marque. Elle sort — elle est déjà
     dans les réglages, et personne n'a besoin qu'on lui rappelle
     son propre courriel à chaque écran. */
  /* Le flou de la barre (`backdrop-filter`) fait d'elle un bloc
     conteneur : un enfant en `position:fixed` s'ancre sur ses 46 px
     de haut, pas sur l'écran. Le menu du bas restait donc collé sous
     la marque. On retire le flou ici — le fond devient opaque, et
     personne ne verra la différence sur un téléphone. */
  body .barrehaut { padding: 0 12px; gap: 8px; font-size: 11px;
    background: var(--fond); backdrop-filter: none; -webkit-backdrop-filter: none; }
  body .barrehaut .email { display: none; }
  body .barrehaut .marque { font-size: 12px; letter-spacing: .18em; }
  body .barrehaut .droite { gap: 8px; }


  /* ---- LA NAVIGATION, QUI N'EXISTAIT PLUS ----
     En mode connecté, themes.css cache les liens de page (`.nav-page`)
     parce que la barre de compte porte le menu — puis cache ce menu
     sous 860 px. Résultat : sur un téléphone, on entrait dans les
     Formules et on n'en sortait plus.

     Le menu revient, mais en bas : c'est là qu'est le pouce, et la
     barre du haut n'a plus à se battre pour 4 destinations. Le corps
     est poussé d'autant pour que rien ne se cache dessous. */
  body .barrehaut .menu {
    display: flex;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 96;
    gap: 0; padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--fond) 92%, transparent);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--trait);
  }
  /* La barre TIENT à 360 (audit du 15/08, n°12) : min-width:0, interlettrage
     et padding resserrés — les cinq destinations entrent entières. */
  body .barrehaut .menu a {
    flex: 1; text-align: center; padding: 11px 2px; font-size: 9.5px;
    letter-spacing: .06em; min-width: 0; overflow: hidden;
    min-height: 44px; display: flex; align-items: center; justify-content: center;
  }
  /* L'onglet courant se marque à L'ENCRE avec l'anneau — la règle que la
     barre du haut s'est déjà donnée (n°11) : un seul aplat néon par écran,
     et au-dessus du pli c'est Save trial qui le garde. */
  body .barrehaut .menu a.actif {
    color: var(--orF); background: color-mix(in srgb, var(--or) 10%, transparent);
    opacity: 1; font-weight: 700;
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--or) 45%, transparent);
  }
  /* la pastille « NEW » se replie : elle poussait la cinquième destination
     hors de l'écran */
  body .barrehaut .menu a .neuf, body .barrehaut .menu .neuf { display: none; }
  /* la barre du bas grandit avec la zone sûre : la réserve aussi */
  :root[data-barre="1"] body { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }

  /* Le sceau du thème exclusif est fixé à 13 px du bas, au z-index 96 :
     il s'écrivait par-dessus l'onglet médian de la barre de navigation.
     Il remonte au-dessus d'elle. */
  body .sceau{bottom:calc(74px + env(safe-area-inset-bottom))}

  /* toute cible tactile fait au moins 44 px : la règle d'Apple, et
     la seule qui se sente vraiment quand on travaille les mains grasses */
  body .bt, body .haut .unites button, body .ent { min-height: 44px; }
  body .bt { display: inline-flex; align-items: center; }
}