/* ===============================
   MECAMAT 2.0 — CLEAN LIGHT THEME
   =============================== */

/* RESET */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;
  color: #0f172a;
  background: #ffffff;
  line-height: 1.5;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* VARIABLES */
:root {
  --bg: #ffffff;
  --bg-soft: #f6f7fb;

  --text: #0f172a;
  --muted: #475569;

  --line: rgba(15, 23, 42, 0.1);

  --blue: #2563eb;
  --red: #ef4444;

  --radius: 14px;
  --radius-pill: 999px;

  --shadow: 0 20px 40px rgba(2, 6, 23, 0.08);
  --container: 1100px;
}

/* LAYOUT */
.container {
  width: min(var(--container), calc(100% - 40px));
  margin-inline: auto;
}

section {
  padding: clamp(72px, 8vw, 120px) 0;
}

/* TOPBAR */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
}

.brand__mark {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--blue);
}

.nav {
  display: none;
  gap: 18px;
  font-size: 0.95rem;
  color: var(--muted);
}

@media (min-width: 900px) {
  .nav {
    display: flex;
  }
}

/* BUTTONS */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: white;
  font-weight: 600;
  cursor: pointer;
}

.btn:hover {
  background: var(--bg-soft);
}

.btn--primary {
  background: var(--blue);
  border-color: var(--blue);
  color: white;
}

.btn--primary:hover {
  background: #1d4ed8;
}

.btn--call::before {
  content: "📞";
  margin-right: 6px;
}

.btn--wa::before {
  content: "💬";
  margin-right: 6px;
}

.btn--xl {
  padding: 14px 20px;
  font-size: 1rem;
}

/* HERO */
.hero {
  padding-top: 120px;
}

.hero__grid {
  display: grid;
  gap: 40px;
}

@media (min-width: 900px) {
  .hero__grid {
    grid-template-columns: 1.1fr 0.9fr;
    align-items: center;
  }
}

.kicker {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.75rem;
  margin-bottom: 12px;
}

.hero h1 {
  font-size: clamp(40px, 6vw, 64px);
  line-height: 1.05;
  margin: 0 0 16px 0;
}

.lead {
  color: var(--muted);
  max-width: 420px;
  margin-bottom: 24px;
}

.hero__cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* SIMPLE VISUAL BLOCK */
.visual-card {
  height: 320px;
  border-radius: var(--radius);
  background: linear-gradient(
    135deg,
    rgba(37, 99, 235, 0.08),
    rgba(239, 68, 68, 0.06)
  );
  box-shadow: var(--shadow);
}

