/* 3S Sanitaires : styles des effets animes (js/effets.js), inspires d'Atelier Vermont.
   html.fx    : pose dans le <head>, sert a eviter un flash avant le demarrage de GSAP.
   html.fx-on : pose par js/effets.js quand GSAP tourne vraiment.
   Sans JS, sans GSAP ou avec "reduire les animations", ces classes sont absentes
   et la page reste complete et statique. Aucun effet ne masque les boutons d'appel. */

/* ---------- Hero ---------- */
.fx .hero__title .line { overflow: hidden; padding-bottom: .07em; margin-bottom: -.07em; }
.fx .hero__title .line > span { display: block; transform: translateY(110%); }
.fx-on .hero__photo img[data-speed] { position: relative; top: -6%; height: 112%; }

/* ---------- Halo autour de la photo du hero ----------
   Deux cometes vertes font le tour de la photo sur un anneau de 2 px, avec un halo
   flou derriere la photo (lumiere portee). js/effets.js fait tourner l'angle --beam-a
   et accelere au survol. Sans animation (sans GSAP, "reduire les animations") :
   cometes immobiles a 40 deg. Adapte de "Border Beam Panel" (Motiq,
   https://motiq.dev/components/border-beam-panel, licence MIT), trouve sur 21st.dev. */
.hero__visual { --beam-a: 40deg; }
.beam-ring, .beam-glow {
  position: absolute; pointer-events: none;
  top: calc(var(--pt) - 1px); bottom: calc(var(--pb) - 1px);
  left: calc(var(--pl) - 1px); right: -1px;
  border-radius: calc(var(--radius-lg) + 1px);
  background: conic-gradient(from var(--beam-a),
    rgba(46, 139, 42, 0) 0deg,
    rgba(46, 139, 42, .04) 18deg,
    rgba(46, 139, 42, .55) 46deg,
    #9BCB3C 56deg,
    #E9F4D4 60deg,
    rgba(233, 244, 212, 0) 63deg,
    rgba(39, 128, 31, 0) 198deg,
    rgba(39, 128, 31, .04) 216deg,
    rgba(39, 128, 31, .5) 244deg,
    #27801F 254deg,
    #E5F2CC 258deg,
    rgba(229, 242, 204, 0) 261deg,
    rgba(46, 139, 42, 0) 360deg);
}
.beam-ring {
  z-index: 2; padding: 2px;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask-composite: exclude;
}
.beam-glow { z-index: 0; filter: blur(14px); opacity: .45; }
/* Masques jusqu'a leur apparition par GSAP (le garde-fou du <head> les rend visibles) */
.fx .beam-ring, .fx .beam-glow { visibility: hidden; }
@media (forced-colors: active) { .beam-ring, .beam-glow { display: none; } }

/* ---------- Bandeau defilant ---------- */
.marquee { overflow: hidden; padding: clamp(16px, 2.4vw, 26px) 0; background: var(--green-btn); color: var(--white); }
.marquee__track { will-change: transform; }
.marquee__inner {
  display: flex; align-items: center; width: max-content;
  font: 800 clamp(1.9rem, 4.4vw, 3.5rem)/1 var(--head); text-transform: uppercase; letter-spacing: .02em; white-space: nowrap;
  animation: marquee 34s linear infinite;
}
.marquee__inner > * { margin-right: clamp(18px, 2.4vw, 34px); }
.marquee__inner span:nth-of-type(even) { color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, .9); }
.marquee__inner i { display: inline-grid; place-items: center; }
.marquee__inner .ico { width: .5em; height: .5em; fill: rgba(255, 255, 255, .85); stroke: none; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Cartes services : lueur qui suit la souris ---------- */
.service { --mx: 50%; --my: 50%; }
.service > * { position: relative; z-index: 1; }
.service::after {
  content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(360px circle at var(--mx) var(--my), rgba(155, 203, 60, .18), transparent 62%);
  opacity: 0; transition: opacity .35s;
}
@media (hover: hover) and (pointer: fine) {
  .service:hover::after { opacity: 1; }
}
/* Pendant l'entree en cascade, pas de transition CSS sur la position (GSAP s'en charge) */
.fx-on .service.is-entering { transition: none; }

/* ---------- Texte revele mot par mot ---------- */
.word { display: inline; }

/* ---------- Methode : etapes qui s'allument quand l'eau arrive ---------- */
.fx-on .step__num { box-shadow: 0 0 0 2px var(--line); color: #9AA39A; transition: background-color .45s, color .45s, box-shadow .45s; }
.fx-on .step.is-active .step__num { background: var(--green-btn); color: var(--white); box-shadow: 0 0 0 2px var(--green), 0 0 0 9px rgba(155, 203, 60, .22); }

/* ---------- Boutons magnetiques : GSAP gere la position ---------- */
.fx-on .magnetic { transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s; }

/* ---------- Pied de page : lettres geantes ---------- */
.footer__word {
  margin: 0; overflow: hidden; text-align: center; white-space: nowrap; user-select: none;
  font: 800 13.5vw/.8 var(--head); text-transform: uppercase; letter-spacing: .01em;
  color: rgba(255, 255, 255, .07);
}
.footer__word span { display: inline-block; }

/* ---------- Defilement doux (Lenis, ordinateur uniquement) ---------- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .marquee__inner, .pipe__shine { animation: none !important; }
}