/*
Theme Name:   Idées Larges
Theme URI:    https://www.ideeslarges.com
Description:  Thème de l'agence Idées Larges
Author:       Idées Larges
Author URI:   https://www.ideeslarges.com
Template:     generatepress
Version:      1
*/


.site, 
.main-navigation {
	overflow-x : clip;
}

.titre-bold strong {
	font-family : 'piepie';
	font-size: 0.6em;
	font-weight : normal;
}

body {
	transition : 0.3s ease;
}

.circle {
	position: absolute;
	border-radius: 50%;
	opacity : 0;
	transition : 0.3s ease;
}


/* BOUTON MENU */

@keyframes phareTriangle {
	0%   {transform : scaleX(1) scaleY(1);}
	50%  {transform : scaleX(0) scaleY(4);}
	100% {transform : scaleX(-1) scaleY(1);}
}


@keyframes phareRond {
	0%   {transform : scale(1);}
	100% {transform : scale(8);}
}


.btn-home svg {
	width : 40px;
	transition : 0.3s ease;
}

.btn-home * {
	transition : 0.3s linear;
	position : relative;
}

.btn-home a svg{
	z-index : 10;
}

.btn-home a:before{
	position : absolute;
	content : "";
	width : 4px;
	height : 4px;
	background-color : var(--accent);
	left : calc(50% - 2px);
	top : 24px;
	border-radius : 50px;
	transition : 0.3s ease;
}

.btn-home a:after{
	position : absolute;
	content : "";
	background-image: url("/wp-content/uploads/2025/08/triangle.svg");
	background-size : 100% 100%;
	width : 20px;
	height : 7px;
	left : calc(50% - 20px);
	top : 22px;
	border-radius : 50px;
	transition : 0.3s ease;
	transform-origin : right center;
}

.btn-home:hover a:before{
	/*animation: 1s linear infinite alternate phareRond;*/
	transform : scale(8);
}

.btn-home:hover a:after{
	/*animation: 2s linear infinite alternate phareTriangle;*/
	transform : scaleX(0) scaleY(4);}
}



.btn-contact {
	position : relative;
}

.btn-contact:before {
	content:"";
	width : 150px;
	height : 150px;
	border-radius : 300px;
	position : absolute;
	right : -95px;
	top : -90px;
	background : var(--flash);
	transition : 0.3s ease;
}
.btn-contact:hover:before, .sticky .btn-contact:before {
	width : 80px;
	height : 80px;
	right : -10px;
	top : -35px;
}


@media (min-width:769px) {
	header li:not(.btn-home):after {
		content : "";
		background : var(--flash);
		height : 2px;
		width : 0px;
		left : calc(50% - 0px);
		transition : 0.3s ease;
		bottom : 12px;
		position : absolute;
	}
	header li:not(.btn-home):hover:after {
		width : 50px;
		left : calc(50% - 25px);
	}
}

span.mobile-menu {
	display : none;
}


/* CARROUSEL */

.flickity-button {
	background: none !important;
}

.flickity-button-icon {
	fill: var(--accent);
}
.flickity-button:hover .flickity-button-icon {
	fill: var(--flash);
}
.flickity-prev-next-button.previous {
	left: -40px;
}
.flickity-prev-next-button.next {
	right: -40px;
}



/*****************************/
/*****  ANIMATE SVG   ********/
/*****************************/

@keyframes rotateInfinite {
	0% { transform : rotate(0deg); }
	100% { transform : rotate(360deg);}
}


@keyframes rotateOne {
	0% { transform : rotate(0deg); }
	25% { transform : rotate(360deg);}
	100% { transform : rotate(360deg);}
}

@keyframes scale {
	0% { transform : scale(0); }
	25% { transform : scale(1);}
	75% { transform : scale(1);}
	100% { transform : scale(0); }
}


/* FUSEE */

#FUSEE #croix1 {
	animation: 3s rotateInfinite linear infinite reverse;
	transform-origin: center;
	transform-box: fill-box;
}

#FUSEE #croix2 {
	animation: 3s rotateInfinite linear infinite;
	transform-origin: center;
	transform-box: fill-box;
}

#FUSEE #roueCrant {
	animation: 3s rotateInfinite linear infinite;
	transform-origin: center;
	transform-box: fill-box;
}

