/* ============================================================
   ML Design System — Components
   Rôle :
   - composants visuels réutilisables
   - cards, boxes, CTA, stats
   - dividers / separators
   - wrappers de contenu

   Les propriétés clés utilisent !important pour garantir la priorité
   face aux sélecteurs générés par Divi 5.
   ============================================================ */

/* =========================
   Hero — pages internes
   Bloc coloré arrondi, titre centré, premium.
   Variantes : --teal, --orange, --navy, --yellow.
   ========================= */

.ml-hero {
  border-radius: 0 0 var(--ml-radius-xl) var(--ml-radius-xl) !important;
  padding: calc(var(--ml-header-height, 84px) + var(--ml-space-10)) var(--ml-space-7) var(--ml-space-11) !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
  box-sizing: border-box !important;
}

.ml-hero .ml-hero-title {
  max-width: 900px !important;
}

.ml-hero .ml-hero-subtitle {
  max-width: 680px !important;
  margin-top: var(--ml-space-4) !important;
}

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

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

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

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

/* =========================
   Intro text — bloc editorial sous le hero
   ========================= */

.ml-intro-text {
  max-width: 780px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
  font-size: var(--ml-fs-body-lg) !important;
  line-height: var(--ml-lh-body) !important;
  color: var(--ml-color-navy) !important;
}

.ml-intro-text p + p {
  margin-top: var(--ml-space-4) !important;
}

/* =========================
   Generic box
   ========================= */

.ml-box {
  padding: var(--ml-space-6) !important;
  border-radius: var(--ml-radius-md) !important;
}

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

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

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

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

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

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

/* =========================
   Card
   ========================= */

.ml-card {
  background: var(--ml-color-white) !important;
  border-radius: var(--ml-radius-md) !important;
  box-shadow: var(--ml-shadow-sm) !important;
  overflow: hidden !important;
}

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

.ml-card__media img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
}

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

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

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

/* Variantes couleur */
.ml-card--cream {
  background: var(--ml-color-cream) !important;
}

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

.ml-card--navy .ml-card__text,
.ml-card--navy .ml-card__title {
  color: var(--ml-color-white) !important;
}

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

.ml-card--orange .ml-card__text,
.ml-card--orange .ml-card__title {
  color: var(--ml-color-white) !important;
}

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

.ml-card--teal .ml-card__text,
.ml-card--teal .ml-card__title {
  color: var(--ml-color-white) !important;
}

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

/* =========================
   Profile card
   Structure only:
   - reserve haute pour avatar chevauchant
   - avatar centre en absolu
   - shell full-height
   Les primitives visuelles restent en utilities/classes de base.
   ========================= */

.ml-profile-card {
  position: relative !important;
  padding-top: calc(var(--ml-space-11) / 2) !important;
  height: 100% !important;
  box-sizing: border-box !important;
}

.ml-profile-card > .et_pb_module:not(:first-child):not([class^="ml-mt-"]):not([class*=" ml-mt-"]),
.ml-profile-card > .et_pb_module + .et_pb_module:not([class^="ml-mt-"]):not([class*=" ml-mt-"]),
.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;
}

.ml-profile-card__shell {
  height: 100% !important;
}

.ml-profile-card__avatar {
  position: absolute !important;
  top: 0 !important;
  left: 50% !important;
  z-index: 2 !important;
  margin-top: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  transform: translate(-50%, -50%) !important;
}

.ml-profile-card__avatar .et_pb_image_wrap {
  display: block !important;
}

