/*
Theme Name: Child theme
Template: hello-elementor
*/

body {
   /* Flèche sous-menu (mask réutilisé partout, une seule source) */
   --arrow-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.586 6H1c-.552 0-1-.448-1-1s.448-1 1-1h17.586l-2.293-2.293c-.39-.39-.39-1.024 0-1.414.39-.39 1.024-.39 1.414 0l4 4c.188.188.293.44.293.707 0 .266-.105.519-.293.707l-4 4c-.39.39-1.024.39-1.414 0-.39-.39-.39-1.024 0-1.414L18.586 6Z'/%3E%3C/svg%3E");
}

/* ============================================
   LOGO WYCAN
   ============================================ */
.logo-wycan .first-color,
.favicon-wycan .first-color {
   fill: var(--e-global-color-primary);
}
.logo-wycan .second-color,
.favicon-wycan .second-color {
   fill: var(--e-global-color-text);
}

/* ============================================
   SVG
   ============================================ */
/* — Before titre — */
.before-title .first-color {
   fill: var(--e-global-color-text);
}
.before-title .second-color {
   fill: var(--e-global-color-primary);
}
/* — Icones globales — */
.icone-globale .second-color {
   fill: var(--e-global-color-secondary);
}
.icone-check .second-color {
   fill: var(--e-global-color-secondary);
}
/* - Icone banner - Création de site internet - */
.icone-banner {
  width: 100%;
  height: auto;
  --draw-dur: 5s;
  --fill-dur: 1.2s;
  --fill-delay: 2.4s;
}
.icone-banner .first-color  { --c: var(--e-global-color-accent);  stroke: var(--c); }
.icone-banner .second-color { --c: var(--e-global-color-primary); stroke: var(--c); }
.icone-banner .draw {
  fill: none;
  stroke-width: 1.5;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: drawIcon var(--draw-dur) ease forwards;
}
.icone-banner .fill-later {
  fill: var(--c);
  fill-opacity: 0;
  animation:
    drawIcon var(--draw-dur) ease forwards,
    fillIcon var(--fill-dur) ease forwards var(--fill-delay);
}
.icone-banner .soleil-image { --c: var(--e-global-color-secondary);  stroke: var(--c); }
@keyframes drawIcon { to { stroke-dashoffset: 0; } }
@keyframes fillIcon { to { fill-opacity: 1; } }

/* - Icone temps - Création de site internet - */
.icone-temps {
    opacity: 0.2;
}
.icone-temps .temps-contour {
    stroke: var(--e-global-color-text);
	fill: var(--e-global-color-cf34385);
}
.icone-temps .temps-heures,
.icone-temps .temps-heures-intermediaires {
   fill: var(--e-global-color-accent) !important;
   stroke: none !important;
}
.icone-temps .temps-grande-aiguille,
.icone-temps .temps-petite-aiguille {
   transform-box: view-box;
   transform-origin: 51.5px 51.5px;
   stroke: var(--e-global-color-primary) !important;
}
.icone-temps .temps-grande-aiguille {
   animation: tourne-aiguille 12s linear infinite;
}
.icone-temps .temps-petite-aiguille {
   animation: tourne-aiguille 144s linear infinite;
}
@keyframes tourne-aiguille {
   to {
      transform: rotate(360deg);
   }
}

/* ============================================
   HOVER BOX
   ============================================ */
