/**
 * WebList Production Stylesheet
 * Self-contained styles, animations, utilities & component overrides
 */

:root {
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-serif: 'Instrument Serif', Georgia, serif;
  --primary: #7c3aed;
  --primary-hover: #6d28d9;
  --primary-glow: rgba(124, 58, 237, 0.35);
  --dark-bg: #090b10;
  --dark-surface: #12151e;
  --dark-card: #181c28;
  --dark-border: rgba(255, 255, 255, 0.08);
}

*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
  width: 100% !important;
  position: relative !important;
}

body {
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, video {
  max-width: 100%;
  height: auto;
}

.gradient-border {
  max-width: 100% !important;
  width: 100% !important;
  overflow: hidden !important;
  contain: paint;
}

.card-anim {
  max-width: 100% !important;
}

.lazy-frame {
  position: absolute !important;
  max-width: none !important;
}

.font-serif {
  font-family: var(--font-serif);
}

/* Glassmorphism & Surface utilities */
.glass {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.glass-card {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.6);
}

.dark .glass-card {
  background: rgba(24, 28, 40, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Micro-animations */
.card-anim {
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.card-anim:hover {
  transform: translateY(-6px) scale(1.015);
  box-shadow: 0 25px 50px -12px rgba(124, 58, 237, 0.18);
}

.img-zoom {
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.group:hover .img-zoom {
  transform: scale(1.06);
}

.shine {
  position: relative;
  overflow: hidden;
}

.shine::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-20deg);
  transition: left 0.6s ease;
}

.shine:hover::after {
  left: 140%;
}

/* Subtle Floating Animations */
@keyframes floatSlow {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-12px) rotate(1.5deg); }
}

@keyframes floatReverse {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-16px) rotate(-1.5deg); }
}

@keyframes pulseGlow {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 0.9; transform: scale(1.05); }
}

@keyframes marqueeScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.animate-float {
  animation: floatSlow 6s ease-in-out infinite;
}

.animate-float-reverse {
  animation: floatReverse 7s ease-in-out infinite;
}

.animate-marquee {
  animation: marqueeScroll 30s linear infinite;
}

.animate-pulse-glow {
  animation: pulseGlow 4s ease-in-out infinite;
}

/* Modal and Tooltip layers */
.modal-backdrop {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: rgba(10, 14, 24, 0.75);
}

/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(150, 150, 150, 0.25);
  border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(150, 150, 150, 0.45);
}

/* Barre de recherche du hero (accueil) : bouton "Rechercher" -> icône
   loupe seule sur mobile, pour laisser plus de place au champ de saisie.
   En règle CSS dédiée plutôt qu'en classes Tailwind sm:hidden/sm:inline,
   absentes du bundle CSS "purgé" de ce site. */
.hero-search-btn-icon {
  display: none;
}
.hero-search-btn-text {
  display: inline;
}
@media (max-width: 639px) {
  .hero-search-btn-icon {
    display: inline-flex;
  }
  .hero-search-btn-text {
    display: none;
  }
}

.hero-search-btn {
  width: 38px;
  padding-left: 0;
  padding-right: 0;
}
@media (min-width: 640px) {
  .hero-search-btn {
    width: auto;
    padding-left: 1.75rem;
    padding-right: 1.75rem;
  }
}

/* Pagination (catégories, sites en vedette, mieux notés, tendances...) :
   sur mobile, on garde seulement la flèche < / > pour laisser plus de
   place, le mot "Précédent"/"Suivant" reste affiché à partir de la
   taille tablette. */
.pager-word {
  display: inline;
}
@media (max-width: 639px) {
  .pager-word {
    display: none;
  }
}

/* Écran de chargement des vignettes (logo URLO qui pulse doucement) :
   affiché derrière l'image le temps qu'elle charge, masqué automatiquement
   dès qu'elle est prête (voir onload sur chaque <img> concernée). */
.urlo-thumb-loading-logo {
  font-family: 'Plus Jakarta Sans', Arial, Helvetica, sans-serif;
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.02em;
  animation: urloThumbPulse 1.6s ease-in-out infinite;
}
@keyframes urloThumbPulse {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 0.9; }
}