.ml-profile-card__role {
  min-height: 2.8em;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* =========================
   Visual card / category card
   ========================= */

.ml-visual-card {
  position: relative !important;
  border-radius: var(--ml-radius-md) !important;
  overflow: hidden !important;
  min-height: 320px !important;
  color: var(--ml-color-white) !important;
  background: #cccccc !important;
}

.ml-visual-card__bg {
  position: absolute !important;
  inset: 0 !important;
  background-size: cover !important;
  background-position: center !important;
  transition: transform var(--ml-transition-base);
}

.ml-visual-card__overlay {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(
    to top,
    rgba(1, 44, 74, 0.65) 0%,
    rgba(1, 44, 74, 0.2) 45%,
    rgba(1, 44, 74, 0.08) 100%
  ) !important;
}

.ml-visual-card__content {
  position: relative !important;
  z-index: 2 !important;
  min-height: 320px !important;
  padding: var(--ml-space-5) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
}

.ml-visual-card__label {
  position: absolute !important;
  top: var(--ml-space-5) !important;
  left: var(--ml-space-5) !important;
  z-index: 3 !important;
}

.ml-visual-card:hover .ml-visual-card__bg {
  transform: scale(1.05);
}

/* =========================
   Section title wrapper
   ========================= */

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

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

/* =========================
   Kicker + title stack
   ========================= */

.ml-heading-stack > * + * {
  margin-top: var(--ml-space-3) !important;
}

/* =========================
   CTA wrapper
   ========================= */

.ml-cta {
  border-radius: var(--ml-radius-lg) !important;
  padding: var(--ml-space-7) !important;
}

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

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

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

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

.ml-cta__content > * + * {
  margin-top: var(--ml-space-4) !important;
}

/* =========================
   Custom HTML Button
   ========================= */

   .ml-btn-custom {
    text-decoration: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: min(100%, 320px) !important;
    aspect-ratio: 1 / 0.78 !important;
    min-height: 180px !important;
    padding: var(--ml-space-5) !important;
    margin-inline: auto !important;
    box-sizing: border-box !important;
    text-align: center !important;
    font-family: var(--ml-font-display) !important;
    font-size: var(--ml-fs-h3) !important;
    line-height: 1.1 !important;
    font-weight: var(--ml-fw-regular) !important;
    transition: var(--ml-transition-base) !important;
  }

.ml-btn-custom:hover {
  transform: translateY(-2px);
}

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

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

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

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

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

/* =========================
   Stats item
   ========================= */

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

.ml-stat__value {
  font-family: var(--ml-font-display) !important;
  font-size: var(--ml-fs-h2) !important;
  line-height: var(--ml-lh-tight) !important;
  color: var(--ml-color-navy) !important;
  text-transform: uppercase !important;
}

.ml-stat__label {
  margin-top: var(--ml-space-3) !important;
  font-size: var(--ml-fs-small) !important;
  color: var(--ml-color-text-soft) !important;
}

.ml-stat__label--top {
  margin-top: 0 !important;
  margin-bottom: var(--ml-space-1) !important;
}

/* =========================
   Divider / separator
   ========================= */

.ml-divider-space {
  height: var(--ml-space-8) !important;
}

.ml-divider-line {
  width: 100% !important;
  height: 1px !important;
  background: var(--ml-color-border) !important;
}

/* =========================
   Editorial — kit Divi (2 colonnes row)
   Row : ml-container ml-editorial ml-editorial--single-media | --stacked-media
   Modificateur ordre desktop : ml-editorial--reverse
   ========================= */

.et_pb_row.ml-editorial,
.et_pb_row_inner.ml-editorial {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: var(--ml-grid-gap) !important;
  align-items: start !important;
}

.et_pb_row.ml-editorial > .et_pb_column,
.et_pb_row_inner.ml-editorial > .et_pb_column {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  float: none !important;
}

.ml-editorial__content > * + * {
  margin-top: var(--ml-space-5) !important;
}

.ml-editorial__title {
  font-family: var(--ml-font-display) !important;
  font-size: var(--ml-fs-h2) !important;
  line-height: var(--ml-lh-heading) !important;
  font-weight: var(--ml-fw-regular) !important;
}

.ml-editorial__text {
  font-size: var(--ml-fs-body) !important;
  line-height: var(--ml-lh-body) !important;
}

.ml-editorial__text > * + * {
  margin-top: var(--ml-space-4) !important;
}

/* Listes à coches (maquettes éditoriales) — uniquement dans __text */
.ml-editorial__text ul {
  list-style: none !important;
  padding-left: 0 !important;
  margin: 0 !important;
}

.ml-editorial__text ul > li {
  position: relative !important;
  padding-left: var(--ml-space-6) !important;
}

.ml-editorial__text ul > li::before {
  content: "\2713" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0.1em !important;
  font-weight: var(--ml-fw-bold) !important;
  color: var(--ml-color-navy) !important;
  line-height: var(--ml-lh-list) !important;
}

.ml-editorial__text ul > li + li {
  margin-top: var(--ml-space-3) !important;
}

.ml-editorial__media-stack {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--ml-space-5) !important;
}

