/* =========================================================
   InnovaPower Animations — feuille de style principale
   Variables personnalisables via les contrôles Elementor :
   --iap-c1 (couleur principale), --iap-c2 (secondaire),
   --iap-c3 (accent / halo), --iap-size, --iap-duration
========================================================= */

.iap-anim-outer {
	display: flex;
	width: 100%;
	overflow: visible;
}

.iap-anim {
	--iap-c1: #0B7A3F;
	--iap-c2: #FFC93C;
	--iap-c3: #00C2FF;
	--iap-size: 380px;
	--iap-duration: 6s;
	position: relative;
	width: var(--iap-size);
	height: var(--iap-size);
	display: flex;
	align-items: center;
	justify-content: center;
}

.iap-bg-dark {
	background: radial-gradient(circle at 50% 50%, #0d1b2a 0%, #060c14 75%);
	border-radius: 24px;
}

.iap-bg-light {
	background: radial-gradient(circle at 50% 50%, #f4faf7 0%, #e6f0ea 75%);
	border-radius: 24px;
}

/* =========================================================
   1. PULSATION SOLAIRE
========================================================= */
.iap-solar-pulse {
	overflow: visible;
}

.iap-solar-core {
	position: relative;
	width: 42%;
	height: 42%;
}

.iap-solar-sun {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, var(--iap-c3), var(--iap-c1) 45%, var(--iap-c2) 100%);
	animation: iap-sun-pulse var(--iap-duration) ease-in-out infinite;
}

.iap-glow-on .iap-solar-sun {
	box-shadow: 0 0 calc(var(--iap-size) * 0.12) calc(var(--iap-size) * 0.04) color-mix(in srgb, var(--iap-c2) 65%, transparent);
}

@keyframes iap-sun-pulse {
	0%, 100% { transform: scale(1); filter: brightness(1); }
	50%      { transform: scale(1.08); filter: brightness(1.18); }
}

.iap-solar-rays {
	position: absolute;
	inset: -35%;
	animation: iap-rays-spin calc(var(--iap-duration) * 3) linear infinite;
}

.iap-ray {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 3%;
	height: 22%;
	background: linear-gradient(to top, transparent, var(--iap-c2));
	transform-origin: 50% 0;
	transform: rotate(var(--iap-angle)) translateX(-50%);
	border-radius: 4px;
	opacity: 0.85;
}

@keyframes iap-rays-spin {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}

.iap-solar-orbit {
	position: absolute;
	border: 1px dashed color-mix(in srgb, var(--iap-c1) 40%, transparent);
	border-radius: 50%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

.iap-orbit-1 { width: 62%; height: 62%; animation-name: iap-orbit-spin; animation-duration: var(--iap-duration); }
.iap-orbit-2 { width: 82%; height: 82%; animation-name: iap-orbit-spin; animation-duration: calc(var(--iap-duration) * 1.6); }
.iap-orbit-3 { width: 100%; height: 100%; animation-name: iap-orbit-spin-rev; animation-duration: calc(var(--iap-duration) * 2.2); }

.iap-orbit-dot {
	position: absolute;
	top: -5px;
	left: 50%;
	width: 5%;
	height: 5%;
	min-width: 8px;
	min-height: 8px;
	background: var(--iap-c3);
	border-radius: 50%;
	box-shadow: 0 0 10px 2px var(--iap-c3);
	transform: translateX(-50%);
}

@keyframes iap-orbit-spin {
	from { transform: translate(-50%, -50%) rotate(0deg); }
	to   { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes iap-orbit-spin-rev {
	from { transform: translate(-50%, -50%) rotate(360deg); }
	to   { transform: translate(-50%, -50%) rotate(0deg); }
}

/* =========================================================
   2. ÉOLIENNE ANIMÉE
========================================================= */
.iap-wind-scene {
	overflow: visible;
	align-items: flex-end;
}

.iap-sky-glow {
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 50% 20%, color-mix(in srgb, var(--iap-c3) 25%, transparent), transparent 70%);
	border-radius: 50%;
	pointer-events: none;
}

.iap-turbine-row {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: 6%;
	width: 100%;
	height: 100%;
}

.iap-turbine {
	position: relative;
	width: 30%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.iap-turbine-row-1 .iap-turbine { width: 50%; height: 100%; }
.iap-turbine-row-3 .iap-turbine { width: 26%; height: 82%; }
.iap-turbine-row-3 .iap-turbine-pos-2 { height: 100%; }

.iap-turbine-blades {
	position: relative;
	width: 100%;
	height: 55%;
	animation: iap-turbine-spin var(--iap-duration) linear infinite;
}

@keyframes iap-turbine-spin {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}

.iap-blade {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 8%;
	height: 48%;
	background: linear-gradient(to top, color-mix(in srgb, var(--iap-c2) 70%, white), var(--iap-c2));
	border-radius: 50% 50% 8% 8%;
	transform-origin: 50% 100%;
}

.iap-blade-1 { transform: translate(-50%, -100%) rotate(0deg); }
.iap-blade-2 { transform: translate(-50%, -100%) rotate(120deg); }
.iap-blade-3 { transform: translate(-50%, -100%) rotate(240deg); }

.iap-hub {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 10%;
	height: 10%;
	background: var(--iap-c1);
	border-radius: 50%;
	transform: translate(-50%, -50%);
	box-shadow: 0 0 8px 2px color-mix(in srgb, var(--iap-c1) 60%, transparent);
}

.iap-turbine-mast {
	width: 6%;
	height: 45%;
	background: linear-gradient(to bottom, var(--iap-c1), color-mix(in srgb, var(--iap-c1) 60%, black));
	border-radius: 3px;
}

.iap-turbine-base {
	width: 22%;
	height: 3%;
	background: color-mix(in srgb, var(--iap-c1) 50%, black);
	border-radius: 50%;
	margin-top: 2%;
}

.iap-ground {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 6%;
	background: linear-gradient(to right, transparent, color-mix(in srgb, var(--iap-c1) 25%, transparent), transparent);
	border-radius: 50%;
}

.iap-glow-on .iap-turbine-blades { filter: drop-shadow(0 0 10px color-mix(in srgb, var(--iap-c2) 55%, transparent)); }

/* =========================================================
   3. FLUX D'ÉNERGIE
========================================================= */
.iap-flow-scene {
	height: var(--iap-size);
	max-width: 100%;
	overflow: visible;
}

.iap-flow-svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.iap-flow-path {
	fill: none;
	stroke: color-mix(in srgb, var(--iap-c1) 55%, transparent);
	stroke-width: 3;
	stroke-linecap: round;
}

.iap-flow-path-glow {
	fill: none;
	stroke: var(--iap-c1);
	stroke-width: 3;
	stroke-linecap: round;
	stroke-dasharray: 60 900;
	animation: iap-dash-flow var(--iap-duration) linear infinite;
	filter: drop-shadow(0 0 6px var(--iap-c3));
}

@keyframes iap-dash-flow {
	from { stroke-dashoffset: 0; }
	to   { stroke-dashoffset: -960; }
}

.iap-flow-nodes {
	position: absolute;
	inset: 0;
}

.iap-flow-node {
	position: absolute;
	top: 50%;
	width: 14px;
	height: 14px;
	margin-left: -7px;
	margin-top: -7px;
	border-radius: 50%;
	background: var(--iap-c3);
	box-shadow: 0 0 12px 3px color-mix(in srgb, var(--iap-c3) 70%, transparent);
	animation: iap-node-pulse var(--iap-duration) ease-in-out infinite;
	animation-delay: var(--iap-delay);
}

@keyframes iap-node-pulse {
	0%, 100% { transform: scale(0.8); opacity: 0.6; }
	50%      { transform: scale(1.4); opacity: 1; }
}

.iap-flow-pulse {
	position: absolute;
	top: 50%;
	left: 0;
	width: 20px;
	height: 20px;
	margin-top: -10px;
	border-radius: 50%;
	background: radial-gradient(circle, var(--iap-c2), transparent 70%);
	animation: iap-pulse-travel var(--iap-duration) linear infinite;
}
.iap-flow-pulse-b { animation-delay: calc(var(--iap-duration) / 2); }

@keyframes iap-pulse-travel {
	0%   { left: 0%; opacity: 0; }
	10%  { opacity: 1; }
	90%  { opacity: 1; }
	100% { left: 100%; opacity: 0; }
}

/* =========================================================
   4. ORBITE GLOBALE
========================================================= */
.iap-global-orbit {
	overflow: visible;
}

.iap-globe {
	position: relative;
	width: 46%;
	height: 46%;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--iap-c2) 40%, white), var(--iap-c1) 60%, color-mix(in srgb, var(--iap-c1) 60%, black));
	display: flex;
	align-items: center;
	justify-content: center;
	animation: iap-globe-rotate calc(var(--iap-duration) * 4) linear infinite;
}

.iap-glow-on .iap-globe {
	box-shadow: 0 0 calc(var(--iap-size) * 0.1) calc(var(--iap-size) * 0.03) color-mix(in srgb, var(--iap-c3) 55%, transparent);
}

.iap-globe-grid {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background-image:
		repeating-linear-gradient(0deg, transparent 0 10%, color-mix(in srgb, var(--iap-c3) 35%, transparent) 10% 10.5%),
		repeating-linear-gradient(90deg, transparent 0 16%, color-mix(in srgb, var(--iap-c3) 25%, transparent) 16% 16.5%);
	opacity: 0.7;
	mix-blend-mode: overlay;
}

@keyframes iap-globe-rotate {
	from { background-position: 0 0; transform: rotate(0deg); }
	to   { background-position: 0 0; transform: rotate(360deg); }
}

.iap-globe-icon {
	position: relative;
	color: color-mix(in srgb, var(--iap-c2) 80%, white);
	font-size: calc(var(--iap-size) * 0.12);
	text-shadow: 0 0 10px color-mix(in srgb, var(--iap-c2) 70%, transparent);
	animation: iap-icon-counter-rotate calc(var(--iap-duration) * 4) linear infinite;
}

@keyframes iap-icon-counter-rotate {
	from { transform: rotate(0deg); }
	to   { transform: rotate(-360deg); }
}

.iap-gorbit {
	position: absolute;
	top: 50%;
	left: 50%;
	border: 1px solid color-mix(in srgb, var(--iap-c3) 35%, transparent);
	border-radius: 50%;
	transform: translate(-50%, -50%);
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

.iap-gorbit-1 { width: 62%; height: 62%; animation-name: iap-orbit-spin; animation-duration: var(--iap-duration); }
.iap-gorbit-2 { width: 78%; height: 78%; animation-name: iap-orbit-spin-rev; animation-duration: calc(var(--iap-duration) * 1.5); }
.iap-gorbit-3 { width: 92%; height: 92%; animation-name: iap-orbit-spin; animation-duration: calc(var(--iap-duration) * 2); }
.iap-gorbit-4 { width: 100%; height: 100%; animation-name: iap-orbit-spin-rev; animation-duration: calc(var(--iap-duration) * 2.6); }

.iap-gorbit-dot {
	position: absolute;
	top: -6px;
	left: 50%;
	width: 12px;
	height: 12px;
	background: var(--iap-c2);
	border-radius: 50%;
	transform: translateX(-50%);
	box-shadow: 0 0 10px 3px color-mix(in srgb, var(--iap-c2) 70%, transparent);
}

/* =========================================================
   5. RÉSEAU DE PARTICULES (canvas)
========================================================= */
.iap-particle-scene {
	width: 100%;
	height: var(--iap-size);
	border-radius: 18px;
	overflow: hidden;
}

.iap-particle-canvas {
	display: block;
	width: 100%;
	height: 100%;
}

/* =========================================================
   6. ICÔNES DE DOMAINE ANIMÉES
   (Énergie / Eau / Environnement / Infrastructure / Télécom / Expertise)
========================================================= */
.iap-domain-block {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	width: 100%;
}

.iap-domain-icon {
	overflow: visible;
}

.iap-domain-label {
	font-weight: 600;
	letter-spacing: 0.06em;
	text-align: center;
	font-size: 13px;
	color: #0B1B33;
}

.iap-di-svg {
	width: 62%;
	height: 62%;
	fill: none;
	stroke: var(--iap-c1);
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
	overflow: visible;
}

/* --- Énergie : soleil + panneau --- */
.iap-energie-wrap {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.iap-energie-sun {
	width: 34%;
	height: 34%;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, var(--iap-c3), var(--iap-c1) 70%);
	animation: iap-sun-pulse var(--iap-duration) ease-in-out infinite;
	margin-bottom: 6%;
}

.iap-glow-on .iap-energie-sun {
	box-shadow: 0 0 calc(var(--iap-size) * 0.1) calc(var(--iap-size) * 0.03) color-mix(in srgb, var(--iap-c1) 55%, transparent);
}

.iap-energie-rays {
	position: absolute;
	top: 6%;
	left: 50%;
	width: 46%;
	height: 46%;
	transform: translateX(-50%);
	animation: iap-rays-spin calc(var(--iap-duration) * 3) linear infinite;
}

.iap-ray-sm {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 10%;
	height: 34%;
	background: linear-gradient(to top, transparent, var(--iap-c3));
	transform-origin: 50% 0;
	transform: rotate(var(--iap-angle)) translateX(-50%);
	border-radius: 3px;
	opacity: 0.8;
}

.iap-energie-panel {
	position: relative;
	width: 62%;
	height: 26%;
	background: linear-gradient(135deg, color-mix(in srgb, var(--iap-c1) 85%, black), var(--iap-c1));
	border-radius: 4px;
	overflow: hidden;
	background-image:
		linear-gradient(135deg, color-mix(in srgb, var(--iap-c1) 85%, black), var(--iap-c1)),
		repeating-linear-gradient(90deg, transparent 0 22%, rgba(255,255,255,0.25) 22% 23%);
}

.iap-panel-shine {
	position: absolute;
	top: 0;
	left: -60%;
	width: 40%;
	height: 100%;
	background: linear-gradient(115deg, transparent, rgba(255,255,255,0.55), transparent);
	animation: iap-panel-shine-move var(--iap-duration) ease-in-out infinite;
}

@keyframes iap-panel-shine-move {
	0%   { left: -60%; }
	60%  { left: 120%; }
	100% { left: 120%; }
}

/* --- Eau : vagues + goutte --- */
.iap-domain-eau .iap-di-svg { width: 78%; height: 78%; }

.iap-wave-a, .iap-wave-b {
	stroke: var(--iap-c1);
	stroke-width: 2.4;
	animation: iap-wave-flow var(--iap-duration) linear infinite;
}
.iap-wave-b { stroke: var(--iap-c3); animation-delay: calc(var(--iap-duration) / -3); opacity: 0.75; }

@keyframes iap-wave-flow {
	0%   { transform: translateX(0); }
	100% { transform: translateX(-26px); }
}

.iap-drop {
	position: absolute;
	top: 8%;
	left: 50%;
	width: 8%;
	height: 8%;
	min-width: 6px;
	min-height: 6px;
	background: var(--iap-c1);
	border-radius: 0 50% 50% 50%;
	transform: translateX(-50%) rotate(45deg);
	animation: iap-drop-fall var(--iap-duration) ease-in infinite;
}

@keyframes iap-drop-fall {
	0%   { top: 8%; opacity: 0; }
	15%  { opacity: 1; }
	55%  { top: 46%; opacity: 1; }
	60%  { opacity: 0; }
	100% { top: 46%; opacity: 0; }
}

/* --- Environnement : feuille --- */
.iap-leaf-shape {
	fill: color-mix(in srgb, var(--iap-c2) 18%, transparent);
	stroke: var(--iap-c2);
	transform-origin: 50% 100%;
	animation: iap-leaf-sway var(--iap-duration) ease-in-out infinite;
}

.iap-leaf-vein {
	stroke: var(--iap-c2);
	stroke-width: 1.6;
	stroke-dasharray: 60;
	animation: iap-leaf-draw calc(var(--iap-duration) * 1.2) ease-in-out infinite;
}

@keyframes iap-leaf-sway {
	0%, 100% { transform: rotate(-4deg) scale(1); }
	50%      { transform: rotate(4deg) scale(1.04); }
}

@keyframes iap-leaf-draw {
	0%   { stroke-dashoffset: 60; }
	40%  { stroke-dashoffset: 0; }
	100% { stroke-dashoffset: 0; }
}

/* --- Infrastructure : barres qui montent --- */
.iap-bar {
	fill: var(--iap-c1);
	transform-box: fill-box;
	transform-origin: 50% 100%;
	animation: iap-bar-rise var(--iap-duration) ease-in-out infinite;
}
.iap-bar-1 { animation-delay: 0s; fill: var(--iap-c2); }
.iap-bar-2 { animation-delay: calc(var(--iap-duration) / 6); fill: var(--iap-c1); }
.iap-bar-3 { animation-delay: calc(var(--iap-duration) / 3); fill: var(--iap-c3); }
.iap-baseline { stroke: var(--iap-c1); stroke-width: 2; }

@keyframes iap-bar-rise {
	0%, 100% { transform: scaleY(0.55); }
	50%      { transform: scaleY(1); }
}

/* --- Télécom : mât + ondes de signal --- */
.iap-tower-wrap {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.iap-tower-svg { position: relative; z-index: 2; width: 70%; height: 70%; }
.iap-tower-tip { fill: var(--iap-c3); stroke: none; }

.iap-tower-ring {
	position: absolute;
	top: 8%;
	left: 50%;
	width: 14%;
	height: 14%;
	border: 2px solid var(--iap-c3);
	border-radius: 50%;
	transform: translate(-50%, -50%) scale(1);
	opacity: 0.9;
	animation: iap-signal-ping var(--iap-duration) ease-out infinite;
}
.iap-tower-ring-2 { animation-delay: calc(var(--iap-duration) / 3); }
.iap-tower-ring-3 { animation-delay: calc(var(--iap-duration) * 2 / 3); }

@keyframes iap-signal-ping {
	0%   { transform: translate(-50%, -50%) scale(0.6); opacity: 0.9; }
	100% { transform: translate(-50%, -50%) scale(5.5); opacity: 0; }
}

/* --- Expertise : réseau de nœuds --- */
.iap-node-line {
	stroke: color-mix(in srgb, var(--iap-c1) 50%, transparent);
	stroke-width: 1.6;
}

.iap-node {
	fill: var(--iap-c1);
	stroke: none;
	animation: iap-node-blink var(--iap-duration) ease-in-out infinite;
}
.iap-node-2 { animation-delay: calc(var(--iap-duration) / 3); fill: var(--iap-c2); }
.iap-node-3 { animation-delay: calc(var(--iap-duration) * 2 / 3); fill: var(--iap-c3); }

@keyframes iap-node-blink {
	0%, 100% { opacity: 0.7; r: 4.5; }
	50%      { opacity: 1; r: 6; }
}

.iap-node-pulse-dot {
	fill: var(--iap-c3);
	filter: drop-shadow(0 0 3px var(--iap-c3));
}

/* =========================================================
   Responsive : réduit légèrement les vitesses sur mobile
========================================================= */
@media (max-width: 767px) {
	.iap-anim { --iap-size: min(var(--iap-size), 90vw); }
}