/* =====================================================================
   Finitions téléphone : appli posée sur l'écran d'accueil (iPhone), clavier, retour, zone d'écriture du prof.
   Chargé en dernier : il corrige sans réécrire les autres feuilles de style.
   ===================================================================== */

/* ---------- 1. Écran d'accueil iPhone : la page couvre tout l'écran, jusque sous le trait d'accueil ----------
   En mode « écran d'accueil », iOS ne compte pas toujours la zone du trait dans 100 % ou 100dvh :
   le fond vert de la page apparaissait sous les onglets. 100vh, lui, couvre tout l'écran. */
@media (display-mode: standalone){
  html, body{height:100vh}
  :root{--barre:60px}                         /* en appli, la barre gagne quelques points : on voit plus de la feuille */
  html, body{background:#D6D0C4}             /* si un liseré restait visible, il aurait la couleur de la barre */
}
@media (max-width: 899px){
  /* la barre d'onglets se prolonge sous elle-même : aucun fond ne peut apparaître dessous */
  .onglets{box-shadow:0 -12px 30px -14px rgba(6,18,14,.65), inset 0 1px 0 rgba(255,255,255,.75), 0 200px 0 0 #D6D0C4;
    padding-bottom:max(var(--bas), 6px)}
  .onglets .onglet{padding-bottom:9px}
  html, body{-webkit-tap-highlight-color:transparent}
  a, button{-webkit-touch-callout:none}
}

/* ---------- 2. La flèche de retour des sous-écrans, toujours visible en haut de la feuille ---------- */
.retour-feuille{position:absolute; top:8px; left:calc(var(--gouttiere) - 4px); z-index:4; width:40px; height:40px; border-radius:50%;
  display:grid; place-items:center; background:var(--papier-3); border:1.5px solid var(--encre); box-shadow:0 2px 0 var(--encre); color:var(--encre);
  transition:transform .2s var(--ease-ressort)}
.retour-feuille svg{width:18px; height:18px; transform:rotate(180deg)}
.retour-feuille:active{transform:translateY(2px); box-shadow:0 0 0 var(--encre)}
.panneau.avec-retour-feuille > .poignee{height:54px}
.retour-feuille{top:10px}
/* le lien texte « ← … » fait doublon avec la flèche, qui a son nom pour les lecteurs d’écran */
.panneau.avec-retour-feuille .lien-retour:first-child{display:none}   /* la flèche « Retour » le remplace */
@media (min-width: 900px){
  .retour-feuille{top:12px; left:14px}
  .panneau.avec-retour-feuille > .poignee{height:52px}
}

/* ---------- 3. Le prof : la zone d'écriture est en bas de la feuille, hors de la zone qui défile ---------- */
.feuille-prof > .prof-saisie{position:static; flex:none; margin:0; padding:10px var(--gouttiere) 12px; background:var(--papier) var(--grain);
  border-top:1px solid var(--trait-doux); box-shadow:0 -10px 18px -14px rgba(29,27,22,.35)}
.feuille-prof .defil{padding-bottom:10px}
.feuille-prof .prof-fil{padding-bottom:4px}
@media (min-width: 900px){
  .feuille-prof > .prof-saisie{border-radius:0 0 var(--r-feuille) var(--r-feuille); padding:12px 20px 16px}
}

/* ---------- 4. Clavier ouvert : la feuille remonte au-dessus, la barre d'onglets se range ---------- */
html.clavier .onglets{transform:translateY(150%); transition:transform .2s ease}
html.clavier #vue .panneau{bottom:var(--clavier, 0px); max-height:calc(var(--vv, 100dvh) - var(--haut) - 12px); height:calc(var(--vv, 100dvh) - var(--haut) - 12px);
  transition:none}
html.clavier .haut, html.clavier .rival{opacity:0; pointer-events:none}
html.clavier .jeu{bottom:var(--clavier, 0px)}
html.clavier .retour{bottom:var(--clavier, 0px)}
@media (min-width: 900px){
  html.clavier #vue .panneau{bottom:20px; height:auto; max-height:none}
  html.clavier .onglets{transform:none}
  html.clavier .haut, html.clavier .rival{opacity:1; pointer-events:auto}
}

/* ---------- 5. Toucher : pas de zoom involontaire, défilement souple ---------- */
@media (max-width: 899px){
  input, textarea, select{font-size:max(16px, 1em)}      /* sous 16 px, iOS zoome sur le champ */
  .defil, .jeu-corps{-webkit-overflow-scrolling:touch; scroll-behavior:smooth}
}