/* ============================================================
   ML Design System — Utilities
   Rôle :
   - petites classes utilitaires réutilisables
   - espacements simples
   - radius, shadows, display
   - ne pas remplacer les composants

   Toutes les utilities utilisent !important pour garantir la priorité
   face aux sélecteurs générés par Divi 5.
   ============================================================ */

/* =========================
   Text align
   ========================= */

.ml-text-center {
  text-align: center !important;
}

.ml-text-left {
  text-align: left !important;
}

.ml-text-right {
  text-align: right !important;
}

/* =========================
   Text transform
   ========================= */

.ml-uppercase {
  text-transform: uppercase !important;
}

.ml-capitalize {
  text-transform: capitalize !important;
}

.ml-normal-case {
  text-transform: none !important;
}

/* =========================
   Font weight
   ========================= */

.ml-fw-regular {
  font-weight: var(--ml-fw-regular) !important;
}

.ml-fw-medium {
  font-weight: var(--ml-fw-medium) !important;
}

.ml-fw-semibold {
  font-weight: var(--ml-fw-semibold) !important;
}

.ml-fw-bold {
  font-weight: var(--ml-fw-bold) !important;
}

.ml-fw-extrabold {
  font-weight: var(--ml-fw-extrabold) !important;
}

/* =========================
   Text colors
   ========================= */

.ml-text-white {
  color: var(--ml-color-white) !important;
}

.ml-text-navy {
  color: var(--ml-color-navy) !important;
}

.ml-text-orange {
  color: var(--ml-color-orange) !important;
}

.ml-text-teal {
  color: var(--ml-color-teal) !important;
}

.ml-text-soft {
  color: var(--ml-color-text-soft) !important;
}

.ml-text-default {
  color: var(--ml-color-text) !important;
}

.ml-text-yellow {
  color: var(--ml-color-yellow) !important;
}

.ml-text-cream {
  color: var(--ml-color-cream) !important;
}

.ml-text-black {
  color: var(--ml-color-black) !important;
}

/* =========================
   Backgrounds
   ========================= */

.ml-bg-white {
  background: var(--ml-color-white) !important;
}

.ml-bg-cream {
  background: var(--ml-color-cream) !important;
}

.ml-bg-navy {
  background: var(--ml-color-navy) !important;
}

.ml-bg-orange {
  background: var(--ml-color-orange) !important;
}

.ml-bg-teal {
  background: var(--ml-color-teal) !important;
}

.ml-bg-yellow {
  background: var(--ml-color-yellow) !important;
}

.ml-bg-black {
  background: var(--ml-color-black) !important;
}

.ml-bg-grey-light {
  background: var(--ml-color-grey-light) !important;
}

/* --ml-color-yellow (#f9dd84) à 15% d'opacité.
   Pas de token d'opacité dans le système — valeur rgba conservée intentionnellement.
   Usage type : ml-info-panel--outlined ml-bg-yellow-tint */
.ml-bg-yellow-tint {
  background: rgba(249, 221, 132, 0.15) !important;
}

/* =========================
   Radius
   ========================= */

.ml-radius-sm {
  border-radius: var(--ml-radius-sm) !important;
}

.ml-radius-md {
  border-radius: var(--ml-radius-md) !important;
}

.ml-radius-lg {
  border-radius: var(--ml-radius-lg) !important;
}

.ml-radius-xl {
  border-radius: var(--ml-radius-xl) !important;
}

.ml-radius-pill {
  border-radius: var(--ml-radius-pill) !important;
}

/* =========================
   Shadows
   ========================= */

.ml-shadow-sm {
  box-shadow: var(--ml-shadow-sm) !important;
}

.ml-shadow-md {
  box-shadow: var(--ml-shadow-md) !important;
}

.ml-shadow-lg {
  box-shadow: var(--ml-shadow-lg) !important;
}

