/* Passage sur téléphone (2/11/2026, demande de Didier) — chargé après les styles de maquette_passage.html.
   Tout est sous @media (max-width: 700px) : au-delà, rien ne change (ordinateur et tablette gardent leur mise en page).
   Barre de navigation par le bas (#mnav, maquette_mobile.js), recherche plein écran, volet du verset et fenêtres en
   feuilles qui montent du bas, outils en grille d'icônes. */
#mnav, .m-seul, #mvoile { display: none; }

@media (max-width: 700px) {
    /* --mbas : marge sous la barre du bas. Safari fait descendre la page sous le trait d'accueil de l'iPhone sans toujours
       l'annoncer (marge de sécurité nulle) : 16 px au moins, pour que les libellés restent au-dessus du trait. */
    :root { --mnav: 62px; --mbas: max(env(safe-area-inset-bottom), 16px); }

    /* ── Haut de l'écran (barre d'état de Safari) : la couleur de l'en-tête, sans liseré clair ; claire en Lecture et pendant
       la recherche, où le haut de la page est clair. maquette_mobile.js tient la couleur de barre (theme-color) au même ton. ── */
    html { background-color: var(--bar); touch-action: manipulation; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }   /* ni zoom au double toucher, ni texte grossi */
    /* Champs en 16 px au moins : en dessous, Safari agrandit la page quand ils prennent le curseur */
    input, textarea, select { font-size: 16px !important; }
    .pop input[type=search] { -webkit-appearance: none; appearance: none; }
    html:has(body[data-mode=lecture]), html:has(body.m-cherche) { background-color: var(--canvas); }
    /* 9/11/2026 : Safari (iOS 26) ignore theme-color et teinte la barre d'état d'après le fond de <body> quand aucun élément
       fixe ou collant ne touche le haut : le crème de la page faisait un voile blanc. Le fond du corps prend le ton de
       l'en-tête (clair en Lecture et pendant la recherche, comme ci-dessus), la page garde le sien, et l'en-tête colle en haut. */
    body { background-color: var(--bar); }
    body[data-mode=lecture], body.m-cherche { background-color: var(--canvas); }
    .app { background-color: var(--canvas); }
    .top { position: sticky; top: 0; }

    /* ── Barre du bas : Accueil, Lecture, Étude, Autour du verset, Outils ── */
    #mnav { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: fixed; left: 0; right: 0; bottom: 0; z-index: 75;   /* au-dessus du voile des menus (70), sous les menus (80) */
        height: calc(var(--mnav) + var(--mbas)); padding: 0 4px var(--mbas);
        background: var(--surface); background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
        border-top: 1px solid var(--line); box-shadow: 0 -6px 20px rgba(42, 38, 34, .07); }
    #mnav button { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 4px; min-width: 0; padding: 9px 2px 0;
        font: 600 10.5px/1.1 var(--serif); color: var(--muted); text-align: center; position: relative; -webkit-tap-highlight-color: transparent; }
    #mnav button span { display: block; max-width: 100%; min-height: 2.2em; }   /* libellés sur deux lignes au plus, icônes alignées */
    #mnav button .ico { width: 21px; height: 21px; transition: transform .2s; }
    #mnav button.on { color: var(--accent); }
    #mnav button.on::before { content: ''; position: absolute; top: 0; left: 26%; right: 26%; height: 3px; border-radius: 0 0 3px 3px; background: var(--gold); }
    #mnav button.on .ico { transform: translateY(-1px); }
    #mnav button:active .ico { transform: scale(.9); }

    /* ce que la barre du bas remplace */
    .modes, .ctx-fab, #btnTools, #btnCtx, .lect-exit, #lectExit { display: none !important; }
    .m-seul { display: inline-grid; }

    /* ── En-tête et ligne de référence ── */
    .top { min-height: 44px; padding: 0 10px; }
    .cmd { grid-template-columns: minmax(0, 1fr) auto; padding: 6px 8px 6px 4px; gap: 6px; }
    .refnav { min-width: 0; }
    .refbtn { min-width: 0; padding: 0 8px 0 10px; gap: 7px; }
    .refbtn .rb-book { font-size: 20px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    .refbtn .rb-cv { font-size: 20px; white-space: nowrap; }
    .cmd-actions { gap: 2px; }
    .m-act { width: 40px; height: 40px; border-radius: 50%; place-items: center; color: var(--ink-soft); }
    .m-act:active { background: var(--canvas-deep); }

    /* ── Recherche : cachée dans la ligne, plein écran quand on la demande ── */
    .omni { display: none; }
    body.m-cherche .cmd { z-index: 90; }   /* la ligne de référence porte la recherche : elle passe au-dessus de la barre du bas */
    body.m-cherche .omni { display: flex; flex-direction: column; position: fixed; inset: 0; z-index: 86; max-width: none; padding: 10px 12px 0;
        background: var(--canvas); animation: mMonte .2s ease-out; }
    body.m-cherche .omni-box { height: 46px; border-radius: 23px; flex: none; }
    body.m-cherche .omni-input { font-size: 16px; }   /* 16 px : pas d'agrandissement automatique sur iPhone */
    body.m-cherche .omni-drop { display: block; position: static; flex: 1; min-height: 0; max-height: none; margin: 8px -12px 0; padding: 4px 8px calc(16px + var(--mbas));
        border: 0; border-radius: 0; box-shadow: none; background: transparent; overflow: auto; -webkit-overflow-scrolling: touch; }
    .m-annuler { flex: none; height: 32px; padding: 0 6px 0 4px; font: 600 14px var(--serif); color: var(--accent); }
    body.m-cherche .m-annuler { display: inline-block; }
    .od-item { padding: 10px 8px; grid-template-columns: 34px minmax(0, 1fr) auto; }
    .od-item .oi { width: 34px; height: 34px; }
    .od-item .ot { font-size: 15px; }
    .od-item .os { font-size: 13px; }
    .od-scopes { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .od-scopes > * { flex: none; }

    /* ── Frise : le canon et les chapitres, sans la ligne du titre (il figure au-dessus du texte) ── */
    .frise { padding: 2px 12px 6px; }
    .fr-book { margin-top: 6px; }
    .fr-where { display: none; }
    .fr-tip, #wtip { display: none !important; }   /* infobulles de survol : sans objet au doigt */

    /* ── Barre d'affichage : dispositions sur une ligne qui défile, puis versions, écoute et affichage ── */
    .rtool { flex-wrap: wrap; gap: 6px 8px; padding: 6px 12px; }
    .rtool .seg.lay { flex: 1 1 100%; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
    .rtool .seg.lay button { flex: none; }
    .rtool .grow { display: none; }
    .rtool .vchips { flex: 1 1 0; min-width: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .rtool .vchips > * { flex: none; }
    .audio { padding: 0 10px 0 5px; }

    /* ── Texte : la place de la barre du bas ── */
    .text { padding: 12px 12px calc(var(--mnav) + 40px); }
    .acc { padding-bottom: calc(var(--mnav) + 40px); }

    /* ── Autour du verset : une feuille qui monte du bas, poignée, voile, onglets à la largeur de l'écran ── */
    .ctx { bottom: calc(var(--mnav) + var(--mbas)); height: 74vh; height: 74dvh; border-radius: 20px 20px 0 0;
        box-shadow: 0 -14px 40px rgba(0, 0, 0, .18); transition: transform .28s cubic-bezier(.2, .8, .2, 1); z-index: 52; }
    .ctx-head { padding: 18px 14px 0; position: relative; touch-action: none; }
    .ctx-head::before { content: ''; position: absolute; top: 7px; left: 50%; width: 38px; height: 4px; margin-left: -19px; border-radius: 2px; background: var(--line); }
    .ctx-tabs { gap: 0; }
    .ctab { flex: 1 0 auto; justify-content: center; padding: 0 7px; height: 40px; }
    .ctx-body { padding: 12px 14px 28px; -webkit-overflow-scrolling: touch; }
    #mvoile { position: fixed; inset: 0; z-index: 51; background: rgba(20, 16, 12, .32); }
    body.ctx-sheet #mvoile { display: block; animation: mFondu .2s ease-out; }

    /* ── Menus et fenêtres flottantes : feuilles du bas, à la largeur de l'écran ── */
    .scrim.open { background: rgba(20, 16, 12, .36); animation: mFondu .18s ease-out; }
    /* --clavier (maquette_mobile.js) : hauteur du clavier de l'iPhone, qui recouvre le bas de l'écran ; la feuille se pose au-dessus */
    .pop.open { left: 0 !important; right: 0 !important; top: auto !important; width: auto !important; max-width: none !important;
        bottom: max(calc(var(--mnav) + var(--mbas)), var(--clavier, 0px)) !important;
        max-height: calc(92vh - max(var(--mnav), var(--clavier, 0px))); max-height: calc(92dvh - max(var(--mnav), var(--clavier, 0px))); overflow: auto; -webkit-overflow-scrolling: touch; border-radius: 20px 20px 0 0; border-bottom: 0;
        padding-top: 22px; padding-bottom: 14px; box-shadow: 0 -14px 40px rgba(0, 0, 0, .2); animation: mMonte .24s cubic-bezier(.2, .8, .2, 1); }
    .pop.open::before { content: ''; position: absolute; top: 8px; left: 50%; width: 38px; height: 4px; margin-left: -19px; border-radius: 2px; background: var(--line); }
    .wpop.open { padding-left: 8px; padding-right: 8px; }

    /* Outils : une grille d'icônes, comme un écran d'applications */
    .tools.open { padding-left: 12px; padding-right: 12px; }
    .tools .tl-top { gap: 10px; }
    .tools .tl-top h3 { flex: none; font-size: 20px; }
    .tools .filter { width: auto !important; flex: 1; min-width: 0; }
    .tools .tl-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .tools .tl-col { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
    .tools .tl-col h6 { grid-column: 1 / -1; margin: 2px 4px 2px; }
    .tools .tl-i { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 6px; padding: 10px 4px; border-radius: 14px; }
    .tools .tl-i .ti { width: 46px; height: 46px; border-radius: 14px; }
    .tools .tl-i .ti .ico { width: 21px; height: 21px; }
    .tools .tl-i .tt { font-size: 12.5px; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .tools .tl-i .td { display: none; }
    .tools .tl-i:active { background: var(--canvas); }

    /* Fiches (personnages, notions, faune, flore…) et grandes fenêtres : plein écran par le bas */
    .mdl { padding: 0; align-items: flex-end; }
    .mdl-box, .mdl-box.large { width: 100%; max-height: 94vh; max-height: 94dvh; border-radius: 20px 20px 0 0; animation: mMonte .26s cubic-bezier(.2, .8, .2, 1); }
    .mdl-h { padding: 16px 54px 12px 18px; }
    .mdl-h h2 { font-size: 21px; }
    .mdl-x { top: 10px; right: 10px; }
    .mdl-corps, .mdl-corps.fiche { padding: 12px 18px calc(18px + var(--mbas)); }
    .mdl-pied { padding: 10px 18px calc(12px + var(--mbas)); }
    .acc-voc { padding: 0; align-items: flex-end; }
    .voc-box, .voc-box.large { width: 100%; max-height: 94vh; max-height: 94dvh; border-radius: 20px 20px 0 0; animation: mMonte .26s cubic-bezier(.2, .8, .2, 1); }
    .lg { padding: 0; align-items: flex-end; }
    .lg-box { width: 100%; border-radius: 20px 20px 0 0; max-height: 94vh; max-height: 94dvh; padding-bottom: calc(20px + var(--mbas)); }
    .lightbox { padding: 12px; }

    /* ── Outil ouvert : il garde la barre du bas, comme un écran de l'application ── */
    .toolLayer { bottom: calc(var(--mnav) + var(--mbas)); }
    .tlb { height: 46px; gap: 8px; padding: 0 8px; }
    .tlb .back { height: 34px; flex: none; }
    .tlb .nm { font-size: 14.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .tlb .rf2 { display: none; }
    .onglet-pane { padding-bottom: calc(var(--mnav) + var(--mbas)); }

    /* ── Messages et sphère de la conversation vocale au-dessus de la barre ── */
    .toast { bottom: calc(var(--mnav) + 14px + var(--mbas)); max-width: calc(100vw - 24px); }
    .vx-mini { right: 12px; bottom: calc(var(--mnav) + 12px + var(--mbas)); width: 72px; height: 72px; }
}
@keyframes mMonte { from { transform: translateY(40px); opacity: .4; } }
@keyframes mFondu { from { opacity: 0; } }