/*
Theme Name:		Hello Elementor Child
Template:		hello-elementor
Theme URI:		https://www.agence-saycom.fr/
Description:	Hello Elementor by Agence SayCom
Author:			Agence Saycom
Author URI:		http://www.agence-saycom.fr
Version:		1.0.0
License:		GNU General Public License v3.0
License URI:	http://www.gnu.org/licenses/gpl-3.0.html
Text Domain:	hello-elementor
*/
@import url('./styles/reset.css');



.btn a, #btn{
    transition: all 300ms;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    border-radius: 9px;
    border: 2px solid var(--e-global-color-a25387c);
    cursor: pointer;
    transition: .22s cubic-bezier(.2, .7, .2, 1);
    background: none;
    color: var(--e-global-color-a25387c);
    position: relative;
    overflow: hidden;
}
.btn:hover a, #btn:hover{
    transform: translateY(-3px);
}
.btn-primaire a, #btn-primaire a{
    background: var(--e-global-color-primary);
    color: var(---e-global-color-a25387c) !important;
    border: 2px var(--e-global-color-primary) solid;
    box-shadow: 0 8px 22px rgba(140, 198, 62, .4);
}
.btn-ghost a{
border-color: rgba(255, 255, 255, .5);
    color: var(---e-global-color-a25387c);
    background-color: transparent;
}
.btn-ghost.dark a{
    border-color: rgba(255, 255, 255, .5);
    color: #fff;
}
.btn-ghost.dark:hover a{
      background: #fff;
    color: var(--e-global-color-a25387c);  
}

/* MISE EN FORME DES TITRE SUR FOND VERT DANS LES HEROS  */
.hanim.h2d {
    animation-delay: .12s;
	display: flex;
    flex-direction: column;
}
.hanim {
    animation: pop .75s cubic-bezier(.2,.7,.2,1) backwards;
}
.hero .mark, .phero .mark{
	display: flex;
    flex-direction: column;
    position: relative;
    /* white-space: nowrap; */
    color: var(--e-global-color-a25387c);
    z-index: 1;
}
@media screen and (max-width:767px){
	.hero .mark, .phero .mark{
		  white-space: break-spaces; 
	}
}

.hero .mark i, .phero .mark i{
    position: absolute;
    left: -5px;
    right: -5px;
    top: 1%;
    bottom: -7%;
    background: var(--e-global-color-primary);
    border-radius: 7px;
    z-index: -1;
    transform: scaleX(0);
    transform-origin: left;
    animation: mark .9s .65s cubic-bezier(.2,.7,.2,1) forwards;
}

@keyframe pop{
    0% {
        opacity: 0;
        transform: translateY(26px);
    }
    100% {
        opacity: 1;
        transform: none;
    }
}
@keyframes mark{
    to{
        transform:scaleX(1);
    }
}
/* -----------------  */

/* MISE EN FORME DES DIVIDER SVG DANS LES HERO  */
.phero .svg-divider{
    position: absolute;
    left: 0;
    width: 100vw;
    height: auto;
    z-index: 2;
    bottom: -1px;
}
.phero .svg-divider svg{
    width: 100vw;
}
.icon-flex div{
    display: flex;
}
/* -----------------  */


#analyse, #courtage, #moe, #aides {
  /* = sticky_offset (100) + hauteur de la barre + petite marge, à ajuster */
  scroll-margin-top: 150px;
}

html { scroll-behavior: smooth; }