/* 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. */
/* Pas de voile gris d'iOS au toucher (« surbrillance de toucher ») : l'app donne son propre retour (lp-press, :active).
   Dans l'app installée, ce voile recouvrait la ligne de vente appuyée pendant 1/15 s : le « scintillement » filmé par
   Dylan le 28/09 (absent dans Safari). La propriété se transmet à tous les éléments de la page. */
body.phone { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
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 420ms var(--spring-soft), border-radius 420ms var(--spring-soft); /* comme la feuille (sheetMotion.js) */
}
/* Feuille à pleine hauteur : l'écran derrière recule comme une carte. --deep (0 à 1) suit le doigt quand on tire la feuille. */
body.sheet-deep .stage {
  transform: translateY(calc((env(safe-area-inset-top) + 8px) * var(--deep, 1))) scale(calc(1 - 0.07 * var(--deep, 1)));
  border-radius: calc(18px * var(--deep, 1));
}
/* 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; }
/* Onglet caché : plus dessiné du tout. Avec « visibility », Safari laissait voir un instant les éléments qui défilent
   de côté (puces de Ventes) par-dessus l'onglet ouvert (retour de Dylan du 27/09). Page.js garde la position. */
.tab:not(.active) { display: none; }
.page { position: absolute; inset: 0; overflow: hidden; background: var(--bg); will-change: transform; }
/* will-change : chaque page garde son propre calque d'affichage. Sans lui, iOS créait ce calque au début d'une animation
   de page et le retirait à la fin : ce remaniement arrêtait net le défilement lancé juste après un retour (vidéo de
   Dylan du 28/09, reproduit dans le simulateur : liste stoppée en pleine vitesse à la fin de l'animation). */
/* La page d'en dessous reste dessinée en permanence, décalée de 30 % (pageMotion.js, modèle de Vigza, 28/09) : plus
   rien à dessiner au départ d'un retour. Avant, elle était cachée puis réaffichée à chaque mouvement (léger à-coup à la
   fermeture). Seules les pages plus profondes ne sont plus dessinées (.buried, Stage.js). Seule la page du dessus reçoit
   le doigt (.top, posée par la navigation au départ du mouvement). Pas d'attribut inert : dans l'app installée, iOS le
   retirait trop tard, la liste revenue ne recevait pas le défilement lancé juste après un retour (simulateur, 28/09). */
.page:not(.top) { pointer-events: none; }
/*
   Surtout pas de bascule « overflow: hidden » puis « auto » : Safari de l'iPhone laisse parfois la zone bloquée,
   impossible à faire défiler (retour de Dylan du 28/09 après une vente ouverte puis refermée en glissant). */
.page.buried { visibility: hidden; }
.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-scroll { z-index: 1; }
.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; }
.pb-next { margin-left: var(--s-2); } /* rond du compte à droite d'un bouton de page (Documents) */
/* 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 capsules (ChiffresNav.js) ; 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, .chiffres-nav ~ .screen-head .secondary { display: none; }
/* Capsules pleines et plus grandes que les filtres de statut (contour) : on ne confond pas les deux rangées.
   Elles défilent jusqu'aux bords de l'écran, comme les rubriques de l'app Musique. */
.cnav { display: flex; gap: var(--s-2); overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)); padding: 2px var(--gutter); scroll-padding-inline: var(--gutter); }
.cnav::-webkit-scrollbar { display: none; }
.cnav-cap {
  flex: none; min-height: 38px; padding: 0 var(--s-4); border: 0; border-radius: var(--r-pill); background: var(--fill); color: var(--text);
  font: inherit; font-size: 15px; font-weight: 600; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease), transform 0.2s var(--ease);
}
.cnav-cap:active { transform: scale(0.96); }
.cnav-cap[aria-selected="true"] { background: var(--accent-bg); color: var(--on-accent, #fff); }

/* ---- 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:not(.menu-copy) > * { width: 100%; height: 100%; display: grid; place-items: center; }
/* Copie de l'élément touché (une vente, la carte Commission...) : nette, posée sur une carte, légèrement agrandie */
.menu-copy { border-radius: 16px; overflow: hidden; background: var(--card); box-shadow: var(--shadow-pop); }
.menu-copy > * { width: 100%; height: 100%; margin: 0; }
.menu { position: absolute; width: 250px; max-width: calc(100vw - 24px); padding: 6px; border-radius: 18px; }
/* Un libellé long passe à la ligne avec de l'air autour (sans marge, deux entrées sur deux lignes se touchaient). */
.mi {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); width: 100%; min-height: 46px;
  padding: 10px var(--s-3); border: 0; border-radius: 12px; background: none; color: var(--text); font-size: 16px; line-height: 1.3; text-align: left; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mi:hover, .mi:active { background: var(--fill); }
.mi.danger { color: var(--red); }
.menu-title { margin: 0; padding: 8px var(--s-3) 10px; font-size: 13px; line-height: 1.35; color: var(--text-3); overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ---- 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) {
  /* Immobile avec le clavier : ni --kb ni --vvh ici (le contenu remonte au-dessus du clavier, voir keyboardInset) */
  .sheet { bottom: 0; max-height: calc(100dvh - env(safe-area-inset-top) - 22px); will-change: transform; }
  .sheet.sheet-full { height: calc(100dvh - env(safe-area-inset-top) - 22px); }
  .sheet-handle, .sheet-head { touch-action: none; }
  /* Hauteur figée pendant la saisie : seule la zone de contenu défile, la poignée et l'en-tête ne rétrécissent pas */
  .sheet-handle, .sheet-head, .sheet-foot { flex: none; }
  .sheet-body { flex: 1 1 auto; min-height: 0; }
  .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; }
}