.et_pb_row.ml-editorial .ml-editorial__media img,
.et_pb_row.ml-editorial .ml-editorial__media-stack img,
.et_pb_row_inner.ml-editorial .ml-editorial__media img,
.et_pb_row_inner.ml-editorial .ml-editorial__media-stack img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  border-radius: var(--ml-radius-xl) !important;
}

/* Fallback Divi image module : radius même sans wrapper __media explicite */
.et_pb_row.ml-editorial .et_pb_image_wrap img,
.et_pb_row_inner.ml-editorial .et_pb_image_wrap img {
  border-radius: var(--ml-radius-xl) !important;
}

.ml-editorial__actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: var(--ml-space-4) !important;
  align-items: center !important;
}

/* Garder les couleurs de labels du mu-plugin ml-buttons dans le bloc éditorial */
.ml-editorial .ml-btn--teal,
.ml-editorial .ml-btn--orange,
.ml-editorial .ml-btn--navy {
  color: var(--ml-color-white) !important;
}

.ml-editorial .ml-btn--yellow {
  color: var(--ml-color-navy) !important;
}

.ml-editorial .ml-btn--orange-outline {
  color: var(--ml-color-orange) !important;
}

@media (min-width: 981px) {
  .et_pb_row.ml-editorial--reverse > .et_pb_column:first-child,
  .et_pb_row_inner.ml-editorial--reverse > .et_pb_column:first-child {
    order: 2 !important;
  }

  .et_pb_row.ml-editorial--reverse > .et_pb_column:nth-child(2),
  .et_pb_row_inner.ml-editorial--reverse > .et_pb_column:nth-child(2) {
    order: 1 !important;
  }
}

/* =========================
   Feature Panel — bloc éditorial premium (Divi)
   Section : ml-section ml-feature-panel
   Rows internes : __header | __content | __stats | __actions
   Variante row split : __content--split
   Variantes section : --compact | --center
   ========================= */

.et_pb_section.ml-feature-panel {
  background: var(--ml-color-navy) !important;
  color: var(--ml-color-white) !important;
  border-radius: var(--ml-radius-xl) !important;
  padding: var(--ml-space-8) !important;
  overflow: hidden !important;
  width: min(100% - 40px, var(--ml-container)) !important;
  max-width: none !important;
  margin-inline: auto !important;
}

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

.ml-feature-panel a {
  color: inherit !important;
}

.ml-feature-panel__header > * + * {
  margin-top: var(--ml-space-4) !important;
}

/* Divi : modules séparés dans la row header */
.ml-feature-panel__header .et_pb_module + .et_pb_module {
  margin-top: var(--ml-space-4) !important;
}

/* Resserre spécifiquement l'enchainement H2 -> H3 quand modules séparés */
.ml-feature-panel__header .et_pb_module.ml-feature-panel__title + .et_pb_module {
  margin-top: var(--ml-space-3) !important;
}

.ml-feature-panel__kicker {
  display: inline-block !important;
}

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

.ml-feature-panel__lead {
  color: var(--ml-color-white) !important;
  opacity: 0.98;
}

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

.ml-feature-panel__content > * + * {
  margin-top: var(--ml-space-5) !important;
}

