/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */

/* Container (default look) */
.custom-icon-box{
  background:#0E2143;          /* default background */
  color:#fff;                   /* default text color */
  text-align:center;
  position:relative;
  overflow:hidden;
  transition:background .4s ease;
}

/* Text + icon default (white) and SVG fill */
.custom-icon-box .elementor-icon,
.custom-icon-box .elementor-icon i,
.custom-icon-box .elementor-icon svg,
.custom-icon-box .elementor-icon svg path,
.custom-icon-box .elementor-icon-box-title,
.custom-icon-box .elementor-icon-box-description{
  color:#fff;
  fill:currentColor;
  transition:color .4s ease, fill .4s ease;
}

/* Wipe overlay (appears only on hover via animation) */
.custom-icon-box::before{
  content:"";
  position:absolute;
  inset:0;
  background:#0E2143;          /* same as default bg (acts like a curtain) */
  pointer-events:none;
  transform:translateY(100%);   /* parked below by default (not visible) */
}

/* Hover: switch bg + colors, run wipe down */
.custom-icon-box:hover{
  background:#D4D4D4 !important;
}
.custom-icon-box:hover .elementor-icon,
.custom-icon-box:hover .elementor-icon i,
.custom-icon-box:hover .elementor-icon svg,
.custom-icon-box:hover .elementor-icon svg path,
.custom-icon-box:hover .elementor-icon-box-title,
.custom-icon-box:hover .elementor-icon-box-description{
  color:#0E2143 !important;                /* text+icon to dark blue */
  fill:currentColor;
}
.custom-icon-box:hover::before{
  animation:wipeDown .6s ease forwards;
}

/* Keyframes: sweep from top -> bottom */
@keyframes wipeDown{
  from{ transform:translateY(-100%); }  /* enter from top */
  to  { transform:translateY(100%); }   /* exit at bottom */
}

/* Optional: if you still want a slight content reveal motion, add this: */
/*
.custom-icon-box .elementor-icon-box-icon,
.custom-icon-box .elementor-icon-box-content{ transition:opacity .4s ease; }
.custom-icon-box:hover .elementor-icon-box-icon,
.custom-icon-box:hover .elementor-icon-box-content{ opacity:1; }
*/

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .custom-icon-box::before{ animation:none !important; transform:none; }
}

/* =============================================== */

/* ----- Carte / conteneur principal ----- */
.service-hp-container{
  position: relative;
  overflow: hidden;          /* empêche tout débordement */
  border-radius: 22px;       /* ajuste au besoin */
}

/* ----- Wrapper image (nouvelle structure) ----- */
.service-hp-container .elementor-element-db935b4{
  overflow: hidden;          /* important pour le crop */
  border-radius: inherit;    /* garde les coins arrondis */
}

/* Image inside the first image widget */

.service-hp-container .elementor-element-db935b4 .elementor-widget-image a {
	border-radius: 20px;
    overflow: hidden;
}

.service-hp-container .elementor-element-db935b4 .elementor-widget-image a img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transform: scale(1);
  transition: transform .6s ease;
  will-change: transform;
}

/* Hover: zoom image */
.service-hp-container:hover .elementor-element-db935b4 .elementor-widget-image a img{
  transform: scale(1.08);
}

/* ----- Icône “+” (widget image du pictogramme) ----- */
/* cible le widget icône (dans ton HTML : .elementor-element-a239d7c) */
.service-hp-container .elementor-element-a239d7c img{
  display:inline-block;
  transform-origin:50% 50%;
  transition: transform .35s ease;
}

/* Hover: rotation 90° */
.service-hp-container:hover .elementor-element-a239d7c img{
  transform: rotate(90deg);
}


/* --- Variante conseillée (rotation visible) : 45° --- */
/* .service-hp-container:hover .elementor-widget-image:last-of-type img{
    transform: rotate(45deg);
} */


/* --- Bloc icon-box --- */

