/* Outil · PDF : seulement ce qui lui est propre (le reste vient de app/kit.css).
   Préfixe des classes : pf-
   Deux colonnes (.outil-colonnes) : à gauche la zone des pages (hauteur fixe, qui défile : vignettes, ou l'invitation à
   ouvrir un fichier) et une ligne d'état ; à droite les blocs d'actions (Fichiers, Pages, Couper, Exporter, Infos),
   grisés quand ils ne servent pas. Rien ne bouge. */
.pf .outil-fixe { align-items: stretch; }
.pf.outil-colonnes { --outil-largeur: 1100px; }

/* La zone des pages */
.pf-zone { position: relative; height: 420px; overflow-y: auto; overscroll-behavior: contain; border-radius: 14px;
  background: rgba(242, 240, 235, .025); box-shadow: inset 0 0 0 1px var(--filet-doux); -webkit-user-select: none; user-select: none; }
.pf-zone.survol { box-shadow: inset 0 0 0 1.5px var(--orange); }
@media (min-width: 960px) { .pf-zone { height: 560px; } }
.pf-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 16px 12px; padding: 14px; touch-action: pan-y; }
@media (min-width: 960px) { .pf-grille { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); } }

/* L'invitation, quand rien n'est ouvert */
.pf-vide[hidden] { display: none; }
.pf-vide { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; text-align: center; }
.pf-vide svg.grand { width: 40px; height: 40px; fill: none; stroke: var(--texte2); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.pf-vide .pastille { cursor: pointer; }
.pf-vide .pastille:hover { translate: none; }
.pf-vide p { margin: 0; font: var(--valeur); letter-spacing: .06em; color: var(--texte2); }
.pf-charge { color: var(--texte2); font: var(--valeur); letter-spacing: .06em; }

/* Une page : la vignette (case carrée, la page tournée dedans), son numéro ; sélectionnée : cadre orange et coche */
.pf-page { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; -webkit-touch-callout: none; }
.pf-case { position: relative; width: 100%; aspect-ratio: 1; display: grid; place-items: center; border-radius: 10px; transition: background .2s var(--courbe), box-shadow .2s var(--courbe); }
.pf-page:hover .pf-case { background: rgba(242, 240, 235, .04); }
/* La page : sa taille est calculée (app : taillePage) pour tenir dans la case une fois tournée */
.pf-case img, .pf-case .pf-blanche { position: absolute; left: 50%; top: 50%; translate: -50% -50%; transition: transform .35s var(--courbe); pointer-events: none; }
.pf-case img { object-fit: fill; box-shadow: 0 2px 8px rgba(0, 0, 0, .5); }
.pf-case .pf-blanche { background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .5); }
.pf-case .pf-attente { width: 50%; aspect-ratio: .71; border-radius: 2px; background: rgba(242, 240, 235, .08); }
.pf-num { font: 500 10.5px/1 var(--mono); letter-spacing: .06em; color: var(--texte2); }
.pf-page.choisie .pf-case { background: rgba(255, 90, 31, .08); box-shadow: inset 0 0 0 1.5px var(--orange); }
.pf-page.choisie .pf-num { color: var(--orange); }
.pf-coche { position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--orange); color: var(--noir); opacity: 0; transform: scale(.6); transition: opacity .2s, transform .2s; }
.pf-coche svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.pf-page.choisie .pf-coche { opacity: 1; transform: none; }
/* Glisser-déposer : la page tenue s'efface, une barre orange montre où elle va */
.pf-page.tenue { opacity: .3; }
.pf-fantome { position: fixed; z-index: 50; width: 84px; pointer-events: none; transform: translate(-50%, -60%) rotate(-3deg); filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .6)); }
.pf-fantome img { width: 100%; display: block; }
.pf-fantome b { position: absolute; top: -8px; right: -8px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; display: grid; place-items: center; background: var(--orange); color: var(--noir); font: 600 11px/1 var(--mono); }
.pf-marque { position: absolute; width: 3px; border-radius: 2px; background: var(--orange); pointer-events: none; display: none; }
.pf-marque.visible { display: block; }

.pf-etat { height: 2lh; margin: 0; overflow: hidden; }   /* deux lignes fixes : le nom du fichier peut être long */
.pf-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.pf-actions .pastille { cursor: pointer; }
.pf-actions .pastille:hover { translate: none; }
.pf-actions .pastille:disabled { opacity: .3; cursor: default; }

/* À droite : les blocs */
.pf-bloc { display: flex; flex-direction: column; gap: 10px; }
.pf-bloc .groupe { padding-bottom: 0; }
.pf-boutons { display: flex; flex-wrap: wrap; gap: 8px; }
.pf-boutons .pastille { cursor: pointer; }
.pf-boutons .pastille:hover { translate: none; }
.pf-boutons .pastille:disabled { opacity: .3; cursor: default; }
.pf-boutons .pastille svg.miroir { transform: scaleX(-1); }
.pf-ligne { display: flex; gap: 8px; align-items: center; }
.pf-ligne .saisie { flex: 1; min-width: 0; }
.pf-ligne .saisie:disabled { opacity: .3; }
.pf-grise { opacity: .3; pointer-events: none; }
.pf-infos { display: flex; flex-direction: column; }
.pf-infos .rangee { cursor: default; }
.pf-infos .rangee:hover .nom { color: var(--texte2); }
.pf-champs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* La loupe, en haut à gauche de chaque page (au survol sur ordinateur, toujours au doigt) */
.pf-loupe { position: absolute; top: 6px; left: 6px; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: zoom-in;
  background: rgba(18, 16, 14, .72); color: var(--papier); opacity: 0; transition: opacity .2s var(--courbe); }
.pf-loupe svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pf-page:hover .pf-loupe, .pf-loupe:focus-visible { opacity: 1; }
@media (hover: none) { .pf-loupe { opacity: .85; } }

/* La page en grand : un voile sombre, la page au centre, son numéro, fermer et les flèches */
.pf-grand { position: fixed; inset: 0; z-index: 40; cursor: zoom-out; display: grid; place-items: center; background: rgba(13, 12, 11, .88); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  opacity: 0; transition: opacity .3s var(--courbe); }
.pf-grand.ouvert { opacity: 1; }
.pf-grand-page { display: grid; place-items: center; min-width: 40px; min-height: 40px; }
.pf-grand-page canvas { display: block; box-shadow: 0 12px 40px rgba(0, 0, 0, .6); }
.pf-grand-num { position: absolute; bottom: calc(22px + env(safe-area-inset-bottom)); left: 50%; translate: -50% 0; font: 500 11px/1 var(--mono); letter-spacing: .1em; color: var(--texte2); }
.pf-grand .rond { position: absolute; cursor: pointer; background: rgba(18, 16, 14, .72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.pf-grand-prec, .pf-grand-suiv { top: 50%; translate: 0 -50%; }
.pf-grand-prec { left: 12px; } .pf-grand-suiv { right: 12px; }
.pf-grand .rond:disabled { opacity: .25; cursor: default; }