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

/* ============================================
   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
   ============================================ */
.stroke0-5 svg {stroke-width:0.5}
.stroke0-6 svg {stroke-width:0.6}
.stroke0-7 svg {stroke-width:0.7}
.stroke0-8 svg {stroke-width:0.8}
.stroke0-9 svg {stroke-width:0.9}
.stroke1 svg {stroke-width:1}
.stroke1-1 svg {stroke-width:1.1}
.stroke1-2 svg {stroke-width:1.2}
.stroke1-3 svg {stroke-width:1.3}
.stroke1-4 svg {stroke-width:1.4}
.stroke1-5 svg {stroke-width:1.5}

.svg-hero,
.svg-hero .elementor-icon,
.svg-hero svg {
	width: 100%;
	height: auto;
}
@media (min-width: 768px) and (max-width: 1024px) {
	.svg-hero {
		width: 80%;
	}
}
/* Elementor impose width:1em et height:1em au SVG inline. Sur un viewBox
   ajuste au trace (donc non carre), ce carre force recree du vide autour de
   l'icone. Largeur fixe, hauteur libre : plus aucune marge, et les textes des
   icon-box restent alignes entre eux. */
.elementor-icon svg.icone-site,
.elementor-icon svg.icone-site-lg {
	width: 1em;
	height: auto;
}
.icone-hero,
.icone-site-lg,
.icone-site {
	stroke: var(--e-global-color-accent);
}
.icone-hero {
	stroke-width: 1.4;
}
.icone-site-lg {
	stroke-width: 2;
}
.icone-site {
	stroke-width: 2.4;
}
.icone-hero {
	opacity: 0.7;
}
.fill.color-primary {
	fill: var(--e-global-color-primary);
}
.stroke.color-primary {
	stroke: var(--e-global-color-primary);
}
.fill.color-secondary {
	fill: var(--e-global-color-secondary);
}
.stroke.color-secondary {
	stroke: var(--e-global-color-secondary);
}
.fill.color-accent {
	fill: var(--e-global-color-accent);
}
.stroke.color-accent {
	stroke: var(--e-global-color-accent);
}
.temps-heures-intermediaires {
	fill: var(--e-global-color-accent);
	opacity: 0.4;
}
.icone-hero {
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	animation: tracer 2.2s ease-in-out forwards;
}
@keyframes tracer {
	to {
		stroke-dashoffset: 0;
	}
}
@media (prefers-reduced-motion: reduce) {
	.icone-hero {
		stroke-dasharray: none;
		stroke-dashoffset: 0;
		animation: none;
	}
}
/* ============================================
   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;
}

/* ============================================
   Horloge
   ============================================ */
.horloge {
   position: relative;
	opacity:0.7;
}
.horloge-cadran {
   stroke-width: 1;
}
.horloge-heures {
   stroke-width: 1.4;
}
.horloge-minutes {
   stroke-width: 1;
}

/* ============================================
   TABS
   ============================================ */
.e-n-accordion-item-title[aria-expanded="true"] {
   border-bottom-left-radius: 0px !important;
   border-bottom-right-radius: 0px !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: 13px;
   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);
}

/* ============================================
   ACCOLADES
   ============================================ */
.wy-accolades .elementor-heading-title::before,
.wy-accolades .elementor-heading-title::after {
   color: var(--e-global-color-primary);
   font-size: 1.6em;
   line-height: 0;
   vertical-align: -0.15em;
}
.wy-accolades .elementor-heading-title::before {
   content: "{ ";
}
.wy-accolades .elementor-heading-title::after {
   content: " }";
}

/* ============================================
   BORDURE ANIMÉE
   ============================================ */
