/* ═══════════════════════════════════════════════════════════════
   NOVIA — couche « motion » : défilement fluide, rideau d'entrée,
   révélations au scroll, grain cinématique, curseur, magnétisme,
   bandeau défilant. Tout est neutralisé si l'utilisateur préfère
   réduire les animations (html.m-reduce / prefers-reduced-motion).
   ═══════════════════════════════════════════════════════════════ */

:root {
  --m-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --m-ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --m-curtain: #07070d;
}

/* ── Défilement fluide (Lenis) ─────────────────────────────── */
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }

/* ── Rideau d'entrée / transitions entre pages ─────────────── */
html.m-intro body::before,
html.m-enter body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: var(--m-curtain);
  pointer-events: none;
  /* Filet de sécurité : si motion.js ne se charge pas, le rideau s'efface seul. */
  animation: m-curtain-failsafe 0.4s ease 3s forwards;
}
html.m-enter body::before { animation-delay: 1.2s; }
html.m-ready body::before {
  animation: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.7s var(--m-ease), visibility 0s linear 0.7s;
}
@keyframes m-curtain-failsafe { to { opacity: 0; visibility: hidden; } }

.m-leave-curtain {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--m-curtain);
  clip-path: inset(100% 0 0 0);
  transition: clip-path 0.55s var(--m-ease-in-out);
  pointer-events: none;
}
.m-leave-curtain.is-active { clip-path: inset(0 0 0 0); pointer-events: all; }

