/* =========================================================
   UpHolidays — Visuels thématiques & Photographies pro
   ========================================================= */

:root {
  --zellige-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23fbf8f2' stroke-width='1.4'%3E%3Cpath d='M60 6 L84 30 L60 54 L36 30 Z'/%3E%3Cpath d='M60 66 L84 90 L60 114 L36 90 Z'/%3E%3Cpath d='M6 60 L30 36 L54 60 L30 84 Z'/%3E%3Cpath d='M66 60 L90 36 L114 60 L90 84 Z'/%3E%3Ccircle cx='60' cy='60' r='10'/%3E%3C/g%3E%3C/svg%3E");
}

/* Backgrounds photo pro avec dégradé vignette */
.art-hero-luxury {
  background: linear-gradient(180deg, rgba(20,18,15,0.2) 0%, rgba(20,18,15,0.75) 100%), url('images/hero_morocco_luxury.jpg') center/cover no-repeat;
}

.art-desert {
  background: linear-gradient(180deg, rgba(20,18,15,0.15) 0%, rgba(20,18,15,0.75) 100%), url('images/desert_sahara.png') center/cover no-repeat;
}

.art-marrakech {
  background: linear-gradient(180deg, rgba(20,18,15,0.15) 0%, rgba(20,18,15,0.75) 100%), url('images/marrakech_palais.png') center/cover no-repeat;
}

.art-medina, .art-fes {
  background: linear-gradient(180deg, rgba(20,18,15,0.15) 0%, rgba(20,18,15,0.75) 100%), url('images/fes_medina.png') center/cover no-repeat;
}

.art-chefchaouen {
  background: linear-gradient(180deg, rgba(20,18,15,0.15) 0%, rgba(20,18,15,0.75) 100%), url('images/chefchaouen_blue.png') center/cover no-repeat;
}

.art-essaouira {
  background: linear-gradient(180deg, rgba(20,18,15,0.15) 0%, rgba(20,18,15,0.75) 100%), url('images/essaouira_ocean.png') center/cover no-repeat;
}

.art-casablanca {
  background: linear-gradient(180deg, rgba(20,18,15,0.15) 0%, rgba(20,18,15,0.75) 100%), url('images/casablanca_hassan.png') center/cover no-repeat;
}

.art-event, .art-mice, .art-mice-vip {
  background: linear-gradient(180deg, rgba(20,18,15,0.2) 0%, rgba(20,18,15,0.8) 100%), url('images/mice_conference_vip.jpg') center/cover no-repeat;
}

.art-hotel, .art-luxury-hotel {
  background: linear-gradient(180deg, rgba(20,18,15,0.15) 0%, rgba(20,18,15,0.75) 100%), url('images/luxury_hotel.jpg') center/cover no-repeat;
}

.art-flight, .art-flight-hotel {
  background: linear-gradient(180deg, rgba(20,18,15,0.15) 0%, rgba(20,18,15,0.75) 100%), url('images/flight_hotel_travel.jpg') center/cover no-repeat;
}

.art-visa {
  background: linear-gradient(180deg, rgba(20,18,15,0.15) 0%, rgba(20,18,15,0.75) 100%), url('images/travel_visa.jpg') center/cover no-repeat;
}

.art-language, .art-university, .art-study {
  background: linear-gradient(180deg, rgba(20,18,15,0.2) 0%, rgba(20,18,15,0.8) 100%), url('images/study_abroad_university.jpg') center/cover no-repeat;
}

.art-culture, .art-cuisine {
  background: linear-gradient(180deg, rgba(20,18,15,0.15) 0%, rgba(20,18,15,0.75) 100%), url('images/morocco_culture_cuisine.jpg') center/cover no-repeat;
}

.art-international {
  background: linear-gradient(180deg, rgba(20,18,15,0.15) 0%, rgba(20,18,15,0.75) 100%), url('images/international_tour_travel.jpg') center/cover no-repeat;
}

.art-contact {
  background: linear-gradient(150deg, #163f1f 0%, #21612f 55%, #7d0c10 100%);
}

[class*="art-"] {
  position: relative;
  overflow: hidden;
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

[class*="art-"]::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .12;
  background-image: var(--zellige-pattern);
  background-size: 130px;
  mix-blend-mode: overlay;
  pointer-events: none;
}