@property --wy-angle {
   syntax: "<angle>";
   initial-value: 0deg;
   inherits: false;
}
.contour-anime {
   position: relative;
   isolation: isolate;
}
.contour-anime::after {
   content: "";
   position: absolute;
   inset: 0;
   border-radius: inherit;
   padding: 1px;
   background: conic-gradient(from var(--wy-angle), transparent 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;
   transition: opacity 300ms ease;
}
.contour-anime:hover::after,
.contour-anime:focus-within::after {
   opacity: 1;
   animation: contour-tour 3.5s linear infinite;
}
@keyframes contour-tour {
   to {
      --wy-angle: 360deg;
   }
}
@media (prefers-reduced-motion: reduce) {
   .contour-anime:hover::after,
   .contour-anime:focus-within::after {
      animation: none;
   }
}

/* ============================================
   AVIS CLIENTS
   ============================================ */
.ti-review-content {
    font-family: var(--e-global-typography-text-font-family), Sans-serif;
    font-size: var(--e-global-typography-text-font-size);
    font-weight: var(--e-global-typography-text-font-weight);
    text-transform: var(--e-global-typography-text-text-transform);
    line-height: var(--e-global-typography-text-line-height);
    letter-spacing: var(--e-global-typography-text-letter-spacing);
    color: var(--e-global-color-accent);
}

/* ============================================
   LIGNE AVEC FLECHE ANIMÉE
   ============================================ */
@media (max-width: 1024px) {
   .container-fleche-animee > .fleche-animee { display: none !important; }
}

@media (min-width: 1024.02px) {
   .container-fleche-animee { --fa-n: 1; --fa-i: 1; --fa-col: calc((100% - (var(--fa-n) - 1) * var(--column-gap, 0px)) / var(--fa-n)); position: relative; }
   .container-fleche-animee > .elementor-widget-icon-box { flex: 1 1 0; min-width: 0; cursor: pointer; transition: transform 0.3s ease; }

   .container-fleche-animee:has(> .elementor-widget-icon-box:nth-child(2 of .elementor-widget-icon-box)) { --fa-n: 2; }
   .container-fleche-animee:has(> .elementor-widget-icon-box:nth-child(3 of .elementor-widget-icon-box)) { --fa-n: 3; }
   .container-fleche-animee:has(> .elementor-widget-icon-box:nth-child(4 of .elementor-widget-icon-box)) { --fa-n: 4; }
   .container-fleche-animee:has(> .elementor-widget-icon-box:nth-child(5 of .elementor-widget-icon-box)) { --fa-n: 5; }
   .container-fleche-animee:has(> .elementor-widget-icon-box:nth-child(6 of .elementor-widget-icon-box)) { --fa-n: 6; }
   .container-fleche-animee:has(> .elementor-widget-icon-box:nth-child(7 of .elementor-widget-icon-box)) { --fa-n: 7; }
   .container-fleche-animee:has(> .elementor-widget-icon-box:nth-child(8 of .elementor-widget-icon-box)) { --fa-n: 8; }

   .container-fleche-animee:has(> .elementor-widget-icon-box:nth-child(2 of .elementor-widget-icon-box):hover) { --fa-i: 2; }
   .container-fleche-animee:has(> .elementor-widget-icon-box:nth-child(3 of .elementor-widget-icon-box):hover) { --fa-i: 3; }
   .container-fleche-animee:has(> .elementor-widget-icon-box:nth-child(4 of .elementor-widget-icon-box):hover) { --fa-i: 4; }
   .container-fleche-animee:has(> .elementor-widget-icon-box:nth-child(5 of .elementor-widget-icon-box):hover) { --fa-i: 5; }
   .container-fleche-animee:has(> .elementor-widget-icon-box:nth-child(6 of .elementor-widget-icon-box):hover) { --fa-i: 6; }
   .container-fleche-animee:has(> .elementor-widget-icon-box:nth-child(7 of .elementor-widget-icon-box):hover) { --fa-i: 7; }
   .container-fleche-animee:has(> .elementor-widget-icon-box:nth-child(8 of .elementor-widget-icon-box):hover) { --fa-i: 8; }

   .container-fleche-animee > .fleche-animee {
      left: calc((var(--fa-i) - 1) * (var(--fa-col) + var(--column-gap, 0px)) + var(--fa-col) / 2) !important;
      right: auto !important;
      translate: -50% 0;
      transition: left 0.45s cubic-bezier(0.25, 1, 0.5, 1);
      pointer-events: none;
   }

   .container-fleche-animee > .elementor-widget-icon-box:hover { transform: translateY(3px); }
   .container-fleche-animee .elementor-icon-box-title,
   .container-fleche-animee .elementor-icon-box-title span { transition: color 0.3s ease; }
   .container-fleche-animee > .elementor-widget-icon-box:hover .elementor-icon-box-title,
   .container-fleche-animee > .elementor-widget-icon-box:hover .elementor-icon-box-title span { color: var(--e-global-color-secondary) !important; }
}

@media (min-width: 1024.02px) and (prefers-reduced-motion: reduce) {
   .container-fleche-animee > .fleche-animee { transition: none; }
   .container-fleche-animee > .elementor-widget-icon-box { transition: none; }
}

































/****************************************************************** A VOIR SI ON GARDE ******************************************************************/

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");
}

/* ============================================
   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;
}



/* ============================================
   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);
}











/* ============================================
   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;
   }
}