/* Polices auto-hebergees (RGPD : aucun appel a Google Fonts) */
@font-face {
  font-family: "Fredoka";
  src: url("../fonts/fredoka-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fredoka";
  src: url("../fonts/fredoka-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fredoka";
  src: url("../fonts/fredoka-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fredoka";
  src: url("../fonts/fredoka-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-latin-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Forme signature : l'aile du phoenix du logo Lojona, reprise en silhouette
   de carte (un seul coin tres arrondi, comme un battement d'aile), impossible
   a exprimer avec les seules classes de rayon Tailwind. */
.wing-shape { border-radius: 3rem 3rem 3rem 0.5rem; }
.wing-shape-alt { border-radius: 3rem 0.5rem 3rem 3rem; }

/* Reveal au scroll : plusieurs directions pour un rendu plus vivant que du fondu simple */
.reveal, .reveal-left, .reveal-right, .reveal-scale {
  transition: opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1);
}
.reveal { opacity: 0; transform: translateY(30px); }
.reveal-left { opacity: 0; transform: translateX(-40px); }
.reveal-right { opacity: 0; transform: translateX(40px); }
.reveal-scale { opacity: 0; transform: scale(.9); }
.reveal.is-visible, .reveal-left.is-visible, .reveal-right.is-visible, .reveal-scale.is-visible {
  opacity: 1;
  transform: none;
}

/* Entree du hero : plusieurs blocs qui s'envolent en cascade */
@keyframes rise {
  from { transform: translateY(20px) rotate(-2deg); opacity: 0; }
  to { transform: translateY(0) rotate(0deg); opacity: 1; }
}
.rise-in { animation: rise .9s cubic-bezier(.22,1,.36,1) both; }

/* Formes flottantes en continu, presentes derriere le hero et les visuels de service */
@keyframes float-a {
  0%, 100% { transform: translate(0,0) rotate(0deg); }
  50% { transform: translate(12px,-20px) rotate(6deg); }
}
@keyframes float-b {
  0%, 100% { transform: translate(0,0) rotate(0deg); }
  50% { transform: translate(-16px,16px) rotate(-8deg); }
}
@keyframes float-c {
  0%, 100% { transform: translate(0,0) scale(1); }
  50% { transform: translate(8px,12px) scale(1.08); }
}
.float-a { animation: float-a 7s ease-in-out infinite; }
.float-b { animation: float-b 8.5s ease-in-out infinite; }
.float-c { animation: float-c 6.2s ease-in-out infinite; }

/* Halo degrade anime, sans dependance externe */
.aura {
  background: radial-gradient(55% 55% at 25% 20%, rgba(255,159,205,.4), transparent 70%),
              radial-gradient(50% 50% at 85% 30%, rgba(159,203,224,.35), transparent 70%),
              radial-gradient(45% 45% at 50% 90%, rgba(255,162,143,.3), transparent 70%);
  animation: auraMove 16s ease-in-out infinite;
}
@keyframes auraMove {
  0%, 100% { transform: translate(0,0) scale(1); }
  50% { transform: translate(-22px,16px) scale(1.06); }
}

/* Effet de carte qui se souleve et s'incline legerement au survol */
.lift-hover {
  transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease;
}
.lift-hover:hover {
  transform: translateY(-8px) rotate(-0.5deg);
  box-shadow: 0 24px 45px -14px rgba(201,0,24,.22);
}

/* Soulignement anime des liens de navigation */
.nav-link { position: relative; }
.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 2px;
  background: currentColor;
  transition: width .3s ease;
}
.nav-link:hover::after, .nav-link[aria-current="page"]::after { width: 100%; }

/* Trait degrade qui se dessine sous les titres de section au scroll */
@keyframes draw { from { width: 0; } to { width: 100%; } }
.underline-draw { display: inline-block; position: relative; }
.underline-draw::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -8px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, #c90018, #ff9fcd);
  width: 0;
}
.underline-draw.is-visible::after {
  animation: draw .9s .15s cubic-bezier(.22,1,.36,1) forwards;
}

/* Accordeon a hauteur animee, la valeur max-height est fixee en ligne par main.js */
.accordion-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height .45s cubic-bezier(.22,1,.36,1);
}

/* Halo qui pulse doucement derriere le badge "populaire" du pack de lancement */
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201,0,24,.35); }
  50% { box-shadow: 0 0 0 14px rgba(201,0,24,0); }
}
.pulse-glow { animation: pulseGlow 2.4s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-left, .reveal-right, .reveal-scale,
  .float-a, .float-b, .float-c, .aura, .rise-in, .pulse-glow {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Bandeau defilant (marquee) pour une touche dynamique supplementaire */
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.marquee-track { animation: marquee 24s linear infinite; }

/* Header flottant : ombre douce constante, sans dependre du scroll */
.floating-nav { box-shadow: 0 12px 32px -12px rgba(26,26,26,.14); }

@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}

/* Animations dynamiques supplementaires : bien plus que du survol simple */
@keyframes wiggle {
  0%, 100% { transform: rotate(0deg) scale(1); }
  25% { transform: rotate(-6deg) scale(1.05); }
  75% { transform: rotate(6deg) scale(1.05); }
}
.wiggle-hover:hover { animation: wiggle .45s ease; }

@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.spin-slow { animation: spin-slow 7s linear infinite; }

@keyframes pop-loop {
  0%, 100% { transform: scale(1); opacity: .85; }
  50% { transform: scale(1.25); opacity: 1; }
}
.pop-loop { animation: pop-loop 2.2s ease-in-out infinite; }

@keyframes bounce-soft {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.bounce-soft { animation: bounce-soft 2.6s ease-in-out infinite; }

@keyframes bounce-in {
  0% { transform: scale(.4) translateY(40px); opacity: 0; }
  60% { transform: scale(1.06) translateY(-6px); opacity: 1; }
  80% { transform: scale(.97) translateY(2px); }
  100% { transform: scale(1) translateY(0); }
}
.bounce-in { animation: bounce-in .8s cubic-bezier(.34,1.56,.64,1) both; }

/* Carte qui s'incline en balancoire au survol, plus vivante qu'un simple lift */
.tilt-hover {
  transition: transform .4s cubic-bezier(.34,1.56,.64,1), box-shadow .4s ease;
}
.tilt-hover:hover {
  transform: translateY(-10px) rotate(-1.5deg) scale(1.02);
  box-shadow: 0 26px 48px -16px rgba(201,0,24,.25);
}

@media (prefers-reduced-motion: reduce) {
  .wiggle-hover:hover, .spin-slow, .pop-loop, .bounce-soft, .bounce-in, .tilt-hover:hover {
    animation: none !important;
    transform: none !important;
  }
}

/* Animation dynamique pour l'icone du hero : flotte et se balance en continu */
@keyframes float-spin {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50% { transform: translateY(-16px) rotate(4deg); }
}
.float-spin { animation: float-spin 4.5s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .float-spin { animation: none !important; }
}