/* AMILI — MOTION v9.6 : couche d'effets spectaculaires sans toucher au HTML */

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ===== 1. Scroll progress bar (orange glass) injectée en JS ===== */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px;
  z-index: 9999; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(15,27,45,0.04));
}
.scroll-progress__bar {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #F26B2C 0%, #FFB37A 60%, #F26B2C 100%);
  box-shadow: 0 0 14px rgba(242,107,44,0.7), 0 0 28px rgba(242,107,44,0.35);
  transition: width .08s linear;
  will-change: width;
}

/* ===== 2. Cursor blob (spotlight Apple-like) injecté en JS ===== */
.cursor-blob {
  position: fixed; top: 0; left: 0;
  width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(circle, rgba(242,107,44,0.22) 0%, rgba(242,107,44,0.08) 30%, transparent 70%);
  pointer-events: none; z-index: 0;
  transform: translate3d(-200px, -200px, 0);
  transition: transform .12s cubic-bezier(.22,.61,.36,1), opacity .3s;
  opacity: 0;
  mix-blend-mode: screen;
  will-change: transform;
}
.cursor-blob.is-on { opacity: 1; }
.on-night .cursor-blob, body:has(.section--night:hover) .cursor-blob {
  background: radial-gradient(circle, rgba(63,169,245,0.30) 0%, rgba(242,107,44,0.10) 35%, transparent 70%);
}
@media (hover: none), (pointer: coarse) { .cursor-blob { display: none; } }

/* ===== 3. Halos animés respiration + parallax léger via JS variable ===== */
@keyframes halo-breathe {
  0%, 100% { transform: translate(0, var(--halo-py, 0px)) scale(1); opacity: var(--halo-op, 0.25); }
  50%      { transform: translate(20px, calc(var(--halo-py, 0px) - 25px)) scale(1.08); opacity: calc(var(--halo-op, 0.25) * 1.5); }
}
@keyframes halo-breathe-rev {
  0%, 100% { transform: translate(0, var(--halo-py, 0px)) scale(1); opacity: var(--halo-op, 0.20); }
  50%      { transform: translate(-25px, calc(var(--halo-py, 0px) + 30px)) scale(1.10); opacity: calc(var(--halo-op, 0.20) * 1.5); }
}
.hero--v2::before, .hero-domain::before, .metiers::before,
.approche::before, .manifesto::before, .tarifs-resume::before,
.zone::before, .faq::before, .cta.section--ink::before {
  animation: halo-breathe 14s ease-in-out infinite;
  will-change: transform, opacity;
}
.hero--v2::after, .hero-domain::after, .metiers::after,
.approche::after, .manifesto::after, .tarifs-resume::after,
.faq::after {
  animation: halo-breathe-rev 18s ease-in-out -6s infinite;
  will-change: transform, opacity;
}

/* ===== 4. Mesh gradient animé en arrière-plan des sections nuit ===== */
.section--ink, .section--night, .manifesto, .metiers, .hero-domain.section--paper {
  position: relative;
}
.section--ink::before, .section--night::before, .manifesto::before,
.metiers::before, .hero-domain.section--paper::before {
  background-blend-mode: screen;
}
.hero--v2, .metiers, .manifesto, .tarifs-resume {
  background-attachment: fixed;
}
@keyframes mesh-drift {
  0%, 100% { background-position: 0% 0%, 100% 100%; }
  50%      { background-position: 100% 0%, 0% 100%; }
}

/* ===== 5. Reveal enrichi avec direction + scale ===== */
[data-reveal] {
  opacity: 0;
  transform: translateY(34px) scale(0.985);
  transition: opacity 1s cubic-bezier(.22,.61,.36,1), transform 1s cubic-bezier(.22,.61,.36,1);
  transition-delay: calc(var(--reveal-delay, 0) * .10s);
}
[data-reveal].is-in { opacity: 1; transform: translateY(0) scale(1); }
[data-reveal-delay="1"] { --reveal-delay: 1; }
[data-reveal-delay="2"] { --reveal-delay: 2; }
[data-reveal-delay="3"] { --reveal-delay: 3; }
[data-reveal-delay="4"] { --reveal-delay: 4; }
html:not(.js-reveal-on) [data-reveal] { opacity: 1; transform: none; }

/* ===== 6. Split words (mots qui se révèlent) ===== */
.split-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.7em) rotate(2deg);
  transition: opacity .9s cubic-bezier(.22,.61,.36,1), transform .9s cubic-bezier(.22,.61,.36,1);
  transition-delay: calc(var(--word-i, 0) * .055s + .15s);
}
[data-split-words].is-in .split-word { opacity: 1; transform: translateY(0) rotate(0); }

/* ===== 7. Scroll-driven : titre hero qui scale légèrement quand on scroll (Chrome 115+) ===== */
@supports (animation-timeline: scroll()) {
  .hero-v2__title {
    animation: hero-scale linear;
    animation-timeline: scroll(root block);
    animation-range: 0vh 80vh;
  }
  @keyframes hero-scale {
    to { transform: scale(0.94) translateY(-20px); opacity: 0.55; letter-spacing: -0.05em; }
  }
  .hero--v2::before, .hero--v2::after {
    animation-name: halo-breathe, halo-scroll-up;
    animation-timeline: auto, scroll(root block);
    animation-range: auto, 0vh 100vh;
  }
  @keyframes halo-scroll-up {
    to { transform: translateY(-150px) scale(1.2); }
  }
}

