/* ==========================================================
   France Lavage — motion design (v2)
   Désactivable : Apparence › Personnaliser › France Lavage › Animations
   ========================================================== */

/* ---------- 2. Barre de progression de lecture ---------- */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 70;
  background: linear-gradient(90deg, #7fb0ff, #2f6fe4, #9ae6ff);
  transform-origin: 0 50%; transform: scaleX(0);
  box-shadow: 0 0 12px rgba(127,176,255,.7);
}

/* ---------- 3. Apparitions au défilement ---------- */
.fl-motion .reveal {
  opacity: 0; transform: translateY(34px);
  transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);
  transition-delay: var(--reveal-delay, 0s);
}
.fl-motion .reveal.is-in { opacity: 1; transform: none; }

/* Titres qui glissent hors d'un masque */
.fl-motion .mask-title { overflow: hidden; }
.fl-motion .mask-title > .mask-inner { display: inline-block; transform: translateY(105%); transition: transform 1s cubic-bezier(.2,.8,.2,1) .1s; }
.fl-motion .mask-title.is-in > .mask-inner { transform: none; }

/* Grands numéros en contour derrière les titres (profondeur) */
.section-head { position: relative; }
.fl-motion .section-head[data-num]::before {
  content: attr(data-num);
  position: absolute; z-index: 0; top: -.32em; right: -.05em;
  font: 800 clamp(6rem, 16vw, 13rem)/1 var(--font-title);
  color: transparent; -webkit-text-stroke: 1px rgba(127,176,255,.16);
  transform: translateY(var(--py, 0px)); pointer-events: none;
}
.section-head > * { position: relative; z-index: 1; }

/* Titre du haut de page : mots qui montent un par un */
.fl-motion .hero h1 .w { display: inline-block; opacity: 0; transform: translateY(.5em) rotate(2deg); filter: blur(6px);
  animation: fl-word .6s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes fl-word { to { opacity: 1; transform: none; filter: none; } }

/* ---------- 4. Haut de page : bulles, halo qui suit la souris ---------- */
.hero .wrap { position: relative; z-index: 1; }
.hero-fx { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; transform: translate3d(var(--bx, 0), var(--by, 0), 0); transition: transform .6s ease-out; }
.bubble {
  position: absolute; bottom: -90px; border-radius: 50%;
  background: radial-gradient(circle at 30% 28%, rgba(255,255,255,.55), rgba(160,200,255,.12) 38%, rgba(127,176,255,.03) 68%);
  border: 1px solid rgba(170,210,255,.3);
  box-shadow: inset -4px -6px 12px rgba(127,176,255,.15);
  animation: fl-rise linear infinite;
}
@keyframes fl-rise {
  0%   { transform: translate(0, 0) scale(.85); opacity: 0; }
  10%  { opacity: 1; }
  50%  { transform: translate(var(--drift, 20px), -55vh) scale(1); }
  92%  { opacity: .85; }
  100% { transform: translate(0, -112vh) scale(1.08); opacity: 0; }
}
.hero-glow {
  position: absolute; width: 620px; height: 620px; border-radius: 50%; pointer-events: none; z-index: 0;
  left: var(--gx, 70%); top: var(--gy, 20%); transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(47,111,228,.32), transparent 65%);
  transition: left .8s ease-out, top .8s ease-out;
}

/* ---------- 6. Bandeau géant qui défile ---------- */
.ribbon { overflow: hidden; padding: 26px 0; background: var(--bg-0, #070b16); border-top: 1px solid rgba(255,255,255,.05); border-bottom: 1px solid rgba(255,255,255,.05); }
.ribbon__row { display: flex; white-space: nowrap; will-change: transform; }
.ribbon__row + .ribbon__row { margin-top: 6px; }
.ribbon__row span {
  font: 800 clamp(2.4rem, 7vw, 5.6rem)/1.05 var(--font-title); text-transform: uppercase; letter-spacing: -.01em;
  padding-right: .5em; color: var(--white);
}
.ribbon__row span::after { content: "✦"; color: var(--blue-light); font-size: .45em; vertical-align: middle; padding-left: .5em; }
.ribbon__row span.o { color: transparent; -webkit-text-stroke: 1.5px rgba(127,176,255,.55); }

/* ---------- 7. Formules : cartes 3D + reflet ---------- */
.plans { perspective: 1200px; }
.plan { transform-style: preserve-3d; will-change: transform; }
.plan::before {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(160,200,255,.18), transparent 45%);
  opacity: 0; transition: opacity .3s ease;
}
.plan.is-tilting::before { opacity: 1; }
.plan--featured { animation: fl-glow 3.2s ease-in-out infinite; }
@keyframes fl-glow {
  0%, 100% { box-shadow: 0 0 0 1px rgba(127,176,255,.25), 0 18px 50px rgba(47,111,228,.22); }
  50%      { box-shadow: 0 0 0 1px rgba(127,176,255,.6), 0 24px 80px rgba(47,111,228,.5); }
}
.step, .review { transition: transform .35s ease, border-color .35s ease; }
.step:hover, .review:hover { transform: translateY(-5px); border-color: rgba(127,176,255,.35); }

/* Étapes : numéros qui s'allument l'un après l'autre */
.fl-motion .step__num { transition: background .5s ease, color .5s ease, box-shadow .5s ease; transition-delay: var(--reveal-delay, 0s); }
.fl-motion .steps.is-lit .step__num { background: var(--blue); color: var(--white); box-shadow: 0 0 0 6px rgba(47,111,228,.18), 0 0 30px rgba(47,111,228,.6); }

/* ---------- 8. Boutons : reflet + aimant ---------- */
.btn--primary { position: relative; overflow: hidden; isolation: isolate; }
.btn--primary::after {
  content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent);
  transform: skewX(-20deg); z-index: -1; pointer-events: none;
}
.btn--primary:hover::after { animation: fl-shine .8s ease; }
.hero .btn--primary::after, .final-cta .btn--primary::after, .float-cta::after { animation: fl-shine-loop 5s ease 2.5s infinite; }
@keyframes fl-shine { from { left: -60%; } to { left: 130%; } }
@keyframes fl-shine-loop { 0% { left: -60%; } 18%, 100% { left: 130%; } }
.btn.is-magnetic { transition: transform .25s cubic-bezier(.2,.8,.2,1); }

