/* ============================================================
   ML – Divi Cards (cartes visuelles grand format)
   S'appuie sur les tokens globaux de ml-tokens.css

   Les sélecteurs .eml-card* sont conservés pour rétrocompatibilité
   avec les pages Divi existantes.
   ============================================================ */

.ml-divi-card,
.eml-card {
  position: relative !important;
  border-radius: var(--ml-radius-md) !important;
  overflow: hidden !important;
  width: 100% !important;
  height: 350px !important;
  cursor: pointer;
  display: block !important;
}

.ml-divi-card .ml-divi-card-bg,
.eml-card .eml-card-bg {
  position: absolute !important;
  inset: 0 !important;
  background-size: cover !important;
  background-position: center !important;
  transition: transform var(--ml-transition-base) !important;
  z-index: 0 !important;
}

.ml-divi-card:hover .ml-divi-card-bg,
.eml-card:hover .eml-card-bg {
  transform: scale(1.07) !important;
}

.ml-divi-card .ml-divi-card-content,
.eml-card .eml-card-content {
  position: absolute !important;
  inset: 0 !important;
  padding: var(--ml-space-5) !important;
  z-index: 2 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: left !important;
}

.ml-divi-card .ml-divi-card-label,
.eml-card .eml-card-label {
  position: absolute !important;
  top: var(--ml-space-5) !important;
  left: var(--ml-space-5) !important;
  font-family: var(--ml-font-body) !important;
  font-weight: 900 !important;
  font-size: 16px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: var(--ml-color-orange) !important;
  margin: 0 !important;
  line-height: 1 !important;
}

.ml-divi-card .ml-divi-card-title,
.eml-card .eml-card-title {
  font-family: var(--ml-font-display) !important;
  font-size: 65px !important;
  line-height: var(--ml-lh-tight) !important;
  color: var(--ml-color-white) !important;
  margin: 0 !important;
  text-transform: uppercase !important;
}

.eml-card-triple .eml-card-content {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  padding: 25px !important;
  text-align: left !important;
}

.eml-card-triple .eml-card-text-group {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}

.eml-card-triple .eml-card-title {
  font-size: 38px !important;
  line-height: 0.95 !important;
  color: var(--ml-color-white) !important;
  text-transform: uppercase !important;
}

.eml-card-triple .eml-card-subtitle {
  font-family: var(--ml-font-body) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--ml-color-white) !important;
  text-transform: uppercase !important;
  margin: 5px 0 0 !important;
  line-height: 1.2 !important;
}

.eml-card-triple .eml-card-label {
  display: none !important;
}

.eml-card-triple {
  height: 220px !important;
}

/* Tablet (<= 980px) */
@media (max-width: 980px) {
  .ml-divi-card,
  .eml-card {
    height: 360px !important;
  }

  .ml-divi-card .ml-divi-card-content,
  .eml-card .eml-card-content {
    padding: 20px !important;
  }

  .ml-divi-card .ml-divi-card-label,
  .eml-card .eml-card-label {
    top: 20px !important;
    left: 20px !important;
    font-size: 14px !important;
    letter-spacing: 1.6px !important;
  }

  .ml-divi-card .ml-divi-card-title,
  .eml-card .eml-card-title {
    font-size: 48px !important;
    line-height: 1.06 !important;
  }

  .eml-card-triple .eml-card-title {
    font-size: 32px !important;
    line-height: 0.98 !important;
  }

  .eml-card-triple .eml-card-subtitle {
    font-size: 16px !important;
  }

  .eml-card-triple {
    height: 200px !important;
  }
}

/* Mobile (<= 767px) */
@media (max-width: 767px) {
  .ml-divi-card,
  .eml-card {
    height: 300px !important;
    border-radius: 14px !important;
  }

  .ml-divi-card .ml-divi-card-content,
  .eml-card .eml-card-content {
    padding: var(--ml-space-4) !important;
  }

  .ml-divi-card .ml-divi-card-label,
  .eml-card .eml-card-label {
    top: var(--ml-space-4) !important;
    left: var(--ml-space-4) !important;
    font-size: 12px !important;
    letter-spacing: 1.4px !important;
  }

  .ml-divi-card .ml-divi-card-title,
  .eml-card .eml-card-title {
    font-size: 34px !important;
    line-height: 1.08 !important;
  }

  .eml-card-triple .eml-card-title {
    font-size: 28px !important;
    line-height: 1.1 !important;
  }

  .eml-card-triple .eml-card-subtitle {
    font-size: 15px !important;
  }

  .eml-card-triple {
    height: 250px !important;
  }
}

/* Small phones (<= 480px) */
@media (max-width: 480px) {
  .ml-divi-card,
  .eml-card {
    height: 260px !important;
  }

  .ml-divi-card .ml-divi-card-content,
  .eml-card .eml-card-content {
    padding: var(--ml-space-4) !important;
  }

  .ml-divi-card .ml-divi-card-label,
  .eml-card .eml-card-label {
    top: var(--ml-space-4) !important;
    left: var(--ml-space-4) !important;
    font-size: 11px !important;
    letter-spacing: 1.2px !important;
  }

  .ml-divi-card .ml-divi-card-title,
  .eml-card .eml-card-title {
    font-size: 30px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ml-divi-card .ml-divi-card-bg,
  .eml-card .eml-card-bg {
    transition: none !important;
  }

  .ml-divi-card:hover .ml-divi-card-bg,
  .eml-card:hover .eml-card-bg {
    transform: none !important;
  }
}