.elementor-kit-7{--e-global-color-primary:#1C1C1B;--e-global-color-secondary:#54595F;--e-global-color-text:#1C1C1B;--e-global-color-accent:#61CE70;--e-global-color-0a26117:#EFEBE3;--e-global-color-d63e853:#E3D6C5;--e-global-typography-primary-font-family:"Kraton";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Maven Pro";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;--e-global-typography-f907e25-font-family:"Kraton";--e-global-typography-f907e25-font-size:2rem;--e-global-typography-f907e25-font-weight:600;background-color:var( --e-global-color-0a26117 );}.elementor-kit-7 e-page-transition{background-color:var( --e-global-color-text );}.elementor-kit-7 a{color:var( --e-global-color-secondary );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.elementor-lightbox{--lightbox-ui-color:#CE6161;--lightbox-ui-color-hover:var( --e-global-color-accent );--lightbox-text-color:var( --e-global-color-accent );--lightbox-header-icons-size:100px;--lightbox-navigation-icons-size:100px;}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//***CSS pour animer le cadre autour des boutons au chargementen donnant la classe "bouton-anime" blanc***/

.bouton-anime {
  position: relative;
  z-index: 1;
  background-color: transparent;
  color: #fff;
  border: none;
  cursor: pointer;
  
  overflow: hidden;
}

.bouton-anime::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid #fff;
  box-sizing: border-box;
  z-index: -1;

  /* Animation */
  clip-path: polygon(
    0 0, 0 0, 0 0, 0 0
  );
  animation: traceContour 2s ease-out 2s forwards;
}

@keyframes traceContour {
  0% {
    clip-path: polygon(
      0 0, 0 0, 0 0, 0 0
    );
  }

  25% {
    /* top side */
    clip-path: polygon(
      0 0, 100% 0, 100% 0, 0 0
    );
  }

  50% {
    /* top + right sides */
    clip-path: polygon(
      0 0, 100% 0, 100% 100%, 0 0
    );
  }

  75% {
    /* top + right + bottom sides */
    clip-path: polygon(
      0 0, 100% 0, 100% 100%, 0 100%
    );
  }

  100% {
    /* full rectangle */
    clip-path: polygon(
      0 0, 100% 0, 100% 100%, 0 100%
    );
  }
}

/***fin CSS pour animer le cadre autour des boutons au chargement***/




/***CSS pour animer le cadre autour des boutons au chargementen donnant la classe "bouton-anime" noir***/

.bouton-noir {
  position: relative;
  z-index: 1;
  background-color: transparent;
  color: #000;
  border: none;
  cursor: pointer;
  overflow: hidden;
}

.bouton-noir::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid #000;
  box-sizing: border-box;
  z-index: -1;

  clip-path: polygon(0 0, 0 0, 0 0, 0 0);
  transition: clip-path 2s ease-out;
}

/* Animation déclenchée dynamiquement */
.bouton-noir.animate::before {
  animation: traceContour 2s ease-in-out 1.5s forwards;
}

@keyframes traceContour {
  0% {
    clip-path: polygon(0 0, 0 0, 0 0, 0 0);
  }
  25% {
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
  }
  50% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 0);
  }
  75% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
  100% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
}


/***fin CSS pour animer le cadre autour des boutons au chargement***//* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Kraton';
	font-style: normal;
	font-weight: normal;
	font-display: auto;
	src: url('https://metalleriedonzodesign.fr/wp-content/uploads/2025/09/Kraton.eot');
	src: url('https://metalleriedonzodesign.fr/wp-content/uploads/2025/09/Kraton.eot?#iefix') format('embedded-opentype'),
		url('https://metalleriedonzodesign.fr/wp-content/uploads/2025/09/Kraton.woff2') format('woff2'),
		url('https://metalleriedonzodesign.fr/wp-content/uploads/2025/09/Kraton.woff') format('woff'),
		url('https://metalleriedonzodesign.fr/wp-content/uploads/2025/09/Kraton.ttf') format('truetype'),
		url('https://metalleriedonzodesign.fr/wp-content/uploads/2025/09/Kraton.svg#Kraton') format('svg');
}
/* End Custom Fonts CSS */