/* ── MobileHomePro — Styles personnalisés ──────────────────────────────────
   Règles CSS complémentaires à Tailwind.
   Chargé après tailwind.css dans base.html et les pages publiques.
────────────────────────────────────────────────────────────────────────── */

/* ── Comportement global ──────────────────────────────────────────────── */
html {
  scroll-behavior: smooth;
}

/* ── Carte mobile home — zoom photo au survol ─────────────────────────── */
.card-img {
  transition: transform 0.4s ease;
  will-change: transform;
}
.card-img:hover {
  transform: scale(1.05);
}

/* ── Chip de filtre (liste de recherche) ──────────────────────────────── */
.filter-chip {
  transition: all 0.15s ease;
}

/* ── Champ honeypot — totalement invisible, piège pour les bots ───────── */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  tab-index: -1;
}

/* ── Transitions photo galerie ────────────────────────────────────────── */
#main-photo {
  transition: opacity 0.2s ease;
}

/* ── Animations douces pour les modales / overlays ───────────────────── */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-fade-in {
  animation: fadeIn 0.2s ease forwards;
}

/* ── Cartes thème ────────────────────────────────────────────────────── */
.theme-card .theme-label {
  color: #111827; /* gray-900 */
}
.theme-card .theme-sub {
  color: #6b7280; /* gray-500 */
}
.dark .theme-card {
  background-color: #374151; /* gray-700 */
  border-color: #4b5563;     /* gray-600 */
}
.dark .theme-card.theme-card-active {
  background-color: #134e4a; /* teal-900 */
  border-color: #14b8a6;     /* teal-500 */
}
.dark .theme-card .theme-label {
  color: #f3f4f6; /* gray-100 */
}
.dark .theme-card .theme-sub {
  color: #9ca3af; /* gray-400 */
}


/* ── Page démo — animations fade-in au scroll ────────────────────────── */
.demo-feature {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.demo-feature.demo-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Carousel — transitions et responsive ────────────────────────────── */
.carousel-track {
  will-change: transform;
}
.demo-carousel {
  touch-action: pan-y;
}

/* ── Classes responsive manquantes du build Tailwind ─────────────────── */
@media (min-width: 768px) {
  .md\:hidden { display: none !important; }
  .md\:table-cell { display: table-cell !important; }
}