/* ============================================================
   ML Design System — Layout
   S'appuie sur les tokens globaux de ml-tokens.css

   Les classes ml-* utilisent !important pour garantir la priorité
   face aux sélecteurs générés par Divi 5.
   ============================================================ */

/* Sections */
.ml-section {
  padding-top: var(--ml-section-py-desktop) !important;
  padding-bottom: var(--ml-section-py-desktop) !important;
}

.ml-section--flush {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Rythme vertical global (scope ml-section)
   - homogénéise sections / rows / modules dans Divi
   - évite l'empilement des marges natives Divi */
.ml-section .et_pb_row,
.ml-section .et_pb_row_inner {
  margin-bottom: 0 !important;
}

.ml-section:not(.ml-feature-panel) .et_pb_row + .et_pb_row,
.ml-section:not(.ml-feature-panel) .et_pb_row_inner + .et_pb_row_inner {
  margin-top: var(--ml-space-5) !important;
}

.ml-section .et_pb_module:not([class^="ml-mb-"]):not([class*=" ml-mb-"]) {
  margin-bottom: 0 !important;
}

.ml-section .et_pb_column .et_pb_module:not([class^="ml-mt-"]):not([class*=" ml-mt-"]) {
  margin-top: 0 !important;
}

.ml-section .et_pb_column:not(.ml-profile-card) .et_pb_module:not(:first-child):not([class^="ml-mt-"]):not([class*=" ml-mt-"]) {
  margin-top: var(--ml-space-3) !important;
}

.ml-section .et_pb_column:not(.ml-profile-card) .et_pb_module + .et_pb_module:not([class^="ml-mt-"]):not([class*=" ml-mt-"]),
.ml-section .et_pb_column:not(.ml-profile-card) .et_pb_row_inner + .et_pb_module:not([class^="ml-mt-"]):not([class*=" ml-mt-"]) {
  margin-top: var(--ml-space-3) !important;
}

/* Container principal aligné avec le header */
.ml-container,
.et_pb_row.ml-container {
  width: min(100% - 40px, var(--ml-container)) !important;
  max-width: none !important;
  margin-inline: auto !important;
}

.et_pb_row.ml-container.et-flex_row > .et_pb_column.ml-profile-card {
  align-self: stretch !important;
}

/* Vertical stack */
.ml-stack {
  row-gap: var(--ml-space-5);
}

.ml-stack--xs {
  row-gap: var(--ml-space-2);
}

.ml-stack--sm {
  row-gap: var(--ml-space-3);
}

.ml-stack--md {
  row-gap: var(--ml-space-5);
}

.ml-stack--lg {
  row-gap: var(--ml-space-6);
}

/* Grilles */
.ml-grid {
  display: grid !important;
  gap: var(--ml-grid-gap) !important;
}

.ml-grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.ml-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.ml-grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

/* Split texte / image */
.ml-split {
  display: grid !important;
  grid-template-columns: 1.1fr 0.9fr !important;
  gap: 2rem !important;
  align-items: center !important;
}

.ml-split--reverse {
  grid-template-columns: 0.9fr 1.1fr !important;
}

/* Responsive */
@media (max-width: 980px) {
  .ml-section {
    padding-top: var(--ml-section-py-tablet) !important;
    padding-bottom: var(--ml-section-py-tablet) !important;
  }

  .ml-grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .ml-split,
  .ml-split--reverse {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
}

@media (max-width: 767px) {
  .ml-section {
    padding-top: var(--ml-section-py-mobile) !important;
    padding-bottom: var(--ml-section-py-mobile) !important;
  }

  .ml-grid-2,
  .ml-grid-3,
  .ml-grid-4 {
    grid-template-columns: 1fr !important;
  }

  .ml-container,
  .et_pb_row.ml-container {
    width: min(100% - 24px, var(--ml-container)) !important;
  }

  .ml-section:not(.ml-feature-panel) .et_pb_row + .et_pb_row,
  .ml-section:not(.ml-feature-panel) .et_pb_row_inner + .et_pb_row_inner {
    margin-top: var(--ml-space-4) !important;
  }

  .ml-section .et_pb_column:not(.ml-profile-card) .et_pb_module + .et_pb_module:not([class^="ml-mt-"]):not([class*=" ml-mt-"]),
  .ml-section .et_pb_column:not(.ml-profile-card) .et_pb_row_inner + .et_pb_module:not([class^="ml-mt-"]):not([class*=" ml-mt-"]) {
    margin-top: var(--ml-space-2) !important;
  }

  .ml-section .et_pb_column:not(.ml-profile-card) .et_pb_module:not(:first-child):not([class^="ml-mt-"]):not([class*=" ml-mt-"]) {
    margin-top: var(--ml-space-2) !important;
  }
}