/* ------------------------------------------------------------------
   Temps d'entrepôt — application de saisie
   Même identité que Facturation 3PL (Outfit, lime, panneaux presque noirs),
   en version « gants » : toujours sombre, fort contraste, cibles de 64 px
   et plus, deux ou trois colonnes au maximum, rien à glisser.
   ------------------------------------------------------------------ */

@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
  src: url('lib/outfit-var.woff2') format('woff2');
}

:root {
  --fond: #121410;
  --surface: #22251f;
  --surface-2: #2d3128;
  --bord: #3c4136;
  --texte: #f4f6ef;
  --doux: #a9b09f;
  --lime: #c6f04c;
  --sur-lime: #1d1f1b;
  --erreur: #ee8f88;
  --duree: .15s;
  color-scheme: dark;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }

html, body { height: 100%; }
body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font: 16px/1.45 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
  overscroll-behavior: none;
  user-select: none;
  -webkit-user-select: none;
}
input { user-select: text; -webkit-user-select: text; }

.app {
  min-height: 100%;
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  padding: env(safe-area-inset-top, 0px) max(16px, env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) max(16px, env(safe-area-inset-left, 0px));
}

button { font: inherit; color: inherit; }
button:focus-visible, input:focus-visible { outline: 3px solid var(--lime); outline-offset: 2px; }
button:disabled { opacity: .5; }

/* ---------- en-tête ---------- */
.entete { display: flex; align-items: center; gap: 12px; padding: 18px 2px 8px; min-height: 84px; }
.retour {
  width: 60px; height: 60px; flex: 0 0 60px; border-radius: 18px; border: 1.5px solid var(--bord);
  background: var(--surface); font-size: 26px; cursor: pointer; display: grid; place-items: center;
}
.titre { flex: 1; min-width: 0; }
.titre small { display: block; color: var(--doux); font-size: 14px; text-transform: lowercase; letter-spacing: .03em; }
.titre strong { display: block; font-size: 27px; font-weight: 500; letter-spacing: -.02em; line-height: 1.15; }

.corps { flex: 1; display: flex; flex-direction: column; gap: 14px; padding: 8px 0 22px; }
.espace { flex: 1; }

/* ---------- tuiles ---------- */
.grille { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (min-width: 640px) { .grille { grid-template-columns: repeat(3, 1fr); } }
.tuile {
  background: var(--surface); border: 1.5px solid var(--bord); border-radius: 22px;
  min-height: 112px; padding: 16px; cursor: pointer; text-align: left;
  display: flex; flex-direction: column; justify-content: space-between; gap: 10px;
  transition: background var(--duree), transform var(--duree), border-color var(--duree);
}
.tuile:active { transform: scale(.96); background: var(--surface-2); }
.tuile .nom { font-size: 20px; font-weight: 500; line-height: 1.2; }
.tuile svg { width: 36px; height: 36px; stroke: var(--lime); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tuile.large { grid-column: 1 / -1; min-height: 92px; justify-content: center; }

.choix-client {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 66px; padding: 10px 18px;
  border-radius: 18px; border: 1.5px solid var(--bord); background: var(--surface); cursor: pointer; text-align: left;
}
.choix-client small { color: var(--doux); font-size: 14px; }
.choix-client strong { flex: 1; min-width: 0; font-size: 18px; font-weight: 500; }
.choix-client span { color: var(--lime); font-size: 15px; }

/* ---------- gros boutons ---------- */
.gros-bouton {
  width: 100%; min-height: 92px; border-radius: 24px; border: none; cursor: pointer;
  font-size: 26px; font-weight: 600; letter-spacing: -.01em; background: var(--lime); color: var(--sur-lime);
  transition: transform var(--duree);
}
.gros-bouton:active { transform: scale(.97); }
.gros-bouton.secondaire {
  min-height: 70px; font-size: 19px; font-weight: 500; background: var(--surface); color: var(--texte); border: 1.5px solid var(--bord);
}

.liens { display: flex; flex-direction: column; align-items: center; }
.lien {
  background: none; border: none; color: var(--lime); font-size: 16px; cursor: pointer; padding: 14px;
  min-height: 52px; text-decoration: underline; text-underline-offset: 3px;
}

/* ---------- chrono et durée ---------- */
.chrono { text-align: center; padding: 18px 0 6px; }
.chrono .temps { font-size: clamp(64px, 20vw, 104px); font-weight: 250; letter-spacing: -.04em; line-height: 1; }
.chrono .tache { font-size: 24px; font-weight: 500; margin-top: 10px; }
.chrono .contexte { color: var(--doux); font-size: 15px; margin-top: 6px; }

.duree { text-align: center; font-size: clamp(56px, 17vw, 84px); font-weight: 250; letter-spacing: -.04em; line-height: 1; padding: 8px 0; }
.pas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.jours { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pas button, .jours button, .clavier button {
  min-height: 66px; border-radius: 18px; border: 1.5px solid var(--bord); background: var(--surface);
  font-size: 19px; font-weight: 500; cursor: pointer;
}
.pas button:active, .jours button:active, .clavier button:active { background: var(--surface-2); }
.jours button.actif { background: var(--lime); color: var(--sur-lime); border-color: var(--lime); }

.champ { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--doux); }
.champ input {
  font: inherit; font-size: 21px; padding: 15px 16px; border-radius: 16px; border: 1.5px solid var(--bord);
  background: var(--surface); color: var(--texte); width: 100%; min-width: 0;
}
.champ input::placeholder { color: var(--doux); opacity: .7; }

/* ---------- NIP et code ---------- */
.clavier { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 420px; width: 100%; margin: 0 auto; }
.clavier button { min-height: 76px; font-size: 30px; font-weight: 400; }
.points { display: flex; justify-content: center; gap: 16px; padding: 14px 0 4px; }
.points span { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--doux); }
.points span.plein { background: var(--lime); border-color: var(--lime); }
.points.erreur span { border-color: var(--erreur); }

.note { color: var(--doux); font-size: 15px; text-align: center; margin: 0; }
.note.erreur { color: var(--erreur); }
.texte { color: var(--doux); font-size: 17px; text-align: center; margin: 0; max-width: 36ch; align-self: center; }

/* ---------- confirmation ---------- */
.confirmation { text-align: center; padding: 34px 6px 8px; }
.confirmation .rond {
  width: 96px; height: 96px; border-radius: 50%; background: var(--lime); color: var(--sur-lime);
  margin: 0 auto 18px; display: grid; place-items: center; font-size: 48px; font-weight: 600;
}
.confirmation .grand { font-size: 44px; font-weight: 300; letter-spacing: -.03em; }
.confirmation p { color: var(--doux); margin: 6px 0 0; font-size: 17px; }

/* ---------- mes heures ---------- */
.total { text-align: center; color: var(--doux); font-size: 15px; }
.total strong { display: block; color: var(--texte); font-size: 50px; font-weight: 250; letter-spacing: -.03em; line-height: 1.1; }
.liste { display: flex; flex-direction: column; border-radius: 18px; background: var(--surface); overflow: hidden; }
.liste > div { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 13px 16px; border-bottom: 1px solid var(--bord); font-size: 16px; }
.liste > div:last-child { border-bottom: none; }
.liste small { color: var(--doux); font-size: 13px; }

.toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  background: var(--texte); color: var(--fond); padding: 13px 22px; border-radius: 999px;
  font-size: 15px; font-weight: 500; max-width: calc(100% - 32px); text-align: center; z-index: 10;
}