.organigramme {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.organigramme__pole {
  border-radius: 32px 8px 32px 8px;
  padding: 24px 16px;

  display: flex;
  flex-direction: column;
  gap: 16px;

  width: 100%;
  max-width: 458px;
  margin: 0 auto;
}

.organigramme__principal {
  background-color: var(--color-primary);
  max-width: 850px;
}

.organigramme__principal h3.organigramme__title,
.organigramme__principal  .organigramme__text {
  color: var(--color-white);
  text-align: center;
}

.organigramme__pole-1 {
  background-color: #F7E4F0;
}

.organigramme__pole-1 h3.organigramme__title,
.organigramme__pole-1 .organigramme__text {
  color: #8E2967;
}

.organigramme__pole-2 {
  background-color: var(--color-orange);
}

.organigramme__pole-2 h3.organigramme__title,
.organigramme__pole-2 .organigramme__text {
  color: #7C4C02;
}

.organigramme__pole-3 {
  background-color: var(--color-primary--clear);
}

.organigramme__pole-3 h3.organigramme__title,
.organigramme__pole-3 .organigramme__text {
  color: var(--color-primary--text);
}

h3.organigramme__title {
  font-weight: 800;
  font-size: 28px;
  margin: 0;
  line-height: 125%;
}

.organigramme__text :first-child {
  margin-top: 0;
}
.organigramme__text :last-child {
  margin-bottom: 0;
}


/* @media all and (min-width:800px) {
  .organigramme {
    display: grid;
    gap: 32px;
    grid-template-areas: 'a a'
                         'c d'
                         'b b';

    grid-template-columns: repeat(2, 1fr);
  }

  .organigramme__pole {
    padding: 48px 32px;
  }

  .organigramme__principal {
    grid-area: a;
  }

  .organigramme__pole-1 {
    grid-area: b;
  }

  .organigramme__pole-2 {
    grid-area: c;
  }

  .organigramme__pole-3 {
    grid-area: d;
  }


  .organigramme__pole-1,
  .organigramme__pole-2,
  .organigramme__pole-3 {
    position: relative;
  }

  .organigramme__pole-1::before,
  .organigramme__pole-2::before,
  .organigramme__pole-3::before {
    content: '';
    position: absolute;
    top: -32px;
    left: 50%;
    width: 2px;
    height: 32px;
    background-color: var(--color-primary);
    transform: translateX(-50%);
  }

  .organigramme__pole-1::before { background-color: #8E2967; }
  .organigramme__pole-2::before { background-color: #7C4C02; }
  .organigramme__pole-3::before { background-color: var(--color-primary--text); }
} */


@media all and (min-width:1000px) {
  .organigramme {
    display: grid;
    gap: 32px;
    grid-template-areas: 'a a a'
                         'b c d';
    grid-template-columns: repeat(3, 1fr);
  }

  .organigramme__pole {
    padding: 48px 32px;
  }

  .organigramme__principal {
    grid-area: a;
  }

  .organigramme__pole-1 {
    grid-area: b;
  }

  .organigramme__pole-2 {
    grid-area: c;
  }

  .organigramme__pole-3 {
    grid-area: d;
  }


  .organigramme__pole-1,
  .organigramme__pole-2,
  .organigramme__pole-3 {
    position: relative;
  }

  .organigramme__pole-1::before,
  .organigramme__pole-2::before,
  .organigramme__pole-3::before {
    content: '';
    position: absolute;
    top: -32px;
    left: 50%;
    width: 2px;
    height: 32px;
    background-color: var(--color-primary);
    transform: translateX(-50%);
  }

  .organigramme__pole-1::before { background-color: #8E2967; }
  .organigramme__pole-2::before { background-color: #7C4C02; }
  .organigramme__pole-3::before { background-color: var(--color-primary--text); }


  .organigramme__pole-1::before {
    left: unset;
    right: 10%;
    transform: rotate(45deg);
    height: 50px;
    top: -40px;
  }

  .organigramme__pole-3::before {
    left: 10%;
    transform: rotate(-45deg);
    height: 50px;
    top: -40px;
  }
}