.ml-feature-panel__main,
.ml-feature-panel__aside {
  min-width: 0 !important;
}

.ml-feature-panel__aside img,
.ml-feature-panel .et_pb_image_wrap img {
  border-radius: var(--ml-radius-xl) !important;
}

.ml-feature-panel__stats {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: var(--ml-space-6) !important;
}

.ml-feature-panel__stats > .et_pb_column {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  float: none !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 0 !important;
  row-gap: 0 !important;
}

.ml-feature-panel__stats > .et_pb_column > .et_pb_module:first-child:not([class^="ml-mb-"]):not([class*=" ml-mb-"]) {
  height: 135px !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  width: 100% !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.ml-feature-panel__stats .et_pb_image_wrap {
  margin-top: var(--ml-local-mt, 0) !important;
  margin-bottom: var(--ml-local-mb, 0) !important;
  padding-bottom: 0 !important;
}

.ml-feature-panel__stats .et_pb_image_wrap img {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

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

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

.ml-feature-panel__stats .ml-stat__label {
  font-size: var(--ml-fs-body) !important;
  font-weight: var(--ml-fw-bold) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: var(--ml-color-white) !important;
}

.ml-feature-panel .ml-stat__value {
  color: var(--ml-color-white) !important;
}

.ml-feature-panel .ml-stat__label {
  color: var(--ml-color-cream) !important;
}

.ml-feature-panel__actions {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: var(--ml-space-4) !important;
}

/* Split layout piloté sur la row de contenu */
.et_pb_row.ml-feature-panel__content--split,
.et_pb_row_inner.ml-feature-panel__content--split {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: var(--ml-grid-gap) !important;
  align-items: start !important;
}

.et_pb_row.ml-feature-panel__content--split > .et_pb_column,
.et_pb_row_inner.ml-feature-panel__content--split > .et_pb_column {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  float: none !important;
}

/* Variante compacte : densité réduite */
.et_pb_section.ml-feature-panel--compact {
  padding: var(--ml-space-6) !important;
}

.ml-feature-panel--compact .ml-feature-panel__content {
  margin-top: var(--ml-space-5) !important;
}

.ml-feature-panel--compact .ml-feature-panel__content > * + * {
  margin-top: var(--ml-space-4) !important;
}

.ml-feature-panel--compact .ml-feature-panel__stats {
  gap: var(--ml-space-5) !important;
}

/* Variante header centré */
.ml-feature-panel--center .ml-feature-panel__header {
  text-align: center !important;
  max-width: 980px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* =========================
   Info Panel — bloc de contenu flexible
   Paire de blocs côte à côte (grille 2 colonnes).
   Row Divi : ml-container ml-info-panel-row
   Variantes : --yellow, --orange, --cream, --outlined.
   Sous-éléments : __icon, __title, __text, __highlight, __actions.
   ========================= */

/* Row-level : grid 2 colonnes + reset colonnes Divi */
.et_pb_row.ml-info-panel-row,
.et_pb_row_inner.ml-info-panel-row {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: var(--ml-grid-gap) !important;
  align-items: stretch !important;
}

.et_pb_row.ml-info-panel-row > .et_pb_column,
.et_pb_row_inner.ml-info-panel-row > .et_pb_column {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  float: none !important;
}

.ml-info-panel {
  padding: var(--ml-space-6) !important;
  border-radius: var(--ml-radius-lg) !important;
  height: 100% !important;
  box-sizing: border-box !important;
  color: var(--ml-color-navy) !important;
}

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

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

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

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

.ml-info-panel--outlined-teal {
  border-color: var(--ml-color-teal) !important;
}

.ml-info-panel--outlined-orange {
  border-color: var(--ml-color-orange) !important;
}

/* Icône / illustration — taille via utility .ml-icon-* */
.ml-info-panel__icon {
  margin-bottom: var(--ml-space-5) !important;
}

/* Titre display */
.ml-info-panel__title {
  font-family: var(--ml-font-display) !important;
  font-size: var(--ml-fs-h2) !important;
  line-height: var(--ml-lh-heading) !important;
  font-weight: var(--ml-fw-regular) !important;
  color: var(--ml-color-navy) !important;
  margin-bottom: var(--ml-space-5) !important;
}

/* Texte courant */
.ml-info-panel__text {
  font-size: var(--ml-fs-body) !important;
  line-height: var(--ml-lh-body) !important;
}

.ml-info-panel__text > * + * {
  margin-top: var(--ml-space-4) !important;
}

/* Listes à coches */
.ml-info-panel__text ul {
  list-style: none !important;
  padding-left: 0 !important;
  margin: 0 !important;
}

.ml-info-panel__text ul > li {
  position: relative !important;
  padding-left: var(--ml-space-6) !important;
}

.ml-info-panel__text ul > li::before {
  content: "\2713" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0.1em !important;
  font-weight: var(--ml-fw-bold) !important;
  color: var(--ml-color-navy) !important;
  line-height: var(--ml-lh-list) !important;
}

.ml-info-panel__text ul > li + li {
  margin-top: var(--ml-space-3) !important;
}

/* Highlight stat */
.ml-info-panel__highlight {
  font-family: var(--ml-font-display) !important;
  font-size: var(--ml-fs-h3) !important;
  line-height: var(--ml-lh-subheading) !important;
  text-transform: uppercase !important;
  color: var(--ml-color-navy) !important;
  margin-bottom: var(--ml-space-4) !important;
}

/* Actions CTA */
.ml-info-panel__actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: var(--ml-space-4) !important;
  align-items: center !important;
  margin-top: var(--ml-space-5) !important;
}

/* =========================
   CTA Mosaic
   Structure only:
   - grille asymetrique de 4 tuiles CTA
   - ratios small / large
   - overlay image
   - aucun style de couleur / typo / padding interne
   ========================= */

.ml-cta-mosaic {
  width: 100% !important;
}

.ml-cta-mosaic__grid {
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  gap: var(--ml-grid-gap) !important;
  align-items: stretch !important;
}

.ml-cta-mosaic__tile {
  position: relative !important;
  display: grid !important;
  width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  isolation: isolate !important;
  align-items: stretch !important;
}

.ml-cta-mosaic__tile > * {
  grid-area: 1 / 1 !important;
  min-width: 0 !important;
}

.ml-cta-mosaic__tile--sm {
  grid-column: span 4 !important;
  aspect-ratio: 4 / 3 !important;
}

.ml-cta-mosaic__tile--lg {
  grid-column: span 8 !important;
  aspect-ratio: 16 / 7 !important;
}

.ml-cta-mosaic__media {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

.ml-cta-mosaic__media img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.ml-cta-mosaic__overlay {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0.55) 100%) !important;
}

.ml-cta-mosaic__content {
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--ml-space-4) !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
}

