/* Base commune des sites de démonstration Hoxyd (chaque site garde sa propre DA dans style.css) */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
.wrap { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: clamp(18px, 4vw, 48px); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Apparitions au scroll */
.js [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 1s cubic-bezier(.16, 1, .3, 1), transform 1s cubic-bezier(.16, 1, .3, 1); transition-delay: var(--d, 0s); }
.js [data-reveal].in { opacity: 1; transform: none; }
.js [data-reveal="img"] { transform: scale(1.04); clip-path: inset(8% 0 0 0); transition-property: opacity, transform, clip-path; transition-duration: 1.3s; }
.js [data-reveal="img"].in { clip-path: inset(0 0 0 0); }

/* Menu mobile (le style visuel est défini par chaque site) */
.menu-open { overflow: hidden; }

/* Bandeau de démonstration */
.demo-pill {
  position: fixed; left: 16px; bottom: 16px; z-index: 999;
  display: inline-flex; align-items: center; gap: 10px;
  max-width: calc(100vw - 32px);
  padding: 9px 12px 9px 10px;
  border-radius: 999px;
  background: rgb(18 22 28 / .9);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: #F2F2EE;
  font: 500 12.5px/1.3 system-ui, -apple-system, "Segoe UI", sans-serif;
  box-shadow: 0 10px 30px -12px rgb(0 0 0 / .45);
}
.demo-pill svg { width: 16px; height: 16px; flex: none; color: #E0582F; }
.demo-pill a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.demo-pill button { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; color: #aab; font-size: 15px; line-height: 1; }
.demo-pill button:hover { color: #fff; background: rgb(255 255 255 / .1); }
.capture .demo-pill { display: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal], .js [data-reveal="img"] { opacity: 1; transform: none; clip-path: none; transition: none; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}