/* ============================================================
   PHARMACIE NANA DIARRA - Page de connexion (v2)
   Style clair et elegant : accroche + tuiles a gauche, carte
   « Bienvenue » a droite. Couleurs PLEINES, police Inter,
   animations douces, 100 % responsive.
   ============================================================ */

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { min-height: 100%; }
body {
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  color: #0F172A;
  background: #F5F8F6;
  overflow-x: hidden;
  position: relative;
}

/* ---------- Formes decoratives flottantes (unies, tres douces) ---------- */
.lg-blob { position: fixed; border-radius: 50%; z-index: 0; pointer-events: none; }
.lg-blob.b1 { width: 460px; height: 460px; background: rgba(22, 163, 74, .07);  top: -140px; right: -120px; animation: lgFloat1 22s ease-in-out infinite; }
.lg-blob.b2 { width: 340px; height: 340px; background: rgba(13, 110, 253, .05); bottom: -120px; left: -100px; animation: lgFloat2 26s ease-in-out infinite; }
.lg-blob.b3 { width: 200px; height: 200px; background: rgba(22, 163, 74, .06);  bottom: 18%; right: 34%; animation: lgFloat1 30s ease-in-out infinite reverse; }
@keyframes lgFloat1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-24px, 22px) scale(1.05); } }
@keyframes lgFloat2 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(26px, -20px) scale(1.06); } }

/* ---------- Animations d'entree en cascade ---------- */
.anim { opacity: 0; transform: translateY(16px); animation: lgIn .6s cubic-bezier(.32,.72,0,1) forwards; }
.a1 { animation-delay: .05s; } .a2 { animation-delay: .15s; } .a3 { animation-delay: .25s; }
.a4 { animation-delay: .35s; } .a5 { animation-delay: .43s; } .a6 { animation-delay: .51s; } .a7 { animation-delay: .59s; }
@keyframes lgIn { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .lg-blob { animation: none !important; }
  .anim { animation-duration: .01s !important; animation-delay: 0s !important; }
}

/* ==================== Structure ==================== */
.lg-page {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  gap: 60px;
  min-height: 100vh; min-height: 100dvh;
  max-width: 1240px;
  margin: 0 auto;
  padding: 48px 40px;
}
.lg-presentation { flex: 1 1 56%; max-width: 640px; }
.lg-login { flex: 0 1 430px; }

