@font-face {
  font-family: 'Avenir Heavy';
  src: url("./fonts/avenir/Metropolis-SemiBold.woff2") format("woff2"), url("./fonts/avenir/Metropolis-SemiBold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Avenir Black';
  src: url("./fonts/avenir/Metropolis-Black.woff2") format("woff2"), url("./fonts/avenir/Metropolis-Black.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Avenir Light';
  src: url("./fonts/avenir/Metropolis-Light.woff2") format("woff2"), url("./fonts/avenir/Metropolis-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Avenir Book';
  src: url("./fonts/avenir/Metropolis-Regular.woff2") format("woff2"), url("./fonts/avenir/Metropolis-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Avenir Medium';
  src: url("./fonts/avenir/Metropolis-Medium.woff2") format("woff2"), url("./fonts/avenir/Metropolis-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Avenir Thin';
  src: url("./fonts/avenir/Metropolis-Thin.woff2") format("woff2"), url("./fonts/avenir/Metropolis-Thin.woff") format("woff");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Avenir Bold';
  src: url("./fonts/avenir/Metropolis-Bold.woff2") format("woff2"), url("./fonts/avenir/Metropolis-Bold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Avenir ExtraLight';
  src: url("./fonts/avenir/Metropolis-ExtraLight.woff2") format("woff2"), url("./fonts/avenir/Metropolis-ExtraLight.woff") format("woff");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}


html, body {
  height: 100%;
  margin: 0;
  font-family: 'Avenir Book';
}

.svg-wrapper {
  position: relative;
  margin-bottom: 20px;
}




#pentagram-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(213px, 1fr));
  gap: 10px;
  max-width: 436px;
  height: 414px;
  margin: auto;
  position: relative;
  width: 100%;
}

/*Cercle extérieur

#pentagram-container::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0%;
  transform: translate(-50%, 0%);
  width: 424px;
  height: 424px;
  border-radius: 50%;
  z-index: -2;
  background: aqua;
}


#pentagram-container::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 4%;
  transform: translate(-50%, 0);
  width: 390px;
  height: 390px;
  border-radius: 50%;
  z-index: -1;
  background: #328787;
}
*/

.letter {
  position: absolute;
  left: 50%;
  top: 60%;
  transform-origin: 0 -20px;
  font-size: 7px;
  color: #333;
}



@keyframes rotateText {
  100% {
      transform: rotate(360deg);
  }
  0% {
      transform: rotate(0deg);
  }
}




.main_wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 2%;
}


.main_wrapper .wrapper{
  display: grid;
  grid-template-columns: 40% 45%;
  align-items: center;
  justify-content: space-between;
}


.pentagram {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #759A1F;
}




.fade-image {
  width: 100%;
  max-width: 100vw;
  height: 100%;
  object-fit: cover;
}

/* .__accroche .class_image{
  animation-name: floating;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  position: relative;
} */

@keyframes floating {
  0% { transform: translate(0,  0px); }
  50%  { transform: translate(0, 15px); }
  100%   { transform: translate(0, -0px); }
}


@media screen and (min-width: 640px) {



  .svg-overlay::after {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      opacity: 0;
      transition: opacity 0.3s ease-in-out;
      font-weight:700;
      font-size: 20px;
      text-align: center;
      padding: 10px 20px;
      white-space: nowrap;
      pointer-events: none;
      text-transform: capitalize;
  }



  .svg-overlay-1::before,
  .svg-overlay-1::after {
      color: #007041;
      position: absolute;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      font-weight: 700;
      font-size: 30px;
      text-align: center;
      padding: 0px 10px;

  }

  div#pentagram-container .svg-overlay-1::after {
      content: " Epargne";
      left: 55%;
      top: 130%;
      width: 240px;
      display: flex;
      justify-content: center;
      opacity: 0;
  }

  div#pentagram-container .svg-overlay-1::before {
      content: "& Prévoyance";
      top: 145%;
      left: 58%;
      width: 240px;
      display: flex;
      justify-content: center;
      font-size: 35px;
      opacity: 0;

  }


  .svg-overlay-2::after {
      content: "Banque / Finance";
      color: #0076a8;
      font-size: 35px;
      left: 0%;
      top: 155%;
      opacity: 0;
  }

  .svg-overlay-3::after {
      content: "Investissement";
      color: #7b6469;
      font-size: 35px;
      left: -17%;
      top: -15%;
      opacity: 0;
  }

  .svg-overlay-4::after {
      content: "Tourisme";
      color: #be531c;
      font-size: 35px;
      left: 75%;
      top: -15%;
      opacity: 0;
  }




  .svg-overlay-5::before,
  .svg-overlay-5::after {
      color: #f2a900;
      position: absolute;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      font-weight: 700;
      font-size: 35px;
      text-align: center;
      padding: 0px 10px;
      opacity: 0;

  }

  div#pentagram-container .svg-overlay-5::after {
      content: "Développement";
      left: 111%;
      top: 114%;
      width: 300px;
      display: flex;
      justify-content: center;
  }

  div#pentagram-container .svg-overlay-5::before {
      content: "territorial";
      left: 111%;
      top: 147%;
      width: 300px;
      display: flex;
      justify-content: center;
      font-size: 35px;
  }



/*
  #pentagram-container:hover .svg-overlay {
      opacity: 0.2;
  }

  .svg-overlay:hover {
      opacity: 1 !important;
      z-index: 10;
  }
  */


  .svg-overlay-1,
  .svg-overlay-2,
  .svg-overlay-3,
  .svg-overlay-4,
  .svg-overlay-5 {
      transition: opacity 0.3s ease-in-out;
  }

  .svg-lien-1,
  .svg-lien-2,
  .svg-lien-3,
  .svg-lien-4,
  .svg-lien-5 {
      display: block;
      width: 100%;
      height: 100%;
  }


  /*
    .svg-overlay::before{
       opacity: 1;
      transition: opacity 0.3s ease-in-out;
     }

  */

  .svg-overlay.show-hover:hover::before,
  .svg-overlay.show-hover:hover::after {
      animation: textFadeIn 0.3s ease-out forwards;
   }



   @keyframes textFadeIn {
      from {
          opacity: 0;
          transform: translate(-50%, -40%);
      }
      to {
          opacity: 1;
          transform: translate(-50%, -50%);
      }
  }

    /*
  .svg-overlay:hover::after {
      animation: textFadeIn 0.3s ease-out forwards;
  }
  .svg-overlay:hover::before,
  .svg-overlay:hover::after {
      opacity: 1;
  }  */



  /*.svg-overlay.fadein:hover::before,
  .svg-overlay.fadein:hover::after {
      opacity: 1 !important;
      animation: textFadeIn 0.3s ease-out forwards;

  }

  @keyframes textFadeIn {
      from {
          opacity: 0;
      }
      to {
          opacity: 1;
      }
  }

  fin pour le hover  */




  /* [data-id="1"]  */
  [data-center-id="1"]{
      position: absolute;
      right: 10%;
      top: -5px;
      width: 195px;
      height: 143px;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 0;
      overflow: hidden;
      pointer-events: none;
  }

  #pentagram-container [data-text-id="text-part1"] {
      position: absolute;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      opacity: 0;
      animation: fadeIn 0s forwards, rotate 5.5s linear forwards 0s;
      right: 45%;
      top: 104%;
  }


  /* [data-id="2"]  */
  [data-center-id="2"]{
      position: absolute;
      right: 4%;
      bottom:10%;
      width: 200px;
      height: 225px;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 0;
      overflow: hidden;
      pointer-events: none;
  }

  #pentagram-container [data-text-id="text-part2"] {
      position: absolute;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      opacity: 0;
      animation: fadeIn 2s forwards, rotate 6s linear forwards 2s;
      right: 59%;
      bottom: 22%;
  }


  /* [data-id="3"]  */
  [data-center-id="3"]{
      position: absolute;
      right: 28%;
      bottom: -5%;
      width: 220px;
      height: 120px;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 2;
      overflow: hidden;
      pointer-events: none;

  }

  #pentagram-container [data-text-id="text-part3"] {
      position: absolute;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      opacity: 0;
      animation: fadeIn 5s forwards, rotate 5.5s linear forwards 5s;
      right: 0%;
      bottom: 130%;
  }



  /* [data-id="4"]  */
  [data-center-id="4"]{
      position: absolute;
      left: 0%;
      bottom: 12%;
      width: 185px;
      height: 200px;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 0;
      overflow: hidden;
      pointer-events: none;

  }


  #pentagram-container [data-text-id="text-part4"] {
      position: absolute;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      opacity: 0;
      animation: fadeIn 8s forwards, rotate 6s linear forwards 8s;
      left: 60%;
      bottom: 23%;
  }



  /* [data-id="5"]  */
  [data-center-id="5"]{
      position: absolute;
      right: 55%;
      top: 0%;
      width: 171px;
      height: 143px;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 0;
      overflow: hidden;
      pointer-events: none;
  }


  #pentagram-container [data-text-id="text-part5"] {
      position: absolute;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      opacity: 0;
      animation: fadeIn 10s forwards, rotate 7s linear forwards 10s;
      top: 100%;
      left: 50%;
  }


  @keyframes fadeIn {
      0% {
          opacity: 0;
      }
      100% {
          opacity: 0;
      }
  }

  @keyframes rotate {
      0% {
          transform: rotate(0deg);
      }
      100% {
          transform: rotate(360deg);
          opacity:1;
      }
  }

}