.ml-cta-mosaic__title {
  display: block !important;
  max-width: 100% !important;
}

.ml-cta-mosaic__button-wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
}

/* =========================
   Media Mosaic
   ========================= */

.ml-media-mosaic__grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr) !important;
  gap: var(--ml-grid-gap) !important;
  align-items: stretch !important;
}

.ml-media-mosaic__hero,
.ml-media-mosaic__card {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  overflow: hidden !important;
  border-radius: var(--ml-radius-lg) !important;
}

.ml-media-mosaic__hero {
  min-width: 0 !important;
  min-height: 100% !important;
  aspect-ratio: 16 / 5 !important;
}

.ml-media-mosaic__hero::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0.55) 100%) !important;
  pointer-events: none !important;
}

.ml-media-mosaic__title {
  position: absolute !important;
  right: 20px;
  bottom: 70px;
  left: 60px;
  z-index: 1 !important;
  margin: 0 !important;
  font-family: 'Bowlby One', fantasy;
  font-size: 60px;
}

.ml-media-mosaic__side {
  display: grid !important;
  grid-template-rows: auto 1fr !important;
  gap: var(--ml-space-4) !important;
  min-width: 0 !important;
}

.ml-media-mosaic__top {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: var(--ml-space-4) !important;
}

.ml-media-mosaic__card--sm {
  aspect-ratio: 1 / 1 !important;
}