/* ==================== Presentation (gauche) ==================== */
.lg-brandline { display: flex; align-items: center; gap: 14px; margin-bottom: 40px; }
.lg-mark {
  flex: 0 0 58px; width: 58px; height: 58px; border-radius: 12px;
  background: #FFFFFF;
  border: 1px solid #E2EAE4;
  display: grid; place-items: center;
  box-shadow: 0 10px 26px -12px rgba(11, 61, 46, .35);
}
.lg-mark img { max-width: 42px; max-height: 42px; object-fit: contain; }
.lg-mark i { font-size: 1.6rem; color: #16A34A; }
.lg-brandtxt { display: flex; flex-direction: column; line-height: 1.3; }
.lg-brandtxt b { font-size: 1.22rem; font-weight: 900; letter-spacing: .3px; color: #0B3D2E; }
.lg-brandtxt b em { font-style: normal; color: #16A34A; }
.lg-brandtxt small { font-size: .68rem; font-weight: 700; letter-spacing: 2.4px; color: #7C8B82; }

.lg-presentation h1 {
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  font-weight: 900;
  line-height: 1.14;
  letter-spacing: -.5px;
  color: #10261C;
}
.lg-presentation h1 span { color: #16A34A; }
.lg-lead { margin-top: 16px; max-width: 480px; font-size: 1.02rem; line-height: 1.65; color: #5B6B61; }

/* Tuiles de fonctionnalites */
.lg-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 36px; }
.lg-tile {
  display: flex; align-items: flex-start; gap: 13px;
  background: #FFFFFF;
  border: 1px solid #E7EEE9;
  border-radius: 15px;
  padding: 16px;
  box-shadow: 0 2px 8px -4px rgba(11, 61, 46, .10);
  transition: transform .22s cubic-bezier(.32,.72,0,1), box-shadow .25s, border-color .2s;
}
.lg-tile:hover {
  transform: translateY(-4px);
  border-color: #CBE7D6;
  box-shadow: 0 16px 32px -18px rgba(11, 61, 46, .30);
}
.lg-tile .ic {
  flex: 0 0 44px; width: 44px; height: 44px; border-radius: 9px;
  background: color-mix(in srgb, var(--tc, #16A34A) 12%, #FFFFFF);
  color: var(--tc, #16A34A);
  display: grid; place-items: center; font-size: 1.15rem;
  transition: transform .22s cubic-bezier(.32,.72,0,1);
}
.lg-tile:hover .ic { transform: scale(1.1); }
.lg-tile b { display: block; font-size: .92rem; font-weight: 800; color: #14261C; }
.lg-tile small { display: block; margin-top: 3px; font-size: .78rem; line-height: 1.5; color: #6B7B71; }

/* ==================== Carte de connexion (droite) ==================== */
.lg-card {
  background: #FFFFFF;
  border: 1px solid #E7EEE9;
  border-radius: 13px;
  padding: 38px 36px 34px;
  box-shadow: 0 30px 70px -30px rgba(11, 61, 46, .35), 0 4px 16px -8px rgba(11, 61, 46, .12);
}
.lg-card-mark {
  width: 62px; height: 62px; border-radius: 13px;
  background: #F0FDF4;
  border: 1px solid #DCFCE7;
  display: grid; place-items: center;
  margin: 0 auto 14px;
}
.lg-card-mark img { max-width: 44px; max-height: 44px; object-fit: contain; }
.lg-card-mark i { font-size: 1.7rem; color: #16A34A; }

.lg-card h2 { text-align: center; font-size: 1.6rem; font-weight: 900; color: #0B3D2E; letter-spacing: -.3px; }
.lg-sub { text-align: center; margin: 6px 0 24px; color: #64748B; font-size: .9rem; line-height: 1.5; }

/* Alertes */
.lg-alert {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; border-radius: 9px;
  font-size: .86rem; margin-bottom: 16px;
}
.lg-alert.ok  { background: #F0FDF4; border: 1px solid #BBF7D0; color: #15803D; }
.lg-alert.err { background: #FEF2F2; border: 1px solid #FECACA; color: #B91C1C; }

/* Champs */
.lg-label { display: block; font-size: .8rem; font-weight: 700; color: #33413A; margin-bottom: 6px; }
.lg-field { position: relative; margin-bottom: 16px; }
.lg-field > i {
  position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
  color: #9AA8A0; font-size: .95rem; pointer-events: none;
  transition: color .15s;
}
.lg-field:focus-within > i { color: #16A34A; }
.lg-field input {
  width: 100%; height: 49px;
  padding: 0 46px 0 42px;
  border: 1.5px solid #D4DED8;
  border-radius: 9px;
  font: inherit; font-size: .95rem; color: #0F172A;
  background: #FBFDFC;
  transition: border-color .16s, box-shadow .16s, background .16s;
}
.lg-field input::placeholder { color: #A9B6AE; }
.lg-field input:hover { border-color: #A8BBAF; }
.lg-field input:focus {
  outline: none;
  background: #FFFFFF;
  border-color: #16A34A;
  box-shadow: 0 0 0 4px rgba(22, 163, 74, .14);
}
.lg-eye {
  position: absolute; right: 9px; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border: none; border-radius: 7px;
  background: transparent; color: #9AA8A0; cursor: pointer; font-size: .95rem;
  transition: background .15s, color .15s;
}
.lg-eye:hover { background: #EEF5F0; color: #33413A; }

/* Se souvenir */
.lg-remember {
  display: flex; align-items: center; gap: 9px;
  font-size: .86rem; color: #33413A;
  margin: 4px 0 22px; cursor: pointer; user-select: none;
}
.lg-remember input { width: 17px; height: 17px; accent-color: #16A34A; cursor: pointer; }

/* Bouton */
.lg-submit {
  width: 100%; height: 51px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border: none; border-radius: 13px;
  background: #16A34A;
  color: #fff; font: inherit; font-size: 1rem; font-weight: 800; letter-spacing: .2px;
  cursor: pointer;
  box-shadow: 0 12px 26px -10px rgba(22, 163, 74, .6);
  transition: background .16s, transform .14s, box-shadow .2s;
}
.lg-submit .fleche { transition: transform .2s cubic-bezier(.32,.72,0,1); }
.lg-submit:hover { background: #15803D; transform: translateY(-2px); box-shadow: 0 18px 34px -12px rgba(22, 163, 74, .65); }
.lg-submit:hover .fleche { transform: translateX(4px); }
.lg-submit:active { transform: translateY(0); }
.lg-submit:disabled { opacity: .8; cursor: wait; transform: none; }

.lg-spin {
  width: 17px; height: 17px; margin-right: 9px;
  border: 2px solid rgba(255, 255, 255, .4); border-top-color: #fff;
  border-radius: 50%;
  display: inline-block;
  animation: lgSpin .7s linear infinite;
}
@keyframes lgSpin { to { transform: rotate(360deg); } }

.lg-foot { margin-top: 20px; text-align: center; font-size: .76rem; color: #93A29A; }

/* ==================== Responsive ==================== */
@media (max-width: 1080px) {
  .lg-page { gap: 36px; padding: 40px 28px; }
}

/* Tablette portrait : colonnes empilees, presentation compacte */
@media (max-width: 920px) {
  .lg-page { flex-direction: column; justify-content: flex-start; gap: 34px; padding-top: 44px; }
  .lg-presentation { max-width: 560px; text-align: center; }
  .lg-brandline { justify-content: center; margin-bottom: 26px; }
  .lg-lead { margin-left: auto; margin-right: auto; }
  .lg-tiles { text-align: left; }
  .lg-login { width: 100%; max-width: 430px; }
}

/* Mobile : tuiles en 1 colonne, allegement */
@media (max-width: 560px) {
  .lg-page { padding: 30px 18px 40px; gap: 26px; }
  .lg-tiles { grid-template-columns: 1fr; gap: 10px; margin-top: 24px; }
  .lg-tile { padding: 13px 14px; }
  .lg-lead { font-size: .93rem; }
  .lg-card { padding: 28px 22px 26px; border-radius: 14px; }
  .lg-blob.b1 { width: 300px; height: 300px; }
}

/* iPhone et iPad : un champ sous 16px declenche un zoom automatique au focus.
   Sur ecran tactile, les champs de connexion passent a 16px : aucun zoom surprise. */
@media (hover: none) and (pointer: coarse) {
  .lg-field input, .lg-field select { font-size: 16px !important; }
}