/* =========================
   Borders
   Épaisseur 1px (trait discret)
   Épaisseur 3px (encadré fort, panels outlined)
   ========================= */

/* 1px */
.ml-border {
  border: 1px solid var(--ml-color-border) !important;
}

.ml-border-navy {
  border: 1px solid var(--ml-color-navy) !important;
}

.ml-border-orange {
  border: 1px solid var(--ml-color-orange) !important;
}

.ml-border-teal {
  border: 1px solid var(--ml-color-teal) !important;
}

.ml-border-yellow {
  border: 1px solid var(--ml-color-yellow) !important;
}

.ml-border-cream {
  border: 1px solid var(--ml-color-cream) !important;
}

.ml-border-white {
  border: 1px solid var(--ml-color-white) !important;
}

/* 3px */
.ml-border-3 {
  border: 3px solid var(--ml-color-border) !important;
}

.ml-border-3-navy {
  border: 3px solid var(--ml-color-navy) !important;
}

.ml-border-3-orange {
  border: 3px solid var(--ml-color-orange) !important;
}

.ml-border-3-teal {
  border: 3px solid var(--ml-color-teal) !important;
}

.ml-border-3-yellow {
  border: 3px solid var(--ml-color-yellow) !important;
}

.ml-border-3-cream {
  border: 3px solid var(--ml-color-cream) !important;
}

.ml-border-3-white {
  border: 3px solid var(--ml-color-white) !important;
}

/* =========================
   Spacing — margin bottom
   ========================= */

.ml-mb-0 {
  --ml-local-mb: 0;
  margin-bottom: 0 !important;
}

.ml-mb-2 {
  --ml-local-mb: var(--ml-space-2);
  margin-bottom: var(--ml-space-2) !important;
}

.ml-mb-3 {
  --ml-local-mb: var(--ml-space-3);
  margin-bottom: var(--ml-space-3) !important;
}

.ml-mb-4 {
  --ml-local-mb: var(--ml-space-4);
  margin-bottom: var(--ml-space-4) !important;
}

.ml-mb-5 {
  --ml-local-mb: var(--ml-space-5);
  margin-bottom: var(--ml-space-5) !important;
}

.ml-mb-6 {
  --ml-local-mb: var(--ml-space-6);
  margin-bottom: var(--ml-space-6) !important;
}

.ml-mb-7 {
  margin-bottom: var(--ml-space-7) !important;
}

/* =========================
   Spacing — margin top
   ========================= */

.ml-mt-0 {
  --ml-local-mt: 0;
  margin-top: 0 !important;
}

.ml-mt-2 {
  --ml-local-mt: var(--ml-space-2);
  margin-top: var(--ml-space-2) !important;
}

.ml-mt-3 {
  --ml-local-mt: var(--ml-space-3);
  margin-top: var(--ml-space-3) !important;
}

.ml-mt-4 {
  --ml-local-mt: var(--ml-space-4);
  margin-top: var(--ml-space-4) !important;
}

.ml-mt-5 {
  --ml-local-mt: var(--ml-space-5);
  margin-top: var(--ml-space-5) !important;
}

.ml-mt-6 {
  --ml-local-mt: var(--ml-space-6);
  margin-top: var(--ml-space-6) !important;
}

/* =========================
   Spacing — padding
   ========================= */

.ml-p-4 {
  padding: var(--ml-space-4) !important;
}

.ml-p-5 {
  padding: var(--ml-space-5) !important;
}

.ml-p-6 {
  padding: var(--ml-space-6) !important;
}

.ml-p-7 {
  padding: var(--ml-space-7) !important;
}

.ml-px-5 {
  padding-left: var(--ml-space-5) !important;
  padding-right: var(--ml-space-5) !important;
}

.ml-py-5 {
  padding-top: var(--ml-space-5) !important;
  padding-bottom: var(--ml-space-5) !important;
}

/* =========================
   Width / display helpers
   ========================= */

