Demander à une IA : une seule feuille à la fois, la copie confirmée sur le bouton

Recette de 1f (F1, F2). Depuis la feuille du maître ou le bilan, la page
du prompt prend la place de leur contenu, à la même hauteur, avec
« ‹ Explication » ou « ‹ Bilan » pour revenir ; depuis l'analyse et le
glossaire, elle monte dans sa propre feuille. La croix et « Fermer »
ferment la feuille. Plus de bandeau « Prompt copié » : le bouton passe à
« ✓ Copié » (verdict-good) 2 s. Test navigateur : une poignée, une croix,
un titre, même hauteur, retour du téléphone, couleur du bouton. Charte et
amendement de l'ADR 0013 mis à jour.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

web/app.css

@@ -3430,17 +3430,65 @@ a.button.ask-ai .icon,
   margin-top: var(--space-2);
 }
 
-/* La feuille du prompt passe devant la feuille du maître et le bilan. */
+/* Sa propre feuille, au-dessus de l'analyse et du glossaire. */
 .prompt-veil {
   z-index: 12;
 }
 
-.prompt-sheet {
+.prompt-page {
   display: flex;
   flex-direction: column;
   gap: var(--space-2);
 }
 
+/* Depuis la feuille du maître ou le bilan, la page du prompt prend la place
+ * de leur contenu, à la même hauteur : la feuille garde sa taille, son
+ * contenu reste en place mais invisible, et la page la couvre ; le texte du
+ * prompt défile dans la hauteur qui reste. Une seule feuille, une seule
+ * poignée, une seule croix. */
+.sheet.prompting,
+.panel.prompting {
+  position: relative;
+  overflow: hidden;
+}
+
+.prompting > :not(.prompt-page) {
+  visibility: hidden;
+}
+
+/* (plus précis que « html.landscape .explain-sheet > * », qui la placerait
+ * dans une colonne) */
+.sheet.prompting > .prompt-page,
+.panel.prompting > .prompt-page {
+  position: absolute;
+  inset: 0;
+  grid-area: auto;
+  padding: inherit;
+}
+
+.prompting .prompt-text {
+  flex: 1 1 auto;
+  max-height: none;
+}
+
+/* Le bilan est un panneau : pas de poignée. */
+.panel .prompt-page .grip {
+  display: none;
+}
+
+/* « ‹ Explication » : revenir à l'écran d'où l'on vient. */
+a.prompt-back {
+  display: inline-flex;
+  align-items: center;
+  min-height: 44px;
+  padding-right: var(--space-2);
+  font-weight: 500;
+  color: var(--accent);
+  text-decoration: none;
+  touch-action: manipulation;
+  -webkit-tap-highlight-color: transparent;
+}
+
 .prompt-lead {
   margin: 0;
   color: var(--muted);
@@ -3478,6 +3526,7 @@ a.button.ask-ai .icon,
 
 .prompt-actions {
   display: flex;
+  flex: none;
   gap: var(--space-2);
   justify-content: flex-end;
 }
@@ -3490,39 +3539,20 @@ a.button.ask-ai .icon,
   min-width: 120px;
 }
 
+/* « ✓ Copié », 2 s : la copie se confirme sur le bouton (recette de 1f). */
+#prompt-copy.copied {
+  color: var(--verdict-good);
+  background: var(--surface);
+  border-color: var(--verdict-good);
+}
+
 html.landscape .prompt-text {
   max-height: calc(100vh - 190px);
   max-height: calc(100dvh - 190px);
 }
 
-/* « Prompt copié » : le bandeau des autres, en verdict-good, 2 s, devant
- * la feuille du prompt ; en haut de l'écran, pour ne pas couvrir les
- * boutons de la feuille. */
-.prompt-banner,
-html.landscape .prompt-banner {
-  top: var(--space-4);
-  bottom: auto;
-  z-index: 13;
-  color: var(--verdict-good);
-  font-weight: 700;
-}
-
-.prompt-banner > span:not(.banner-timer) {
-  flex: 1;
-}
-
-.prompt-banner .icon {
-  flex: none;
-  width: 20px;
-  height: 20px;
-}
-
-.prompt-banner .banner-timer {
-  background: var(--verdict-good);
-}
-
-.prompt-banner .banner-timer.running {
-  animation-duration: 2s;
+html.landscape .prompting .prompt-text {
+  max-height: none;
 }
 
 /* Le bouton ne se coupe pas : trop étroit à côté de « Revoir ce coup » ou