/* Scène de l'iPhone (Stage.js, Page.js, pageMotion.js) : onglets, piles de pages, barre du haut de chaque page,
   menus (Menu.js) et feuilles à deux hauteurs (sheetMotion.js). Validé avec Dylan le 27/09/2026 (D1 à D9).
   Chaque page défile seule : la page d'en dessous reste en place, prête à réapparaître quand on glisse vers la droite. */

.app-phone { position: fixed; inset: 0; overflow: hidden; }
/* Comme une app native : pas de sélection de texte ni de bulle « Copier, Traduire » au toucher prolongé
   (elle prenait la main sur l'appui long du + et sur le retour glissé), sauf dans les champs. */
body.phone { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
body.phone input, body.phone textarea, body.phone select, body.phone [contenteditable] { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
.stage {
  position: absolute; inset: 0; overflow: hidden; background: var(--bg); transform-origin: 50% 0;
  transition: transform var(--spring-soft-d) var(--spring-soft), border-radius var(--spring-soft-d) var(--spring-soft);
}
/* Feuille à pleine hauteur : l'écran derrière recule comme une carte */
body.sheet-deep .stage { transform: translateY(calc(env(safe-area-inset-top) + 8px)) scale(0.93); border-radius: 18px; }
/* Derrière une feuille, le verre n'a pas besoin de flou (caché par le fond) : moins de calcul pendant le mouvement */
body.sheet-deep .stage .glass { -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ---- Onglets et pages ---- */
.tab { position: absolute; inset: 0; }
.tab:not(.active) { visibility: hidden; pointer-events: none; }
.page { position: absolute; inset: 0; overflow: hidden; background: var(--bg); }
/* La page d'en dessous reste dessinée (cachée par celle du dessus) : prête à réapparaître sans à-coup au retour glissé */
.page:not(.root) { box-shadow: -10px 0 30px rgba(0, 0, 0, 0.28); }
.page-scroll {
  position: absolute; inset: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: none;
  padding: calc(env(safe-area-inset-top) + var(--s-3)) var(--gutter) calc(var(--tabbar-h) + var(--tb-bottom) + var(--s-6));
}
.page-scroll::-webkit-scrollbar { display: none; }
.page:not(.root) > .page-scroll { padding-top: calc(env(safe-area-inset-top) + 62px); }
.page-shade { position: absolute; inset: 0; z-index: 6; background: rgba(0, 0, 0, 0.32); opacity: 0; pointer-events: none; }
.page-veil { position: absolute; inset: 0; z-index: 7; opacity: 0; pointer-events: none; }
.card[id] { scroll-margin-top: calc(env(safe-area-inset-top) + 66px); }

/* ---- Barre du haut de chaque page : rond du compte (page de départ) ou ‹ ---- */
.pagebar {
  position: absolute; z-index: 5; top: 0; left: 0; right: 0;
  height: calc(env(safe-area-inset-top) + 58px); padding: env(safe-area-inset-top) var(--gutter) 0;
  display: flex; align-items: center; gap: var(--s-2); pointer-events: none;
}
.pagebar > button { pointer-events: auto; }
.pb-end { margin-left: auto; }
/* Fondu quand le contenu passe sous les boutons. Sans flou : sur toute la largeur, le flou recalculé
   à chaque image faisait ramer le défilement sur iPhone (retour de Dylan, 27/09). */
.pb-edge {
  position: absolute; inset: 0 0 -18px; z-index: -1; opacity: 0; transition: opacity 0.25s var(--ease);
  background: linear-gradient(var(--bg) 45%, color-mix(in srgb, var(--bg) 70%, transparent) 70%, transparent);
}
.page.scrolled .pb-edge { opacity: 1; }
.pb-title {
  position: absolute; left: 50%; top: calc(env(safe-area-inset-top) + 29px); max-width: 56%; transform: translate(-50%, -30%);
  font-size: 17px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: 0; transition: opacity 0.2s var(--ease), transform 0.25s var(--ease);
}
.page.titled .pb-title { opacity: 1; transform: translate(-50%, -50%); }
/* Place du rond du compte à droite du grand titre */
.page.root .page-scroll > .screen-head:first-child > div:first-child, .chiffres-nav .title-1 { padding-right: 52px; }
.stage-banners { position: absolute; z-index: 26; top: calc(env(safe-area-inset-top) + 62px); left: var(--gutter); right: var(--gutter); }
.stage-banners .banner { box-shadow: var(--shadow-pop); }
.stage-banners .banner-info { background: color-mix(in srgb, var(--accent) 12%, var(--card)); } /* opaque : il flotte au-dessus du contenu */

/* ---- Onglet Chiffres : grand titre et sélecteur ; le titre de chaque rubrique s'efface ---- */
.chiffres-nav { margin: 0 0 var(--s-4); }
.chiffres-nav .title-1 { margin-bottom: var(--s-3); }
.chiffres-nav ~ .screen-head .title-1 { display: none; }

/* ---- Compte ---- */
.account .list { background: var(--card-2); box-shadow: none; }

/* ---- Menu contextuel (appui long) ---- */
.menu-layer { position: fixed; inset: 0; z-index: 96; }
.menu-bg { position: absolute; inset: 0; background: var(--overlay); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.menu-lift { position: absolute; pointer-events: none; }
.menu-lift > * { width: 100%; height: 100%; display: grid; place-items: center; }
.menu { position: absolute; width: 250px; max-width: calc(100vw - 24px); padding: 6px; border-radius: 18px; }
.mi {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); width: 100%; min-height: 46px;
  padding: 0 var(--s-3); border: 0; border-radius: 12px; background: none; color: var(--text); font-size: 16px; text-align: left; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mi:hover, .mi:active { background: var(--fill); }
.mi.danger { color: var(--red); }

/* ---- Feuilles sur iPhone : poignée et en-tête pour tirer ; à mi-hauteur, toute la feuille se tire ---- */
.sheet-portal.leaving { pointer-events: none; }
@media (max-width: 699px) {
  .sheet { max-height: calc(var(--vvh, 100dvh) - env(safe-area-inset-top) - 22px); will-change: transform; }
  .sheet-handle, .sheet-head { touch-action: none; }
  .sheet-handle { width: 40px; margin-top: 7px; }
  .sheet.at-medium .sheet-body { overflow: hidden; touch-action: none; }
  .fab, .tb-item { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
}