.ml-w-full {
  width: 100% !important;
}

.ml-inline-flex {
  display: inline-flex !important;
}

.ml-flex {
  display: flex !important;
}

.ml-flex-center {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.ml-hidden {
  display: none !important;
}

/* =========================
   Icon / pictogram sizes
   Nommage : ml-icon-{px}  (50 → 300)
   Applique max-height + object-fit sur img, svg
   et wrappers Divi (et_pb_image_wrap).
   ========================= */

.ml-icon-50 img, .ml-icon-50 svg,
.ml-icon-50 .et_pb_image_wrap,
.ml-icon-50 .et_pb_image_wrap img {
  max-height: 50px !important; width: auto !important;
  object-fit: contain !important; display: block !important;
}

.ml-icon-64 img, .ml-icon-64 svg,
.ml-icon-64 .et_pb_image_wrap,
.ml-icon-64 .et_pb_image_wrap img {
  max-height: 64px !important; width: auto !important;
  object-fit: contain !important; display: block !important;
}

.ml-icon-80 img, .ml-icon-80 svg,
.ml-icon-80 .et_pb_image_wrap,
.ml-icon-80 .et_pb_image_wrap img {
  max-height: 80px !important; width: auto !important;
  object-fit: contain !important; display: block !important;
}

.ml-icon-100 img, .ml-icon-100 svg,
.ml-icon-100 .et_pb_image_wrap,
.ml-icon-100 .et_pb_image_wrap img {
  max-height: 100px !important; width: auto !important;
  object-fit: contain !important; display: block !important;
}

.ml-icon-130 img, .ml-icon-130 svg,
.ml-icon-130 .et_pb_image_wrap,
.ml-icon-130 .et_pb_image_wrap img {
  max-height: 130px !important; width: auto !important;
  object-fit: contain !important; display: block !important;
}

.ml-icon-160 img, .ml-icon-160 svg,
.ml-icon-160 .et_pb_image_wrap,
.ml-icon-160 .et_pb_image_wrap img {
  max-height: 160px !important; width: auto !important;
  object-fit: contain !important; display: block !important;
}

.ml-icon-200 img, .ml-icon-200 svg,
.ml-icon-200 .et_pb_image_wrap,
.ml-icon-200 .et_pb_image_wrap img {
  max-height: 200px !important; width: auto !important;
  object-fit: contain !important; display: block !important;
}

.ml-icon-250 img, .ml-icon-250 svg,
.ml-icon-250 .et_pb_image_wrap,
.ml-icon-250 .et_pb_image_wrap img {
  max-height: 250px !important; width: auto !important;
  object-fit: contain !important; display: block !important;
}

.ml-icon-300 img, .ml-icon-300 svg,
.ml-icon-300 .et_pb_image_wrap,
.ml-icon-300 .et_pb_image_wrap img {
  max-height: 300px !important; width: auto !important;
  object-fit: contain !important; display: block !important;
}

/* =========================
   Media center (images / SVG)
   ========================= */

.ml-media-center .et_pb_image_wrap {
  margin-left: auto !important;
  margin-right: auto !important;
}

.ml-media-center .et_pb_image_wrap img,
.ml-media-center .et_pb_image_wrap svg {
  margin-left: auto !important;
  margin-right: auto !important;
  display: block !important;
}

/* =========================
   Overflow / object fit
   ========================= */

.ml-overflow-hidden {
  overflow: hidden !important;
}

.ml-object-cover img,
img.ml-object-cover {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* =========================
   Highlight
   ========================= */

.ml-highlight {
  background: linear-gradient(
    to top,
    var(--ml-color-yellow) 65%,
    transparent 65%
  ) !important;
}

/* =========================
   Responsive helpers
   ========================= */

@media (max-width: 767px) {
  .ml-mobile-text-center {
    text-align: center !important;
  }

  .ml-mobile-w-full {
    width: 100% !important;
  }
}