/* ------------------------- Apparitions -------------------------- */
/* Highlight landing-page, Page offres site web (modules) --------------------*/

@keyframes fadeUp {
	/* translate (longhand) au lieu de transform : laisse la propriété
	   transform totalement libre pour un éventuel positionnement statique
	   (ex. centrage absolu) sur l'élément animé, sans que cette animation
	   "forwards" ne l'écrase (même piège de cascade déjà rencontré ailleurs
	   sur ce projet). Rendu visuel strictement identique. */
	from {
		opacity: 0;
		translate: 0 18px;
	}
	to {
		opacity: 1;
		translate: 0 0;
	}
}

/* Variante de fadeUp qui se termine à opacity:.75 au lieu de 1 (cf.
   .company-logo img, index.php) : ce logo a un rendu volontairement
   "grisé" au repos (opacity:.75, cf. .company-logo img:hover qui remonte
   à .9), fadeUp seul l'aurait fait finir à pleine opacité. */
@keyframes fadeUpMuted {
	from {
		opacity: 0;
		translate: 0 18px;
	}
	to {
		opacity: .75;
		translate: 0 0;
	}
}

/* ------------------------- Pulse -------------------------- */
/* Btn-footer (.footer-cta) : seul consommateur de cette animation. Les
   couleurs suivent --footer-accent (posée sur .site-footer, cf. style.css)
   pour rester alignées sur l'accent du header/footer actif. */

@keyframes Pulse {
	0%, 100% {
		transform: scale(1);
		box-shadow: 0 10px 25px rgba(var(--footer-accent, 11, 110, 253), 0.25);
	}
	50% {
		/* Amplitude réduite (1.03 → 1.015) : au pic de la pulsation, le
		   bouton grandissait assez pour dépasser le bord droit de sa
		   rangée (.footer-top) de quelques pixels — visible/mesurable au
		   survol du cycle. Un grossissement plus subtil garde l'effet de
		   respiration sans que le bouton ne déborde de sa zone. */
		transform: scale(1.015);
		box-shadow: 0 12px 30px rgba(var(--footer-accent, 11, 110, 253), 0.32);
	}
}

@keyframes borderPulse {
	0% {
		box-shadow: 0 0 0 rgba(11,110,253,0);
	}
	50% {
		box-shadow: 0 0 25px rgba(11,110,253,0.25);
	}
	100% {
		box-shadow: 0 0 0 rgba(11,110,253,0);
	}
}

/* ------------------------- Respiration -------------------------- */
/*Bulle titre page services.php-----*/


@keyframes bubbleBreath {
	0%, 100% {
		transform: scale(1);
		box-shadow: 0 10px 20px rgba(0,0,0,0.35),0 0 20px rgba(11, 110, 253, 0.15);
	}
	50% {
		transform: scale(1.015);
		box-shadow: 0 14px 30px rgba(0,0,0,0.4),0 0 35px rgba(11, 110, 253, 0.25);
	}
}

/* ------------------------- Brillance -------------------------- */
/*Bulle titre services.php - Carte offres-sites.php--------------------*/


@keyframes bubbleMove {
	0% {
		transform: translateX(-120%) rotate(25deg);
		opacity: 0.6;
	}
	20% {
		opacity: 0.82;
	}
	50% {
		transform: translateX(120%) rotate(25deg);
		opacity: 0.82;
	}
	100% {
		transform: translateX(120%) rotate(25deg);
		opacity: 0.6;
	}
}

@keyframes shineMove {
	0% {
		transform: translateX(-120%) rotate(25deg);
		opacity: 0;
	}
	20% {
		opacity: 0.4;
	}
	50% {
		transform: translateX(120%) rotate(25deg);
		opacity: 0.2;
	}
	100% {
		transform: translateX(120%) rotate(25deg);
		opacity: 0;
	}
}

/* ------------------------- Flotaison -------------------------- */
/* Sous-titre bulle page services.php -------*/

@keyframes floatSub {
	0%, 100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-10px);
	}
}

/* ------------------------- gauchedroite-------------------------- */
/* Navigation dans offres -------*/

