/* ================================================================
   PHARMANIGER — assets/css/app.css
   ================================================================ */

/* ── Scrollbar fine ─────────────────────────────────────────────── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 99px; }

/* ── Carte responsive ────────────────────────────────────────────── */
.pn-carte { height: 300px; }
@media (min-width: 480px)  { .pn-carte { height: 340px; } }
@media (min-width: 640px)  { .pn-carte { height: 400px; } }
@media (min-width: 768px)  { .pn-carte { height: 460px; } }
@media (min-width: 1024px) { .pn-carte { height: 520px; } }

/* ── Liste responsive (calée sur la hauteur de la carte côté desktop) */
.pn-liste { max-height: 220px; }
@media (min-width: 480px)  { .pn-liste { max-height: 260px; } }
@media (min-width: 768px)  { .pn-liste { max-height: 310px; } }
@media (min-width: 1024px) { .pn-liste { max-height: 365px; } }

/* ── Leaflet popups ──────────────────────────────────────────────── */
.leaflet-popup-content-wrapper {
  border-radius: 14px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.14) !important;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  padding: 0;
}
.leaflet-popup-content { margin: 12px 14px !important; }
.leaflet-popup-tip-container { display: none !important; }
.leaflet-control-zoom { border-radius: 10px !important; overflow: hidden; }
.leaflet-control-zoom a { font-size: 16px !important; }

/* ── Navigation ──────────────────────────────────────────────────── */
nav .max-w-6xl { min-width: 0; }
nav a { white-space: nowrap; }

/* ── Formulaires ─────────────────────────────────────────────────── */
input:focus, textarea:focus, select:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(22,163,74,.15);
  border-color: #16a34a !important;
}
input, textarea, select { font-size: 16px; } /* évite le zoom auto iOS */

/* ── Boutons ─────────────────────────────────────────────────────── */
a, button { transition: opacity .15s, transform .1s; }
button:disabled { opacity: .6; cursor: not-allowed; }

/* ── Marquee pub ─────────────────────────────────────────────────── */
@keyframes marquee { from { transform: translateX(0) } to { transform: translateX(-50%) } }
.animate-marquee  { animation: marquee 22s linear infinite; }

/* ── Animations page ─────────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-up { animation: fadeUp .3s ease-out both; will-change: opacity, transform; }

/* ── Mobile safe area (iPhone notch) ─────────────────────────────── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  footer { padding-bottom: calc(1.5rem + env(safe-area-inset-bottom)); }
}

/* ── Cards pharmacie ─────────────────────────────────────────────── */
.pn-btn-sm {
  display: inline-block; padding: 3px 10px;
  border-radius: 999px; font-size: 11px; font-weight: 600;
  text-decoration: none; transition: opacity .15s;
}
.pn-btn-sm:hover { opacity: .85; }
.pn-btn-blue  { background: #2563eb; color: #fff; }
.pn-btn-green { background: #16a34a; color: #fff; }
.pn-btn-gray  { background: #f3f4f6; color: #374151; border: 1px solid #e5e7eb; }

/* ── Responsive texte ────────────────────────────────────────────── */
@media (max-width: 479px) {
  .font-syne { letter-spacing: -.01em; }
  h1 { font-size: 1.25rem; line-height: 1.3; }
}