/* ================================================================
   ABLE & HIGH OS — Corrections de stabilité d'affichage (iPhone / PWA)
   Chargée APRÈS la feuille de style de chaque page.
   Ne modifie aucune couleur, police ni espacement voulu : uniquement
   les comportements qui font « bouger » l'interface ou masquent des
   boutons hors de l'écran.
   ================================================================ */

/* ---------------------------------------------------------------
   1. FEUILLES DU BAS — cause n°1 des boutons inatteignables
   Le panneau est un conteneur flex vertical plafonné en hauteur ;
   sans min-height:0 son contenu refuse de se comprimer, le panneau
   dépasse sa hauteur maximale et le bas (les boutons) sort de l'écran
   sans qu'aucun défilement ne permette d'y accéder.
   --------------------------------------------------------------- */
.sheet .panel{
  overflow:hidden;
  padding-bottom:env(safe-area-inset-bottom);
}
.sheet .body{
  flex:1 1 auto;
  min-height:0;                 /* ← le correctif */
  overflow-y:auto;
  overscroll-behavior:contain;  /* le fond ne défile plus derrière la feuille */
  -webkit-overflow-scrolling:touch;
}
/* Hauteur mesurée sur la zone RÉELLEMENT visible (barre d'outils comprise) */
@supports (max-height:100svh){
  .sheet .panel{ max-height:86svh; }
}

/* Quand une feuille est ouverte, la page derrière est figée */
@supports selector(:has(*)){
  body:has(.sheet.open){ overflow:hidden; touch-action:none; }
}

/* ---------------------------------------------------------------
   2. HAUTEUR DE PAGE
   Sur iPhone, 100vh vaut la hauteur SANS les barres du navigateur :
   la page est donc plus haute que l'écran et sursaute quand la barre
   apparaît ou disparaît. svh = hauteur réellement visible.
   --------------------------------------------------------------- */
@supports (height:100svh){
  body{ min-height:100svh; }
}

/* ---------------------------------------------------------------
   3. FOND FIXE
   background-attachment:fixed force iOS à repeindre tout l'écran à
   chaque pixel de défilement → saccades. On déplace le dégradé sur
   une couche fixe indépendante, composée par le GPU.
   --------------------------------------------------------------- */
body{ background-image:none !important; background-color:var(--bg) !important; }
body::before{
  content:'';
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(135% 75% at 50% -8%, oklch(0.21 0.03 252) 0%, var(--bg) 58%);
}

/* ---------------------------------------------------------------
   4. DÉRIVES DE MISE EN PAGE
   --------------------------------------------------------------- */
html{
  -webkit-text-size-adjust:100%;      /* iOS n'agrandit plus le texte tout seul */
  text-size-adjust:100%;
  overscroll-behavior-y:none;         /* plus de rebond élastique en haut de page */
}
@supports (overflow:clip){
  body{ overflow-x:clip; }            /* évite le conteneur de défilement créé par overflow:hidden */
}

/* ---------------------------------------------------------------
   5. DERNIER BOUTON JAMAIS SOUS LA BARRE D'ONGLETS
   --------------------------------------------------------------- */
body{ scroll-padding-bottom:calc(112px + env(safe-area-inset-bottom)); }
form > .btnrow:last-child,
.wrap > .btnrow:last-child{ margin-bottom:14px; }

/* Barres d'action collées en bas de page : au-dessus de la barre d'onglets */
.barre{ bottom:calc(86px + env(safe-area-inset-bottom)); }

/* ---------------------------------------------------------------
   6. CONFORT TACTILE
   --------------------------------------------------------------- */
.btn,.iconbtn,.kebab,.tb,.fab,.tabs button,.seg button{ touch-action:manipulation; }
.btn,.iconbtn,.kebab{ -webkit-user-select:none; user-select:none; }

/* ---------------------------------------------------------------
   7. TOAST — accepte les deux conventions de classe (.show et .on)
   --------------------------------------------------------------- */
.toast.on{ transform:translateX(-50%) translateY(0); opacity:1; }