/* ===================================================================
   Connexion — Gestion d'inventaire
   Mobile-first : le layout est pensé pour occuper tout l'écran sur
   téléphone (edge-to-edge). Sur écran large (desktop, tablette), la
   page se transforme en carte centrée, uniquement pour faciliter les
   tests — l'usage réel visé reste l'application mobile.
   =================================================================== */

:root {
  --bg: #EEF1F7;
  --bg-deep: #E3E8F1;
  --surface: #FFFFFF;
  --ink: #10162B;
  --muted: #6B7385;
  --line: #DEE3ED;
  --accent: #1E4FD6;
  --accent-ink: #FFFFFF;
  --pulse: #FF8A3D;
  --error: #E5484D;

  --radius-lg: 26px;
  --radius-md: 16px;

  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
}

* { box-sizing: border-box; }

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

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

/* ---------- Page wrapper ---------- */
.page {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
}

/* ---------- Phone / card ---------- */
.phone {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  /* zone de sécurité iOS (encoche / barre du bas) */
  padding-bottom: env(safe-area-inset-bottom);
  padding-top: env(safe-area-inset-top);
  /* permet aux enfants de se dimensionner par rapport à la largeur
     réelle de la carte plutôt que par rapport au viewport entier
     (voir les @container plus bas : c'est ce qui fait que le contenu
     s'agrandit vraiment sur tablette, pas seulement le cadre). */
  container-type: inline-size;
  container-name: app-frame;
}

/* À partir d'une largeur suffisante (tablette, desktop), on bascule
   sur une présentation "carte" centrée dont la largeur suit le
   viewport (jusqu'à un plafond) au lieu de rester figée à la taille
   d'un téléphone. */
@media (min-width: 560px) {
  .page {
    align-items: center;
    justify-content: center;
    padding: clamp(24px, 4vw, 48px);
    background: radial-gradient(circle at 50% -10%, var(--bg-deep), var(--bg) 60%);
  }
  .phone {
    width: min(90vw, 620px);
    min-height: min(880px, 92vh);
    min-height: min(880px, 92dvh);
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 2px rgba(16,22,43,0.04), 0 24px 60px -20px rgba(16,22,43,0.18);
    border: 1px solid var(--line);
    padding-top: 0;
  }
}

/* Vraie tablette (portrait/paysage) : la carte s'élargit encore un
   peu plus, jusqu'au plafond de 620px. */
@media (min-width: 820px) {
  .phone { width: min(70vw, 620px); }
}

/* ---------------------------------------------------------------
   Container queries : le contenu grandit avec la largeur réelle de
   .phone (et non celle du viewport), donc l'effet est le même que
   la carte soit centrée sur tablette ou en plein écran sur mobile.
   Repli silencieux sur les tailles "mobile" si non supporté par le
   navigateur (progressive enhancement).
   --------------------------------------------------------------- */
@container app-frame (min-width: 460px) {
  .head { padding-left: 40px; padding-right: 40px; padding-top: 44px; }
  h1 { font-size: 30px; }
  .sub { font-size: 15px; }
  .body { padding-left: 40px; padding-right: 40px; gap: 28px; }
  .field input[type="text"] { font-size: 17px; padding: 16px 18px; }
  .dots { gap: 24px; }
  .dot { width: 16px; height: 16px; }
  .keypad { gap: 16px; }
  .key { font-size: 22px; padding: 20px 0; }
  .key .sub-letters { font-size: 9px; }
  .submit { font-size: 16px; padding: 18px; }
}

/* ---------- Header / motif code-barres (signature visuelle) ---------- */
.head {
  position: relative;
  padding: clamp(24px, 6dvh, 44px) clamp(20px, 6vw, 28px) 20px;
  overflow: hidden;
  flex-shrink: 0;
}

.barcode {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  gap: 3px;
  opacity: 0.07;
  overflow: hidden;
}
.barcode span {
  display: block;
  background: var(--ink);
  height: 100%;
  flex-shrink: 0;
}