.ml-media-mosaic__card--lg {
  aspect-ratio: 16 / 7 !important;
}

.ml-media-mosaic__hero img,
.ml-media-mosaic__card img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.ml-media-mosaic--reverse .ml-media-mosaic__side {
  grid-column: 1 !important;
}

.ml-media-mosaic--reverse .ml-media-mosaic__hero {
  grid-column: 2 !important;
}

/* =========================
   Media Mosaic Alt
   ========================= */

.ml-media-mosaic-alt__grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.65fr) !important;
  gap: var(--ml-grid-gap) !important;
  align-items: stretch !important;
}

.ml-media-mosaic-alt__hero,
.ml-media-mosaic-alt__card {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  overflow: hidden !important;
  border-radius: var(--ml-radius-lg) !important;
}

.ml-media-mosaic-alt__hero {
  min-width: 0 !important;
  min-height: 100% !important;
  aspect-ratio: 16 / 5 !important;
}

.ml-media-mosaic-alt__hero::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0.55) 100%) !important;
  pointer-events: none !important;
}

.ml-media-mosaic-alt__title {
  position: absolute !important;
  right: 20px !important;
  bottom: 70px !important;
  left: 60px !important;
  z-index: 1 !important;
  margin: 0 !important;
  font-family: 'Bowlby One', fantasy;
  font-size: 60px;
}

.ml-media-mosaic-alt__side {
  display: grid !important;
  grid-template-rows: auto 1fr !important;
  gap: var(--ml-space-4) !important;
  min-width: 0 !important;
}

.ml-media-mosaic-alt__top {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: var(--ml-space-4) !important;
}

.ml-media-mosaic-alt__card--sm {
  aspect-ratio: 1 / 1 !important;
}

.ml-media-mosaic-alt__card--lg {
  aspect-ratio: 16 / 7 !important;
}

.ml-media-mosaic-alt__hero img,
.ml-media-mosaic-alt__card img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* =========================
   Outcome / Pathway cards
   Bloc spécifique Divi Code modules
   ========================= */

.ml-outcome-card {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  min-height: 460px !important;
  padding: var(--ml-space-5) !important;
  border-radius: var(--ml-radius-xl) !important;
  box-sizing: border-box !important;
  text-align: center !important;
  align-items: center!important;
}


.ml-pathway-card {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  min-height: 460px !important;
  padding: var(--ml-space-5) !important;
  border-radius: var(--ml-radius-xl) !important;
  box-sizing: border-box !important;
  text-align: center !important;
  align-items: center!important;
  justify-content: center!important;
}

.ml-outcome-card > *,
.ml-pathway-card > * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.ml-outcome-card > * + *,
.ml-pathway-card > * + * {
  margin-top: var(--ml-space-5) !important;
}

.ml-outcome-card--yellow {
  background: var(--ml-color-yellow) !important;
  color: var(--ml-color-navy) !important;
}

.ml-pathway-card--teal {
  background: var(--ml-color-teal) !important;
  color: var(--ml-color-white) !important;
}

.ml-outcome-card__icon img {
  display: block !important;
  width: 100% !important;
  max-width: 160px !important;
  height: auto !important;
}

.ml-outcome-card__main {
  font-family: var(--ml-font-display) !important;
  font-size: clamp(44px, 5.4vw, 68px) !important;
  line-height: 0.20 !important;
  font-weight: var(--ml-fw-regular) !important;
  color: var(--ml-color-navy) !important;
}