/* SECTIONS */
.section--alt {
  background: var(--bg-soft);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.section__head {
  max-width: 720px;
  margin-bottom: 40px;
}

.section__head h2 {
  margin: 0 0 10px 0;
  font-size: clamp(28px, 3vw, 36px);
}

.section__head p {
  color: var(--muted);
}

/* CARDS */
.cards {
  display: grid;
  gap: 20px;
}

@media (min-width: 900px) {
  .cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

.card {
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
}

.card p {
  color: var(--muted);
}

/* SERVICES */
.services {
  display: grid;
  gap: 12px;
}

@media (min-width: 900px) {
  .services {
    grid-template-columns: repeat(2, 1fr);
  }
}

.service {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-weight: 600;
}

/* STEPS */
.steps {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 16px;
}

@media (min-width: 900px) {
  .steps {
    grid-template-columns: repeat(3, 1fr);
  }
}

.step {
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
}

/* CONTACT */
.contact__grid {
  display: grid;
  gap: 40px;
}

@media (min-width: 900px) {
  .contact__grid {
    grid-template-columns: 1fr 1fr;
  }
}

.form {
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
}

.field {
  display: grid;
  gap: 6px;
  margin-bottom: 14px;
}

input,
textarea {
  padding: 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  font: inherit;
}

input:focus,
textarea:focus {
  outline: none;
  border-color: var(--blue);
}

/* FOOTER */
.footer {
  background: var(--bg-soft);
  border-top: 1px solid var(--line);
  padding: 60px 0;
}

.footer__grid {
  display: grid;
  gap: 24px;
}

@media (min-width: 900px) {
  .footer__grid {
    grid-template-columns: 1.2fr 1fr 1fr 1fr;
  }
}

/* REVEAL (JS) */
[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
  transition: 0.7s ease;
}

																																						  
																																						  
																																						  console.log("main.js connecté ✅ (V2 effects)");

(() => {
  const prefersReduced =
    window.matchMedia &&
    window.matchMedia("(prefers-reduced-motion: reduce)").matches;

  const $ = (s, r = document) => r.querySelector(s);
  const $$ = (s, r = document) => Array.from(r.querySelectorAll(s));

  const clamp = (n, min, max) => Math.max(min, Math.min(max, n));

  // ====== INIT ======
  document.addEventListener("DOMContentLoaded", () => {
    setYear();
    initTopbar();
    initRevealStagger();
    initActiveNav();
    initNegativeScroll(); // parallax inversé / whiteblend vibe
    initAnchorOffset();
  });

  // ====== YEAR ======
  function setYear() {
    const year = $("#year");
    if (year) year.textContent = String(new Date().getFullYear());
  }

  // ====== TOPBAR SHRINK ======
  function initTopbar() {
    const topbar = $("#topbar");
    if (!topbar) return;

    const onScroll = () => {
      if (window.scrollY > 14) topbar.classList.add("is-scrolled");
      else topbar.classList.remove("is-scrolled");
    };

    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
  }

  // ====== REVEAL (stagger premium) ======
  function initRevealStagger() {
    const nodes = $$("[data-reveal]");
    if (!nodes.length) return;

    // base state comes from CSS:
    // [data-reveal] { opacity:0; transform: translateY(20px); }
    // .is-visible => opacity:1; transform: translateY(0)

    const io = new IntersectionObserver(
      (entries) => {
        // sort by vertical position (nice stagger)
        const visible = entries
          .filter((e) => e.isIntersecting)
          .sort((a, b) => a.boundingClientRect.top - b.boundingClientRect.top);

        visible.forEach((e, i) => {
          const el = e.target;
          // stagger delay
          el.style.transitionDelay = prefersReduced ? "0ms" : `${i * 90}ms`;
          el.classList.add("is-visible");
          io.unobserve(el);
        });
      },
      { threshold: 0.14 }
    );

    nodes.forEach((el) => io.observe(el));
  }

  // ====== ACTIVE NAV (highlight current section) ======
  function initActiveNav() {
    const navLinks = $$(".nav a[href^='#']");
    if (!navLinks.length) return;

    const map = navLinks
      .map((a) => {
        const id = a.getAttribute("href");
        const sec = id ? document.querySelector(id) : null;
        return sec ? { a, sec } : null;
      })
      .filter(Boolean);

    const setActive = (activeAnchor) => {
      navLinks.forEach((a) => a.classList.remove("is-active"));
      if (activeAnchor) activeAnchor.classList.add("is-active");
    };

    const io = new IntersectionObserver(
      (entries) => {
        // pick the most visible section
        const best = entries
          .filter((e) => e.isIntersecting)
          .sort((a, b) => b.intersectionRatio - a.intersectionRatio)[0];

        if (!best) return;

        const hit = map.find((x) => x.sec === best.target);
        if (hit) setActive(hit.a);
      },
      {
        root: null,
        // “middle of viewport” feel
        rootMargin: "-35% 0px -55% 0px",
        threshold: [0.12, 0.2, 0.35, 0.5],
      }
    );

    map.forEach((x) => io.observe(x.sec));

    // default state
    setActive(map[0]?.a);
  }

  // ====== SMOOTH ANCHOR with TOPBAR OFFSET ======
  function initAnchorOffset() {
    const topbar = $("#topbar");
    const links = $$('a[href^="#"]');
    if (!links.length) return;

    links.forEach((a) => {
      a.addEventListener("click", (ev) => {
        const href = a.getAttribute("href");
        if (!href || href === "#") return;
        const target = document.querySelector(href);
        if (!target) return;

        ev.preventDefault();
        const topbarH = topbar ? topbar.getBoundingClientRect().height : 0;
        const y = window.scrollY + target.getBoundingClientRect().top - topbarH - 12;

        window.scrollTo({ top: y, behavior: prefersReduced ? "auto" : "smooth" });
      });
    });
  }

  // ====== WHITEBLEND-LIKE NEGATIVE SCROLL (parallax inverse) ======
  function initNegativeScroll() {
    if (prefersReduced) return;

    // 1) Hero visual parallax (inverse / negative scroll feel)
    const hero = $("#hero");
    const heroCard = $("#heroVisual") || $(".visual-card");
    if (hero && heroCard) {
      heroCard.setAttribute("data-parallax", "hero");
    }

    // 2) Sections: give subtle inverse drift to heads/cards
    // If you want stronger effect later, we can add more selectors.
    const targets = [
      ...$$(".section__head"),
      ...$$(".cards"),
      ...$$(".services"),
      ...$$(".steps"),
      ...$$(".contact__grid"),
    ];

    targets.forEach((el) => el.setAttribute("data-parallax", "section"));

    const parallaxEls = $$("[data-parallax]");
    if (!parallaxEls.length) return;

    let raf = null;

    const tick = () => {
      raf = null;

      const vh = window.innerHeight || 800;

      parallaxEls.forEach((el) => {
        const rect = el.getBoundingClientRect();

        // progress: 0 when element enters, 1 when it leaves
        const start = vh * 0.95;
        const end = -rect.height * 0.3;
        const p = clamp((start - rect.top) / (start - end), 0, 1);

        const type = el.getAttribute("data-parallax");

        if (type === "hero") {
          // inverse drift + tiny scale for depth
          const y = (p - 0.5) * -24;   // negative scroll feel
          const s = 1 + (p - 0.5) * 0.02;
          el.style.transform = `translateY(${y}px) scale(${s})`;
        } else {
          // lighter movement for sections
          const y = (p - 0.5) * -14;   // smaller than hero
          el.style.transform = `translateY(${y}px)`;
        }
      });
    };

    const onScroll = () => {
      if (raf) return;
      raf = requestAnimationFrame(tick);
    };

    tick();
    window.addEventListener("scroll", onScroll, { passive: true });
    window.addEventListener("resize", onScroll);
  }
})();