/*
 * Feuille de style unique — aucune bibliothèque, aucun CDN : le conteneur tourne
 * sans accès réseau sortant.
 *
 * Le thème clair est défini sur :root, le thème sombre ne redéfinit que les
 * jetons de couleur. Contrastes vérifiés au-delà de 4,5:1 pour le texte et de
 * 3:1 pour les bordures de touches.
 */

:root {
  color-scheme: light dark;

  --fond: #f4f5f7;
  --surface: #ffffff;
  --surface-creuse: #eceef1;
  --texte: #16181d;
  --texte-attenue: #5d6470;
  --bordure: #d5d9e0;
  --touche: #ffffff;
  --touche-survol: #eef0f4;
  --touche-active: #e0e4ea;
  --fonction: #e6e9ee;
  --fonction-survol: #dce0e7;
  --operateur: #e8eefc;
  --operateur-texte: #17408b;
  --accent: #1f5fd0;
  --accent-texte: #ffffff;
  --accent-survol: #1a51b3;
  --focus: #0b57d0;
  --ombre: 0 1px 2px rgba(16, 20, 30, 0.06), 0 8px 24px rgba(16, 20, 30, 0.08);

  --rayon: 14px;
  --touche-hauteur: 3.5rem;
  --police: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fond: #101116;
    --surface: #191b22;
    --surface-creuse: #22252e;
    --texte: #f2f3f6;
    --texte-attenue: #a3aab8;
    --bordure: #333844;
    --touche: #262a34;
    --touche-survol: #303542;
    --touche-active: #3a4050;
    --fonction: #2f3440;
    --fonction-survol: #383e4c;
    --operateur: #223151;
    --operateur-texte: #b7cdff;
    --accent: #4d8bff;
    --accent-texte: #0b1220;
    --accent-survol: #6a9dff;
    --focus: #8ab4ff;
    --ombre: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 30px rgba(0, 0, 0, 0.45);
  }
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  min-height: 100svh;
  padding: 1.5rem 1rem calc(1.5rem + env(safe-area-inset-bottom));
  background: var(--fond);
  color: var(--texte);
  font-family: var(--police);
  -webkit-font-smoothing: antialiased;
}

/* ------------------------------------------------------------------ carte */

.calculatrice {
  width: min(24rem, 100%);
  padding: 1.25rem;
  border: 1px solid var(--bordure);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--ombre);
}

.titre {
  margin: 0 0 0.75rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texte-attenue);
}

/* --------------------------------------------------------------- affichage */

.ecran {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;
  min-height: 5.5rem;
  padding: 0.875rem 1rem;
  border-radius: var(--rayon);
  background: var(--surface-creuse);
  /* Les chiffres ne doivent pas faire sautiller la mise en page. */
  font-variant-numeric: tabular-nums;
}

.ecran__expression {
  min-height: 1.375rem;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  font-size: 0.9375rem;
  line-height: 1.375rem;
  color: var(--texte-attenue);
  scrollbar-width: none;
}

.ecran__expression::-webkit-scrollbar {
  display: none;
}

.ecran__principal {
  max-width: 100%;
  overflow-x: auto;
  white-space: nowrap;
  font-size: clamp(2rem, 9vw, 2.75rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  scrollbar-width: none;
}

.ecran__principal::-webkit-scrollbar {
  display: none;
}

.ecran--erreur .ecran__expression,
.ecran--erreur .ecran__principal {
  color: #b3261e;
}

@media (prefers-color-scheme: dark) {
  .ecran--erreur .ecran__expression,
  .ecran--erreur .ecran__principal {
    color: #ff9d94;
  }
}

/* ----------------------------------------------------------------- clavier */

.clavier {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  margin-top: 1rem;
}

.touche {
  min-height: var(--touche-hauteur);
  padding: 0.5rem;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  background: var(--touche);
  color: var(--texte);
  font-family: inherit;
  font-size: 1.25rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  /* Évite le zoom au double-tap et le surlignage bleu sur mobile. */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 120ms ease, transform 60ms ease;
}

.touche:hover {
  background: var(--touche-survol);
}

.touche:active,
.touche.touche--enfoncee {
  background: var(--touche-active);
  transform: translateY(1px);
}

.touche:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.touche--fonction {
  background: var(--fonction);
  color: var(--texte-attenue);
  font-size: 1.0625rem;
}

.touche--fonction:hover {
  background: var(--fonction-survol);
}

.touche--operateur {
  background: var(--operateur);
  color: var(--operateur-texte);
  font-size: 1.375rem;
}

.touche--operateur:hover {
  filter: brightness(0.97);
  background: var(--operateur);
}

.touche--egal {
  border-color: transparent;
  background: var(--accent);
  color: var(--accent-texte);
  font-size: 1.375rem;
}

.touche--egal:hover,
.touche--egal:active,
.touche--egal.touche--enfoncee {
  background: var(--accent-survol);
}

/* ------------------------------------------------------------------- pied */

.aide {
  margin: 1rem 0 0;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--texte-attenue);
}

kbd {
  padding: 0.05em 0.35em;
  border: 1px solid var(--bordure);
  border-radius: 5px;
  background: var(--surface-creuse);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
}

.pied {
  font-size: 0.75rem;
  color: var(--texte-attenue);
}

.pied__version {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.02em;
}

@media (prefers-reduced-motion: reduce) {
  .touche {
    transition: none;
  }

  .touche:active,
  .touche.touche--enfoncee {
    transform: none;
  }
}