.h-box {
   position: relative;
   overflow: hidden;
   transition: transform 0.3s ease;
}
.h-box::before {
   content: "";
   position: absolute;
   z-index: 0;
   width: 50px;
   height: 50px;
   border-radius: 50%;
   background: var(--e-global-color-1fa303a);
   transform: scale(0);
   transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.h-box > * {
   position: relative;
   z-index: 1;
}
.h-box:hover,
.h-box:focus-within {
   transform: translateY(-4px);
}
.h-box:hover::before,
.h-box:focus-within::before {
   transform: scale(28);
}
.h-box.tl::before {
   top: -25px;
   left: -25px;
}
.h-box.tr::before {
   top: -25px;
   right: -25px;
}
.h-box.bl::before {
   bottom: -25px;
   left: -25px;
}
.h-box.br::before {
   bottom: -25px;
   right: -25px;
}

/* — Step — */
.box-step:hover .step {
   background-color: var(--e-global-color-74a0a98);
   transform: translateY(-4px);
}
.step {
   width: 50px;
   height: 50px;
   display: flex;
   align-items: center;
   justify-content: center;
}

/* ============================================
   MENU
   ============================================ */
/* — Items — */
.elementor-item {
   position: relative;
   transition: color 0.25s ease;
}
.elementor-item:hover {
   color: var(--e-global-color-primary);
}

/* — Flèche sous-menu : rotation au hover ET à l'ouverture réelle — */
.menu-item a .sub-arrow svg {
   width: 9px !important;
   transition: transform 0.3s ease;
}
.menu-item a .sub-arrow i {
   font-size: 9px !important;
   transition: transform 0.3s ease;
}
.menu-item:hover .sub-arrow svg,
.menu-item:hover .sub-arrow i,
.menu-item [aria-expanded="true"] .sub-arrow svg,
.menu-item [aria-expanded="true"] .sub-arrow i {
   transform: rotate(180deg);
}

/* — Sous-items : puce flèche animée — */
.elementor-sub-item {
   position: relative;
}
.elementor-sub-item::before {
   content: "";
   position: absolute;
   left: 0;
   top: 50%;
   width: 16px;
   height: 8px;
   background-color: var(--e-global-color-primary);
   -webkit-mask: var(--arrow-mask) no-repeat center / contain;
   mask: var(--arrow-mask) no-repeat center / contain;
   opacity: 0;
   transform: translateY(-50%) translateX(-6px);
   transition:
      transform 0.25s ease,
      opacity 0.25s ease;
}
.elementor-sub-item:hover::before {
   opacity: 1;
   transform: translateY(-50%) translateX(5px);
}
.elementor-sub-item.elementor-item-active::before {
   opacity: 1;
   transform: translateY(-50%) translateX(0);
}

/* — Off canvas — */
.elementor-widget-off-canvas {
   --e-off-canvas-animation-duration: 0.5s !important;
}

/* — Dropdown — */
.sub-menu.elementor-nav-menu--dropdown {
   border-width: 1px !important;
   border-color: var(--e-global-color-5122623);
   border-style: solid;
   padding: 15px 0 !important;
}

/* — Item courant (menu mobile) — */
.menu-mobile-item {
   position: relative;
}
.menu-mobile-item.is-current::before {
   content: "";
   position: absolute;
   left: -22px; /* ⚠️ dépend du padding gauche du menu mobile (~22px) — réajuster si le padding change */
   top: 50%;
   transform: translateY(-50%);
   width: 14px;
   height: 8px;
   background-color: var(--e-global-color-primary);
   -webkit-mask: var(--arrow-mask) no-repeat center / contain;
   mask: var(--arrow-mask) no-repeat center / contain;
}

/* — Footer — */
.menu-footer .elementor-icon-list-icon {
	position: relative;
}
.menu-footer .elementor-icon-list-icon svg {
	width: 4px !important;
	height: auto;
	opacity: 1;
	transition: opacity 0.25s ease;
}
.menu-footer a:hover .elementor-icon-list-icon svg {
	opacity: 0;
}
.menu-footer .elementor-icon-list-icon::before {
	content: "";
	position: absolute;
	left: -15px;
	top: 50%;
	width: 16px;
	height: 8px;
	background-color: var(--e-global-color-primary);
	-webkit-mask: var(--arrow-mask) no-repeat center / contain;
	mask: var(--arrow-mask) no-repeat center / contain;
	opacity: 0;
	transform: translateY(-50%) translateX(-6px);
	transition:
		transform 0.25s ease,
		opacity 0.25s ease;
}
.menu-footer a:hover .elementor-icon-list-icon::before {
	opacity: 1;
	transform: translateY(-50%) translateX(5px);
}
.menu-footer .is-current .elementor-icon-list-icon svg {
	opacity: 0;
}
.menu-footer .is-current .elementor-icon-list-icon::before {
	opacity: 1;
	transform: translateY(-50%) translateX(5px);
}
/* ============================================
   TABS
   ============================================ */
.e-n-accordion-item-title[aria-expanded="true"] {
   border-bottom-left-radius: 0px !important;
   border-bottom-right-radius: 0px !important;
}

/* ============================================
   COMPTEURS
   ============================================ */
.compteur-home .elementor-counter-number-prefix,
.compteur-home .elementor-counter-number-suffix {
   color: var(--e-global-color-primary);
   font-size: 30px !important;
   font-weight: 700;
}

/* ============================================
   CONTOUR TEXTE
   @supports : garantit qu'aucun titre ne devient invisible (transparent
   sans stroke) sur un moteur qui ne gère pas -webkit-text-stroke.
   ============================================ */
@supports (-webkit-text-stroke: 1px black) {
   .contour {
      -webkit-text-stroke: 1px var(--e-global-color-primary);
      color: transparent !important;
      paint-order: stroke fill;
   }
   .contour.secondary {
      -webkit-text-stroke-color: var(--e-global-color-secondary) !important;
   }
   .contour.text {
      -webkit-text-stroke-color: var(--e-global-color-text) !important;
   }
   .contour.soft {
      -webkit-text-stroke-color: var(--e-global-color-5122623) !important;
   }
}

/* ============================================
   SNIPPET — PARTENAIRE (éditeur de code décoratif)
   ============================================ */
.wyc-editor {
   background: var(--e-global-color-cf34385);
   border: 1px solid var(--e-global-color-5122623);
   border-radius: 12px;
   overflow: hidden;
   font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.wyc-editor__bar {
   display: flex;
   align-items: center;
   gap: 8px;
   height: 44px;
   padding: 0 16px;
   background: var(--e-global-color-74a0a98);
   border-bottom: 1px solid var(--e-global-color-5122623);
}
.wyc-dot {
   width: 11px;
   height: 11px;
   border-radius: 50%;
   background: #2c353a;
}
.wyc-editor__file {
   margin-left: 8px;
   font-size: 12.5px;
   color: #6b7a80;
}
.wyc-code {
   margin: 0;
   padding: 22px 0;
   font-size: 14px;
   line-height: 1.75;
   color: var(--e-global-color-accent);
   counter-reset: wyc-ln;
}
.wyc-cl {
   display: block;
   position: relative;
   padding: 0 26px 0 10px;
   margin-left: 35px;
   white-space: pre-wrap;
   border-left: 1px solid var(--e-global-color-5122623);
}
@media (max-width: 767px) {
   .wyc-cl {
      border-left: 0;
      margin-left: 0;
   }
}
.wyc-cl::before {
   counter-increment: wyc-ln;
   content: counter(wyc-ln);
   position: absolute;
   left: 0;
   top: 0;
   width: 10px;
   text-align: right;
   color: #3a454a;
   user-select: none;
   margin-left: -25px;
}
.wyc-cmt {
   color: #6b7a80;
   font-style: italic;
}
.wyc-kw {
   color: var(--e-global-color-primary);
}
.wyc-str {
   color: var(--e-global-color-secondary);
}
.wyc-fn {
   color: var(--e-global-color-text);
}
.wyc-var {
   color: var(--e-global-color-accent);
}
.wyc-pn {
   color: #5c6b70;
}

/* Variante compacte (mobile) */
.wyc-editor--compact .wyc-code {
   font-size: 13px;
   padding: 16px 0;
}
.wyc-editor--compact .wyc-cl {
   padding: 0 18px;
}
.wyc-editor--compact .wyc-cl::before {
   display: none;
}

.wyc-caret {
   display: inline-block;
   width: 8px;
   height: 17px;
   margin-left: 3px;
   vertical-align: -3px;
   background: var(--e-global-color-primary);
   animation: wyc-blink 1.1s steps(1) infinite;
}
@keyframes wyc-blink {
   50% {
      opacity: 0;
   }
}

/* ============================================
   MARQUEE IMAGE
   ============================================ */
.uikfe-marquee-img {
   width: clamp(260px, 32vw, 460px);
}

/* ============================================
   BORDURE ANIMÉE
   ============================================ */
@property --angle {
   syntax: "<angle>";
   initial-value: 0deg;
   inherits: false;
}
.glow-border::after {
   content: "";
   position: absolute;
   inset: 0;
   border-radius: inherit;
   padding: 1px;
   background: conic-gradient(from var(--angle), var(--e-global-color-cf34385) 250deg, var(--e-global-color-primary) 380deg);
   -webkit-mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
   -webkit-mask-composite: xor;
   mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
   mask-composite: exclude;
   opacity: 0;
   pointer-events: none;
}
.glow-border.comet-run::after {
   animation: comet 7s ease-out forwards;
}
@keyframes comet {
   0% {
      --angle: 0deg;
      opacity: 0;
   }
   12% {
      opacity: 1;
   }
   88% {
      opacity: 1;
   }
   100% {
      --angle: 360deg;
      opacity: 0;
   }
}

/* ============================================
   AVIS CLIENTS
   ============================================ */
.ti-review-content {
    color: var(--e-global-color-accent);
    font-weight: 450 !important;
}
/* ============================================
   SÉPARATION ANIMÉE
   ============================================ */
.barre-animee {
  position: relative;
  width: 100%;
  height: 1px;
  background-color: var( --e-global-color-3783c61 );
  margin: 0;
}
.barre-animee::before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-left: 18px solid transparent;
  border-right: 18px solid transparent;
  border-top: 18px solid var(--e-global-color-3783c61);
  top: 10px;
  left: 0;
  transform: translateY(-50%);
  animation: glisse-triangle 17s ease-in-out infinite alternate;
}
@keyframes glisse-triangle {
  0% {
    left: 7%;
    transform: translateY(-50%);
  }
25% {
    left: 28%;
    transform: translateY(-50%);
  }
	50% {
    left: 49%;
    transform: translateY(-50%);
  }
	75% {
    left: 69%;
    transform: translateY(-50%);
  }
  100% {
    left: 89%;
    transform: translateY(-50%);
  }
}
/* ============================================
   ACCESSIBILITÉ — réduction des animations
   ============================================ */
@media (prefers-reduced-motion: reduce) {
   /* Menu */
   .e-n-menu .e-n-menu-title::before {
      transition: none;
   }
   /* Hover box */
   .h-box,
   .h-box::before {
      transition: none;
   }
   /* Bordure glow */
   .glow-border::after {
      animation: none !important;
      opacity: 0;
   }
   /* Snippet partenaire */
   .wyc-caret {
      animation: none;
   }
   /* Icônes banner */
   .icone-banner .draw,
   .icone-banner .fill-later {
      animation: none;
      stroke-dashoffset: 0;
   }
   .icone-banner .fill-later {
      fill-opacity: 1;
   }
   /* Icône temps */
   .icone-site .temps-grande-aiguille,
   .icone-site .temps-petite-aiguille {
      animation: none;
   }
}