/* Couleurs par défaut (blanc) */
.our_advantages .elementor-icon-box-title,
.our_advantages .elementor-icon-box-description,
.our_advantages .elementor-icon,
.our_advantages .elementor-icon i,
.our_advantages .elementor-icon svg{
  color:#fff;
  transition: color .35s ease, fill .35s ease;
}

.our_advantages .elementor-icon svg,
.our_advantages .elementor-icon svg path,
.our_advantages .elementor-icon svg *{
  fill: currentColor !important;               /* écrase le fill inline du SVG */
}

/* --- HOVER: fond gris clair + contenu bleu --- */
.our_advantages:hover {
  background:#D4D4D4;
  border-color:#D4D4D4;
}

.our_advantages:hover .elementor-icon-box-title,
.our_advantages:hover .elementor-icon-box-description,
.our_advantages:hover .elementor-icon,
.our_advantages:hover .elementor-icon i,
.our_advantages:hover .elementor-icon svg{
  color:#0E2143 !important;   /* texte + icône en bleu */
}

/* Option: lisse aussi la transition du <svg> lui-même */
.our_advantages .elementor-icon svg{
  transition: transform .35s ease;  /* en plus de color/fill déjà présents */
  transform-origin: 50% 50%;
}

/* Hover: léger zoom de l’icône */
.our_advantages:hover .elementor-icon,
.our_advantages:hover .elementor-icon svg{
  transform: scale(1.1);           /* ajuste à 1.1 si tu veux plus fort */
}

/* ===== Bouton du formulaire avec flèches défilantes ===== */

/* Bouton du formulaire */
.lead-form .elementor-form .e-form__buttons .elementor-button{
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background:#0E2143;
  color:#fff;
  padding-left: 56px;   /* espace pour la flèche à GAUCHE */
  padding-right: 24px;  /* ajuste si besoin */
}

/* Piste (gabarit) à GAUCHE uniquement */
.lead-form .elementor-form .e-form__buttons .elementor-button::before{
  content:"";
  position:absolute;
  top:6px; bottom:6px;
  left:16px;                 /* ← forcer côté gauche, peu importe RTL */
  width:24px;                /* largeur = taille flèche */
  pointer-events:none;
  /* on ne met pas d'image ici, juste le conteneur */
}

/* Flèche unique animée à l'intérieur de la piste */
.lead-form .elementor-form .e-form__buttons .elementor-button::after{
  content:"";
  position:absolute;
  top:50%;
  left:16px;                 /* même point de départ que la piste */
  width:24px; height:24px;
  transform:translate(100%, -50%);  /* démarre hors piste à droite */
  pointer-events:none;

  /* flèche ← en SVG (couleur blanche) */
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'>\
<path d='M14.7 5.3a1 1 0 0 1 0 1.4L10.4 11l4.3 4.3a1 1 0 1 1-1.4 1.4l-5-5a1 1 0 0 1 0-1.4l5-5a1 1 0 0 1 1.4 0z'/>\
</svg>");
  background-repeat:no-repeat;
  background-size:24px 24px;
  background-position:center;

  animation: singleArrowLeft 1.1s linear infinite;
}

/* Accélère au hover (optionnel) */
.lead-form .elementor-form .e-form__buttons .elementor-button:hover::after{
  animation-duration: .85s;
}

/* Animation: une seule flèche qui traverse la piste vers la gauche */
@keyframes singleArrowLeft{
  0%   { transform: translate(100%, -50%); }  /* entre par la droite */
  100% { transform: translate(-100%, -50%); } /* sort par la gauche */
}

/* Assure que le texte reste au-dessus */
.lead-form .elementor-form .e-form__buttons .elementor-button .elementor-button-text{
  position:relative; z-index:1;
}

/*  Add grey color to dots on h2 elements if the container has the class grey-period */
.grey-period h2 .dot {
  color: #919191;
}

.elementor-nav-menu--dropdown {
	right: -5px !important;
	width: 410px !important;
}