[data-text-id="text-part1"]::after {
  transform: none;
}

[data-text-id="text-part1"] .letter {
  color: #007041;
}

[data-text-id="text-part2"] .letter {
  color: #0076a8;
}

[data-text-id="text-part3"] .letter {
color: #7b6469;
}

[data-text-id="text-part4"] .letter {
  color: #be531c;
}

[data-text-id="text-part5"] .letter {
  color: #f2a900;
}

[data-text-id] {
  text-transform: capitalize;
}




.svg-wrapper {
  position: absolute;
  width: 436px;
  height:436px;
  margin: 0 auto;
}

.svg-overlay {
  position: absolute;
}

.svg-overlay-1 {
  top: 0;
  left: 46%;
  transform: translate(-50%, -7%);
  z-index: 101;
}

.svg-overlay-2 {
  top: 40%;
  left: 72%;
  transform: translate(-50%, -48%);
  z-index: 102;
}

.svg-overlay-3 {
  bottom: 30%;
  left: 66%;
  transform: translate(-53%, 51%);
  z-index:103;
}

.svg-overlay-4 {
  bottom: 0;
  left: 38%;
  transform: translate(-50%, -10%);
  z-index: 102;
}

.svg-overlay-5 {
  top: 50%;
  left: 20%;
  transform: translate(-49%, -57%);
  z-index: 101;
}


