/* Outil · Pourcentages (Percentages), id pourcentages : seulement ce qui lui est propre (le reste vient de app/kit.css).
   Préfixe des classes : pc-
   Tout sur un écran (demande du propriétaire) : six cartes compactes, chacune un titre court et une formule sur une ligne
   (deux champs, l'opération, = et le résultat ; toucher le résultat le copie). Deux colonnes sur ordinateur, une au
   téléphone. Titres et formules centrés ; le résultat a une largeur fixe : rien ne bouge quel que soit le nombre (un très
   long résultat se coupe avec « … »). .pc-inverse : le prix avant une hausse, le résultat d'abord. */
.pc { max-width: 920px; justify-content: center; }
.pc-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pc-calcul { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--filet-doux); }
.pc-titre { font: var(--repere); letter-spacing: .1em; color: var(--texte2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
.pc-formule { display: flex; justify-content: center; align-items: center; gap: 8px; height: 44px; }   /* centrée dans sa carte */
.pc-formule .pc-trou { flex: 0 0 84px; }
/* Le résultat a une largeur fixe : la formule centrée ne bouge pas quand il s'allonge (un très long nombre finit par « … ») */
.pc-formule .pc-resultat { flex: 0 0 136px; text-align: left; }
.pc-inverse .pc-resultat { text-align: right; }   /* « ? + 20 % = 120 » : le résultat d'abord, collé au « + » */
.pc-op { font: 500 15px/1 var(--corps); color: var(--texte2); white-space: nowrap; }
.pc-egal { font: 400 18px/1 var(--corps); color: var(--texte2); opacity: .7; }
.pc-trou { width: 100%; min-width: 0; height: 44px; border: 0; outline: none; border-radius: 12px; background: var(--encre); box-shadow: inset 0 0 0 1px var(--filet); padding: 0 8px;
  text-align: center; color: var(--papier); font: 600 17px/1 var(--display); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.pc-trou:focus { box-shadow: inset 0 0 0 1.5px var(--papier); }
.pc-resultat { min-width: 0; height: 44px; padding: 0; border: 0; background: none; cursor: copy; text-align: right; overflow: hidden; text-overflow: ellipsis;
  font: 700 22px/44px var(--display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--peche); white-space: nowrap; }
.pc-resultat.pc-baisse { color: var(--papier); }
@media (max-width: 719px) {
  .pc { justify-content: flex-start; }
  .pc-grille { grid-template-columns: 1fr; gap: 8px; }
  .pc-calcul { gap: 8px; padding: 10px 14px 12px; }
  .pc-formule { gap: 6px; height: 40px; }
  .pc-formule .pc-trou { flex-basis: 68px; }
  .pc-formule .pc-resultat { flex-basis: 104px; }
  .pc-trou { height: 40px; font-size: 16px; }
  .pc-op { font-size: 14px; }
  .pc-resultat { height: 40px; font-size: 18px; line-height: 40px; }
}