.ml-outcome-card__intro {
  max-width: 24ch !important;
  margin-left: auto !important;
  margin-right: auto !important;
  font-size: var(--ml-fs-body-lg) !important;
  line-height: var(--ml-lh-subheading) !important;
  font-weight: var(--ml-fw-semibold) !important;
  color: var(--ml-color-navy) !important;
}

.ml-outcome-card__stats {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: var(--ml-space-4) !important;
  width: 100% !important;
  margin-top: var(--ml-space-5) !important;
}

.ml-outcome-stat {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: var(--ml-space-2) !important;
}

.ml-outcome-stat__number {
  font-family: var(--ml-font-display) !important;
  font-size: clamp(24px, 3vw, 34px) !important;
  line-height: 1 !important;
  font-weight: var(--ml-fw-regular) !important;
  color: var(--ml-color-navy) !important;
}

.ml-outcome-stat__label {
  max-width: 19ch !important;
  font-size: var(--ml-fs-xs) !important;
  line-height: 1.25 !important;
  font-weight: var(--ml-fw-semibold) !important;
  color: var(--ml-color-navy) !important;
}

.ml-pathway-card__head,
.ml-pathway-card__body {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

.ml-pathway-card__head {
  gap: var(--ml-space-3) !important;
}

.ml-pathway-card__body {
  gap: var(--ml-space-3) !important;
}

.ml-pathway-card__body {
  gap: 0px !important;
}

.ml-pathway-card__lead,
.ml-pathway-card__track {
  padding-bottom: 0 !important;
  margin: 0 !important;
}

.ml-pathway-card > * + * {
  margin-top: 90px !important;
}



.ml-pathway-card__line,
.ml-pathway-card__lead,
.ml-pathway-card__track {
  margin: 0 !important;
  color: var(--ml-color-white) !important;
}

.ml-pathway-card__line {
  font-size: clamp(26px, 2.8vw, 36px) !important;
  line-height: 1.15 !important;
  font-weight: var(--ml-fw-extrabold) !important;
}

.ml-pathway-card .ml-pathway-card__line {
  line-height: 0.0 !important;
}

.ml-pathway-card p.ml-pathway-card__line {
  font-size: clamp(36px, 3.5vw, 30px) !important;
}

.ml-pathway-card__lead {
  max-width: 34ch !important;
  font-size: clamp(20px, 1.9vw, 24px) !important;
  line-height: 1.25 !important;
  font-weight: var(--ml-fw-semibold) !important;
}

.ml-pathway-card__track {
  font-family: var(--ml-font-body) !important;
  font-size: clamp(20px, 1.9vw, 24px) !important;
  line-height: 1.25 !important;
  font-weight: var(--ml-fw-semibold) !important;
}

.ml-pathway-card__highlight {
  color: var(--ml-color-yellow) !important;
  font-size: 1.12em !important;
  font-weight: var(--ml-fw-extrabold) !important;
}

@media (max-width: 980px) {
  .ml-media-mosaic-alt__grid {
    grid-template-columns: 1fr !important;
  }

  .ml-media-mosaic-alt__side {
    display: none !important;
  }

  .ml-media-mosaic-alt__hero {
    order: 0 !important;
  }

  .ml-outcome-card,
  .ml-pathway-card {
    min-height: 400px !important;
    padding: var(--ml-space-7) !important;
  }

  .ml-outcome-card__stats {
    gap: var(--ml-space-4) !important;
    margin-top: var(--ml-space-5) !important;
  }
}

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

@media (max-width: 980px) {
  .ml-cta-mosaic__grid {
    grid-template-columns: 1fr !important;
  }

  .ml-cta-mosaic__tile--sm,
  .ml-cta-mosaic__tile--lg {
    grid-column: auto !important;
  }

  .ml-media-mosaic__grid {
    grid-template-columns: 1fr !important;
  }

  .ml-media-mosaic__side {
    display: none !important;
  }

  .ml-media-mosaic__hero {
    order: 0 !important;
  }

  .et_pb_row.ml-editorial,
  .et_pb_row_inner.ml-editorial {
    grid-template-columns: 1fr !important;
  }

  .et_pb_row.ml-editorial--reverse > .et_pb_column:first-child,
  .et_pb_row.ml-editorial--reverse > .et_pb_column:nth-child(2),
  .et_pb_row_inner.ml-editorial--reverse > .et_pb_column:first-child,
  .et_pb_row_inner.ml-editorial--reverse > .et_pb_column:nth-child(2) {
    order: 0 !important;
  }

  .et_pb_section.ml-feature-panel {
    padding: var(--ml-space-7) !important;
  }

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

  .et_pb_row.ml-feature-panel__content--split,
  .et_pb_row_inner.ml-feature-panel__content--split {
    grid-template-columns: 1fr !important;
  }

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

  .ml-feature-panel__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--ml-space-5) !important;
  }

  .ml-hero {
    padding: calc(var(--ml-header-height, 84px) + var(--ml-space-9)) var(--ml-space-6) var(--ml-space-9) !important;
  }

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

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

  .et_pb_row.ml-info-panel-row,
  .et_pb_row_inner.ml-info-panel-row {
    gap: var(--ml-space-5) !important;
  }

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

  .ml-visual-card,
  .ml-visual-card__content {
    min-height: 280px !important;
  }
}