/* Fiche site : la description est repliée sur 3 lignes par défaut
   (avec un lien "Lire la suite"), plutôt qu'une boîte à défilement
   interne — reste compacte pour toutes les fiches, quelle que soit la
   longueur de la description (voir toggleSiteDescription() dans app.js). */
.line-clamp-3 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

/* Bouton "Supprimer la fiche" : ces nuances de rouge n'étaient pas
   présentes dans le CSS Tailwind purgé (seul text-rose-* y était). Corrige
   aussi bg-rose-50, déjà utilisé ailleurs (messages d'erreur) mais absent
   du CSS compilé — trou préexistant, pas seulement lié à ce bouton. */
.bg-rose-50 {
  background-color: #fff1f2;
}
.bg-rose-100 {
  background-color: #ffe4e6;
}
.border-rose-200 {
  border-color: #fecdd3;
}
.hover\:bg-rose-50:hover {
  background-color: #fff1f2;
}

/* Nouvelles couleurs de categories (16 variantes distinctes) : ces
   classes Tailwind n'etaient pas presentes dans le CSS purge. */
.from-blue-500{--tw-gradient-from:#3b82f6 var(--tw-gradient-from-position);--tw-gradient-to:rgba(59,130,246,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.from-sky-500{--tw-gradient-from:#0ea5e9 var(--tw-gradient-from-position);--tw-gradient-to:rgba(14,165,233,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.from-slate-500{--tw-gradient-from:#64748b var(--tw-gradient-from-position);--tw-gradient-to:rgba(100,116,139,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.from-slate-700{--tw-gradient-from:#334155 var(--tw-gradient-from-position);--tw-gradient-to:rgba(51,65,85,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.from-cyan-400{--tw-gradient-from:#22d3ee var(--tw-gradient-from-position);--tw-gradient-to:rgba(34,211,238,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.from-teal-500{--tw-gradient-from:#14b8a6 var(--tw-gradient-from-position);--tw-gradient-to:rgba(20,184,166,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.from-red-500{--tw-gradient-from:#ef4444 var(--tw-gradient-from-position);--tw-gradient-to:rgba(239,68,68,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.from-green-500{--tw-gradient-from:#22c55e var(--tw-gradient-from-position);--tw-gradient-to:rgba(34,197,94,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.from-lime-500{--tw-gradient-from:#84cc16 var(--tw-gradient-from-position);--tw-gradient-to:rgba(132,204,22,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.from-emerald-600{--tw-gradient-from:#059669 var(--tw-gradient-from-position);--tw-gradient-to:rgba(5,150,105,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.from-pink-400{--tw-gradient-from:#f472b6 var(--tw-gradient-from-position);--tw-gradient-to:rgba(244,114,182,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.from-rose-500{--tw-gradient-from:#f43f5e var(--tw-gradient-from-position);--tw-gradient-to:rgba(244,63,94,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.from-indigo-500{--tw-gradient-from:#6366f1 var(--tw-gradient-from-position);--tw-gradient-to:rgba(99,102,241,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.from-amber-400{--tw-gradient-from:#fbbf24 var(--tw-gradient-from-position);--tw-gradient-to:rgba(251,191,36,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.from-yellow-500{--tw-gradient-from:#eab308 var(--tw-gradient-from-position);--tw-gradient-to:rgba(234,179,8,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.from-fuchsia-500{--tw-gradient-from:#d946ef var(--tw-gradient-from-position);--tw-gradient-to:rgba(217,70,239,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.from-purple-600{--tw-gradient-from:#9333ea var(--tw-gradient-from-position);--tw-gradient-to:rgba(147,51,234,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.from-teal-600{--tw-gradient-from:#0d9488 var(--tw-gradient-from-position);--tw-gradient-to:rgba(13,148,136,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.from-cyan-700{--tw-gradient-from:#0e7490 var(--tw-gradient-from-position);--tw-gradient-to:rgba(14,116,144,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.from-amber-600{--tw-gradient-from:#d97706 var(--tw-gradient-from-position);--tw-gradient-to:rgba(217,119,6,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.from-orange-700{--tw-gradient-from:#c2410c var(--tw-gradient-from-position);--tw-gradient-to:rgba(194,65,12,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.from-zinc-400{--tw-gradient-from:#a1a1aa var(--tw-gradient-from-position);--tw-gradient-to:rgba(161,161,170,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.from-zinc-600{--tw-gradient-from:#52525b var(--tw-gradient-from-position);--tw-gradient-to:rgba(82,82,91,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.from-violet-700{--tw-gradient-from:#6d28d9 var(--tw-gradient-from-position);--tw-gradient-to:rgba(109,40,217,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.from-indigo-600{--tw-gradient-from:#4f46e5 var(--tw-gradient-from-position);--tw-gradient-to:rgba(79,70,229,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.from-fuchsia-500{--tw-gradient-from:#d946ef var(--tw-gradient-from-position);--tw-gradient-to:rgba(217,70,239,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.to-blue-500{--tw-gradient-to:#3b82f6 var(--tw-gradient-to-position)}
.to-sky-500{--tw-gradient-to:#0ea5e9 var(--tw-gradient-to-position)}
.to-slate-500{--tw-gradient-to:#64748b var(--tw-gradient-to-position)}
.to-slate-700{--tw-gradient-to:#334155 var(--tw-gradient-to-position)}
.to-red-500{--tw-gradient-to:#ef4444 var(--tw-gradient-to-position)}
.to-emerald-400{--tw-gradient-to:#34d399 var(--tw-gradient-to-position)}
.to-green-500{--tw-gradient-to:#22c55e var(--tw-gradient-to-position)}
.to-lime-500{--tw-gradient-to:#84cc16 var(--tw-gradient-to-position)}
.to-emerald-600{--tw-gradient-to:#059669 var(--tw-gradient-to-position)}
.to-indigo-500{--tw-gradient-to:#6366f1 var(--tw-gradient-to-position)}
.to-amber-400{--tw-gradient-to:#fbbf24 var(--tw-gradient-to-position)}
.to-yellow-500{--tw-gradient-to:#eab308 var(--tw-gradient-to-position)}
.to-purple-600{--tw-gradient-to:#9333ea var(--tw-gradient-to-position)}
.to-teal-600{--tw-gradient-to:#0d9488 var(--tw-gradient-to-position)}
.to-cyan-700{--tw-gradient-to:#0e7490 var(--tw-gradient-to-position)}
.to-amber-600{--tw-gradient-to:#d97706 var(--tw-gradient-to-position)}
.to-orange-700{--tw-gradient-to:#c2410c var(--tw-gradient-to-position)}
.to-zinc-400{--tw-gradient-to:#a1a1aa var(--tw-gradient-to-position)}
.to-zinc-600{--tw-gradient-to:#52525b var(--tw-gradient-to-position)}
.to-violet-700{--tw-gradient-to:#6d28d9 var(--tw-gradient-to-position)}

/* Ajustement de contraste (3 categories signalees par capture d'ecran) */
.from-pink-500{--tw-gradient-from:#ec4899 var(--tw-gradient-from-position);--tw-gradient-to:rgba(236,72,153,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.from-rose-600{--tw-gradient-from:#e11d48 var(--tw-gradient-from-position);--tw-gradient-to:rgba(225,29,72,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.from-blue-700{--tw-gradient-from:#1d4ed8 var(--tw-gradient-from-position);--tw-gradient-to:rgba(29,78,216,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.from-purple-800{--tw-gradient-from:#6b21a8 var(--tw-gradient-from-position);--tw-gradient-to:rgba(107,33,168,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.to-rose-600{--tw-gradient-to:#e11d48 var(--tw-gradient-to-position)}
.to-blue-700{--tw-gradient-to:#1d4ed8 var(--tw-gradient-to-position)}
.to-purple-800{--tw-gradient-to:#6b21a8 var(--tw-gradient-to-position)}

/* Ajustement de contraste supplementaire : Tourisme & Hotellerie */
.from-cyan-600{--tw-gradient-from:#0891b2 var(--tw-gradient-from-position);--tw-gradient-to:rgba(8,145,178,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.to-teal-700{--tw-gradient-to:#0f766e var(--tw-gradient-to-position)}

/* Menus déroulants des filtres (langue, catégorie, date, tri) :
   espace confortable avant le texte et flèche dessinée, identiques sur
   tous les navigateurs (Safari ignore le padding d'un <select> natif). */
select.urlo-filter-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 0 40px 0 18px;
    text-overflow: ellipsis;
    max-width: 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 14px 14px;
}
select.urlo-filter-select::-ms-expand { display: none; }