/* Outil · Prompteur (Teleprompter) : seulement ce qui lui est propre (le reste vient de app/kit.css).
   Préfixe des classes : pr-
   Deux colonnes : à gauche l'aperçu (16:9, miroir appliqué), une ligne d'infos, Lancer ; à droite le texte et les réglages.
   Le prompteur lui-même : une couche plein écran (pr-ecran) qui défile ; le miroir est appliqué au conteneur qui défile. */
.pr .outil-fixe { align-items: stretch; }
.pr-apercu { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; container-type: size; }
.pr-apercu .pr-page { position: absolute; inset: 0; overflow: hidden; }
.pr-apercu .pr-texte { padding-top: calc(30cqh - .68em); font-size: calc(var(--taille) * 1cqw); }   /* la 1re ligne centrée sur la ligne de lecture */
.pr-apercu .pr-ligne { top: 30cqh; }
.pr-info { height: 2lh; margin: 0; overflow: hidden; }
.pr-actions { display: flex; justify-content: center; }
.pr-actions .pastille { cursor: pointer; }
.pr-actions .pastille:hover { translate: none; }
.pr-actions .pastille:disabled { opacity: .3; cursor: default; }
.pr-actions kbd { margin-left: 4px; padding: 2px 6px; border-radius: 5px; box-shadow: inset 0 0 0 1px rgba(13, 12, 11, .3); font: 500 10px/1.2 var(--mono); }
.pr .tg-grise, .pr-grise { opacity: .3; pointer-events: none; }
.pr .pr-saisie { height: calc(10 * 1.45em + 22px); resize: none; display: block; }

/* Le rendu commun (aperçu et plein écran) : couleurs, largeur, miroir, ligne de lecture */
.pr-page { background: #000; color: #f2f0eb; }
.pr-page.inverse { background: #f2f0eb; color: #0d0c0b; }
.pr-texte { margin: 0 auto; width: var(--largeur); white-space: pre-wrap; overflow-wrap: break-word; font: 600 1em/1.35 var(--corps); letter-spacing: -.005em; text-align: var(--aligne, left); }
.pr-page.miroir-h .pr-retourne { transform: scaleX(-1); }
.pr-page.miroir-v .pr-retourne { transform: scaleY(-1); }
.pr-page.miroir-hv .pr-retourne { transform: scale(-1, -1); }
.pr-retourne { z-index: 1; }
/* La ligne de lecture : un trait très léger derrière le texte, et deux flèches orange aux bords (devant) */
.pr-ligne { position: absolute; left: 0; right: 0; height: 0; z-index: 0; border-top: 1px solid rgba(255, 90, 31, .22); pointer-events: none; }
.pr-ligne::before, .pr-ligne::after { z-index: 2; }
.pr-ligne::before, .pr-ligne::after { content: ""; position: absolute; top: -7px; border: 7px solid transparent; }
.pr-ligne::before { left: 0; border-left-color: var(--orange); }
.pr-ligne::after { right: 0; border-right-color: var(--orange); }
.pr-sans-ligne .pr-ligne { display: none; }

/* Le plein écran */
.pr-ecran { position: fixed; inset: 0; z-index: 60; }
.pr-ecran .pr-retourne { position: absolute; inset: 0; z-index: 1; overflow-y: auto; scrollbar-width: none; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.pr-ecran .pr-retourne::-webkit-scrollbar { display: none; }
.pr-ecran .pr-texte { padding: calc(33vh - .68em) 0 70vh; font-size: calc(var(--taille) * 1vw); }
.pr-ecran .pr-ligne { top: 33%; }
.pr-ecran.miroir-v .pr-ligne, .pr-ecran.miroir-hv .pr-ligne { top: 67%; }
.pr-compte { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; pointer-events: none; font: 700 22vmin/1 var(--display); color: var(--orange); background: rgba(0, 0, 0, .78); }
.pr-ecran.inverse .pr-compte { background: rgba(242, 240, 235, .85); }
.pr-compte:empty { display: none; }
.pr-hud { position: absolute; z-index: 3; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); translate: -50% 0; padding: 7px 14px; border-radius: 999px; pointer-events: none;
  background: rgba(13, 12, 11, .75); color: #f2f0eb; font: 500 11px/1 var(--mono); letter-spacing: .06em; opacity: 0; transition: opacity .4s var(--courbe); white-space: nowrap; }
.pr-hud.visible { opacity: 1; }
.pr-quitter { position: absolute; z-index: 3; top: calc(14px + env(safe-area-inset-top)); right: 14px; background: rgba(13, 12, 11, .7); color: #f2f0eb; opacity: 0; transition: opacity .4s var(--courbe); }
.pr-ecran.pause .pr-quitter, .pr-ecran.fin .pr-quitter, .pr-quitter:focus-visible { opacity: 1; }