.svg-overlay-6 {
  bottom: 0%;
  left: 50%;
  transform: translate(-45%, 50%);
  z-index: 105;
}



.svg-wrapper #text-part1{
  color:#007041;
  top: 0%;
  left: 70%;
}



.svg-wrapper #text-part2{
  color:#0076a8;
  top: 80%;
  left: 40%;
}



.svg-wrapper #text-part3{
  right: 40%;
  color: #7b6469;
  top: 55%;
}



.svg-wrapper #text-part4{
  color:#be531c;
  left: -34%;
  top:-24%;
}

.svg-wrapper #text-part5{
  color:#f2a900;
  left: 0%;
  top: -85%;
}


.svg-wrapper #text-part6{
  color:#c2c5c8;
  left: 50%;
  bottom: 25%;
}

button.svg-button {
  color: #c2c5c8;
  appearance: none;
  border: 0;
  background: none;
  width: 127px;
  font-weight: bold;
  line-height: 20px;
  letter-spacing: 0;
  font-family: 'Avenir Bold';
  font-size: 20px;
  cursor: pointer;
  text-align: center;
  display: inline-flex;
  align-items: center;
  position: relative;
}

.svg-button::after {
  content: '';
  background-image: url('/themes/cdg/asset/images/fr/pointeur.svg');
  background-size: 80px 50px;
  background-repeat: no-repeat;
  background-position: center;
  width: 80px;
  height: 50px;
  position: absolute;
  left: 15%;
  top: 50%;
  transform: translateY(-160%);
  z-index: 17;
}




button#close-menu{
  appearance: none;
  border: 0;
  background: none;
  position: absolute;
  width: 25%;
  bottom: -50px;
  left: 50%;
  transform: translate(-50%, 50%);
  cursor: pointer;

}


#close-menu .class_icon{
width: 100%;
height: 100%;
}



.svg-overlay-6.svg-overlay.fade-in,
[data-center-id="6"]{
  display:none;
}

.main_hero .wrapper {
  display: grid;
  grid-template-columns: 40% 45%;
  align-items: center;
  justify-content: space-between;
}