/* ===== 8. Tilt 3D + mouse glow sur cartes ===== */
.metier-mini, .tarif-card, .hero-widget, .kpi-widget {
  transform-style: preserve-3d;
  transition: transform .35s cubic-bezier(.22,.61,.36,1) !important;
}
.metier-mini.is-tilting, .tarif-card.is-tilting,
.hero-widget.is-tilting, .kpi-widget.is-tilting {
  transform: perspective(900px) rotateX(calc(var(--ty, 0) * -5deg)) rotateY(calc(var(--tx, 0) * 6deg)) translateY(-5px) translateZ(0) !important;
  transition: transform .1s linear !important;
}
.metier-mini { --mx: 50%; --my: 50%; }
.tarif-card { --mx: 50%; --my: 50%; }
.hero-widget { --mx: 50%; --my: 50%; }
.metier-mini::after, .tarif-card::after, .hero-widget::after {
  background-image: radial-gradient(circle 240px at var(--mx) var(--my), rgba(255,255,255,0.25), transparent 60%) !important;
  transition: background-image .15s linear;
}

/* ===== 9. Boutons magnetic + sheen ===== */
.btn, .btn--ink, .btn--ghost, .btn-tel,
.blog-cta__btn, .footer-rdv-btn, .rdv-confirm-btn {
  transition: transform .25s cubic-bezier(.22,.61,.36,1), filter .25s !important;
}
.btn:hover, .btn--ink:hover, .btn--ghost:hover, .btn-tel:hover {
  filter: brightness(1.08) saturate(1.10);
}
.btn .sheen, .btn--ink .sheen, .btn--ghost .sheen,
.btn-tel .sheen, .blog-cta__btn .sheen, .footer-rdv-btn .sheen {
  position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.55), transparent);
  pointer-events: none; z-index: 0;
  transform: skewX(-22deg);
  border-radius: inherit;
}
.btn:hover .sheen, .btn--ink:hover .sheen, .btn--ghost:hover .sheen,
.btn-tel:hover .sheen, .blog-cta__btn:hover .sheen, .footer-rdv-btn:hover .sheen {
  animation: sheen-slide .9s cubic-bezier(.22,.61,.36,1);
}
@keyframes sheen-slide { to { left: 130%; } }

/* ===== 10. Ticker plus fluide + masque ===== */
.ticker {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ticker__item { transition: color .3s; }
.ticker__item:hover { color: var(--metier); }

/* ===== 11. Section transitions douces (header au scroll) ===== */
.site-header {
  transition: background .5s, box-shadow .5s, backdrop-filter .5s, height .3s !important;
}

/* ===== 12. KPI numbers : monospace tabular pour fluidité du compteur ===== */
.kpi-widget__num { font-variant-numeric: tabular-nums; }

/* ===== 13. Cartes glass : shimmer continu très subtil ===== */
@keyframes glass-shimmer {
  0%, 100% { background-color: rgba(255,255,255,0.10); }
  50%      { background-color: rgba(255,255,255,0.16); }
}
.metiers .metier-mini::after, .hero-domain .glass::after {
  animation: glass-shimmer 8s ease-in-out infinite;
}

/* ===== 14. Halos micro variants pour effet "vivant" ===== */
.hero--v2 { --halo-op: 0.22; }
.metiers, .hero-domain.section--paper { --halo-op: 0.32; }
.manifesto { --halo-op: 0.32; }
.approche, .tarifs-resume, .zone, .faq { --halo-op: 0.18; }
.cta.section--ink { --halo-op: 0.30; }

/* ===== 15. Underline animée sur les liens du nav ===== */
.site-header__nav a {
  position: relative;
  transition: color .2s;
}
.site-header__nav a::after {
  content: ""; position: absolute; left: 0; bottom: -4px;
  width: 100%; height: 2px;
  background: var(--metier);
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s cubic-bezier(.22,.61,.36,1);
}
.site-header__nav a:hover::after { transform: scaleX(1); }
.site-header__nav a:hover { color: var(--metier); }

/* ===== 16. Steps (approche) : numero qui pulse au reveal ===== */
.step.is-in .step__num {
  animation: step-pulse .8s cubic-bezier(.34,1.56,.64,1) .3s;
}
@keyframes step-pulse {
  0%   { transform: scale(0.7); opacity: 0.3; }
  60%  { transform: scale(1.18); opacity: 1; }
  100% { transform: scale(1); }
}

/* ===== 17. Smooth FAQ accordions ===== */
.faq details summary { transition: color .25s; cursor: pointer; }
.faq details[open] summary { color: var(--metier); }

/* ===== 18. Logo header : leger zoom au hover ===== */
.site-header__brand { transition: transform .3s cubic-bezier(.22,.61,.36,1); }
.site-header__brand:hover { transform: scale(1.04); }

/* ===== 19. CTA principal : pulse subtil pour attirer le regard ===== */
@keyframes cta-pulse {
  0%, 100% { box-shadow: inset 1px 1px 1px rgba(255,255,255,0.75), 0 0 0 0 rgba(242,107,44,0); }
  50%      { box-shadow: inset 1px 1px 1px rgba(255,255,255,0.75), 0 0 28px 4px rgba(242,107,44,0.32); }
}
.hero-v2__cta .btn--ink, .hero-domain__cta .btn--ink {
  animation: cta-pulse 3.5s ease-in-out infinite;
}

/* ===== 20. Footer : leger fade au scroll dans la viewport ===== */
.site-footer { transition: opacity .6s; }