.scanline {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--pulse), transparent);
  animation: sweep 1.6s cubic-bezier(.4,0,.2,1) 1;
  animation-delay: .15s;
  opacity: 0;
}
@keyframes sweep {
  0%   { top: 0%;   opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

.mark {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}
.mark svg { width: 20px; height: 20px; }

.eyebrow {
  position: relative;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 6px;
}
h1 {
  position: relative;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(22px, 6vw, 26px);
  line-height: 1.15;
  margin: 0;
  letter-spacing: -0.01em;
}
.sub {
  position: relative;
  font-size: 14px;
  color: var(--muted);
  margin: 6px 0 0;
}

/* ---------- Body ---------- */
.body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 4px clamp(20px, 6vw, 28px) 28px;
  gap: clamp(16px, 3dvh, 26px);
  min-height: 0; /* permet à .phone de scroller si besoin plutôt que de casser le layout */
}

.field label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: .01em;
  margin-bottom: 8px;
}
.field input[type="text"] {
  width: 100%;
  font-family: var(--font-body);
  font-size: 16px; /* >=16px : évite le zoom auto de Safari iOS au focus */
  font-weight: 500;
  color: var(--ink);
  background: var(--bg);
  border: 1.5px solid transparent;
  border-radius: var(--radius-md);
  padding: 14px 16px;
  outline: none;
  transition: border-color .15s ease, background .15s ease;
}
.field input[type="text"]::placeholder { color: #A6ADBB; font-weight: 400; }
.field input[type="text"]:focus {
  background: var(--surface);
  border-color: var(--accent);
}

/* ---------- PIN dots ---------- */
.pin-block { flex-shrink: 0; }
.pin-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 14px;
}
.pin-head label {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: .01em;
}
.pin-status {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .08em;
  color: #B7BCC8;
  text-transform: uppercase;
}

.dots {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-bottom: 10px;
}
.dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: transparent;
  transition: transform .18s cubic-bezier(.34,1.56,.64,1), background .18s ease, border-color .18s ease;
}
.dot.filled {
  background: var(--pulse);
  border-color: var(--pulse);
  transform: scale(1.12);
}
.dots.shake { animation: shake .38s ease; }
@keyframes shake {
  0%,100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(7px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(3px); }
}
.dots.shake .dot { border-color: var(--error); }

.error-msg {
  min-height: 16px;
  text-align: center;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--error);
  margin: 0 0 10px;
  opacity: 0;
  transition: opacity .15s ease;
}
.error-msg.visible { opacity: 1; }

/* ---------- Keypad ---------- */
.keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(8px, 2vw, 14px);
}
.key {
  border: none;
  border-radius: var(--radius-md);
  background: var(--bg);
  font-family: var(--font-display);
  font-size: clamp(17px, 4.5vw, 20px);
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  padding: clamp(12px, 3.4dvh, 18px) 0;
  transition: transform .08s ease, background .08s ease;
}
.key:active { transform: scale(0.94); background: #E4E8F1; }
.key .sub-letters {
  display: block;
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 500;
  letter-spacing: .1em;
  color: #A6ADBB;
  margin-top: 2px;
}
.key.func {
  background: transparent;
  color: var(--muted);
  font-size: 14px;
}
.key.func:active { background: var(--bg); }
.key.func svg { width: 20px; height: 20px; }

/* ---------- Submit ---------- */
.submit {
  width: 100%;
  border: none;
  border-radius: var(--radius-md);
  padding: 16px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  color: var(--accent-ink);
  background: var(--ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background .15s ease, opacity .15s ease, transform .08s ease;
}
.submit:active { transform: scale(0.98); }
.submit:disabled { background: #C7CBD6; cursor: not-allowed; }
.submit.loading { background: var(--accent); }

.spinner {
  width: 15px; height: 15px;
  border: 2px solid rgba(255,255,255,0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .7s linear infinite;
  display: none;
}
.submit.loading .spinner { display: inline-block; }
.submit.loading .submit-label { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }

.foot {
  text-align: center;
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 2px;
}
.foot button {
  background: none; border: none; padding: 0;
  font: inherit; color: var(--accent);
  font-weight: 600; cursor: pointer;
}

*:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .scanline, .dot, .key, .submit { animation: none !important; transition: none !important; }
}

/* Très petites hauteurs (mode paysage, vieux téléphones) */
@media (max-height: 650px) {
  .head { padding-top: 16px; padding-bottom: 10px; }
  h1 { font-size: 20px; }
  .sub { display: none; }
  .body { gap: 12px; padding-bottom: 16px; }
}