/* .m-schema-solution {
  --schema-center-bg: var(--wp--preset--color--secondary-darken);
  --schema-center-color: var(--wp--preset--color-base);
  --schema-blue: var(--wp--preset--color--primary);
  --schema-connector: var(--wp--preset--color--primary);
  --schema-flux-color: var(--wp--preset--color--main-accent);
} */

.m-schema {
  max-width: 100%;
  margin: 0 auto;
  padding: 2rem 2rem;

  hr{
    width: 50%;
  }
}

/* ===== HEADER ===== */
.m-schema__header {
  text-align: center;
  margin-bottom: 2rem;
}

.m-schema__titre {
  margin: 0;
}

.m-schema__titre--accent {
  color: var(--wp--preset--color--primary);
}

/* ===== CANVAS (positionnement relatif pour le SVG overlay) ===== */
.m-schema__canvas {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 125px;
}

.m-schema__svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}

/* ===== ZONES ===== */
.m-schema__zone {
  display: flex;
  gap: 0.75rem;
  position: relative;
  z-index: 1;
}

.m-schema__zone--haut,
.m-schema__zone--bas {
  flex-direction: row;
  justify-content: center;
}

.m-schema__zone--gauche,
.m-schema__zone--droite {
  flex-direction: column;
}

/* ===== BRANCHES ===== */
.m-schema__branche {
  position: relative;
}

.m-schema__branche--haut,
.m-schema__branche--bas {
  flex-direction: column;
}

/* ===== ROW CENTER ===== */
.m-schema__row-center {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 0;
  width: 100%;
}

/* ===== CENTRE ===== */
.m-schema__centre {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: var(--wp--preset--color--tertiary);
  text-align: left;
  border: 1px solid var(--wp--preset--color--main-accent);
  border-radius: var(--wp--custom--radius--base);
  padding: 2rem;
  width: 310px;
  gap: 0.4rem;
  position: relative;
  z-index: 2;
}

.m-schema__centre__picto {
  width: 52px;
  height: 52px;
  object-fit: contain;
  margin-bottom: 1rem;
}

.m-schema__centre__titre {
  font-size: 1.4rem;
  font-weight: var(--wp--custom--font-weight--extra-bold);
  letter-spacing: 0.02em;
}

.m-schema__centre__liste {
  list-style: none;
  color: var(--wp--preset--color--primary-darken);
  padding: 0;
  margin: 0.5rem 0 0;
  font-size: 0.85rem;
  line-height: 1.6;
  width: 100%;
}

.m-schema__centre__liste li {
  display: flex;
  align-items: flex-start;
  gap: var(--wp--custom--gap--xs);
  padding: 0.12rem 0;
}

.m-schema__check {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* ===== BLOCS SOLUTIONS ===== */
.m-schema__blocs {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.m-schema__branche--haut .m-schema__blocs,
.m-schema__branche--bas .m-schema__blocs {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.75rem;
}

.m-schema__bloc {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem;
  border-radius: var(--wp--custom--radius--sm);
  font-size: 1.10rem;
  font-weight: var(--wp--custom--font-weight--bold);
  text-decoration: none;  
  min-width: 200px;
  max-height: 60px;
  position: relative;
  z-index: 1;
}

/* Bleu */
.m-schema__bloc--bleu {
  background: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--base);
}

.m-schema__bloc--bleu .m-schema__bloc__picto-wrap {
  background-color: var(--wp--preset--color--tertiary);
}

/* Bleu clair */
.m-schema__bloc--bleu-clair {
  background: var(--wp--preset--color--primary-accent);
  color: var(--wp--preset--color--tertiary);
  border: 2px solid var(--wp--preset--color--primary);
}

.m-schema__bloc--bleu-clair .m-schema__bloc__picto-wrap{
  background: var(--wp--preset--color--base);
}

.m-schema__bloc__picto-wrap {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.m-schema__bloc__picto {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.m-schema__bloc__label {
  white-space: nowrap;
}

/* La vue mobile (2 axes) est masquée par défaut ; desktop utilise le canvas radial */
.m-schema__mobile {
  display: none;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1200px) {
  .m-schema {
    padding: 2rem 60px;
  }

  .m-schema {
    padding: 2rem 20px;
  }

  /* On masque la disposition radiale desktop, on affiche la vue mobile */
  .m-schema__canvas--desktop {
    display: none;
  }

  .m-schema__mobile {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    width: 100%;
  }

  /* Chaque axe = une colonne verticale d'éléments */
  .m-schema__axe {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

  /* Flèche descendante entre chaque élément d'un axe
     (zone/centre -> zone/centre suivant), sauf le dernier */
  .m-schema__axe > *:not(:last-child)::after {
    content: "↓";
    display: block;
    margin: 1rem auto;
    text-align: center;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--wp--preset--color--primary);
  }

  /* Les zones : empilées, centrées, pleine largeur */
  .m-schema__mobile .m-schema__zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 1rem;
  }

  /* Le centre (dupliqué) pleine largeur */
  .m-schema__centre--mobile {
    width: 100%;
    max-width: 340px;
    align-items: center;
    margin: 0 auto;
    border: unset;
  }

  /* Les blocs de toutes les branches : empilés, centrés */
  .m-schema__mobile .m-schema__blocs {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    width: 100%;
  }

  /* Le label de flux (data-flux) : titre de section vert, comme desktop */
  .m-schema__mobile .m-schema__branche[data-flux]:not([data-flux=""])::before {
    content: attr(data-flux);
    display: block;
    width: max-content;
    max-width: 90%;
    margin: 0 auto 1rem;
    padding: 0.4rem 0.9rem;
    text-align: center;
    background: #E9FCEE;
    color: var(--wp--preset--color--tertiary);
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: var(--wp--custom--radius--sm);
  }

  .m-schema__mobile .m-schema__bloc {
    width: 100%;
    max-width: 280px;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .m-schema__centre {
    min-width: 160px;
    padding: 1.25rem 1.5rem;
  }

  .m-schema__bloc {
    min-width: 100px;
    font-size: 0.8rem;
    padding: 0.5rem 0.75rem;
  }
}