@keyframes arrowSlideleft {
	0% {
		transform: translateX(0);
	}
	50% {
		transform: translateX(6px);
	}
	100% {
		transform: translateX(0);
	}
}
@keyframes arrowSlideright {
	100% {
		transform: translateX(0);
	}
	50% {
		transform: translateX(6px);
	}
	0% {
		transform: translateX(0);
	}
}


@keyframes slideIn {
	from {
		transform: translateY(500px);
		opacity: 0;
	}
	to {
		transform: translateY(0);
		opacity: 1;
	}
}

/* ========================= lancement fusée ========================= */

@keyframes rocketLaunch {
    0% {
        transform: translateY(0) scale(1);
    }

    /* compression */
    10% {
        transform: translateY(0px) scale(0.95);
    }

    /* vibration moteur */
    15% { transform: translateX(-1px); }
    20% { transform: translateX(1px); }
    25% { transform: translateX(-1px); }

    /* décollage lent */
    35% {
        transform: translateY(-5px) scale(1.05);
    }

    /* accélération */
    55% {
        transform: translateY(-30px) scale(1.08);
    }

    /* Pose finale du pré-lancement, tenue jusqu'à la fin de CETTE animation
       (demande explicite : au lieu de sortir tout droit par le haut de
       l'écran, la rockette enchaîne ensuite sur une spirale horaire autour
       du trou noir — cf. .hero-actions .btn.is-orbiting/@keyframes
       rocketOrbitToCenter dans style.css, prise de relais pilotée par
       main.js). Sans keyframe 100% explicite, l'animation tient
       naturellement la valeur du dernier palier défini (75%) jusqu'à la
       fin — pas de "saut" ni de retour à 0% grâce à "forwards". */
    75% {
        transform: translateY(-30px) scale(1.08);
    }
}

/* flamme */
@keyframes flame {
    0% {
        transform: translateX(-50%) scaleY(0.8);
    }
    100% {
        transform: translateX(-50%) scaleY(1.8);
		
    }
}

@keyframes smokeTrail {
    0% {
        height: 20px;
        opacity: 0.3;
    }
    100% {
        height: 70px;
        opacity: 0;
    }
}

/* vibration fusée */
@keyframes rocketShake {
    0% { transform: translateX(0); }
    25% { transform: translateX(-1px); }
    50% { transform: translateX(1px); }
    75% { transform: translateX(-1px); }
    100% { transform: translateX(0); }
}




@keyframes shakeSoft {
  0% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(1px, -1px) rotate(0.3deg); }
  50% { transform: translate(-1px, 1px) rotate(-0.3deg); }
  75% { transform: translate(1px, 1px) rotate(0.2deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}


@keyframes rocketLaunchDown {

    0% {
        transform: translateY(0) scale(1);
    }

    /* compression */
    10% {
        transform: translateY(0px) scale(0.95);
    }

    /* vibration moteur */
    15% { transform: translateX(-1px); }
    20% { transform: translateX(1px); }
    25% { transform: translateX(-1px); }

    /* petit décollage */
    35% {
        transform: translateY(5px) scale(1.05);
    }

    /* accélération vers le bas */
    55% {
        transform: translateY(30px) scale(1.08);
    }

    75% {
        transform: translateY(90px) scale(1.08);
    }

    95% {
        transform: translateY(150px) scale(1.08);
    }

    /* sortie écran BAS */
    99% {
        transform: translateY(100vh) scale(0.9);
        opacity: 1;
    }

    100% {
        transform: translateY(0) scale(1);
    }
}


@keyframes floatUpDown {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-4px);
    }
    100% {
        transform: translateY(0);
    }
}


@keyframes pulse {
	0% { transform: scale(1); opacity: 1; }
	50% { transform: scale(1.3); opacity: 0.6; }
	100% { transform: scale(1); opacity: 1; }
}


@keyframes ribbonPulse {
	0%, 100% {
		box-shadow: 0 0 12px rgba(59,130,246,0.35);
	}
	50% {
		box-shadow: 0 0 18px rgba(59,130,246,0.55);
	}
}


@keyframes fadeInIntro {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}