/*!******************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/line-container/style.scss ***!
  \******************************************************************************************************************************************************************************************************************************************************/
/**
 * The following styles get applied both on the front of your site
 * and in the editor.
 *
 * Replace them with your own styles or remove the file completely.
 */
.wp-block-cnt-line-container {
  color: #fff;
  margin-top: var(--wp--preset--spacing--60) !important;
}

#line-inner-content {
  padding-left: var(--wp--style--root--padding-left);
  padding-right: var(--wp--style--root--padding-right);
  max-width: 800px;
  width: calc(100% - 2 * var(--wp--style--root--padding-left));
  margin: auto;
  box-sizing: border-box;
}

#home-ressources-outer {
  display: grid;
  grid-template-columns: 1fr;
  position: relative;
}

#artist-fullsize-line {
  display: none;
  width: 100%;
}

#artist-line-decoration {
  display: flex;
  position: absolute;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
  z-index: -1;
  overflow: hidden;
  grid-row: 1/2;
  grid-column: 1/2;
  align-items: flex-start;
  margin-top: 50px;
}

.artist__curve-deco-sm {
  display: flex;
  fill: none;
  flex-direction: row;
  justify-content: flex-start;
  align-content: flex-start;
  align-items: flex-start;
  height: auto;
  width: calc(2 * var(--wp--style--root--padding-left));
}

#home-ressources-bg-outer {
  max-width: 100%;
  overflow: hidden;
  grid-column: 1/2;
  grid-row: 1/2;
}

.home-ressources__bg {
  max-width: 100%;
  height: auto;
}

.home-ressources__icon {
  display: flex;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  width: 150px;
  height: 150px;
}

#home-ressources-icon-map {
  background-image: url(../images/carte-points-illustration-accueil.ac5653d7.png);
}

#home-ressources-icon-workshop {
  background-image: url(../images/personne-conteur-livre-formations-illustration-accueil.4f765b25.png);
}

#home-ressources-icon-ressources {
  background-image: url(../images/livres-arc-en-ciel-personne-nuage-ressources-illustration-accueil.94d9984a.png);
}

#home-ressources-content {
  grid-column: 1/2;
  grid-row: 1/2;
  background-color: var(--wp--preset--color--contrast);
  height: 100%;
  max-width: var(--wp--style--global--content-size);
  border-radius: 50px;
  margin-right: calc(3 * var(--wp--style--root--padding-right));
  margin-left: calc(3 * var(--wp--style--root--padding-left));
  box-sizing: border-box;
}

#home-ressources-section-title {
  text-align: center;
  padding-left: 1rem;
  padding-right: 1rem;
}

#home-ressources-content-boxes {
  display: grid;
  gap: 1.5rem;
  margin-left: -2rem;
  margin-right: -2rem;
  box-sizing: border-box;
  margin-bottom: 2rem;
}

.home-ressources__box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: var(--wp--preset--color--base);
  border: 3px solid var(--wp--preset--color--contrast);
  border-radius: 50px;
  padding: 25px;
  color: var(--wp--preset--color--contrast);
  text-align: center;
  position: relative;
}
.home-ressources__box:hover, .home-ressources__box:focus-within, .home-ressources__box:active {
  border: 3px solid var(--wp--preset--color--accent-4);
  background-color: var(--wp--preset--color--accent-4);
  cursor: pointer;
}
.home-ressources__box a:after {
  content: "";
  inset: 0;
  position: absolute;
  z-index: 10;
}

@media screen and (min-width: 720px) {
  #line-inner-content {
    width: calc(100% - 4 * var(--wp--style--root--padding-left));
  }
  #home-ressources-content {
    margin-right: calc(4 * var(--wp--style--root--padding-right));
    margin-left: calc(4 * var(--wp--style--root--padding-left));
  }
  .artist__curve-deco-sm {
    width: calc(4 * var(--wp--style--root--padding-left));
  }
}
@media screen and (min-width: 1000px) {
  .home-ressources__bg {
    height: 100%;
  }
  #home-ressources-bg-outer {
    grid-column: 1/2;
  }
  #artist-line-decoration {
    align-items: center;
  }
  #home-ressources-content {
    grid-column: 1/2;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 700px;
  }
  .artist__curve-deco-sm {
    width: calc(50% - 350px);
  }
  #home-ressources-content-boxes {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    max-width: 1000px;
  }
  #home-ressources-ressources {
    grid-column: 2/3;
    grid-row: 1/3;
  }
}
@media screen and (min-width: 1300px) {
  #artist-line-decoration {
    justify-content: center;
  }
  .artist__curve-deco-sm {
    display: none;
  }
  #artist-fullsize-line {
    display: flex;
    min-width: auto;
  }
}
@media screen and (min-width: 2500px) {
  #artist-fullsize-line {
    min-width: 2500px;
  }
}
/* Animated Path */
.animated-path,
.animated-path__deco__sm-left,
.animated-path__deco__sm-right {
  fill: none;
  stroke: var(--wp--preset--color--accent-2);
  stroke-width: 20;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

.animated-path__deco__sm-left {
  stroke-dasharray: 300;
  /* Total path length */
  stroke-dashoffset: -300;
  /* Start hidden */
}

.animated-path__deco__obj {
  opacity: 0;
  overflow: hidden;
}

.animate .animated-path__deco__sm-left {
  animation-name: drawMobileLeft;
  animation-delay: 0.2s;
}
.animate .animated-path__deco__sm-right {
  animation-name: drawMobileRight;
  animation-delay: 0.3s;
}
.animate .animated-path__deco__obj {
  animation: objOpacity 2s linear forwards;
  animation-delay: 0.3s;
  max-height: 0;
}

.animated-path__deco__sm-right {
  stroke-dasharray: 500;
  stroke-dashoffset: -500;
}

/* Keyframe Animation */
@keyframes objOpacity {
  to {
    opacity: 1;
    /* Reveal path from left to right */
    max-height: auto;
  }
}
/* Keyframe Animation */
@keyframes drawMobileLeft {
  to {
    stroke-dashoffset: 0;
    /* Reveal path from left to right */
  }
}
/* Keyframe Animation */
@keyframes drawMobileRight {
  to {
    stroke-dashoffset: 0;
    /* Reveal path from left to right */
  }
}
/* Animated Path */
.animated-path__deco__full {
  fill: none;
  stroke: var(--wp--preset--color--accent-2);
  /* Or your desired color */
  stroke-width: 70;
  stroke-dasharray: 4000;
  /* Total path length */
  stroke-dashoffset: -4000;
  /* Start hidden */
  animation: drawFull 2s linear forwards;
}

/* Keyframe Animation */
@keyframes drawFull {
  from {
    stroke-dashoffset: -4000;
    /* Hide path initially */
  }
  to {
    stroke-dashoffset: 0;
    /* Reveal path from left to right */
  }
}

/*# sourceMappingURL=style-index.css.map*/