/* ACCORDEON */
.section-accordeons {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.section-accordeons .section-content {
  display: flex;
  flex-direction: column;
  row-gap: 20px;
}

.section-accordeons .section-content h2 {
  margin-bottom: 0px;
}

.section-accordeons .section-content .section-contenus {
  display: flex;
  flex-direction: column;
  row-gap: 20px;
}

.section-accordeons .section-content .section-contenus h2,
.section-accordeons .section-content .section-contenus h3,
.section-accordeons .section-content .section-contenus h4,
.section-accordeons .section-content .section-contenus h5,
.section-accordeons .section-content .section-contenus p {
  margin-bottom: 0px;
}

.accordeons {
  row-gap: 20px;
  display: flex;
  flex-direction: column;
}

.accordeon {
  display: flex;
  flex-direction: column;
  width: 100%;
  border-radius: 20px;
}

.accordeon .accordeon-top {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  padding: 20px 30px;
  transition: 0.2s;
  border-radius: 20px 20px 0px 0px;
}
.accordeon:not(.active) .accordeon-top {
  border-radius: 20px;
}

.accordeon:not(.active) .accordeon-top:hover {
  border-radius: 20px;
}

.accordeon .accordeon-top h3 {
  margin-bottom: 0px;
}

.accordeon .accordeon-bottom {
  padding: 30px;
}

.accordeon .accordeon-bottom :last-child {
  margin-bottom: 0px;
}

.accordeon-icone i {
  font-size: 30px;
}

.accordeon-icone i {
  font-size: 30px;
}

/* Options de couleurs */
.accordeon.active .accordeon-top:has(.coul-principale) {
  background-color: var(--principale);
  color: var(--blanc);
}

.accordeon.active .accordeon-top:has(.coul-principale) i {
  color: var(--blanc);
}

.accordeon.active .accordeon-top.tab-principale {
  background-color: var(--principale) !important;
}

.accordeon.active .accordeon-top.tab-principale h3 {
  color: var(--blanc) !important;
}

.accordeon.active .accordeon-top.tab-principale i {
  color: var(--blanc) !important;
}

.accordeon.active .accordeon-top:has(.coul-accent) {
  background-color: var(--accent);
  color: var(--blanc);
}

.accordeon.active .accordeon-top:has(.coul-accent) i {
  color: var(--blanc);
}

.accordeon.active .accordeon-top.tab-accent {
  background-color: var(--accent) !important;
}

.accordeon.active .accordeon-top.tab-accent h3 {
  color: var(--blanc) !important;
}

.accordeon.active .accordeon-top.tab-accent i {
  color: var(--blanc) !important;
}

.accordeon.active .accordeon-top:has(.coul-noir) {
  background-color: var(--noir);
  color: var(--blanc);
}

.accordeon.active .accordeon-top:has(.coul-noir) i {
  color: var(--blanc);
}

.accordeon.active .accordeon-top.tab-noir {
  background-color: var(--noir) !important;
}

.accordeon.active .accordeon-top.tab-noir h3 {
  color: var(--blanc) !important;
}

.accordeon.active .accordeon-top.tab-noir i {
  color: var(--blanc) !important;
}

.accordeon:not(.active) .accordeon-top.bg-hover-accent:hover i,
.accordeon:not(.active) .accordeon-top.bg-hover-principale:hover i,
.accordeon:not(.active) .accordeon-top.bg-hover-noir:hover i {
  color: var(--blanc);
}

/* --------------- RESPONSIVE --------------- */

@media screen and (max-width: 1270px) {}

@media screen and (max-width: 1024px) {}

@media screen and (max-width: 960px) {
  .accordeon .accordeon-top {
    padding: 20px;
  }

  .accordeon .accordeon-bottom {
    padding: 0px 20px 20px 20px;
  }
}

@media screen and (max-width: 820px) {}

@media screen and (max-width: 768px) {
  .section-onglets .accordeon .accordeon-top {
    border-radius: 20px;
  }

  .accordeon .accordeon-bottom {
    padding: 20px 20px 20px 20px;
  }
}

@media screen and (max-width: 600px) {
  .accordeons {
    row-gap: 15px;
  }

  .accordeon-icone i {
    font-size: 20px;
    line-height: 30px;
  }
}

@media screen and (max-width: 450px) {}