/* Intro : logo lettre par lettre */
.m-preloader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  background: var(--m-curtain);
  clip-path: inset(0 0 0 0);
  transition: clip-path 1s var(--m-ease-in-out);
}
.m-preloader.is-done { clip-path: inset(0 0 100% 0); }
.m-preloader-inner { display: grid; justify-items: center; gap: 22px; }
.m-preloader-logo {
  display: flex;
  overflow: hidden;
  font-family: var(--font-display, 'Syne', sans-serif);
  font-weight: 800;
  font-size: clamp(3rem, 10vw, 7rem);
  letter-spacing: -0.03em;
  line-height: 1;
  color: #fff;
}
.m-preloader-logo span { display: inline-block; transform: translateY(110%); animation: m-letter-up 0.9s var(--m-ease) forwards; }
.m-preloader-logo span.is-accent { color: var(--novia-accent-3, #a98bff); }
.m-preloader-bar { width: min(220px, 50vw); height: 1px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.m-preloader-bar::after {
  content: '';
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--novia-accent, #5b3ff8), var(--novia-gold, #f0b429));
  transform-origin: left;
  animation: m-bar 1.1s var(--m-ease-in-out) forwards;
}
.m-preloader-tag {
  font-size: 0.72rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--novia-muted, #6b6b85);
  opacity: 0;
  animation: m-fade 0.8s var(--m-ease) 0.5s forwards;
}
@keyframes m-letter-up { to { transform: translateY(0); } }
@keyframes m-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes m-fade { to { opacity: 1; } }

/* ── Grain cinématique ─────────────────────────────────────── */
.m-grain {
  position: fixed;
  inset: -50%;
  z-index: 9990;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: m-grain 1s steps(6) infinite;
}
@keyframes m-grain {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-4%, 3%); }
  40% { transform: translate(3%, -5%); }
  60% { transform: translate(-2%, 6%); }
  80% { transform: translate(5%, -2%); }
  100% { transform: translate(0, 0); }
}

/* ── Barre de progression de lecture ───────────────────────── */
.m-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1001;
  height: 2px;
  background: linear-gradient(90deg, var(--novia-accent, #5b3ff8), var(--novia-accent-3, #a98bff) 60%, var(--novia-gold, #f0b429));
  transform: scaleX(0);
  transform-origin: left;
  pointer-events: none;
}

/* ── Barre de navigation : se retire en descendant ─────────── */
.navbar { transition: background var(--t-base, 0.3s), padding var(--t-base, 0.3s), border-color var(--t-base, 0.3s), transform 0.5s var(--m-ease); }
.navbar.m-nav-hidden { transform: translateY(-110%); }

/* ── Textes révélés ────────────────────────────────────────── */
.m-line { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.m-line-inner { display: block; transform: translateY(105%); transition: transform 1.1s var(--m-ease); transition-delay: var(--m-delay, 0s); }
.m-word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.m-word-inner { display: inline-block; transform: translateY(110%) rotate(4deg); transform-origin: left bottom; transition: transform 0.9s var(--m-ease); transition-delay: var(--m-delay, 0s); }
.m-in .m-line-inner, .m-in .m-word-inner { transform: none; }

/* Les blocs montent en perspective, comme posés dans l'espace. */
.m-reveal { opacity: 0; transform: perspective(1000px) translate3d(0, 46px, -90px) rotateX(14deg); transform-origin: 50% 100%; transition: opacity 0.9s var(--m-ease), transform 1.1s var(--m-ease); transition-delay: var(--m-delay, 0s); }
.m-reveal.m-in { opacity: 1; transform: none; }

.m-fade-up { opacity: 0; transform: translateY(24px); transition: opacity 1s var(--m-ease), transform 1s var(--m-ease); transition-delay: var(--m-delay, 0s); }
.m-in.m-fade-up, .m-in .m-fade-up { opacity: 1; transform: none; }

.m-img-reveal { clip-path: inset(12% 12% 12% 12% round 18px); transform: scale(1.12); transition: clip-path 1.4s var(--m-ease), transform 1.6s var(--m-ease); }
.m-img-reveal.m-in { clip-path: inset(0 0 0 0 round 0); transform: none; }

/* Le hero gère sa propre entrée : on neutralise l'ancienne animation. */
html.m-js .hero-content,
html.m-js .page-hero-content { animation: none; }

/* ── Fond animé du hero (remplace l'image Canva expirée) ───── */
.m-hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.m-hero-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 30% 50%, transparent 0%, rgba(7, 7, 13, 0.25) 55%, rgba(7, 7, 13, 0.85) 100%),
    linear-gradient(180deg, rgba(7, 7, 13, 0) 70%, var(--novia-bg, #07070d) 100%);
}
.hero-scroll-hint {
  position: absolute;
  left: 50%;
  bottom: 28px;
  z-index: 3;
  display: grid;
  justify-items: center;
  gap: 10px;
  transform: translateX(-50%);
  font-size: 0.68rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--novia-muted, #6b6b85);
}
.hero-scroll-hint::after {
  content: '';
  width: 1px;
  height: 44px;
  background: linear-gradient(180deg, var(--novia-accent-3, #a98bff), transparent);
  transform-origin: top;
  animation: m-scroll-hint 2.2s var(--m-ease-in-out) infinite;
}
@keyframes m-scroll-hint {
  0% { transform: scaleY(0); opacity: 1; }
  60% { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1); opacity: 0; }
}

/* ── Bandeau défilant ──────────────────────────────────────── */
.m-marquee {
  position: relative;
  overflow: hidden;
  padding: 26px 0;
  border-top: 1px solid var(--novia-border, rgba(255, 255, 255, 0.07));
  border-bottom: 1px solid var(--novia-border, rgba(255, 255, 255, 0.07));
  background: linear-gradient(90deg, var(--novia-bg, #07070d), rgba(91, 63, 248, 0.06), var(--novia-bg, #07070d));
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.m-marquee-track { display: flex; width: max-content; will-change: transform; animation: m-marquee 38s linear infinite; }
html.m-js .m-marquee-track { animation: none; }
.m-marquee-group { display: flex; align-items: center; flex-shrink: 0; }
.m-marquee-item {
  padding: 0 28px;
  font-family: var(--font-display, 'Syne', sans-serif);
  font-size: clamp(1.4rem, 3.4vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.28);
}
.m-marquee-item:nth-child(4n + 1) { color: #fff; -webkit-text-stroke: 0; }
.m-marquee-star { color: var(--novia-accent-3, #a98bff); font-size: 1.1rem; }
@keyframes m-marquee { to { transform: translateX(-50%); } }

/* ── Curseur ───────────────────────────────────────────────── */
.m-cursor, .m-cursor-ring { position: fixed; top: 0; left: 0; z-index: 9995; pointer-events: none; border-radius: 50%; opacity: 0; }
.m-cursor { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: #fff; mix-blend-mode: difference; }
.m-cursor-ring {
  width: 38px;
  height: 38px;
  margin: -19px 0 0 -19px;
  border: 1px solid rgba(169, 139, 255, 0.55);
  transition: width 0.35s var(--m-ease), height 0.35s var(--m-ease), margin 0.35s var(--m-ease), background 0.35s, border-color 0.35s, opacity 0.3s, scale 0.2s var(--m-ease);
}
.m-cursor-ring.is-hover { width: 64px; height: 64px; margin: -32px 0 0 -32px; background: rgba(91, 63, 248, 0.12); border-color: rgba(169, 139, 255, 0.8); }
.m-cursor-ring.is-text { opacity: 0 !important; }
/* Curseur avec étiquette (« Voir le projet », « Faire tourner »…). */
.m-cursor-label {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 0 10px;
  font-family: var(--font-display, 'Syne', sans-serif);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.25;
  text-align: center;
  text-transform: uppercase;
  color: #fff;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.25s, transform 0.35s var(--m-ease);
}
.m-cursor-ring.has-label {
  width: 96px;
  height: 96px;
  margin: -48px 0 0 -48px;
  background: rgba(91, 63, 248, 0.82);
  border-color: rgba(201, 184, 255, 0.9);
  backdrop-filter: blur(4px);
}
.m-cursor-ring.has-label .m-cursor-label { opacity: 1; transform: none; }
.m-cursor-ring.is-down { scale: 0.86; }
html.m-cursor-on .m-cursor, html.m-cursor-on .m-cursor-ring { opacity: 1; }

/* ── Reflet lumineux qui suit la souris sur les cartes ─────── */
.m-spot-host { isolation: isolate; }
.m-spotlight {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(124, 92, 255, 0.18), transparent 45%);
  z-index: -1;
}
.m-spot-host:hover > .m-spotlight { opacity: 1; }

/* ── Accessibilité : aucun mouvement si demandé ────────────── */
@media (prefers-reduced-motion: reduce) {
  .m-grain, .m-cursor, .m-cursor-ring, .m-progress, .m-preloader, .m-leave-curtain { display: none !important; }
  .m-line-inner, .m-word-inner, .m-reveal, .m-fade-up, .m-img-reveal { transform: none !important; opacity: 1 !important; clip-path: none !important; transition: none !important; }
  .m-marquee-track { animation-duration: 120s; }
  .hero-scroll-hint::after { animation: none; }
}
@media (hover: none), (pointer: coarse) {
  .m-cursor, .m-cursor-ring { display: none; }
}

/* ── Ambiance « galerie » des pages sans scène 3D (espace client) ── */
.m-ambient {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 26% 62% at 80% -6%, rgba(255, 226, 194, 0.12), transparent 70%),
    radial-gradient(ellipse 30% 55% at 14% -10%, rgba(124, 92, 255, 0.12), transparent 70%),
    repeating-linear-gradient(90deg, rgba(59, 42, 32, 0.22) 0 6px, transparent 6px 16px);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.45) 50%, transparent 88%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.45) 50%, transparent 88%);
}

/* Profondeur des grilles de cartes inclinables (motion.js). */
.m-depth { perspective: 1100px; }

/* ── Ambiance sonore (sound.js) : bouton discret, coin inférieur gauche ── */
.sound-toggle {
  position: fixed;
  left: max(20px, env(safe-area-inset-left, 0px));
  bottom: max(20px, env(safe-area-inset-bottom, 0px));
  z-index: 900;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 16px 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(7, 7, 13, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: rgba(255, 255, 255, 0.78);
  font-family: var(--font-display, 'Syne', sans-serif);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.3s, color 0.3s, background 0.3s;
}
.sound-toggle:hover, .sound-toggle:focus-visible { color: #fff; border-color: rgba(169, 139, 255, 0.6); }
.sound-toggle[aria-pressed="true"] { border-color: rgba(240, 180, 41, 0.5); }
.sound-bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.sound-bars i {
  width: 2px;
  height: 4px;
  border-radius: 1px;
  background: currentColor;
  transition: height 0.3s;
}
.sound-toggle.is-on .sound-bars i { animation: sound-bar 1.1s ease-in-out infinite; background: var(--novia-gold, #f0b429); }
.sound-toggle.is-on .sound-bars i:nth-child(2) { animation-delay: -0.4s; }
.sound-toggle.is-on .sound-bars i:nth-child(3) { animation-delay: -0.8s; }
.sound-toggle.is-on .sound-bars i:nth-child(4) { animation-delay: -0.2s; }
@keyframes sound-bar {
  0%, 100% { height: 4px; }
  50% { height: 14px; }
}
/* Fenêtre ouverte (chat, panier, devis) : le bouton s'efface. */
body:has(.chat-modal.show) > .sound-toggle,
body:has(.cart-modal.show) > .sound-toggle,
body:has(.quote-modal.show) > .sound-toggle { opacity: 0; pointer-events: none; }
/* Sur mobile, le bouton vit dans le menu plein écran. */
.nav-links .sound-item { margin-top: 20px; }
.nav-links .sound-toggle {
  position: static;
  width: 100%;
  height: 48px;
  justify-content: center;
  background: rgba(255, 255, 255, 0.04);
  font-size: 0.74rem;
}
@media (prefers-reduced-motion: reduce) {
  .sound-toggle.is-on .sound-bars i { animation: none; height: 10px; }
}