/* ============================================================ */
/* AMILI — EFFECTS PLUS v9.9                                    */
/* Couche d'amplification "spectaculaire" — desktop d'abord.    */
/* Mobile (<= 820px) et reduced-motion : versions allégées.     */
/* Chargée APRÈS motion.css : surcharge volontaire.             */
/* ============================================================ */

/* ----- 0. Garde-fous : on n'amplifie QUE si motion ok ----- */
@media (prefers-reduced-motion: reduce) {
  .fx-glow, .fx-tilt, .fx-float, .fx-shine { animation: none !important; }
}

/* ============================================================ */
/* 1. REVEAL renforcé : entrée plus ample + blur cinétique      */
/* ============================================================ */
@media (min-width: 821px) and (prefers-reduced-motion: no-preference) {
  [data-reveal] {
    opacity: 0;
    transform: translateY(48px) scale(0.96);
    filter: blur(6px);
    transition:
      opacity .9s cubic-bezier(.16,1,.3,1),
      transform 1s cubic-bezier(.16,1,.3,1),
      filter .9s cubic-bezier(.16,1,.3,1);
  }
  [data-reveal].is-in {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

/* ============================================================ */
/* 2. HALOS plus intenses + un 3e halo mouvant (desktop)        */
/* ============================================================ */
@media (min-width: 821px) {
  .hero--v2 { --halo-op: 0.34; }
  .metiers, .hero-domain.section--paper { --halo-op: 0.46; }
  .manifesto { --halo-op: 0.5; }
  .approche, .tarifs-resume, .zone, .faq, .avis { --halo-op: 0.3; }
  .cta.section--ink { --halo-op: 0.48; }
}

/* ============================================================ */
/* 3. EMPHASES <em> : pulsation lumineuse (sûr, garde la couleur) */
/* ============================================================ */
@media (min-width: 821px) and (prefers-reduced-motion: no-preference) {
  .headline em,
  .cta-wow__title em,
  .avis__title em {
    animation: fx-em-glow 4s ease-in-out infinite;
  }
}
@keyframes fx-em-glow {
  0%, 100% { text-shadow: 0 0 0 rgba(242,107,44,0); }
  50%      { text-shadow: 0 0 24px rgba(242,107,44,0.45); }
}

/* ============================================================ */
/* 4. BOUTONS : glow pulsé + halo au survol                     */
/* ============================================================ */
.btn--ink, .btn--metier, .cta-wow__submit, .avis__btn, .rdv-confirm-btn {
  position: relative;
  isolation: isolate;
}
@media (prefers-reduced-motion: no-preference) {
  .btn--metier, .cta-wow__submit {
    animation: fx-btn-glow 3.2s ease-in-out infinite;
  }
}
@keyframes fx-btn-glow {
  0%, 100% { box-shadow: 0 14px 30px -12px rgba(242,107,44,0.5), 0 0 0 0 rgba(242,107,44,0.0); }
  50%      { box-shadow: 0 18px 40px -10px rgba(242,107,44,0.75), 0 0 30px 2px rgba(242,107,44,0.35); }
}
.btn--ink:hover, .btn--metier:hover, .avis__btn:hover, .cta-wow__submit:hover {
  transform: translateY(-3px) scale(1.03);
  transition: transform .35s cubic-bezier(.16,1,.3,1);
}

/* Halo lumineux au survol des boutons — via box-shadow, sans toucher ::after (qui porte la teinte glass) */
.btn--ink:hover, .btn--metier:hover, .avis__btn:hover {
  box-shadow: inset 1px 1px 1px rgba(255,255,255,0.75), 0 0 24px 2px rgba(242,107,44,0.4) !important;
}

/* ============================================================ */
/* 5. CARTES : hover 3D plus marqué + glow de bord (desktop)    */
/* ============================================================ */
@media (min-width: 821px) and (prefers-reduced-motion: no-preference) {
  .metier-mini, .tarif-card {
    transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s ease !important;
  }
  .metier-mini:hover {
    transform: translateY(-8px) scale(1.02) !important;
    box-shadow: 0 30px 60px -24px rgba(15,27,45,0.45), inset 1px 1px 1px rgba(255,255,255,0.8) !important;
  }
  .tarif-card:hover {
    transform: translateY(-8px) scale(1.03);
    box-shadow: 0 26px 50px -22px rgba(242,107,44,0.4);
  }
  /* Liseré orange animé sur les cartes métier au survol */
  .metier-mini::before {
    transition: filter .4s ease, opacity .4s ease;
  }
  .metier-mini:hover::after {
    background: linear-gradient(135deg, rgba(242,107,44,0.18), rgba(63,169,245,0.10)) !important;
  }
  /* KPI : léger float continu décalé */
  .kpi-widget {
    animation: fx-float 6s ease-in-out infinite;
  }
  .kpi-widget:nth-child(2) { animation-delay: -1.2s; }
  .kpi-widget:nth-child(3) { animation-delay: -2.4s; }
  .kpi-widget:nth-child(4) { animation-delay: -3.6s; }
  .kpi-widget:nth-child(5) { animation-delay: -4.8s; }
  .kpi-widget:nth-child(6) { animation-delay: -3s; }
}
@keyframes fx-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}

/* ============================================================ */
/* 6. HERO : titre avec entrée ligne par ligne + lueur          */
/* ============================================================ */
@media (min-width: 821px) and (prefers-reduced-motion: no-preference) {
  .hero-v2__line {
    display: inline-block;
    animation: fx-hero-line 1.1s cubic-bezier(.16,1,.3,1) backwards;
  }
  .hero-v2__line:nth-child(1) { animation-delay: .1s; }
  .hero-v2__line:nth-child(2) { animation-delay: .25s; }
  .hero-v2__line:nth-child(3) { animation-delay: .4s; }
}
@keyframes fx-hero-line {
  from { opacity: 0; transform: translateY(40px) rotateX(-30deg); filter: blur(8px); }
  to   { opacity: 1; transform: translateY(0) rotateX(0); filter: blur(0); }
}

/* Badges hero : apparition décalée + petit float */
@media (min-width: 821px) and (prefers-reduced-motion: no-preference) {
  .hero-badge { animation: fx-float 5s ease-in-out infinite; }
  .hero-badge:nth-child(2) { animation-delay: -1.6s; }
  .hero-badge:nth-child(3) { animation-delay: -3.2s; }
}

/* ============================================================ */
/* 7. PROMO BAR : dégradé mouvant lumineux                      */
/* ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .promo-bar {
    background-size: 200% 100% !important;
    animation: fx-promo-shine 6s linear infinite;
  }
}
@keyframes fx-promo-shine {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* ============================================================ */
/* 8. SECTION AVIS : halo Google subtil derrière le bouton      */
/* ============================================================ */
.avis { position: relative; overflow: hidden; }
@media (min-width: 821px) and (prefers-reduced-motion: no-preference) {
  .avis__btn { animation: fx-btn-glow 3.6s ease-in-out infinite; }
}

/* ============================================================ */
/* 9. CTA FINAL : grille animée + orbes plus vivants            */
/* ============================================================ */
@media (min-width: 821px) and (prefers-reduced-motion: no-preference) {
  .cta-bg__orb { animation-duration: 12s !important; }
  .cta-bg__grid { animation: fx-grid-pan 30s linear infinite; }
}
@keyframes fx-grid-pan {
  from { background-position: 0 0; }
  to   { background-position: 60px 60px; }
}

/* ============================================================ */
/* 10. ZONE : pulsation des cercles de la carte                 */
/* ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .zone__ring--free { animation: fx-ring-pulse 4s ease-in-out infinite; }
  .zone__ring--ext  { animation: fx-ring-pulse 5.5s ease-in-out -1s infinite; }
}
@keyframes fx-ring-pulse {
  0%, 100% { opacity: 0.85; }
  50%      { opacity: 1; transform: translate(-50%, -50%) scale(1.015); }
}

/* ============================================================ */
/* 11. MOBILE : on neutralise les effets coûteux                */
/* ============================================================ */
@media (max-width: 820px) {
  .kpi-widget, .hero-badge, .hero-v2__line { animation: none !important; }
  .metier-mini, .tarif-card { transition: transform .25s ease !important; }
  [data-reveal] { filter: none !important; transform: translateY(24px); }
  [data-reveal].is-in { transform: translateY(0); }
  /* On garde le gradient text (léger) mais sans blur lourd */
}

/* ============================================================ */
/* 12. BOUTON URGENCE (rouge) + icône téléphone qui sonne       */
/* ============================================================ */
/* Teinte rouge sur le ::after du système liquid glass */
.btn--urgence::after {
  background: rgba(232,65,53,0.92) !important;
}
.btn--urgence {
  color: #fff !important;
}
@media (prefers-reduced-motion: no-preference) {
  .btn--urgence { animation: fx-urgence-glow 2.4s ease-in-out infinite; }
}
@keyframes fx-urgence-glow {
  0%, 100% { box-shadow: inset 1px 1px 1px rgba(255,255,255,0.6), 0 8px 22px -8px rgba(232,65,53,0.5), 0 0 0 0 rgba(232,65,53,0); }
  50%      { box-shadow: inset 1px 1px 1px rgba(255,255,255,0.6), 0 12px 30px -8px rgba(232,65,53,0.75), 0 0 26px 2px rgba(232,65,53,0.4); }
}
/* Icône téléphone qui sonne (secousse) */
.btn-phone-ring {
  display: inline-block;
  transform-origin: center;
}
@media (prefers-reduced-motion: no-preference) {
  .btn-phone-ring { animation: fx-phone-ring 1.6s ease-in-out infinite; }
}
@keyframes fx-phone-ring {
  0%, 60%, 100% { transform: rotate(0); }
  5%  { transform: rotate(-14deg); }
  10% { transform: rotate(14deg); }
  15% { transform: rotate(-12deg); }
  20% { transform: rotate(12deg); }
  25% { transform: rotate(-8deg); }
  30% { transform: rotate(8deg); }
  35% { transform: rotate(-4deg); }
  40% { transform: rotate(0); }
}