/* Outil · Calculatrice (Calculator) : seulement ce qui lui est propre (le reste vient de app/kit.css).
   Préfixe des classes : ca-
   Téléphone : l'écran, le pavé, puis l'historique. Ordinateur : l'écran et le pavé à gauche, l'historique à droite. */
.ca .outil-fixe { align-items: stretch; }
/* Centré en hauteur quand il y a la place ; sinon la colonne part du haut et défile (jamais le haut coupé sous le titre) */
@media (min-width: 960px) {
  .ca .outil-fixe { justify-content: flex-start; }
  .ca .outil-fixe > :first-child { margin-top: auto; }
  .ca .outil-fixe > :last-child { margin-bottom: auto; }
}

/* L'écran : l'expression (une ligne qui défile), le résultat en grand (touché = copié) */
.ca-ecran { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; border-radius: 18px; background: var(--encre); box-shadow: inset 0 0 0 1px var(--filet); }
.ca-ligne { display: flex; align-items: center; gap: 10px; min-height: 32px; }
.ca-expr { flex: 1; min-width: 0; margin: 0; overflow-x: auto; white-space: nowrap; text-align: right; scrollbar-width: none;
  font: 500 15px/1.4 var(--mono); letter-spacing: .02em; color: var(--texte2); }
.ca-expr::-webkit-scrollbar { display: none; }
.ca-retour { width: 32px; height: 32px; }
.ca-resultat { border: 0; background: none; padding: 0; min-height: 1.2em; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: copy;
  font: 700 clamp(34px, 11vw, 52px)/1.15 var(--display); letter-spacing: -.03em; color: var(--peche); transition: color .3s var(--courbe); }
.ca-resultat.pose { color: var(--papier); }
.ca-resultat:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; border-radius: 8px; }

/* Le pavé : 4 × 5, les opérateurs en contour, « = » plein */
.ca-touches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.ca-touche { height: clamp(52px, 8.5vh, 68px); border: 0; border-radius: 16px; background: rgba(242, 240, 235, .06); color: var(--papier);
  font: 500 22px/1 var(--display); cursor: pointer; transition: background .25s var(--courbe), transform .15s var(--courbe); touch-action: manipulation; }
.ca-touche:hover { background: rgba(242, 240, 235, .1); }
.ca-touche:active, .ca-touche.appui { transform: scale(.96); background: rgba(242, 240, 235, .16); }
.ca-touche.op { background: transparent; box-shadow: inset 0 0 0 1px var(--filet); color: var(--peche); }
.ca-touche.efface { color: var(--texte2); font: 500 16px/1 var(--mono); }
.ca-touche.egal { background: var(--papier); color: var(--noir); box-shadow: none; }
.ca-touche.egal:hover { background: var(--blanc); }
.ca-touche:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

/* L'historique */
.ca-histo .nom { font: 500 13px/1.3 var(--mono); color: var(--texte2); overflow-wrap: anywhere; }
.ca-histo .val { font: 500 15px/1.3 var(--mono); color: var(--papier); }
.ca-vide { margin: 0; padding: 11px 0; font: 400 14px/1.5 var(--corps); color: var(--texte2); }
.ca-effacer { align-self: flex-start; margin-top: 4px; }
.ca-effacer:hover { translate: none; }

/* Simple / Scientifique : en petit, sous l'écran */
.ca-mode { align-self: flex-start; display: inline-flex; padding: 3px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--filet); margin: -8px 0 -6px; }
.ca-mode button { border: 0; background: none; border-radius: 999px; padding: 6px 12px; font: var(--valeur); line-height: 1; letter-spacing: .06em;
  color: var(--texte2); transition: background .4s var(--courbe), color .4s var(--courbe); }
.ca-mode button[aria-pressed="true"] { background: var(--papier); color: var(--noir); }
.ca-mode button:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

/* Les touches scientifiques : 5 × 3, plus basses, en mono */
.ca-science { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: -10px; }
.ca-science[hidden] { display: none; }
.ca-touche.sci { height: clamp(40px, 6vh, 50px); border-radius: 12px; background: transparent; box-shadow: inset 0 0 0 1px var(--filet-doux);
  color: var(--papier); font: 500 15px/1 var(--mono); letter-spacing: .02em; }
.ca-touche.sci:hover { background: rgba(242, 240, 235, .06); }
.ca-touche.sci[data-touche="deg"] { color: var(--peche); }

/* L'unité des angles, discrète, dans l'écran (mode scientifique) */
.ca-unite { flex: none; font: 500 10px/1 var(--mono); letter-spacing: .1em; color: var(--texte2); }

/* Scientifique : tout se resserre selon la hauteur de l'écran (écran, pavé), pour tenir sans défiler sur un ordinateur */
.ca.sci .ca-ecran { padding: 14px 18px; }
.ca.sci .ca-resultat { font-size: clamp(30px, 6.5vh, 48px); }
.ca.sci .ca-touches { gap: 8px; }
.ca.sci .ca-science { gap: 6px; }
.ca.sci .ca-touche:not(.sci) { height: clamp(40px, calc((100vh - 520px) / 5), 56px); border-radius: 14px; }
.ca.sci .ca-touche:not(.sci):not(.efface) { font-size: 20px; }
.ca.sci .ca-touche.sci { height: clamp(32px, 4.4vh, 40px); border-radius: 10px; font-size: 14px; }