* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; padding: 0;
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  overflow: hidden;
}

/* Fond ciel bleu + prairie, en permanence */
body { background: linear-gradient(180deg, #87ceeb 0%, #b6e1ff 45%, #a8e063 60%, #7ec850 100%); }

/* =============== Décor =============== */
.farm {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
}
.sky {
  position: absolute; top: 0; left: 0; right: 0; height: 60%;
  background: linear-gradient(180deg, rgba(135,206,235,0.9) 0%, rgba(207,238,255,0.6) 100%);
}
.ground {
  position: absolute; bottom: 0; left: 0; right: 0; height: 40%;
  background:
    repeating-linear-gradient(90deg, rgba(86,160,66,0.25) 0 6px, transparent 6px 14px),
    linear-gradient(180deg, #8cc85a 0%, #5fa141 100%);
}

.sun {
  position: absolute; top: 22px; right: 28px;
  font-size: 60px;
  filter: drop-shadow(0 0 18px rgba(255, 200, 0, 0.6));
  animation: sunpulse 5s ease-in-out infinite;
}
@keyframes sunpulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }

/* Poules (SVG corps complet) */
.chicken {
  position: absolute;
  width: 110px; height: 92px;
  filter: drop-shadow(0 4px 4px rgba(0,0,0,0.25));
  will-change: transform, left, right;
  z-index: 2;
}
.chicken svg { width: 100%; height: 100%; display: block; }

/* c1 & c3 : gauche → droite (SVG flippé pour regarder à droite) */
.c1 { bottom: 12%; left: -15%; animation: walkR 18s linear infinite,    bob 0.45s ease-in-out infinite alternate; }
.c3 { bottom: 4%;  left: -15%; animation: walkR 26s linear infinite 3s, bob 0.40s ease-in-out infinite alternate; }
/* c2 & c4 : droite → gauche (orientation native du SVG) */
.c2 { bottom: 22%; right: -15%; animation: walkL 22s linear infinite,    bob 0.55s ease-in-out infinite alternate; }
.c4 { bottom: 30%; right: -15%; animation: walkL 30s linear infinite 5s, bob 0.60s ease-in-out infinite alternate; }

@keyframes walkR { 0% { left: -15%; }  100% { left: 115%; } }
@keyframes walkL { 0% { right: -15%; } 100% { right: 115%; } }
@keyframes bob   { 0% { transform: translateY(0); } 100% { transform: translateY(-6px); } }

.c1 svg, .c3 svg { transform: scaleX(-1); }

/* Œufs pondus */
.egg {
  position: fixed;
  font-size: 24px;
  pointer-events: none;
  animation: eggdrop 1.6s cubic-bezier(.3,.1,.4,1) forwards, eggfade 5s linear forwards;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.25));
  will-change: transform, opacity;
  z-index: 3;
}
@keyframes eggdrop {
  0%   { transform: translateY(0) rotate(0deg); }
  60%  { transform: translateY(90px) rotate(40deg); }
  70%  { transform: translateY(80px) rotate(35deg); }
  100% { transform: translateY(100px) rotate(35deg); }
}
@keyframes eggfade { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }

/* =============== Écran de connexion =============== */
.login-wrap {
  position: relative; z-index: 10;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;           /* paysage / écran large : centré */
  padding: 24px 20px;
}
.only-landscape { display: block; }

/* Portrait (largeur < hauteur) : on colle en haut et on masque le logo */
@media (orientation: portrait) {
  .login-wrap {
    justify-content: flex-start;
    padding: calc(env(safe-area-inset-top, 0) + 12px) 20px 20px;
  }
  .only-landscape { display: none !important; }
}

.logo {
  text-align: center;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.35);
  margin-bottom: 14px;
  margin-top: 4px;
}
.logo-img {
  display: block; margin: 0 auto 6px;
  width: 90px; height: auto;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,0.35));
}
.logo-emoji {
  font-size: 72px; line-height: 1; margin-bottom: 6px;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.25));
}
.logo h1 { margin: 0; font-size: 34px; font-weight: 800; letter-spacing: 1px; }
.logo .tag { margin: 4px 0 0; font-size: 15px; opacity: 0.95; }

.login-card {
  background: rgba(255,255,255,0.96);
  border-radius: 18px;
  padding: 26px 22px;
  width: 100%;
  max-width: 380px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.25);
  display: flex;
  flex-direction: column;
  gap: 14px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.login-card label {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 15px; color: #374151; font-weight: 600;
}
.login-card input {
  padding: 14px; font-size: 18px; font-family: inherit;
  border: 2px solid #e5e7eb; border-radius: 10px; background: #fff;
}
.login-card input:focus {
  outline: none; border-color: #15803d;
  box-shadow: 0 0 0 3px rgba(21,128,61,0.15);
}
.pbtn {
  margin-top: 6px;
  padding: 16px; font-size: 19px; font-weight: 700;
  color: #fff; background: #15803d;
  border: 0; border-radius: 12px; cursor: pointer;
  box-shadow: 0 3px 0 rgba(0,0,0,0.1);
}
.pbtn:active { transform: translateY(1px); box-shadow: 0 2px 0 rgba(0,0,0,0.1); }

.err {
  padding: 10px 12px;
  background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca;
  border-radius: 8px; font-size: 14px;
}

@media (max-height: 640px) {
  .logo { margin-bottom: 12px; }
  .logo-img { width: 92px; }
  .logo-emoji { font-size: 54px; }
  .logo h1 { font-size: 28px; }
  .chicken { width: 86px; height: 72px; }
}