/* ---------- 10. Carte des zones : villes + onde radar ---------- */
.zones__map svg circle, .zones__map svg text { transform-box: fill-box; transform-origin: center; }
.fl-motion .zones__map g circle { transform: scale(0); transition: transform .5s cubic-bezier(.2,1.6,.4,1); }
.fl-motion .zones__map g text { opacity: 0; transition: opacity .6s ease; }
.fl-motion .zones__map.is-in g circle { transform: none; }
.fl-motion .zones__map.is-in g text { opacity: 1; }
.zones__map .radar { fill: none; stroke: #7fb0ff; stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.zones__map.is-in .radar { animation: fl-radar 2.8s ease-out infinite; }
.zones__map.is-in .radar--2 { animation-delay: 1.4s; }
@keyframes fl-radar { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(14); opacity: 0; } }

/* ---------- 11. En-tête qui s'affine ---------- */
.site-header .wrap, .site-header .logo__img { transition: height .3s ease; }
.site-header { transition: box-shadow .3s ease; }
.site-header.is-scrolled { box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.site-header.is-scrolled .wrap { height: 60px; }
.site-header.is-scrolled .logo__img { height: 50px; }
.hero__badge strong { display: inline-block; }

/* ---------- Mobile & accessibilité ---------- */
@media (max-width: 720px) {
  .site-header.is-scrolled .wrap { height: 56px; }
  .site-header.is-scrolled .logo__img { height: 44px; }
  .fl-motion .section-head[data-num]::before { font-size: 6rem; top: -.2em; }
  .hero-glow { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .fl-motion .reveal, .fl-motion .hero h1 .w, .fl-motion .mask-title > .mask-inner { opacity: 1 !important; transform: none !important; filter: none !important; animation: none !important; transition: none !important; }
  .hero-fx, .hero-glow, .scroll-progress { display: none !important; }
  .btn--primary::after, .plan--featured, .radar { animation: none !important; }
  .fl-motion .zones__map g circle, .fl-motion .zones__map g text { transform: none !important; opacity: 1 !important; }
}

/* ---------- Fond du haut de page : reflets de carrosserie ---------- */
.hero-fx--reflets .streak {
  position: absolute; top: -60%; left: 0; height: 220%;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(127,176,255,.05) 25%,
    rgba(190,215,255,.16) 46%,
    rgba(255,255,255,.22) 50%,
    rgba(190,215,255,.14) 54%,
    rgba(127,176,255,.05) 75%,
    transparent 100%);
  filter: blur(18px);
  transform: translateX(-70vw) rotate(24deg);
  animation: fl-streak linear infinite;
  mix-blend-mode: screen;
}
@keyframes fl-streak {
  from { transform: translateX(-70vw) rotate(24deg); }
  to   { transform: translateX(150vw) rotate(24deg); }
}
/* Ligne de lumière nette qui balaie de temps en temps (comme un néon sur la peinture) */
.hero-fx--reflets .sheen {
  position: absolute; top: -40%; left: 0; width: 2px; height: 180%;
  background: linear-gradient(transparent, rgba(255,255,255,.55), transparent);
  box-shadow: 0 0 18px 4px rgba(160,200,255,.35);
  transform: translateX(-10vw) rotate(24deg);
  animation: fl-sheen 7s cubic-bezier(.6,0,.3,1) 1.5s infinite;
}
@keyframes fl-sheen {
  0%   { transform: translateX(-10vw) rotate(24deg); opacity: 0; }
  8%   { opacity: 1; }
  40%  { transform: translateX(110vw) rotate(24deg); opacity: 1; }
  41%, 100% { transform: translateX(110vw) rotate(24deg); opacity: 0; }
}

/* ---------- Fond du haut de page : gouttes sur pare-brise ---------- */
.hero-fx--gouttes .drop {
  position: absolute; border-radius: 50% 50% 48% 48% / 55% 55% 45% 45%;
  background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,.85) 0 12%, transparent 22%),
    radial-gradient(circle at 50% 60%, rgba(140,185,255,.18), rgba(10,16,32,.05) 70%);
  box-shadow: 0 2px 3px rgba(0,0,0,.45), inset 0 -2px 4px rgba(127,176,255,.35), inset 0 1px 1px rgba(255,255,255,.25);
  opacity: .8;
}
.hero-fx--gouttes .drop--slide { animation: fl-drop-slide ease-in infinite; }
.hero-fx--gouttes .drop--slide::after {
  content: ""; position: absolute; left: 35%; bottom: 100%; width: 30%; height: 0;
  background: linear-gradient(transparent, rgba(160,200,255,.18));
  border-radius: 2px;
  animation: inherit; animation-name: fl-drop-trail;
}
@keyframes fl-drop-slide {
  0%, 35% { transform: translateY(0); }
  100% { transform: translateY(70vh); opacity: 0; }
}
@keyframes fl-drop-trail {
  0%, 35% { height: 0; }
  100% { height: 120px; }
}

@media (max-width: 720px) {
  .hero-fx--reflets .streak { filter: blur(14px); }
}
.fl-motion .hero .reveal { transition-duration: .65s; }