#FUSEE #fleche {
	animation: 3s scale ease infinite;
	transform-origin: left bottom;
	transform-box: fill-box;
}



/* ANIMATION HERO */



#HERO * , #HERO #vague * {
	transition : 1s ease;
	position : relative;
}

#HERO #roseVent,
#HERO #cercle_flash,
#HERO #rect_creation,
#HERO #rect_petit,
#HERO #creation,
#HERO #strategie,
#HERO #cercle_pointilles {
	transform-origin: center;
	transform-box: fill-box;
}

#HERO #cercle_pointilles {
	animation: 45s rotateInfinite linear infinite;
}

#HERO #roseVent {
	/*animation: 2s rotateOne linear infinite;*/
}


#HERO #communication {
	transform-origin: 58.79548% 54.61877%;
	transform-box: view-box;
}

#HERO #creation path,
#HERO #strategie path,
#HERO #communication path {
	transition : 0.3s ease;
	stroke-width : 0px;
	cursor : pointer;
}

#HERO #creation path {
	stroke : var(--flash);
}
#HERO #strategie path {
	stroke : var(--bleu);
}
#HERO #communication path {
	stroke : var(--accent);
}

#HERO:hover #creation path,
#HERO:hover #strategie path,
#HERO:hover #communication path {
	stroke-width : 2px;
	fill : transparent !important;
}




/* BULLES EXPERTISES */

#h2-conseil:before, #h2-creation:before, #h2-marketing:before, #h2-digital:before{
	content:'';
	position : absolute;
	border-radius : 1000px;
	background : #f0fcfa;
	z-index : 0;
}


#h2-conseil:before{
	width : 400px;
	height : 400px;
	top : -70px;
	left : -100px;
}

@media (min-width:1150px) {
	#h2-creation:before{
		width : 800px;
		height : 800px;
		top : -270px;
		right : -600px;
	}
}

#h2-marketing:before{
	width : 1000px;
	height : 1000px;
	top : -300px;
	left : -750px;
}

#h2-digital:before{
	width : 400px;
	height : 400px;
	bottom : -200px;
	right : 0px;
}


/* ANIMATION AGENCE */

@keyframes eclat {
	from { transform: scale(0.8); }
	to   { transform: scale(1.5); }
}

.eclats-2 polygon {
	transform-origin : top right;
}

.eclats-1 polygon {
	transform-origin : bottom left;
}

.svg-eclat polygon{
	transform-box: fill-box;
	animation: 1s linear 1s infinite alternate eclat;
}


/* ANIMATION EXPERTISES */

@keyframes eclat-bulle {
	0%   {transform: scale(1) rotate(0);}
	20%  {transform: scale(1.3) rotate(90deg);}
	50%  {transform: scale(0.8) rotate(180deg);}
	75%  {transform: scale(1.5) rotate(270deg);}
	100% {transform: scale(1) rotate(360deg);}
}


@keyframes vibration {
	0%   {transform: rotate(-20deg);}
	100% {transform: rotate(20deg);}
}

svg .eclat-bulle{
	transform-box: fill-box;
	transform-origin : center;
	animation: 4s linear 1s infinite eclat-bulle;
}

svg .vibration{
	transform-box: fill-box;
	transform-origin : center;
	animation: 1s linear 1s infinite alternate vibration;
}

svg .infiniLoop{
	transform-box: fill-box;
	transform-origin : center;
	animation: 4s linear 1s infinite rotateInfinite;
}



/* CARROUSEL EQUIPE */

#equipe-carrousel .lucas,
#equipe-carrousel .malo,
#equipe-carrousel .jerome,
#equipe-carrousel .rect1,
#equipe-carrousel .rect2 {
	transition : 0.5s ease;
}

#equipe-carrousel .lucas,
#equipe-carrousel .malo,
#equipe-carrousel .jerome {
	cursor : pointer
}

#equipe-carrousel .lucas image,
#equipe-carrousel .malo image,
#equipe-carrousel .jerome image {
	transition : 0.2s ease;
}

#equipe-carrousel .jerome:hover image,
#equipe-carrousel .malo:hover image,
#equipe-carrousel .lucas:hover image {
	filter: brightness(80%) contrast(150%);

}