.icon-wrapper {
  position: relative;
  width: calc(var(--spacing-5xl));
  height: calc(var(--spacing-5xl));
  /* margin-left: auto;
  margin-right: auto; */
  cursor: pointer;
  display: inline-block;
}

@media screen and (min-width: 800px) {
  .icon-wrapper {
    width: calc(var(--spacing-4xl));
    height: calc(var(--spacing-4xl));
  }
}


@media screen and (min-width: 1000px) {
  .icon-wrapper {
    width: calc(0.7*var(--spacing-4xl));
    height: calc(0.7*var(--spacing-4xl));
  }
}




.icon-wrapper img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.2s ease-in-out;
}

.icon-hover {
  opacity: 0;
}

.icon-wrapper:hover .icon-hover {
  opacity: 1;
}

.icon-wrapper:hover .icon-default {
  opacity: 0;
}

.manuel-boutons {
  display: flex;
  flex-direction: colum;
  justify-content: space-around;
  align-items: center;
}
@media screen and (min-width: 460px) {
  .manuel-boutons {
    flex-direction: row;
  }
}

#sib-container .flex-r {
  flex-direction: column !important;
}

.sib-form {
  padding: var(--spacing-xs) 0 0 0 !important;
  gap: var(--spacing-xs);
}

/* 
.icon::before,
.icon::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  transition: opacity 0.3s ease;
}

.icon::before,
.icon::after {
  background-size: contain;
  background-position: center;
}

.icon-commander::before {
  background-image: url('../../../media/commander.svg');
  opacity: 1;
}

.icon-commander::after {
  background-image: url('../../../media/commander_hover.svg');
  opacity: 0;
}

.icon-telecharger::before {
  background-image: url('../../../media/telecharger.svg');
  opacity: 1;
}

.icon-telecharger::after {
  background-image: url('../../../media/telecharger_hover.svg');
  opacity: 0;
}

.icon-soutenir::before {
  background-image: url('../../../media/soutenir.svg');
  opacity: 1;
}

.icon-soutenir::after {
  background-image: url('../../../media/soutenir_hover.svg');
  opacity: 0;
}





.icon:hover::after {
  opacity: 1;
}

.icon:hover::before {
  opacity: 0;
} */

.ressources li {
  color: var(--red);
  list-style: disc;
}

.ressources li a:hover {
  text-decoration: underline;
}

/* .ressources li a:hover {
  text-decoration: none;
} */

/* 
  .section-2 {margin-top: calc(-1*var(--spacing-2xl));}
  .section-1 {position:relative; z-index: 1000;}
  .section-2 {position:relative; z-index: 0;} */
/* 
.section-ressources {
  background-image: url(../../media/illustrations/poissons.svg);
  background-repeat: no-repeat;
  background-position:
    right;
  background-size: contain;
  filter: brightness(1.2);
} */

@media (min-width: 1200px) {
  .section-ressources::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: url(../../media/illustrations/poissons.svg);
    background-repeat: no-repeat;
    background-position: right;
    background-size: contain;
    pointer-events: none;
    z-index: 0;
    background-size: 30%;
  }
}

.col-1 {
  flex: 3;
}
.col-2 {
  flex: 3;
}

@media (max-width: 1199px) {
  .col-3 {
    display: none;
  }
}

@media (min-width: 1200px) {
  .col-3 {
    flex: 1;
  }
}

.section-ressources {
  position: relative;
  background-image: none;
  z-index: 1;
}
.modal-content {
  text-align: center;
}
#sib-form {
  gap: var(--spacing-2xs);
}