@media (max-width: 767px) {
  .ml-hero {
    padding: calc(var(--ml-header-height, 84px) + var(--ml-space-8)) var(--ml-space-5) var(--ml-space-8) !important;
    border-radius: 0 0 var(--ml-radius-lg) var(--ml-radius-lg) !important;
  }

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

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

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

  .et_pb_row.ml-info-panel-row,
  .et_pb_row_inner.ml-info-panel-row {
    grid-template-columns: 1fr !important;
    gap: var(--ml-space-4) !important;
  }

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

  .ml-profile-card {
    padding-top: calc(var(--ml-space-10) / 2) !important;
  }

  .ml-profile-card > .et_pb_module:not(:first-child):not([class^="ml-mt-"]):not([class*=" ml-mt-"]),
  .ml-profile-card > .et_pb_module + .et_pb_module:not([class^="ml-mt-"]):not([class*=" ml-mt-"]),
  .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-cta {
    padding: var(--ml-space-5) !important;
  }

  .ml-outcome-card,
  .ml-pathway-card {
    min-height: 500px !important;
    padding: var(--ml-space-6) !important;
  }

  .ml-pathway-card {
    justify-content: space-around !important;
  }

  .ml-outcome-card > * + * {
    margin-top: var(--ml-space-4) !important;
  }

  
  .ml-pathway-card > * + * {
    margin-top: 12px !important;
  }

  .ml-outcome-card__stats {
    grid-template-columns: 1fr !important;
    gap: var(--ml-space-4) !important;
  }

  .ml-outcome-card__icon img {
    max-width: 130px !important;
  }

  .ml-visual-card,
  .ml-visual-card__content {
    min-height: 240px !important;
  }

  .ml-visual-card__label {
    top: var(--ml-space-4) !important;
    left: var(--ml-space-4) !important;
  }

  .et_pb_section.ml-feature-panel {
    padding: var(--ml-space-6) !important;
    border-radius: var(--ml-radius-lg) !important;
    width: min(100% - 24px, var(--ml-container)) !important;
  }

  .et_pb_section.ml-feature-panel--compact {
    padding: var(--ml-space-5) !important;
  }

  .ml-feature-panel__stats {
    grid-template-columns: 1fr !important;
    gap: var(--ml-space-4) !important;
  }

  .ml-feature-panel__actions {
    gap: var(--ml-space-3) !important;
  }

  .ml-media-mosaic__title,
  .ml-media-mosaic-alt__title {
    top: 50% !important;
    right: 20px !important;
    bottom: auto !important;
    left: 24px !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    font-size: clamp(28px, 8vw, 35px) !important;
    line-height: 0.95 !important;
  }
}